/* Ghazi Bilal — page layout on Nocturne tokens. Colors/type/radius/shadow all come from styles.css. */
:root{--leading:28px;--half:14px;--edge:clamp(20px,5vw,72px);--measure:56ch}
html{scroll-behavior:smooth}
:target{scroll-margin-top:96px}
[id]{scroll-margin-top:96px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;text-wrap:pretty;background:radial-gradient(1200px 720px at 82% -180px,color-mix(in srgb,var(--color-accent-900) 78%,transparent),transparent 60%),radial-gradient(1100px 800px at -10% 62%,color-mix(in srgb,black 34%,transparent),transparent 55%),var(--color-bg)}
.wrap{max-width:1200px;margin:0 auto;padding:0 var(--edge)}
a{color:var(--color-accent);text-decoration:none}
a:hover{color:var(--color-accent-300)}

/* — masthead — */
.nav{position:sticky;top:0;z-index:40;gap:var(--space-6);padding-block:var(--space-4);padding-inline:max(var(--edge),calc((100% - 1200px)/2 + var(--edge)));backdrop-filter:blur(14px);background:color-mix(in srgb,var(--color-bg) 72%,transparent);transition:padding-block .3s cubic-bezier(.22,.61,.36,1),background .3s,box-shadow .3s}
.nav.is-condensed{padding-block:var(--space-2);background:color-mix(in srgb,var(--color-bg) 90%,transparent);box-shadow:0 1px 0 var(--color-divider),var(--shadow-sm)}
.nav-progress{position:absolute;left:0;right:0;bottom:0;height:1.5px;overflow:hidden;pointer-events:none}
.nav-progress i{display:block;height:100%;background:linear-gradient(to right,var(--color-accent-800),var(--color-accent));transform:scaleX(0);transform-origin:0 50%;transition:transform .12s linear}
.nav-brand{letter-spacing:-0.01em}
.nav-links{display:flex;gap:var(--space-6);align-items:center;margin-right:var(--space-4)}
.nav a{white-space:nowrap;color:color-mix(in srgb,var(--color-text) 72%,transparent);transition:color .2s}
.nav-links a{position:relative;padding-block:2px}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:var(--color-accent);transform:scaleX(0);transform-origin:0 50%;transition:transform .3s cubic-bezier(.22,.61,.36,1)}
.nav-links a:hover{color:var(--color-text)}
.nav-links a:hover::after,.nav-links a.is-active::after,.nav-links a[aria-current]::after{transform:scaleX(1)}
.nav a[aria-current],.nav-links a.is-active{color:var(--color-accent)}
.nav-burst{width:9px;height:9px;border-radius:50%;background:var(--color-accent);display:none}

/* mobile drawer */
.nav-toggle{display:none;width:36px;height:36px;padding:0;place-items:center}
.nav-toggle .bars{display:grid;gap:5px;width:16px}
.nav-toggle .bars i{display:block;height:1.5px;background:currentColor;border-radius:2px;transition:transform .28s cubic-bezier(.22,.61,.36,1),opacity .2s}
.nav-toggle.is-open .bars i:first-child{transform:translateY(3.25px) rotate(45deg)}
.nav-toggle.is-open .bars i:last-child{transform:translateY(-3.25px) rotate(-45deg)}
.nav-drawer{position:fixed;left:0;right:0;top:var(--nav-h,56px);z-index:39;overflow:hidden;background:color-mix(in srgb,var(--color-bg) 96%,transparent);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--color-divider),var(--shadow-md);max-height:0;opacity:0;transition:max-height .3s cubic-bezier(.22,.61,.36,1),opacity .22s}
.nav-drawer.in{max-height:60vh;opacity:1}
.nav-drawer-inner{display:grid;gap:var(--space-4);padding:var(--space-6) var(--edge) var(--space-8)}
.nav-drawer-inner a:not(.btn){font-family:var(--font-heading);font-size:22px;letter-spacing:-0.01em;color:var(--color-text)}
.nav-drawer-inner a:not(.btn):hover{color:var(--color-accent)}
@media (max-width:820px){.nav-links{display:none}.nav-toggle{display:grid}}
@media (min-width:821px){.nav-drawer{display:none}}

/* — shared type — */
.kicker{position:relative;display:block;font-size:13px;line-height:var(--half);letter-spacing:.06em;text-transform:uppercase;color:var(--color-accent);font-feature-settings:"tnum" 1;margin:0 0 calc(var(--leading) - var(--half))}
.kicker::before{content:"";position:absolute;left:-64px;top:calc(50% - .5px);width:44px;height:1px;background:var(--color-accent)}
@media (max-width:1280px){.kicker::before{display:none}}
.kicker.inline{padding-left:60px}
.kicker.inline::before{display:block;left:0}
.sec{padding:calc(3*var(--leading)) 0}
.sec-title{font-size:clamp(34px,4.6vw,62px);line-height:1.04;letter-spacing:-0.022em;margin:0;text-box:trim-both cap alphabetic}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:var(--leading) clamp(24px,5vw,88px);align-items:end}
.lede{font-size:16px;line-height:var(--leading);color:color-mix(in srgb,var(--color-text) 74%,transparent);max-width:var(--measure);margin:0}
.rule{height:1px;border:0;margin:0;background:linear-gradient(to right,transparent,var(--color-divider) 48px calc(100% - 48px),transparent)}
.muted{color:color-mix(in srgb,var(--color-text) 62%,transparent)}
@media (max-width:820px){.sec-head{grid-template-columns:1fr;align-items:start}}

/* — hero, shared parts — */
.hero{padding:calc(1.5*var(--leading)) 0 calc(2*var(--leading))}
.hero-ghost{position:absolute;inset:auto 0 auto 0;top:-2%;font-family:var(--font-heading);font-weight:var(--font-heading-weight);font-size:clamp(180px,30vw,460px);line-height:.8;letter-spacing:-0.04em;color:color-mix(in srgb,var(--color-text) 5%,transparent);pointer-events:none;user-select:none;white-space:nowrap;overflow:hidden}
.hero-name{font-family:var(--font-heading);font-weight:var(--font-heading-weight);font-size:clamp(52px,11.6vw,168px);line-height:.9;letter-spacing:-0.035em;margin:0;text-box:trim-both cap alphabetic;white-space:nowrap;min-width:0}
.fit-inner{display:inline-block}
.roles{display:grid;gap:2px;font-size:14px;line-height:1.5;color:color-mix(in srgb,var(--color-text) 62%,transparent);padding-left:60px;position:relative}
.roles::before{content:"";position:absolute;left:0;top:11px;width:44px;height:1px;background:var(--color-accent)}
.roles b{font-weight:500;color:var(--color-text)}
.hero-cta{display:flex;gap:var(--space-3);flex-wrap:wrap}
.hero-stage{position:relative;display:grid}
.hero-stage>*{min-width:0}
.hero-copy{display:grid;gap:var(--leading);align-content:end;min-width:0}
.photo-frame{position:relative;border-radius:var(--radius-lg);overflow:hidden}
.photo-frame image-slot{width:100%;height:100%}

/* variant A — name over portrait (reference layout) */
[data-hero="a"] .hero-stage{grid-template-columns:1fr;justify-items:center}
[data-hero="a"] .hero-photo{position:relative;z-index:1;width:min(44%,500px);aspect-ratio:3/4;mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent)}
[data-hero="a"] .hero-copy{position:relative;z-index:2;width:100%;margin-top:calc(-2.4*var(--leading));display:grid;justify-items:center;gap:var(--leading)}
[data-hero="a"] .hero-name{text-align:center;width:100%;text-shadow:0 14px 48px rgba(0,0,0,.5)}
[data-hero="a"] .hero-side{position:absolute;left:0;top:46%;z-index:3;max-width:210px}
@media (max-width:900px){[data-hero="a"] .hero-photo{width:76%}[data-hero="a"] .hero-side{position:static;max-width:none;justify-self:start;margin-bottom:var(--leading)}[data-hero="a"] .hero-copy{margin-top:calc(-1*var(--leading))}}

/* variant B — split: type left, portrait right */
[data-hero="b"] .hero-stage{grid-template-columns:minmax(0,1.05fr) minmax(0,.72fr);grid-template-areas:"side photo" "copy photo";gap:var(--leading) clamp(24px,5vw,72px);align-items:end}
[data-hero="b"] .hero-side{grid-area:side;align-self:start;margin-top:var(--leading)}
[data-hero="b"] .hero-photo{grid-area:photo;aspect-ratio:4/5}
[data-hero="b"] .hero-copy{grid-area:copy}

@media (max-width:900px){[data-hero="b"] .hero-stage{grid-template-columns:1fr;grid-template-areas:"side" "photo" "copy"}[data-hero="b"] .hero-photo{aspect-ratio:3/2}}

/* variant C — roles, wide portrait, then the name */
[data-hero="c"] .hero-stage{grid-template-columns:1fr;grid-template-areas:"side" "photo" "copy";gap:var(--leading)}
[data-hero="c"] .hero-side{grid-area:side}
[data-hero="c"] .hero-photo{grid-area:photo;aspect-ratio:21/9;width:100%}
[data-hero="c"] .hero-copy{grid-area:copy;display:grid;gap:var(--leading)}

@media (max-width:900px){[data-hero="c"] .hero-photo{aspect-ratio:3/2}}

/* — about — */
.about{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:calc(1.5*var(--leading)) clamp(24px,5vw,88px);align-items:center}
.about h2{font-size:clamp(28px,3.4vw,44px);line-height:1.14;letter-spacing:-0.02em;margin:0;max-width:18ch}
.about h2 .dim{color:color-mix(in srgb,var(--color-text) 42%,transparent)}
.about-note{margin:calc(1.5*var(--leading)) 0 0;font-size:15.5px;line-height:var(--leading);color:color-mix(in srgb,var(--color-text) 76%,transparent);max-width:50ch}
.float-card{position:relative;padding:var(--space-4);border-radius:var(--radius-lg);background:color-mix(in srgb,var(--color-surface) 82%,transparent);box-shadow:var(--shadow-md);display:grid;gap:var(--space-4)}
.float-card image-slot{width:100%;aspect-ratio:16/10}
.float-card p{margin:0;font-size:13.5px;line-height:1.6;color:color-mix(in srgb,var(--color-text) 80%,transparent)}
@media (max-width:900px){.about{grid-template-columns:1fr}}

/* — partners — */
.partners{display:flex;flex-wrap:wrap;align-items:center;gap:var(--leading) clamp(28px,5vw,64px);margin-top:calc(1.5*var(--leading))}
.partners span{font-family:var(--font-heading);font-weight:500;font-size:clamp(15px,1.6vw,20px);letter-spacing:-0.01em;color:color-mix(in srgb,var(--color-text) 46%,transparent)}

/* — results band — */
.band{background:radial-gradient(900px 420px at 85% -40%,color-mix(in srgb,var(--color-section-glow) 70%,transparent),transparent 64%),var(--color-section);padding:calc(2.75*var(--leading)) 0}
.band .grid{display:grid;grid-template-columns:repeat(4,auto);justify-content:space-between;gap:calc(1.5*var(--leading)) var(--leading)}
.stat-num{font-family:var(--font-heading);font-weight:var(--font-heading-weight);font-size:clamp(34px,3.7vw,54px);line-height:calc(2*var(--leading));margin:0 0 0 -0.055em;text-box:trim-both cap alphabetic}
.stat-label{font-size:13px;line-height:var(--half);letter-spacing:.06em;text-transform:uppercase;color:color-mix(in srgb,var(--color-text) 64%,transparent);margin:var(--half) 0 0}
@media (max-width:760px){.band .grid{grid-template-columns:repeat(2,1fr);justify-content:start}}

/* — numbered service rows — */
.feature{display:grid;grid-template-columns:minmax(56px,120px) minmax(0,380px) minmax(0,1fr);gap:var(--leading) clamp(24px,4vw,72px);align-items:baseline;padding:calc(1.5*var(--leading)) 0;position:relative}
.feature+.feature::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(to right,transparent,var(--color-neutral-700) 48px calc(100% - 48px),transparent)}
.f-num{font-family:var(--font-heading);font-weight:var(--font-heading-weight);font-size:15px;line-height:var(--leading);color:var(--color-accent);font-feature-settings:"tnum" 1;margin:0}
.f-title{font-family:var(--font-heading);font-weight:var(--font-heading-weight);font-size:24px;line-height:var(--leading);letter-spacing:-0.01em;margin:0}
.f-copy{font-size:15.5px;line-height:var(--leading);margin:0;color:color-mix(in srgb,var(--color-text) 78%,transparent);max-width:52ch}
@media (max-width:880px){.feature{grid-template-columns:1fr;gap:var(--half)}}

/* — case studies — */
.cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--leading);margin-top:calc(1.5*var(--leading))}
.case{display:grid;gap:var(--space-4);align-content:start;padding:var(--space-4);border-radius:var(--radius-lg);background:color-mix(in srgb,var(--color-surface) 62%,transparent);box-shadow:var(--shadow-sm);transition:box-shadow .25s,transform .25s;color:inherit}
a.case:hover{box-shadow:var(--shadow-md);transform:translateY(-3px);color:inherit}
.case image-slot{width:100%;aspect-ratio:4/3}
.case h3{font-size:20px;line-height:1.2;margin:0;letter-spacing:-0.01em}
.case p{margin:0;font-size:14px;line-height:1.62;color:color-mix(in srgb,var(--color-text) 72%,transparent)}
.case-metrics{display:flex;flex-wrap:wrap;gap:var(--space-2)}
@media (max-width:900px){.cases{grid-template-columns:1fr}}

/* — offering / big feature panel — */
.panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:calc(1.5*var(--leading)) clamp(24px,5vw,72px);align-items:center;padding:calc(2*var(--leading)) 0}
.panel h2{font-size:clamp(30px,4vw,54px);line-height:1.04;letter-spacing:-0.022em;margin:0}
.panel image-slot{width:100%;aspect-ratio:5/4}
.checks{display:grid;gap:var(--half);margin:calc(1.5*var(--leading)) 0 0;padding:0;list-style:none}
.checks li{position:relative;padding-left:26px;font-size:15.5px;line-height:var(--leading);color:color-mix(in srgb,var(--color-text) 80%,transparent)}
.checks li::before{content:"";position:absolute;left:0;top:13px;width:14px;height:1px;background:var(--color-accent)}
@media (max-width:900px){.panel{grid-template-columns:1fr}}

/* — videos — */
.video-main{position:relative;margin-top:calc(1.5*var(--leading));border-radius:var(--radius-lg);overflow:hidden}
.video-main image-slot{width:100%;aspect-ratio:16/7}
.play{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.play i{display:grid;place-items:center;width:76px;height:76px;border-radius:50%;background:color-mix(in srgb,var(--color-bg) 55%,transparent);border:1px solid color-mix(in srgb,var(--color-text) 40%,transparent);backdrop-filter:blur(8px)}
.play svg{width:22px;height:22px;margin-left:3px;color:var(--color-text)}
.video-rail{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(190px,24vw,250px);gap:var(--space-4);margin-top:var(--space-4);overflow-x:auto;padding-bottom:var(--space-2);scrollbar-width:thin}
.video-rail image-slot{width:100%;aspect-ratio:16/10}
.video-rail figure{display:grid;gap:var(--space-2)}
.video-rail figcaption{font-size:12px;color:color-mix(in srgb,var(--color-text) 58%,transparent);margin:0}

/* — testimonials — */
.quotes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--leading);margin-top:calc(1.5*var(--leading))}
.quote-card{display:grid;gap:var(--leading);padding:var(--space-6);border-radius:var(--radius-lg);background:color-mix(in srgb,var(--color-surface) 62%,transparent);box-shadow:var(--shadow-sm)}
.quote-card blockquote{margin:0;font-family:var(--font-heading);font-weight:var(--font-heading-weight);font-size:19px;line-height:1.5;letter-spacing:-0.008em;text-indent:-0.474em}
.byline{display:flex;align-items:center;gap:var(--space-3)}
.byline image-slot{width:56px;height:56px;flex:none}
.byline .mono{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--color-accent-800);color:var(--color-accent-100);font-family:var(--font-heading);font-weight:500;font-size:15px;letter-spacing:.02em}
.byline b{display:block;font-weight:500;font-size:14px}
.byline span{display:block;font-size:12px;color:color-mix(in srgb,var(--color-text) 55%,transparent)}
@media (max-width:820px){.quotes{grid-template-columns:1fr}.quote-card blockquote{text-indent:0}}

/* — book CTA — */
.book{position:relative;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:var(--leading) clamp(24px,5vw,72px);align-items:center;padding:calc(2.5*var(--leading)) 0}
.book image-slot{width:100%;aspect-ratio:4/5}
.book h2{font-size:clamp(32px,4.4vw,60px);line-height:1.04;letter-spacing:-0.022em;margin:0}
@media (max-width:900px){.book{grid-template-columns:1fr}}

/* — close / footer — */
.outro{position:relative;padding-top:calc(2*var(--leading));overflow:hidden}
.outro-mark{font-family:var(--font-heading);font-weight:var(--font-heading-weight);font-size:clamp(64px,15vw,220px);line-height:.86;letter-spacing:-0.04em;color:color-mix(in srgb,var(--color-text) 8%,transparent);margin:0 0 calc(0.4*var(--leading));white-space:nowrap;user-select:none;text-box:trim-both cap alphabetic;min-width:0}
.signup{display:flex;gap:var(--space-3);align-items:stretch;max-width:440px;margin-top:var(--leading)}
.signup .input{flex:1}
.signup .input,.signup .btn{min-height:38px}
.foot-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:var(--leading) clamp(24px,5vw,72px);padding:calc(2*var(--leading)) 0 var(--leading);align-items:start}
.foot-nav{display:flex;flex-wrap:wrap;gap:var(--space-4) clamp(20px,4vw,52px);font-size:13px;letter-spacing:.04em;text-transform:uppercase}
.foot-nav a{color:color-mix(in srgb,var(--color-text) 62%,transparent)}
.foot-nav a:hover{color:var(--color-accent)}
.colophon{display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--space-4);padding-bottom:calc(1.5*var(--leading));font-size:12.5px;color:color-mix(in srgb,var(--color-text) 45%,transparent)}
@media (max-width:820px){.foot-grid{grid-template-columns:1fr}}

/* — motion — */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .8s cubic-bezier(.22,.61,.36,1) var(--d,0ms),transform .8s cubic-bezier(.22,.61,.36,1) var(--d,0ms)}
.reveal.in{opacity:1;transform:none}

/* accent hairline draws itself in */
.kicker::before,.kicker.inline::before,.roles::before{transform:scaleX(0);transform-origin:0 50%;transition:transform .7s cubic-bezier(.22,.61,.36,1) .12s}
.reveal.in .kicker::before,.reveal.in .roles::before,.loaded .hero .kicker::before,.loaded .roles::before,.loaded header .kicker::before{transform:scaleX(1)}

/* section titles rise under a mask */
.sec-title,.panel h2,.book h2,.about h2{clip-path:inset(0 0 -12% 0)}
.js .reveal .sec-title>span,.js .reveal .panel h2>span{display:inline-block}

/* numbered service rows */
.feature{transition:background .3s}
.feature:hover{background:linear-gradient(to right,color-mix(in srgb,var(--color-surface) 46%,transparent),transparent 72%)}
.feature .f-num{transition:transform .35s cubic-bezier(.22,.61,.36,1),color .3s}
.feature:hover .f-num{transform:translateX(6px)}
.feature .f-title{transition:transform .35s cubic-bezier(.22,.61,.36,1)}
.feature:hover .f-title{transform:translateX(4px)}

/* photo frames: quiet zoom, no layout shift */
.photo-frame img,.photo-frame image-slot{transition:transform .7s cubic-bezier(.22,.61,.36,1)}
a.case:hover .photo-frame image-slot,.video-main:hover image-slot{transform:scale(1.035)}

/* pointer sheen on surfaces */
.case,.quote-card,.float-card{position:relative;isolation:isolate}
.case::before,.quote-card::before,.float-card::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;opacity:0;transition:opacity .4s;background:radial-gradient(340px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--color-accent) 13%,transparent),transparent 70%)}
.case:hover::before,.quote-card:hover::before,.float-card:hover::before{opacity:1}

/* hero entrance */
.hero-photo{transform:translateY(var(--py,0px))}
.hero-ghost{transform:translateY(var(--gy,0px))}
.js .hero .hero-photo{opacity:0;animation:heroPhoto 1s cubic-bezier(.22,.61,.36,1) .1s forwards}
.js .hero .hero-name{opacity:0;animation:heroName 1s cubic-bezier(.22,.61,.36,1) .28s forwards}
.js .hero .hero-side{opacity:0;animation:heroSide .9s cubic-bezier(.22,.61,.36,1) .46s forwards}
.js .hero .hero-cta{opacity:0;animation:heroSide .9s cubic-bezier(.22,.61,.36,1) .58s forwards}
.js .hero .hero-ghost{opacity:0;animation:ghostIn 1.6s cubic-bezier(.22,.61,.36,1) .2s forwards}
@keyframes heroPhoto{from{opacity:0;transform:translateY(26px) scale(1.03)}to{opacity:1;transform:translateY(var(--py,0px)) scale(1)}}
@keyframes heroName{from{opacity:0;clip-path:inset(100% 0 0 0);transform:translateY(10px)}to{opacity:1;clip-path:inset(-15% 0 -15% 0);transform:none}}
@keyframes heroSide{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes ghostIn{from{opacity:0}to{opacity:1}}

/* featured video play button */
.video-main{cursor:pointer}
.play i{transition:transform .4s cubic-bezier(.22,.61,.36,1),background .3s,border-color .3s;position:relative}
.play i::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid var(--color-accent);opacity:0;animation:pulse 2.8s ease-out infinite}
.video-main:hover .play i{transform:scale(1.08);border-color:var(--color-accent);background:color-mix(in srgb,var(--color-accent) 22%,color-mix(in srgb,var(--color-bg) 60%,transparent))}
@keyframes pulse{0%{opacity:.5;transform:scale(1)}70%{opacity:0;transform:scale(1.5)}100%{opacity:0;transform:scale(1.5)}}

/* video rail: arrows + edge fades + snap */
.rail-wrap{position:relative;margin-top:var(--space-4)}
.rail-wrap .video-rail{margin-top:0;scroll-snap-type:x mandatory;scrollbar-width:none;mask-image:linear-gradient(to right,transparent,#000 44px calc(100% - 44px),transparent)}
.rail-wrap .video-rail::-webkit-scrollbar{display:none}
.rail-wrap.at-start .video-rail,.rail-wrap.no-scroll .video-rail{mask-image:linear-gradient(to right,#000 calc(100% - 44px),transparent)}
.rail-wrap.at-end .video-rail{mask-image:linear-gradient(to right,transparent,#000 44px)}
.rail-wrap.at-start.at-end .video-rail,.rail-wrap.no-scroll .video-rail{mask-image:none}
.video-rail>figure{scroll-snap-align:start}
.rail-btn{position:absolute;top:34%;z-index:2;display:grid;place-items:center;width:38px;height:38px;padding:0;border:1px solid color-mix(in srgb,var(--color-text) 22%,transparent);border-radius:50%;background:color-mix(in srgb,var(--color-bg) 82%,transparent);color:var(--color-text);backdrop-filter:blur(8px);cursor:pointer;opacity:0;transition:opacity .25s,transform .25s,border-color .25s,background .25s}
.rail-btn svg{width:16px;height:16px}
.rail-wrap:hover .rail-btn,.rail-btn:focus-visible{opacity:1}
.rail-btn:hover{border-color:var(--color-accent);background:color-mix(in srgb,var(--color-accent) 20%,color-mix(in srgb,var(--color-bg) 70%,transparent))}
.rail-prev{left:-6px}.rail-next{right:-6px}
.rail-wrap.at-start .rail-prev,.rail-wrap.at-end .rail-next,.rail-wrap.no-scroll .rail-btn{opacity:0!important;pointer-events:none}
.video-rail figure{transition:transform .35s cubic-bezier(.22,.61,.36,1)}
.video-rail figure:hover{transform:translateY(-3px)}
@media (hover:none){.rail-btn{display:none}}

/* partners tick up on hover */
.partners span{transition:color .3s,transform .3s cubic-bezier(.22,.61,.36,1)}
.partners span:hover{color:color-mix(in srgb,var(--color-text) 88%,transparent);transform:translateY(-2px)}

/* stat numbers */
.stat-num{font-variant-numeric:tabular-nums}

/* back to top */
.to-top{position:fixed;right:clamp(16px,3vw,28px);bottom:clamp(16px,3vw,28px);z-index:45;display:grid;place-items:center;width:42px;height:42px;padding:0;border:1px solid color-mix(in srgb,var(--color-text) 20%,transparent);border-radius:50%;background:color-mix(in srgb,var(--color-bg) 84%,transparent);color:var(--color-text);backdrop-filter:blur(10px);cursor:pointer;opacity:0;transform:translateY(10px) scale(.94);pointer-events:none;transition:opacity .3s,transform .3s cubic-bezier(.22,.61,.36,1),border-color .25s,background .25s}
.to-top svg{width:18px;height:18px}
.show-top .to-top{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{border-color:var(--color-accent);background:color-mix(in srgb,var(--color-accent) 20%,color-mix(in srgb,var(--color-bg) 72%,transparent))}

/* buttons: micro-lift */
.btn{transition:transform .22s cubic-bezier(.22,.61,.36,1),background .22s,border-color .22s,color .22s}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}

/* links in the footer */
.foot-nav a{transition:color .22s,transform .22s}
.foot-nav a:hover{transform:translateX(2px)}

@media (prefers-reduced-motion:reduce){
  .reveal,.js .hero .hero-photo,.js .hero .hero-name,.js .hero .hero-side,.js .hero .hero-cta,.js .hero .hero-ghost{opacity:1;transform:none;animation:none;transition:none;clip-path:none}
  .kicker::before,.kicker.inline::before,.roles::before{transform:scaleX(1);transition:none}
  .play i::after{animation:none}
  .btn:hover,.foot-nav a:hover,.partners span:hover,.video-rail figure:hover,.feature:hover .f-num,.feature:hover .f-title{transform:none}
  a.case:hover .photo-frame image-slot,.video-main:hover image-slot{transform:none}
}
.rail-btn:focus-visible,.to-top:focus-visible,.nav-toggle:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
[hidden]{display:none!important}