/* Teja Vu Digital Marketing - site styles.
   White ground, hot pink and magenta accents, deep plum sections,
   and the brand gradient (#bb2187 to #4e1247) carrying the emphasis. */
:root{
  /* Teja Vu palette: white, black, hot pink, magenta, deep plum, brand gradient */
  --white:#FFFFFF; --black:#000000;
  --pink:#E3317F; --magenta:#A12366; --plum:#4E1247; --plum-lit:#BB2187;

  /* grounds */
  --cream:#FFFFFF; --cream-2:#FDF0F6; --paper:#FFFFFF;
  --pastel-a:#FDF0F6; --pastel-b:#FBE7F1; --pastel-c:#F8EDF4; --pastel-d:#FCEAF3;

  /* ink */
  --ink:#000000; --ink-2:#2A1F26; --muted:#6E5C67; --dim:#8C7A85;

  /* dark sections are deep plum, not black */
  --night:#4E1247; --night-2:#5E1856; --night-rule:#7A3670;

  /* accent roles: the warm slot is the pink, the cool slot is the plum */
  --sun:#E3317F; --sun-deep:#A12366; --sun-soft:#F9C6DD;
  --cobalt:#A12366; --cobalt-deep:#4E1247; --cobalt-soft:#EFD3E5;

  --rule:#F0DCE8; --rule-2:#D9B6CC;
  --slate-soft:#F3E2EC;

  --pad:48px; --maxw:1280px; --radius:5px;
  --r-sm:8px; --r-md:16px; --r-lg:24px; --r-xl:34px; --r-pill:999px;
  --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --shadow-1:0 2px 8px rgba(78,18,71,.06), 0 12px 28px -12px rgba(78,18,71,.14);
  --shadow-2:0 6px 18px rgba(78,18,71,.09), 0 28px 60px -24px rgba(78,18,71,.26);
  --shadow-sun:0 18px 44px -16px rgba(227,49,127,.6);
  --shadow-cobalt:0 18px 44px -16px rgba(78,18,71,.55);

  /* the brand gradient, carrying every point of emphasis */
  --grad-brand:linear-gradient(135deg,#BB2187 0%,#4E1247 100%);
  --grad-warm:linear-gradient(135deg,#E3317F 0%,#BB2187 48%,#4E1247 100%);
  --grad-cool:linear-gradient(135deg,#BB2187 0%,#4E1247 100%);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);
  font-family:Archivo,system-ui,-apple-system,Segoe UI,sans-serif;font-size:16.5px;line-height:1.6;
  -webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5{margin:0;color:var(--ink);text-wrap:pretty}
h1,h2,h3{font-family:Archivo,system-ui,-apple-system,Segoe UI,sans-serif;font-weight:700;letter-spacing:-0.025em;line-height:1.06}
h4,h5{font-family:Archivo,system-ui,-apple-system,Segoe UI,sans-serif;font-weight:700;letter-spacing:-0.01em}
p{margin:0;text-wrap:pretty}
img{max-width:100%;display:block}
a{color:var(--cobalt-deep);text-decoration:none}
a:hover{color:var(--cobalt)}
:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px}
::selection{background:var(--sun-soft);color:var(--ink)}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.sect{padding:34px 0}
.sect--tight{padding:21px 0}
.sect + .sect{border-top:1px solid var(--rule)}
.eyebrow{font-size:11.5px;letter-spacing:0.2em;text-transform:uppercase;font-weight:700;color:var(--cobalt-deep)}
.eyebrow--sun{color:var(--sun-deep)}
.lede{font-size:19px;line-height:1.62;color:var(--ink-2);max-width:64ch}
.muted{color:var(--muted)}
.small{font-size:14px;color:var(--muted)}
.rule{height:1px;background:var(--rule);border:0;margin:0}
.center-narrow{max-width:70ch}

/* dark cinematic sections */
.dark{background:var(--night);color:#F3EBE1}
.dark h1,.dark h2,.dark h3,.dark h4,.dark h5{color:#FFFDF9}
.dark .lede,.dark p{color:#D9CEC1}
.dark .eyebrow{color:var(--sun)}
.dark a:not(.btn){color:var(--sun)}
.dark a:not(.btn):hover{color:var(--sun-soft)}
.dark .btn--sun,.foot-grid .btn--sun{color:var(--ink)}
.dark .btn--sun:hover,.foot-grid .btn--sun:hover{color:var(--ink)}
.dark .rule{background:var(--night-rule)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:14.5px;
  padding:16px 26px;border:0;cursor:pointer;font-family:Archivo,system-ui,-apple-system,Segoe UI,sans-serif;letter-spacing:0.01em;
  transition:background .18s ease,color .18s ease,border-color .18s ease}
.btn--sun{background:var(--sun);color:var(--ink)}
.btn--sun:hover{background:var(--sun-soft);color:var(--ink)}
.btn--cobalt{background:var(--cobalt);color:#fff}
.btn--cobalt:hover{background:var(--cobalt-deep);color:#fff}
.btn--ghost{border:1.5px solid var(--rule-2);color:var(--ink);background:transparent}
.btn--ghost:hover{border-color:var(--cobalt);color:var(--cobalt-deep)}
.dark .btn--ghost,.band .btn--ghost{border-color:var(--night-rule);color:#F3EBE1}
.dark .btn--ghost:hover,.band .btn--ghost:hover{border-color:var(--sun);color:var(--sun)}
.btn--sm{font-size:13px;padding:11px 18px}
.btn--lg{font-size:16px;padding:19px 32px}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;pointer-events:none}
.actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.link-arrow{font-weight:700;font-size:14px;color:var(--cobalt-deep);display:inline-flex;gap:8px;align-items:center}
.link-arrow:hover{color:var(--cobalt)}
.dark .link-arrow{color:var(--sun)}

/* header */
.site-header{position:sticky;top:0;z-index:60;background:rgba(255,246,234,0.95);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.hbar{display:flex;align-items:center;gap:26px;max-width:var(--maxw);margin:0 auto;padding:16px var(--pad)}
.logo{display:flex;align-items:center;margin-right:auto;flex:0 0 auto}
.logo img{height:30px;width:auto;flex:none;max-width:none}
.nav{display:flex;gap:2px;align-items:center;margin:0;padding:0;min-width:0}
.nav > li{list-style:none;position:relative}
.nav a.navlink,.nav button.navlink{display:flex;align-items:center;gap:7px;white-space:nowrap;
  font-family:Archivo,system-ui,-apple-system,Segoe UI,sans-serif;font-size:13px;font-weight:600;color:var(--ink-2);
  padding:10px 11px;background:none;border:0;cursor:pointer}
.nav li:hover > .navlink,.nav .navlink.is-active{color:var(--cobalt-deep)}
.nav .navlink.is-active{box-shadow:inset 0 -2px 0 var(--sun)}
.caret{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px);opacity:.65}
.mega{position:absolute;top:100%;left:0;background:var(--paper);border:1px solid var(--rule);
  min-width:280px;padding:8px;opacity:0;visibility:hidden;transform:translateY(8px);pointer-events:none;
  transition:opacity .2s ease,transform .26s cubic-bezier(.22,.61,.36,1),visibility .2s;
  box-shadow:0 22px 50px rgba(24,20,16,.14)}
.nav li:hover > .mega,.nav li:focus-within > .mega{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.mega ul{margin:0;padding:0}
.mega li{list-style:none}
.mega a{display:block;color:var(--ink);font-size:14px;padding:10px 13px}
.mega a:hover{background:var(--cream-2);color:var(--cobalt-deep)}
.mega a small{display:block;font-size:12px;color:var(--muted);font-weight:400;margin-top:2px}
.mega-sub a{padding-left:26px}
.mega-sub a small{margin-left:0}
.nav-toggle{display:none;background:none;border:1.5px solid var(--rule-2);color:var(--ink);
  padding:9px 13px;font-family:Archivo,system-ui,-apple-system,Segoe UI,sans-serif;font-size:13px;font-weight:700;cursor:pointer}

/* hero */
.hero{padding:30px 0 0;border-bottom:1px solid var(--rule);
  background:radial-gradient(120% 90% at 88% 4%, rgba(247,194,27,0.22) 0%, rgba(255,246,234,0) 58%)}
.hero-grid{display:grid;grid-template-columns:1.15fr 0.85fr;gap:60px;align-items:start}
.hero h1{font-size:clamp(46px,6.6vw,92px);line-height:0.98;letter-spacing:-0.03em;margin:22px 0 26px;max-width:16ch}
.hero h1 em{font-style:italic;color:var(--cobalt-deep)}
.hero .lede{font-size:20.5px;margin-bottom:34px;max-width:52ch}
.hero-note{font-size:13.5px;color:var(--muted);margin-top:18px}
.hero-media{margin-bottom:-1px}

/* media placeholders: labeled, so nothing looks unfinished before real media lands */
.media{position:relative;background:var(--cream-2);border:1px dashed var(--rule-2);
  display:flex;align-items:flex-end;padding:16px;min-height:220px;overflow:hidden}
.media--tall{aspect-ratio:3/4}
.media--wide{aspect-ratio:16/9}
.media--square{aspect-ratio:1/1}
.media--film{background:var(--night-2);border-color:var(--night-rule)}
.media .tag{font-family:Archivo,system-ui,-apple-system,Segoe UI,sans-serif;font-size:10.5px;letter-spacing:0.14em;text-transform:uppercase;
  font-weight:700;color:var(--ink);background:var(--sun);padding:5px 9px}
.media--film .tag{background:var(--sun);color:var(--ink)}
.media--photo{border:0;padding:0;background:var(--cream-2)}
.media--photo img{width:100%;height:100%;object-fit:cover}
.media>img,.media>video{width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0}
.media:has(>img),.media:has(>video){border:0;padding:0}
.media .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:64px;height:64px;border-radius:50%;background:rgba(255,246,234,.92);
  display:flex;align-items:center;justify-content:center}
.media .play::after{content:"";border-left:16px solid var(--ink);border-top:10px solid transparent;
  border-bottom:10px solid transparent;margin-left:4px}
.caption{font-size:12.5px;color:var(--muted);margin-top:10px}

/* grids and cells */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--rule)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule)}
.grid-2,.grid-3,.grid-4{border:1px solid var(--rule)}
.cell{background:var(--cream);padding:34px 30px}
.cell--paper{background:var(--paper)}
.cell h3{font-size:26px;margin-bottom:12px}
.cell h4{font-size:18px;margin-bottom:10px}
.cell p{font-size:15px;color:var(--ink-2);line-height:1.62}
.cell .link-arrow{margin-top:18px;display:inline-flex}
.dark .grid-2,.dark .grid-3,.dark .grid-4{background:var(--night-rule);border-color:var(--night-rule)}
.dark .cell{background:var(--night)}

/* two column layout */
.two-col{display:grid;grid-template-columns:1.1fr 0.9fr;gap:64px;align-items:start}
.two-col--flip{grid-template-columns:0.9fr 1.1fr}
.stack{display:flex;flex-direction:column;gap:22px}
.head-block{max-width:34ch}
.head-block h2{font-size:clamp(34px,4.2vw,56px);margin:16px 0 20px}
.sect-head{margin-bottom:44px}
.sect-head h2{font-size:clamp(32px,4vw,52px);margin:16px 0 18px;max-width:28ch}

/* numbered steps (method) */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--night-rule);
  border:1px solid var(--night-rule)}
.step{background:var(--night);padding:36px 28px}
.step .no{font-family:Archivo,system-ui,-apple-system,Segoe UI,sans-serif;font-size:44px;line-height:1;color:var(--sun);display:block;margin-bottom:18px}
.step h3{font-size:27px;margin-bottom:12px}
.step p{font-size:15px}

/* problem list */
.problems{margin:0;padding:0;columns:2;column-gap:56px}
.problems li{list-style:none;display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--rule);
  font-size:16px;color:var(--ink-2);break-inside:avoid}
.problems li::before{content:"";width:9px;height:9px;background:var(--cobalt);flex:0 0 9px;margin-top:9px}
.checklist{margin:0;padding:0}
.checklist li{list-style:none;display:flex;gap:13px;padding:13px 0;border-bottom:1px solid var(--rule);
  font-size:15.5px;color:var(--ink-2)}
.checklist li::before{content:"";width:9px;height:9px;background:var(--sun);flex:0 0 9px;margin-top:9px}
.dark .checklist li{border-bottom-color:var(--night-rule);color:#D9CEC1}

/* outcome chips */
.chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.chip{border:1px solid var(--rule-2);padding:9px 15px;font-size:13.5px;color:var(--ink-2);
  font-family:Archivo,system-ui,-apple-system,Segoe UI,sans-serif}
.dark .chip{border-color:var(--night-rule);color:#D9CEC1}
.pill{display:inline-block;font-family:Archivo,system-ui,-apple-system,Segoe UI,sans-serif;font-size:10.5px;letter-spacing:0.14em;
  text-transform:uppercase;font-weight:700;background:var(--cobalt);color:#fff;padding:5px 10px}
.pill--sun{background:var(--sun);color:var(--ink)}
.pill--ph{background:var(--rule-2);color:var(--ink)}

/* service feature rows */
.feature{display:grid;grid-template-columns:0.95fr 1.05fr;gap:56px;align-items:center;padding:26px 0}
.feature + .feature{border-top:1px solid var(--rule)}
.feature--flip > .fig{order:-1}
.feature h3{font-size:clamp(28px,3.4vw,42px);margin:14px 0 18px}
.feature p{font-size:17px;color:var(--ink-2);max-width:48ch}
.svc-cloud{display:flex;gap:8px;flex-wrap:wrap;margin-top:26px}
.svc-cloud span{font-size:13.5px;color:var(--muted);border-bottom:1px solid var(--rule-2);padding-bottom:3px}

/* poster statement */
.poster{background:var(--sun);color:var(--ink);padding:35px 0}
.poster h2{font-size:clamp(38px,5.6vw,76px);line-height:1;letter-spacing:-0.03em;max-width:22ch;margin-bottom:24px}
.poster p{font-size:19px;max-width:56ch;margin-bottom:34px;color:#2E2408}
.poster .btn--cobalt:hover{background:#0F2478}

/* work strip */
.work-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.work-item h4{font-size:17px;margin-top:14px}
.work-item .small{margin-top:4px}
.logo-wall{display:flex;align-items:center;gap:40px;flex-wrap:wrap}
.logo-wall .name{font-family:Archivo,system-ui,-apple-system,Segoe UI,sans-serif;font-size:20px;color:var(--dim)}

/* quote */
.quote{background:var(--paper);border-left:4px solid var(--sun);padding:34px 32px}
.quote blockquote{margin:0 0 18px;font-family:Archivo,system-ui,-apple-system,Segoe UI,sans-serif;font-size:23px;line-height:1.4}
.quote .who{font-size:13.5px;color:var(--muted)}

/* pricing */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.tier{background:var(--paper);padding:34px 30px;position:relative}
.tier--rec{background:var(--cream-2);box-shadow:inset 0 4px 0 var(--sun)}
.tier h3{font-size:27px;margin:14px 0 12px}
.tier .price{font-family:Archivo,system-ui,-apple-system,Segoe UI,sans-serif;font-size:14px;font-weight:700;color:var(--muted);margin-top:20px}

/* faq */
.faq{border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule);padding:22px 0}
.faq summary{font-family:Archivo,system-ui,-apple-system,Segoe UI,sans-serif;font-size:21px;cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;gap:20px;align-items:baseline}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:Archivo,system-ui,-apple-system,Segoe UI,sans-serif;font-size:20px;color:var(--cobalt-deep);flex:none}
.faq details[open] summary::after{content:"\2212"}
.faq p{margin-top:14px;font-size:16px;color:var(--ink-2);max-width:78ch}

/* forms */
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:20px}
.field label{font-family:Archivo,system-ui,-apple-system,Segoe UI,sans-serif;font-size:11.5px;letter-spacing:0.12em;text-transform:uppercase;
  font-weight:700;color:var(--muted)}
.field input,.field select,.field textarea{background:var(--paper);border:1.5px solid var(--rule-2);
  color:var(--ink);padding:14px 15px;font-family:Archivo,system-ui,-apple-system,Segoe UI,sans-serif;font-size:15.5px}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--cobalt)}
.field .req{color:var(--cobalt);font-weight:800;margin-left:4px}
.field .err{font-size:12.5px;color:#B3261E;font-weight:600}
.field.has-error input,.field.has-error textarea{border-color:#B3261E}
.notice{padding:16px 18px;border-left:4px solid var(--sun);background:var(--paper);margin-bottom:26px;font-size:15.5px}
.notice.bad{border-left-color:#B3261E}

/* page head */
.page-head{padding:27px 0 24px;border-bottom:1px solid var(--rule)}
.page-head h1{font-size:clamp(38px,5.2vw,72px);margin:18px 0 22px;max-width:20ch}
.crumb{font-size:12.5px;color:var(--muted);padding:16px 0}

/* footer */
.site-footer{background:var(--night);color:#D9CEC1;padding:26px 0 20px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px;padding-bottom:42px;
  border-bottom:1px solid var(--night-rule)}
.foot-grid h5{font-family:Archivo,system-ui,-apple-system,Segoe UI,sans-serif;font-size:11px;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--sun);font-weight:700;margin:0 0 16px}
.foot-grid ul{margin:0;padding:0}
.foot-grid li{list-style:none;margin-bottom:10px}
.foot-grid a:not(.btn){font-size:14px;color:#C6B9AB}
.foot-grid a:not(.btn):hover{color:var(--sun)}
.foot-grid p{font-size:14px;color:#B6A897;max-width:36ch}
.foot-bottom{display:flex;justify-content:space-between;gap:20px;padding-top:22px;font-size:12.5px;
  color:#8E8175;flex-wrap:wrap}
.foot-bottom a{color:#B6A897}
.disclaimer{font-size:12px;color:#8E8175;max-width:92ch;padding-top:18px;line-height:1.6}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

@media (max-width:1400px){
  .hbar > .btn{display:none}
  .nav a.navlink,.nav button.navlink{padding:10px 9px;font-size:12.5px}
}
@media (max-width:1080px){
  :root{--pad:32px}
  .hero-grid,.two-col,.two-col--flip,.feature{grid-template-columns:1fr;gap:40px}
  .feature--flip > .fig{order:0}
  .grid-4,.steps{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:1020px){
  .nav-toggle{display:block}
  .nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;
    background:var(--paper);border-bottom:1px solid var(--rule);padding:8px;display:none}
  .nav.is-open{display:flex}
  .nav > li{width:100%}
  .nav a.navlink,.nav button.navlink{width:100%;font-size:15px;padding:13px}
  .mega{position:static;opacity:1;visibility:visible;transform:none;pointer-events:auto;
    box-shadow:none;border:0;border-left:2px solid var(--sun);margin:0 0 8px 13px;display:none}
  .nav li.is-open > .mega{display:block}
  .hbar{position:relative;flex-wrap:wrap}
  .hbar > .btn{display:none}
  .grid-2,.grid-3,.grid-4,.steps,.tiers,.work-strip{grid-template-columns:1fr}
  .problems{columns:1}
  .sect{padding:24px 0}
}

/* rounded corners */
.btn,.nav-toggle,.chip,.pill,.media .tag,.notice{border-radius:var(--radius)}
.media,.mega,.quote{border-radius:var(--radius)}
.grid-2,.grid-3,.grid-4,.steps,.tiers{border-radius:var(--radius);overflow:hidden}
.field input,.field select,.field textarea{border-radius:var(--radius)}
.media--photo img{border-radius:var(--radius)}
.grid-3 .media,.grid-4 .media{min-height:0}


/* ============================================================
   CONTEMPORARY MOTION LAYER
   Rounded, layered, scroll-animated. Everything degrades to a
   static readable page when JS is off or motion is reduced.
   ============================================================ */

/* --- rounder, softer geometry ------------------------------- */
.btn{border-radius:var(--r-pill);position:relative;overflow:hidden;isolation:isolate;
  transition:transform .34s var(--ease-out),box-shadow .34s var(--ease-out),background .2s ease,color .2s ease,border-color .2s ease}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.55) 48%,transparent 76%);
  transform:translateX(-120%);transition:transform .7s var(--ease-out);pointer-events:none}
.btn:hover::after{transform:translateX(120%)}
.btn--sun{background:var(--grad-warm);background-size:180% 180%;color:var(--ink)}
.btn--sun:hover{background:var(--grad-warm);background-position:100% 50%;box-shadow:var(--shadow-sun);transform:translateY(-3px)}
.btn--cobalt{background:var(--grad-cool);background-size:180% 180%;color:#fff}
.btn--cobalt:hover{background:var(--grad-cool);background-position:100% 50%;box-shadow:var(--shadow-cobalt);transform:translateY(-3px);color:#fff}
.btn--ghost{backdrop-filter:blur(6px)}
.btn--ghost:hover{transform:translateY(-3px);box-shadow:var(--shadow-1);background:rgba(255,255,255,.5)}
.dark .btn--ghost:hover,.band .btn--ghost:hover{background:rgba(255,255,255,.06)}
.btn:active{transform:translateY(-1px) scale(.985)}

.chip{border-radius:var(--r-pill);background:rgba(255,255,255,.55);backdrop-filter:blur(6px);
  transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out),border-color .2s,color .2s}
.chip:hover{transform:translateY(-2px);box-shadow:var(--shadow-1);border-color:var(--cobalt);color:var(--cobalt-deep)}
.dark .chip{background:rgba(255,255,255,.05)}
.dark .chip:hover{border-color:var(--sun);color:var(--sun)}
.pill{border-radius:var(--r-pill)}
.media,.media--photo img,.mega,.notice,.quote{border-radius:var(--r-md)}
.media .tag{border-radius:var(--r-pill)}
.grid-2,.grid-3,.grid-4,.steps,.tiers{border-radius:var(--r-lg)}
.field input,.field select,.field textarea{border-radius:var(--r-md);transition:border-color .2s,box-shadow .25s var(--ease-out),transform .25s var(--ease-out)}
.field input:focus,.field select:focus,.field textarea:focus{box-shadow:0 0 0 4px rgba(227,49,127,.16)}
.nav-toggle{border-radius:var(--r-pill)}

/* --- ambient background wash -------------------------------- */
body{position:relative}
.aura{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden}
.aura span{position:absolute;display:block;border-radius:50%;filter:blur(70px);opacity:.5;
  will-change:transform}
.aura span:nth-child(1){width:46vw;height:46vw;left:-10vw;top:-8vw;background:radial-gradient(circle,rgba(247,194,27,.55),transparent 66%)}
.aura span:nth-child(2){width:38vw;height:38vw;right:-8vw;top:18vh;background:radial-gradient(circle,rgba(34,71,232,.30),transparent 66%)}
.aura span:nth-child(3){width:34vw;height:34vw;left:24vw;bottom:-14vw;background:radial-gradient(circle,rgba(255,138,61,.30),transparent 66%)}

/* --- scroll progress + header ------------------------------- */
.scrollbar-progress{position:fixed;top:0;left:0;height:3px;width:100%;z-index:200;
  background:var(--grad-warm);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
.site-header{transition:padding .35s var(--ease),background .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)}
.site-header.is-stuck{background:rgba(255,246,234,.82);box-shadow:0 10px 34px -18px rgba(24,20,16,.35);border-bottom-color:transparent}
.site-header.is-stuck .hbar{padding-top:9px;padding-bottom:9px}
.hbar{transition:padding .35s var(--ease)}
.logo img{transition:transform .35s var(--ease)}
.site-header.is-stuck .logo img{transform:scale(.9)}
.nav a.navlink,.nav button.navlink{border-radius:var(--r-pill);position:relative;transition:color .2s,background .25s var(--ease)}
.nav li:hover > .navlink{background:rgba(161,35,102,.08)}
.nav .navlink.is-active{box-shadow:none}
.nav .navlink.is-active::after{content:"";position:absolute;left:11px;right:11px;bottom:4px;height:2.5px;
  border-radius:2px;background:var(--grad-warm)}
.mega{box-shadow:var(--shadow-2);transform:translateY(14px) scale(.985)}
.nav li:hover > .mega,.nav li:focus-within > .mega{transform:none}
.mega a{border-radius:var(--r-sm);transition:background .2s,transform .25s var(--ease-out),color .2s}
.mega a:hover{transform:translateX(4px)}

/* --- scroll reveals ---------------------------------------- */
[data-reveal]{opacity:0;transform:translateY(26px);filter:blur(6px);
  transition:opacity .85s var(--ease-out),transform .95s var(--ease-out),filter .85s var(--ease-out);
  transition-delay:var(--d,0ms)}
[data-reveal].is-in{opacity:1;transform:none;filter:none}
[data-reveal="left"]{transform:translateX(-34px)}
[data-reveal="right"]{transform:translateX(34px)}
[data-reveal="scale"]{transform:scale(.94) translateY(20px)}
.word{display:inline-block;opacity:0;transform:translateY(.55em) rotate(2deg);
  transition:opacity .7s var(--ease-out),transform .8s var(--ease-out);transition-delay:var(--d,0ms)}
.is-in .word,.word.is-in{opacity:1;transform:none}

/* --- parallax ---------------------------------------------- */
.px-wrap{overflow:hidden;border-radius:var(--r-md)}
[data-px]{will-change:transform}
.media{transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out)}
.fig .media:hover,.stack .media:hover{transform:translateY(-5px);box-shadow:var(--shadow-2)}
.media::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.22) 50%,transparent 62%);
  transform:translateX(-110%);transition:transform 1.1s var(--ease-out)}
.media:hover::before{transform:translateX(110%)}
.media .play{transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out);box-shadow:0 10px 30px -8px rgba(0,0,0,.45)}
.media:hover .play{transform:translate(-50%,-50%) scale(1.12)}
.media .play::before{content:"";position:absolute;inset:-14px;border-radius:50%;
  border:2px solid rgba(255,246,234,.5);animation:ping 2.6s var(--ease-out) infinite}
@keyframes ping{0%{transform:scale(.85);opacity:.9}70%{transform:scale(1.35);opacity:0}100%{opacity:0}}

/* --- cards / cells ----------------------------------------- */
.cell,.tier,.step{position:relative;transition:transform .4s var(--ease-out),background .3s ease,box-shadow .4s var(--ease-out)}
.cell::after,.step::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--grad-warm);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .5s var(--ease-out)}
.cell:hover,.step:hover{background:var(--paper);z-index:2;transform:translateY(-4px);box-shadow:var(--shadow-2)}
.dark .cell:hover,.dark .step:hover{background:var(--night-2);box-shadow:0 30px 60px -30px rgba(0,0,0,.85)}
.cell:hover::after,.step:hover::after{transform:scaleX(1)}
.tier:hover{transform:translateY(-6px);box-shadow:var(--shadow-2);z-index:2}
.tier--rec{box-shadow:inset 0 4px 0 var(--sun)}
.step .no{background:var(--grad-warm);-webkit-background-clip:text;background-clip:text;color:transparent;
  font-weight:800;font-size:52px;letter-spacing:-.04em}
.checklist li,.problems li{transition:transform .3s var(--ease-out),border-color .3s}
.checklist li:hover,.problems li:hover{transform:translateX(6px)}
.checklist li::before{border-radius:3px;background:var(--grad-warm);transition:transform .3s var(--ease-out)}
.checklist li:hover::before{transform:scale(1.35) rotate(45deg)}
.problems li::before{border-radius:3px;background:var(--grad-cool)}

/* --- hero --------------------------------------------------- */
.hero{position:relative;overflow:hidden;background:none}
.hero h1 em{font-style:normal;background:var(--grad-cool);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-media{position:relative}
.hero .media{box-shadow:var(--shadow-2)}

/* --- poster / dark sections -------------------------------- */
.poster{position:relative;overflow:hidden;background:var(--grad-warm);background-size:220% 220%;
  animation:posterShift 18s ease-in-out infinite}
@keyframes posterShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.poster::before{content:"";position:absolute;inset:-30% -10%;pointer-events:none;
  background:radial-gradient(circle at 20% 30%,rgba(255,255,255,.45),transparent 45%),
             radial-gradient(circle at 82% 70%,rgba(34,71,232,.20),transparent 48%)}
.poster .wrap{position:relative}
.dark{position:relative;overflow:hidden}
.dark::before{content:"";position:absolute;width:60vw;height:60vw;left:var(--gx,70%);top:var(--gy,-20%);
  transform:translate(-50%,-50%);pointer-events:none;border-radius:50%;
  background:radial-gradient(circle,rgba(247,194,27,.16),transparent 62%);
  transition:left .9s var(--ease-out),top .9s var(--ease-out)}
.dark .wrap{position:relative;z-index:1}

/* --- marquee ------------------------------------------------ */
.logo-wall .marquee{margin-top:14px;border-radius:var(--r-md)}
.marquee{overflow:hidden;padding:22px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  background:rgba(255,255,255,.4);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;gap:56px;width:max-content;animation:slide 34s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{font-size:19px;font-weight:700;letter-spacing:-.01em;color:var(--dim);
  display:flex;align-items:center;gap:56px;white-space:nowrap}
.marquee-track span::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--sun);flex:none}
@keyframes slide{to{transform:translateX(-50%)}}

/* --- faq ---------------------------------------------------- */
.faq details{border-radius:var(--r-md);padding:22px;margin-bottom:10px;border-bottom:0;
  background:rgba(255,255,255,.45);transition:background .3s ease,box-shadow .35s var(--ease-out),transform .35s var(--ease-out)}
.faq details:hover{background:var(--paper);box-shadow:var(--shadow-1)}
.faq details[open]{background:var(--paper);box-shadow:var(--shadow-1)}
.faq summary::after{transition:transform .3s var(--ease-out)}
.faq details[open] summary::after{transform:rotate(180deg)}
.faq-body{overflow:hidden}
@keyframes fadeUp{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* --- quote -------------------------------------------------- */
.quote{border-left:0;position:relative;padding-left:38px;box-shadow:var(--shadow-1);
  transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out)}
.quote::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:4px;border-radius:4px;background:var(--grad-warm)}
.quote:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)}

/* --- footer ------------------------------------------------- */
.foot-grid a:not(.btn){transition:color .2s,transform .25s var(--ease-out);display:inline-block}
.foot-grid a:not(.btn):hover{transform:translateX(4px)}

.no-js [data-reveal],.no-js .word{opacity:1;transform:none;filter:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important}
  [data-reveal],.word{opacity:1 !important;transform:none !important;filter:none !important}
  .aura{display:none}
}


/* --- full-bleed parallax band -------------------------------- */
.band{position:relative;overflow:hidden;min-height:min(78vh,680px);display:flex;align-items:flex-end;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);background:var(--pastel-b)}
.band-media{position:absolute;left:0;right:0;top:-34%;bottom:-34%;will-change:transform;background:var(--pastel-b)}
.band-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 46%}
.band-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(12,10,22,.34) 0%,rgba(12,10,22,.12) 34%,rgba(12,10,22,.72) 74%,rgba(12,10,22,.92) 100%)}
.band-tag{position:absolute;left:24px;top:24px;z-index:2;border-radius:var(--r-pill);
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  background:var(--sun);color:var(--ink);padding:6px 12px}
.band-inner{position:relative;z-index:2;padding-top:60px;padding-bottom:34px;width:100%}
.band-inner h2{color:#FFFDF9;font-size:clamp(34px,5.2vw,70px);line-height:1.02;letter-spacing:-.03em;
  margin:18px 0 20px;max-width:22ch}
.band-inner .eyebrow{color:var(--sun)}
.band-inner p{color:#E6DACB;font-size:19px;max-width:52ch;margin-bottom:30px}
.band-stats{display:flex;gap:44px;flex-wrap:wrap;margin-top:36px;padding-top:26px;
  border-top:1px solid rgba(255,255,255,.16)}
.band-stats div{min-width:0}
.band-stats strong{display:block;font-size:clamp(24px,3vw,38px);line-height:1;color:#FFFDF9;letter-spacing:-.02em}
.band-stats span{font-size:13px;color:#C3B5A5;letter-spacing:.04em}
@media (max-width:1020px){
  .band{min-height:64vh}
  .band-inner{padding-top:90px;padding-bottom:48px}
  .band-stats{gap:26px}
}

/* --- hero fact panels (replaces the hero video) --------------- */
.hero-facts{display:flex;flex-direction:column;gap:12px}
.hero-facts > div{background:rgba(255,255,255,.55);backdrop-filter:blur(8px);
  border:1px solid rgba(227,212,190,.9);border-radius:var(--r-md);padding:20px 22px;
  box-shadow:var(--shadow-1);transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out)}
.hero-facts > div:hover{transform:translateY(-4px) translateX(4px);box-shadow:var(--shadow-2)}
.hero-facts strong{display:block;font-size:21px;letter-spacing:-.02em;margin-bottom:3px}
.hero-facts span{font-size:14px;color:var(--muted)}
@media (max-width:1080px){.hero-facts{flex-direction:row;flex-wrap:wrap}.hero-facts > div{flex:1 1 200px}}


/* ============================================================
   BRIGHT PASTEL SECTIONS
   No near-black grounds anywhere. Sections alternate warm and
   cool pastels; the old .dark class now reads as butter.
   ============================================================ */
.dark{background:var(--pastel-a);color:var(--ink)}
.dark h1,.dark h2,.dark h3,.dark h4,.dark h5{color:var(--ink)}
.dark .lede,.dark p,.dark li{color:var(--ink-2)}
.dark .eyebrow{color:var(--cobalt-deep)}
.dark .eyebrow--sun{color:var(--sun-deep)}
.dark a:not(.btn),.dark .link-arrow{color:var(--cobalt-deep)}
.dark a:not(.btn):hover{color:var(--cobalt)}
.dark .rule{background:var(--rule)}
.dark .chip{border-color:var(--rule-2);color:var(--ink-2);background:rgba(255,255,255,.62)}
.dark .chip:hover{border-color:var(--cobalt);color:var(--cobalt-deep)}
.dark .checklist li,.dark .problems li{border-bottom-color:var(--rule);color:var(--ink-2)}
.dark .grid-2,.dark .grid-3,.dark .grid-4{background:var(--rule);border-color:var(--rule)}
.dark .cell{background:rgba(255,255,255,.6)}
.dark .cell:hover,.dark .step:hover{background:var(--paper);box-shadow:var(--shadow-2)}
.dark .btn--ghost{border-color:var(--rule-2);color:var(--ink);background:transparent}
.dark .btn--ghost:hover{border-color:var(--cobalt);color:var(--cobalt-deep);background:rgba(255,255,255,.55)}
.dark .quote{background:var(--paper)}
.dark .quote blockquote{color:var(--ink)}
.dark::before{background:radial-gradient(circle,rgba(255,138,61,.45),rgba(247,194,27,.22) 42%,transparent 66%)}

.svc-grid{display:grid;grid-template-columns:repeat(3,1fr)}
.svc-grid>*{padding:22px 26px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);text-align:left}
.svc-grid>h3{border-bottom:0;padding-bottom:0}
.svc-grid>p{padding-top:8px}
.svc-grid>*:nth-child(3n){border-right:0}
.svc-grid>*:nth-last-child(-n+3){border-bottom:0}
.svc-grid h3,.svc-grid p,.svc-grid ul{text-align:left}
.svc-grid h3,.svc-grid p{text-align:center}
@media (max-width:900px){
  .svc-grid{grid-template-columns:1fr}
  .svc-grid>*{border-right:0}
  .svc-grid>*:nth-last-child(-n+3){border-bottom:1px solid var(--rule)}
  .svc-grid>*:last-child{border-bottom:0}
}
.steps{background:var(--rule);border-color:var(--rule)}
.step{background:rgba(255,255,255,.66)}
.step p,.step h3{color:var(--ink-2)}
.step h3{color:var(--ink)}
.media--film{background:var(--slate-soft);border-color:#B9C4E0}
.media--film .tag{background:var(--sun);color:var(--ink)}
.media .play{background:rgba(255,255,255,.95)}
.media .play::before{border-color:rgba(34,71,232,.35)}

/* footer, lightened to match */
.site-footer{background:var(--pastel-b);color:var(--ink-2);border-top:1px solid var(--rule)}
.site-footer h5{color:var(--cobalt-deep)}
.foot-grid{border-bottom-color:var(--rule)}
.foot-grid a:not(.btn){color:var(--ink-2)}
.foot-grid a:not(.btn):hover{color:var(--cobalt)}
.foot-grid p{color:var(--muted)}
.foot-bottom{color:var(--muted)}
.foot-bottom a{color:var(--ink-2)}
.disclaimer{color:var(--dim)}

/* ============================================================
   CENTERED LAYOUT
   Headings, lists, media and actions center in their column.
   Multi-sentence paragraphs stay left-aligned inside a centered
   block, which keeps long copy readable on a phone.
   ============================================================ */
.sect,.hero,.page-head,.poster,.band-inner,.site-footer{text-align:center}
.sect-head,.head-block{margin-left:auto;margin-right:auto;text-align:center;max-width:100%}
.head-block{max-width:60ch}
.sect-head h2,.head-block h2,.page-head h1,.poster h2,.band-inner h2,.hero h1{
  margin-left:auto;margin-right:auto}
.lede,.poster p,.band-inner p,.faq p,.disclaimer,.hero-note,.foot-grid p,.notice{
  margin-left:auto;margin-right:auto;text-align:center}
.sect .wrap > p,.two-col p,.feature p,.cell p,.step p,.tier p,.quote blockquote{
  margin-left:auto;margin-right:auto}
.two-col > div,.feature > div,.cell,.step,.tier,.work-item,.stack,.fig{text-align:center}
.actions,.chips,.svc-cloud,.band-stats,.logo-wall,.marquee-track{justify-content:center}
.checklist li,.problems li{justify-content:center;align-items:center;text-align:center}
.faq summary{justify-content:center;gap:14px}
.field label{text-align:center}
.foot-grid{text-align:center}
.foot-bottom{justify-content:center}
.step .no{margin-left:auto;margin-right:auto}
.quote{padding-left:32px}
.quote::before{left:50%;top:auto;bottom:auto;transform:translateX(-50%);width:56px;height:4px;top:0}
.center-narrow{margin-left:auto;margin-right:auto}
.center-narrow h2{text-align:center}
.center-narrow p,.center-narrow ul{text-align:center}
.center-narrow ul.checklist li{text-align:center}
@media (max-width:1020px){
  .lede,.poster p,.band-inner p{max-width:100%}
}

/* ============================================================
   CHECKBOX BULLETS
   White box, black border, oversized bright-green check drawn as
   a glyph so it overflows the box edges instead of being clipped
   (a background image cannot paint outside its element).
   ============================================================ */
.checklist li::before,.problems li::before{
  content:"\2713";
  flex:0 0 22px;width:22px;height:22px;margin:0;border-radius:5px;
  background:#FFFFFF;background-image:none;border:2px solid var(--ink);box-shadow:none;
  display:flex;align-items:center;justify-content:center;
  font-family:"Segoe UI Symbol","Apple Symbols",Archivo,sans-serif;
  font-size:31px;line-height:1;font-weight:700;color:#12D94A;
  text-shadow:0 1px 3px rgba(0,0,0,.22);
  transition:transform .3s var(--ease-out)}
.checklist li:hover::before,.problems li:hover::before{transform:scale(1.1)}
.checklist li:hover,.problems li:hover{transform:none}

/* single-column centered hero */
.hero-grid--single{grid-template-columns:1fr}
.hero-grid--single > div{max-width:none;text-align:center}
.hero-grid--single .lede,.hero-grid--single .hero-note{margin-left:auto;margin-right:auto;text-align:center}
.hero{padding-bottom:30px;background:radial-gradient(120% 80% at 50% 0%, rgba(247,194,27,0.26) 0%, rgba(255,246,234,0) 62%)}
.hero h1{max-width:22ch}
.promise-block{max-width:1000px;margin-left:auto;margin-right:auto}
.promise-block h2{margin-left:auto;margin-right:auto}


/* ============================================================
   QUICK START PAGE
   One screen on desktop. Three routes in, three answers, done.
   ============================================================ */
.qs-head{padding-top:52px;padding-bottom:26px}
.qs-head h1{max-width:16ch}
.qs-paths{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.qs-path{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:30px 24px 26px;border:1px solid var(--rule-2);border-radius:var(--r-lg);
  background:rgba(255,255,255,.6);backdrop-filter:blur(8px);box-shadow:var(--shadow-1);
  transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out),background .3s ease}
.qs-path:hover{transform:translateY(-5px);box-shadow:var(--shadow-2);background:var(--paper)}
.qs-path--lead{border-color:var(--sun);box-shadow:var(--shadow-sun),var(--shadow-1)}
.qs-step{display:flex;align-items:center;justify-content:center;width:38px;height:38px;
  border-radius:var(--r-pill);background:var(--grad-warm);color:var(--ink);
  font-size:18px;font-weight:800;letter-spacing:-.02em;flex:none}
.qs-path h3{font-size:21px;letter-spacing:-.02em;margin:2px 0 0;max-width:18ch}
.qs-path p{font-size:15px;color:var(--muted);margin:0;max-width:30ch}
.qs-path .btn{margin-top:auto}
.qs-path p{padding-bottom:14px}
.qs-path .pill{position:absolute;top:-11px;left:50%;transform:translateX(-50%);white-space:nowrap}

.qs-answers{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.qs-answers > div{padding:0 12px;border-left:1px solid var(--rule)}
.qs-answers > div:first-child{border-left:0}
.qs-answers .eyebrow{display:block;margin-bottom:10px}
.qs-answers p{font-size:15.5px;margin:0;text-align:center}

.qs-video{padding-top:36px;padding-bottom:44px}
.qs-video-inner{max-width:760px;margin:0 auto}

@media (max-width:900px){
  .qs-paths,.qs-answers{grid-template-columns:1fr}
  .qs-answers > div{border-left:0;border-top:1px solid var(--rule);padding-top:20px}
  .qs-answers > div:first-child{border-top:0;padding-top:0}
}

/* quick start: compact vertical rhythm so the paths and answers land in one screen */
.qs-head h1{font-size:clamp(34px,4.6vw,58px)}
.sect.qs-answers-sect{padding-top:34px;padding-bottom:34px}
.qs-close{padding:26px 0 40px}
.qs-close p{font-size:15px;color:var(--muted);margin:0 auto}


/* ============================================================
   CONSISTENT INLINE TAG LISTS
   The service clouds now read exactly like the outcome chips, so
   every short-label list on the site shares one look.
   ============================================================ */
.svc-cloud{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px;justify-content:center}
.svc-cloud span{border:1px solid var(--rule-2);border-radius:var(--r-pill);
  padding:9px 15px;font-size:13.5px;color:var(--ink-2);background:rgba(255,255,255,.55);
  backdrop-filter:blur(6px);font-family:Archivo,system-ui,-apple-system,Segoe UI,sans-serif;
  transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out),border-color .2s,color .2s}
.svc-cloud span:hover{transform:translateY(-2px);box-shadow:var(--shadow-1);
  border-color:var(--cobalt);color:var(--cobalt-deep)}
.dark .svc-cloud span{background:rgba(255,255,255,.62);border-color:var(--rule-2);color:var(--ink-2)}

/* Promise block: heading and its lede both centered */
.promise-block h2{margin-left:auto !important;margin-right:auto !important}
.promise-block .lede{text-align:center}

/* Vertically center the "Start Here" cell against its taller neighbour */
.cell--vcenter{display:flex;flex-direction:column;justify-content:center;align-items:center}
/* text keeps the full column width so it wraps normally; badges and links
   stay at their intrinsic width instead of being stretched by the flex column */
.cell--vcenter > h3,.cell--vcenter > h4,.cell--vcenter > p,.cell--vcenter > ul{align-self:stretch}

/* Section padding trimmed 60%: keep the band from collapsing */
.band{min-height:min(62vh,560px)}

/* overflow-x:hidden on html/body makes them a scroll container, which kills
   position:sticky on the header. clip prevents sideways scroll without that. */
html{overflow-x:clip}
body{overflow-x:clip;max-width:100%}


/* ============================================================
   MEDIA HEIGHT CAPS
   Once the two-column grids collapse, a full-width placeholder
   multiplied by its aspect ratio becomes a screen-tall empty
   box. Cap the height instead and let real images crop.
   ============================================================ */
@media (max-width:1080px){
  .media--tall{aspect-ratio:auto;height:min(70vh,520px)}
  .media--square{aspect-ratio:auto;height:min(56vh,420px)}
  .media--wide{aspect-ratio:auto;height:min(42vh,320px)}
  .media--photo img{object-fit:cover;object-position:50% 30%}
}
@media (max-width:620px){
  .media--tall{height:min(58vh,400px)}
  .media--square{height:min(46vh,330px)}
  .media--wide{height:min(36vh,240px)}
}


/* ============================================================
   BAND TEXT LEGIBILITY
   .band-inner fills the band, so align-items:flex-end can't push
   the copy into the dark lower half. Give the text block its own
   scrim that travels with it, independent of band height and of
   how bright the photograph is behind it.
   ============================================================ */
.band-inner::before{content:"";position:absolute;z-index:-1;
  left:50%;transform:translateX(-50%);width:100vw;
  top:0;bottom:0;
  background:linear-gradient(180deg,rgba(12,10,22,.86) 0%,rgba(12,10,22,.66) 55%,rgba(12,10,22,.80) 100%)}
.band-inner{isolation:isolate}


/* ============================================================
   CENTERING, FINAL PASS
   Everything centers. The only exceptions are the things that
   genuinely break when centered: form controls, the long-form
   legal body on the privacy page, and the nav dropdown.
   ============================================================ */
main,main p,main li,main h1,main h2,main h3,main h4,main h5,main span,
main blockquote,main figcaption,main dl,main dd,main dt{text-align:center}
main ul,main ol{list-style-position:inside;padding-left:0}
.media,.media .tag,.band-tag{text-align:left}
.media{justify-content:center}
.media .tag{align-self:flex-end}

/* form controls keep their natural alignment so typing reads normally */
.field input,.field select,.field textarea{text-align:left}
.field label,.field .err,.field .hint{text-align:center}

/* the long-form legal page stays left-aligned: it is a document, not a layout */
.legal-body p,.legal-body li,.legal-body ul{text-align:left}
.legal-body h2{text-align:center}

/* nav dropdown is a menu, not page copy */
.mega,.mega a,.mega a small{text-align:left}

/* Block-level images ignore text-align; auto side margins are what centers them. */
main img,.site-footer img{margin-left:auto;margin-right:auto}
.media--photo img{margin:0}


/* ============================================================
   PALETTE PASS
   White ground, pale pink tints, deep plum for the dark sections,
   and the brand gradient on every point of emphasis.
   ============================================================ */
body{background:var(--white)}
::selection{background:var(--sun-soft);color:var(--plum)}
:focus-visible{outline:2px solid var(--pink);outline-offset:2px}
a{color:var(--magenta)}
a:hover{color:var(--pink)}

/* plum sections: light type, gradient accents */
.dark{background:var(--plum);color:#F6E8F1}
.dark h1,.dark h2,.dark h3,.dark h4,.dark h5{color:var(--white)}
.dark .lede,.dark p,.dark li{color:#EBD6E4}
.dark .eyebrow{color:var(--sun-soft)}
.dark .eyebrow--sun{color:var(--sun-soft)}
.dark a:not(.btn),.dark .link-arrow{color:var(--sun-soft)}
.dark a:not(.btn):hover{color:var(--white)}
.dark .rule,.dark .grid-2,.dark .grid-3,.dark .grid-4{background:var(--night-rule);border-color:var(--night-rule)}
.dark .cell,.dark .step{background:var(--night-2)}
.dark .cell:hover,.dark .step:hover{background:#6B1D62;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.dark .chip,.dark .svc-cloud span{background:rgba(255,255,255,.10);border-color:var(--night-rule);color:#F6E8F1}
.dark .chip:hover,.dark .svc-cloud span:hover{border-color:var(--pink);color:var(--white)}
.dark .checklist li,.dark .problems li{border-bottom-color:var(--night-rule);color:#EBD6E4}
.dark .btn--ghost{border-color:var(--night-rule);color:var(--white);background:transparent}
.dark .btn--ghost:hover{border-color:var(--pink);color:var(--white);background:rgba(255,255,255,.10)}
.dark .quote{background:var(--night-2)}
.dark .quote blockquote{color:var(--white)}
.dark .media{background:var(--night-2);border-color:var(--night-rule)}
.dark::before{background:radial-gradient(circle,rgba(227,49,127,.42),rgba(187,33,135,.18) 44%,transparent 68%)}
.dark .faq details{background:rgba(255,255,255,.07)}
.dark .faq details:hover,.dark .faq details[open]{background:rgba(255,255,255,.12)}
.dark .faq summary{color:var(--white)}

/* tints */
.tint--b{background:var(--pastel-b)}
.tint--c{background:var(--pastel-c)}
.tint--d{background:var(--pastel-d)}

/* the gradient, everywhere emphasis lives */
.btn--sun{background:var(--grad-warm);color:var(--white)}
.btn--sun:hover{background:var(--grad-warm);box-shadow:var(--shadow-sun);color:var(--white)}
.dark .btn--sun,.foot-grid .btn--sun{color:var(--white)}
.dark .btn--sun:hover,.foot-grid .btn--sun:hover{color:var(--white)}
.btn--cobalt{background:var(--grad-cool);color:var(--white)}
.btn--cobalt:hover{background:var(--grad-cool);box-shadow:var(--shadow-cobalt);color:var(--white)}
.btn::after{background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.34) 48%,transparent 76%)}
.scrollbar-progress{background:var(--grad-brand)}
.cell::after,.step::after{background:var(--grad-brand)}
.step .no{background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.quote::before{background:var(--grad-brand)}
.nav .navlink.is-active::after{background:var(--grad-brand)}
.pill{background:var(--grad-cool);color:var(--white)}
.pill--sun{background:var(--grad-warm);color:var(--white)}
.pill--ph{background:var(--rule);color:var(--plum)}
.media .tag{background:var(--grad-warm);color:var(--white)}
.media--film{background:var(--slate-soft);border-color:var(--rule-2)}
.media .play{background:var(--white)}
.media .play::before{border-color:rgba(227,49,127,.45)}
.tier--rec{box-shadow:inset 0 4px 0 var(--pink)}
.notice{border-left-color:var(--pink)}
.marquee-track span::after{background:var(--pink)}
.eyebrow{color:var(--magenta)}
.eyebrow--sun{color:var(--pink)}

/* poster: the gradient as a full field */
.poster{background:var(--grad-brand);background-size:220% 220%;color:var(--white)}
.poster h2,.poster p{color:var(--white)}
.poster::before{background:radial-gradient(circle at 20% 30%,rgba(255,255,255,.20),transparent 48%),
                           radial-gradient(circle at 82% 70%,rgba(227,49,127,.42),transparent 52%)}
.poster .eyebrow{color:var(--sun-soft) !important}
.poster .btn--cobalt{background:var(--white);color:var(--plum)}
.poster .btn--cobalt:hover{background:var(--white);color:var(--plum-lit);box-shadow:0 18px 44px -16px rgba(0,0,0,.4)}
.poster .btn--ghost{border-color:rgba(255,255,255,.6);color:var(--white) !important}
.poster .btn--ghost:hover{border-color:var(--white);background:rgba(255,255,255,.14)}
.poster .link-arrow{color:var(--white) !important}

/* ambient wash, retinted */
.aura span:nth-child(1){background:radial-gradient(circle,rgba(227,49,127,.34),transparent 66%)}
.aura span:nth-child(2){background:radial-gradient(circle,rgba(187,33,135,.28),transparent 66%)}
.aura span:nth-child(3){background:radial-gradient(circle,rgba(78,18,71,.22),transparent 66%)}
.hero{background:radial-gradient(120% 80% at 50% 0%, rgba(227,49,127,.16) 0%, rgba(255,255,255,0) 62%)}
.hero h1 em{background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent}

/* band scrim, plum-tinted */
.band{background:var(--plum)}
.band-media{background:var(--plum)}
.band-media::after{background:linear-gradient(180deg,rgba(31,7,28,.42) 0%,rgba(31,7,28,.24) 34%,rgba(31,7,28,.80) 74%,rgba(31,7,28,.94) 100%)}
.band-inner::before{background:linear-gradient(180deg,rgba(31,7,28,.88) 0%,rgba(78,18,71,.70) 55%,rgba(31,7,28,.84) 100%)}
.band-inner .eyebrow{color:var(--sun-soft)}
.band-tag{background:var(--grad-warm);color:var(--white)}

/* footer on the gradient's dark end */
.site-footer{background:var(--plum);color:#EBD6E4;border-top:0}
.site-footer h5{color:var(--sun-soft)}
.foot-grid{border-bottom-color:var(--night-rule)}
.foot-grid a:not(.btn){color:#EBD6E4}
.foot-grid a:not(.btn):hover{color:var(--white)}
.foot-grid p,.foot-bottom,.disclaimer{color:#C9AEBF}
.foot-bottom a{color:#EBD6E4}
.site-footer img{filter:invert(1) brightness(2)}

/* quick start cards */
.qs-path--lead{border-color:var(--pink)}
.qs-step{background:var(--grad-brand);color:var(--white)}

/* checkbox bullets: green check stays, box goes white on black border */
.checklist li::before,.problems li::before{border-color:var(--black);color:#12D94A}


/* ============================================================
   GLOBAL NAV
   At rest: near-white with dark text. Scrolled: the brand
   gradient with white text.
   ============================================================ */
.site-header{background:rgba(255,255,255,.94);border-bottom:1px solid var(--rule);
  transition:background .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease)}
.nav a.navlink,.nav button.navlink{color:var(--ink-2)}
.nav li:hover > .navlink,.nav .navlink.is-active{color:var(--magenta)}
.nav-toggle{border-color:var(--rule-2);color:var(--ink)}

.site-header.is-stuck{background:var(--grad-brand);border-bottom-color:transparent;
  box-shadow:0 12px 40px -18px rgba(78,18,71,.65)}
.site-header.is-stuck .nav a.navlink,.site-header.is-stuck .nav button.navlink{color:rgba(255,255,255,.9)}
.site-header.is-stuck .nav li:hover > .navlink,
.site-header.is-stuck .nav .navlink.is-active{color:var(--white)}
.site-header.is-stuck .nav li:hover > .navlink{background:rgba(255,255,255,.14)}
.site-header.is-stuck .nav .navlink.is-active::after{background:var(--white)}
.site-header.is-stuck .caret{opacity:.9}
.site-header.is-stuck .nav-toggle{border-color:rgba(255,255,255,.55);color:var(--white)}
.site-header.is-stuck .btn--sun{background:var(--white);color:var(--plum)}
.site-header.is-stuck .btn--sun:hover{background:var(--white);color:var(--plum-lit)}
/* the mobile drawer stays light so the menu is readable either way */
@media (max-width:1020px){
  .nav{background:var(--white);border-bottom-color:var(--rule)}
  .site-header.is-stuck .nav a.navlink,.site-header.is-stuck .nav button.navlink{color:var(--ink-2)}
  .site-header.is-stuck .nav li:hover > .navlink,
  .site-header.is-stuck .nav .navlink.is-active{color:var(--magenta)}
  .site-header.is-stuck .nav li:hover > .navlink{background:rgba(161,35,102,.08)}
}

.eyebrow--sun{color:var(--magenta)}
.dark .eyebrow--sun,.poster .eyebrow--sun,.band-inner .eyebrow--sun{color:var(--sun-soft)}


/* Center the list as a block, then align rows inside it, so the checkboxes
   share one x-coordinate instead of tracking each label's width. */
.checklist,.problems{width:fit-content;max-width:100%;margin-left:auto;margin-right:auto}
.checklist li,.problems li{justify-content:flex-start;text-align:left;align-items:flex-start}
.checklist li::before,.problems li::before{margin-top:2px}
main .checklist li,main .problems li{text-align:left}
@media (max-width:900px){
  .problems{columns:1}
}


/* ============================================================
   GRADIENT ON PLUM
   --grad-brand ends at the plum section background, so anything
   gradient-clipped or gradient-filled inside a plum section
   dissolves into its own ground. Plum sections get a light
   variant that runs the other way.
   ============================================================ */
:root{--grad-brand-lit:linear-gradient(135deg,#F9C6DD 0%,#E3317F 100%)}
.dark .step .no,.step .no{background:var(--grad-brand-lit);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.dark .cell::after,.dark .step::after,.dark .quote::before{background:var(--grad-brand-lit)}
.dark .pill{background:var(--grad-brand-lit);color:var(--plum)}
.dark .media .tag{background:var(--grad-brand-lit);color:var(--plum)}


/* ============================================================
   GRADUAL STICKY NAV
   JS writes --nav-t (0 at the top, 1 once fully scrolled). Every
   value here interpolates on it, so the change is a ramp rather
   than a switch.
   ============================================================ */
.site-header{--nav-t:0;position:sticky;top:0;z-index:60;isolation:isolate;
  background:rgba(255,255,255,.94);
  border-bottom:1px solid color-mix(in oklab,var(--rule),transparent calc(var(--nav-t)*100%));
  box-shadow:0 12px 40px -18px rgba(78,18,71,calc(var(--nav-t)*.65));
  transition:none}
.site-header::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:var(--grad-brand);opacity:var(--nav-t)}
.hbar{padding-top:calc(16px - var(--nav-t)*7px);padding-bottom:calc(16px - var(--nav-t)*7px);transition:none}
.logo img{transform:scale(calc(1 - var(--nav-t)*.1));transition:none}
.nav a.navlink,.nav button.navlink{
  color:color-mix(in oklab,var(--ink-2),#FFFFFF calc(var(--nav-t)*100%))}
.nav li:hover > .navlink,.nav .navlink.is-active{
  color:color-mix(in oklab,var(--magenta),#FFFFFF calc(var(--nav-t)*100%))}
.nav li:hover > .navlink{background:rgba(255,255,255,calc(var(--nav-t)*.14))}
.nav .navlink.is-active::after{
  background:var(--grad-brand);opacity:calc(1 - var(--nav-t))}
.nav .navlink.is-active::before{content:"";position:absolute;left:11px;right:11px;bottom:4px;height:2.5px;
  border-radius:2px;background:#FFFFFF;opacity:var(--nav-t)}
.nav-toggle{border-color:color-mix(in oklab,var(--rule-2),#FFFFFF calc(var(--nav-t)*100%));
  color:color-mix(in oklab,var(--ink),#FFFFFF calc(var(--nav-t)*100%))}
.hbar > .btn--sun{background:var(--grad-warm);color:#FFFFFF}
.site-header.is-stuck .hbar > .btn--sun{background:#FFFFFF;color:var(--plum)}
.site-header.is-stuck .hbar > .btn--sun:hover{background:#FFFFFF;color:var(--plum-lit)}
/* the is-stuck class no longer paints anything on its own */
.site-header.is-stuck{background:rgba(255,255,255,.94);box-shadow:0 12px 40px -18px rgba(78,18,71,calc(var(--nav-t)*.65))}
/* No is-stuck colour override here: it outranked the interpolated colour and
   made the links inherit black. --nav-t drives the colour on its own. */
@media (max-width:1020px){
  .nav{background:var(--white);border-bottom-color:var(--rule)}
  .nav a.navlink,.nav button.navlink,
  .site-header.is-stuck .nav a.navlink,.site-header.is-stuck .nav button.navlink{color:var(--ink-2)}
  .nav li:hover > .navlink,.nav .navlink.is-active,
  .site-header.is-stuck .nav li:hover > .navlink,
  .site-header.is-stuck .nav .navlink.is-active{color:var(--magenta)}
  .nav li:hover > .navlink,.site-header.is-stuck .nav li:hover > .navlink{background:rgba(161,35,102,.08)}
  .nav .navlink.is-active::before{opacity:0}
  .nav .navlink.is-active::after{opacity:1}
}

/* ============================================================
   PLUM SECTIONS AS GRADIENT FIELDS
   ============================================================ */
.dark{background:var(--grad-brand);background-attachment:local}
.dark::before{background:radial-gradient(circle,rgba(255,140,205,.85),rgba(227,49,127,.55) 34%,rgba(187,33,135,.22) 56%,transparent 72%);
  mix-blend-mode:screen;opacity:.9}
.step{background:rgba(255,255,255,.07)}
.dark .cell{background:rgba(255,255,255,.07)}
.dark .cell:hover,.dark .step:hover{background:rgba(255,255,255,.14)}
.dark .grid-2,.dark .grid-3,.dark .grid-4,.steps{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.2)}
.dark .quote,.dark .media{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.2)}

/* ============================================================
   BAND PHOTO: no tint. The photograph renders untouched; only
   the text block carries a scrim, so the copy stays legible.
   ============================================================ */
.band-media::after{background:none;display:none}

/* hero */
.hero .lede strong{color:var(--pink);font-weight:800}
.hero-lede-lead{color:var(--pink);font-weight:800}
.hero-sign{display:block;margin-top:10px;font-size:16px;font-weight:700;color:var(--ink-2);letter-spacing:-.01em}
.hero-note{display:flex;flex-direction:column;align-items:center;gap:7px;line-height:1.5}
.hero-note a{font-weight:700}


/* ============================================================
   BAND: PHOTO CLEAN, COPY LEGIBLE
   The band is now taller than its copy block, so the copy sits
   at the bottom and its scrim fades out before it reaches the
   upper half. The photograph renders untouched above the fade.
   ============================================================ */
.band{min-height:min(94vh,820px);align-items:flex-end}
.band-inner{padding-top:26px;padding-bottom:34px}
.band-inner::before{
  /* top:0/bottom:0 spans the copy block only: the band is 760px and the copy
     block 442px, so the upper 42% of the photograph stays untouched. */
  top:0;bottom:0;height:auto;padding-top:0;margin-top:0;
  background:linear-gradient(180deg,rgba(31,7,28,0) 0%,rgba(31,7,28,.58) 22%,rgba(31,7,28,.84) 58%,rgba(31,7,28,.92) 100%)}
.band-inner .eyebrow{text-shadow:0 1px 10px rgba(31,7,28,.9)}
.band-inner h2{text-shadow:0 2px 16px rgba(31,7,28,.75)}
@media (max-width:820px){
  .band{min-height:min(84vh,640px)}
}

/* vh-based height collapses in short viewports, which puts the copy block
   back over the whole photo. A pixel floor guarantees clean photo above it. */
.band{min-height:760px}
@media (max-width:900px){.band{min-height:600px}}
@media (max-width:620px){.band{min-height:520px}}

.band-inner p{text-shadow:0 2px 14px rgba(31,7,28,.85)}


/* The band eyebrow sits in the top 10% of the copy block, where the scrim is
   still near-transparent. Give it its own opaque chip so its contrast no
   longer depends on which photo pixels happen to be behind it. */
.band-inner .eyebrow{display:inline-block;background:rgba(31,7,28,.86);
  border-radius:var(--r-pill);padding:7px 16px;color:#FFE8F3;text-shadow:none;
  backdrop-filter:blur(3px)}

/* Belt and braces: at desktop widths the scrolled nav is always white. */
@media (min-width:1021px){
  .site-header.is-stuck .nav a.navlink,.site-header.is-stuck .nav button.navlink{color:#FFFFFF}
  .site-header.is-stuck .nav .navlink.is-active,
  .site-header.is-stuck .nav li:hover > .navlink{color:#FFFFFF}
  .site-header.is-stuck .caret{opacity:.95}
}


/* ============================================================
   NAV RAMP, DECOUPLED
   Text and background were interpolating on the same curve, so
   they crossed through mid-grey on mid-pink and the labels went
   invisible around t=0.5. The background now reaches full density
   early (by t=0.25) and the text only starts lightening after
   that, so the crossover is a few pixels of scroll instead of a
   100px dead band. Padding, shadow, logo and border keep the
   original slow curve, so the motion still reads as gradual.
   ============================================================ */
/* --nav-bg and --nav-fg are set numerically by site.js; these are the
   no-JS fallbacks. */
.site-header{--nav-bg:0;--nav-fg:0}
.site-header::before{opacity:var(--nav-bg)}
.site-header{border-bottom-color:color-mix(in oklab,var(--rule),transparent calc(var(--nav-bg)*100%))}
.nav a.navlink,.nav button.navlink{
  color:color-mix(in oklab,var(--ink-2),#FFFFFF calc(var(--nav-fg)*100%))}
.nav li:hover > .navlink,.nav .navlink.is-active{
  color:color-mix(in oklab,var(--magenta),#FFFFFF calc(var(--nav-fg)*100%))}
.nav li:hover > .navlink{background:rgba(255,255,255,calc(var(--nav-fg)*.14))}
.nav .navlink.is-active::after{opacity:calc(1 - var(--nav-fg))}
.nav .navlink.is-active::before{opacity:var(--nav-fg)}
.nav-toggle{border-color:color-mix(in oklab,var(--rule-2),#FFFFFF calc(var(--nav-fg)*100%));
  color:color-mix(in oklab,var(--ink),#FFFFFF calc(var(--nav-fg)*100%))}
@media (max-width:1020px){
  .nav a.navlink,.nav button.navlink{color:var(--ink-2)}
  .nav li:hover > .navlink,.nav .navlink.is-active{color:var(--magenta)}
  .nav li:hover > .navlink{background:rgba(161,35,102,.08)}
}


/* ============================================================
   NAV CROSSFADE
   An interpolated colour cannot stay legible while its own
   background crosses light to dark. So both inks exist at once:
   a dark label and a white label stacked, crossfading on
   --nav-fg. Same for the wordmark, which is two stacked SVGs.
   ============================================================ */
/* fg curve lives in site.js */
.nav a.navlink,.nav button.navlink{position:relative;color:var(--ink-2)}
.nav li:hover > .navlink,.nav .navlink.is-active{color:var(--magenta)}


.caret{transition:border-color .22s var(--ease)}
.site-header.is-stuck .caret{border-color:#FFFFFF}

.logo{position:relative;display:block}
.logo img{transition:none}
.logo-light{position:absolute;left:0;top:0;height:100%;width:auto;
  opacity:var(--nav-fg);filter:none}
.logo-dark{filter:none}

/* the active underline swaps with the same curve */
.nav .navlink.is-active::after{opacity:1}


@media (max-width:1020px){
  /* light drawer: dark labels only, no white layer */
  
  .nav a.navlink,.nav button.navlink{color:var(--ink-2)}
  .nav li:hover > .navlink,.nav .navlink.is-active{color:var(--magenta)}
}


/* The label overlay owns ::after now, so the active underline moves to a
   box-shadow. One element, no pseudo-element collision. */

.nav .navlink.is-active::before{content:none;display:none}
.nav .navlink.is-active{box-shadow:inset 0 -2.5px 0 var(--magenta)}
.site-header.is-stuck .nav .navlink.is-active{box-shadow:inset 0 -2.5px 0 #FFFFFF}
.nav .navlink.is-active{transition:box-shadow .22s var(--ease)}


/* ============================================================
   NAV INK SWAP: DISCRETE, ANIMATED OVER TIME
   Background density and label ink flip together at one scroll
   threshold and animate over 180ms, so there is no scroll offset
   where the user can rest mid-fade. The gradual feel comes from
   --nav-t, which still drives padding, shadow, border and scale
   across the full 220px.
   ============================================================ */
.site-header{--nav-bg:0;--nav-fg:0}
.site-header.is-stuck{--nav-bg:1;--nav-fg:1}
.site-header::before{opacity:var(--nav-bg);transition:opacity .18s var(--ease)}
.nav .navlink[data-label]::after,

.logo-light{opacity:var(--nav-fg);transition:opacity .18s var(--ease)}
.logo-dark{opacity:calc(1 - var(--nav-fg));transition:opacity .18s var(--ease)}
.site-header{border-bottom-color:color-mix(in oklab,var(--rule),transparent calc(var(--nav-bg)*100%));
  transition:border-color .18s var(--ease)}
.nav a.navlink,.nav button.navlink{transition:none}
.nav li:hover > .navlink{background:rgba(255,255,255,calc(var(--nav-fg)*.14))}
.nav .navlink.is-active::after{opacity:var(--nav-fg)}

/* Mobile drawer is always light, so no white layer at any scroll position.
   The active selector is named here so it outranks its desktop counterpart. */
@media (max-width:1020px){
  .nav .navlink[data-label]::after,
  
  .nav a.navlink,.nav button.navlink{color:var(--ink-2)}
  .nav li:hover > .navlink,.nav .navlink.is-active{color:var(--magenta)}
  .nav li:hover > .navlink{background:rgba(161,35,102,.08)}
  .nav .navlink.is-active{box-shadow:inset 0 -2.5px 0 var(--magenta)}
}


/* ============================================================
   LOGO CROSSFADE, AUTHORITATIVE
   The filter-inversion approach is deleted above. These are the
   only rules that touch the wordmark's paint, and they are
   qualified to .logo img so nothing lower can outrank them.
   ============================================================ */
.logo img.logo-dark,.logo img.logo-light{filter:none}
.logo img.logo-dark{opacity:calc(1 - var(--nav-fg));transition:opacity .18s var(--ease)}
.logo img.logo-light{position:absolute;left:0;top:0;height:100%;width:auto;
  opacity:var(--nav-fg);transition:opacity .18s var(--ease)}


/* ============================================================
   NAV LABELS: ONE LAYER
   The duplicate ::after label is gone. Because the swap is
   discrete (JS flips --nav-fg between 0 and 1 at one threshold),
   a single label can simply change colour over 180ms: it is dark
   on white before the flip and white on plum after it, with no
   scroll position that rests in between and no second copy of
   the text to misalign.
   ============================================================ */
.nav .navlink[data-label]::after,
.nav .navlink.is-active[data-label]::after{content:none;display:none}
.nav a.navlink,.nav button.navlink{
  color:var(--ink-2);transition:color .18s var(--ease),background .18s var(--ease)}
.nav li:hover > .navlink,.nav .navlink.is-active{color:var(--magenta)}
.nav .navlink.is-active{box-shadow:inset 0 -2.5px 0 var(--magenta);
  transition:box-shadow .18s var(--ease),color .18s var(--ease)}

@media (min-width:1021px){
  .site-header.is-stuck .nav a.navlink,
  .site-header.is-stuck .nav button.navlink,
  .site-header.is-stuck .nav li:hover > .navlink,
  .site-header.is-stuck .nav .navlink.is-active{color:#FFFFFF}
  .site-header.is-stuck .nav li:hover > .navlink{background:rgba(255,255,255,.14)}
  .site-header.is-stuck .nav .navlink.is-active{box-shadow:inset 0 -2.5px 0 #FFFFFF}
}
@media (max-width:1020px){
  .site-header.is-stuck .nav a.navlink,
  .site-header.is-stuck .nav button.navlink{color:var(--ink-2)}
  .site-header.is-stuck .nav li:hover > .navlink,
  .site-header.is-stuck .nav .navlink.is-active{color:var(--magenta)}
  .site-header.is-stuck .nav li:hover > .navlink{background:rgba(161,35,102,.08)}
  .site-header.is-stuck .nav .navlink.is-active{box-shadow:inset 0 -2.5px 0 var(--magenta)}
}


/* hero pull-quote */
.hero-quote{font-style:italic;display:block}
/* the band label, on the brand pink instead of the plum chip */
.band-inner .eyebrow--hot{background:#E3317F;color:#FFFFFF}
/* the Growth Protocol photo, centred against its taller text column */
.protocol-media{align-self:center;display:flex;flex-direction:column;justify-content:center}


/* band: bottom padding doubled, top padding matched to it. The band sizes to
   its copy block, so the 68px top padding is what actually shows above the
   eyebrow instead of the leftover of a fixed band height. */
/* The eyebrow chip is a 32px inline-block on a 26.4px line strut, which injected
   ~26px of ascender space above it and let it overhang its line box below,
   shifting the whole copy block down so 68px rendered as 94/43. Flex column
   removes the strut entirely, so the authored padding is what shows. */
.band-inner--even{padding-top:68px;padding-bottom:68px;
  display:flex;flex-direction:column;align-items:center}
.band-inner--even > *{max-width:100%}
.band{min-height:0;align-items:stretch}
@media (max-width:900px){.band{min-height:0}}
@media (max-width:620px){.band{min-height:0}}

/* Now that the band equals its copy block, a copy-scoped scrim would cover the
   whole photograph. So the scrim stays off the upper half entirely and peaks
   low and light; legibility comes from the eyebrow's own opaque chip and from
   layered text-shadows on the headline and paragraph instead. */
.band-inner::before{
  background:linear-gradient(180deg,rgba(31,7,28,0) 0%,rgba(31,7,28,0) 40%,rgba(31,7,28,.28) 72%,rgba(31,7,28,.46) 100%)}
.band-inner h2{text-shadow:0 1px 2px rgba(31,7,28,.95),0 2px 10px rgba(31,7,28,.9),0 6px 28px rgba(31,7,28,.75)}
.band-inner p{text-shadow:0 1px 2px rgba(31,7,28,.95),0 2px 10px rgba(31,7,28,.9),0 6px 24px rgba(31,7,28,.7)}

/* The band's ghost button was grouped with the plum .dark sections, so its
   1px #7A3670 hairline and unshadowed label vanished once the photograph
   read natively. Local button chrome only, no field over the image. */
.band .btn--ghost{border-color:rgba(255,255,255,.72);color:var(--white);
  background:rgba(31,7,28,.42);backdrop-filter:blur(6px);
  text-shadow:0 1px 2px rgba(31,7,28,.95),0 2px 10px rgba(31,7,28,.85)}
.band .btn--ghost:hover{border-color:var(--white);color:var(--white);
  background:rgba(31,7,28,.62)}
/* the Sound familiar list, centred against its taller text column */
.problems-col{display:flex;flex-direction:column;justify-content:center}


/* Sound familiar: the checklist centred against its taller text column.
   align-self:stretch guarantees the column has the row's full height for
   justify-content to work against. */
.problems-col{display:flex;flex-direction:column;justify-content:center;align-self:stretch}
/* Teja's portrait, centred against the taller copy column */
.teja-portrait-col{display:flex;flex-direction:column;justify-content:center;align-self:stretch}
/* band paragraph in pure white */
.band-inner p{color:#FFFFFF}


/* ============================================================
   REAL VIDEO IN A MEDIA CONTAINER
   Fills the box and drops the placeholder chrome. The hover lift
   and shine sweep are disabled here because they fight with the
   browser's own video controls.
   ============================================================ */
.media--video{padding:0;border-style:solid}
.media--video video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;background:#000;display:block}
.media--video .tag{position:absolute;left:12px;bottom:12px;z-index:2}
.media--video:hover{transform:none;box-shadow:var(--shadow-1)}
.media--video::before{display:none}

/* hero tagline, between the headline and the pull-quote */
.hero-tagline{margin:18px auto 0;max-width:52ch;font-size:clamp(17px,1.5vw,20px);
  line-height:1.5;color:var(--ink-2)}