/* Walsh Digital Co. — architectural editorial system */

/* ── Miami Design District ───────────────────────────
   ocean night · turquoise · flamingo · butter · liquid glass
   ─────────────────────────────────────────────────── */
:root{
  /* light (default) — the plaza in full sun */
  --bg:#f8f5ee;
  --bg-2:#eee8da;
  --fg:#0a2138;
  --mute:rgba(10,33,56,.58);
  --mute-2:rgba(10,33,56,.80);
  --rule:rgba(10,33,56,.14);
  --rule-2:rgba(10,33,56,.28);
  --accent:#0c7f96;      /* turquoise, deepened to stay legible on bone */
  --accent-lt:#3fc1d6;   /* full turquoise — fills, not text */
  --accent-2:#cf4b86;    /* flamingo */
  --accent-3:#dda32a;    /* butter / brass */
  --num:#0a2a47;         /* index numbers, on light */
  --panel:#0a2a47;       /* ocean night */
  --panel-2:#0f3355;
  --panel-3:#164066;

  --display:'Fraunces', 'Bodoni Moda', Georgia, serif;
  --body:'Archivo', system-ui, sans-serif;

  --gutter:clamp(20px,4vw,56px);
  --wrap:1440px;
  --nav-h:78px;
}

/* dark surfaces — ocean night, where the colour pops hardest */
.dark{
  --bg:#0a2a47;
  --bg-2:#0f3355;
  --fg:#f8f5ee;
  --mute:rgba(248,245,238,.60);
  --mute-2:rgba(248,245,238,.82);
  --rule:rgba(248,245,238,.16);
  --rule-2:rgba(248,245,238,.30);
  --accent:#4fd2e6;      /* turquoise, lifted */
  --accent-lt:#93e6f2;
  --accent-2:#f79ac4;    /* flamingo, lifted */
  --accent-3:#f0c559;
  --num:#f8f5ee;
  background:var(--bg);
  color:var(--fg);
}

/* plaza surface — drop into a dark page to break it open */
.light{
  --bg:#f8f5ee;
  --bg-2:#eee8da;
  --fg:#0a2138;
  --mute:rgba(10,33,56,.58);
  --mute-2:rgba(10,33,56,.80);
  --rule:rgba(10,33,56,.14);
  --rule-2:rgba(10,33,56,.28);
  --accent:#0c7f96;
  --accent-lt:#3fc1d6;
  --accent-2:#cf4b86;
  --accent-3:#dda32a;
  --num:#0a2a47;
  background:var(--bg);
  color:var(--fg);
}

/* ── aurora ──────────────────────────────────────────
   vibrant colour as diffuse light, not pattern.
   big soft fields of turquoise + flamingo behind content.
   ─────────────────────────────────────────────────── */
.aurora{position:relative;overflow:hidden;isolation:isolate}
/* glowbg: same glow as an absolute overlay, for use inside pinned/sticky parents */
.glowbg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.aurora::before,.aurora::after,.glowbg::before,.glowbg::after{
  content:"";position:absolute;z-index:0;pointer-events:none;
  border-radius:50%;filter:blur(90px);
}
.aurora::before,.glowbg::before{
  width:58vw;height:58vw;max-width:780px;max-height:780px;
  right:-14vw;top:-20vw;
  background:radial-gradient(circle,var(--aur-1,rgba(63,193,214,.55)),transparent 62%);
}
/* warm blob: flamingo core → butter mid → clear. pink AND yellow. */
.aurora::after,.glowbg::after{
  width:52vw;height:52vw;max-width:680px;max-height:680px;
  left:-14vw;bottom:-22vw;
  background:radial-gradient(circle,
    var(--aur-2,rgba(207,75,134,.44)) 0%,
    var(--aur-3,rgba(221,163,42,.32)) 46%,
    transparent 72%);
}
.aurora > *{position:relative;z-index:1}
.dark .aurora::before,.dark.aurora::before,.dark .glowbg::before{--aur-1:rgba(79,210,230,.44)}
.dark .aurora::after,.dark.aurora::after,.dark .glowbg::after{--aur-2:rgba(247,154,196,.36);--aur-3:rgba(240,197,89,.30)}
@media (prefers-reduced-motion:no-preference){
  .glowbg::before{animation:drift1 26s ease-in-out infinite alternate}
  .glowbg::after{animation:drift2 32s ease-in-out infinite alternate}
}
@media (prefers-reduced-motion:no-preference){
  .aurora::before{animation:drift1 26s ease-in-out infinite alternate}
  .aurora::after{animation:drift2 32s ease-in-out infinite alternate}
}
@keyframes drift1{to{transform:translate(-70px,50px) scale(1.14)}}
@keyframes drift2{to{transform:translate(60px,-40px) scale(1.2)}}

/* ── liquid glass ────────────────────────────────────
   translucent, refractive, with a specular rim + sheen.
   needs colour behind it — pair with .aurora or a field.
   ─────────────────────────────────────────────────── */
.glass{
  position:relative;overflow:hidden;
  background:linear-gradient(150deg,rgba(248,245,238,.16),rgba(248,245,238,.05));
  -webkit-backdrop-filter:blur(26px) saturate(190%);
  backdrop-filter:blur(26px) saturate(190%);
  border:1px solid rgba(248,245,238,.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -1px 0 rgba(255,255,255,.06),
    0 30px 70px -30px rgba(2,12,24,.66);
}
/* specular sweep — the thing that reads as glass rather than fog */
.glass::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:linear-gradient(115deg,rgba(255,255,255,.20) 0%,transparent 38%,transparent 64%,rgba(255,255,255,.07) 100%);
}
.glass > *{position:relative;z-index:1}
/* on plaza (light) surfaces the glass tints the other way */
.light .glass,.light.glass{
  background:linear-gradient(150deg,rgba(255,255,255,.62),rgba(255,255,255,.30));
  border-color:rgba(255,255,255,.75);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 26px 60px -30px rgba(10,33,56,.34);
}
.light .glass::after,.light.glass::after{
  background:linear-gradient(115deg,rgba(255,255,255,.5) 0%,transparent 42%,transparent 66%,rgba(255,255,255,.22) 100%);
}

/* ── colour field ────────────────────────────────────
   one bold saturated block. luxury is confident colour,
   used once, at scale — the Tiffany facade move.
   ─────────────────────────────────────────────────── */
.field{
  --bg:#3fc1d6;
  --bg-2:#35b0c4;
  --fg:#04222e;
  --mute:rgba(4,34,46,.66);
  --mute-2:rgba(4,34,46,.86);
  --rule:rgba(4,34,46,.18);
  --rule-2:rgba(4,34,46,.34);
  --accent:#04222e;
  --accent-lt:#0a2a47;
  background:var(--bg);
  color:var(--fg);
}
.field--flamingo{--bg:#f79ac4;--bg-2:#f186b7;--fg:#3d0a24;--mute:rgba(61,10,36,.66);--mute-2:rgba(61,10,36,.86);--rule:rgba(61,10,36,.18);--rule-2:rgba(61,10,36,.34);--accent:#3d0a24;--accent-lt:#5c1236}

/* ── scroll reel ─────────────────────────────────────
   work rises from below, peaks front-and-centre, then
   climbs on, shrinking, as the next piece follows.
   JS-driven (site.js) via each item's distance from centre.
   ─────────────────────────────────────────────────── */
.reel-hero{position:relative;height:calc((var(--n,4) * 0.3 + 1) * 100vh)}
.reel-stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;align-items:center}
.reel-grid{position:relative;z-index:1;width:100%;display:grid;grid-template-columns:1fr minmax(340px,.92fr);align-items:center;gap:clamp(30px,4vw,72px)}
.reel-stage{position:relative;height:min(72vh,600px);align-self:center}
.reel-item{position:absolute;top:50%;left:50%;width:min(94%,480px);transform:translate(-50%,-50%);will-change:transform,opacity}
.reel-shot{position:relative;aspect-ratio:4/3;border-radius:18px;overflow:hidden;
  background:radial-gradient(120% 90% at 72% 12%,rgba(63,193,214,.22),transparent 58%),linear-gradient(160deg,var(--panel-3),var(--panel));
  box-shadow:0 46px 92px -42px rgba(2,12,24,.72),inset 0 0 0 1px rgba(248,245,238,.16)}
.reel-shot>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* browser-framed screenshots — read as intentional previews, not pasted-in */
.reel-shot--web{padding:40px 15px 15px}
.reel-bar{position:absolute;top:0;left:0;right:0;height:40px;display:flex;align-items:center;gap:7px;
  padding:0 15px;background:linear-gradient(180deg,rgba(248,245,238,.10),rgba(248,245,238,.02));
  border-bottom:1px solid rgba(248,245,238,.10)}
.reel-bar i{width:9px;height:9px;border-radius:50%;flex:none}
.reel-bar i:nth-child(1){background:rgba(221,163,42,.9)}
.reel-bar i:nth-child(2){background:rgba(207,75,134,.9)}
.reel-bar i:nth-child(3){background:rgba(63,193,214,.9)}
.reel-url{margin-left:9px;font-size:.6rem;letter-spacing:.02em;color:rgba(230,238,248,.6);
  background:rgba(248,245,238,.09);border-radius:7px;padding:4px 13px;max-width:64%;overflow:hidden;
  white-space:nowrap;text-overflow:ellipsis}
.reel-media{position:relative;width:100%;height:100%;border-radius:9px;overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(248,245,238,.08)}
.reel-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.reel-cap{display:flex;justify-content:space-between;gap:12px;margin-top:13px;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.reel-cap span:last-child{color:var(--accent)}

/* small-screen headline relief (was overflowing on phones) */
@media(max-width:560px){ .d1{font-size:clamp(2.2rem,10.5vw,3rem)} }

/* ── service cards (services page) ─────────────────── */
.svc-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(clamp(250px,40%,330px),1fr));gap:18px}
.svc-card{position:relative;overflow:hidden;border:1px solid var(--rule);border-radius:16px;
  padding:clamp(24px,2.4vw,34px);display:flex;flex-direction:column;min-height:250px;
  background:linear-gradient(160deg,color-mix(in srgb,var(--bg-2) 55%,transparent),transparent);
  transition:transform .45s cubic-bezier(.2,.8,.2,1),border-color .45s,box-shadow .45s}
.svc-card::before{content:"";position:absolute;right:-25%;top:-45%;width:66%;height:85%;border-radius:50%;
  background:radial-gradient(circle,var(--accent-lt),transparent 60%);opacity:0;filter:blur(46px);transition:opacity .55s}
.svc-card:hover{transform:translateY(-7px);border-color:var(--rule-2);box-shadow:0 34px 66px -40px rgba(2,12,24,.55)}
.svc-card:hover::before{opacity:.42}
.svc-card .num{position:relative;font-family:var(--display);font-style:italic;font-size:1.5rem;color:var(--num)}
.svc-card h3{position:relative;font-size:clamp(1.45rem,2.1vw,1.9rem);margin-top:.3em}
.svc-card p{position:relative;color:var(--mute);font-size:.96rem;margin-top:.7em;line-height:1.55}
.svc-card .price{position:relative;margin-top:auto;padding-top:18px;border-top:1px solid var(--rule);
  font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}

/* ── industries: typical-investment cards ──────────── */
.ind-block + .ind-block{margin-top:clamp(48px,7vw,92px);padding-top:clamp(48px,7vw,92px);border-top:1px solid var(--rule)}
.ind-name{color:var(--accent);font-size:clamp(1.9rem,4vw,3.2rem)}
.ind-head p{color:var(--mute);margin-top:.6em;max-width:52ch}
.ind-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(clamp(250px,30%,300px),1fr));gap:18px;margin-top:clamp(26px,3vw,42px)}
.ind-card{border:1px solid var(--rule);border-radius:16px;padding:clamp(24px,2.4vw,32px);display:flex;flex-direction:column;
  background:linear-gradient(160deg,color-mix(in srgb,var(--bg-2) 55%,transparent),transparent);
  transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s,border-color .4s}
.ind-card:hover{transform:translateY(-6px);border-color:var(--rule-2);box-shadow:0 30px 60px -40px rgba(2,12,24,.4)}
.ind-card h3{font-size:clamp(1.4rem,2vw,1.8rem)}
.ind-desc{color:var(--mute);font-size:.94rem;margin-top:.5em;line-height:1.5}
.ind-project{margin-top:22px}
.ind-project .l,.ind-monthly .l{display:block;font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);margin-bottom:.3em}
.ind-project .amt{font-family:var(--display);font-size:clamp(1.9rem,2.8vw,2.5rem);color:var(--fg);line-height:1.05}
.ind-monthly{margin-top:16px;font-size:1.02rem;color:#1f7a5a;font-weight:600}
.ind-incl{list-style:none;margin:20px 0 0;padding:18px 0 0;border-top:1px solid var(--rule);display:grid;gap:9px}
.ind-incl li{font-size:.86rem;color:var(--mute-2);display:flex;gap:.6em;align-items:flex-start}
.ind-incl li::before{content:"✓";color:var(--accent);font-weight:600;font-size:.85em;margin-top:.05em}

/* keep the hero's LEFT (headline) clean — glow stays on the reel side */
.reel-hero .glowbg::before{right:-8vw;top:-14vw}
.reel-hero .glowbg::after{left:auto;right:-4vw;bottom:-22vw;width:44vw;height:44vw}

/* landing "Five services" band — blue, with a restrained glow */
.tight.aurora::before{opacity:.5;width:40vw;height:40vw;right:-6vw;top:-30vw}
.tight.aurora::after{opacity:.45;left:auto;right:8vw;bottom:-32vw;width:36vw;height:36vw}

/* logo: exact PNG when present, the vector mark is the fallback */
.mark img{display:block;height:40px;width:auto}
.foot .mark img{height:32px}

/* liquid-glass panel floating on the blue services band */
.band-glass{display:grid;grid-template-columns:1fr 1.45fr;gap:clamp(26px,5vw,72px);align-items:center;
  padding:clamp(30px,4.5vw,56px);border-radius:22px}
@media(max-width:760px){.band-glass{grid-template-columns:1fr;gap:24px}}
@media(max-width:920px){
  .reel-hero{height:auto}
  .reel-stick{position:static;height:auto;min-height:0;display:block;padding:calc(var(--nav-h) + 56px) 0 40px}
  .reel-grid{grid-template-columns:1fr;padding-top:0}
  .reel-stage{height:auto;display:grid;gap:22px;margin-top:40px}
  .reel-item{position:static;width:100%;transform:none!important;opacity:1!important;z-index:auto!important}
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:var(--body);font-size:16px;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body::after{
  content:"";position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.030;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
::selection{background:var(--accent);color:#f8f5ee}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:400;font-optical-sizing:auto;line-height:1.04;letter-spacing:-0.014em;text-wrap:balance}
p{margin:0}
hr{border:0;height:1px;background:var(--rule);margin:0}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter);width:100%}

.d1{font-size:clamp(3rem,6.6vw,6.6rem)}
.d2{font-size:clamp(2.4rem,5vw,4.6rem)}
.d3{font-size:clamp(1.7rem,2.6vw,2.5rem)}
.ital{font-style:italic;color:var(--accent)}
/* gradient accent word — turquoise → flamingo → butter (Miami sunset) */
.grad{
  background-image:linear-gradient(100deg,var(--accent) 0%,var(--accent-2) 52%,var(--accent-3) 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  padding-right:.04em;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .grad{color:var(--accent);-webkit-text-fill-color:currentColor}
}
.lead{font-size:clamp(1.02rem,1.15vw,1.16rem);color:var(--mute-2);max-width:46ch;line-height:1.65}
.small{font-size:.92rem;color:var(--mute)}

.tag{font-family:var(--body);font-size:.66rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);display:inline-block}
.tag--rule{display:flex;align-items:center;gap:1em}
.tag--rule::after{content:"";height:1px;flex:1;background:var(--rule)}

/* small editorial detail — was a giant ghost numeral eating the layout */
/* solid fill, not hollow: navy on light surfaces, white on navy */
.folio{font-family:var(--display);font-size:clamp(2rem,3.2vw,3.2rem);line-height:.8;color:var(--num);-webkit-text-stroke:0;user-select:none}

/* ─── nav ────────────────────────────────────── */
/* always fixed — only the backing fades in, so it never scrolls out of frame */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;height:var(--nav-h);display:flex;align-items:center;
  background:transparent;border-bottom:1px solid transparent;
  transition:background .45s ease,border-color .45s ease,backdrop-filter .45s ease}
.nav.is-fixed{
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  backdrop-filter:blur(20px) saturate(180%);
  border-bottom-color:var(--rule);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16)
}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%}
.mark{display:inline-flex;align-items:center;gap:11px;color:var(--fg)}
.mark span{font-size:.74rem;font-weight:600;letter-spacing:.2em;white-space:nowrap}
.menu{display:flex;align-items:center;gap:clamp(18px,2.4vw,38px)}
.menu a{position:relative;font-size:.74rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);padding-block:6px;transition:color .3s}
.menu a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--accent);transition:width .4s cubic-bezier(.2,.8,.2,1)}
.menu a:hover{color:var(--fg)}
.menu a:hover::after{width:100%}
.menu a[aria-current="page"]{color:var(--fg)}
.menu a[aria-current="page"]::after{width:100%}
.nav-cta{font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;border:1px solid var(--rule-2);padding:.85em 1.4em;color:var(--fg);transition:background .35s,color .35s,border-color .35s}
.nav-cta:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.nav-cta::after{display:none}
.burger{display:none;background:none;border:0;color:var(--fg);cursor:pointer;padding:8px}
@media(max-width:880px){
  .menu{position:fixed;inset:0;background:var(--bg);flex-direction:column;align-items:flex-start;justify-content:center;gap:8px;padding:var(--gutter);transform:translateY(-100%);transition:transform .55s cubic-bezier(.7,0,.2,1);z-index:60}
  .menu.open{transform:none}
  .menu a{font-family:var(--display);font-size:2.4rem;letter-spacing:-.01em;text-transform:none;color:var(--fg)}
  .menu .nav-cta{font-family:var(--body);font-size:.8rem;margin-top:20px}
  .burger{display:block;z-index:70}
}

/* ─── buttons ────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:.8em;cursor:pointer;
  font-family:var(--body);font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  padding:1.15em 1.9em;border:1px solid var(--fg);background:var(--fg);color:var(--bg);
  transition:background .35s,color .35s,border-color .35s,transform .35s cubic-bezier(.2,.8,.2,1)
}
.btn:hover{background:var(--accent);border-color:var(--accent);color:#f8f5ee;transform:translateY(-2px)}
.btn .ar{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.btn:hover .ar{transform:translate(4px,-4px)}
.btn--line{background:transparent;color:var(--fg);border-color:var(--rule-2)}
.btn--line:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.ulink{display:inline-flex;align-items:center;gap:.7em;position:relative;padding-bottom:4px;font-size:.76rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.ulink::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--rule-2);transition:background .35s}
.ulink:hover::after{background:var(--accent)}

/* ─── hero: scroll-expansion ─────────────────── */
.hero-wrap{position:relative;height:230vh}
.hero-stick{position:sticky;top:0;height:100vh;overflow:hidden;
  display:grid;grid-template-columns:1fr minmax(320px,.8fr)}
.hero-left{
  background:var(--bg);display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--nav-h) + 40px) clamp(28px,4vw,64px) 40px
    clamp(20px,calc((100vw - var(--wrap))/2 + 4vw),100px);
}
/* dark plate; the media inside compresses → expands with scroll */
.hero-plate{
  position:relative;background:var(--panel);display:grid;place-items:center;overflow:hidden;
  border-left:1px solid var(--rule);
}
.hero-media{
  --p:0;
  position:relative;overflow:hidden;
  width:calc(56% + 44% * var(--p));
  height:calc(48% + 52% * var(--p));
  /* Palm Court arcade: opens as an arch, flattens to a plate as it expands */
  border-radius:
    calc(50% * (1 - var(--p))) calc(50% * (1 - var(--p))) 0 0 /
    calc(34% * (1 - var(--p))) calc(34% * (1 - var(--p))) 0 0;
  background:
    radial-gradient(120% 90% at 72% 14%, rgba(63,193,214,.22), transparent 58%),
    repeating-linear-gradient(135deg, rgba(248,245,238,.05) 0 1px, transparent 1px 26px),
    linear-gradient(180deg, var(--panel-3), var(--panel));
  box-shadow:0 0 0 1px rgba(248,245,238,.20);
  will-change:width,height,border-radius;
}
.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.plate-mark{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(44%,190px);opacity:.18;color:var(--accent-lt)}
.plate-cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:16px 18px;
  border-top:1px solid rgba(248,245,238,.16);
  background:linear-gradient(180deg,transparent,rgba(10,42,71,.75));
  font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(248,245,238,.6);
  display:flex;justify-content:space-between;gap:12px;
  opacity:calc(var(--p) * 1.6);
}
/* bottom-RIGHT so it never collides with the hero CTA buttons */
.scrollcue{
  position:absolute;right:var(--gutter);bottom:26px;z-index:3;pointer-events:none;
  display:inline-flex;align-items:center;gap:.9em;font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--mute)
}
@media(max-width:920px){.scrollcue{display:none}}
.scrollcue i{display:block;width:46px;height:1px;background:var(--rule-2);position:relative;overflow:hidden}
.scrollcue i::after{content:"";position:absolute;inset:0;width:40%;background:var(--accent);animation:cue 2.4s cubic-bezier(.6,0,.2,1) infinite}
@keyframes cue{0%{transform:translateX(-110%)}60%,100%{transform:translateX(280%)}}
@media(max-width:920px){
  .hero-wrap{height:auto}
  .hero-stick{position:static;height:auto;grid-template-columns:1fr}
  .hero-left{padding:calc(var(--nav-h) + 56px) var(--gutter) 48px}
  .hero-plate{border-left:0;border-top:1px solid var(--rule);height:58vh}
  .hero-media{width:100%!important;height:100%!important}
  .scrollcue{display:none}
  .plate-cap{opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .hero-media{width:100%!important;height:100%!important}
  .scrollcue i::after{animation:none}
}

/* ─── the break line + tiny section ──────────── */
.brk{display:flex;align-items:center;gap:1.4em;padding-block:0}
.brk::before,.brk::after{content:"";height:1px;flex:1;background:var(--rule)}
.brk span{font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;color:var(--mute)}
.tight{padding-block:clamp(40px,5vw,68px)}

/* ─── page header ────────────────────────────── */
.phead{padding:calc(var(--nav-h) + clamp(60px,9vw,130px)) 0 clamp(40px,5vw,70px);border-bottom:1px solid var(--rule)}
.phead-in{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:end}
@media(max-width:1000px){.phead-in{grid-template-columns:1fr}.folio{display:none}}

.sec{padding-block:clamp(64px,9vw,130px)}
.sec--rule{border-top:1px solid var(--rule)}
/* tonal shift so consecutive sections don't read flat */
.sec--alt{background:var(--bg-2)}

/* ─── editorial index ────────────────────────── */
.index-row{display:grid;grid-template-columns:auto 1.1fr 1.4fr auto;gap:clamp(18px,4vw,56px);align-items:baseline;
  padding-block:clamp(28px,3.6vw,46px);border-bottom:1px solid var(--rule);
  transition:padding-left .5s cubic-bezier(.2,.8,.2,1),background .5s}
.index-row:hover{padding-left:clamp(0px,1.6vw,26px);background:linear-gradient(90deg,rgba(70,96,140,.06),transparent 60%)}
.index-no{font-family:var(--display);font-size:1rem;color:var(--num);letter-spacing:.1em}
.index-row h3{font-size:clamp(1.5rem,2.5vw,2.3rem)}
.index-row:hover h3{color:var(--accent)}
.index-row p{color:var(--mute);font-size:.96rem;max-width:52ch}
.index-meta{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);white-space:nowrap;justify-self:end}
@media(max-width:900px){.index-row{grid-template-columns:auto 1fr;row-gap:10px}.index-row p{grid-column:2}.index-meta{display:none}}

/* ─── rule list ──────────────────────────────── */
.rlist{list-style:none;margin:0;padding:0}
.rlist li{padding-block:clamp(12px,1.4vw,17px);border-bottom:1px solid var(--rule);display:flex;gap:1.2em;align-items:baseline;color:var(--mute-2);font-size:.96rem}
.rlist li:first-child{padding-top:0}
.rlist b{font-family:var(--display);font-size:1.3rem;color:var(--num);line-height:1;min-width:2.6ch}
.rlist strong{color:var(--fg);font-weight:600}

/* ─── pricing table ──────────────────────────── */
.ptable{width:100%;border-collapse:collapse;margin-top:clamp(24px,3vw,40px)}
.ptable th{text-align:left;font-size:.62rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);padding-bottom:16px;border-bottom:1px solid var(--rule-2)}
.ptable th:last-child,.ptable td:last-child{text-align:right}
.ptable td{padding-block:clamp(20px,2.4vw,30px);border-bottom:1px solid var(--rule);vertical-align:top}
.ptable tbody tr{transition:background .4s}
.ptable tbody tr:hover{background:linear-gradient(90deg,rgba(70,96,140,.06),transparent 70%)}
.ptable .n{font-family:var(--display);font-size:clamp(1.3rem,2vw,1.75rem)}
.ptable .d{color:var(--mute);font-size:.9rem;margin-top:.4em;max-width:44ch}
.ptable .amt{font-family:var(--display);font-size:clamp(1.5rem,2.4vw,2.1rem);color:var(--accent);white-space:nowrap}
.ptable .amt em{font-family:var(--body);font-style:normal;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);display:block;margin-top:.5em}
@media(max-width:680px){
  .ptable thead{display:none}
  .ptable td{display:block;border:0;padding-block:6px}
  .ptable tbody tr{display:block;padding-block:24px;border-bottom:1px solid var(--rule)}
  .ptable td:last-child{text-align:left;padding-top:14px}
}

/* ─── builder ────────────────────────────────── */
.build{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(30px,4vw,64px);align-items:start}
.glbl{display:block;font-size:.62rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.deck{display:flex;flex-wrap:wrap;gap:10px}
.chip{font-family:var(--body);font-size:.8rem;font-weight:500;letter-spacing:.04em;padding:.9em 1.2em;
  border:1px solid var(--rule-2);background:transparent;color:var(--mute-2);cursor:pointer;
  display:inline-flex;align-items:center;gap:.7em;transition:all .3s}
.chip:hover{border-color:var(--accent);color:var(--fg)}
.chip .tick{width:14px;height:14px;border:1px solid var(--rule-2);display:inline-grid;place-items:center;font-size:.55rem;color:transparent;transition:all .3s}
.chip .pr{font-size:.72rem;letter-spacing:.08em;color:var(--accent)}
.chip.on{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.chip.on .tick{background:var(--bg);border-color:var(--bg);color:var(--fg)}
.chip.on .pr{color:rgba(246,242,233,.72)}
.est{padding:clamp(26px,3vw,38px);position:sticky;top:calc(var(--nav-h) + 24px)}
.row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding-block:11px;border-top:1px solid var(--rule);font-size:.9rem;color:var(--mute-2)}
.row:first-child{border-top:0}
.row .v{white-space:nowrap;color:var(--fg);font-variant-numeric:tabular-nums}
.row.save,.row.save .v{color:var(--accent)}
.row.total{margin-top:8px;padding-top:16px;border-top:1px solid var(--rule-2)}
.row.total .l{color:var(--fg);font-weight:600}
.row.total .v{font-family:var(--display);font-size:1.7rem;color:var(--accent)}
.est-empty{color:var(--mute);font-size:.9rem;padding-block:6px}
@media(max-width:880px){.build{grid-template-columns:1fr}.est{position:static}}

/* ─── footer ─────────────────────────────────── */
.foot{padding-block:clamp(46px,6vw,74px);background:var(--bg-2);border-top:1px solid var(--rule)}
.foot-grid{display:grid;grid-template-columns:1.6fr repeat(3,auto);gap:clamp(28px,4vw,64px)}
.foot h4{font-family:var(--body);font-size:.62rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.foot a,.foot li{color:var(--mute);font-size:.9rem;transition:color .3s}
.foot a:hover{color:var(--fg)}
.foot-btm{margin-top:clamp(38px,5vw,62px);padding-top:22px;border-top:1px solid var(--rule);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.72rem;letter-spacing:.06em;color:var(--mute)}
@media(max-width:820px){.foot-grid{grid-template-columns:1fr 1fr}}

/* ─── motion ─────────────────────────────────── */
.rise{opacity:0;transform:translateY(26px)}
.rise.in{opacity:1;transform:none;transition:opacity .95s cubic-bezier(.2,.8,.2,1),transform .95s cubic-bezier(.2,.8,.2,1)}
.rise[data-d="1"].in{transition-delay:.09s}
.rise[data-d="2"].in{transition-delay:.18s}
.rise[data-d="3"].in{transition-delay:.27s}
.rise[data-d="4"].in{transition-delay:.36s}
.load>*{opacity:0;transform:translateY(22px);animation:rise .95s cubic-bezier(.2,.8,.2,1) forwards}
.load>*:nth-child(1){animation-delay:.05s}
.load>*:nth-child(2){animation-delay:.14s}
.load>*:nth-child(3){animation-delay:.23s}
.load>*:nth-child(4){animation-delay:.32s}
.load>*:nth-child(5){animation-delay:.41s}
.load>*:nth-child(6){animation-delay:.50s}
@keyframes rise{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.rise,.load>*{opacity:1!important;transform:none!important;animation:none!important}}

.skip{position:absolute;left:16px;top:-60px;background:var(--fg);color:var(--bg);padding:.7em 1.2em;z-index:200;transition:top .25s}
.skip:focus{top:12px}
a:focus-visible,.btn:focus-visible,.chip:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}