/* October feedback: a typographic hero and clearer editorial navigation. */
.hero-film{position:absolute;inset:0;z-index:-3;pointer-events:none;background:#080d12}
.hero-film img,.hero-film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% center}
.hero-film video{opacity:0;transition:opacity .7s ease}
.hero-film.is-playing video{opacity:1}
.hero:has(.hero-film) .hero-shade{background:linear-gradient(90deg,rgba(3,8,14,.87) 0%,rgba(3,8,14,.72) 40%,rgba(3,8,14,.24) 100%),linear-gradient(0deg,#05090bea,transparent 35%,#05090b20)}
.hero:has(.hero-film)::before,.hero:has(.hero-film)::after{opacity:.36}
@media(max-width:580px){.hero-film img,.hero-film video{object-position:60% center}.hero:has(.hero-film) .hero-shade{background:linear-gradient(90deg,#03080ed9,#03080e75),linear-gradient(0deg,#05090bf2,transparent 65%)}}
@media(prefers-reduced-motion:reduce){.hero-film video{transition:none}}
.desktop-nav{gap:clamp(14px,1.7vw,27px);justify-content:center}.desktop-nav a{white-space:nowrap}
.mobile-nav{max-height:calc(100svh - 110px);overflow-y:auto}
@media(min-width:851px) and (max-width:1100px){.site-header{gap:16px;padding-inline:22px}.desktop-nav{gap:15px}.desktop-nav a{font-size:11px}.header-actions{gap:12px}.header-actions>.client-link{display:none}}
.intro,.services{border-bottom:1px solid var(--line)}
/* Pale blue light adds depth to the light sections without a solid colour block. */
body{background:#f3f8fc;overflow-x:clip}
.intro,.services,.process,.faq-section{position:relative;isolation:isolate}
.intro::before,.services::before,.process::before,.faq-section::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 8% 25%,#55afff24,transparent 48%),radial-gradient(ellipse at 90% 80%,#55afff35,transparent 45%);opacity:.8;animation:paper-light-breathe 14s ease-in-out infinite alternate;animation-play-state:paused}
.services::before{background:radial-gradient(ellipse at 0% 55%,#55afff38,transparent 48%),radial-gradient(ellipse at 95% 12%,#72c5ff24,transparent 42%);animation-delay:-5s}
.process::before{background:radial-gradient(ellipse at 50% 75%,#55afff38,transparent 60%),radial-gradient(ellipse at 5% 5%,#9edfff26,transparent 40%);animation-delay:-9s}
.faq-section::before{background:radial-gradient(ellipse at 9% 65%,#55afff30,transparent 48%),radial-gradient(ellipse at 95% 5%,#55afff28,transparent 45%);animation-delay:-3s}
.intro.glow-awake::before,.services.glow-awake::before,.process.glow-awake::before,.faq-section.glow-awake::before{animation-play-state:running}
.intro::before,.services::before,.process::before,.faq-section::before{left:calc((100% - 100vw)/2);right:calc((100% - 100vw)/2);border-radius:0;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 14%,#000 86%,transparent)}
.services-heading .display,.services-heading .display .blue{color:var(--blue)}
.format-strip .format-tile{background:linear-gradient(145deg,#fffffff2,#edf7ffdc);border-color:#b9d9f1;box-shadow:0 7px 26px #328ed610,inset 0 1px 0 #fff}
.format-strip .format-tile:hover{background:#dcefff;border-color:var(--blue);box-shadow:0 13px 32px #328ed625}
.service{box-shadow:0 7px 24px #247bc408}.service[open]{box-shadow:0 12px 35px #2782cb14}
.process-grid li{background:linear-gradient(155deg,#fffffff5,#f1f8ffe8);border-color:#c3dcef;box-shadow:0 7px 28px #348bca0c}
.process-grid li::before{box-shadow:0 0 12px #55afff88}
.faq-list details{border-color:#c3d9e9}.faq-list summary span{color:#328acb}.faq-list details[open]{background:#ffffff65;border-radius:14px;padding-inline:18px;box-shadow:0 8px 25px #3185c40b}
.intro,.services,.faq-section{border-color:#c6dceb}
.section-marker .tiny-square{box-shadow:0 0 12px #55afff88}
@keyframes paper-light-breathe{0%{opacity:.48}100%{opacity:1}}
@media(prefers-reduced-motion:reduce){.intro::before,.services::before,.process::before,.faq-section::before{animation:none!important;opacity:.8}}
/* Blue ambient light stays behind content and never intercepts clicks. */
.hero,.about-copy,.contact-section{position:relative;isolation:isolate;overflow:hidden}
.hero-shade{z-index:-2}
.hero::before,.hero::after,.about-copy::before,.about-copy::after,.contact-section::before,.contact-section::after{content:"";position:absolute;pointer-events:none;z-index:-1;width:130%;height:140%;left:-15%;top:-20%;background-repeat:no-repeat;animation:blue-light-drift 19s ease-in-out infinite alternate;animation-play-state:paused;transform-origin:center;opacity:.85}
.hero::before{background:radial-gradient(ellipse at 75% 35%,#2089ee68,transparent 43%),radial-gradient(ellipse at 20% 80%,#2e67c242,transparent 39%)}
.hero::after{background:radial-gradient(ellipse at 93% 85%,#59caff50,transparent 36%),radial-gradient(ellipse at 15% 8%,#256bd238,transparent 34%);animation-name:blue-light-return;animation-duration:25s;animation-delay:-8s}
.about-copy::before{background:radial-gradient(ellipse at 90% 20%,#278bd76b,transparent 44%),radial-gradient(ellipse at 15% 90%,#2371c64d,transparent 40%);animation-duration:21s;animation-delay:-6s}
.about-copy::after{background:radial-gradient(ellipse at 90% 90%,#55afff5c,transparent 42%);animation-name:blue-light-return;animation-duration:26s;animation-delay:-15s}
.contact-section::before{background:radial-gradient(ellipse at 12% 20%,#227ed064,transparent 39%),radial-gradient(ellipse at 85% 75%,#55afff62,transparent 45%);animation-duration:23s;animation-delay:-10s}
.contact-section::after{background:radial-gradient(ellipse at 75% 5%,#2a8fe452,transparent 38%),radial-gradient(ellipse at 10% 90%,#2d68c442,transparent 35%);animation-name:blue-light-return;animation-duration:29s;animation-delay:-4s}
.hero.glow-awake::before,.hero.glow-awake::after,.about-copy.glow-awake::before,.about-copy.glow-awake::after,.contact-section.glow-awake::before,.contact-section.glow-awake::after{animation-play-state:running}
@keyframes blue-light-drift{0%{transform:translate(-5%,-3%) rotate(-7deg) scale(.96)}50%{transform:translate(6%,4%) rotate(3deg) scale(1.07)}100%{transform:translate(-1%,9%) rotate(9deg) scale(1.02)}}
@keyframes blue-light-return{0%{transform:translate(5%,6%) rotate(8deg) scale(1.05)}50%{transform:translate(-6%,-2%) rotate(-5deg) scale(.98)}100%{transform:translate(2%,-7%) rotate(-9deg) scale(1.1)}}
@media(max-width:580px){.hero::before,.hero::after,.about-copy::before,.about-copy::after,.contact-section::before,.contact-section::after{opacity:.7}}
@media(prefers-reduced-motion:reduce){.hero::before,.hero::after,.about-copy::before,.about-copy::after,.contact-section::before,.contact-section::after{animation:none!important;transform:none;opacity:.65}}
.hero{background:#080d12;min-height:760px;height:94svh;max-height:1080px;align-items:center}
.hero-shade{background:radial-gradient(ellipse at 100% 60%,#12355050,transparent 65%);pointer-events:none}
.hero-content.wrap{width:calc(100% - 64px);max-width:none;margin-left:32px;margin-right:32px;padding-top:135px;padding-bottom:100px}
.hero h1{font-size:clamp(78px,10.2vw,158px);max-width:1250px;letter-spacing:-.07em;margin-bottom:28px}
.hero h1>span:first-child{font-size:clamp(17px,2.5vw,38px);letter-spacing:-.025em;line-height:1.3;margin-bottom:22px}
.hero-bottom{max-width:1200px;margin-top:40px}.hero-caption{left:32px;right:32px}.hero-scroll{gap:18px}
.creative-ribbon{padding:25px 0;--ribbon-gap:40px}.creative-ribbon>div{animation-duration:17s;gap:var(--ribbon-gap)}
.creative-ribbon:hover>div,.creative-ribbon:focus>div{animation-play-state:paused}.creative-ribbon:focus-visible{outline:3px solid white;outline-offset:-5px}
.section-marker{margin-bottom:35px}.section-marker .tiny-square{width:25px;height:3px;flex-basis:25px}.section-marker .chapter{font-size:9px;letter-spacing:1.5px}
.format-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;border:0;padding:0;margin-top:60px}
.format-tile{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;min-height:145px;padding:22px 18px;background:white;border:1px solid #dce4eb;border-radius:18px;transition:background .35s,border-color .35s,transform .45s var(--ease),box-shadow .4s;overflow:hidden}
.format-tile strong{font-size:14px;letter-spacing:-.3px;line-height:1.4;max-width:110px}.format-tile .format-number{font-size:9px;letter-spacing:1px;color:#627484}
.format-tile .format-arrow{display:block;position:absolute;right:18px;top:16px;font-size:25px;line-height:1;color:#286d9f;transition:transform .4s var(--ease)}
.format-tile:hover{background:#e6f3ff;border-color:#8cc9f7;transform:translateY(-7px);box-shadow:0 15px 30px #12334f0d}.format-tile:hover .format-arrow{transform:translate(3px,-3px)}
.work-carousel{position:relative;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;padding-right:18%;border-radius:24px;scroll-behavior:smooth}
.work-carousel::-webkit-scrollbar{display:none}.work-grid{display:flex;gap:28px;grid-template-columns:none}.work-card{flex:0 0 100%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always}
.work-carousel .work-card.reveal{opacity:1;transform:none!important;transition:none}.work-brand{padding-top:0}.work-image,.work-feature .work-image,.brand-composition{aspect-ratio:1.7}
.brand-composition .brand-slide{width:34%}.brand-composition .slide-front{left:22%;top:8%}.brand-composition .slide-back{left:48%;top:13%}
.work-image>img{object-position:center 55%}.frame-caption strong{font-size:clamp(30px,4vw,57px)}
.work-card:focus-visible{outline-offset:-4px}.carousel-controls{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:30px}.carousel-position{font-size:11px;letter-spacing:2px;color:#99b3c6;margin:0}
.audience-surface{display:flex;flex-direction:column;justify-content:space-between;min-height:480px;padding:40px;border:1px solid #ffffff26;border-radius:26px;background:#14212c;transition:border-color .4s,background .4s;overflow:hidden}.audience-brand{background:#162e42}.audience-creator{background:#193f5c}.audience-card:hover .audience-surface{border-color:var(--blue);background:#204a6b}.audience-card-top,.audience-card-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px}.audience-card-top>span:first-child{font-size:10px;letter-spacing:1.8px;color:#b8d8ee;font-weight:700}.audience-arrow{display:grid;place-items:center;border:1px solid #ffffff40;border-radius:50%;width:48px;height:48px;font-size:24px;transition:transform .4s,background .4s}.audience-card:hover .audience-arrow{transform:translate(3px,-3px);background:var(--blue);color:#0a1823}.audience-surface h3{font-size:clamp(35px,4.8vw,73px);letter-spacing:-.055em;line-height:1.04;margin:50px 0 22px;color:#f1f8ff}.audience-surface>p{font-size:15px;color:#b6cfdf;margin-bottom:45px;max-width:500px}.audience-card-bottom{border-top:1px solid #ffffff22;padding-top:20px;font-size:8px;letter-spacing:1.3px;color:#b1d0e6}.audience-card-bottom>span:last-child{color:#e3f4ff;white-space:nowrap}@media(max-width:580px){.audience-surface{min-height:430px;padding:25px 22px;border-radius:20px}.audience-surface h3{font-size:39px;margin-top:45px}.audience-surface>p{font-size:13px;line-height:1.8}.audience-card-top>span:first-child{font-size:8px;letter-spacing:1.2px}.audience-arrow{width:38px;height:38px;font-size:21px}.audience-card-bottom{font-size:6px;letter-spacing:1px;gap:12px}}
.carousel-controls>div{display:flex;gap:10px}.carousel-controls button{display:grid;place-items:center;width:50px;height:50px;border:1px solid #ffffff35;border-radius:50%;background:transparent;color:#daedfb;font-size:23px;transition:background .25s,color .25s,transform .3s}
.carousel-controls button:hover:enabled{background:var(--blue);color:#0b1620;transform:translateY(-2px)}.carousel-controls button:disabled{opacity:.25;cursor:default}.work-note{margin-top:25px}
.faq-section{grid-template-columns:1.15fr 1fr;gap:80px}.faq-heading .display{font-size:clamp(62px,6.8vw,104px);line-height:1;letter-spacing:-.065em}.faq-heading .text-link{margin-top:8px}
.underlined{position:relative;text-decoration:none;display:inline-block}.underlined::after{content:"";position:absolute;bottom:-6px;left:0;right:0;height:4px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform 1s .25s var(--ease)}
.is-visible .underlined::after,.is-visible.underlined::after{transform:scaleX(1)}html:not(.motion-ready) .underlined::after{transform:scaleX(1)}
.process-grid li.is-visible::before{animation:accent-draw .9s .25s var(--ease) both}.contact-arrow{transition:transform .5s var(--ease)}.contact-top:hover .contact-arrow{transform:translate(8px,-8px)}
.service[open] .service-body{animation:service-enter .45s var(--ease) both}.about-photo img{scale:1.025;transition:scale 1.2s var(--ease)}.about-photo:hover img{scale:1.065}
@keyframes accent-draw{from{width:0}to{width:48px}}@keyframes service-enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:1000px){.format-tile{min-height:130px;padding:19px 14px}.format-tile strong{font-size:12px;max-width:95px}.format-tile .format-arrow{right:13px}.faq-section{gap:45px;grid-template-columns:1fr 1fr}.hero-content.wrap{width:calc(100% - 48px);margin-inline:24px}.hero-caption{left:24px;right:24px}}
@media(max-width:850px){.hero{min-height:740px}.hero h1{font-size:11.4vw}.hero h1>span:first-child{font-size:2.8vw}.hero-content.wrap{padding-top:140px}.format-strip{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.format-tile{min-height:128px}.format-tile strong{font-size:14px;max-width:120px}.work-carousel{padding-right:12%}.frame-caption strong{font-size:40px}.faq-heading .display{font-size:65px}.faq-section{gap:35px}.about-copy .display{margin-top:0}}
@media(max-width:580px){.hero{height:90svh;min-height:675px;max-height:900px}.hero-content.wrap{width:calc(100% - 40px);margin-inline:20px;padding-top:110px;padding-bottom:95px}.hero h1{font-size:12.7vw;line-height:1}.hero h1>span:first-child{font-size:clamp(12px,3.4vw,19px);margin-bottom:20px;letter-spacing:-.01em}.hero-label{font-size:8px;margin-bottom:28px}.hero-bottom{margin-top:28px}.hero-caption{left:20px;right:20px}.creative-ribbon{padding:21px 0}.creative-ribbon>div{animation-duration:14s}.format-strip{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:35px}.format-tile{min-height:118px;padding:19px 16px}.format-tile:last-child{grid-column:1/-1;min-height:90px;flex-direction:row;align-items:flex-end;padding-right:54px}.format-tile:last-child strong{max-width:none}.format-tile .format-number,.format-tile .format-arrow{display:block!important}.format-tile:last-child .format-number{align-self:flex-start}.format-tile strong{font-size:14px}.work-carousel{padding-right:5%;border-radius:18px}.work-grid{gap:16px}.work-image,.work-feature .work-image,.brand-composition{aspect-ratio:.95}.brand-composition .brand-slide{width:58%}.brand-composition .slide-front{left:9%;top:12%}.brand-composition .slide-back{left:43%;top:21%}.work-meta h3{font-size:18px}.frame-caption strong{font-size:34px}.carousel-controls button{width:44px;height:44px}.faq-section{grid-template-columns:1fr;gap:35px}.faq-heading .display{font-size:72px;max-width:100%;margin-bottom:22px}.section-marker .chapter{font-size:8px}.section-marker{margin-bottom:32px}.hero-scroll{bottom:70px}.contact-arrow{display:none}}
@media(prefers-reduced-motion:reduce){.work-carousel{scroll-behavior:auto}.format-tile:hover{transform:none}.underlined::after{transform:scaleX(1)}.process-grid li.is-visible::before{animation:none}.about-photo img{scale:1}.about-photo:hover img{scale:1}.creative-ribbon>div{animation:none}.contact-top:hover .contact-arrow{transform:none}}

/* More space for the film, with the introduction and call to action kept apart. */
.hero-content.wrap{height:100%;display:flex;flex-direction:column;align-items:flex-start;padding-top:clamp(135px,17svh,180px);padding-bottom:clamp(80px,9svh,105px)}
.hero-label{margin-bottom:26px}
.hero h1{font-size:clamp(64px,8vw,122px);margin-bottom:0;flex-shrink:0}
.hero h1>span:first-child{font-size:clamp(16px,2vw,30px);margin-bottom:18px}
.hero-bottom{margin-top:auto;padding-top:64px;flex-shrink:0}
@media(max-width:850px){.hero h1{font-size:9vw}.hero h1>span:first-child{font-size:2.3vw}.hero-content.wrap{padding-top:140px;padding-bottom:110px}.hero-bottom{padding-top:55px}}
@media(max-width:580px){.hero-content.wrap{padding-top:125px;padding-bottom:90px}.hero-label{margin-bottom:24px}.hero h1{font-size:10.8vw}.hero h1>span:first-child{font-size:clamp(11px,2.9vw,16px);margin-bottom:18px}.hero-bottom{padding-top:50px}.hero-bottom p{margin-bottom:24px}}