/* nicspire revamp — shared system (extracted from Revamp 1a v4) */
:root{--font-primary:'Plus Jakarta Sans','Trebuchet MS','Gill Sans MT',sans-serif;
  --nav-h:118px;
  /* single accent: petrol — overrides the bright-cyan tokens everywhere */
  --color-cyan:#0A6C7A;
  --color-cyan-hover:#085764;
  --color-cyan-dim:rgba(10,108,122,.10);
  --color-cyan-border:rgba(10,108,122,.30);
  --color-navy-border:rgba(255,255,255,.14);
  --color-navy-border-bright:rgba(255,255,255,.30);
  --sh:0 20px 46px rgba(10,108,122,.30),0 4px 12px rgba(13,33,55,.08);
  --sh-hi:0 26px 60px rgba(10,108,122,.44),0 6px 16px rgba(13,33,55,.10)}
.card{background:#fff;border:1px solid var(--color-border-light);border-radius:var(--radius-lg);box-shadow:var(--sh)}
*{margin:0;padding:0;box-sizing:border-box}
body{background:#fff;font-family:var(--font-primary);color:var(--color-text-primary);-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--max-width);margin:0 auto;padding:0 var(--page-gutter)}
a{color:var(--color-cyan);text-decoration:none}a:hover{color:var(--color-cyan-hover)}
h1,h2,h3,h4{letter-spacing:-.03em}
.eyebrow{font-size:11px;font-weight:500;letter-spacing:.2em}
.sec .eyebrow,.ctaband .eyebrow{color:var(--color-text-primary)}
/* ── buttons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:14px;font-weight:700;font-family:inherit;border:0;cursor:pointer;padding:13px 26px;border-radius:var(--radius-pill);white-space:nowrap}
.btn-primary{background:var(--color-cyan);color:#fff}.btn-primary:hover{background:var(--color-cyan-hover);color:#fff}
.btn-ghost-dark{border:1px solid var(--color-border-light);color:var(--color-text-primary);background:var(--color-bg-light)}.btn-ghost-dark:hover{border-color:var(--color-cyan);color:var(--color-text-primary);background:#fff}
.btn-ghost{border:1px solid var(--color-border-light);color:var(--color-text-primary);background:transparent}.btn-ghost:hover{border-color:var(--color-cyan);color:var(--color-text-primary)}
.btn-lg{padding:16px 32px;font-size:15px}.btn-sm{padding:10px 20px;font-size:13px}
.btn-flat{display:block;padding:13px 18px;text-align:center;background:var(--color-text-primary);color:#fff;font-size:14px;font-weight:700;border-radius:var(--radius-pill);white-space:nowrap}
.btn-flat:hover{background:var(--color-steel);color:#fff}
.free .btn-flat{background:var(--color-cyan);color:#fff}
.free .btn-flat:hover{background:var(--color-cyan-hover);color:#fff}
/* ── nav ── */
.nav{background:#fff;border-bottom:1px solid var(--color-border-light);position:sticky;top:0;z-index:10}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:20px;padding-bottom:20px}
.brand{display:flex;align-items:center;gap:9px;font-size:19px;font-weight:800;color:var(--color-text-primary)}
.brand .tld{font-weight:200}
.brand .logo{width:26px;height:26px;display:block}
.nav-links{display:flex;gap:30px}
.nav-links a{font-size:14px;font-weight:700;color:var(--color-text-primary);white-space:nowrap}
.nav-links a:hover{color:var(--color-cyan-hover)}
.nav-actions{display:flex;align-items:center;gap:12px}
.lang{background:none;border:0;font:inherit;font-size:13px;font-weight:700;color:var(--color-text-muted);cursor:pointer;padding:6px}
.lang:hover{color:var(--color-cyan-hover)}
.langtoggle{display:inline-flex;border:1px solid var(--color-border-light);border-radius:var(--radius-pill);overflow:hidden}
.lt-btn{padding:7px 14px;font-family:inherit;font-size:12px;font-weight:700;letter-spacing:.04em;border:0;cursor:pointer;background:#fff;color:var(--color-text-primary);transition:background .15s,color .15s}
.lt-btn:hover{background:var(--color-bg-light)}
.lt-btn.is-active{background:var(--color-cyan);color:#fff}
.nav-burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.nav-burger span{width:22px;height:2px;background:var(--color-text-primary);border-radius:2px}
.mobile-menu{display:none}
.mobile-menu.open{display:flex;flex-direction:column;gap:4px;padding:12px 0 20px;border-top:1px solid var(--color-border-light)}
.mobile-menu a{padding:12px 4px;font-size:16px;font-weight:700;color:var(--color-text-primary)}
.mobile-menu a:hover{color:var(--color-cyan-hover)}
.mobile-menu .btn{margin-top:10px;align-self:flex-start}
/* ── hero band ── */
.hero{position:relative;overflow:hidden;background:var(--color-midnight);padding:88px 0 84px}
.hero .art{position:absolute;inset:0;background:url("assets/img/filament-crest.png") no-repeat calc(50% + 151px) 50%/cover;-webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 26%,#000 48%);mask-image:linear-gradient(90deg,transparent 0,transparent 26%,#000 48%)}
.hero .veil{position:absolute;inset:0;background:linear-gradient(90deg,#0D2137 0%,rgba(13,33,55,.88) 26%,rgba(13,33,55,.34) 52%,rgba(13,33,55,0) 74%)}
.hero .halo{position:absolute;left:-10%;top:-34%;width:640px;height:640px;background:radial-gradient(circle,rgba(10,108,122,.42),transparent 64%);pointer-events:none}
.hero .wrap{position:relative;z-index:1}
/* ── curtain reveal ──
   Must sit AFTER the .hero band rule above (equal specificity) and BEFORE the
   responsive blocks below, so mobile overrides still win.
   The hero pins at the nav's height, not 0 — pinning at 0 would force it to
   scroll its own 118px flow offset first, which is movement. Pinned at
   --nav-h its sticky threshold is met from the very first pixel, so art, text
   and buttons never shift; only the panel after it moves, scrolling up OVER
   the hero on a higher z-index.
   Any block that unwinds this MUST also clear `top`. */
.hero{--hero-h:100vh;position:sticky;top:min(var(--nav-h),calc(100vh - var(--hero-h)));z-index:0;min-height:calc(100vh - var(--nav-h));padding:88px 0 84px}
.curtain-panel{position:relative;z-index:1;background:#fff;box-shadow:0 -40px 80px rgba(13,33,55,.45)}
@media(prefers-reduced-motion:reduce){
  .hero{position:relative;top:auto;min-height:0}
  .curtain-panel{box-shadow:none}
}
.eyebrow-row{display:flex;align-items:center;gap:12px;margin-bottom:26px}
.eyebrow-row .rule{width:34px;height:1px;background:var(--color-cyan)}
.hero h1{font-size:clamp(40px,5vw,62px);line-height:1.06;font-weight:800;color:#fff;max-width:16ch}
.hero h1 .accent{color:var(--color-cyan)}
.plist{display:flex;flex-direction:column;gap:16px;margin-top:42px}
.plist div{display:grid;grid-template-columns:34px 1fr;align-items:baseline;font-size:17px;line-height:1.55;color:#fff}
.plist b{color:var(--color-cyan);font-weight:400;font-size:26px;line-height:1}
.hero-cta{margin-top:44px;display:flex;flex-wrap:wrap;gap:14px}
/* ── statement ── */
.statement{padding:84px 0 76px;text-align:center}
.statement .big{font-size:clamp(32px,3.9vw,48px);font-weight:800;line-height:1.16;color:var(--color-text-primary)}
.statement .big .accent{color:var(--color-cyan)}
.statement .big em{font-style:normal;font-weight:inherit;color:inherit}
.statement .line{width:96px;height:2px;background:linear-gradient(90deg,var(--color-cyan),var(--color-champagne));margin:30px auto 0}
.statement p{margin-top:28px;font-size:17px;line-height:1.8;color:var(--color-text-secondary);max-width:60ch;margin-left:auto;margin-right:auto}
/* ── section frame ── */
.sec{position:relative;padding:80px 0;border-top:1px solid var(--color-border-light)}
.sec.tint{background:var(--color-bg-light)}
/* seam marker sitting on the hairline join */
.sec::before{content:"";position:absolute;top:-2px;left:50%;transform:translateX(-50%);width:80px;height:3px;background:var(--color-cyan)}
.sec.no-seam::before{display:none}
.sec-head{margin-bottom:52px;display:flex;align-items:flex-start;justify-content:space-between;gap:48px}
.sec-head .idx{flex-shrink:0;font-size:clamp(40px,5vw,68px);font-weight:800;line-height:.9;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px var(--color-border-light)}
.sec.tint .sec-head .idx{-webkit-text-stroke-color:#CBD9E7}
/* filament seam strip — full-bleed dark divider between light sections */
.filmstrip{height:118px;background:var(--color-midnight) url("assets/img/filament-wide.png") no-repeat center/cover;position:relative}
.filmstrip::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0D2137 0%,rgba(13,33,55,.04) 30%,rgba(13,33,55,.04) 70%,#0D2137 100%)}
.sec-head h2{font-size:clamp(30px,3.5vw,44px);font-weight:800;line-height:1.12;color:var(--color-text-primary)}
.sec-head h2 .accent{color:var(--color-cyan)}
/* ── diagnostic steps: vertical marks + copy ── */
.vlist{position:relative;display:flex;flex-direction:column;gap:34px;margin:0;
  --iconcol:max(192px,calc((100% - 820px)/2 + 192px))}
.vrow{position:relative;display:grid;grid-template-columns:var(--iconcol) 1fr;align-items:center;gap:0}
.vdiscwrap{position:relative;display:flex;justify-content:center}
.vdisc{position:relative;width:148px;height:148px;border-radius:50%;background:#fff;border:1px solid var(--color-cyan-border);
  box-shadow:var(--sh);display:grid;place-items:center;transition:transform .2s,box-shadow .2s,border-color .2s}
.vdisc svg{width:74px;height:74px}
.vnum{position:absolute;top:2px;right:2px;width:38px;height:38px;border-radius:50%;background:var(--color-cyan);color:#fff;
  display:grid;place-items:center;font-size:14px;font-weight:800;box-shadow:0 8px 18px rgba(10,108,122,.34);z-index:2}
.vrow:hover .vdisc{transform:translateY(-5px);box-shadow:var(--sh-hi);border-color:var(--color-cyan)}
.vrow::after{content:"";position:absolute;left:calc(var(--iconcol)/2);top:calc(50% + 82px);height:calc(100% - 148px + 34px);width:2px;
  transform:translateX(-50%);background:repeating-linear-gradient(180deg,var(--color-cyan-border) 0 6px,transparent 6px 13px)}
.vrow:last-child::after{display:none}
.vcopy h3{font-size:21px;font-weight:700;color:var(--color-text-primary);margin-bottom:11px}
.vcopy p{font-size:14.5px;line-height:1.8;color:var(--color-text-secondary)}
svg .ln{fill:none;stroke:var(--color-cyan);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
svg .lm{fill:none;stroke:var(--color-cyan);stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;opacity:.8}
svg .lf{fill:none;stroke:var(--color-cyan);stroke-width:.9;stroke-linecap:round;stroke-linejoin:round;opacity:.55}
svg .dt{fill:var(--color-cyan)}
svg .dm{fill:var(--color-cyan);opacity:.8}
svg .df{fill:var(--color-cyan);opacity:.45}
/* scroll reveal: marks fly in from the left, copy fades up just behind them */
.vlist.reveal .vdiscwrap{opacity:0;transform:translateX(-90px);
  transition:opacity .6s cubic-bezier(.22,.7,.3,1),transform .7s cubic-bezier(.22,.7,.3,1)}
.vlist.reveal .vcopy{opacity:0;transform:translateY(14px);
  transition:opacity .55s ease .16s,transform .55s cubic-bezier(.22,.7,.3,1) .16s}
.vlist.reveal .vrow::after{opacity:0;transition:opacity .5s ease .3s}
.vlist.reveal .vrow.is-in .vdiscwrap,.vlist.reveal .vrow.is-in .vcopy{opacity:1;transform:none}
.vlist.reveal .vrow.is-in::after{opacity:1}
@media(prefers-reduced-motion:reduce){
  .vlist.reveal .vdiscwrap,.vlist.reveal .vcopy,.vlist.reveal .vrow::after{opacity:1;transform:none;transition:none}
}
/* generic scroll reveal — gaps columns, section heads, price cards */
.rv{opacity:0;transform:translateY(18px);
  transition:opacity .6s ease,transform .65s cubic-bezier(.22,.7,.3,1)}
.rv.is-in{opacity:1;transform:none}
.rv-l{opacity:0;transform:translateX(-70px);
  transition:opacity .6s cubic-bezier(.22,.7,.3,1),transform .7s cubic-bezier(.22,.7,.3,1)}
.cols > .rv-l{transform:translateX(-96px);
  transition:opacity 1.05s cubic-bezier(.22,.7,.3,1),transform 1.15s cubic-bezier(.22,.7,.3,1)}
.rv-l.is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .rv,.rv-l{opacity:1;transform:none;transition:none}
}
/* reverse curtain — the navy statement pulls up OVER the pricing section.
   Same mechanism as the hero curtain, inverted: the pricing section pins and
   the panel that follows (quote → CTA → FAQ → footer) rides over it.
   The pin offset is min(nav height, viewport − section height): a short section
   pins under the nav, a section taller than the viewport pins bottom-aligned,
   so its last row is always scrolled through before the curtain arrives.
   --pin-h is measured in script; the fallback keeps it valid before that. */
.curtain2{position:relative;z-index:1;background:#fff}
@media (min-width:901px) and (prefers-reduced-motion:no-preference){
  .pin-pricing{--pin-h:100vh;position:sticky;top:min(var(--nav-h),calc(100vh - var(--pin-h)));z-index:0;
    padding-bottom:200px}
  .curtain2{box-shadow:0 -40px 80px rgba(13,33,55,.45)}
}
.center-link{margin-top:40px;text-align:center}
/* ── gap columns ── */
.gaps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.gaps>div{padding:32px 28px}
.gaps h3{font-size:19px;font-weight:700;line-height:1.3;color:var(--color-text-primary);padding-bottom:16px;border-bottom:2px solid var(--color-border-light)}
.gaps .hl h3{color:var(--color-text-primary);border-bottom-color:var(--color-cyan)}
.gaps p{margin-top:18px;font-size:14px;line-height:1.75;color:var(--color-text-secondary)}
/* ── services columns ── */
/* ── services boxes ── */
.cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.cols>div{display:flex;flex-direction:column;padding:26px 24px;border-color:var(--color-cyan-border);transition:box-shadow .2s ease,border-color .2s ease,transform .2s ease}
.cols>div:hover{transform:translateY(-4px);border-color:var(--color-cyan);box-shadow:var(--sh-hi)}
.cols .tier{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--color-text-primary)}
.cols .free .tier{color:var(--color-cyan)}
.cols h3{margin-top:14px;font-size:19px;font-weight:700;line-height:1.3;color:var(--color-text-primary)}
.cols .ssub{flex:1;margin-top:12px;font-size:14px;line-height:1.7;color:var(--color-text-secondary)}
.cols .price{margin-top:20px;padding-top:18px;border-top:1px solid var(--color-border-light);font-size:26px;font-weight:800;color:var(--color-text-primary);letter-spacing:-.02em}
.cols .free .price{color:var(--color-text-primary)}
.cols .tl{margin-top:8px;font-size:12px;line-height:1.55;color:var(--color-text-muted)}
.cols .act{margin-top:auto;padding-top:22px}
/* ── quote ── */
.quote{position:relative;overflow:hidden;padding:88px 0;background:var(--color-midnight)}
.quote .art{position:absolute;inset:0;background:url("assets/img/filament-crest.png") no-repeat center/cover;transform:scaleX(-1);-webkit-mask-image:linear-gradient(90deg,#000 0,#000 44%,transparent 66%);mask-image:linear-gradient(90deg,#000 0,#000 44%,transparent 66%)}
.quote .veil{position:absolute;inset:0;background:linear-gradient(90deg,#0D2137 0%,#0D2137 56%,rgba(13,33,55,0) 80%)}
.quote .wrap{position:relative;z-index:1}
.quote blockquote{font-size:clamp(19px,2.1vw,25px);line-height:1.6;font-weight:400;color:var(--color-on-dark-secondary);max-width:34ch}
.quote blockquote .accent{color:var(--color-cyan);font-weight:700}
.quote .qby{margin-top:30px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--color-on-dark-muted)}
.quote .qby::before{content:"";display:inline-block;width:26px;height:1px;background:var(--color-champagne);vertical-align:middle;margin-right:12px}
/* ── cta band ── */
.ctaband{position:relative;padding:80px 0;background:var(--color-bg-light);border-top:1px solid var(--color-border-light)}
.ctaband .grid{display:grid;grid-template-columns:1fr minmax(0,330px);gap:64px;align-items:center}
.ctaband h2{font-size:clamp(26px,3vw,36px);font-weight:800;line-height:1.18;color:var(--color-text-primary)}
.ctaband p{margin-top:16px;font-size:16px;line-height:1.7;color:var(--color-text-secondary)}
.ctaband .acts{margin-top:32px;display:flex;flex-wrap:wrap;gap:14px}
.report{background:#fff;border:1px solid var(--color-cyan-border);border-radius:var(--radius-lg);box-shadow:var(--sh);padding:26px}
.report .rh{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:18px;border-bottom:1px solid var(--color-border-light)}
.report .lbl{font-size:12px;font-weight:700;color:var(--color-text-primary)}
.report .pill{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--color-text-primary);border:1px solid var(--color-cyan);padding:4px 9px;border-radius:var(--radius-pill)}
.report .k{margin-top:20px;font-size:10px;letter-spacing:.2em;color:var(--color-text-muted)}
.report .val{margin-top:8px;font-size:44px;font-weight:800;line-height:1;color:var(--color-text-primary);letter-spacing:-.03em}
.report .val small{font-size:16px;font-weight:400;color:var(--color-text-muted)}
.report .desc{margin-top:8px;font-size:13px;color:var(--color-text-secondary)}
.report .track{margin-top:14px;height:4px;background:var(--color-border-light)}
.report .track i{display:block;height:100%;background:var(--color-cyan)}
.report .prio{margin-top:22px;display:flex;flex-direction:column;gap:14px}
.report .row{display:grid;grid-template-columns:3px 1fr;gap:12px}
.report .row i{display:block;background:var(--color-cyan)}
.report .row .b2{background:var(--color-teal)}.report .row .b3{background:var(--color-champagne)}.report .row .b4{background:#C2410C}
.report .pl{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--color-text-muted)}
.report .pt{margin-top:3px;font-size:14px;font-weight:700;color:var(--color-text-primary)}
/* ── faq ── */
.faq{border-top:1px solid var(--color-border-light)}
.faq details{border-bottom:1px solid var(--color-border-light)}
.faq summary{list-style:none;cursor:pointer;padding:24px 0;display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:18px;font-weight:700;color:var(--color-text-primary)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--color-cyan);font-size:30px;font-weight:400;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq summary:hover{color:var(--color-cyan-hover)}
.faq p{padding:0 0 26px;font-size:15px;line-height:1.8;color:var(--color-text-secondary);max-width:80ch}
/* ── footer ── */
.foot{background:var(--color-midnight);padding:64px 0 34px;color:#fff}
.foot .top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:48px}
.foot .brand{color:#fff}
.foot .tag{margin-top:12px;font-size:13px;color:var(--color-on-dark-muted)}
.fcols{display:flex;flex-wrap:wrap;gap:64px}
.fcol{display:flex;flex-direction:column;gap:11px}
.fcol h5{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--color-on-dark-muted);margin-bottom:5px}
.fcol a{font-size:14px;color:var(--color-on-dark-secondary)}
.fcol a:hover{color:var(--color-cyan)}
.foot .base{margin-top:56px;padding-top:22px;border-top:1px solid var(--color-navy-border);font-size:12px;color:var(--color-on-dark-muted)}
@media(max-width:1140px){.nav-links{display:none}.nav-actions .btn-ghost{display:none}.nav-burger{display:flex}}
@media(max-width:1060px){.cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){
  /* drop the horizontal art/veil split entirely — the art becomes a band
     BELOW the copy, so text can never cross it at any narrow width */
  :root{--page-gutter:20px}
  /* curtain off on mobile: the hero is taller than the viewport here and a
     pinned sticky element cannot reveal its own bottom edge (the filament
     band lives there in this layout). `top` must be cleared with it. */
  .hero{position:relative;top:auto;min-height:0}
  .curtain-panel{box-shadow:none}
  .nav-actions .btn{display:none}
  .hero{padding-bottom:230px}
  .hero .art{inset:auto 0 0 0;height:230px;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 52%);mask-image:linear-gradient(180deg,transparent 0,#000 52%)}
  .hero .veil{display:none}
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .btn{width:100%}
  .quote .art{inset:auto 0 0 0;height:200px;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 52%);mask-image:linear-gradient(180deg,transparent 0,#000 52%)}
  .quote{padding-bottom:210px}
  .quote .veil{display:none}
  .quote blockquote{max-width:none}
  .sec-head{flex-direction:column;gap:18px}
  .sec-head .idx{display:none}
  .filmstrip{height:84px}
  .gaps,.cols{grid-template-columns:1fr}
  .vrow{grid-template-columns:1fr;gap:18px;justify-items:center;text-align:center}
  .vrow::after{display:none}
  .ctaband .grid{grid-template-columns:1fr}
  .cols h3,.cols .ssub,.cols .tl{min-height:0}
  .cols .price{margin-top:16px}
}
.sec .eyebrow-row .rule,.ctaband .eyebrow-row .rule{background:var(--color-text-primary)}
/* Midnight bands — petrol only reaches 2.7:1 on navy, so these marks go white.
   One accent value, no second cyan. MUST stay last to win the cascade. */
.hero .eyebrow{color:rgba(255,255,255,.72)}
.hero .eyebrow-row .rule{background:rgba(255,255,255,.5)}
.hero h1 .accent{color:#fff;text-decoration:none}
.plist b{color:#fff}
.quote blockquote .accent{color:#fff}
.report .row .b2{background:var(--color-text-secondary)}