/* Aurora Accounting LLC · custom build by BuiltByF4TE · not the F4TE template */

/* ---------- self-hosted fonts ----------
   These three woff2 files replace a blocking <link> to fonts.googleapis.com. That link
   cost roughly 550ms of render blocking: DNS + TLS to googleapis, download and parse a
   stylesheet, and only then DNS + TLS to a SECOND origin (gstatic) before one glyph
   could start downloading. Same Google Fonts files, latin subset only, served from
   /assets/fonts so they inherit the 30 day cache rule in vercel.json.

   Both families are variable fonts, so one file covers the whole weight range and the
   400/500/600/700 declarations elsewhere in this file all resolve from it.

   latin-ext, cyrillic, greek and vietnamese subsets are deliberately NOT shipped. That
   is 159KB we do not send. If the copy ever needs those glyphs they fall back to
   Georgia / system sans, which is a cosmetic issue on a word or two, not a broken page.
   To add a subset back: refetch from the css2 API with a Chrome user agent, drop the
   woff2 in /assets/fonts, and add a matching @font-face here. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/fonts/inter-roman-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:500 600;font-display:swap;src:url('/assets/fonts/fraunces-roman-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:500 600;font-display:swap;src:url('/assets/fonts/fraunces-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{
  --bg:#04070C; --bg2:#070D15; --panel:#0A131D; --panel2:#0D1826;
  --line:rgba(62,232,165,.16); --line2:rgba(236,246,242,.08);
  --ink:#ECF6F2; --muted:#93A6A5; --dim:#748789;
  --green:#3EE8A5; --cyan:#4FD8E8; --deep:#03241B;
  /* Brand palette. --deep-green is the dark end of the aurora ribbon in the logo.
     --paper and --ink-dark are the light-background pair: unused on this dark site,
     kept here so print, PDF and email work off the same values.
     NOTE: --ink above is LIGHT text on dark. The brand sheet calls #0B1622 "Ink".
     Same word, opposite colour. --ink-dark is the brand one. */
  --deep-green:#06543B; --paper:#FBFCFC; --ink-dark:#0B1622;
  --seam:rgba(236,246,242,.11);   /* section divider hairline */
  --disp:'Fraunces',Georgia,serif; --sans:'Inter',system-ui,sans-serif;
  --rad:16px; --wrap:1120px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden;overflow-x:clip}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:var(--green);text-decoration:none}
h1,h2,h3{font-family:var(--disp);font-weight:600;letter-spacing:-.015em;line-height:1.12}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(4,7,12,.82);backdrop-filter:blur(14px);border-bottom-color:var(--line2)}
.nav-in{max-width:var(--wrap);margin:0 auto;padding:18px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.wordmark{display:block;line-height:0;flex:0 0 auto}
.wordmark img{height:42px;width:auto;display:block}
.foot-brand .wordmark img{height:58px}
@media(max-width:900px){.wordmark img{height:34px}}
.nav-links{display:flex;gap:26px;align-items:center;list-style:none}
.nav-links a{color:var(--muted);font-size:14px;font-weight:500;transition:color .2s}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--ink)}
.nav-links a.btn,.nav-links a.btn:hover{color:var(--deep);font-weight:700}
.btn{display:inline-block;background:linear-gradient(96deg,var(--green),var(--cyan));color:var(--deep);font-weight:700;font-size:14.5px;padding:12px 24px;border-radius:999px;border:0;cursor:pointer;transition:transform .2s,box-shadow .2s;font-family:var(--sans)}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(62,232,165,.28)}
.btn.big{font-size:16px;padding:15px 32px}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line);font-weight:600}
.btn.ghost:hover{border-color:var(--green);box-shadow:none}
.burger{display:none;background:none;border:0;cursor:pointer;padding:6px}
.burger span{display:block;width:22px;height:2px;background:var(--ink);margin:5px 0;border-radius:2px;transition:.3s}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:-3}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 62%}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(102deg,rgba(4,7,12,.78) 0%,rgba(4,7,12,.55) 34%,rgba(4,7,12,.12) 62%,rgba(4,7,12,0) 78%),linear-gradient(to bottom,rgba(4,7,12,.5) 0%,rgba(4,7,12,.08) 38%,rgba(4,7,12,.3) 68%,var(--bg) 97%)}
.veil{position:absolute;z-index:-2;width:60vw;height:60vh;border-radius:50%;filter:blur(70px);opacity:.5;mix-blend-mode:screen;will-change:transform,opacity}
.v1{left:-12vw;top:8vh;background:radial-gradient(closest-side,rgba(62,232,165,.5),transparent 70%);animation:drift1 16s ease-in-out infinite alternate}
.v2{right:-15vw;top:2vh;background:radial-gradient(closest-side,rgba(79,216,232,.4),transparent 70%);animation:drift2 21s ease-in-out infinite alternate}
.v3{left:28vw;top:-6vh;width:44vw;background:radial-gradient(closest-side,rgba(155,140,245,.28),transparent 72%);animation:drift3 26s ease-in-out infinite alternate}
@keyframes drift1{from{transform:translate(0,0) scale(1)}to{transform:translate(9vw,4vh) scale(1.15)}}
@keyframes drift2{from{transform:translate(0,0) scale(1.1)}to{transform:translate(-8vw,6vh) scale(.95)}}
@keyframes drift3{from{transform:translate(0,0)}to{transform:translate(6vw,3vh) scale(1.2)}}
.star{position:absolute;z-index:-2;width:2px;height:2px;border-radius:50%;background:#fff;animation:twinkle 4s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.15}50%{opacity:.85}}
.hero-in{position:relative;width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px 9svh;text-align:left}
.kicker{font-size:12.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--green);font-weight:600;margin-bottom:18px}
.hero h1{font-size:clamp(36px,5.4vw,64px);max-width:17ch;text-shadow:0 2px 10px rgba(0,0,0,.75),0 6px 44px rgba(0,0,0,.65)}
.hero h1 em{font-style:italic;display:inline-block;color:#8CFFD9;
  text-shadow:0 0 8px rgba(62,232,165,.9),0 0 22px rgba(62,232,165,.75),0 0 52px rgba(62,232,165,.5),0 0 90px rgba(79,216,232,.35);
  animation:shine 4.5s ease-in-out infinite}
@keyframes shine{
  0%,100%{color:#8CFFD9;text-shadow:0 0 8px rgba(62,232,165,.85),0 0 22px rgba(62,232,165,.65),0 0 52px rgba(62,232,165,.42),0 0 90px rgba(79,216,232,.28)}
  50%{color:#EAFFF7;text-shadow:0 0 10px rgba(120,255,214,1),0 0 30px rgba(62,232,165,.95),0 0 70px rgba(62,232,165,.65),0 0 120px rgba(79,216,232,.5)}}
.hero .sub{margin-top:22px;font-size:clamp(16px,1.6vw,19px);color:var(--ink);opacity:.97;max-width:52ch;text-shadow:0 1px 8px rgba(0,0,0,.8),0 4px 26px rgba(0,0,0,.65)}
.hero .cta-row{margin-top:32px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero .micro{margin-top:18px;font-size:13px;color:var(--muted)}
.scroll-hint{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);width:22px;height:36px;border:1.5px solid rgba(236,246,242,.35);border-radius:12px}
.scroll-hint::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:var(--green);animation:wheel 2s ease-in-out infinite}
@keyframes wheel{0%{opacity:1;transform:translateY(0)}70%{opacity:0;transform:translateY(12px)}100%{opacity:0}}

/* ---------- trust marquee ---------- */
.trust{background:transparent;padding:26px 0;position:relative;overflow:hidden}
.marquee{overflow:hidden;-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:52px;width:max-content;padding-right:52px;animation:marq 38s linear infinite;will-change:transform}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.trust .t{display:flex;gap:10px;align-items:center;font-size:14px;color:var(--muted);font-weight:500;white-space:nowrap}
.trust .t b{color:var(--ink);font-weight:600}
.trust .dot{color:var(--green)}

/* ---------- sections ---------- */
section.block{padding:88px 0;position:relative}
section.block.tight{padding:64px 0}
/* Section divider. A hairline that fades out at both ends so it reads as a seam
   rather than a hard rule. Suppressed on the first section, which sits under the hero. */
section.block::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(var(--wrap),calc(100% - 48px));height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--seam) 22%,var(--seam) 78%,transparent)}
section:first-of-type.block::before{display:none}
.eyebrow{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--green);font-weight:600;margin-bottom:14px}
h2.title{font-size:clamp(30px,3.6vw,44px);max-width:22ch}
h2.title em{font-style:italic;color:var(--green)}
.lede{margin-top:16px;color:var(--muted);font-size:17px;max-width:62ch}
.center{text-align:center}
.center h2.title,.center .lede{margin-left:auto;margin-right:auto}

/* cards */
.grid{display:grid;gap:16px;margin-top:44px}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--panel);border:1px solid var(--line2);border-radius:var(--rad);padding:26px;transition:border-color .3s,transform .3s;position:relative;overflow:hidden}
.card:hover{border-color:var(--line);transform:translateY(-3px)}
.card .ico{width:42px;height:42px;border-radius:11px;background:rgba(62,232,165,.1);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;margin-bottom:16px;color:var(--green)}
.card h3{font-size:20px;margin-bottom:8px}
.card p{font-size:14.5px;color:var(--muted)}
.card .price{margin-top:14px;font-family:var(--disp);font-weight:600;color:var(--green);font-size:15px}
.card .price small{color:var(--dim);font-family:var(--sans);font-weight:400;font-size:12px}

/* steps */
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}
.step{counter-increment:s;background:var(--panel);border:1px solid var(--line2);border-radius:var(--rad);padding:26px}
.step::before{content:"0" counter(s);font-family:var(--disp);font-size:34px;color:var(--green);opacity:.9;display:block;margin-bottom:10px}
.step h3{font-size:19px;margin-bottom:8px}
.step p{font-size:14.5px;color:var(--muted)}

/* band */
.band{background:transparent}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
.split .img{border-radius:var(--rad);overflow:hidden;border:1px solid var(--line2);position:relative}
.split .img img{width:100%;height:100%;object-fit:cover}
.checks{margin-top:22px;display:grid;gap:12px}
.checks .c{display:flex;gap:12px;font-size:15px;color:var(--muted)}
.checks .c b{color:var(--ink);font-weight:600}
.checks .c .tick{color:var(--green);font-weight:700;flex:0 0 auto}

/* quote band */
.quoteband{position:relative;overflow:hidden;text-align:center;padding:110px 24px;isolation:isolate}
.quoteband .qbg{position:absolute;inset:0;z-index:-2}
.quoteband .qbg img{width:100%;height:100%;object-fit:cover;opacity:.5}
.quoteband::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(85% 110% at 50% 100%,rgba(4,7,12,.12),rgba(4,7,12,.82) 99%)}
.quoteband::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(760px,92vw);height:340px;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,rgba(62,232,165,.16),rgba(79,216,232,.07) 55%,transparent 75%);filter:blur(10px);pointer-events:none}
.quoteband blockquote{font-family:var(--disp);font-style:italic;font-size:clamp(24px,3.4vw,38px);line-height:1.3;max-width:26ch;margin:0 auto;font-weight:500}
.quoteband blockquote em{color:var(--green)}
.quoteband .who{margin-top:20px;font-size:13.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* faq */
.faq{max-width:760px;margin:44px auto 0}
.faq details{border-bottom:1px solid var(--line2)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;padding:22px 4px;font-weight:600;font-size:16.5px;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--green);font-size:22px;font-weight:400;transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 4px 22px;color:var(--muted);font-size:15px;max-width:64ch}
.faq details:last-child{border-bottom:0}   /* was leaving a rule floating under the last row */

/* cta */
.cta-final{background:linear-gradient(160deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:22px;padding:56px 48px;text-align:center;position:relative;overflow:hidden}
.cta-final::before{content:"";position:absolute;top:-120px;left:50%;transform:translateX(-50%);width:520px;height:260px;background:radial-gradient(closest-side,rgba(62,232,165,.16),transparent 70%);pointer-events:none}
.cta-final h2{font-size:clamp(28px,3.2vw,40px)}
.cta-final p{margin:14px auto 26px;color:var(--muted);max-width:48ch}

/* footer */
footer{border-top:1px solid var(--line2);padding:56px 0 40px;background:transparent}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.foot-grid .fcol{font-family:var(--sans);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:14px;font-weight:600}
.foot-grid ul{list-style:none;display:grid;gap:9px}
.foot-grid a{color:var(--muted);font-size:14px}
.foot-grid a:hover{color:var(--green)}
.foot-brand p{color:var(--muted);font-size:13.5px;max-width:34ch;margin-top:12px}
.legal{margin-top:44px;padding-top:22px;border-top:1px solid var(--line2);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--dim);font-size:12px}

/* page hero (inner pages) */
.page-hero{position:relative;padding:170px 0 70px;overflow:hidden;isolation:isolate}
.page-hero .ph-bg{position:absolute;inset:0;z-index:-2}
.page-hero .ph-bg img{width:100%;height:100%;object-fit:cover;opacity:.42}
.page-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to bottom,rgba(4,7,12,.5),var(--bg) 92%)}
.page-hero h1{font-size:clamp(34px,4.6vw,56px)}
.page-hero h1 em{font-style:italic;color:var(--green)}
.page-hero .lede{margin-top:16px}

/* services page */
.svc{display:grid;grid-template-columns:1fr auto;gap:24px;background:var(--panel);border:1px solid var(--line2);border-radius:var(--rad);padding:28px;margin-top:16px;transition:border-color .3s}
.svc:hover{border-color:var(--line)}
.svc h2{font-size:21px;margin-bottom:8px}
.svc p{color:var(--muted);font-size:15px;max-width:64ch}
.svc .tagrow{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap}
.tag{font-size:11.5px;letter-spacing:.06em;color:var(--muted);border:1px solid var(--line2);border-radius:999px;padding:4px 11px}
.svc .p{text-align:right;min-width:150px}
.svc .p .n{font-family:var(--disp);font-weight:600;font-size:24px;color:var(--green)}
.svc .p .d{font-size:12px;color:var(--dim)}
.notdo{background:rgba(79,216,232,.05);border:1px solid rgba(79,216,232,.22);border-radius:var(--rad);padding:26px;margin-top:40px}
.notdo h2{font-size:18px;margin-bottom:10px;color:var(--cyan)}
.notdo p{color:var(--muted);font-size:15px}

/* form */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:36px}
.f-full{grid-column:1/-1}
label{display:block;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:7px}
label .opt{color:var(--dim);font-weight:400}
input,select,textarea{width:100%;background:var(--panel);border:1px solid var(--line2);border-radius:11px;padding:13px 15px;color:var(--ink);font-family:var(--sans);font-size:14.5px;transition:border-color .2s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--green)}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2393A6A5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center}
textarea{min-height:110px;resize:vertical}
.form-note{font-size:12.5px;color:var(--dim);margin-top:14px}
fieldset{border:1px solid var(--line2);border-radius:var(--rad);padding:22px;margin-top:8px}
legend{font-family:var(--disp);font-size:17px;font-weight:600;padding:0 10px}

.reveal{opacity:0;transform:translateY(26px);filter:blur(6px);transition:opacity .8s ease,transform .8s ease,filter .8s ease}
.reveal.in{opacity:1;transform:none;filter:none}

@media(max-width:900px){
  .g3,.steps{grid-template-columns:1fr}
  .g2,.form-grid{grid-template-columns:1fr}
  .split{grid-template-columns:1fr;gap:36px}
  .foot-grid{grid-template-columns:1fr}
  .svc{grid-template-columns:1fr}
  .svc .p{text-align:left}
  .nav-links{position:fixed;inset:0;background:rgba(4,7,12,.97);flex-direction:column;justify-content:center;font-size:22px;transform:translateX(100%);visibility:hidden;transition:transform .35s,visibility 0s .35s}
  .nav-links.open{transform:none;visibility:visible;transition:transform .35s}
  .nav-links a{font-size:20px}
  .burger{display:block;z-index:60}
  .burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .burger.open span:nth-child(2){opacity:0}
  .burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero h1 em{animation:none}
  .veil,.star,.scroll-hint::after{animation:none}
  .reveal{opacity:1;transform:none;filter:none;transition:none}
  .btn:hover,.card:hover{transform:none}
}

/* ---------- ambient FX layers ---------- */
.fx-embers{position:fixed;inset:0;z-index:1;pointer-events:none}
/* lifts content above the .fx-embers layer (z-index:1). .nav is deliberately NOT in
   this list: it needs position:fixed from line 26, and this rule was silently
   overriding it, so the header scrolled away and .nav.scrolled never rendered. */
.hero-in,.wrap,.trust-in,.quoteband blockquote,.quoteband .who{position:relative;z-index:2}
[data-aurora]{position:relative;isolation:isolate}
[data-aurora] .fx-shader{position:absolute;inset:0;z-index:-2;width:100%;height:100%;opacity:.8;pointer-events:none}
.quoteband[data-aurora] .qbg img{opacity:.5}
.hero-video{position:absolute;inset:0;z-index:-3;width:100%;height:100%;object-fit:cover;object-position:center 62%}
@media (prefers-reduced-motion:reduce){.fx-embers,[data-aurora] .fx-shader,.hero-video{display:none}
.marquee-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}}
.cta-final[data-aurora] .fx-shader{opacity:.55;border-radius:22px}
.page-hero[data-aurora] .fx-shader{opacity:.55}


/* ---------- about portrait ---------- */
.about-grid{display:grid;grid-template-columns:240px 1fr;gap:48px;align-items:start}
.portrait{position:sticky;top:110px}
.portrait img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:18px;border:1px solid var(--line);box-shadow:0 0 0 6px rgba(62,232,165,.05),0 18px 50px rgba(0,0,0,.5),0 0 60px rgba(62,232,165,.12)}
.portrait .cap{margin-top:14px;font-family:var(--disp);font-weight:600;font-size:16px;color:var(--ink)}
.portrait .cap span{display:block;font-family:var(--sans);font-weight:400;font-size:12.5px;color:var(--muted);margin-top:3px}
@media(max-width:900px){.about-grid{grid-template-columns:1fr}.portrait{position:static;max-width:220px}}

/* ---------- blog ---------- */
.postgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}
@media(max-width:900px){.postgrid{grid-template-columns:1fr}}
.post{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line2);border-radius:var(--rad);overflow:hidden;transition:border-color .3s,transform .3s;color:var(--ink)}
.post:hover{border-color:var(--line);transform:translateY(-3px)}
.post .thumb{aspect-ratio:16/9;overflow:hidden}
.post .thumb img{width:100%;height:100%;object-fit:cover}
.post .body{padding:22px 24px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.post .meta{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--green);font-weight:600}
.post h2{font-size:19px;line-height:1.25}
.post p{font-size:13.5px;color:var(--muted);flex:1}
.post .more{font-size:13px;font-weight:600;color:var(--green)}
.article{max-width:760px;margin:0 auto;padding:0 24px}
.article h1{font-size:clamp(30px,4vw,46px);line-height:1.15}
.article .byline{margin-top:16px;display:flex;gap:10px;align-items:center;color:var(--muted);font-size:13px}
.article .byline img{width:34px;height:34px;border-radius:50%;border:1px solid var(--line)}
.article h2{font-size:24px;margin:40px 0 12px}
.article h3{font-size:18px;margin:28px 0 8px}
.article p{color:#C4D2CF;font-size:16px;margin:14px 0}
.article ul{margin:14px 0 14px 22px;color:#C4D2CF}
.article li{margin:7px 0}
.article .callout{margin:26px 0}
.article table{width:100%;border-collapse:collapse;margin:20px 0;font-size:14.5px}
.article th{text-align:left;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:0 10px 8px 0;border-bottom:1px solid var(--line)}
.article td{padding:10px 10px 10px 0;border-bottom:1px solid var(--line2);color:#C4D2CF}
.article td.n{color:var(--ink);font-weight:600}
.article td.p{color:var(--green);font-weight:600;white-space:nowrap}

/* ---------- mobile sticky CTA ----------
   Desktop already has a permanent CTA in the fixed nav. Below 900px the nav
   links collapse behind the burger, so this bar carries the quote action and a
   tap to call. It appears once the hero CTAs are off screen and gets out of the
   way whenever a form is visible so it can never sit on top of a submit button. */
.stickycta{position:fixed;left:0;right:0;bottom:0;z-index:55;display:none;gap:10px;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));
  background:rgba(4,7,12,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line2);
  transform:translateY(115%);visibility:hidden;
  transition:transform .32s cubic-bezier(.4,0,.2,1),visibility 0s .32s}
.stickycta.show{transform:none;visibility:visible;transition:transform .32s cubic-bezier(.4,0,.2,1)}
.stickycta .btn{flex:1;text-align:center;padding:15px 20px;font-size:15.5px}
.stickycta-call{flex:0 0 54px;height:54px;display:grid;place-items:center;border-radius:999px;
  border:1px solid var(--line);background:rgba(62,232,165,.08);color:var(--green);
  transition:background .2s,border-color .2s}
.stickycta-call:hover{background:rgba(62,232,165,.16);border-color:var(--green)}
@media(max-width:900px){
  .stickycta{display:flex}
  footer{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
}
@media (prefers-reduced-motion:reduce){.stickycta{transition:none}}

/* ---------- mobile hero ----------
   The desktop hero is bottom aligned inside 100svh, which composes well on a wide
   screen. On a tall phone the copy block stacks much taller, so flex-end pushed
   everything down and left a dead zone under the header that grew with screen
   height (218px on a 915px phone). Centre it in a slightly shorter hero: the gap
   drops to about 90px, the whole block including the CTAs stays above the fold,
   and the trust marquee peeks at the bottom to invite the scroll. */
@media(max-width:700px){
  .hero{min-height:90svh;justify-content:center}
  .hero-in{padding:76px 24px 26px}
}

/* ---------- 404 ----------
   Inline links need an underline here because the surrounding text is the same muted
   grey as every other lede on the site, and colour alone is not an accessible link
   affordance. */
.errlinks{margin-top:22px;color:var(--muted);font-size:17px;max-width:56ch}
/* The 404 hero carries about four lines of text, so the standard 70px hero tail plus
   88px section top left a 158px hole above the CTA card. Pulled in to ~88px. */
.page-hero.err{padding-bottom:24px}
.errlinks a{border-bottom:1px solid rgba(62,232,165,.4);transition:border-color .2s,color .2s}
.errlinks a:hover{border-bottom-color:var(--green);color:var(--cyan)}