:root{
  --bg:#050505; --card:#111; --card-2:#0d0d0d;
  --line:rgba(255,255,255,.08); --line-soft:rgba(255,255,255,.05);
  --txt:#fff; --txt-2:#B8B8B8; --txt-3:#6e6e6e;
  --gold:#E3C08A; --ok:#5FBF8C; --r:16px;
  /* motion system */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --ease-soft:cubic-bezier(.32,.72,0,1);
  /* type system: serif for display, sans for everything you interact with */
  --font-display:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --font-ui:'Manrope',system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--txt);font-family:'Manrope',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--gold);color:#000}
.wrap{max-width:1280px;margin:0 auto;padding:0 32px}
img,svg,canvas{display:block}

.eyebrow{font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--gold)}
h1{font-family:var(--font-display);font-size:clamp(44px,6vw,86px);line-height:1.06;font-weight:500;letter-spacing:-.012em}
h2{font-family:var(--font-display);font-size:clamp(32px,3.9vw,54px);line-height:1.12;font-weight:500;letter-spacing:-.01em}
.h3{font-family:var(--font-display);font-size:clamp(23px,2.3vw,31px);line-height:1.22;font-weight:600;letter-spacing:-.008em}
.gold{background:linear-gradient(100deg,#F0D6A8,#C9A46C);-webkit-background-clip:text;background-clip:text;color:transparent}
/* the highlighted bronze word carries a refined italic — same family, more elegance */
h1 .gold,h2 .gold{font-style:italic;font-weight:500;letter-spacing:-.004em;padding-right:.08em}
.body{color:var(--txt-2);font-size:16px;line-height:1.78}
.small{color:var(--txt-3);font-size:13px;line-height:1.6}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;transition:background .4s,border-color .4s;border-bottom:1px solid transparent}
.nav.stuck{background:rgba(5,5,5,.72);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);border-bottom-color:var(--line-soft)}
.nav-in{display:flex;align-items:center;gap:40px;height:76px}
.logo{display:flex;align-items:baseline;gap:9px;font-weight:800;font-size:23px;letter-spacing:-.04em;color:#fff;text-decoration:none}
.logo span{font-size:9.5px;letter-spacing:.36em;font-weight:500;color:var(--txt-2)}
.nav-links{display:flex;gap:30px;margin-left:auto}
.nav-links a{color:var(--txt-2);text-decoration:none;font-size:14px;font-weight:500;position:relative;padding:6px 0;transition:color .25s}
.nav-links a:hover,.nav-links a.on{color:#fff}
.nav-links a.on::after{content:"";position:absolute;left:50%;bottom:0;width:4px;height:4px;border-radius:50%;background:var(--gold);transform:translateX(-50%);box-shadow:0 0 10px 2px rgba(227,192,138,.6)}
.nav-cta{display:flex;gap:12px;align-items:center}
.burger{display:none;margin-left:auto;background:none;border:0;color:#fff;padding:10px;cursor:pointer}
.sheet{position:fixed;inset:76px 0 auto 0;z-index:99;background:rgba(5,5,5,.97);backdrop-filter:blur(18px);border-bottom:1px solid var(--line);padding:20px 32px 28px;display:none}
.sheet.open{display:block}
.sheet a{display:block;color:var(--txt-2);text-decoration:none;font-size:17px;font-weight:600;padding:13px 0;border-bottom:1px solid var(--line-soft)}
.sheet .btn{width:100%;justify-content:center;margin-top:18px;border-bottom:0;padding:15px 22px}
/* .sheet a sets a grey colour that outranks .btn-gold, so restate it here */
.sheet a.btn-gold{display:flex;color:#1a1206;font-weight:700;font-size:15.5px}
.sheet a.btn-gold:hover{color:#1a1206}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 22px;border-radius:12px;font-size:14.5px;font-weight:600;cursor:pointer;border:1px solid transparent;text-decoration:none;font-family:inherit;transition:transform .18s cubic-bezier(.2,.8,.3,1),box-shadow .28s,background .28s,border-color .28s;white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn-gold{background:linear-gradient(135deg,#F2DBB4,#D9B47F 45%,#C09A5F);color:#1a1206;box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 8px 24px -10px rgba(227,192,138,.5)}
.btn-gold:hover{box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 14px 40px -12px rgba(227,192,138,.75);transform:translateY(-2px)}
.btn-ghost{background:rgba(255,255,255,.02);border-color:var(--line);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);transform:translateY(-2px)}
.btn-sm{padding:10px 17px;font-size:13.5px;border-radius:10px}
.arw{transition:transform .25s cubic-bezier(.2,.8,.3,1)}
.btn:hover .arw,.scard:hover .arw{transform:translateX(4px)}

/* hero */
.hero{position:relative;padding:150px 0 130px;overflow:hidden}

/* full-bleed animated background — hidden for now so we can compare against
   the static hero photo below. Delete the "display:none" to bring it back. */

/* static hero photo — full-bleed, edges faded into the page background so
   there's no visible border/rectangle, just the image dissolving into black */
/* image sits ~7% lower and ~4% smaller than the section, and its bottom edge
   is feathered out so it dissolves into the next section instead of ending
   on a hard line */
.hero-photo{position:absolute;inset:7% 0 -5% 0;z-index:0;pointer-events:none;overflow:hidden}
.hero-photo img{
  width:100%;height:96%;object-fit:cover;object-position:62% 46%;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 12%,#000 58%,rgba(0,0,0,.45) 82%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 12%,#000 58%,rgba(0,0,0,.45) 82%,transparent 100%);
    will-change:transform;
}
/* WebGL layer sits exactly over the still image and cross-fades in once ready */
#heroGL{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .9s var(--ease-out);pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 12%,#000 58%,rgba(0,0,0,.45) 82%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 12%,#000 58%,rgba(0,0,0,.45) 82%,transparent 100%)}
#heroGL.live{opacity:1}
.hero-photo img{transition:opacity .9s var(--ease-out);filter:brightness(1.22) contrast(.95) saturate(1.04)}

/* --- ambient motion ---
   A very slow drift/zoom on the still (the "Ken Burns" film technique) so the
   scene breathes instead of sitting dead. This is the *fallback* ambience only:
   it is paused the moment the shader takes over (JS sets .gl-live once a hero
   frame is confirmed drawn), because the shader has its own cloud drift and
   bronze sweep. Below 900px it never runs at all — that's the same threshold
   the shader uses, and phones get the crisp, battery-cheap still. */
@keyframes heroDrift{
  0%   {transform:scale(1.00) translate3d(0,0,0)}
  50%  {transform:scale(1.045) translate3d(-0.9%,-0.6%,0)}
  100% {transform:scale(1.00) translate3d(0,0,0)}
}
@media (min-width:900px){
  .hero-photo img{animation:heroDrift 46s ease-in-out infinite;will-change:transform}
  .hero-photo.gl-live img{animation-play-state:paused}
}

/* The warm light pass across the facade is deliberately left inert: the
   shader's own bronze sweep already does this, and a permanently animating
   blur(14px) layer is one of the most expensive things you can composite. */
.hero-sweep{
  position:absolute;top:8%;bottom:14%;left:0;width:34%;z-index:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(240,214,168,0) 0%,rgba(240,214,168,.16) 42%,rgba(255,240,214,.26) 55%,rgba(240,214,168,.10) 70%,rgba(240,214,168,0) 100%);
  filter:blur(14px);opacity:0;
}

/* extra wash over the last stretch of the hero so the handoff to the next
   section has no visible seam */
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:26%;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,5,5,0),var(--bg));
}
.hero-photo::after{
  content:"";position:absolute;inset:0;
  /* dark behind the copy on the left, fading clear toward the right */
  background:linear-gradient(90deg,rgba(5,5,5,.95) 0%,rgba(5,5,5,.78) 22%,rgba(5,5,5,.4) 45%,rgba(5,5,5,.05) 68%,rgba(5,5,5,0) 100%);
}
/* soft blend at the bottom edge of the hero so the image doesn't end abruptly
   into the Work section below */
.hero-fade{position:absolute;left:0;right:0;bottom:0;height:220px;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,5,5,0) 0%,rgba(5,5,5,.55) 45%,rgba(5,5,5,.92) 80%,rgba(5,5,5,1) 100%);
}

.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr);gap:48px;align-items:center;min-height:520px}
.hero-copy{max-width:560px}
.hero-copy h1{margin:20px 0 22px}
.hero-copy .body{max-width:430px}
.hero-btns{display:flex;gap:14px;margin:34px 0 16px;flex-wrap:wrap}
.riskline{font-size:13px;color:var(--txt-3);margin-bottom:34px}

/* previous boxed hero visual — kept in the code, hidden while we try the
   full-bleed background instead. Remove the "display:none" below (and the
   two lines above it) to bring it back. */

/* sections */
.sec{padding:110px 0}
.rule{border-top:1px solid var(--line-soft)}
.sec-head{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.6fr);gap:56px;align-items:start}
.sec-head h2{margin:16px 0 18px}

/* case */
.case{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;margin-top:44px}
.case-visual{position:relative;border:1px solid var(--line);border-radius:20px;overflow:hidden;height:400px;background:linear-gradient(150deg,#16222b,#080d11)}
.case-visual canvas{position:absolute;inset:0;width:100%;height:100%}
.case-photo{position:absolute;inset:-2%;width:104%;height:104%;object-fit:cover;object-position:center}
.case-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,13,17,0) 35%,rgba(8,13,17,.92) 100%)}
.tagline{position:absolute;left:30px;bottom:28px;right:30px}
.metrics{display:flex;gap:16px;flex-wrap:wrap;margin:28px 0 30px}
.metric{flex:1;min-width:130px;border:1px solid var(--line);border-radius:14px;padding:18px;background:var(--card)}
.metric b{display:block;font-size:30px;font-weight:800;letter-spacing:-.04em;line-height:1}
.metric span{display:block;font-size:12px;color:var(--txt-3);margin-top:8px}
.ticks li{list-style:none;display:flex;gap:11px;align-items:flex-start;color:var(--txt-2);font-size:14.5px;padding:7px 0}

/* services */
.cards4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.scard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px 20px 22px;position:relative;overflow:hidden;transition:transform .35s cubic-bezier(.2,.8,.3,1),border-color .35s,background .35s}
.scard::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(227,192,138,.55),transparent);opacity:0;transition:opacity .4s}
.scard:hover{transform:translateY(-6px);border-color:rgba(227,192,138,.25);background:#141414}
.scard:hover::before{opacity:1}
.ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;border:1px solid rgba(227,192,138,.22);background:radial-gradient(120% 120% at 30% 0%,rgba(227,192,138,.16),rgba(227,192,138,.03));color:var(--gold);margin-bottom:18px}
.scard h3{font-family:var(--font-display);font-size:21px;font-weight:600;letter-spacing:-.005em;margin-bottom:10px;line-height:1.25}
.scard>p{font-size:13.5px;color:var(--txt-2);line-height:1.65;margin-bottom:18px}
.lrn{display:inline-flex;align-items:center;gap:7px;color:var(--gold);font-size:13px;font-weight:600;cursor:pointer;background:none;border:0;font-family:inherit;padding:0}
/* collapsible "Learn more" panel on each service card */
.more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.2,.8,.3,1);overflow:hidden}
.more-in{overflow:hidden}
.more-in p{font-size:13px;color:var(--txt-2);line-height:1.7;margin:0}
.more-in .slist{margin:0 0 14px}
.scard.open .more{grid-template-rows:1fr}
.scard.open .more-in{padding-bottom:16px}
.scard.open .lrn .arw{transform:rotate(90deg)}

/* process */
.steps{display:grid;grid-template-columns:repeat(4,1fr);margin-top:52px;border-top:1px solid var(--line)}
.pstep{padding:30px 26px 34px;border-right:1px solid var(--line);position:relative}
.pstep:last-child{border-right:0}
.pstep::before{content:"";position:absolute;top:-1px;left:0;width:0;height:1px;background:linear-gradient(90deg,#F0D6A8,rgba(227,192,138,0));transition:width .8s cubic-bezier(.2,.8,.3,1)}
.steps.lit .pstep::before{width:100%}
.steps.lit .pstep:nth-child(2)::before{transition-delay:.14s}
.steps.lit .pstep:nth-child(3)::before{transition-delay:.28s}
.steps.lit .pstep:nth-child(4)::before{transition-delay:.42s}
.pnum{font-size:12px;font-weight:700;color:var(--gold);letter-spacing:.08em;margin-bottom:16px}
.pstep h4{font-family:var(--font-display);font-size:21px;font-weight:600;letter-spacing:-.005em;margin-bottom:10px}
.pstep p{font-size:13.5px;color:var(--txt-2);line-height:1.65}
.pweek{font-size:11px;color:var(--txt-3);margin-top:14px;letter-spacing:.05em;text-transform:uppercase;font-weight:600}

/* ===== PRICING ===== */
/* segmented selector */
.pseg-wrap{display:flex;justify-content:center;margin:44px 0 8px}
.pseg{position:relative;display:inline-flex;padding:5px;border:1px solid var(--line);border-radius:99px;background:rgba(255,255,255,.02);backdrop-filter:blur(10px)}
.pseg-glide{position:absolute;top:5px;left:5px;height:calc(100% - 10px);border-radius:99px;background:linear-gradient(135deg,#F2DBB4,#D9B47F 45%,#C09A5F);box-shadow:0 6px 20px -8px rgba(227,192,138,.6);transition:transform .45s cubic-bezier(.2,.8,.3,1),width .45s cubic-bezier(.2,.8,.3,1)}
.pseg-btn{position:relative;z-index:1;border:0;background:none;font-family:inherit;font-size:14.5px;font-weight:600;color:var(--txt-2);padding:12px 26px;border-radius:99px;cursor:pointer;white-space:nowrap;transition:color .3s}
.pseg-btn:hover{color:#fff}
.pseg-btn.on{color:#1a1206}

/* panels */
.ppanel{display:none}
.ppanel.on{display:block;animation:panelIn .55s cubic-bezier(.2,.8,.3,1)}
@keyframes panelIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.plabel{text-align:center;font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--txt-3);margin:30px 0 4px}

.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:34px;align-items:stretch}
.pcard{position:relative;border:1px solid var(--line);border-radius:18px;padding:36px 28px 30px;background:var(--card);display:flex;flex-direction:column;transition:transform .4s cubic-bezier(.2,.8,.3,1),border-color .4s,box-shadow .4s}
.pcard:hover{transform:translateY(-5px);border-color:rgba(227,192,138,.28)}
.pcard.rec{border-color:rgba(227,192,138,.5);background:linear-gradient(170deg,#151310,#0f0e0c);box-shadow:0 26px 60px -30px rgba(227,192,138,.35)}
.pcard.rec:hover{box-shadow:0 34px 70px -28px rgba(227,192,138,.45)}
.pcard-badge{position:absolute;top:-12px;left:28px;background:linear-gradient(135deg,#F2DBB4,#D9B47F 45%,#C09A5F);color:#1a1206;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:6px 13px;border-radius:99px}
.pcard h4{font-size:12px;font-weight:700;letter-spacing:.2em;color:var(--txt-3);text-transform:uppercase;margin-bottom:16px}
.pcard.rec h4{color:var(--gold)}
.pcard .phead{font-family:var(--font-display);font-size:24px;font-weight:600;letter-spacing:-.005em;line-height:1.25;color:#fff;margin-bottom:12px}
.pcard .pdesc{color:var(--txt-2);font-size:13.5px;line-height:1.65;margin-bottom:22px}
.plist{margin:0 0 26px;padding:22px 0 0;border-top:1px solid var(--line-soft)}
.plist li{list-style:none;font-size:13.5px;color:var(--txt-2);line-height:1.5;padding:7px 0 7px 22px;position:relative}
.plist li::before{content:"";position:absolute;left:0;top:13px;width:9px;height:1.5px;background:var(--gold);opacity:.75}
.pfoot{margin-top:auto}
.pfrom{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-3);font-weight:600;margin-bottom:6px}
.pcard .pprice{font-size:38px;font-weight:800;letter-spacing:-.04em;color:#fff;line-height:1}
.pcard .pprice .per{font-size:15px;font-weight:500;color:var(--txt-3);letter-spacing:0}
.pnote{font-size:11.5px;color:var(--txt-3);line-height:1.5;margin-top:12px}
.pcard .btn{margin-top:20px;justify-content:center;width:100%}

/* care plans */
.care{margin-top:56px;padding-top:44px;border-top:1px solid var(--line-soft)}
.care-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:24px}
.care-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ccard{position:relative;border:1px solid var(--line);border-radius:14px;padding:22px 22px;background:rgba(255,255,255,.015);transition:border-color .35s,transform .35s cubic-bezier(.2,.8,.3,1)}
.ccard:hover{border-color:rgba(227,192,138,.28);transform:translateY(-3px)}
.ccard.rec{border-color:rgba(227,192,138,.4);background:rgba(227,192,138,.04)}
.cbadge{position:absolute;top:-10px;right:18px;font-size:9.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);background:#100f0d;border:1px solid rgba(227,192,138,.4);padding:4px 10px;border-radius:99px}
.cname{font-size:13px;font-weight:600;color:var(--txt-2);margin-bottom:9px}
.cprice{font-size:22px;font-weight:800;letter-spacing:-.03em;color:#fff}
.cprice span{font-size:13px;font-weight:500;color:var(--txt-3);letter-spacing:0}

.ccard .cdesc{font-size:13px;color:var(--txt-2);line-height:1.6;margin:14px 0 16px;padding-top:14px;border-top:1px solid var(--line-soft)}
.clist{margin:0;padding:0}
.clist li{list-style:none;font-size:12.5px;color:var(--txt-2);line-height:1.5;padding:5px 0 5px 18px;position:relative}
.clist li::before{content:"";position:absolute;left:0;top:12px;width:7px;height:1.5px;background:var(--gold);opacity:.65}
.ccard{display:flex;flex-direction:column}

/* combined CTA */
.pboth{margin-top:56px;border:1px solid rgba(227,192,138,.22);border-radius:20px;padding:44px 40px;background:linear-gradient(150deg,rgba(227,192,138,.06),rgba(227,192,138,.01))}
.pboth-in{max-width:620px}

@media (max-width:980px){
  .pricing-grid{grid-template-columns:1fr;max-width:520px;margin-left:auto;margin-right:auto}
  .care-grid{grid-template-columns:1fr;max-width:520px;margin:0 auto}
}
@media (max-width:620px){
  .pseg{width:100%;display:flex}
  .pseg-btn{flex:1;padding:12px 10px;font-size:13.5px}
  .pcard{padding:30px 22px 26px}
  .pcard .phead{font-size:17.5px}
  .pboth{padding:32px 22px;border-radius:16px}
  .pboth .btn{width:100%;justify-content:center}
}

/* fit */
.fit{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:40px}
.fitbox{border:1px solid var(--line);border-radius:var(--r);padding:28px;background:var(--card)}
.fitbox.no{background:transparent}
.fitbox h4{font-size:16px;font-weight:700;margin-bottom:18px;display:flex;align-items:center;gap:10px}
.fitbox li{list-style:none;color:var(--txt-2);font-size:14.5px;line-height:1.6;padding:8px 0 8px 22px;position:relative}
.fitbox li::before{content:"";position:absolute;left:0;top:15px;width:8px;height:1.5px;background:var(--gold)}
.fitbox.no li::before{background:#4a4a4a}

.fitline{margin-top:34px;text-align:center;font-size:16px;line-height:1.6;color:var(--txt-2);max-width:620px;margin-left:auto;margin-right:auto}

/* cta */
.cta{position:relative;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:var(--card-2);padding:64px 56px;margin-bottom:110px}
.cta canvas{position:absolute;top:0;right:0;width:62%;height:100%;opacity:.85}
.cta-in{position:relative;max-width:520px}
.cta h2{margin-bottom:16px}
.form{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
.form input{flex:1;min-width:230px;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:12px;padding:14px 16px;color:#fff;font-size:14.5px;font-family:inherit;transition:border-color .25s,background .25s}
.form input::placeholder{color:#5e5e5e}
.form input:focus{outline:none;border-color:rgba(227,192,138,.5);background:rgba(255,255,255,.06)}
.sent{color:var(--ok);font-size:14.5px;font-weight:600;margin-top:20px;display:none}

/* ===== CLIENT HUB ===== */
.hub{position:fixed;inset:0;z-index:200;background:var(--bg);overflow-y:auto;display:none}
.hub.open{display:block}
.hub-bar{position:sticky;top:0;z-index:2;background:rgba(5,5,5,.86);backdrop-filter:blur(18px);border-bottom:1px solid var(--line-soft)}
.hub-bar-in{display:flex;align-items:center;gap:20px;height:74px}
.hub-close{margin-left:auto;background:none;border:1px solid var(--line);color:var(--txt-2);border-radius:10px;padding:9px 15px;font-family:inherit;font-size:13.5px;cursor:pointer;transition:border-color .25s,color .25s}
.hub-close:hover{border-color:rgba(255,255,255,.2);color:#fff}
.hub-body{padding:44px 0 90px}

/* sign-in gate */
.gate{max-width:420px;margin:8vh auto 0;text-align:center}
.gate h2{margin-bottom:14px}
.gate .code-row{display:flex;gap:10px;margin-top:26px}
.gate input{flex:1;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:12px;padding:14px 16px;color:#fff;font-size:15px;font-family:inherit;letter-spacing:.08em;text-transform:uppercase}
.gate input::placeholder{color:#5e5e5e;letter-spacing:normal;text-transform:none}
.gate input:focus{outline:none;border-color:rgba(227,192,138,.5)}
.gate .err{color:#d98b8b;font-size:13.5px;margin-top:14px;min-height:18px}

.gate-foot{margin-top:34px;padding-top:24px;border-top:1px solid var(--line-soft)}
.gate-foot a{color:var(--gold);text-decoration:none;font-weight:600}
.gate-foot a:hover{text-decoration:underline}
.gate-excl{margin-top:16px;font-size:12px;letter-spacing:.06em;color:var(--gold);opacity:.7}

/* project cards */
.hub-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:38px}
.proj{border:1px solid var(--line);border-radius:18px;background:var(--card);padding:30px 28px;margin-bottom:20px}
.proj-top{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.proj h3{font-size:19px;font-weight:700;letter-spacing:-.02em;margin-bottom:5px}
.chip{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;padding:6px 11px;border-radius:99px;border:1px solid rgba(227,192,138,.3);color:var(--gold);background:rgba(227,192,138,.06);white-space:nowrap}
.chip.done{border-color:rgba(95,191,140,.35);color:var(--ok);background:rgba(95,191,140,.07)}
.pct{font-size:34px;font-weight:800;letter-spacing:-.04em;line-height:1}
.bar-track{height:6px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden;margin:16px 0 26px}
/* scaleX rather than width: same look, no layout work while it fills */
.bar-fill{height:100%;width:100%;border-radius:99px;background:linear-gradient(90deg,#8a6f42,#F0D6A8);
  transform:scaleX(0);transform-origin:left center;transition:transform 1.1s var(--ease-soft)}
.stages{display:grid;gap:2px}
.stage-row{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--line-soft)}
.stage-row:last-child{border-bottom:0}
.stage-dot{width:20px;height:20px;border-radius:50%;border:1.5px solid rgba(255,255,255,.16);flex:none;display:grid;place-items:center}
.stage-row.done .stage-dot{border-color:var(--ok);background:rgba(95,191,140,.12)}
.stage-row.active .stage-dot{border-color:var(--gold);background:rgba(227,192,138,.14);box-shadow:0 0 0 4px rgba(227,192,138,.08)}
.stage-name{font-size:14.5px;color:var(--txt-2);flex:1}
.stage-row.done .stage-name{color:var(--txt-3)}
.stage-row.active .stage-name{color:#fff;font-weight:600}
.stage-note{font-size:12.5px;color:var(--txt-3);text-align:right;max-width:230px}
.needs{margin-top:26px;padding:20px 22px;border:1px dashed rgba(227,192,138,.28);border-radius:14px;background:rgba(227,192,138,.03)}
.needs h5{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:12px;font-weight:700}
.needs li{list-style:none;font-size:14px;color:var(--txt-2);padding:6px 0 6px 20px;position:relative;line-height:1.55}
.needs li::before{content:"";position:absolute;left:0;top:14px;width:8px;height:1.5px;background:var(--gold)}
.needs .clear{font-size:14px;color:var(--ok)}
/* content delivery */
.cediting{display:flex;gap:16px;align-items:flex-start;padding:22px;border:1px solid var(--line);border-radius:14px;background:rgba(227,192,138,.03)}
.cprev{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin-bottom:4px}
.cprev-i{aspect-ratio:4/3;border-radius:10px;background-size:cover;background-position:center;border:1px solid var(--line)}
/* message button */
.proj-msg{display:inline-flex;align-items:center;gap:9px;margin-top:20px;padding:11px 18px;border-radius:11px;border:1px solid var(--line);background:rgba(255,255,255,.02);color:var(--txt-2);font-size:13.5px;font-weight:600;text-decoration:none;transition:border-color .25s,color .25s,background .25s}
.proj-msg:hover{border-color:rgba(37,211,102,.4);color:#fff;background:rgba(37,211,102,.06)}
.proj-msg svg{color:#25D366}
/* recommendations */
.recs{margin-top:34px;padding:28px;border:1px solid rgba(227,192,138,.25);border-radius:18px;background:linear-gradient(160deg,rgba(227,192,138,.05),rgba(227,192,138,.01))}
.recs h5{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:16px;font-weight:700}
.recs li{list-style:none;font-size:14.5px;color:var(--txt-2);line-height:1.6;padding:9px 0 9px 24px;position:relative}
.recs li::before{content:"\2192";position:absolute;left:0;top:9px;color:var(--gold);font-weight:700}
@media (max-width:760px){
  .hub-body{padding:30px 0 70px}
  .proj{padding:24px 20px}
  .stage-note{display:none}
}

/* floating WhatsApp button */
.wa{position:fixed;right:22px;bottom:22px;z-index:150;display:flex;align-items:center;gap:11px;padding:13px 18px 13px 15px;border-radius:99px;background:#25D366;color:#0a2e17;font-weight:700;font-size:14.5px;text-decoration:none;box-shadow:0 10px 30px -8px rgba(37,211,102,.5),0 2px 8px rgba(0,0,0,.3);transition:transform .22s cubic-bezier(.2,.8,.3,1),box-shadow .28s}
.wa:hover{transform:translateY(-3px);box-shadow:0 16px 40px -10px rgba(37,211,102,.65),0 2px 8px rgba(0,0,0,.3)}
.wa svg{flex:none}
.wa .wa-txt{white-space:nowrap}
@media (max-width:520px){.wa{padding:14px}.wa .wa-txt{display:none}}

/* audit section */
.audit-covers{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px;margin:28px 0 4px}
.ac{display:flex;gap:12px;align-items:flex-start;color:var(--gold)}
.ac svg{flex:none;margin-top:2px}
.ac b{display:block;color:#fff;font-size:14px;font-weight:700;letter-spacing:-.01em;margin-bottom:3px}
.ac span{display:block;color:var(--txt-2);font-size:12.5px;line-height:1.5}
.audit-assure{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:18px}
.audit-assure span{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--txt-2)}
@media (max-width:760px){.audit-covers{grid-template-columns:1fr}}

/* hub bar: logo left, title centred, close right */
.hub-bar-in{position:relative}
.hub-logo{flex:none}
.hub-title{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-size:12px;letter-spacing:.34em;text-transform:uppercase;font-weight:700;
  color:var(--gold);white-space:nowrap;padding-bottom:2px
}
.hub-title::after{
  content:"";position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);
  width:28px;height:1px;background:linear-gradient(90deg,transparent,rgba(227,192,138,.7),transparent)
}
@media (max-width:620px){
  .hub-title{font-size:10px;letter-spacing:.22em}
  .hub-logo{font-size:19px}
}

/* service card imagery */
.scard-media{position:relative;margin:-24px -20px 18px;height:150px;overflow:hidden;border-bottom:1px solid var(--line)}
.scard-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.8,.3,1)}
.scard:hover .scard-media img{transform:scale(1.05)}
.scard-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,5,5,.15) 0%,rgba(5,5,5,.55) 70%,rgba(17,17,17,.95) 100%)}
.scard-tag{position:absolute;left:14px;bottom:11px;z-index:2;font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--gold);text-shadow:0 1px 6px rgba(0,0,0,.8)}
.scard-media+h3{margin-top:0}
@media (max-width:760px){.scard-media{height:170px}}

/* service card bullets */
.slist{margin:0 0 18px;padding:0}
.slist li{list-style:none;font-size:12.5px;color:var(--txt-2);line-height:1.5;padding:5px 0 5px 18px;position:relative}
.slist li::before{content:"";position:absolute;left:0;top:12px;width:7px;height:1.5px;background:var(--gold);opacity:.7}

.audit-promise{margin:26px 0 4px;font-size:15px;font-weight:600;color:#fff;line-height:1.55;letter-spacing:-.01em}

/* ===== MOTION PASS ===== */
/* hover effects only on real pointers — stops phones firing hover on tap */
@media (hover:hover) and (pointer:fine){
  .scard:hover{transform:translateY(-6px)}
  .pcard:hover{transform:translateY(-5px)}
  .ccard:hover{transform:translateY(-3px)}
  .metric:hover{border-color:rgba(227,192,138,.28)}
}
@media (hover:none){
  .scard:hover,.pcard:hover,.ccard:hover{transform:none}
}

/* hero headline: one overflow mask per rendered line, each line rising up from
   behind it. The negative margins cancel the padding that gives descenders and
   the italic's overhang room inside the mask, so line spacing is unchanged. */
.hl{display:block;overflow:hidden;padding:0 .16em .18em 0;margin:0 -.16em -.18em 0}
.hl-i{display:block;transform:translateY(126%);transition:transform .85s var(--ease-soft)}
.hl-go .hl-i{transform:none}
/* re-splitting on resize or late font load must not replay the reveal */
.hl-instant .hl-i{transition:none}

/* ---------- mobile menu sheet ----------
   The most-used animation on the site: this is the primary navigation on a
   phone. It grows down from under the nav bar it belongs to, and leaves the
   same way, so the panel reads as attached to the burger rather than as a
   layer that blinks in over the page. */
@keyframes sheetIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@keyframes sheetOut{to{opacity:0;transform:translateY(-8px)}}
@keyframes sheetLink{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.sheet{transform-origin:top center}
.sheet.open{animation:sheetIn .22s var(--ease-out)}
.sheet.open>*{animation:sheetLink .28s var(--ease-out) backwards}
.sheet.open>*:nth-child(1){animation-delay:40ms}
.sheet.open>*:nth-child(2){animation-delay:70ms}
.sheet.open>*:nth-child(3){animation-delay:100ms}
.sheet.open>*:nth-child(4){animation-delay:130ms}
.sheet.open>*:nth-child(5){animation-delay:160ms}
.sheet.open>*:nth-child(6){animation-delay:190ms}
.sheet.open>*:nth-child(7){animation-delay:220ms}
/* leaving: fade up, then JS drops .open once the exit has played */
.sheet.open.closing{animation:sheetOut .18s var(--ease-out) forwards;pointer-events:none}
.sheet.open.closing>*{animation:none}
/* the burger swaps between two icons — soften the switch */
.burger svg{transition:transform .22s var(--ease-out)}
.burger[aria-expanded="true"] svg{transform:rotate(90deg)}

/* ---------- client hub: a considered entrance, not an instant cut ---------- */
@keyframes hubFade{from{opacity:0}to{opacity:1}}
@keyframes hubOut{to{opacity:0}}
@keyframes hubBar{from{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:none}}
@keyframes hubRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.hub.open{animation:hubFade .26s var(--ease-out)}
.hub.open .hub-bar{animation:hubBar .5s var(--ease-out) both}
.hub.open .gate>*{animation:hubRise .55s var(--ease-out) backwards}
.hub.open .gate>*:nth-child(1){animation-delay:80ms}
.hub.open .gate>*:nth-child(2){animation-delay:130ms}
.hub.open .gate>*:nth-child(3){animation-delay:180ms}
.hub.open .gate>*:nth-child(4){animation-delay:230ms}
.hub.open .gate>*:nth-child(5){animation-delay:270ms}
.hub.open .gate>*:nth-child(6){animation-delay:310ms}
/* leaving: fade out, then JS drops .open once the fade has played */
.hub.open.closing{animation:hubOut .22s var(--ease-out) forwards;pointer-events:none}

/* the dashboard assembles: header, then each project, then its stages */
#hubView .hub-head{animation:hubRise .5s var(--ease-out) 60ms backwards}
#hubView .proj{animation:hubRise .55s var(--ease-out) backwards}
#hubView .proj:nth-child(1){animation-delay:140ms}
#hubView .proj:nth-child(2){animation-delay:230ms}
#hubView .proj:nth-child(3){animation-delay:320ms}
#hubView .recs{animation:hubRise .55s var(--ease-out) 380ms backwards}
#hubProjects .stage-row{animation:hubRise .42s var(--ease-out) backwards}
#hubProjects .stage-row:nth-child(1){animation-delay:340ms}
#hubProjects .stage-row:nth-child(2){animation-delay:380ms}
#hubProjects .stage-row:nth-child(3){animation-delay:420ms}
#hubProjects .stage-row:nth-child(4){animation-delay:460ms}
#hubProjects .stage-row:nth-child(5){animation-delay:500ms}
.pct{font-variant-numeric:tabular-nums}

/* hub sign-in leaves before the dashboard arrives */
.gate{transition:opacity .18s var(--ease-out),transform .18s var(--ease-out)}
.gate.gate-out{opacity:0;transform:translateY(-10px)}

/* audit form hands over to the confirmation */
.form.form-out,.audit-assure.form-out{
  transition:opacity .18s var(--ease-out),transform .18s var(--ease-out);
  opacity:0;transform:scale(.985)
}
.sent{transition:opacity .4s var(--ease-out),transform .4s var(--ease-out)}

/* press feedback, matching .btn and .pseg-btn */
.lrn:active,.hub-close:active{transform:scale(.97)}
.lrn,.hub-close{transition:transform .16s var(--ease-out)}
.hub-close{transition:transform .16s var(--ease-out),border-color .25s,color .25s}

/* ---------- section transitions ----------
   The hairline between sections draws itself in as the next section arrives,
   so sections read as a continuing sequence rather than a stack of slabs. */
.sec.rule{position:relative}
.sec.rule::before{
  content:"";position:absolute;top:-1px;left:0;right:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,rgba(227,192,138,.5),rgba(227,192,138,0) 62%);
  transform:scaleX(0);transform-origin:left center;
  transition:transform 1.1s var(--ease-soft)
}
.sec.rule.edge::before{transform:none}

/* ---------- footer ---------- */
@media (hover:hover) and (pointer:fine){
  .fcol a{transition:color .25s var(--ease-out),transform .25s var(--ease-out)}
  .fcol a:hover{transform:translateX(3px)}
}

/* pricing: on a tab switch the cards arrive in sequence instead of the whole
   panel fading as one slab. Only on a real switch — .swap is set by JS. */
@keyframes pcardIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.ppanel.swap .pricing-grid>.pcard,
.ppanel.swap .care-grid>.ccard{animation:pcardIn .5s var(--ease-out) backwards}
.ppanel.swap .pricing-grid>.pcard:nth-child(2){animation-delay:60ms}
.ppanel.swap .pricing-grid>.pcard:nth-child(3){animation-delay:120ms}
.ppanel.swap .care-grid>.ccard:nth-child(1){animation-delay:150ms}
.ppanel.swap .care-grid>.ccard:nth-child(2){animation-delay:200ms}
.ppanel.swap .care-grid>.ccard:nth-child(3){animation-delay:250ms}
.ppanel.swap .plabel,.ppanel.swap .care-head{animation:pcardIn .42s var(--ease-out) backwards}
/* the panel itself no longer needs to slide once its cards do */
.ppanel.swap{animation:none}

/* nav: one indicator dot that travels to the section you're reading */
.nav-links{position:relative}
.nav-dot{
  position:absolute;left:0;bottom:0;width:4px;height:4px;margin-left:-2px;
  border-radius:50%;background:var(--gold);box-shadow:0 0 10px 2px rgba(227,192,138,.6);
  opacity:0;pointer-events:none;
  transition:transform .5s var(--ease-soft),opacity .3s var(--ease-out)
}
.nav-dot.set{opacity:1}
.nav-dot.no-anim{transition:none}
/* the static per-link dot is superseded by the travelling one */
.nav-links.has-dot a.on::after{display:none}

/* metrics: count-up needs stable width so the layout doesn't jitter */
.metric b{font-variant-numeric:tabular-nums}
.metric{transition:border-color .3s var(--ease-out),transform .5s var(--ease-out)}

/* hero: gentle parallax as the section scrolls away */
.hero-photo{will-change:transform}

/* section headings lift slightly as they arrive */
.sec-head h2,.sec>h2{transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}

/* pricing: recommended card's glow blooms in rather than sitting there */
.pcard.rec{transition:transform .4s var(--ease-out),border-color .4s,box-shadow .8s var(--ease-out)}
.pricing-grid:not(.in) .pcard.rec{box-shadow:0 26px 60px -30px rgba(227,192,138,0)}

/* service card images settle in behind the card */
.scard-media img{transition:transform .8s var(--ease-out),filter .8s var(--ease-out)}
.rv:not(.in) .scard-media img{transform:scale(1.08);filter:saturate(.6)}

/* nav shrinks slightly once you start scrolling */
.nav-in{transition:height .4s var(--ease-out)}
.nav.stuck .nav-in{height:66px}

/* process: each step's content lifts in after its line draws */
.pstep>*{opacity:0;transform:translateY(12px);transition:opacity .55s var(--ease-out),transform .55s var(--ease-out)}
.steps.lit .pstep>*{opacity:1;transform:none}
.steps.lit .pstep:nth-child(1)>*{transition-delay:120ms}
.steps.lit .pstep:nth-child(2)>*{transition-delay:260ms}
.steps.lit .pstep:nth-child(3)>*{transition-delay:400ms}
.steps.lit .pstep:nth-child(4)>*{transition-delay:540ms}

/* segmented control press feedback */
.pseg-btn:active{transform:scale(.98)}

/* reduced motion: keep fades, drop movement */
/* ===== NCV REDESIGN: DIGITAL PRESENCE ===== */
.hero-redesign{min-height:min(900px,100svh);padding:144px 0 92px;background:radial-gradient(70% 74% at 80% 44%,rgba(132,91,46,.19),transparent 64%),radial-gradient(55% 62% at 10% 32%,rgba(36,43,51,.23),transparent 70%)}
.hero-redesign::after{height:33%;background:linear-gradient(180deg,transparent,var(--bg) 86%)}
.hero-atmosphere{position:absolute;inset:0;pointer-events:none;opacity:.7;background:radial-gradient(circle at 77% 46%,rgba(239,204,151,.12),transparent 2%,transparent 25%),radial-gradient(circle at 77% 46%,rgba(227,192,138,.06),transparent 26%,transparent 42%)}
.hero-gridlines{position:absolute;inset:0;opacity:.32;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:68px 68px;mask-image:radial-gradient(ellipse 70% 90% at 80% 50%,#000,transparent 75%)}
.hero-orbit{position:absolute;border:1px solid rgba(227,192,138,.14);border-radius:50%;pointer-events:none;transform:rotate(-18deg);opacity:.7}.hero-orbit-a{width:840px;height:380px;right:-110px;top:172px}.hero-orbit-b{width:550px;height:210px;right:42px;top:258px;border-color:rgba(255,255,255,.08);transform:rotate(26deg)}
.hero-grid-redesign{grid-template-columns:minmax(0,.86fr) minmax(460px,1.14fr);gap:54px;min-height:600px;align-items:center}.hero-grid-redesign .hero-copy{max-width:595px}.hero-grid-redesign .hero-copy .body{max-width:510px}.hero-grid-redesign .riskline{margin-bottom:0}
.hero-stage{position:relative;min-height:545px;perspective:1400px;isolation:isolate}.hero-stage-glow{position:absolute;inset:13% 1% 8%;border-radius:50%;filter:blur(50px);background:radial-gradient(ellipse,rgba(225,179,111,.25),rgba(92,60,23,.08) 44%,transparent 70%);z-index:-1}.hero-stage-orbit{position:absolute;inset:0;animation:stageOrbit 18s linear infinite}.hero-stage-orbit::before,.hero-stage-orbit::after{content:"";position:absolute;border:1px solid rgba(227,192,138,.22);border-radius:50%;inset:14% 3%;transform:rotate(-22deg)}.hero-stage-orbit::after{inset:27% -4%;border-color:rgba(255,255,255,.1);transform:rotate(31deg)}.hero-stage-orbit i{position:absolute;width:5px;height:5px;border-radius:50%;background:#f1d39f;box-shadow:0 0 14px 4px rgba(227,192,138,.55)}.hero-stage-orbit i:nth-child(1){top:19%;left:31%}.hero-stage-orbit i:nth-child(2){right:7%;top:51%;width:3px;height:3px}.hero-stage-orbit i:nth-child(3){left:19%;bottom:12%;width:3px;height:3px}
.hero-plane{position:absolute;inset:77px 36px 62px 20px;overflow:visible;border:1px solid rgba(255,255,255,.2);border-radius:18px;background:linear-gradient(135deg,rgba(33,31,27,.92),rgba(8,8,8,.95) 50%,rgba(23,19,14,.94));box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 40px 80px -32px rgba(0,0,0,.9),0 0 0 1px rgba(227,192,138,.06);transform:rotateX(7deg) rotateY(-10deg);transform-style:preserve-3d;will-change:transform;transition:transform .2s ease-out}.hero-plane::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.14),transparent 14%,transparent 64%,rgba(227,192,138,.12));mix-blend-mode:screen}.hero-browser-bar{height:46px;border-bottom:1px solid rgba(255,255,255,.1);display:flex;align-items:center;gap:6px;padding:0 17px;color:#777;font-family:var(--font-ui);font-size:9px;letter-spacing:.12em;text-transform:uppercase}.hero-browser-bar>span{width:6px;height:6px;border-radius:50%;background:#5c4d3c}.hero-browser-bar>span:nth-child(2){background:#856f50}.hero-browser-bar>span:nth-child(3){background:#b7966a}.hero-browser-bar b{font-weight:600;margin-left:12px}.hero-browser-bar em{margin-left:auto;font-style:normal;color:#dabb83;display:flex;align-items:center;gap:6px}.hero-browser-bar em::before{content:"";width:5px;height:5px;border-radius:50%;background:#76c99b;box-shadow:0 0 9px #76c99b}
.hero-browser-content{position:relative;overflow:hidden;min-height:375px;padding:50px 46px;background:radial-gradient(circle at 88% 18%,rgba(227,192,138,.23),transparent 14%),linear-gradient(135deg,#16130e,#0b0b0b 64%)}.hero-browser-content::after{content:"";position:absolute;width:410px;height:410px;right:-144px;bottom:-277px;border:1px solid rgba(227,192,138,.4);border-radius:50%;box-shadow:0 0 0 42px rgba(227,192,138,.045),0 0 0 84px rgba(227,192,138,.025)}.hero-kicker{font-size:10px;font-weight:700;letter-spacing:.21em;color:#b7aa97;display:flex;align-items:center;gap:10px}.hero-kicker i{width:25px;height:1px;background:var(--gold)}.hero-display{position:relative;z-index:1;font:500 clamp(43px,5.2vw,74px)/.84 var(--font-display);letter-spacing:-.055em;margin-top:35px}.hero-display span{color:#e7c58c;font-style:italic}.hero-rule{width:54%;height:1px;margin-top:46px;background:linear-gradient(90deg,var(--gold),transparent)}.hero-browser-foot{position:absolute;left:46px;right:46px;bottom:34px;display:flex;gap:18px;font-size:9px;letter-spacing:.13em;color:#888}.hero-browser-foot b{margin-left:auto;color:#c8a873;font-weight:600}.hero-float{position:absolute;z-index:3;backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);border:1px solid rgba(255,255,255,.19);background:rgba(22,19,15,.67);box-shadow:0 18px 36px -20px #000}.hero-float small{display:block;font-size:9px;color:#bcb0a0;letter-spacing:.12em;text-transform:uppercase}.hero-float-score{right:-24px;top:47px;padding:18px 20px;border-radius:14px;width:148px}.hero-float-score strong{display:block;margin:8px 0 10px;font:500 31px/1 var(--font-display);color:#f2d59d}.hero-float-score strong span{font:600 10px var(--font-ui);color:#99876c}.hero-float-score div{display:flex;gap:3px}.hero-float-score i{width:11px;height:3px;background:#d2ab6f;border-radius:4px}.hero-float-score i:nth-last-child(-n+2){background:rgba(255,255,255,.14)}.hero-float-build{bottom:26px;left:-13px;padding:15px 17px 16px;border-radius:12px;min-width:166px}.hero-float-build b{display:block;color:#f0d19a;font-size:13px;margin-top:5px}.hero-pulse{display:inline-block;width:7px;height:7px;border-radius:50%;background:#6ac493;box-shadow:0 0 0 0 rgba(106,196,147,.55);margin-right:6px;animation:pulseDot 2.2s infinite}.hero-stage-caption{position:absolute;bottom:1px;right:37px;display:flex;align-items:center;gap:9px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#756d63}.hero-stage-caption span{width:27px;height:1px;background:var(--gold)}@keyframes stageOrbit{to{transform:rotate(360deg)}}@keyframes pulseDot{70%{box-shadow:0 0 0 7px rgba(106,196,147,0)}100%{box-shadow:0 0 0 0 rgba(106,196,147,0)}}

/* Process becomes a visible project system instead of four static columns. */
.sec-head:has(.cards4){display:block}.sec-head:has(.cards4)>div:first-child{max-width:660px}.sec-head:has(.cards4) .cards4{margin-top:46px;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}.cards4>.rv{height:100%}.cards4 .scard{height:100%;display:flex;flex-direction:column;border-radius:14px;padding:18px 18px 17px;background:linear-gradient(155deg,rgba(255,255,255,.06),rgba(255,255,255,.015) 52%)}.cards4 .scard::before{background:linear-gradient(90deg,transparent,rgba(227,192,138,.8),transparent)}.cards4 .scard-media{height:176px;margin:-18px -18px 16px;border-radius:13px 13px 0 0;border-bottom:0}.cards4 .scard-media::after{background:linear-gradient(180deg,rgba(5,5,5,.04),rgba(9,9,9,.72) 86%,#111 100%)}.cards4 .scard h3{font-size:23px;margin:13px 0 9px}.cards4 .scard>p{font-size:13px;margin-bottom:17px}.scard-meta{display:flex;justify-content:space-between;align-items:center;font-size:9px;letter-spacing:.11em;text-transform:uppercase;color:#9e907b}.scard-meta b{font-size:16px;font-weight:400;color:var(--gold);transition:transform .3s var(--ease-out)}.scard:hover .scard-meta b{transform:translate(3px,-3px)}.cards4 .lrn{margin-top:auto;padding-top:15px;border-top:1px solid var(--line-soft);width:100%;justify-content:space-between}.cards4>.rv:first-child .scard{border-color:rgba(227,192,138,.25);background:linear-gradient(155deg,rgba(227,192,138,.13),rgba(255,255,255,.018) 50%)}.cards4>.rv:first-child .scard h3{font-size:27px}
.process-journey{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:52px;padding:10px 0}.process-line{position:absolute;left:7%;right:7%;top:49px;height:1px;background:rgba(255,255,255,.12);overflow:hidden}.process-line i{display:block;width:0;height:100%;background:linear-gradient(90deg,transparent,#dfbd83 12%,#f3d8a7 50%,#dfbd83 88%,transparent);box-shadow:0 0 14px rgba(227,192,138,.8);transition:width 1.45s var(--ease-out)}.process-journey.lit .process-line i{width:100%}.process-node{position:relative;z-index:1;padding-top:1px;opacity:.52;transition:opacity .45s,transform .45s}.process-node.is-active,.process-node:hover{opacity:1;transform:translateY(-6px)}.process-index{height:38px;display:flex;justify-content:space-between;align-items:center;font-size:11px;letter-spacing:.18em;color:#d0ad74;font-weight:700}.process-index span{font-size:9px;letter-spacing:.1em;color:var(--txt-3)}.process-marker{position:relative;height:22px;display:flex;align-items:center}.process-marker::before{content:"";width:11px;height:11px;border-radius:50%;background:#16120d;border:1px solid #caa36a;box-shadow:0 0 0 5px rgba(202,163,106,.08);transition:background .35s,box-shadow .35s}.process-marker i{position:absolute;width:42px;height:42px;left:-15px;border-radius:50%;border:1px solid rgba(227,192,138,.15);opacity:0;transform:scale(.7);transition:.35s}.process-node.is-active .process-marker::before,.process-node:hover .process-marker::before{background:#f0d09a;box-shadow:0 0 0 5px rgba(202,163,106,.12),0 0 17px rgba(227,192,138,.55)}.process-node.is-active .process-marker i,.process-node:hover .process-marker i{opacity:1;transform:scale(1.1)}.process-card{min-height:258px;margin-top:16px;padding:23px 21px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.012));box-shadow:inset 0 1px 0 rgba(255,255,255,.045);transition:border-color .4s,background .4s,box-shadow .4s}.process-node.is-active .process-card,.process-node:hover .process-card{border-color:rgba(227,192,138,.35);background:linear-gradient(145deg,rgba(227,192,138,.11),rgba(255,255,255,.018) 57%);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 24px 45px -34px rgba(227,192,138,.55)}.process-card-top{display:flex;justify-content:space-between;gap:8px;font-size:9px;letter-spacing:.13em;color:#aaa08f}.process-card-top b{font-size:8px;color:#d3b27c;border:1px solid rgba(227,192,138,.24);border-radius:99px;padding:4px 7px;letter-spacing:.06em;text-transform:uppercase}.process-card h3{font:500 30px/1.1 var(--font-display);margin:25px 0 11px}.process-card p{font-size:12.5px;line-height:1.68;color:var(--txt-2)}.process-detail{display:flex;flex-wrap:wrap;gap:6px;margin-top:19px}.process-detail span{font-size:9px;letter-spacing:.06em;color:#b9aa92;padding:6px 8px;border-radius:5px;background:rgba(255,255,255,.05)}

/* A diagnostic signal gives the audit CTA a living reason to exist. */
.cta{background:radial-gradient(ellipse 62% 104% at 100% 48%,rgba(156,111,56,.14),transparent 70%),var(--card-2)}.audit-signal{position:absolute;right:-12px;top:0;bottom:0;width:55%;overflow:hidden;pointer-events:none}.audit-signal::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--card-2) 2%,transparent 35%),linear-gradient(rgba(227,192,138,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(227,192,138,.06) 1px,transparent 1px);background-size:auto,38px 38px,38px 38px;mask-image:linear-gradient(90deg,transparent 0%,#000 30%,#000)}.audit-readout{position:absolute;right:48px;bottom:38px;border-left:1px solid rgba(227,192,138,.38);padding-left:15px;font-size:9px;letter-spacing:.12em;color:#aa9e8b}.audit-readout strong{display:block;font:500 26px/.9 var(--font-display);letter-spacing:-.04em;color:#ebcd99;margin:10px 0}.audit-readout small{font-size:8px;line-height:1.7;letter-spacing:.11em}

@media (max-width:1080px){.hero-grid-redesign{grid-template-columns:1fr}.hero-redesign{padding-bottom:45px}.hero-stage{max-width:650px;width:100%;margin:0 auto}.hero-grid-redesign{gap:18px}.process-journey{grid-template-columns:repeat(2,1fr);gap:26px}.process-line{display:none}.process-card{min-height:228px}.audit-signal{width:57%;opacity:.76}}
@media (max-width:760px){.hero-redesign{padding-top:106px;min-height:0}.hero-grid-redesign{display:block}.hero-stage{min-height:390px;margin-top:20px}.hero-plane{inset:42px 15px 55px 9px;transform:rotateX(5deg) rotateY(-5deg)}.hero-browser-content{min-height:250px;padding:33px 25px}.hero-browser-bar{height:38px;padding:0 12px}.hero-display{font-size:47px;margin-top:26px}.hero-rule{margin-top:30px}.hero-browser-foot{left:25px;right:25px;bottom:25px;font-size:7px;gap:8px}.hero-float-score{top:22px;right:-2px;transform:scale(.8);transform-origin:top right}.hero-float-build{left:-2px;bottom:20px;transform:scale(.83);transform-origin:bottom left}.hero-stage-caption{right:14px}.hero-orbit-a{width:610px;right:-230px;top:260px}.hero-orbit-b{display:none}.process-journey{grid-template-columns:1fr;margin-top:34px;gap:12px}.process-node{display:grid;grid-template-columns:67px 1fr;padding:0}.process-index{height:auto;display:block;padding-top:19px}.process-index span{display:block;margin-top:6px;line-height:1.4}.process-marker{position:absolute;left:56px;top:31px}.process-card{margin:0;min-height:0;padding:20px}.process-card h3{margin:18px 0 9px;font-size:28px}.audit-signal{width:100%;opacity:.38}.audit-readout{right:23px;bottom:24px}.cta-in{z-index:1}.cta{isolation:isolate}}

@media (prefers-reduced-motion:reduce){
  .rv,.stag>*,.pstep>*{filter:none!important;transform:none!important}
  .hero-photo{transform:none!important}
  .rv:not(.in) .scard-media img{transform:none;filter:none}
  /* motion pass: nothing may travel, and nothing may stay hidden waiting to */
  .hl-i{transform:none!important}
  .sec.rule::before{transform:none!important}
  .nav-dot{transition:none}
  .fcol a:hover{transform:none}
  .hub.open .hub-bar,.hub.open .gate>*,
  #hubView .hub-head,#hubView .proj,#hubView .recs,#hubProjects .stage-row,
  .ppanel.swap .pricing-grid>.pcard,.ppanel.swap .care-grid>.ccard,
  .ppanel.swap .plabel,.ppanel.swap .care-head,
  .sheet.open,.sheet.open>*{animation:none!important}
  /* the hero copy must never be left dimmed or shifted by scroll */
  .hero-copy{opacity:1!important;transform:none!important}
  .burger[aria-expanded="true"] svg{transform:none}
  .gate.gate-out{transform:none}
  .form.form-out,.audit-assure.form-out{transform:none}
}

/* ===== MOBILE / PERFORMANCE ===== */
@media (max-width:760px){
  /* reserve hero height so nothing jumps while the image decodes */
  .hero{min-height:88svh;display:flex;align-items:center}
  .hero-photo img{filter:brightness(1.18) contrast(.96)}

  /* every tap target clears the 44px minimum */
  .nav-links a,.sheet a,.lrn,.pseg-btn,.hub-close,.tile{min-height:44px}
  .lrn{padding:10px 0}
  .fcol a{padding:6px 0;display:inline-block;min-height:32px}

  /* stop long words breaking layout on narrow screens */
  h1,h2,.h3,.phead{overflow-wrap:break-word;hyphens:none}

  /* serif needs a touch more weight at small sizes to stay legible */
  h1{font-weight:600;letter-spacing:-.005em}
  h2{font-weight:600}
}
/* images reserve their space -> no layout shift as they load */
.scard-media{aspect-ratio:720/446;height:auto}
.case-visual{contain:layout paint}
/* keep offscreen work off the main thread budget */
.sec{content-visibility:auto;contain-intrinsic-size:auto 700px}

/* footer */
.foot{border-top:1px solid var(--line-soft);padding:56px 0 40px}
.foot-top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;margin-bottom:44px}
.fcol h5{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--txt-3);margin-bottom:16px;font-weight:600}
.fcol a{display:block;color:var(--txt-2);text-decoration:none;font-size:14px;margin-bottom:11px;transition:color .25s}
.fcol a:hover{color:var(--gold)}
.foot-bot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:26px;border-top:1px solid var(--line-soft)}

/* The reveal used to also animate filter:blur(6px)->none. There are 33 of these
   on the page and a blur transition cannot be handed to the compositor: every
   frame of every reveal re-rasterised the element, which is what made scrolling
   feel heavy in Safari. Opacity and transform alone look all but identical and
   run on the compositor. */
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.rv.in{opacity:1;transform:none}

/* staggered children — each item arrives a beat after the last */
.stag>*{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.stag.in>*{opacity:1;transform:none}
.stag.in>*:nth-child(1){transition-delay:0ms}
.stag.in>*:nth-child(2){transition-delay:70ms}
.stag.in>*:nth-child(3){transition-delay:140ms}
.stag.in>*:nth-child(4){transition-delay:210ms}
.stag.in>*:nth-child(5){transition-delay:280ms}
.stag.in>*:nth-child(6){transition-delay:350ms}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:8px}

@media (max-width:1080px){
  .hero-grid{grid-template-columns:1fr;gap:64px}
    .hero-photo{inset:4% 0 -6% 0}
  .hero-photo img{height:98%;object-position:64% 46%}
  .sec-head,.case{grid-template-columns:1fr;gap:32px}
  .cards4{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .pstep:nth-child(2){border-right:0}
  .pstep:nth-child(1),.pstep:nth-child(2){border-bottom:1px solid var(--line)}
  .nav-links,.nav-cta{display:none}
  .burger{display:block}
}
@media (max-width:760px){
  .wrap{padding:0 20px}
  .hero{padding:120px 0 0}
  .fit,.steps,.pricing-grid{grid-template-columns:1fr}
  .pstep{border-right:0;border-bottom:1px solid var(--line)}
  .cta{padding:40px 26px}
  .cta canvas{width:100%;opacity:.3}
    .case-visual{height:280px}
}
@media (max-width:520px){
  .cards4{grid-template-columns:1fr}
  .hero-btns .btn{flex:1;justify-content:center}
}
/* ===== MOBILE PASS ===== */
@media (max-width:760px){
  /* hero: image sits behind copy, darkened enough that text always wins */
  .hero{padding:104px 0 0}
  .hero-photo::after{
    background:linear-gradient(180deg,rgba(5,5,5,.86) 0%,rgba(5,5,5,.7) 45%,rgba(5,5,5,.8) 100%);
  }
  .hero-copy{max-width:100%}
  .hero-copy .body{max-width:100%}
  .hero-btns{gap:10px}
  .hero-btns .btn{width:100%;justify-content:center}

  /* mobile menu items get proper tap targets */
  .sheet a{padding:15px 0;font-size:16px}
  .sheet-hub{display:flex!important;align-items:center;gap:10px}

  /* sections breathe less on small screens */
  .sec{padding:72px 0}
  .case{margin-top:30px}
  .metrics{gap:10px}
  .metric{min-width:0;flex:1 1 100%;padding:16px 18px}
  .metric b{font-size:26px}

  /* audit + pricing + hub */
  .cta{padding:36px 22px;border-radius:18px}
  .audit-assure{gap:8px 14px}
  .form input{min-width:0;width:100%;flex:1 1 100%}
  .form .btn{width:100%;justify-content:center}

  /* client hub */
  .hub-bar-in{height:64px;gap:12px}
  .hub-body{padding:26px 0 80px}
  .gate{margin-top:6vh}
  .gate .code-row{flex-direction:column}
  .gate .code-row .btn{width:100%;justify-content:center}
  .proj{padding:22px 18px;border-radius:14px}
  .proj-top{gap:14px}
  .pct{font-size:28px}
  .stage-row{padding:12px 0}
  .stage-name{font-size:14px}
  .proj-msg{width:100%;justify-content:center}
  .cprev{grid-template-columns:repeat(2,1fr)}
  .recs{padding:22px 18px}

  /* keep the WhatsApp button clear of the footer edge */
  .wa{right:16px;bottom:16px}
  .foot{padding-bottom:96px}
}
@media (max-width:400px){
  .hero-copy h1{font-size:32px}
  .wa{right:14px;bottom:14px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .rv{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* Keep the redesign's compact mobile composition ahead of the legacy hero rules. */
@media (max-width:760px){
  .hero.hero-redesign{padding:106px 0 28px;min-height:0}
}

/* ==========================================================================
   MILESTONE 3 - ONE TYPE FAMILY, TIGHTER RHYTHM, CHEAPER FRAMES
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DISPLAY TYPE
   The whole site is now one family. Manrope at 800 carries the large type:
   its terminals and joins are soft rather than square, so the headlines read
   confident and rounded instead of engineered. Manrope has no true italic, so
   the bronze phrase is emphasised by colour alone. A synthetic slant on a
   geometric sans looks like a mistake, not a decision.
   Small labels, eyebrows, buttons and body copy are unchanged.
   -------------------------------------------------------------------------- */
:root{--font-display:'Manrope',system-ui,-apple-system,sans-serif}

h1,h2,.h3,.pcard .phead,.process-card h3,.hero-display,
.audit-readout strong,.hero-float-score strong{font-kerning:normal}

/* A sans needs a smaller size and much tighter tracking than a serif to carry
   the same weight on the page. */
h1{font-size:clamp(37px,3.55vw,51px);line-height:1.06;font-weight:800;letter-spacing:-.035em}
h2{font-size:clamp(30px,3.05vw,43px);line-height:1.09;font-weight:800;letter-spacing:-.032em}
.h3{font-size:clamp(21px,1.95vw,27px);line-height:1.16;font-weight:800;letter-spacing:-.026em}
.process-card h3{font-size:26px;line-height:1.15;font-weight:800;letter-spacing:-.028em;margin:22px 0 11px}
.pcard .phead{font-size:22px;line-height:1.24;font-weight:800;letter-spacing:-.026em}
.hero-display{font-size:clamp(30px,2.95vw,42px);font-weight:800;line-height:1.02;letter-spacing:-.04em;margin-top:28px}
.audit-readout strong{font-weight:800;letter-spacing:-.03em}
.hero-float-score strong{font-weight:800;letter-spacing:-.03em}

/* colour is the emphasis now, so the slant and its overhang both go */
h1 .gold,h2 .gold{font-style:normal;font-weight:800;padding-right:0}
.hero-display span{font-style:normal;font-weight:800;padding-right:.05em}
.hero-display span{color:#e7c58c}

/* Manrope's descenders are shallow, so the line-reveal masks can be tight
   again without clipping a 'y' or a 'g'. */
.hl{padding:0 .06em .16em 0;margin:0 -.06em -.16em 0}

.hero-copy h1{max-width:none;margin:20px 0 24px}
.sec .body,.sec-head .body{margin-top:17px}
.fitline{margin-top:38px;font-size:16.5px;line-height:1.68}

/* --------------------------------------------------------------------------
   2. VERTICAL RHYTHM
   The page was leaving a dead half-screen between the hero and the first
   section: the hero reserved a full viewport but its content only filled two
   thirds of it, and then 110px of section padding landed on top of that.
   -------------------------------------------------------------------------- */
.sec{padding-top:84px;padding-bottom:84px}
.hero.hero-redesign{min-height:0;padding:128px 0 52px}
.hero-grid-redesign{min-height:0}
.hero-stage{min-height:498px}
.cta{margin-bottom:84px}

/* .sec{padding:110px 0} sits after .wrap{padding:0 32px} at equal specificity,
   so every section had been quietly losing its side gutters. At a 1280 laptop
   width, where .wrap stops having any margin to hide behind, that put section
   copy hard against the edge of the screen. */
.sec.wrap{padding-left:32px;padding-right:32px}

/* --------------------------------------------------------------------------
   3. NAVIGATION
   Two glass capsules instead of one hairline rule: the wordmark holds its own,
   the section links group into a rail, and the two calls to action sit outside
   both. The blur radius is deliberately modest. This is a fixed bar over
   scrolling content, so every extra pixel of blur is re-rasterised on every
   frame the page moves.
   -------------------------------------------------------------------------- */
.nav-in{gap:16px}
.nav .logo,.nav-links{
  border:1px solid rgba(181,199,225,.15);border-radius:999px;
  background:linear-gradient(115deg,rgba(19,31,50,.72),rgba(18,26,39,.56) 50%,rgba(43,33,24,.44));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.11),0 12px 32px -24px rgba(0,0,0,.95);
  backdrop-filter:blur(13px);-webkit-backdrop-filter:blur(13px)
}
.nav .logo{padding:9px 17px 10px;transition:border-color .3s var(--ease-out),transform .3s var(--ease-out)}
.nav .logo:hover{border-color:rgba(227,192,138,.3);transform:translateY(-1px)}
/* auto on both sides parks the rail in the middle of the space left over */
.nav-links{margin:0 auto;gap:2px;padding:5px 7px}
.nav-links a{
  padding:8px 12px;font-size:12.5px;letter-spacing:-.005em;border-radius:999px;
  transition:color .25s,background .25s,transform .25s var(--ease-out)
}
.nav-links a:hover{background:rgba(255,255,255,.075);transform:translateY(-1px)}
.nav-links a.on{background:rgba(227,192,138,.11);box-shadow:inset 0 0 0 1px rgba(227,192,138,.14)}
.nav-links a.on::after{bottom:4px;width:3px;height:3px}
.nav-cta{margin-left:0}
.nav.stuck{background:none;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom-color:transparent}
/* The capsules replace the old hairline rule, but with no bar behind them the
   page's own text scrolled through the gaps between them. A soft scrim that
   fades to nothing solves it without reinstating a bar, and it is a single
   gradient: no second blurred layer stacked over moving content. */
.nav{isolation:isolate}
.nav::before{
  content:"";position:absolute;inset:0 0 -30px;z-index:-1;pointer-events:none;
  opacity:0;transition:opacity .4s var(--ease-out);
  background:linear-gradient(180deg,rgba(5,5,5,.95),rgba(5,5,5,.82) 52%,rgba(5,5,5,0))
}
.nav.stuck::before{opacity:1}

/* --------------------------------------------------------------------------
   4. HERO
   -------------------------------------------------------------------------- */
.hero-grid-redesign{grid-template-columns:minmax(0,1.26fr) minmax(400px,1fr);gap:50px}
.hero-grid-redesign .hero-copy{max-width:660px}
.hero-grid-redesign .hero-copy .body{max-width:500px}
.hero-btns{margin:30px 0 14px}

/* The floating panels sit inside a plane that is re-transformed on every
   pointer frame. A backdrop blur there means re-blurring the backdrop every
   one of those frames, which is what made the hero feel heavy. Against a dark
   page a solid translucent fill is indistinguishable. */
.hero-float{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(20,17,13,.9)}

.hero-stage-caption em{font-style:normal}
.cap-touch{display:none}

/* --------------------------------------------------------------------------
   5. PROCESS AND FIT
   The work cards already reward a cursor. These two sections are where a
   visitor is weighing something, so they get the same feedback.
   -------------------------------------------------------------------------- */
.process-node{transition:opacity .45s var(--ease-out),transform .45s var(--ease-out)}
.process-journey.lit .process-node{opacity:.8}
.process-card{
  position:relative;overflow:hidden;
  transition:transform .42s var(--ease-out),border-color .42s,background .42s,box-shadow .42s
}
.process-card::after{
  content:"";position:absolute;inset:-1px;pointer-events:none;opacity:0;
  background:radial-gradient(260px 170px at var(--pointer-x,50%) var(--pointer-y,0%),
    rgba(240,214,168,.16),transparent 64%);
  transition:opacity .35s
}
.process-detail span{transition:background .3s,color .3s}

.fitbox{
  position:relative;overflow:hidden;
  transition:transform .4s var(--ease-out),border-color .4s,background .4s,box-shadow .4s
}
.fitbox::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(320px 190px at var(--pointer-x,30%) var(--pointer-y,0%),
    rgba(227,192,138,.14),transparent 70%);
  transition:opacity .4s
}
.fitbox.no::after{background:radial-gradient(320px 190px at var(--pointer-x,30%) var(--pointer-y,0%),rgba(137,160,190,.11),transparent 70%)}
/* each line is a claim a visitor is testing against themselves, so each line
   answers on its own rather than the whole card lighting as one block */
.fitbox li{border-radius:9px;margin:0 -10px;padding-left:32px;padding-right:10px;
  transition:background .28s,color .28s,transform .28s var(--ease-out)}
.fitbox li::before{left:10px;transition:width .28s var(--ease-out),background .28s}

@media (hover:hover) and (pointer:fine){
  .process-node:hover{opacity:1;transform:translateY(-9px)}
  .process-node:hover .process-card{
    transform:scale(1.015);border-color:rgba(227,192,138,.45);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 30px 55px -35px rgba(227,192,138,.8)
  }
  .process-node:hover .process-card::after{opacity:1}
  .process-node:hover .process-detail span{background:rgba(227,192,138,.13);color:#e8d4b2}

  .fitbox:hover{
    transform:translateY(-6px) scale(1.008);border-color:rgba(227,192,138,.34);
    box-shadow:0 28px 50px -35px rgba(227,192,138,.7)
  }
  .fitbox:hover::after{opacity:1}
  .fitbox.no:hover{border-color:rgba(178,198,224,.24);box-shadow:0 28px 50px -38px rgba(102,133,179,.42)}
  .fitbox li:hover{background:rgba(227,192,138,.09);color:#fff;transform:translateX(3px)}
  .fitbox li:hover::before{width:16px}
  .fitbox.no li:hover{background:rgba(160,180,208,.08)}
  .fitbox.no li:hover::before{width:16px;background:#8ea0b8}
}

/* On touch, the same two sections answer a tap instead of a hover. */
@media (hover:none){
  .process-node.touched{opacity:1;transform:translateY(-4px)}
  .process-node.touched .process-card{border-color:rgba(227,192,138,.42);
    background:linear-gradient(145deg,rgba(227,192,138,.12),rgba(255,255,255,.02) 57%)}
  .fitbox li:active{background:rgba(227,192,138,.09);color:#fff}
  .fitbox.no li:active{background:rgba(160,180,208,.08)}
}

/* --------------------------------------------------------------------------
   6. THE AUDIT VISUAL
   A clock face said nothing about the offer. What we actually sell here is a
   person watching a real site and marking the three places it leaks. So the
   panel draws that: the page, the path an eye takes through it, the stops.
   The trace draws once on arrival; after that only the cursor keeps moving.
   -------------------------------------------------------------------------- */
.cta{background:radial-gradient(ellipse 62% 104% at 100% 48%,rgba(156,111,56,.14),transparent 70%),var(--card-2)}
.audit-signal{right:0;width:52%}
.audit-signal::before{background-size:auto,44px 44px,44px 44px;opacity:.8}
.ascan{position:absolute;top:50%;left:4%;width:93%;height:auto;transform:translateY(-50%)}
.ascan-wire rect,.ascan-wire path{stroke:rgba(227,192,138,.22);stroke-width:1;transition:stroke .45s}
.ascan-wire rect:first-child{stroke:rgba(227,192,138,.3)}
.ascan-trace{
  stroke:#e6c489;stroke-width:1.4;stroke-linecap:round;
  filter:drop-shadow(0 0 6px rgba(227,192,138,.45));
  stroke-dasharray:384;stroke-dashoffset:384
}
.ascan-ring{stroke:rgba(240,210,157,.5);stroke-width:1}
.ascan-dot{fill:#f4d8a4}
.ascan-pin{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.5)}
.ascan-cursor{fill:#fbe9c6;filter:drop-shadow(0 0 9px rgba(240,210,157,.85));opacity:0}

.ascan.lit .ascan-trace{animation:ascanDraw 1.5s var(--ease-out) forwards}
.ascan.lit .ascan-pin{animation:ascanPin .6s var(--ease-out) var(--d,0ms) forwards}
.ascan.lit .ascan-cursor{
  offset-path:path("M96 96 C 214 78 252 132 178 176 C 118 212 226 220 306 246");
  offset-rotate:0deg;
  animation:ascanTravel 1.5s var(--ease-in-out) forwards,ascanIdle 9s 2.4s var(--ease-in-out) infinite
}
@keyframes ascanDraw{from{stroke-dashoffset:384}to{stroke-dashoffset:0}}
@keyframes ascanPin{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}
@keyframes ascanTravel{0%{offset-distance:0%;opacity:0}8%{opacity:1}100%{offset-distance:100%;opacity:1}}
@keyframes ascanIdle{0%,4%{offset-distance:100%}46%,54%{offset-distance:0%}96%,100%{offset-distance:100%}}

/* Readout moves to the top of the panel: the bottom-right corner belongs to
   the WhatsApp launcher, which was sitting straight on top of it. */
.audit-readout{
  top:40px;bottom:auto;right:40px;
  border-left:1px solid rgba(227,192,138,.34);padding-left:15px;
  transition:transform .4s var(--ease-out),border-color .4s
}
.audit-readout strong{font-size:22px;line-height:1.14;margin:9px 0 11px}
.audit-readout small{font-size:8.5px;line-height:1.85;letter-spacing:.13em;text-transform:uppercase}
@media (hover:hover) and (pointer:fine){
  .cta:hover .audit-readout{transform:translateY(-3px);border-color:rgba(227,192,138,.65)}
  .cta:hover .ascan-wire rect,.cta:hover .ascan-wire path{stroke:rgba(227,192,138,.32)}
}

/* --------------------------------------------------------------------------
   7. PHONES
   Most of the traffic arrives here, so this is the real design, not a
   fallback. Two rules govern it: the composition has to be readable at arm's
   length, and every effect that costs a repaint per frame comes off.
   -------------------------------------------------------------------------- */
/* The four service cards were pinned to a 4-column grid by a `:has()` selector
   that outranks every responsive rule for .cards4, so on a phone they were four
   74px columns of one-word-per-line text. Restated here at matching specificity. */
@media (max-width:1080px){
  .sec-head:has(.cards4) .cards4{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
}
@media (max-width:760px){
  .sec-head:has(.cards4) .cards4{grid-template-columns:minmax(0,1fr);gap:14px;margin-top:30px}
  .sec-head:has(.cards4) .cards4 .scard-media{height:196px}
  .sec-head:has(.cards4) .cards4 .scard h3,
  .sec-head:has(.cards4) .cards4>.rv:first-child .scard h3{font-size:24px}
  .sec-head:has(.cards4) .cards4 .scard>p{font-size:14px}
}

@media (max-width:1080px){
  .sec{padding-top:66px;padding-bottom:66px}
  .audit-signal{width:56%;opacity:.72}
  .audit-readout{right:26px;top:28px}
  .hero-stage{min-height:430px}
}

@media (max-width:760px){
  h1{font-size:clamp(34px,9vw,44px);line-height:1.09;letter-spacing:-.032em}
  h2{font-size:clamp(28px,7.4vw,38px);line-height:1.11;letter-spacing:-.03em}
  .h3{font-size:22px}
  .process-card h3{font-size:24px;margin:16px 0 9px}
  .pcard .phead{font-size:20px}
  .sec{padding-top:54px;padding-bottom:54px}
  .sec.wrap{padding-left:20px;padding-right:20px}
  .cta{margin-bottom:54px}
  .hero.hero-redesign{padding:98px 0 30px}
  .hero-copy h1{margin:14px 0 18px}
  .hero-btns{margin:24px 0 12px}
  .nav-links,.nav-cta{display:none}
  .nav .logo{padding:8px 14px 9px}
  .cap-fine{display:none}
  .cap-touch{display:inline}

  /* The mock browser is a fixed-width panel on a phone, so its display type has
     to be sized against the panel, not the viewport. At the inherited 47px
     'DIGITAL' ran straight through 'MOVE.' */
  .hero-display{font-size:31px;margin-top:20px;letter-spacing:-.035em}
  .hero-browser-content{padding:28px 22px;min-height:228px}
  .hero-rule{margin-top:24px}
  .hero-float-score{top:16px;transform:scale(.74)}
  .hero-float-build{transform:scale(.78)}

  /* Effects that are cheap on a laptop and expensive in a hand. The gridlines
     and orbits are a masked full-bleed paint and two permanently running rotations; the
     bloom needs a pointer that a phone does not have. */
  .hero-gridlines,.hero-orbit{display:none}
  .hero-stage-orbit{animation:none;opacity:.5}
  .nav .logo{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}

  .audit-signal{width:100%;opacity:.3}
  .ascan{top:44%;left:8%;width:84%;height:auto}
  /* On a phone the panel sits directly behind the copy, so this caption was
     reading as a second column of text tangled through the headline. The
     drawing behind it is atmosphere and survives; the words do not. */
  .audit-readout{display:none}
  .process-node:hover,.fitbox:hover{transform:none}
  .process-card{transform:none!important}
  .fitbox li:hover{transform:none}
}

@media (max-width:520px){
  h1{font-size:clamp(31px,8.6vw,38px)}
  .hero-stage{min-height:352px}
  .hero-float-score,.hero-float-build{box-shadow:none}
}

@media (prefers-reduced-motion:reduce){
  .ascan-trace{stroke-dashoffset:0;animation:none!important}
  .ascan-pin{opacity:1;transform:none;animation:none!important}
  .ascan-cursor{display:none}
}

/* A 50px blur filter over a ~500px box is one of the most expensive things a
   page can ask Safari for, and it sat under the hero permanently. A wider,
   softer radial gradient gets to the same place with no filter pass at all. */
.hero-stage-glow{filter:none;background:radial-gradient(ellipse,rgba(225,179,111,.2),rgba(150,99,40,.09) 38%,rgba(92,60,23,.03) 60%,transparent 76%)}

/* the panel acknowledges the finger holding it */
.hero-stage.held .hero-plane{transition:none}
.hero-stage.held .hero-stage-glow{opacity:1}