:root {
color-scheme:dark;
--bg:#0a101b;
--panel:#101a28;
--ink:#f1f4f8;
--muted:#aab7c7;
--line:#263344;
--accent:#78e0ce;
--font:'Inter',system-ui,sans-serif;
--display:'Space Grotesk',var(--font)
}

* {
box-sizing:border-box
}
html {
scroll-behavior:smooth;
scroll-padding-top:100px
}
body {
margin:0;
background:var(--bg);
color:var(--ink);
font:16px/1.7 var(--font);
-webkit-font-smoothing:antialiased
}
img {
display:block;
max-width:100%;
height:auto
}
a {
color:inherit;
text-decoration:none
}
button {
font:inherit
}
a,button,summary {
-webkit-tap-highlight-color:transparent
}
a:focus-visible,button:focus-visible,summary:focus-visible {
outline:3px solid var(--accent);
outline-offset:6px
}
h1,h2,h3,p {
margin:0
}
h1,h2,h3 {
font-family:var(--display);
line-height:1.13;
letter-spacing:-.035em;
font-weight:700
}
h1 {
font-size:clamp(2.8rem,4.4vw,4.6rem)
}
h2 {
font-size:clamp(2rem,3vw,3.1rem)
}
h3 {
font-size:1.6rem
}
p {
color:var(--muted)
}
p+p {
margin-top:18px
}
ul {
padding-left:22px;
color:var(--muted)
}
li+li {
margin-top:8px
}
.wrap {
width:min(1200px,calc(100% - 96px));
margin-inline:auto
}
.section {
padding:92px 0
}
.tinted {
background:var(--panel);
border-block:1px solid var(--line)
}
.eyebrow {
color:var(--accent);
font-size:.75rem;
font-weight:600;
letter-spacing:.12em;
text-transform:uppercase;
margin-bottom:16px;
line-height:1.6
}
.lede {
font-size:1.13rem;
line-height:1.75;
max-width:650px
}
.actions {
display:flex;
align-items:center;
flex-wrap:wrap;
gap:20px;
margin-top:28px
}
.button {
display:inline-flex;
align-items:center;
justify-content:center;
min-height:48px;
padding:12px 21px;
border-radius:6px;
font-size:.92rem;
font-weight:600;
text-align:center;
line-height:1.4;
border:1px solid transparent;
transition:background .2s,border-color .2s
}
.primary {
background:var(--accent);
color:#081719
}
.primary:hover {
background:#a0efdf
}
.secondary {
border-color:#617187;
background:transparent
}
.secondary:hover {
border-color:var(--accent)
}
.text-link {
display:inline-block;
color:var(--accent);
font-size:.94rem;
font-weight:500;
text-underline-offset:5px
}
.text-link:hover,.editorial a:hover,.site-footer a:hover {
text-decoration:underline
}
.small-print {
font-size:.84rem;
line-height:1.7
}
.site-header {
position:sticky;
top:0;
z-index:20;
background:rgba(10,16,27,.97);
border-bottom:1px solid var(--line)
}
.navigation {
min-height:86px;
display:flex;
justify-content:space-between;
align-items:center;
gap:24px
}
.wordmark {
font:700 1.23rem/1.3 var(--display);
letter-spacing:-.03em;
white-space:nowrap
}
.wordmark span {
display:block;
font:400 .69rem/1.7 var(--font);
letter-spacing:.05em;
color:var(--muted)
}
.nav-links {
display:flex;
gap:25px;
align-items:center;
list-style:none;
padding:0;
margin:0;
font-size:.87rem;
color:var(--ink)
}
.nav-links li+li {
margin:0
}
.nav-links a:not(.button):hover {
color:var(--accent)
}
.nav-toggle {
display:none
}
.nav-book {
min-height:42px;
padding:10px 18px
}
.skip-link {
position:fixed;
top:-100px;
left:20px;
background:var(--accent);
color:var(--bg);
padding:12px;
z-index:100
}
.skip-link:focus {
top:12px
}
.home-hero {
padding-top:62px
}
.hero-grid {
display:grid;
grid-template-columns: .95fr 1.15fr;
align-items:center;
gap:44px
}
.hero-copy .lede {
margin-top:23px;
max-width:480px
}
.hero-copy .eyebrow {
font-size:.71rem
}
.hero-copy .actions {
gap:22px
}
.hero-film {
min-width:0
}
.film {
min-width:0
}
.video-wrapper {
position:relative;
aspect-ratio:16/9;
overflow:hidden;
background:#111e2e;
border-radius:10px;
border:1px solid var(--line)
}
.video-wrapper img,.video-wrapper iframe {
width:100%;
height:100%;
object-fit:cover;
border:0
}
.play-btn {
position:absolute;
inset:0;
display:flex;
gap:10px;
align-items:center;
justify-content:center;
isolation:isolate;
font-size:.83rem;
font-weight:600;
color:white;
text-shadow:0 1px 5px #000
}
.play-btn::before {
content:'';
position:absolute;
width:142px;
height:48px;
background:rgba(8,16,26,.88);
border:1px solid rgba(255,255,255,.4);
border-radius:30px;
z-index:-1;
transition:background .2s
}
.play-btn:hover::before {
background:#103b40
}
.play-btn svg {
width:23px;
height:23px
}
.player-note {
font-size:.69rem;
line-height:1.5;
margin-top:7px;
color:#91a1b5
}
.player-note a {
text-decoration:underline;
text-underline-offset:2px
}
.film-caption {
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:20px;
margin-top:22px
}
.film-caption .eyebrow {
font-size:.65rem;
margin-bottom:5px
}
.film-caption h2 {
font-size:1.3rem
}
.film-caption .text-link {
font-size:.8rem;
white-space:nowrap
}
.credentials {
display:flex;
gap:20px;
justify-content:space-between;
border-bottom:1px solid var(--line);
margin-top:44px;
padding-block:22px;
font-size:.78rem;
color:var(--muted)
}
.credentials a:hover {
color:var(--accent)
}
.section-heading {
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:48px;
margin-bottom:38px
}
.section-heading>p {
max-width:400px;
font-size:1rem
}
.work-grid {
display:grid;
grid-template-columns:1fr 1fr;
gap:35px
}
.work-copy {
padding-top:22px
}
.work-copy .eyebrow {
font-size:.68rem;
margin-bottom:12px
}
.work-copy h3 {
font-size:1.75rem
}
.work-copy>p:not(.eyebrow) {
margin:16px 0 18px;
max-width:490px
}
.service-grid {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:22px
}
.service-card {
display:flex;
flex-direction:column;
align-items:flex-start;
border-top:1px solid #53687a;
padding:25px 10px 12px 0
}
.service-card+.service-card {
border-left:1px solid var(--line);
padding-left:24px
}
.number {
font-size:.74rem;
color:var(--accent);
margin-bottom:25px
}
.service-card h3 {
font-size:1.9rem;
margin-bottom:18px
}
.service-card>p:not(.price) {
min-height:108px;
font-size:.95rem
}
.price {
font:500 1.06rem/1.5 var(--font);
color:var(--ink);
margin-top:23px;
min-height:70px
}
.price span {
display:block;
font:400 .78rem/1.6 var(--font);
color:var(--muted);
margin-top:5px
}
.service-card ul {
font-size:.85rem;
padding-left:17px;
margin:21px 0 27px;
flex:1
}
.service-card .quiet-link {
font-size:.8rem;
color:var(--muted);
margin-top:12px
}
.campaign-band {
margin-top:45px;
padding:30px;
border:1px solid #3e5d66;
background:#14232d;
display:flex;
align-items:center;
gap:40px;
justify-content:space-between;
border-radius:8px
}
.campaign-band .eyebrow {
margin-bottom:8px
}
.campaign-band h3 {
font-size:1.55rem
}
.campaign-band p:not(.eyebrow) {
max-width:670px;
margin-top:12px;
font-size:.92rem
}
.campaign-band .button {
flex-shrink:0
}
.campaign-band+.small-print {
margin-top:19px
}
.about-grid {
display:grid;
grid-template-columns:.65fr 1.35fr;
gap:70px;
align-items:start
}
.portrait {
border-radius:10px;
overflow:hidden
}
.portrait img {
width:100%;
aspect-ratio:4/5;
object-fit:cover;
object-position:center
}
.about-grid .lede {
margin-top:24px
}
.about-grid p:not(.eyebrow) {
margin-bottom:20px
}
.process {
border-top:1px solid var(--line);
margin-top:32px;
padding-top:26px;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:22px
}
.process span {
font-size:.75rem;
color:var(--accent)
}
.process h3 {
font-size:1.05rem;
margin-top:10px;
letter-spacing:-.02em
}
.process p {
font-size:.84rem;
margin-top:10px
}
.faq-wrap {
max-width:800px
}
.faq-wrap h2 {
margin-bottom:30px
}
details {
border-top:1px solid var(--line);
padding:20px 0
}
details:last-child {
border-bottom:1px solid var(--line)
}
summary {
cursor:pointer;
font-weight:500;
padding-right:15px;
color:var(--ink)
}
details p {
margin-top:16px;
max-width:680px;
font-size:.95rem
}
.closing {
text-align:center
}
.closing h2 {
max-width:750px;
margin-inline:auto
}
.closing .lede {
margin:24px auto 0
}
.closing .actions {
justify-content:center
}
.site-footer {
border-top:1px solid var(--line);
padding:50px 0 24px
}
.footer-grid {
display:grid;
grid-template-columns:1.2fr 1fr 1fr;
gap:40px
}
.site-footer p {
font-size:.82rem;
margin-top:14px
}
.site-footer .footer-label {
color:var(--ink);
margin-top:0;
margin-bottom:15px
}
.footer-grid>div>a:not(.wordmark) {
display:block;
font-size:.82rem;
color:var(--muted);
margin-top:10px
}
.footer-bottom {
display:flex;
gap:22px;
font-size:.76rem;
color:var(--muted);
border-top:1px solid var(--line);
margin-top:34px;
padding-top:24px
}
.footer-bottom span {
margin-right:auto
}
.detail-intro {
padding-top:45px;
padding-bottom:55px
}
.back-link {
display:block;
width:fit-content;
font-size:.8rem;
color:var(--muted);
margin-bottom:38px
}
.detail-intro .lede {
margin-top:26px;
max-width:800px
}
.detail-intro h1 {
max-width:1000px
}
.detail-grid {
display:grid;
grid-template-columns:1.45fr 1fr;
gap:80px;
padding-bottom:65px
}
.editorial section+section {
margin-top:40px
}
.editorial h2 {
font-size:1.65rem;
margin-bottom:18px
}
.editorial p,.editorial li {
font-size:1rem
}
.editorial a {
color:var(--accent);
text-decoration:underline;
text-underline-offset:4px
}
.project-aside {
align-self:start;
border:1px solid var(--line);
background:var(--panel);
border-radius:9px;
padding:28px
}
.project-aside h2 {
font-size:1.6rem;
margin-block:19px
}
.project-aside>.button {
margin-block:25px 18px
}
.project-aside>.text-link {
display:block;
margin-top:18px
}
.project-aside hr {
border:0;
border-top:1px solid var(--line);
margin:30px 0
}
.project-aside>p {
font-size:.94rem
}
.case-film {
max-width:1040px
}
.case-copy {
max-width:800px;
padding-block:60px
}
.contact-options {
display:grid;
grid-template-columns:1fr 1fr;
gap:28px
}
.contact-card {
border:1px solid var(--line);
border-radius:10px;
padding:36px;
background:var(--panel)
}
.contact-card h2 {
font-size:1.9rem;
margin-bottom:22px
}
.contact-card .button {
margin:24px 0 18px
}
.contact-card ul {
font-size:.94rem
}
.email-fallback {
font-size:.84rem;
overflow-wrap:anywhere
}
.email-fallback a {
text-decoration:underline
}
.contact-note {
padding-block:35px 80px;
max-width:820px;
text-align:center
}
.contact-note p {
font-size:.9rem;
margin-bottom:20px
}

@media(min-width:1450px) {
.hero-grid {
gap:60px
}
.home-hero {
padding-top:80px
}

}

@media(max-width:1050px) {
.wrap {
width:calc(100% - 56px)
}
.nav-links {
gap:17px;
font-size:.79rem
}
.hero-grid {
gap:28px;
grid-template-columns:1fr 1fr
}
.hero-copy .lede {
font-size:1rem
}
.hero-copy h1 {
font-size:3rem
}
.hero-copy .eyebrow {
font-size:.64rem
}
.film-caption {
display:block
}
.film-caption .text-link {
margin-top:12px
}
.about-grid {
gap:36px
}
.service-card h3 {
font-size:1.65rem
}
.service-card>p:not(.price) {
min-height:135px
}
.campaign-band {
gap:20px
}
.detail-grid {
gap:40px
}

}

@media(max-width:800px) {
html {
scroll-padding-top:80px
}
.wrap {
width:calc(100% - 40px)
}
.section {
padding:60px 0
}
.navigation {
min-height:72px
}
.wordmark {
font-size:1.12rem
}
.nav-toggle {
display:flex;
align-items:center;
gap:10px;
background:none;
color:var(--ink);
border:1px solid var(--line);
border-radius:5px;
padding:8px 12px;
font-size:.82rem;
min-height:44px
}
.nav-links {
display:none;
position:absolute;
top:72px;
left:0;
right:0;
background:var(--panel);
padding:20px;
box-shadow:0 18px 35px #0006;
border-bottom:1px solid var(--line)
}
.nav-links.open {
display:flex;
flex-direction:column;
align-items:stretch;
gap:8px
}
.nav-links a {
display:block;
padding:10px
}
.home-hero {
padding-top:32px
}
.hero-grid {
display:flex;
flex-direction:column;
align-items:stretch;
gap:28px
}
.hero-copy h1 {
font-size:clamp(2.35rem,6vw,3.3rem)
}
.hero-copy .eyebrow {
font-size:.63rem;
margin-bottom:13px
}
.hero-copy .lede {
font-size:.97rem;
line-height:1.65;
margin-top:17px;
max-width:620px
}
.hero-copy .actions {
margin-top:22px;
gap:17px
}
.hero-copy .button {
font-size:.85rem;
padding-inline:15px
}
.hero-copy .text-link {
font-size:.84rem
}
.film-caption {
display:flex;
align-items:center;
margin-top:16px
}
.film-caption .text-link {
margin-top:0;
font-size:.75rem
}
.film-caption h2 {
font-size:1.15rem
}
.film-caption .eyebrow {
font-size:.6rem
}
.credentials {
margin-top:26px;
padding-block:20px;
flex-direction:column;
gap:7px;
font-size:.71rem
}
.section-heading {
display:block;
margin-bottom:28px
}
.section-heading>p {
margin-top:20px;
max-width:600px;
font-size:.94rem
}
.work-grid {
gap:40px;
grid-template-columns:1fr
}
.work-copy {
padding-top:16px
}
.work-copy h3 {
font-size:1.55rem
}
.work-copy>p:not(.eyebrow) {
font-size:.94rem
}
.service-grid {
grid-template-columns:1fr;
gap:25px
}
.service-card,.service-card+.service-card {
border-left:0;
padding:25px 0 0
}
.service-card>p:not(.price) {
min-height:0;
max-width:600px
}
.service-card h3 br {
display:none
}
.service-card h3 {
font-size:1.8rem
}
.service-card h3 br::after {
content:' '
}
.number {
margin-bottom:16px
}
.service-card ul {
margin:20px 0
}
.price {
margin-top:20px;
min-height:0
}
.campaign-band {
display:block;
padding:25px
}
.campaign-band .button {
margin-top:24px
}
.about-grid {
grid-template-columns:1fr
}
.portrait {
max-width:320px
}
.portrait img {
aspect-ratio:5/4;
object-position:50% 37%
}
.about-grid>div:last-child {
min-width:0
}
.about-grid h2 {
font-size:2.15rem
}
.process {
gap:16px
}
.process p {
font-size:.78rem
}
.process h3 {
font-size:.95rem
}
.footer-grid {
grid-template-columns:1fr 1fr;
gap:30px
}
.footer-grid>div:first-child {
grid-column:1/-1
}
.detail-intro {
padding-top:30px;
padding-bottom:36px
}
.detail-intro h1 {
font-size:2.5rem
}
.detail-intro h1 br {
display:none
}
.detail-intro .lede {
font-size:1.02rem;
margin-top:22px
}
.detail-grid {
grid-template-columns:1fr;
gap:36px
}
.project-aside {
padding:25px
}
.case-copy {
padding-top:40px
}
.contact-options {
grid-template-columns:1fr;
gap:20px
}
.contact-card {
padding:27px
}
.contact-card h2 {
font-size:1.7rem
}
.contact-note {
padding-bottom:50px
}
.back-link {
margin-bottom:28px
}

}

@media(max-width:380px) {
.wrap {
width:calc(100% - 32px)
}
.hero-copy h1 {
font-size:2.15rem
}
.hero-copy .actions {
gap:12px
}
.hero-copy .button {
font-size:.8rem;
padding-inline:13px
}
.film-caption {
align-items:flex-start;
flex-direction:column;
gap:10px
}
.process {
grid-template-columns:1fr
}
.process p {
font-size:.88rem
}
.footer-grid {
grid-template-columns:1fr
}
.footer-bottom {
flex-wrap:wrap
}
.footer-bottom span {
width:100%
}

}

@media(prefers-reduced-motion:reduce) {
html {
scroll-behavior:auto
}
*,*::before,*::after {
transition:none!important
}

}


@media(min-width:801px) {
.detail-grid>.project-aside {
grid-column:2;
grid-row:1
}
.detail-grid>.editorial {
grid-column:1;
grid-row:1
}

}