/* =========================================================================
   VitalProspects — design system
   Ink + paper, editorial serif display, single confident accent.
   ========================================================================= */
:root{
  --ink:#0e1e30;        /* brand navy (primary text/dark) */
  --ink-2:#aebccb;
  --muted:#8da0b3;
  --line:#243a52;
  --paper:#f6f8fa;      /* cool off-white */
  --paper-2:#eaeff4;
  --white:#ffffff;
  --navy:#0e1e30;       /* deep brand navy */
  --navy-2:#16283c;     /* panel navy */
  --accent:#13b89c;     /* brand teal */
  --accent-ink:#0c7a62;
  --gold:#f4b62c;       /* brand gold */
  --signal:#e8674c;     /* error/required only */
  --maxw:1500px;
  --gap:clamp(1.25rem,4vw,2rem);
  --r:14px;
  --ease:cubic-bezier(.22,1,.36,1);
  --serif:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; /* display */
  --sans:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:#fff}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(1.25rem,5vw,3rem)}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:.7rem 1rem;z-index:200;border-radius:0 0 8px 0}
.skip:focus{left:0}
:focus-visible{outline:2.5px solid var(--accent-ink);outline-offset:3px;border-radius:3px}

/* ---- Type ------------------------------------------------------------- */
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.14;letter-spacing:-.02em;margin:0;padding-bottom:.04em}
h1{font-size:clamp(2.6rem,6.6vw,4.8rem);font-weight:700;line-height:1.08}
h2{font-size:clamp(1.9rem,4.4vw,3.2rem)}
h3{font-size:clamp(1.25rem,2.3vw,1.6rem);line-height:1.2}
p{margin:0 0 1.1em}
.lead{font-size:clamp(1.1rem,1.8vw,1.35rem);line-height:1.55;color:var(--ink-2)}
.eyebrow{font-family:var(--sans);font-size:.74rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-ink);display:inline-flex;align-items:center;gap:.65rem;margin:0 0 1.4rem}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--gold)}
.serif-em{color:var(--accent-ink);font-style:italic}
.accent{color:var(--accent)}
.gold{color:var(--gold)}
.brand-word{font-family:var(--serif);font-weight:700;letter-spacing:-.02em}
.bw-v{color:var(--accent)}

/* ---- Buttons ---------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--sans);font-weight:600;font-size:.97rem;
  padding:.95rem 1.5rem;border-radius:100px;border:1.5px solid transparent;cursor:pointer;transition:transform .35s var(--ease),background .25s,color .25s,border-color .25s;line-height:1}
.btn span[aria-hidden]{transition:transform .35s var(--ease)}
.btn:hover span[aria-hidden]{transform:translateX(4px)}
.btn-dark{background:var(--ink);color:var(--paper)}
.btn-dark:hover{background:var(--accent)}
.btn-outline{border-color:var(--ink);color:var(--ink)}
.btn-outline:hover{background:var(--ink);color:var(--paper)}
.btn-light{background:var(--paper);color:var(--ink)}
.btn-light:hover{background:#fff}
.btn-ghost-light{border-color:rgba(247,246,242,.4);color:var(--paper)}
.btn-ghost-light:hover{border-color:var(--paper);background:rgba(247,246,242,.08)}
.btn-sm{padding:.6rem 1.05rem;font-size:.86rem}

/* ---- Header ----------------------------------------------------------- */
.site-head{position:sticky;top:0;z-index:100;background:rgba(247,246,242,.78);backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid transparent;transition:border-color .3s,background .3s}
.site-head.scrolled{border-color:var(--line);background:rgba(247,246,242,.92)}
.head-inner{display:flex;align-items:center;justify-content:space-between;height:74px}
.brand{display:inline-flex;align-items:center;gap:.6rem;color:var(--ink);font-weight:600}
.brand-mark{color:var(--ink)}
.brand-word{font-family:var(--serif);font-size:1.32rem;letter-spacing:-.02em}
.primary-nav{display:flex;align-items:center;gap:clamp(1rem,2.4vw,2.2rem)}
.primary-nav a{font-size:.96rem;font-weight:500;color:var(--ink-2);position:relative;padding:.2rem 0;transition:color .2s}
.primary-nav a:hover{color:var(--ink)}
.primary-nav a[aria-current]{color:var(--ink)}
.primary-nav a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;background:var(--accent)}
.nav-cta{padding:.62rem 1.15rem;background:var(--ink);color:var(--paper)!important;border-radius:100px;transition:background .25s}
.nav-cta:hover{background:var(--accent)}
.nav-cta::after{display:none!important}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:10px;cursor:pointer}
.nav-toggle span{width:22px;height:2px;background:var(--ink);transition:transform .3s,opacity .3s}

/* ---- Sections --------------------------------------------------------- */
section{position:relative}
.sec{padding-block:clamp(4rem,9vw,8rem)}
.sec-tight{padding-block:clamp(3rem,6vw,5rem)}
.rule{height:1px;background:var(--line);border:0;margin:0}
.idx{font-family:var(--serif);font-size:.9rem;color:var(--accent);font-style:italic}

/* reveal animation — only hide when JS is active, so no-JS users see everything */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none}}

/* ---- Hero ------------------------------------------------------------- */
.hero{padding-block:clamp(3.5rem,8vw,7rem) clamp(3rem,7vw,6rem)}
.hero h1{margin:.3rem 0 0;max-width:22ch}
.hero .lead{max-width:62ch;margin-top:1.8rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.3rem}
.hero-meta{display:flex;flex-wrap:wrap;gap:2.2rem;margin-top:3.4rem;padding-top:2.2rem;border-top:1px solid var(--line)}
.stat .n{font-family:var(--serif);font-size:clamp(1.9rem,3.4vw,2.7rem);line-height:1;display:block}
.stat .l{font-size:.86rem;color:var(--muted);margin-top:.45rem;display:block;max-width:18ch}

/* ---- Marquee ---------------------------------------------------------- */
.marquee{overflow:hidden;border-block:1px solid var(--line);padding-block:1.15rem;background:var(--paper-2)}
.marquee-track{display:flex;gap:3rem;white-space:nowrap;width:max-content;animation:scroll 38s linear infinite}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}}
.marquee-track span{font-family:var(--serif);font-style:italic;font-size:1.1rem;color:var(--muted);display:inline-flex;align-items:center;gap:3rem}
.marquee-track span::after{content:"\2217";color:var(--accent);font-style:normal}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ---- Grids / cards ---------------------------------------------------- */
.grid{display:grid;gap:clamp(1.4rem,3vw,2.4rem)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.split{display:grid;grid-template-columns:0.9fr 1.1fr;gap:clamp(2rem,6vw,5rem);align-items:start}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:clamp(1.5rem,2.6vw,2.1rem);transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s}
.card:hover{transform:translateY(-4px);box-shadow:0 20px 50px -28px rgba(14,30,48,.22);border-color:#c4ced7}
.card .ico{width:42px;height:42px;border-radius:10px;background:var(--paper-2);display:grid;place-items:center;color:var(--accent);margin-bottom:1.3rem}
.card h3{margin-bottom:.55rem}
.card p{color:var(--muted);font-size:.97rem;margin:0}
.card-num{font-family:var(--serif);font-style:italic;color:var(--accent);font-size:1rem;margin-bottom:1rem;display:block}

/* section header block */
.sec-head{max-width:70ch;margin-bottom:clamp(2.4rem,5vw,3.6rem)}
.sec-head h1,.sec-head h2{margin-bottom:.5rem}
.sec-head.center{margin-inline:auto;text-align:center}

/* ---- Dark band -------------------------------------------------------- */
.dark{background:var(--navy);color:var(--paper);background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.022) 0 1px,transparent 1px 22px),repeating-linear-gradient(-45deg,rgba(255,255,255,.022) 0 1px,transparent 1px 22px)}
.dark .eyebrow{color:var(--gold)}
.dark .eyebrow::before{background:var(--gold)}
.dark .lead{color:#aebccb}
.dark .muted,.dark .card p{color:#8da0b3}
.dark .rule{background:#274058}
.dark .card{background:var(--navy-2);border-color:#274058}
.dark .card:hover{border-color:#365070}
.dark .card .ico{background:#203650;color:var(--accent)}

/* ---- Testimonials ----------------------------------------------------- */
.quote{font-family:var(--serif);font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.3;letter-spacing:-.01em}
.quote-meta{margin-top:1.4rem;font-family:var(--sans);font-size:.9rem;color:var(--muted)}
.quote-meta strong{color:var(--ink);font-weight:600;display:block;font-size:.98rem}
.dark .quote-meta strong{color:var(--paper)}

/* ---- Pricing ---------------------------------------------------------- */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;align-items:stretch}
.price-grid.four{grid-template-columns:repeat(4,1fr);gap:1rem}
.tier .badge{align-self:flex-start;display:inline-block;background:var(--gold);color:var(--navy);font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:.32rem .7rem;border-radius:100px;margin-bottom:.7rem}
@media(min-width:901px) and (max-width:1100px){.price-grid.four{grid-template-columns:repeat(2,1fr)}.price-grid.four .tier.feat{transform:none}}
.tier{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:2rem}
.tier.feat{background:var(--navy);color:var(--paper);border:2px solid var(--gold);transform:scale(1.03);box-shadow:0 30px 60px -34px rgba(14,30,48,.55)}
.tier.feat .muted,.tier.feat li{color:#aebccb}
.tier.feat .amt{color:#fff}
.tier .tag{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink)}
.tier.feat .tag{color:var(--gold)}
.tier .amt{font-family:var(--serif);font-weight:700;font-size:2.6rem;margin:.6rem 0 .2rem;line-height:1}
.tier .amt small{font-size:.9rem;color:var(--muted);font-family:var(--sans)}
.tier ul{list-style:none;padding:0;margin:1.4rem 0;display:grid;gap:.7rem;font-size:.95rem}
.tier li{display:flex;gap:.6rem;align-items:flex-start}
.tier li::before{content:"";flex:0 0 18px;height:18px;margin-top:2px;background:var(--accent);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2l-3.5-3.5-1.4 1.4L9 19 20 8l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2l-3.5-3.5-1.4 1.4L9 19 20 8l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat}
.tier .btn{margin-top:auto;justify-content:center}
.addons{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem;margin-top:1.4rem}
.addon{border:1px dashed var(--line);border-radius:var(--r);padding:1.4rem 1.6rem;display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.addon .amt{font-family:var(--serif);font-size:1.5rem}

/* ---- Process steps ---------------------------------------------------- */
.steps{display:grid;gap:0}
.step{display:grid;grid-template-columns:auto 1fr;gap:clamp(1.2rem,3vw,2.6rem);padding-block:2rem;border-top:1px solid var(--line)}
.step:last-child{border-bottom:1px solid var(--line)}
.step .num{font-family:var(--serif);font-size:clamp(2rem,4vw,3rem);color:var(--accent);font-style:italic;line-height:1}
.step h3{margin-bottom:.5rem}
.step p{color:var(--muted);margin:0;max-width:60ch}

/* ---- CTA band --------------------------------------------------------- */
.cta-band{text-align:center;padding-block:clamp(4rem,8vw,7rem)}
.cta-band h2{max-width:18ch;margin-inline:auto}
.cta-band .lead{max-width:48ch;margin:1.3rem auto 2.2rem}

/* ---- Forms ------------------------------------------------------------ */
.form{display:grid;gap:1.2rem}
.field{display:flex;flex-direction:column;gap:.45rem}
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
label{font-size:.85rem;font-weight:600;color:var(--ink-2)}
label .req{color:var(--signal)}
input,select,textarea{font-family:var(--sans);font-size:1rem;padding:.85rem 1rem;border:1.5px solid var(--line);border-radius:10px;background:var(--white);color:var(--ink);transition:border-color .2s,box-shadow .2s;width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(47,75,255,.12)}
textarea{resize:vertical;min-height:130px}
.form .btn{justify-self:start;margin-top:.4rem}
.form-note{font-size:.84rem;color:var(--muted)}
.form-status{padding:1rem 1.2rem;border-radius:10px;font-size:.95rem;display:none}
.form-status.ok{display:block;background:#e7f0e8;color:#1e5631;border:1px solid #bcd9c2}
.form-status.err{display:block;background:#fdecea;color:#a23227;border:1px solid #f3c7c1}

/* ---- Roles (careers) -------------------------------------------------- */
.role{border:1px solid var(--line);border-radius:var(--r);padding:clamp(1.5rem,2.6vw,2rem);background:var(--white);transition:border-color .3s,transform .4s var(--ease)}
.role:hover{border-color:#c4ced7;transform:translateY(-3px)}
.role-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem 1rem;align-items:baseline}
.role h3{margin:0}
.tags{display:flex;flex-wrap:wrap;gap:.5rem;margin:.9rem 0 1rem}
.pill{font-size:.76rem;font-weight:600;letter-spacing:.04em;background:var(--paper-2);color:var(--ink-2);padding:.3rem .7rem;border-radius:100px}
.role p{color:var(--muted);font-size:.97rem;margin:0 0 1.1rem}

/* ---- Work / case studies --------------------------------------------- */
.case{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3rem);align-items:center;padding-block:clamp(2.5rem,5vw,4rem);border-top:1px solid var(--line)}
.case:nth-child(even) .case-media{order:2}
.case-media{aspect-ratio:4/3;border-radius:var(--r);background:linear-gradient(135deg,var(--paper-2),#dbe2e9);border:1px solid var(--line);display:grid;place-items:center;color:var(--muted);overflow:hidden;position:relative}
.case-media .ph{font-family:var(--serif);font-style:italic;font-size:1.05rem;padding:1.5rem;text-align:center}
.case-kpis{display:flex;gap:2rem;margin-top:1.4rem;flex-wrap:wrap}
.case-kpis .n{font-family:var(--serif);font-size:1.9rem;display:block;line-height:1}
.case-kpis .l{font-size:.82rem;color:var(--muted)}

/* ---- Legal / prose ---------------------------------------------------- */
.prose{max-width:74ch}
.prose h2{font-size:clamp(1.5rem,2.6vw,2rem);margin:2.6rem 0 .9rem}
.prose h3{margin:1.8rem 0 .6rem}
.prose p,.prose li{color:var(--ink-2);font-size:1.02rem}
.prose ul{padding-left:1.2rem;display:grid;gap:.5rem;margin:0 0 1.2rem}
.prose a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:2px}
.legal-meta{color:var(--muted);font-size:.9rem;margin-bottom:2rem}

/* ---- Footer ----------------------------------------------------------- */
.site-foot{background:var(--navy);color:var(--paper);padding-block:clamp(3.5rem,7vw,5.5rem) 2rem;margin-top:0;background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.02) 0 1px,transparent 1px 22px),repeating-linear-gradient(-45deg,rgba(255,255,255,.02) 0 1px,transparent 1px 22px)}
.site-foot .brand,.site-foot .brand-word{color:var(--paper)}
.site-foot .brand-mark{color:var(--paper)}
.foot-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:clamp(1.8rem,4vw,3rem);padding-bottom:3rem;border-bottom:1px solid #2b2b30}
.foot-tag{color:#a6a6ad;font-size:.95rem;max-width:34ch;margin:1.1rem 0 1.6rem}
.foot-col h3{font-family:var(--sans);font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#94a4b4;margin:0 0 1.1rem}
.foot-col a{display:block;color:#c9c8c2;font-size:.96rem;margin-bottom:.65rem;transition:color .2s}
.foot-col a:hover{color:var(--paper)}
.foot-loc{color:#94a4b4;font-size:.86rem;margin:.4rem 0 1.1rem}
.social{display:flex;gap:.7rem}
.social a{width:38px;height:38px;border-radius:50%;border:1px solid #2b2b30;display:grid;place-items:center;color:#c9c8c2;margin:0;transition:border-color .25s,color .25s,background .25s}
.social a:hover{border-color:var(--paper);color:var(--ink);background:var(--paper)}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem;padding-top:1.6rem;font-size:.84rem;color:#94a4b4}
.foot-bottom p{margin:0}

/* ---- Cookie banner ---------------------------------------------------- */
.cookie{position:fixed;left:1rem;right:1rem;bottom:1rem;max-width:560px;margin-inline:auto;background:var(--ink);color:var(--paper);border-radius:var(--r);padding:1.2rem 1.3rem;display:flex;flex-wrap:wrap;gap:.9rem 1.2rem;align-items:center;justify-content:space-between;z-index:150;box-shadow:0 24px 60px -20px rgba(0,0,0,.6)}
.cookie p{margin:0;font-size:.88rem;color:#c9c8c2;flex:1 1 260px}
.cookie a{color:var(--paper);text-decoration:underline}
.cookie-btns{display:flex;gap:.6rem}

/* ---- Responsive ------------------------------------------------------- */
@media (max-width:900px){
  .split,.g-3,.g-2,.price-grid,.case,.foot-top{grid-template-columns:1fr}
  .case:nth-child(even) .case-media{order:0}
  .tier.feat{transform:none}
  .foot-top{gap:2.4rem}
  .addons{grid-template-columns:1fr}
}
@media (max-width:720px){
  .nav-toggle{display:flex}
  .primary-nav{position:fixed;inset:74px 0 auto 0;background:var(--paper);flex-direction:column;align-items:stretch;gap:0;padding:1rem clamp(1.25rem,5vw,3rem) 2rem;border-bottom:1px solid var(--line);transform:translateY(-120%);transition:transform .4s var(--ease);box-shadow:0 30px 60px -30px rgba(0,0,0,.25)}
  .primary-nav.open{transform:none}
  .primary-nav a{padding:.95rem 0;border-bottom:1px solid var(--line);font-size:1.05rem}
  .nav-cta{margin-top:1rem;text-align:center;border-bottom:0!important}
  .nav-cta::after{display:none}
  .row-2{grid-template-columns:1fr}
  .hero-meta{gap:1.6rem}
}

/* ============================================================
   Animated hero + scroll effects
   ============================================================ */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--accent),var(--gold));z-index:300;transition:width .08s linear}
.hero-x{position:relative;overflow:hidden;display:flex;align-items:center;padding-block:clamp(3.5rem,8vw,6.5rem) clamp(4rem,8vw,6rem);min-height:min(88vh,840px)}
.hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.6}
.hero-glow{position:absolute;z-index:0;width:62vw;height:62vw;max-width:780px;max-height:780px;right:-12%;top:-18%;background:radial-gradient(circle,rgba(19,184,156,.22),transparent 62%);pointer-events:none}
.hero-glow.two{left:-14%;right:auto;top:auto;bottom:-22%;background:radial-gradient(circle,rgba(244,182,44,.14),transparent 62%)}
.hero-x-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;width:100%}
.hero-x-copy{max-width:39rem}
.hero-x h1{margin:.4rem 0 0;font-size:clamp(2.7rem,6.4vw,4.9rem)}
.hero-x .lead{margin-top:1.5rem;max-width:44ch;color:#bccad8}
.hero-actions{margin-top:2.1rem}
.hero-trust{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:2.3rem;padding-top:1.8rem;border-top:1px solid #274058}
.hero-trust span{font-size:.8rem;font-weight:600;color:#aebccb;background:rgba(255,255,255,.05);border:1px solid #274058;padding:.42rem .85rem;border-radius:100px}
.hero-trust span::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-right:.5rem;vertical-align:middle}
.hero-x-copy>*{opacity:0;transform:translateY(18px);animation:heroIn .9s var(--ease) forwards}
.hero-x-copy>*:nth-child(1){animation-delay:.05s}.hero-x-copy>*:nth-child(2){animation-delay:.16s}
.hero-x-copy>*:nth-child(3){animation-delay:.27s}.hero-x-copy>*:nth-child(4){animation-delay:.38s}
.hero-x-copy>*:nth-child(5){animation-delay:.49s}
@keyframes heroIn{to{opacity:1;transform:none}}

.hero-x-visual{position:relative;will-change:transform}
.dash-card{position:relative;background:rgba(20,36,55,.74);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid #2d4660;border-radius:18px;padding:1.4rem 1.6rem 1.7rem;box-shadow:0 40px 80px -42px rgba(0,0,0,.65)}
.dash-top{display:flex;align-items:center;gap:.45rem;padding-bottom:1rem;border-bottom:1px solid #243a52;margin-bottom:1.1rem}
.dash-dot{width:10px;height:10px;border-radius:50%}
.dash-dot:nth-child(1){background:#e8674c}.dash-dot:nth-child(2){background:var(--gold)}.dash-dot:nth-child(3){background:var(--accent)}
.dash-title{margin-left:.45rem;font-size:.8rem;color:#8da0b3}
.dash-label{font-size:.82rem;color:#8da0b3;margin:0}
.dash-count{font-family:var(--serif);font-weight:700;font-size:clamp(2.4rem,4.4vw,3.3rem);line-height:1;margin:.25rem 0 .35rem;color:#fff}
.dash-trend{font-size:.85rem;color:#8da0b3;margin:0}
.dash-trend .up{color:var(--accent);font-weight:600}
.dash-bars{display:flex;align-items:flex-end;gap:.5rem;height:96px;margin-top:1.3rem}
.dash-bars span{flex:1;height:var(--h);background:linear-gradient(180deg,var(--accent),#0e8f79);border-radius:5px 5px 0 0;transform:scaleY(0);transform-origin:bottom;animation:barGrow .85s var(--ease) forwards}
.dash-bars span:last-child{background:linear-gradient(180deg,var(--gold),#cf9a1f)}
.dash-bars span:nth-child(1){animation-delay:.45s}.dash-bars span:nth-child(2){animation-delay:.52s}
.dash-bars span:nth-child(3){animation-delay:.59s}.dash-bars span:nth-child(4){animation-delay:.66s}
.dash-bars span:nth-child(5){animation-delay:.73s}.dash-bars span:nth-child(6){animation-delay:.80s}
.dash-bars span:nth-child(7){animation-delay:.87s}
@keyframes barGrow{to{transform:scaleY(1)}}
.float-chip{position:absolute;background:#fff;color:var(--navy);font-size:.8rem;font-weight:600;padding:.55rem .85rem;border-radius:10px;box-shadow:0 18px 40px -18px rgba(0,0,0,.55);animation:floaty 4.5s ease-in-out infinite;white-space:nowrap}
.float-chip::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-right:.45rem;vertical-align:middle}
.chip-1{top:-16px;right:6%}
.chip-2{bottom:-18px;left:-5%;animation-delay:1.6s}
.chip-2::before{background:var(--gold)}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.scroll-cue{position:absolute;left:50%;bottom:1.3rem;transform:translateX(-50%);z-index:3;width:25px;height:40px;border:2px solid rgba(255,255,255,.35);border-radius:13px;display:grid;justify-items:center;padding-top:6px}
.scroll-cue span{width:4px;height:8px;border-radius:2px;background:#fff;animation:cue 1.6s infinite}
@keyframes cue{0%{opacity:0;transform:translateY(-4px)}40%{opacity:1}100%{opacity:0;transform:translateY(11px)}}
@media (max-width:900px){
  .hero-x-inner{grid-template-columns:1fr}
  .hero-x-visual{margin:.5rem auto 0;max-width:340px;width:100%}
  .hero-x-visual[data-parallax]{transform:none!important}
  .scroll-cue{display:none}
  .chip-1{right:2%}.chip-2{left:2%}
  .dash-count{font-size:2.4rem}
}
@media (prefers-reduced-motion:reduce){
  .hero-x-copy>*,.dash-bars span{animation:none;opacity:1;transform:none}
  .scroll-cue span,.float-chip{animation:none}
  .hero-canvas{display:none}
}

/* ---- Accessibility fixes (WCAG AA) ---- */
.case-kpis .n.accent{color:var(--accent-ink)}
.tier li::before{background:var(--accent-ink)}
.tier.feat li::before{background:var(--accent)}
.social a{width:44px;height:44px}
.nav-toggle{min-width:44px;min-height:44px;align-items:center;justify-content:center}
.primary-nav a[aria-current]::after{background:var(--accent-ink)}

/* =========================================================================
   DARK NAVY THEME — navy primary, white text, gold+teal accents
   (appended override; wins via cascade)
   ========================================================================= */
body{background:var(--navy);color:#eef2f6}
h1,h2,h3,h4{color:#fff}
.lead{color:#c0cdd9}
.serif-em{color:var(--accent)}
.eyebrow{color:var(--gold)} .eyebrow::before{background:var(--gold)}
:focus-visible{outline-color:var(--accent)}
::selection{background:var(--gold);color:#241a00}

/* header */
.site-head{background:rgba(14,30,48,.82)}
.site-head.scrolled{background:rgba(14,30,48,.95);border-bottom-color:#243a52}
.brand,.brand-word,.brand-mark{color:#fff}
.primary-nav a{color:#b9c6d4}
.primary-nav a:hover,.primary-nav a[aria-current]{color:#fff}
.primary-nav a[aria-current]::after{background:var(--gold)}
.nav-toggle span{background:#fff}

/* alternating bands + footer for rhythm */
.dark{background:#0a1626}
.site-foot{background:#0a1626}
.marquee{background:#0a1626;border-color:#243a52}
.marquee-track span{color:#8da0b3}

/* cards / panels */
.card{background:#16283c;border-color:#243a52}
.card:hover{border-color:#33506e;box-shadow:0 26px 56px -30px rgba(0,0,0,.65)}
.card p,.card .muted{color:#9fb0c0}
.card .ico{background:#1f3350;color:var(--accent)}
.card h3{color:#fff}

/* buttons for dark bg */
.btn-dark{background:var(--accent);color:#04221c}
.btn-dark:hover{background:var(--gold);color:#3a2a00}
.btn-outline{border-color:rgba(255,255,255,.34);color:#eef2f6}
.btn-outline:hover{background:#eef2f6;color:var(--navy)}
.nav-cta{background:var(--gold)!important;color:#3a2a00!important;white-space:nowrap}
.nav-cta:hover{background:var(--accent)!important;color:#04221c!important}

/* forms */
input,select,textarea{background:#16283c;color:#eef2f6;border-color:#2b4258}
input::placeholder,textarea::placeholder{color:#7c8ea0}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(19,184,156,.18)}
label{color:#c0cdd9}
.form-note{color:#8da0b3}
select option{color:#0e1e30}

/* pricing */
.tier{background:#16283c;border-color:#243a52}
.tier .muted{color:#9fb0c0}
.tier.feat{background:#0a1626}
.tier li::before{background:var(--accent)}
.addon{border-color:#2b4258}

/* testimonials */
.quote{color:#fff}
.quote-meta strong{color:#fff}

/* work case studies */
.case{border-color:#243a52}
.case-media{background:linear-gradient(135deg,#16283c,#0e1e30);border-color:#243a52;color:#8da0b3}

/* process steps */
.step{border-color:#243a52}
.step p{color:#9fb0c0}

/* legal / prose */
.prose p,.prose li{color:#c0cdd9}
.prose a{color:var(--accent)}
.legal-meta{color:#8da0b3}

/* misc */
.rule{background:#243a52}
.foot-bottom{color:#7c8ea0}
.hero-meta{border-color:#243a52}
.stat .l{color:#9fb0c0}

/* =========================================================================
   Geometric accents + texture (engagement / less negative space)
   ========================================================================= */
body{
  background-color:var(--navy);
  background-image:
    repeating-linear-gradient(45deg,rgba(255,255,255,.015) 0 1px,transparent 1px 26px),
    repeating-linear-gradient(-45deg,rgba(255,255,255,.015) 0 1px,transparent 1px 26px);
}
/* soft accent glows behind key bands */
.dark,.cta-band{position:relative;isolation:isolate}
.dark::before,.cta-band::before{content:"";position:absolute;z-index:-1;width:46vw;height:46vw;max-width:640px;max-height:640px;
  right:-8%;top:-14%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(19,184,156,.16),transparent 62%)}
.cta-band::after{content:"";position:absolute;z-index:-1;width:40vw;height:40vw;max-width:560px;max-height:560px;
  left:-10%;bottom:-18%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(244,182,44,.12),transparent 62%)}

/* thin accent rule under section eyebrows for structure */
.sec-head .eyebrow{position:relative}

/* decorative corner ticks on section heads */
.sec-head{position:relative}



/* floating accent shapes in section gaps */
.accent-dots{position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:radial-gradient(rgba(19,184,156,.25) 1.4px,transparent 1.4px);
  background-size:26px 26px;-webkit-mask:radial-gradient(60% 50% at 80% 30%,#000,transparent);
  mask:radial-gradient(60% 50% at 80% 30%,#000,transparent)}

/* card top accent line on hover for life */
.card{position:relative;overflow:hidden}
.card::before{content:"";position:absolute;left:0;top:0;height:3px;width:100%;
  background:linear-gradient(90deg,var(--accent),var(--gold));transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease)}
.card:hover::before{transform:scaleX(1)}

/* gentle float on card icons */
@media (prefers-reduced-motion:no-preference){
  .card .ico{animation:icoFloat 5s ease-in-out infinite}
  .card:nth-child(2n) .ico{animation-delay:1.2s}
  .card:nth-child(3n) .ico{animation-delay:2.1s}
}
@keyframes icoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

/* big faint bar-chart motif echoing the logo, bottom-right of dark bands */
.dark .wrap{position:relative}

/* nav CTA: never shrink/clip; pill fits full label */
.nav-cta{flex:0 0 auto;display:inline-flex;align-items:center;white-space:nowrap}
.primary-nav{flex-wrap:nowrap}

/* nav CTA padding (beats .primary-nav a specificity) */
.primary-nav a.nav-cta{padding:.62rem 1.3rem;flex:0 0 auto}

/* =========================================================================
   Responsive fixes — contain decorative overflow + tablet/mobile grids
   ========================================================================= */
/* 1) keep accent glows from causing horizontal scroll */
.dark,.cta-band{overflow:hidden}

/* 2) pricing 4-tier grid must collapse below desktop */
@media (max-width:1100px){
  .price-grid.four{grid-template-columns:repeat(2,1fr)}
  .price-grid.four .tier.feat{transform:none}
}
@media (max-width:680px){
  .price-grid.four{grid-template-columns:1fr}
}

/* 3) tablet: use 2 columns instead of 1 for card grids + footer */
@media (min-width:640px) and (max-width:900px){
  .g-3,.g-2{grid-template-columns:repeat(2,1fr)}
  .foot-top{grid-template-columns:repeat(2,1fr);gap:2rem 2.4rem}
}

/* 4) small-phone tightening */
@media (max-width:380px){
  .wrap{padding-inline:1.1rem}
  h1{font-size:clamp(2.1rem,9vw,2.7rem)}
  .btn{padding:.85rem 1.2rem;font-size:.92rem}
  .hero-actions{gap:.6rem}
}

/* =========================================================================
   Visibility fixes on dark theme (roles, pills, cookie buttons, selects)
   ========================================================================= */
.role{background:#16283c;border-color:#243a52}
.role:hover{border-color:#33506e}
.role h3,.role .role-head h3{color:#fff}
.role p{color:#9fb0c0}
.role-head span{color:var(--gold)!important}
.pill{background:#1f3350;color:#c8d3df}
/* cookie banner buttons — clearly visible, not hover-only */
.cookie .btn-ghost-light{border-color:rgba(255,255,255,.6);color:#fff;background:rgba(255,255,255,.06)}
.cookie .btn-ghost-light:hover{background:rgba(255,255,255,.16);border-color:#fff}
/* form controls: visible field + custom dropdown caret */
input,select,textarea{background:#16283c;color:#eef2f6;border:1.5px solid #34506e}
select{-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aebccb' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;background-size:18px;padding-right:2.6rem}
select option{color:#0e1e30;background:#fff}
input::placeholder,textarea::placeholder{color:#8da0b3}

/* =========================================================================
   Geometric accent line motifs (gold + teal) for hero negative space
   ========================================================================= */
.dt{stroke:var(--accent)} .dg{stroke:var(--gold)}
/* inner-page heros: place in the empty right side, behind text */
.hero{position:relative;overflow:hidden}
.hero>:not(.hero-deco){position:relative;z-index:1}
.hero-deco{position:absolute;z-index:0;right:-1.5%;top:5%;width:min(46%,460px);opacity:.62;pointer-events:none}
@media (max-width:900px){.hero-deco{opacity:.3;width:64%;right:-10%;top:auto;bottom:1%}}
@media (max-width:560px){.hero-deco{display:none}}
/* landing transformation hero: subtle corner accents, behind the browser */
.rh-browser{position:relative;z-index:3}
.rh-stage{z-index:5}
.rh-deco{position:absolute;z-index:1;opacity:.5;pointer-events:none;width:min(24%,280px)}
.rh-deco.tl{top:13%;left:-2%}
.rh-deco.br{bottom:5%;right:-2%}
@media (max-width:820px){.rh-deco{width:34%;opacity:.4}}
@media (max-width:600px){.rh-deco{display:none}}
@media (prefers-reduced-motion:no-preference){
  .hero-deco{animation:decoFloat 9s ease-in-out infinite}
  .rh-deco.tl{animation:decoFloat 11s ease-in-out infinite}
  .rh-deco.br{animation:decoFloat 13s ease-in-out infinite .5s}
}
@keyframes decoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* =========================================================================
   Full-page side rails — geometric line motifs down both edges (per page)
   ========================================================================= */
main{position:relative}
.page-rails{position:fixed;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.page-rails .rail-l,.page-rails .rail-r{position:absolute;top:0;bottom:0;
  width:clamp(72px,calc((100vw - 1130px)/2 + 96px),320px);
  background-repeat:repeat-y;opacity:.85}
.page-rails .rail-l{left:0;background-position:top left}
.page-rails .rail-r{right:0;background-position:top right}
@media (max-width:900px){.page-rails .rail-l,.page-rails .rail-r{width:56px;opacity:.6}}
@media (max-width:640px){.page-rails{display:none}}
@media (prefers-reduced-motion:no-preference){
  .page-rails .rail-l{animation:railDrift 22s ease-in-out infinite}
  .page-rails .rail-r{animation:railDrift 28s ease-in-out infinite reverse}
}
@keyframes railDrift{0%,100%{background-position-y:0}50%{background-position-y:-26px}}

/* ensure the hidden attribute actually hides the cookie banner (overrides .cookie display:flex) */
.cookie[hidden]{display:none}

/* mobile hamburger menu: match navy header, white copy */
@media (max-width:720px){
  .primary-nav{background:var(--navy);border-bottom-color:#243a52}
  .primary-nav a{color:#eef2f6;border-bottom-color:#243a52}
  .primary-nav a:hover,.primary-nav a[aria-current]{color:#fff}
}