/* Static instances (not the variable build) — a variable font's glyph
   sub-shapes overlap, and -webkit-text-stroke strokes every contour,
   which drew seams through the outlined "expertise". */
@font-face{font-family:'Anek Tamil';font-style:normal;font-weight:700;font-display:swap;
  src:url('./assets/fonts/anek-tamil-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Anek Tamil';font-style:normal;font-weight:800;font-display:swap;
  src:url('./assets/fonts/anek-tamil-latin-800-normal.woff2') format('woff2')}

/* Double Black — type + color transcribed from Figma (node 2:316) */
:root{
  --coral:#E58A8A;
  --periwinkle:#808DFD;
  --frame:1280px;
  --black:#000;
  --white:#fff;
  --display:'Anek Tamil',system-ui,sans-serif;
  --sans:'Geist',system-ui,sans-serif;
  --mono:'Geist Mono',ui-monospace,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth}
body{background:var(--white);color:var(--black);font-family:var(--sans);overflow-x:hidden}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
::selection{background:#000;color:#fff}

/* type scale */
.h1{font-family:var(--display);font-weight:800;font-size:clamp(3rem,8.8vw,116px);line-height:.9;letter-spacing:-.05em;text-transform:uppercase}
.h2{font-family:var(--display);font-weight:700;font-size:clamp(2rem,3.6vw,45px);line-height:.91;letter-spacing:-.03em;text-transform:uppercase}
.h3{font-family:var(--display);font-weight:700;font-size:clamp(2rem,4.6vw,57px);line-height:1;letter-spacing:-.05em;text-transform:uppercase}
.h4{font-family:var(--display);font-weight:700;font-size:clamp(1.35rem,2vw,25px);line-height:.91;letter-spacing:-.03em;text-transform:uppercase}
.body{font-size:17px;line-height:1.31;letter-spacing:.17px}
.link,.btn{font-family:var(--mono);font-size:15px;line-height:1.1;letter-spacing:-.15px;text-transform:uppercase}

/* nav */
.nav{max-width:var(--frame);margin:0 auto;position:absolute;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:20px;background:var(--white);padding:20px;padding-top:calc(20px + env(safe-area-inset-top,0px))}
.logo{display:flex;align-items:center;gap:3px}
.wordmark{font-size:20px;line-height:1;letter-spacing:.4px;white-space:nowrap}
.wm-a{color:transparent;-webkit-text-stroke:.6px var(--black)}
.wm-b{color:var(--black)}
.nav-links{display:flex;align-items:center;gap:clamp(20px,5vw,60px)}
.link{transition:opacity .3s}
.link:hover{opacity:.5}
.btn{display:inline-block;padding:11px 16px;border:1px solid var(--black);
  border-radius:7.246px;background:transparent;color:var(--black);white-space:nowrap;flex-shrink:0}

/* headline */
.headline{max-width:var(--frame);margin:0 auto;padding:20px 20px 20px;padding-top:calc(101px + env(safe-area-inset-top,0px))}
.h1 .line{display:block}
.h1 .line>span{display:block}

/* coral split sections */
.split{display:flex;max-width:var(--frame);margin:0 auto;background:var(--coral)}
.split--hero{align-items:center;aspect-ratio:1280/480;max-height:720px;background:var(--white)}
/* Node 15:803 — the plate is 762x322 inside a 480-tall row, so it sits
   centred rather than filling the height. aspect-ratio derives the height
   from the definite width; 9999px clamps to half of it, keeping a true pill. */
.split--hero .split-img{flex:0 0 59.53%;height:auto;aspect-ratio:762/322;
  border-radius:0 9999px 9999px 0}
.split--hero .hero-art-reveal{border-radius:inherit;overflow:hidden}
.split-img{flex:1 1 0;min-width:0;height:100%;overflow:hidden}
.split-img img{width:100%;height:100%;object-fit:cover}
.panel{flex:1 1 0;min-width:0;height:100%;overflow:hidden}
.panel .body{max-width:none}

/* domain expertise */
.domain{max-width:var(--frame);margin:0 auto;padding:150px 20px 0;overflow:hidden}
.domain-type{position:relative;display:block;line-height:1.1;max-width:1280px;margin:0 auto;
  font-size:clamp(1.75rem,3.68vw,47.125px)}

.svg-defs{position:absolute;width:0;height:0;overflow:hidden}

/* capabilities */
.split--caps{align-items:stretch;min-height:600px;background:var(--white)}
.caps-img{flex:1 1 0;min-width:0;display:flex;align-items:center;overflow:hidden}
.caps-img img{width:100%;height:100%;object-fit:contain}
.caps{flex:0 0 33.28%;display:flex;flex-direction:column;justify-content:center;gap:2px;padding:32px 0}
.cap{flex:none;padding:14px 20px}
.cap .h4{color:var(--periwinkle)}
.cap .body{max-width:415px}

/* belief */
.belief{max-width:var(--frame);margin:0 auto;padding:113px 20px 103px;display:flex;justify-content:center}
.belief-inner{display:flex;flex-direction:column;align-items:center;gap:37px;max-width:780px;text-align:center}
.eyebrow{font-weight:700;font-size:17px;line-height:1.31;letter-spacing:.17px}
.gradient{background-image:linear-gradient(180deg,#EA1111 0%,#EC2926 25%,#EE4142 50%,#F0585A 75%,#F27072 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* footer */
.footer{position:relative;max-width:var(--frame);margin:0 auto;padding:0 20px 90px;overflow:hidden}
.footer-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.6;pointer-events:none}
.footer-inner{position:relative;display:flex;flex-direction:column;align-items:center;padding-top:60px;gap:30px}
.email{font-weight:700;font-size:14px;line-height:1.31;letter-spacing:.14px;transition:opacity .3s}
.email:hover{opacity:.6}

/* reveals */
.reveal{opacity:0;transform:translateY(22px);
  transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1);
  transition-delay:var(--rd,0ms)}
.reveal.in{opacity:1;transform:none}

/* Deliberately NOT scroll-driven. A view() timeline with fill:both re-hides
   the element whenever it sits outside its entry range, so scrolling back up
   blanked sections that had already revealed — and it overrode the .in class,
   since animations beat normal declarations. One mechanism only: reveal once
   on first approach, then stay revealed. */

/* mobile */
@media (max-width:820px){
  .nav{flex-wrap:wrap;row-gap:12px;column-gap:24px;padding:16px 20px;padding-top:calc(16px + env(safe-area-inset-top,0px));justify-content:flex-start}
  /* Figma "Mobile" (node 29:180): logo alone on row 1, the three nav
     items — Expertise / About / Start your project — as plain, equally
     styled text links on row 2. No CTA pill on mobile. */
  .nav-links{display:contents}
  .logo{order:1;flex-basis:100%}
  .link{order:2}
  .nav .btn{order:3;display:inline-block;padding:0;border:0;background:none;border-radius:0;margin-left:0;white-space:nowrap;color:var(--black)}
  .nav .btn::before{content:none}
  .nav .btn:hover,.nav .btn:focus-visible{color:var(--black)}
  .split{flex-direction:column;aspect-ratio:auto;max-height:none}
  .split-img{aspect-ratio:854/480;height:auto;width:100%}
  .split--hero .split-img{aspect-ratio:854/480}
  .panel{flex:none;height:auto}
  .split--hero .split-img{flex:none;border-radius:0}
  .caps-img{flex:none;width:100%;aspect-ratio:1092/744}
  .caps{flex:none;height:auto}
  .cap{flex:none}
  /* Figma "Mobile": the accordion becomes flat, always-visible copy —
     no expand affordance, one paragraph per capability. */
  .caps .cap-mobile-copy{display:block;padding:0 20px 24px}
  .cap-details,.cap-intro{display:none}
  .cap > summary{cursor:default;pointer-events:none}
  .cap > summary::after{display:none}

  /* Figma node 30:330 "Expertise": domain heading + capability list live in
     one full-viewport panel, with the periwinkle capsule as a big rotated
     graphic anchored behind/below the text. Scroll-snap gently pulls the
     hero and this section into full view when a scroll comes to rest —
     "proximity" (not "mandatory") so it never fights a scroll in progress. */
  html{scroll-snap-type:y proximity}
  [data-golden-hero]{scroll-snap-align:start}
  [data-expertise-viewport]{min-height:100vh;min-height:100dvh;
    scroll-snap-align:start;position:relative;overflow:hidden;
    display:flex;flex-direction:column}
  .split--caps{flex:1 0 auto;flex-direction:column}
  .caps-img{display:none}
  /* Normal-flow block (not absolutely overlaid) — avoids fighting the
     text's own stacking, and the min-height:100vh section is allowed to
     run taller than one viewport so the image still gets room to show. */
  .caps-parallax{width:100%;height:55vh;overflow:hidden;flex:none;
    border-radius:0 999px 999px 0;
    transform:scale(var(--parallax-scale,1));
    opacity:var(--parallax-opacity,1);
    transform-origin:bottom center;will-change:transform,opacity}
  .caps-parallax img{width:100%;height:100%;object-fit:cover}
  /* Figma "Mobile - Hero" (node 30:269): the whole hero — nav, headline
     and the "for the committed" copy — becomes one full-viewport panel
     on a white-to-coral gradient, everything centered, no side image. */
  [data-golden-hero]{min-height:100vh;min-height:100dvh;display:flex;
    flex-direction:column;
    background:linear-gradient(to bottom,var(--white) 77%,#ffbebf 100%)}
  /* Figma node 30:269: headline and copy each own half of the remaining
     viewport (below the nav), and are vertically centered within it. */
  .headline{text-align:center;flex:1 1 0;min-height:0;display:flex;
    align-items:center;justify-content:center;
    padding:20px 20px;padding-top:calc(96px + env(safe-area-inset-top,0px))}
  .h1{font-size:clamp(3.4rem,20vw,5.6rem);line-height:.95;letter-spacing:-.01em}
  .split--hero{background:none;flex:1 1 0;min-height:0;justify-content:center}
  .split--hero .split-img{display:none}
  .split--hero .panel{width:100%;flex:none;height:auto}
  [data-golden-hero] .hero-panel-surface{align-items:center;text-align:center;height:auto;justify-content:center;gap:14px}
  [data-golden-hero] [data-hero-subtitle].h2--accent{color:#aeaeae}
  [data-hero-subtitle]{text-align:center;font-size:17px;
    letter-spacing:3.57px;line-height:.91}
  [data-hero-copy] p{font-size:22px;line-height:1.6;font-weight:300;
    letter-spacing:normal;text-align:center}
  [data-hero-copy] strong{font-weight:700}
  .logo{width:100%;justify-content:center}
  .wordmark{display:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
}


/* ===============================================================
   MICRO-INTERACTIONS — native only. Scroll timelines where the
   browser has them, hover transitions everywhere, ~20 lines of JS
   for the two things CSS can't know: word splitting and pointer
   position. All of it collapses under prefers-reduced-motion.
   =============================================================== */

@property --mx { syntax: '<length-percentage>'; inherits: false; initial-value: 50%; }
@property --my { syntax: '<length-percentage>'; inherits: false; initial-value: 50%; }

/* 1 — the hero headline entrance is pure CSS, further down this file */

/* 2 — buttons are outlined at rest and fill black from wherever the
      cursor crossed the edge; the label inverts as the fill arrives */
.btn{position:relative;overflow:hidden;isolation:isolate;
  transition:color .4s cubic-bezier(.16,1,.3,1)}
.btn::before{content:'';position:absolute;left:var(--mx);top:var(--my);z-index:-1;
  width:0;height:0;translate:-50% -50%;border-radius:50%;background:var(--black);
  transition:width .5s cubic-bezier(.16,1,.3,1),height .5s cubic-bezier(.16,1,.3,1)}
.btn:hover::before,.btn:focus-visible::before{width:280%;height:280%}
.btn:hover,.btn:focus-visible{color:var(--white)}

/* 3 — EXPERTISE fills itself in as it scrolls past. The one moment. */
.x{position:relative;display:inline-block;letter-spacing:-.01em}  /* node 15:812: -0.4713px at 47.125px */
.x-ring{position:absolute;inset:0;color:var(--black);filter:url(#outline-ring)}
@media (max-width:820px){.x-ring{filter:url(#outline-ring-mobile)}}
.x-solid{position:relative;color:var(--black);clip-path:inset(0 100% 0 0)}
/* No scroll-driven fill: node 15:812 is outlined throughout. The solid copy
   stays clipped away unless the visitor deliberately clicks it. */

/* 4 — capability rows warm and nudge on hover */
.cap .h4{transition:transform .45s cubic-bezier(.16,1,.3,1)}
.cap:hover .h4{transform:translateX(7px)}

/* 5 — plates settle out of a slight overscale as they cross the viewport */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .caps-img img{animation:plate-settle linear both;
      animation-timeline:view();animation-range:entry 0% exit 100%}
  }
}
@keyframes plate-settle{from{scale:1.07}to{scale:1}}

/* 6 — footer email draws its own underline */
.email{position:relative;display:inline-block}
.email:hover{opacity:1}
.email::after{content:'';position:absolute;left:0;right:0;bottom:-3px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .5s cubic-bezier(.16,1,.3,1)}
.email:hover::after,.email:focus-visible::after{transform:scaleX(1)}


/* ---------------------------------------------------------------
   CLICK REWARDS on non-interactive elements. Deliberately NOT
   given pointer cursors, tabindex or button roles — they must
   read as the surface being alive, never as a promise of
   navigation. Mouse/touch delight only.
   --------------------------------------------------------------- */

.split-img{position:relative}

/* EXPERTISE: click to hold it solid, click again to release */
.x.filled .x-solid{animation:none;clip-path:inset(0 0 0 0)}
.x.filled .x-ring{opacity:0;transition:opacity .4s}
.x-ring{transition:opacity .4s}


@media (prefers-reduced-motion:reduce){
  }


/* ===============================================================
   The mark is inline SVG so each diamond is its own target.
   Clicking one fires a shot upward — an easter egg: pointer-only,
   nothing focusable, nothing announced, off under reduced motion.
   =============================================================== */

.mark{display:block;overflow:visible}
.diamond{fill:#231f20}

.shot{position:fixed;z-index:9998;width:6px;height:6px;background:var(--black);
  pointer-events:none;will-change:transform}

@media (prefers-reduced-motion:reduce){

}


[data-hero-line]{display:block}

.hero-art-shell{overflow:hidden}
.hero-art-reveal{width:100%;height:100%}
[data-hero-art]{display:block;width:100%;height:100%;object-fit:cover}

.hero-panel-surface{min-height:100%;width:100%;display:flex;flex-direction:column;
  justify-content:center;gap:33px;padding:60px 20px 66px}
.h2--accent{color:var(--periwinkle)}

@media (prefers-reduced-motion:reduce){
  [data-golden-hero] *,
  [data-golden-hero] *::before,
  [data-golden-hero] *::after{animation:none!important;transition:none!important}
}


/* ---------------------------------------------------------------
   Hero entrance: the headline rises line by line out of its mask,
   then the hero strip fades in behind it. Pure CSS — the `both`
   fill applies at parse time, so there is no flash and no JS.
   --------------------------------------------------------------- */

.hero-line-mask{display:block;overflow:clip;padding-bottom:.08em;margin-bottom:-.08em}


@media (prefers-reduced-motion:no-preference){
  .hero-line-mask > [data-hero-line]{animation:hero-line .72s cubic-bezier(.16,1,.3,1) both}
  .hero-line-mask:nth-child(1) > [data-hero-line]{animation-delay:.08s}
  .hero-line-mask:nth-child(2) > [data-hero-line]{animation-delay:.22s}
  .split--hero{animation:hero-fade .6s ease-out .8s both}
}

@keyframes hero-line{from{transform:translateY(105%);opacity:0}}
@keyframes hero-fade{from{opacity:0}}


/* ===============================================================
   AIM & FIRE — footer mark only. The nav mark stays the home link,
   so nothing here hijacks an existing navigation action.
   Rotation lives on .aim, recoil on the inner .recoil group, so
   recoil can never disturb the aiming angle or the layout.
   =============================================================== */

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

.footer .aim{cursor:pointer;touch-action:none;
  transform-box:view-box;transform:rotate(0deg)}
.footer .aim--left{transform-origin:222.04px 361.25px}
.footer .aim--right{transform-origin:505.97px 361.25px}
.footer .aim:hover .diamond{fill:#000}
.footer .aim:focus{outline:none}
.footer .aim:focus-visible .diamond{stroke:#EA1111;stroke-width:26;paint-order:stroke}

.footer .recoil{transform-box:fill-box;transform-origin:center}

/* dragging must not select text or start a native image drag */
.footer .aim,.footer .aim *{-webkit-user-select:none;user-select:none;
  -webkit-user-drag:none}

#fire-layer{position:fixed;inset:0;z-index:9997;pointer-events:none}


/* ---------------------------------------------------------------
   Above the fold the entrance is time-based: nav, then the two
   headline lines, then the hero strip, then the panel copy.
   Everything below the fold fades up on approach (see main.js).
   --------------------------------------------------------------- */
@media (prefers-reduced-motion:no-preference){
  .nav{animation:hero-fade .5s ease-out .1s both}
  .hero-panel-surface > .h2{animation:hero-rise .7s cubic-bezier(.16,1,.3,1) .95s both}
  .hero-panel-surface > [data-hero-copy]{animation:hero-rise .7s cubic-bezier(.16,1,.3,1) 1.1s both}
}
@keyframes hero-rise{from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:none}}


/* DOMAIN EXPERTISE rises out of a mask, the same language as the hero
   headline — a 22px nudge is invisible at 116px type. */
.domain-mask{display:block;overflow:clip;padding-bottom:.14em;margin-bottom:-.14em}
.domain-rise{display:flex;flex-wrap:wrap;align-items:flex-start;gap:0 4.063px;width:max-content;max-width:100%}
.reveal.domain-type{opacity:1;transform:none}
.reveal.domain-type .domain-rise{transform:translateY(105%);
  transition:transform .95s cubic-bezier(.16,1,.3,1)}
.reveal.domain-type.in .domain-rise{transform:none}

@media (prefers-reduced-motion:reduce){
  .reveal.domain-type .domain-rise{transform:none;transition:none}
}


/* ---------------------------------------------------------------
   CustomCursor + trail. One --cur-ring variable sizes the ring and
   every trail ring, so the whole chain swells together on hover.
   Only ever active on fine pointers — cursor.js adds .cur-on to
   <html>, so touch keeps native behaviour and a failed script
   leaves the real cursor in place.
   --------------------------------------------------------------- */
.cur{--cur-base:36px;--cur-ring:var(--cur-base);position:fixed;inset:0;
  z-index:10000;pointer-events:none;opacity:0;transition:opacity .25s ease}
.cur.cur-live{opacity:1}

.cur-inner,.cur-outer,.cur-trail{position:absolute;top:0;left:0;border-radius:50%;
  will-change:transform}

/* the trail is the ring's own shape, repeated and faint */
.cur-outer,.cur-trail{width:var(--cur-ring);height:var(--cur-ring);
  border:1px solid;
  transition:width .3s cubic-bezier(.16,1,.3,1),height .3s cubic-bezier(.16,1,.3,1),
    background-color .3s,border-color .3s}
.cur-trail{border-color:var(--black)}
.cur-inner{transition:width .25s cubic-bezier(.16,1,.3,1),
  height .25s cubic-bezier(.16,1,.3,1),opacity .25s}

/* over something interactive the ring takes over and the dot steps back */
.cur.cur-hot{--cur-ring:calc(var(--cur-base) * 1.5)}
.cur.cur-hot .cur-outer{background:rgba(128,141,253,.14);border-color:var(--periwinkle)}
.cur.cur-hot .cur-trail{border-color:var(--periwinkle)}
.cur.cur-hot .cur-inner{opacity:0}
.cur.cur-down{--cur-ring:calc(var(--cur-base) * .72)}

html.cur-on,html.cur-on *{cursor:none!important}
@media (hover:none),(pointer:coarse){
  .cur{display:none}
  html.cur-on,html.cur-on *{cursor:auto!important}
}


/* plunger: once pulled past the misfire threshold the diamond reads as loaded */
.footer .aim.charged .diamond{fill:#EA1111}
.footer .aim .diamond{transition:transform .3s cubic-bezier(.16,1,.3,1),fill .18s}


/* ===============================================================
   CAPABILITIES — the four rows are <details> disclosures now, so
   the panel sizes from its content rather than four fixed rows.
   =============================================================== */

:root{interpolate-size:allow-keywords}   /* lets block-size animate to auto */

.services-intro{color:var(--black);opacity:.5;padding:0 20px 14px}

.cap > summary{list-style:none;cursor:pointer;display:flex;flex-direction:column;
  gap:6px;padding-right:28px;position:relative}
.cap > summary::-webkit-details-marker{display:none}
.cap > summary:focus-visible{outline:2px solid var(--periwinkle);outline-offset:4px}

/* the +/− sits on the baseline of the title and rotates open */
.cap > summary::after{content:'';position:absolute;right:2px;top:.34em;
  width:11px;height:11px;
  background:
    linear-gradient(var(--periwinkle),var(--periwinkle)) center/100% 1.5px no-repeat,
    linear-gradient(var(--periwinkle),var(--periwinkle)) center/1.5px 100% no-repeat;
  transition:transform .4s cubic-bezier(.16,1,.3,1)}
.cap[open] > summary::after{background:
    linear-gradient(var(--periwinkle),var(--periwinkle)) center/100% 1.5px no-repeat}

.cap-intro{color:var(--black);opacity:.72;max-width:415px}
.cap-mobile-copy{display:none;color:var(--black);opacity:.72;max-width:415px}
.cap > summary:hover .h4{transform:translateX(7px)}

.cap-details{padding-top:12px;display:flex;flex-direction:column;gap:7px;max-width:415px}
.cap-scope,.cap-artifacts,.cap-outcome{font-size:15px;line-height:1.35;
  letter-spacing:.15px}
.cap-scope{color:var(--black)}
.cap-artifacts{color:rgba(0,0,0,.62)}
.cap-outcome{color:var(--periwinkle);font-weight:700}

/* Smooth disclosure where the browser has ::details-content; elsewhere it
   simply snaps open, which is the correct native behaviour. */
@supports selector(::details-content){
  .cap::details-content{block-size:0;overflow:hidden;
    transition:block-size .45s cubic-bezier(.16,1,.3,1),
      content-visibility .45s allow-discrete}
  .cap[open]::details-content{block-size:auto}
}

/* ===============================================================
   ABOUT
   =============================================================== */

.about{max-width:var(--frame);margin:0 auto;display:flex;gap:60px;
  align-items:flex-start;padding:113px 20px}
.about-copy{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:24px;
  max-width:620px}
.about-copy .h3{margin-bottom:4px}
.about-portrait-placeholder{flex:0 0 300px;aspect-ratio:3/4;overflow:hidden;
  border:1px solid rgba(0,0,0,.14)}
.about-portrait-placeholder .about-portrait-img{width:100%;height:100%;object-fit:cover;display:block}

@media (max-width:820px){
  .about{flex-direction:column;gap:32px;padding:72px 20px}
  .about-portrait-placeholder{flex:none;width:100%;max-width:300px;align-self:center}
  .caps{padding:20px 0}
  .cap{padding:20px 20px}
}

/* Mobile Expertise — Figma 30:330. Desktop retains its existing layout. */
.expertise-mobile{display:none}
@media(max-width:820px){
  .expertise-desktop{display:none}
  [data-golden-hero],.expertise-mobile,.about,.belief{min-height:100vh;min-height:100svh}
  .expertise-mobile{margin:0 auto;border-top:1px solid rgba(0,0,0,.4);
    display:flex;flex-direction:column;overflow:clip}
  .expertise-heading{padding:64px 20px 30px}
  .expertise-heading .domain-type{font-size:clamp(28px,10.8vw,43.401px);
    line-height:1.1;letter-spacing:-.05em}
  .expertise-heading .domain-rise{flex-wrap:nowrap}
  .expertise-mobile .x-ring{filter:url(#outline-ring)}
  .expertise-content{display:grid;grid-template-columns:1fr;
    grid-template-rows:auto minmax(220px,1fr);flex:1}
  .expertise-list{padding:15px 20px 36px;align-self:start;display:flex;flex-direction:column;gap:30px}
  .expertise-service .h4{font-size:18px;line-height:.91;letter-spacing:-.03em;
    color:var(--black);margin-bottom:5px}
  .expertise-service .body{max-width:415px;font-size:17px;line-height:1.31;letter-spacing:.17px}
  .expertise-art{position:relative;min-height:220px;width:100%;border-radius:999px 999px 0 0;
    overflow:hidden;opacity:var(--expertise-opacity,1)}
  .expertise-art img{position:absolute;left:0;top:-12%;width:100%;height:124%;object-fit:cover;
    object-position:center 30%;transform:translateY(var(--expertise-shift,0px));will-change:transform}
  .about,.belief{align-items:center}
}
@media(max-width:820px) and (prefers-reduced-motion:reduce){
  .expertise-art{opacity:1!important}
  .expertise-art img{transform:none!important;will-change:auto}
}

/* Mobile scroll sequence: full capsule, then the belief statement. */
.belief-mobile-art{display:none}
@media(max-width:820px){
  .expertise-mobile{overflow:visible}
  .expertise-content{display:block}
  .expertise-scroll{height:160svh;position:relative}
  .expertise-stage{position:sticky;top:0;height:100svh;display:flex;align-items:center;
    justify-content:center;overflow:clip}
  .expertise-art{width:min(62.2vw,250px,28.4svh);height:auto;min-height:0;
    aspect-ratio:250/687;border-radius:999px;flex:none;
    transform:translateY(var(--pill-y,0px)) scale(var(--pill-scale,1));
    transform-origin:center;will-change:transform,opacity}
  .expertise-art img{object-position:center;top:-8%;height:116%}
  #belief{padding:134px 25px 70px;position:relative;margin-top:-30svh;z-index:1}
  #belief .belief-inner{width:100%;max-width:402px;gap:18px}
  #belief .eyebrow{font-weight:400;text-transform:uppercase}
  #belief .h3{font-size:clamp(34px,10.8vw,43.401px);line-height:1;letter-spacing:-.05em;
    background:none;color:var(--black);max-width:352px}
  #belief .btn{display:none}
  .belief-mobile-art{display:block;width:calc(100% + 50px);margin-top:28px;
    transform:translateY(var(--belief-art-y,0px));will-change:transform}
  .belief-mobile-art img{width:100%;height:auto;object-fit:contain}
}
@media(max-width:820px) and (prefers-reduced-motion:reduce){
  #belief{margin-top:0}
  .expertise-scroll{height:100svh}
  .expertise-stage{position:relative}
  .expertise-art,.belief-mobile-art{transform:none!important;will-change:auto}
}

@media(max-width:820px){
  html.mobile-motion #belief .belief-inner > .reveal,
  html.mobile-motion .expertise-mobile .domain-rise{
    opacity:1;transform:none;transition:none}
  html.mobile-motion .nav .link{display:inline-block}
}

@media(max-width:820px){
  .expertise-mobile{border-top:0}
  [data-golden-hero]{background:linear-gradient(to bottom,#fff 65%,#ffdedf 85%,#fff 100%)}
  html.mobile-motion [data-golden-hero]{background:transparent}
  html.mobile-motion main{position:relative;z-index:1}
  .hero-dissolve{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
}

@media(max-width:820px){
  .belief-mobile-art{perspective:900px}
  html.mobile-motion .belief-mobile-art img{transform-origin:50% 50%;will-change:transform,opacity}
}
@media(max-width:820px) and (prefers-reduced-motion:reduce){
  .belief-mobile-art img{transform:none!important;opacity:1!important;will-change:auto}
}

/* Desktop Expertise — Figma 17:877. */
@media(min-width:821px){
  .expertise-desktop .split--caps{min-height:600px;align-items:stretch}
  .expertise-desktop .caps{flex:0 0 40%;padding:0;gap:0;justify-content:stretch}
  .expertise-desktop .desktop-service{flex:1;display:flex;flex-direction:column;
    justify-content:center;gap:6px;padding:14px 20px}
  .expertise-desktop .desktop-service .h4{color:var(--black);font-size:25px;line-height:.91;letter-spacing:-.03em}
  .expertise-desktop .desktop-service .body{color:var(--black);opacity:1}
  .expertise-desktop .caps-img{flex:1;position:relative;min-width:0;perspective:900px}
  .expertise-desktop .caps-img img{animation:none;scale:none;transform-origin:50% 50%;position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
}

@media(min-width:821px){
  .hero-art-shell{overflow:visible}
  .hero-art-reveal{position:relative;transform-origin:center}
  .desktop-pill-mosaic{position:absolute;inset:0;width:100%;height:100%;
    image-rendering:pixelated;pointer-events:none;opacity:0}
}

@media(min-width:821px){
  .expertise-desktop .desktop-service .body{max-width:475px}
  #about{padding-top:180px;padding-bottom:140px;gap:80px}
  #about .about-copy .h3{font-size:clamp(34px,3.6vw,46px)}
  #about .about-portrait-placeholder{flex-basis:260px}
  #about.desktop-about-motion .reveal{transition:none}
}

@media(min-width:821px){
  .split--hero .hero-panel-shell{position:relative;overflow:visible}
  .split--hero .hero-art-reveal{
    margin-left:calc(min(0px, (var(--frame) - 100vw) / 2) - 2px);
    width:calc(100% + max(0px, (100vw - var(--frame)) / 2) + 2px)}
}

@media(min-width:821px){
  .expertise-toggle{display:block;border:0;padding:0;background:none;color:inherit;
    font:inherit;letter-spacing:inherit;text-align:left;cursor:pointer}
  .expertise-toggle:focus-visible{outline:2px solid var(--periwinkle);outline-offset:6px}
  .expertise-toggle .x-ring{filter:url(#outline-ring-desktop)}
  .expertise-toggle .domain-word{letter-spacing:inherit}
  .expertise-toggle .domain-word .x-solid{clip-path:none}
  .expertise-toggle .domain-word .x-ring{opacity:0}
  .expertise-toggle[aria-pressed="true"] .domain-word .x-solid{clip-path:inset(0 100% 0 0)}
  .expertise-toggle[aria-pressed="true"] .domain-word .x-ring{opacity:1}
  .expertise-toggle[aria-pressed="true"] .expertise-word .x-solid{clip-path:none}
  .expertise-toggle[aria-pressed="true"] .expertise-word .x-ring{opacity:0}
}