/* ============================================================
   SiliconPath Law - Homepage, v2.

   Loads AFTER about-v2.css (tokens and shared primitives: .wrap, .sec,
   .cta, .cta-2, .h-sec, .h-card, .body, .lead, .band, .fin, nav, footer)
   and BEFORE cursor-layer.css (the shared StringTune pointer styles:
   .st-spot, magnetic, the badge). This file adds only the homepage.

   PROPERTY OWNERSHIP
   GSAP (home-motion.js) owns transform/opacity on what it animates; the
   CSS here holds those elements by OPACITY only under .mo-pre, never by
   transform - a standing CSS transform beats a tween. Pointer effects are
   written through `translate`/`rotate` or CSS variables, so the two
   layers never write the same property.
   ============================================================ */

/* ======================================================================
   H1. HERO - light paper, copy left, the source video in a window right.
   ====================================================================== */
.hx{position:relative;overflow:hidden;isolation:isolate;
  min-height:clamp(620px,100svh,900px);display:flex;align-items:center;
  background:
    radial-gradient(60% 50% at 78% 46%,var(--white) 0%,transparent 70%),
    linear-gradient(172deg,var(--paper) 0%,var(--paper-2) 100%);
  border-bottom:1px solid var(--line)}
/* The drafting grid, fading toward the edges. */
.hx__grid{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:clamp(46px,4.8vw,72px) clamp(46px,4.8vw,72px);
  mask-image:radial-gradient(80% 70% at 50% 50%,#000 30%,transparent 80%);
  -webkit-mask-image:radial-gradient(80% 70% at 50% 50%,#000 30%,transparent 80%)}
/* An oxblood bloom behind the window: the light the window throws. */
.hx__bloom{position:absolute;z-index:0;pointer-events:none;
  right:-6vw;top:50%;width:min(860px,70vw);aspect-ratio:1.25;translate:0 -50%;
  background:radial-gradient(ellipse at center,rgba(124,46,40,.16),transparent 64%);
  filter:blur(22px)}

.hx__in{position:relative;z-index:1;width:100%;display:grid;
  gap:clamp(34px,5vw,56px);align-items:center;
  padding-top:calc(72px + env(safe-area-inset-top) + clamp(28px,5vh,60px));
  padding-bottom:clamp(56px,9vh,104px)}

/* Headline: four authored lines, each a clipped mask the motion layer
   raises a line through. */
.hx__t{margin:0;color:var(--ink);font-weight:900;
  letter-spacing:-.046em;line-height:1.02;
  font-size:clamp(2.2rem,6.4vw,3.1rem)}
.hx__ln{display:block;overflow:hidden;
  /* Descenders (g) clip against a tight mask: reserve room. */
  padding-bottom:.1em;margin-bottom:-.1em}
.hx__ln>span{display:block}
@media(min-width:960px){
  /* Sized so the longest authored line ("Trusted Immigration") fits the
     copy column; nowrap keeps each authored line one line. */
  .hx__t{font-size:clamp(2.6rem,3.75vw,3.9rem)}
  .hx__ln>span{white-space:nowrap}
}
/* The last line in brand colour: the promise the first three lines make. */
.hx__ln:last-child>span{color:var(--brand)}
.hx__l{margin:clamp(20px,2.4vw,28px) 0 0;color:var(--ink-2);max-width:50ch;
  font-size:clamp(1rem,1.3vw,1.12rem);line-height:1.72}
.hx__b{margin-top:clamp(26px,3vw,34px);display:flex;flex-wrap:wrap;gap:12px}

/* Secondary button on paper. */
.cta-inv{display:inline-flex;align-items:center;justify-content:center;
  padding:15px 28px;border-radius:999px;font-weight:700;font-size:.95rem;
  text-decoration:none;white-space:nowrap;color:var(--ink);
  background:var(--white);border:1px solid var(--line-2);
  transition:transform .3s var(--ease),border-color .3s var(--ease),
    background .3s var(--ease),color .3s var(--ease)}
.cta-inv:hover{border-color:var(--ink);transform:translateY(-2px)}
.cta-inv:active{transform:translateY(0) scale(.985)}

/* ---- The talent globe ------------------------------------------------
   .hx__media carries StringCursor's --x/--y. .hx__stage holds the
   perspective; .hx__globe is GSAP's (entrance + scroll scale, transform)
   and is centred with `translate`. The canvas (hero-globe.js) is 130% of
   the sphere so the arcs can lift off it. The orbit rings are real 3D
   planes: the half in front crosses the sphere, the half behind passes
   under it. */
.hx__media{position:relative}
.hx__stage{position:relative;height:clamp(500px,41vw,600px);perspective:1400px}
/* Centred by margins, not `translate`: GSAP folds `translate` into the
   transform it owns. (Width and margin % both resolve against the stage's
   width, so --gw works for both.) */
.hx__globe{--gw:min(440px,78%);position:absolute;left:55%;top:47%;width:var(--gw);aspect-ratio:1;
  margin:calc(var(--gw) / -2) 0 0 calc(var(--gw) / -2);transform-style:preserve-3d}
.hx__aura{position:absolute;inset:-16%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(124,46,40,.26),rgba(124,46,40,.08) 62%,transparent);
  animation:hx-breathe 7s ease-in-out infinite}
@keyframes hx-breathe{50%{scale:1.06;opacity:.75}}
.hx__sphere{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:#2a120f;
  box-shadow:0 70px 120px -50px rgba(42,16,13,.75),0 0 0 1px rgba(255,255,255,.08),
    0 0 60px 4px rgba(124,46,40,.22)}
/* The city, clear: full strength, a touch of warmth. A little larger than
   the sphere so it can drift with the pointer (StringCursor --x/--y on
   .hx__media) without showing an edge - the globe reads as a lens you look
   through. GSAP never touches the video, so `translate`/`scale` are free. */
/* No CSS filter here: a filtered layer inside the preserve-3d globe
   painted a pale square outside the sphere in Chrome. */
.hx__v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;scale:1.14;
  translate:calc(var(--x,0) * -14px) calc(var(--y,0) * -10px);
  transition:translate .8s cubic-bezier(.23,1,.32,1)}
/* Light from the upper left, shade only toward the rim: the sphere reads
   round while its centre stays clear. The highlight follows the pointer. */
.hx__shade{position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at calc(34% + var(--x,0) * 12%) calc(28% + var(--y,0) * 10%),
      rgba(255,236,228,.28) 0%,rgba(255,236,228,0) 30%),
    radial-gradient(circle at 46% 42%,rgba(40,14,11,0) 48%,rgba(40,14,11,.35) 74%,rgba(18,6,5,.86) 100%);
  box-shadow:inset 10px 14px 34px rgba(255,220,210,.16),inset -26px -34px 70px rgba(0,0,0,.42)}
@media(prefers-reduced-motion:reduce){.hx__v{translate:none;transition:none}}
.hx__cv{position:absolute;left:-15%;top:-15%;width:130%;height:130%;pointer-events:none}
.hx__orbit{position:absolute;left:50%;top:50%;border-radius:50%;pointer-events:none;
  border:1px solid rgba(124,46,40,.38);translate:-50% -50%}
.hx__orbit--1{width:128%;height:128%;animation:hx-orb1 26s linear infinite}
.hx__orbit--2{width:150%;height:150%;border-style:dashed;border-color:rgba(124,46,40,.26);animation:hx-orb2 40s linear infinite}
@keyframes hx-orb1{from{transform:rotateX(74deg) rotateY(-16deg) rotateZ(0)}to{transform:rotateX(74deg) rotateY(-16deg) rotateZ(1turn)}}
@keyframes hx-orb2{from{transform:rotateX(68deg) rotateY(22deg) rotateZ(1turn)}to{transform:rotateX(68deg) rotateY(22deg) rotateZ(0)}}
.hx__orbit i{position:absolute;left:50%;top:-5px;width:10px;height:10px;margin-left:-5px;border-radius:50%;
  background:var(--brand-2);box-shadow:0 0 0 3px rgba(255,255,255,.85),0 0 16px 4px rgba(124,46,40,.45)}
.hx__orbit--2 i{width:7px;height:7px;top:-4px;margin-left:-3.5px;background:#fff;box-shadow:0 0 12px 3px rgba(255,255,255,.8)}

/* ---- The pathways - three glass chips around the globe, each at its
   own depth (--d): they drift with the pointer by different amounts.
   GSAP moves the <li> (transform); the pointer moves the link inside it
   (`translate`), so neither overwrites the other. */
.hx__paths ul{margin:0;padding:0;list-style:none}
.hx__chip{--d:1;position:absolute;z-index:3;width:min(300px,58%)}
.hx__chip--1{--d:1.35;left:-5%;top:5%}
.hx__chip--2{--d:.8;right:-3%;top:43%}
.hx__chip--3{--d:1.1;left:3%;bottom:3%}
.hx__path{display:flex;align-items:center;gap:12px;padding:11px 16px 11px 11px;border-radius:18px;
  color:var(--ink);text-decoration:none;background:rgba(255,255,255,.88);
  border:1px solid rgba(255,255,255,.95);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);
  box-shadow:0 30px 56px -28px rgba(36,19,16,.5),0 2px 6px -2px rgba(36,19,16,.12);
  translate:calc(var(--x,0) * var(--d) * 16px) calc(var(--y,0) * var(--d) * 11px);
  animation:hx-bob 6.5s ease-in-out infinite;animation-delay:calc(var(--k,0) * -2.1s);
  transition:translate .55s cubic-bezier(.23,1,.32,1),background .35s var(--ease),color .35s var(--ease),box-shadow .35s var(--ease)}
@keyframes hx-bob{50%{transform:translateY(-7px)}}
.hx__path:focus-visible{outline:3px solid var(--brand);outline-offset:3px}
.hx__pn{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  font-family:var(--mono);font-size:.7rem;font-weight:800;letter-spacing:.04em;color:#fff;
  background:linear-gradient(160deg,var(--brand-2),var(--brand));transition:background .35s var(--ease),color .35s var(--ease)}
.hx__pl{flex:1 1 auto;min-width:0;font-weight:800;font-size:.92rem;letter-spacing:-.015em;line-height:1.3}
.hx__path i{flex:none;color:var(--brand);transition:transform .35s var(--ease),color .35s var(--ease)}
.hx__path:hover{color:#fff;background:linear-gradient(160deg,var(--brand-2),var(--brand));
  box-shadow:0 0 0 6px rgba(255,255,255,.4),0 34px 60px -26px rgba(62,20,17,.7)}
.hx__path:hover .hx__pn{background:#fff;color:var(--brand)}
.hx__path:hover i{color:#fff;transform:translate(2px,-2px)}

/* Scroll cue: a hairline with a drop running down it. */
.hx__cue{position:absolute;left:50%;bottom:22px;z-index:1;translate:-50% 0;
  width:1px;height:46px;background:var(--line-2);overflow:hidden}
.hx__cue i{position:absolute;left:0;top:0;width:1px;height:16px;
  background:var(--brand);animation:hx-cue 2.2s var(--ease) infinite}
@keyframes hx-cue{0%{transform:translateY(-16px)}100%{transform:translateY(46px)}}

@media(min-width:960px){
  .hx__in{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}
}
/* Narrow desktops: a slightly narrower chip, pulled out from the globe. */
@media(min-width:960px) and (max-width:1199px){
  .hx__chip{width:292px}
  .hx__chip--1{left:-8%;top:8%}
  .hx__chip--2{right:-6%;top:44%}
  .hx__chip--3{left:-4%;bottom:8%}
}
@media(max-width:959px){
  .hx{min-height:0}
  .hx__cue{display:none}
  /* Below the copy: the globe centred, the pathways a list under it. */
  .hx__stage{height:auto;perspective:none}
  .hx__globe{--gw:min(380px,74vw);position:relative;left:auto;top:auto;margin:34px auto 44px}
  .hx__paths ul{display:grid;gap:10px}
  .hx__chip{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:auto}
  .hx__path{animation:none;translate:none}
}
@media(max-width:679px){
  .hx__b{flex-direction:column;align-items:stretch}
  .hx__b .cta,.hx__b .cta-inv{width:100%}
}

/* ======================================================================
   H2. WHO WE ARE - photo + promise, then the pillar panel.
   ====================================================================== */
.ab__in{display:grid;gap:clamp(34px,5vw,64px);align-items:center}
/* The layered 3D stage. GSAP owns each layer's `transform` (scroll
   parallax, by data-depth); the pointer shift uses the separate `translate`
   property and the plate's tilt uses `rotate`, so nothing fights over one
   property. --d mirrors each layer's depth for the pointer shift. */
.ab__stage{position:relative;isolation:isolate;perspective:1200px;padding:40px 18px 74px 22px}
.ab__l{--d:0;translate:calc(var(--x,0) * var(--d) * 16px) calc(var(--y,0) * var(--d) * 12px)}
.ab__glow{position:absolute;z-index:-4;inset:-8% -6% -4% -14%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(124,46,40,.24),rgba(124,46,40,0) 72%);--d:-.4}
.ab__ring{position:absolute;z-index:-3;left:12%;top:-2%;width:76%;aspect-ratio:1;pointer-events:none;--d:-.3}
.ab__ring svg{display:block;width:100%;height:100%;overflow:visible;animation:ab-spin 60s linear infinite}
.ab__ring circle{fill:none;stroke:var(--brand);stroke-width:1.2;stroke-dasharray:2 7;stroke-linecap:round;opacity:.45}
@keyframes ab-spin{to{transform:rotate(1turn)}}
.ab__plate{position:absolute;z-index:-2;left:6%;top:14%;width:82%;height:72%;border-radius:30px;rotate:-6deg;--d:-.2;
  background:radial-gradient(rgba(240,220,216,.35) 1px,transparent 1px) 0 0/18px 18px,
    linear-gradient(160deg,var(--brand-2) 0%,var(--brand) 55%,#3E1411 100%);
  box-shadow:0 40px 70px -40px rgba(62,20,17,.65)}
/* The photo: whole, its own rounded corners; tilts toward the pointer. */
.ab__fr{position:relative;z-index:1;width:88%;margin-left:6%;--d:.15}
.ab__fr img{display:block;width:100%;height:auto;
  filter:drop-shadow(0 34px 40px rgba(36,19,16,.35));
  transform:rotateY(calc(var(--x,0) * 6deg)) rotateX(calc(var(--y,0) * -5deg));
  transition:transform .6s cubic-bezier(.23,1,.32,1)}
/* Floating chips: the pathways the copy names. */
.ab__chip{position:absolute;z-index:2}
.ab__chip b{display:inline-flex;align-items:center;gap:8px;padding:9px 14px 9px 9px;border-radius:999px;
  font-size:.86rem;font-weight:800;letter-spacing:-.01em;color:var(--ink);white-space:nowrap;
  background:rgba(255,255,255,.86);border:1px solid rgba(255,255,255,.95);
  -webkit-backdrop-filter:blur(12px) saturate(150%);backdrop-filter:blur(12px) saturate(150%);
  box-shadow:0 18px 34px -18px rgba(36,19,16,.5);animation:ab-bob 6s ease-in-out infinite}
.ab__chip b i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;font-size:.8rem;
  color:#fff;background:linear-gradient(160deg,var(--brand-2),var(--brand))}
.ab__chip--1{left:0;top:12%;--d:.9}
.ab__chip--2{right:4%;top:2%;--d:.6}
.ab__chip--2 b{animation-delay:-1.5s}
.ab__chip--3{right:-2%;top:50%;--d:1.1}
.ab__chip--3 b{animation-delay:-3s}
.ab__chip--4{left:-2%;bottom:30%;--d:.75}
.ab__chip--4 b{animation-delay:-4.5s}
@keyframes ab-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
/* The promise: a glass card over the photo's lower corner. */
.ab__q{position:absolute;z-index:3;right:0;bottom:0;width:min(420px,74%);margin:0;--d:.5;
  padding:20px 22px 18px;border-radius:20px;
  background:rgba(255,255,255,.9);border:1px solid rgba(255,255,255,.95);
  -webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);
  box-shadow:0 30px 60px -30px rgba(36,19,16,.55)}
.ab__q::before{content:"\201C";position:absolute;top:-22px;left:18px;display:grid;place-items:center;width:44px;height:44px;
  border-radius:50%;font-size:1.9rem;line-height:1;font-weight:900;color:#fff;padding-top:12px;
  background:linear-gradient(160deg,var(--brand-2),var(--brand));box-shadow:0 12px 24px -12px rgba(62,20,17,.6)}
.ab__q p{margin:0;font-size:1.02rem;line-height:1.6;color:var(--ink);font-style:italic}
.ab__q cite{display:block;margin-top:10px;font-style:normal;font-family:var(--mono);
  font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--brand)}
@media(max-width:640px){
  .ab__stage{padding:30px 6px 0}
  .ab__ring{display:none}
  .ab__chip b{font-size:.74rem;padding:7px 11px 7px 7px}
  .ab__chip b i{width:22px;height:22px;font-size:.66rem}
  .ab__chip--3{right:0}
  .ab__q{position:relative;width:auto;margin:-14px 8px 0 14%}
  .ab__plate{height:64%}
}
@media(prefers-reduced-motion:reduce){
  .ab__l{translate:none}
  .ab__ring svg,.ab__chip b{animation:none}
  .ab__fr img{transform:none;transition:none}
}
.ab__copy .body{margin-top:18px}
.ab__lnk{color:var(--brand);text-decoration:none;
  border-bottom:1px solid var(--line-2);transition:border-color .3s var(--ease)}
.ab__lnk:hover{border-bottom-color:var(--brand)}
@media(min-width:960px){.ab__in{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr)}}

/* Pillars: one white panel in three cells. */
.pil{margin:clamp(44px,6vw,76px) 0 0;padding:0;list-style:none;
  display:grid;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 30px 60px -46px rgba(62,20,17,.4)}
.pil__i{padding:clamp(26px,2.8vw,36px);border-radius:0}
.pil__i + .pil__i{border-top:1px solid var(--line)}
/* A hairline across the top of each cell that fills as it arrives. */
.pil__bar{position:absolute;left:0;right:0;top:0;height:2px;overflow:hidden}
.pil__bar i{display:block;height:100%;transform-origin:0 50%;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  transform:scaleX(var(--pil,1))}
.pil__ic{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;
  margin-bottom:16px;background:var(--brand-wash);color:var(--brand);font-size:1.15rem;
  border:1px solid rgba(90,31,27,.12);
  transition:background .4s var(--ease),color .4s var(--ease),rotate .4s var(--ease)}
.pil__i:hover .pil__ic{background:var(--brand);color:#fff;rotate:-6deg}
.pil__i .body{margin-top:8px}
@media(min-width:820px){
  .pil{grid-template-columns:repeat(3,1fr)}
  .pil__i + .pil__i{border-top:0;border-left:1px solid var(--line)}
}

/* ======================================================================
   H3. SERVICES - paper ground, tab decks dealt as cards.
   ====================================================================== */
.sv{position:relative;isolation:isolate;color:var(--ink);
  padding-block:clamp(64px,9vw,120px);overflow:hidden;
  background:linear-gradient(168deg,var(--white) 0%,var(--paper) 42%,var(--paper-2) 100%);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  scroll-margin-top:calc(var(--header-h,73px) - 1px)}
.sv .h-sec{color:var(--ink)}
.sv__field{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(56% 46% at 86% 4%,rgba(124,46,40,.11),transparent 64%),
    radial-gradient(44% 40% at 4% 96%,rgba(90,31,27,.08),transparent 62%)}
.sv .wrap{position:relative;z-index:1}
.sv__hd{display:grid;gap:18px;align-items:end;margin-bottom:clamp(30px,3.6vw,48px)}
.sv__hd .lead{color:var(--ink-2);margin:0}
@media(min-width:960px){.sv__hd{grid-template-columns:1.06fr .94fr;gap:clamp(28px,4vw,64px)}}

/* ---- THE TAB CONTROL: a segmented track ---------------------------------
   One rounded track holds the three chips, so they read as ONE control with
   three positions (not three separate buttons). Inside it: an oxblood pill
   marks the active chip and slides between them, and on fine pointers a
   faint pill follows the hover. A short rail mark under the track tracks the
   active chip. Pills and rail are created by tabs.js; without JS (or with
   reduced motion) the active chip paints its own fill instead.

   Chips never change size between states - the arrow's slot is always
   reserved - so the pill's measurement is always the final one. */
.sv__tabs{position:relative;display:flex;flex-wrap:wrap;gap:4px;
  width:fit-content;max-width:100%;padding:6px;border-radius:999px;
  background:rgba(255,255,255,.72);border:1px solid var(--line);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 14px 30px -24px rgba(90,31,27,.35);
  margin-bottom:clamp(6px,1vw,12px)}
.sv__tab{position:relative;z-index:1;appearance:none;cursor:pointer;font:inherit;
  font-weight:700;font-size:clamp(.84rem,1.05vw,.93rem);
  padding:12px 20px;border-radius:999px;text-align:left;
  display:inline-flex;align-items:center;gap:12px;
  color:var(--ink-2);background:transparent;border:0;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:color .2s ease,transform .16s ease-out}
/* Press feedback: the chip answers the instant it is pressed. */
.sv__tab:active{transform:scale(.97)}
@media(hover:hover) and (pointer:fine){.sv__tab:hover{color:var(--ink)}}
.sv__tab:focus-visible{outline:3px solid var(--brand);outline-offset:2px}

/* Number, set off by a hairline: "01 | name" reads as an index entry. */
.sv__tabn{position:relative;font-family:var(--mono);font-size:.68rem;font-weight:800;
  letter-spacing:.1em;color:var(--ink-3);padding-right:12px;transition:color .2s ease}
.sv__tabn::after{content:"";position:absolute;right:0;top:50%;
  width:1px;height:1.05em;transform:translateY(-50%);
  background:var(--line-2);transition:background .2s ease}
.sv__tabl{position:relative}
/* The arrow's slot is ALWAYS reserved (fixed width); only its opacity and
   turn change. A slot that grew on activation resized the chip after the
   pill had measured it. */
.sv__taba{position:relative;flex:none;width:.5em;height:.5em;margin-left:-2px;
  border-right:2px solid currentColor;border-top:2px solid currentColor;
  opacity:0;transform:rotate(45deg) translate(-2px,2px);
  transition:opacity .2s ease,transform .26s cubic-bezier(.23,1,.32,1)}

/* Active state. Without the pill (no JS / reduced motion) the chip paints
   its own fill; with the pill the chip is transparent and only the text
   inverts. */
.sv__tab[aria-selected="true"]{color:#fff;background:var(--brand)}
.sv__tab[aria-selected="true"] .sv__tabn{color:rgba(255,255,255,.72)}
.sv__tab[aria-selected="true"] .sv__tabn::after{background:rgba(255,255,255,.3)}
.sv__tab[aria-selected="true"] .sv__taba{opacity:1;transform:rotate(45deg) translate(0,0)}
.sv__tabs--ind .sv__tab[aria-selected="true"]{background:transparent}

/* The pills. Positioned and sized by tabs.js (GSAP x/y/width/height). */
.sv__ind,.sv__hov{position:absolute;top:0;left:0;z-index:0;border-radius:999px;
  pointer-events:none}
.sv__ind{background:linear-gradient(176deg,#7C2E28 0%,var(--brand) 46%,#4A1714 100%);
  box-shadow:0 10px 22px -12px rgba(90,31,27,.7),inset 0 1px 0 rgba(255,255,255,.18)}
.sv__hov{background:var(--brand-wash);opacity:0}

/* The rail: a hairline under the track with a short brand mark tracking the
   active chip - the pill says WHICH, the rail says it is one track. */
.sv__rail{position:absolute;left:18px;right:18px;bottom:-12px;height:3px;
  border-radius:3px;background:var(--line);overflow:hidden;pointer-events:none}
.sv__rail i{position:absolute;top:0;bottom:0;left:0;display:block;border-radius:3px;
  /* The rail is inset 18px from the track; tabs.js measures from the
     track's edge, so shift the mark back by the same amount. */
  margin-left:-18px;
  background:linear-gradient(90deg,var(--brand),var(--brand-2) 55%,var(--brand))}

/* Phones: the chips stack into a full-width column inside the track (the
   long first label would otherwise wrap into an uneven row); the pill then
   slides vertically. The rail describes a horizontal track, so it goes. */
@media(max-width:640px){
  .sv__tabs{display:grid;width:100%;border-radius:22px;padding:5px;gap:2px}
  .sv__tab{width:100%;padding:13px 16px;border-radius:17px}
  .sv__ind,.sv__hov{border-radius:17px}
  .sv__rail{display:none}
}

@media(prefers-reduced-motion:reduce){
  .sv__tab,.sv__taba,.sv__tabn{transition:none}
}

.sv__lead{margin:clamp(26px,3vw,38px) 0 0;color:var(--ink-2);
  font-family:var(--mono);font-size:.76rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase}

/* The deck: cards on the paper ground. */
.sv__list{margin:clamp(18px,2.2vw,26px) 0 0;padding:0;list-style:none;
  display:grid;gap:clamp(14px,1.6vw,20px)}
.sv__row{display:grid;gap:4px 18px;grid-template-columns:auto 1fr;align-items:start;
  padding:clamp(22px,2.4vw,30px);border-radius:var(--r-lg);
  background:var(--white);border:1px solid var(--line);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 18px 40px -34px rgba(90,31,27,.4);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease)}
.sv__row:hover{transform:translateY(-4px);border-color:var(--line-2);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 30px 50px -34px rgba(90,31,27,.5)}
.sv__n{font-family:var(--mono);font-size:.72rem;font-weight:800;letter-spacing:.1em;
  color:var(--brand-2);padding-top:.5em}
.sv__body{min-width:0;display:flex;flex-direction:column;height:100%}
.sv__top{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.sv__ct{margin:0;font-size:clamp(1.12rem,1.6vw,1.36rem);font-weight:800;
  line-height:1.24;letter-spacing:-.022em;color:var(--ink)}
.sv__lnk{color:inherit;text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .45s var(--ease),color .45s var(--ease)}
.sv__lnk:hover{background-size:100% 1px;color:var(--brand)}
/* Category tag: a hairline chip - a classification, not a status. */
.sv__tag{font-family:var(--mono);font-size:.62rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;padding:4px 10px;border-radius:999px;
  border:1px solid var(--line-2);color:var(--ink-2);background:var(--paper)}
.sv__cx{margin:10px 0 0;color:var(--ink-2);font-size:.95rem;line-height:1.66;max-width:62ch}
/* The link sits at the card's foot, so links in a row line up. */
.sv__go{margin-top:auto;padding-top:16px;align-self:flex-start;
  display:inline-flex;align-items:center;gap:8px;
  color:var(--brand);text-decoration:none;font-weight:800;font-size:.88rem}
.sv__go i{transition:transform .35s var(--ease)}
.sv__go:hover i{transform:translateX(4px)}

/* The deck's dark card (the source's "crimson" entries). */
.sv__row--dark{border-color:transparent;
  background:
    radial-gradient(120% 90% at 100% 0%,rgba(182,90,80,.3) 0%,rgba(182,90,80,0) 60%),
    linear-gradient(160deg,var(--brand-2) 0%,var(--brand) 55%,#3E1411 100%);
  box-shadow:0 30px 60px -36px rgba(62,20,17,.75),inset 0 1px 0 rgba(255,255,255,.14)}
.sv__row--dark:hover{border-color:transparent;
  box-shadow:0 38px 70px -36px rgba(62,20,17,.85),inset 0 1px 0 rgba(255,255,255,.14)}
.sv__row--dark .sv__n{color:#E8B4AC}
.sv__row--dark .sv__ct{color:#fff}
.sv__row--dark .sv__cx{color:rgba(255,255,255,.86)}
.sv__row--dark .sv__tag{color:#fff;border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.1)}
.sv__row--dark .sv__go{color:#fff}

.sv__cta{margin:clamp(32px,4vw,50px) 0 0;text-align:center}
/* On paper the closing button needs the brand fill to carry weight. */
.sv__cta .cta-inv{background:var(--brand);color:#fff;border-color:var(--brand)}
.sv__cta .cta-inv:hover{background:var(--brand-2);border-color:var(--brand-2)}

@media(min-width:760px){.sv__list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:679px){
  .sv__row{grid-template-columns:1fr;gap:8px}
  .sv__n{padding-top:0}
}

/* ======================================================================
   H4. DIFFERENCE - on the shared dark .band (about-v2.css).
   Desktop: heading + lead hold still on the left; four glass plates pass
   on the right. The commitments card closes the section at full width.
   ====================================================================== */
.band .h-sec{color:#fff}
.df__in{display:grid;gap:clamp(30px,4vw,48px);align-items:start}
.df__t{max-width:16ch;margin:0}
.df__l{margin:18px 0 0;max-width:52ch;color:rgba(255,255,255,.86)}
@media(min-width:1024px){
  .df__in{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(48px,6vw,96px)}
  .df__hd{position:sticky;top:calc(var(--header-h,73px) + 40px)}
}
.cmp{margin:0;padding:0;list-style:none;display:grid;gap:14px}
.cmp__row{display:grid;gap:6px 22px;grid-template-columns:auto 1fr;align-items:start;
  padding:clamp(22px,2.4vw,30px);border-radius:var(--r-lg);
  background:linear-gradient(168deg,rgba(255,255,255,.07),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:border-color .4s var(--ease),background .4s var(--ease)}
.cmp__row:hover{border-color:rgba(255,255,255,.24);
  background:linear-gradient(168deg,rgba(255,255,255,.1),rgba(255,255,255,.04))}
/* The number as an outlined numeral: present, but it does not shout. */
.cmp__n{font-size:clamp(1.9rem,2.8vw,2.5rem);font-weight:900;line-height:1;
  letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.2px rgba(240,220,216,.7)}
.cmp__body{min-width:0}
.cmp__h{margin:0;font-size:clamp(1.18rem,1.9vw,1.5rem);font-weight:800;
  letter-spacing:-.026em;line-height:1.22;color:#fff}
.cmp__p{margin:10px 0 0;color:rgba(255,255,255,.84);font-size:.98rem;line-height:1.7}
/* A rule along the plate's top edge that fills as the plate is read.
   Scroll-driven CSS: browsers without support show it full (below). */
.cmp__bar{position:absolute;left:0;right:0;top:0;height:2px;overflow:hidden}
.cmp__bar i{display:block;height:100%;width:100%;
  background:linear-gradient(90deg,#E8B4AC,rgba(232,180,172,0));
  transform:scaleX(0);transform-origin:left;
  animation:cmp-fill linear forwards;
  animation-timeline:view();animation-range:entry 10% cover 45%}
@keyframes cmp-fill{to{transform:scaleX(1)}}
@supports not (animation-timeline: view()){.cmp__bar i{transform:scaleX(1);animation:none}}
@media(max-width:559px){.cmp__row{grid-template-columns:1fr;gap:10px}}

/* The commitments: a light card lifted off the band. */
.cmt{position:relative;overflow:hidden;margin:clamp(34px,4.4vw,56px) 0 0;
  background:linear-gradient(168deg,var(--white) 0%,var(--paper) 100%);
  border:1px solid rgba(255,255,255,.5);border-radius:var(--r-lg);
  padding:clamp(28px,3.2vw,40px) clamp(24px,3vw,40px);
  box-shadow:0 30px 60px -28px rgba(24,10,8,.55),0 8px 18px -12px rgba(24,10,8,.38)}
.cmt::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,transparent,var(--brand) 12%,
    var(--brand-2) 50%,var(--brand) 88%,transparent)}
.cmt__h{margin:0;font-family:var(--mono);font-size:.74rem;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:var(--brand)}
.cmt__l{margin:20px 0 0;padding:0;list-style:none;display:grid;gap:12px 28px}
.cmt__l li{display:flex;align-items:center;gap:11px;
  font-size:1rem;font-weight:600;color:var(--ink)}
.cmt__l i{flex:none;display:grid;place-items:center;width:24px;height:24px;
  border-radius:50%;background:var(--brand);color:#fff;font-size:.74rem;
  box-shadow:0 2px 6px -3px rgba(90,31,27,.6)}
@media(min-width:760px){.cmt__l{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.cmt__l{grid-template-columns:repeat(3,1fr)}}

/* ======================================================================
   H5. PROCESS - four step cards on one rail.
   The rail runs through the number nodes; it fills as the track scrolls in
   (--pr-fill, GSAP) and each node fills when the rail reaches it
   (.is-lit, GSAP). Without motion both are simply full.
   ====================================================================== */
.pr__hd{max-width:72ch}
.pr__hd .lead{margin-top:14px}
.pr{margin:clamp(34px,4.4vw,56px) 0 0;padding:0;list-style:none;
  display:grid;gap:18px;position:relative;--pr-fill:100%}
.pr__s{position:relative;display:grid;grid-template-columns:52px 1fr;gap:16px;align-items:start}
.pr__n{position:relative;z-index:1;display:grid;place-items:center;
  width:52px;height:52px;border-radius:50%;
  font-family:var(--mono);font-size:.92rem;font-weight:800;
  background:var(--paper);color:var(--brand);border:2px solid var(--line-2);
  box-shadow:0 0 0 6px var(--paper);
  transition:background .5s var(--ease),color .5s var(--ease),border-color .5s var(--ease)}
.pr__s.is-lit .pr__n,html.mo-off .pr__n{background:var(--brand);color:#fff;border-color:var(--brand)}
.pr__card{padding:clamp(20px,2.2vw,26px);border-radius:var(--r-lg);
  background:var(--white);border:1px solid var(--line);
  box-shadow:0 18px 40px -34px rgba(90,31,27,.4);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease)}
.pr__s:hover .pr__card{transform:translateY(-4px);border-color:var(--line-2);
  box-shadow:0 30px 50px -34px rgba(90,31,27,.5)}
.pr__l{display:block;font-family:var(--mono);font-size:.68rem;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;color:var(--brand-2);margin-bottom:8px}
.pr__card .body{margin-top:8px}
.pr__cta{margin-top:clamp(32px,4vw,50px);text-align:center}
/* Phone/tablet: the rail runs DOWN through the nodes. */
.pr::before{content:"";position:absolute;left:25px;top:26px;bottom:26px;width:2px;
  background:linear-gradient(180deg,var(--brand) var(--pr-fill),var(--line-2) var(--pr-fill))}
@media(min-width:1024px){
  .pr{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,1.8vw,24px)}
  .pr__s{grid-template-columns:1fr;gap:18px}
  /* Desktop: the rail runs ACROSS through the nodes. */
  .pr::before{left:26px;right:26px;top:25px;bottom:auto;width:auto;height:2px;
    background:linear-gradient(90deg,var(--brand) var(--pr-fill),var(--line-2) var(--pr-fill))}
  .pr__card{height:100%}
}

/* ======================================================================
   MOTION GUARDS
   .mo-pre is set pre-paint by the layout; it is PERMANENT, so these hold
   by opacity only. home-motion.js reveals them.
   ====================================================================== */
html.mo-pre [data-rv]{opacity:0}
[data-rv].in{opacity:1}
html.mo-off [data-rv]{opacity:1}
/* Safety net: if the module never loads, reveal rather than stay blank. */
html.mo-pre:not(.mo-on):not(.mo-off) [data-rv]{animation:mo-fb .01s linear 2.5s forwards}
@keyframes mo-fb{to{opacity:1}}

html.mo-pre .hx__ln>span,
html.mo-pre .hx__l,
html.mo-pre .hx__b,
html.mo-pre .hx__globe,
html.mo-pre .hx__chip,
html.mo-pre .pr__s{opacity:0}
html.mo-pre:not(.mo-on):not(.mo-off) :is(.hx__ln>span,.hx__l,.hx__b,.hx__globe,.hx__chip,.pr__s){
  animation:mo-fb .01s linear 2.5s forwards}

@media(prefers-reduced-motion:reduce){
  html.mo-pre .hx__ln>span,html.mo-pre .hx__l,html.mo-pre .hx__b,
  html.mo-pre .hx__globe,html.mo-pre .hx__chip,html.mo-pre .pr__s,
  html.mo-pre [data-rv]{opacity:1}
  .hx__cue i,.hx__aura,.hx__orbit,.hx__path{animation:none}
  .hx__orbit{transform:rotateX(74deg)}
  .hx__path{translate:none}
  .cmp__bar i{transform:scaleX(1);animation:none}
  .sv__row,.pr__card,.cta-inv,.sv__go i,.sv__lnk,.hx__path,.hx__path i{transition:none}
}