/* ═════════════════════════════════════════════════════════════
   AAA CPA Services — "The Night Ledger"
   The double rule under the mark is the accounting notation for a
   closed, final total. The page is built from ruled lines, laid on
   a sky. Night → the document → night.

   Colour follows the brand system: navy carries the weight, paper is
   the ground, and red is a seasoning — one rule, one eyebrow, one
   button. Red never appears at volume, because to this audience
   "in the red" means exactly one thing.
   ═════════════════════════════════════════════════════════════ */

/* ── tokens ─────────────────────────────────────────────────── */
:root{
  /* ── TREASURY · primitive ramps, verbatim from the brand system ── */
  --navy-50:#f2f5fa;  --navy-100:#dee6f2; --navy-200:#bbc9e2; --navy-300:#8fa4c9;
  --navy-400:#5f7aa8; --navy-500:#3f5b8a; --navy-600:#2b446d; --navy-700:#1f3457;
  --navy-800:#16253e; --navy-900:#0d1627;
  --paper-50:#faf9f6; --paper-100:#f2f0ea; --paper-200:#e4e1d8; --paper-300:#d0ccbe;
  --paper-400:#b3ae9c; --paper-500:#948f7c; --paper-600:#767162; --paper-700:#5d594d;
  --paper-800:#45423a; --paper-900:#2b2925;
  --red-50:#fdf2f3;   --red-100:#fadee1;  --red-200:#f4bec4;  --red-300:#e88f99;
  --red-400:#d55d6c;  --red-500:#bd394b;  --red-600:#9f2839;  --red-700:#81202d;
  --red-800:#621822;  --red-900:#431016;
  --ink:#131a24;
  /* one step below the ramp, for the deepest part of the sky */
  --navy-950:#070d17;

  /* ── semantic ── build against these, not the raw hex ── */
  --text:var(--ink); --text-muted:var(--paper-700); --text-heading:var(--navy-800);
  --primary:var(--navy-800); --primary-deep:var(--navy-900);
  --accent-text:var(--red-700);      /* 9.16:1 on paper-50    */
  --accent-graphic:var(--red-500);   /* rules, fills          */
  --accent-on-dark:var(--red-300);   /* 7.60:1 on navy-900    */
  --focus:var(--red-400);            /* clears 3:1 on both grounds */
  --border-subtle:var(--paper-300);  /* decorative, no contrast duty */

  --display:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'PlexSans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'PlexMono',ui-monospace,'SFMono-Regular',Menlo,monospace;

  /* one small easing vocabulary, used consistently */
  --ease-out:cubic-bezier(.16,1,.3,1);      /* reveals — decisive arrival */
  --ease-io :cubic-bezier(.65,0,.35,1);      /* state changes */
  --ease-mic:cubic-bezier(.33,1,.68,1);      /* hover / micro */

  --shell:1180px;
  --gut:clamp(20px,5vw,48px);
  --hair:1px;
}

/* ── reset ──────────────────────────────────────────────────── */
*,*::before,*::after{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(--navy-900);
  color:var(--navy-100);
  font:400 16px/1.7 var(--sans);
  font-feature-settings:'kern' 1,'liga' 1;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
h1,h2,h3,h4,p,dl,dd,figure,blockquote{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:where(a,button,[tabindex]):focus-visible{
  outline:2px solid var(--focus);outline-offset:3px;border-radius:1px;
}
/* selection stays navy — red is reserved for the places that mark something */
::selection{background:var(--navy-700);color:var(--paper-50)}

.skip{
  position:fixed;top:8px;left:8px;z-index:200;
  padding:10px 16px;background:var(--paper-50);color:var(--ink);
  font:500 .8125rem/1 var(--sans);
  transform:translateY(-160%);transition:transform .2s var(--ease-out);
}
.skip:focus{transform:none}

.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gut)}

/* numbers are data — never let them wobble */
.tel,.ledger dd,.svc__num,.eyebrow__num,.legal,.foot__base{font-variant-numeric:tabular-nums}

/* ── the sky ────────────────────────────────────────────────── */
#sky{
  position:fixed;inset:0;width:100%;height:100%;
  z-index:0;pointer-events:none;
  opacity:0;transition:opacity 1.2s var(--ease-io);
}
#sky.is-live{opacity:1}
/* painted ground under the canvas, and the whole sky if WebGL never boots */
.sky-fallback{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% 8%, #16294a 0%, rgba(22,41,74,0) 62%),
    radial-gradient(90% 60% at 78% 92%, rgba(31,52,87,.30) 0%, rgba(31,52,87,0) 60%),
    linear-gradient(180deg,var(--navy-950) 0%,var(--navy-900) 45%,#0f1a2c 100%);
}

/* ── type roles ─────────────────────────────────────────────── */
.h2{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.75rem,1.05rem + 2.6vw,3rem);
  line-height:1.1;letter-spacing:-.022em;
  text-wrap:balance;
}
.eyebrow{
  display:flex;align-items:baseline;gap:.75em;
  font:500 .6875rem/1 var(--mono);
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent-on-dark);          /* red-300 · 7.60:1 on navy-900 */
}
.band--paper .eyebrow{color:var(--red-600)}   /* red-600 · 7.03:1 on paper-50 */
.eyebrow__num{color:var(--paper-500)}
.band--paper .eyebrow__num{color:var(--paper-700)}
.eyebrow::after{
  content:'';flex:1;height:var(--hair);
  background:currentColor;opacity:.28;
  transform:scaleX(var(--eb,1));transform-origin:left;
}
.prose p+p{margin-top:1.1em}
.link{
  color:var(--accent-text);
  box-shadow:inset 0 -1px 0 rgba(129,32,45,.4);
  transition:box-shadow .25s var(--ease-mic),color .25s var(--ease-mic);
}
.link:hover{box-shadow:inset 0 -1px 0 var(--red-600)}

/* the brand motif, as a divider */
.rule--double{height:5px;position:relative}
.rule--double::before,.rule--double::after{
  content:'';position:absolute;left:0;right:0;height:var(--hair);
  background:currentColor;opacity:.35;
  transform:scaleX(var(--rd,1));transform-origin:left;
}
.rule--double::before{top:0}
.rule--double::after{bottom:0}

/* ── buttons ────────────────────────────────────────────────── */
.btn{
  --bg:transparent;--fg:currentColor;--bd:currentColor;
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  padding:1.0625rem 1.75rem;
  font:500 .875rem/1 var(--sans);letter-spacing:.02em;
  color:var(--fg);background:var(--bg);
  border:var(--hair) solid var(--bd);
  position:relative;overflow:hidden;isolation:isolate;
  transition:color .3s var(--ease-mic),border-color .3s var(--ease-mic);
}
/* the wipe rises from the baseline — the way a total is ruled off */
.btn::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:var(--wipe,var(--red-500));
  transform:scaleY(0);transform-origin:bottom;
  transition:transform .42s var(--ease-out);
}
.btn:hover::before,.btn:focus-visible::before{transform:scaleY(1)}
.btn--sm{padding:.6875rem 1.0625rem;font-size:.75rem}
.btn__icon{width:1em;height:1em;flex:none}

.btn--solid{--bg:var(--red-500);--fg:var(--paper-50);--bd:var(--red-500);--wipe:var(--paper-50)}
.btn--solid:hover,.btn--solid:focus-visible{color:var(--red-700);border-color:var(--paper-50)}
.btn--quiet{--fg:var(--navy-100);--bd:rgba(222,230,242,.28);--wipe:var(--navy-100)}
.btn--quiet:hover,.btn--quiet:focus-visible{color:var(--navy-900);border-color:var(--navy-100)}
.btn--ghost{--fg:var(--navy-100);--bd:rgba(222,230,242,.28);--wipe:var(--navy-100)}
.btn--ghost:hover,.btn--ghost:focus-visible{color:var(--navy-900);border-color:var(--navy-100)}
/* on paper */
.band--paper .btn--quiet{--fg:var(--ink);--bd:rgba(19,26,36,.22);--wipe:var(--ink)}
.band--paper .btn--quiet:hover,.band--paper .btn--quiet:focus-visible{color:var(--paper-50)}

/* ── the lockup ─────────────────────────────────────────────── */
.lockup{display:inline-flex;color:inherit}
.lockup .mark{color:currentColor}
.lockup__name{
  display:block;font-family:var(--display);font-weight:500;
  line-height:1;letter-spacing:-.01em;
}
.lockup__sub{
  display:block;font:600 .5rem/1 var(--sans);
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--navy-300);margin-top:.5em;
}
/* horizontal — masthead */
.lockup--bar{align-items:center;gap:.75rem}
.lockup--bar .mark{width:52px;height:auto;flex:none}
.lockup--bar .lockup__name{font-size:1.0625rem}
.lockup--bar .lockup__sub{font-size:.4375rem;margin-top:.35em}
/* stacked — footer, per the 04 lockup */
.lockup--stack{flex-direction:column;align-items:flex-start;gap:.875rem}
.lockup--stack .mark{width:118px;height:auto}
.lockup--stack .lockup__name{font-size:1.5rem}
.lockup--stack .lockup__sub{font-size:.5rem;margin-top:.6em}

/* ── masthead ───────────────────────────────────────────────── */
.masthead{
  position:fixed;top:0;left:0;right:0;z-index:100;
  transition:transform .5s var(--ease-io),background-color .4s var(--ease-io),
             border-color .4s var(--ease-io),backdrop-filter .4s var(--ease-io);
  border-bottom:var(--hair) solid transparent;
}
.masthead.is-stuck{
  background:rgba(13,22,39,.82);
  backdrop-filter:blur(14px) saturate(1.1);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  border-bottom-color:rgba(222,230,242,.1);
}
.masthead.is-hidden{transform:translateY(-101%)}
.masthead__inner{
  display:flex;align-items:center;gap:2rem;
  min-height:76px;
}
.nav{display:flex;gap:1.75rem;margin-left:auto}
.nav a{
  position:relative;font-size:.8125rem;color:var(--navy-200);
  padding-block:.35rem;transition:color .25s var(--ease-mic);
}
.nav a::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:var(--hair);
  background:var(--red-500);
  transform:scaleX(0);transform-origin:right;
  transition:transform .35s var(--ease-out);
}
.nav a:hover,.nav a:focus-visible{color:var(--paper-50)}
.nav a:hover::after,.nav a:focus-visible::after{transform:scaleX(1);transform-origin:left}
.masthead__actions{display:flex;align-items:center;gap:1.25rem}
.tel{font:500 .8125rem/1 var(--mono);letter-spacing:.01em;color:var(--navy-200);
     transition:color .25s var(--ease-mic)}
.tel:hover{color:var(--paper-50)}

.burger{display:none;width:44px;height:44px;margin-right:-10px;
        flex-direction:column;justify-content:center;gap:6px;align-items:flex-end}
.burger span{display:block;width:22px;height:var(--hair);background:var(--navy-100);
             transition:transform .35s var(--ease-out),opacity .2s linear,width .35s var(--ease-out)}
.burger[aria-expanded=true] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.burger[aria-expanded=true] span:last-child{transform:translateY(-3.5px) rotate(-45deg);width:22px}

.drawer{
  position:fixed;inset:76px 0 0;z-index:99;
  background:var(--navy-950);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  padding:2rem var(--gut) 3rem;
  display:flex;flex-direction:column;justify-content:space-between;
}
.drawer[hidden]{display:none}
.drawer nav{display:flex;flex-direction:column}
.drawer nav a{
  font-family:var(--display);font-size:1.75rem;font-weight:400;
  padding:1rem 0;border-bottom:var(--hair) solid rgba(222,230,242,.12);
}
.drawer__foot{display:flex;flex-direction:column;gap:.5rem;
              font:400 .875rem/1.6 var(--mono);color:var(--navy-300)}

/* ── hero ───────────────────────────────────────────────────── */
.hero{
  position:relative;z-index:1;
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(6rem,13vh,8.5rem) clamp(3.5rem,8vh,5.5rem);
}
/* In a centred flex column an auto-width child is sized to fit-content,
   and `text-wrap: balance` then shrinks it far below its max-width.
   Everything centred here takes full width and centres by margin. */
.hero__inner{display:flex;flex-direction:column;align-items:center;text-align:center}
.hero__inner>*{width:100%}
.hero__inner>.hero__title,.hero__inner>.hero__lede{margin-inline:auto}

.hero__lockup{margin-bottom:clamp(1.5rem,3.4vh,2.5rem)}
.hero__mark{
  width:clamp(112px,15vw,168px);height:auto;margin-inline:auto;
  color:var(--paper-50);
}
.hero__name{
  font-family:var(--display);font-weight:500;
  font-size:clamp(1.375rem,.9rem + 1.6vw,1.9375rem);
  line-height:1;letter-spacing:-.01em;color:var(--paper-50);
  margin-top:.65em;
}
.hero__sub{
  font:600 .5rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;
  color:var(--navy-300);margin-top:1.1em;
}
@media (min-width:640px){.hero__sub{font-size:.5625rem}}

.hero__title{
  font-family:var(--display);font-weight:400;
  font-size:clamp(2.25rem,1.15rem + 4.1vw,4.25rem);
  line-height:1.06;letter-spacing:-.03em;
  color:var(--paper-50);
  max-width:21ch;text-wrap:balance;
}
.hero__lede{
  margin-top:clamp(1.25rem,2.4vh,1.75rem);
  max-width:56ch;
  font-size:clamp(1rem,.94rem + .3vw,1.1875rem);
  line-height:1.65;color:var(--navy-200);
}
.hero__cta{
  display:flex;flex-wrap:wrap;gap:.875rem;justify-content:center;
  margin-top:clamp(1.75rem,3.4vh,2.25rem);
}
.hero__trust{
  display:flex;flex-wrap:wrap;gap:.5rem 1.75rem;justify-content:center;
  margin-top:clamp(1.75rem,3.4vh,2.25rem);
  font:400 .75rem/1.5 var(--mono);letter-spacing:.02em;color:var(--navy-300);
}
.hero__trust li{display:flex;align-items:center;gap:.6rem}
.hero__trust li+li::before{
  content:'';width:3px;height:3px;background:var(--red-400);
  margin-right:.6rem;flex:none;
}
/* ── the sheet: paper laid on the sky ───────────────────────── */
.band{position:relative;z-index:1}
/* the sheet carries the paper ground; the canvas takes over when live */
.sheet{
  position:relative;z-index:1;
  background:var(--paper-50);
  border-top:2px solid var(--red-500);
}
.band--paper{
  color:var(--paper-700);
  padding-block:clamp(4rem,9vh,7rem);
}
/* one continuous sheet — hairline rules mark its opening and close */
#credentials{padding-top:clamp(3rem,7vh,5rem)}
#standard{padding-bottom:clamp(5rem,11vh,8rem)}
.band--paper .h2{color:var(--navy-800)}
.band--paper .rule{color:var(--paper-500)}

/* subtle laid-paper tooth — keeps the white from going digital-flat */
.band--paper::before{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    repeating-linear-gradient(180deg,rgba(148,143,124,.045) 0 1px,transparent 1px 4px);
  mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);
}

/* ── credentials ────────────────────────────────────────────── */
.creds{
  display:grid;gap:clamp(2.5rem,5vw,4.5rem);
  grid-template-columns:1fr;
  margin-top:clamp(2.5rem,5vh,3.5rem);
}
@media (min-width:820px){.creds{grid-template-columns:1fr 1fr}}
.ledger{margin-top:1.75rem;border-top:var(--hair) solid var(--paper-300)}
.ledger__row{
  display:grid;grid-template-columns:8.5rem 1fr;align-items:baseline;gap:.25rem 1.5rem;
  padding:.9375rem 0;border-bottom:var(--hair) solid var(--paper-300);
}
.ledger dt{
  font:500 .6875rem/1.9 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--paper-700);
}
.ledger dd{font:400 .9375rem/1.5 var(--sans);color:var(--navy-800)}
.ledger dd b{font-weight:500;font-variant-numeric:tabular-nums}
.ledger dd b{font-weight:500}
/* an unmistakable blank, so a real number is never mistaken for a placeholder
   and a placeholder is never mistaken for a real number */
.pending{
  font-style:normal;color:var(--red-600);
  background:rgba(129,32,45,.07);
  box-shadow:inset 0 -1px 0 rgba(129,32,45,.45);
  padding:0 .3em;
}
.creds__note{
  margin-top:1.5rem;font-size:.9375rem;line-height:1.65;
  color:var(--paper-700);max-width:46ch;
}

/* ── the firm ───────────────────────────────────────────────── */
.firm .h2{margin-top:1.5rem;max-width:20ch}
.firm .prose{
  margin-top:2rem;max-width:64ch;
  font-size:clamp(1rem,.96rem + .2vw,1.0625rem);line-height:1.75;
}

/* ── practice areas: a ruled table, not floating cards ──────── */
.sechead{max-width:60ch}
.sechead .h2{margin-top:1.5rem}
.sechead__note{
  margin-top:1.25rem;font-size:.875rem;line-height:1.65;
  color:var(--paper-700);max-width:52ch;
}
.services{margin-top:clamp(2.5rem,5vh,3.5rem);border-top:var(--hair) solid var(--paper-300)}
.svc{
  position:relative;
  display:grid;gap:.5rem 2.5rem;
  grid-template-columns:auto 1fr;
  padding:clamp(1.75rem,3vh,2.5rem) 0;
  border-bottom:var(--hair) solid var(--paper-300);
}
/* on hover the row rules off — the double rule, the closed total */
.svc::after{
  content:'';position:absolute;left:0;right:0;bottom:-4px;height:var(--hair);
  background:var(--red-500);
  transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease-out);
}
.svc:hover::after,.svc:focus-within::after{transform:scaleX(1)}
.svc__num{
  font:500 .6875rem/1.9 var(--mono);letter-spacing:.14em;
  color:var(--paper-700);
  transition:color .3s var(--ease-mic);
}
.svc:hover .svc__num{color:var(--red-500)}
.svc__title{
  grid-column:2;
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.3125rem,1.05rem + .8vw,1.75rem);
  line-height:1.2;letter-spacing:-.015em;color:var(--navy-800);
}
.svc__desc{
  grid-column:2;max-width:52ch;
  font-size:.9375rem;line-height:1.65;color:var(--paper-700);
}
.svc__list{
  grid-column:2;margin-top:.875rem;
  display:grid;gap:.4375rem .875rem;
  font:400 .8125rem/1.5 var(--sans);color:var(--paper-700);
}
@media (min-width:700px){.svc__list{grid-template-columns:1fr 1fr;column-gap:2rem}}
.svc__list li{display:flex;gap:.625rem;align-items:baseline}
.svc__list li::before{
  content:'';width:5px;height:var(--hair);background:var(--paper-300);
  flex:none;transform:translateY(-.3em);
}
.services__helper{
  margin-top:2.25rem;max-width:56ch;
  font-size:.9375rem;line-height:1.7;color:var(--paper-700);
}

/* ── the standard ───────────────────────────────────────────── */
.standard{
  display:grid;gap:clamp(2rem,4vw,3rem);
  grid-template-columns:1fr;margin-top:clamp(2.5rem,5vh,3.5rem);
}
@media (min-width:760px){.standard{grid-template-columns:repeat(3,1fr)}}
.standard li{padding-top:1.25rem;border-top:2px solid var(--navy-700)}
.standard h3{
  font-family:var(--display);font-weight:500;font-size:1.1875rem;
  line-height:1.3;letter-spacing:-.01em;color:var(--navy-800);
}
.standard p{margin-top:.625rem;font-size:.9375rem;line-height:1.65;color:var(--paper-700)}

/* ── closing ────────────────────────────────────────────────── */
.close{
  padding-block:clamp(6rem,15vh,10rem);
  color:var(--navy-100);
  border-top:2px solid var(--red-500);
}
.close__inner{display:flex;flex-direction:column;align-items:center;text-align:center}
.close__inner>*{width:100%}
.close__inner .eyebrow{justify-content:center}
.close__inner .eyebrow::after{display:none}
.close .h2{color:var(--paper-50);max-width:22ch;margin:1.5rem auto 0}
.close__lede{margin:1.25rem auto 0;max-width:46ch;font-size:1.0625rem;line-height:1.65;color:var(--navy-200)}
.close__cta{display:flex;flex-wrap:wrap;gap:.875rem;justify-content:center;margin-top:2.5rem}
.close__meta{
  margin:2.75rem auto 0;font:400 .8125rem/1.7 var(--sans);
  letter-spacing:0;color:var(--navy-300);max-width:52ch;
}

/* ── footer ─────────────────────────────────────────────────── */
.foot{
  position:relative;z-index:1;
  padding-block:clamp(3.5rem,8vh,5.5rem) 2.5rem;
  border-top:var(--hair) solid rgba(222,230,242,.12);
  color:var(--navy-300);
  background:linear-gradient(180deg,rgba(5,11,9,0) 0%,rgba(5,11,9,.55) 45%,rgba(5,11,9,.9) 100%);
}
.foot__top{
  display:grid;gap:clamp(2.5rem,5vw,3rem);
  grid-template-columns:1fr;
}
@media (min-width:700px){.foot__top{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.foot__top{grid-template-columns:1.6fr 1fr 1fr 1.2fr}}
.foot__brand .lockup{color:var(--paper-50)}
.foot__blurb{margin-top:1.5rem;max-width:34ch;font-size:.875rem;line-height:1.7}
.foot__col{display:flex;flex-direction:column;gap:.5rem}
.foot__h{
  font:500 .625rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--paper-500);margin-bottom:.75rem;
}
.foot__col a,.foot__col p{font-size:.875rem;line-height:1.6;margin:0}
.foot__col a{
  width:fit-content;
  box-shadow:inset 0 -1px 0 transparent;
  transition:color .25s var(--ease-mic),box-shadow .25s var(--ease-mic);
}
.foot__col a:hover{color:var(--paper-50);box-shadow:inset 0 -1px 0 var(--red-500)}
.foot__rule{margin-block:clamp(2.5rem,5vh,3.5rem) 1.75rem;color:var(--navy-500)}
.legal{font:400 .75rem/1.65 var(--sans);color:var(--paper-500);max-width:88ch}
.legal b{color:var(--navy-300);font-weight:500}
.foot__base{
  display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;
  margin-top:2rem;font:400 .75rem/1.6 var(--mono);color:var(--paper-500);
}
.foot__base a:hover{color:var(--navy-200)}

/* ── motion: entry states (removed by JS once GSAP takes over) ── */
.anim [data-lines] .line__i{transform:translateY(105%)}
.anim [data-fade],.anim [data-reveal]{opacity:0;transform:translateY(14px)}
.line{display:block;overflow:hidden}
.line__i{display:block;will-change:transform}

/* ── responsive ─────────────────────────────────────────────── */
@media (max-width:900px){
  .nav,.masthead__actions{display:none}
  .burger{display:flex;margin-left:auto}
}
@media (max-width:560px){
  .svc{grid-template-columns:1fr;gap:.5rem}
  .svc__num{grid-column:1}
  .svc__title,.svc__desc,.svc__list{grid-column:1}
  .ledger__row{grid-template-columns:1fr}
  .hero__trust{flex-direction:column;align-items:center;gap:.625rem}
  .hero__trust li+li::before{display:none}
}

/* ── reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .anim [data-lines] .line__i,.anim [data-fade],.anim [data-reveal]{
    opacity:1 !important;transform:none !important;
  }
}

/* ── hand-off: when the canvas is painting the ground, the sheet
      steps aside so the same points can print through it as ink ── */
html.sky-live .sheet{background:transparent}
html.sky-live .foot{background:none}
html.sky-live body{background:var(--navy-950)}