/* ═══════════════════════════════════════════════════════════════════════
   Groundwork Solutions — landing page
   Type:  Space Mono (single face, three roles: display / body / utility)
   Color: blueprint cyanotype — drafting blue #1B44E0 on drafting stock,
          inverting to white line-work on a deep cyanotype ground in dark
   ═══════════════════════════════════════════════════════════════════════ */

/* ── tokens: light is the base, both dark states redefine only these ──── */
:root{
  --paper:#e8e9e4;
  --tint:#dee2e8;
  --ink:#10131c;
  --ink-soft:#4e5666;
  --rule:#b9c0ce;
  --rule-hard:#10131c;
  --signal:#1b44e0;
  --signal-ink:#ffffff;
  --signal-rule:rgba(255,255,255,.4);
  --void:#0a1633;
  --void-ink:#eef3fb;
  --focus:#1b44e0;

  --step--1:.75rem;
  --step-0:.9375rem;
  --step-1:1.0625rem;
  --step-2:clamp(1.35rem,1.1rem + 1.1vw,1.9rem);
  --step-3:clamp(1.9rem,1.4rem + 2.4vw,3.2rem);
  --step-4:clamp(2.3rem,1.4rem + 4.2vw,5rem);

  --gutter:clamp(1.25rem,4vw,3.5rem);
  --bandpad:clamp(4rem,9vw,8rem);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0a1633;
    --tint:#0e1d40;
    --ink:#eef3fb;
    --ink-soft:#93a8d0;
    --rule:#26386e;
    --rule-hard:#eef3fb;
    --signal:#3e6bff;
    --signal-ink:#04091c;
    --signal-rule:rgba(4,9,28,.38);
    --void:#04091c;
    --void-ink:#eef3fb;
    --focus:#7ea0ff;
  }
}
:root[data-theme="dark"]{
  --paper:#0a1633;
  --tint:#0e1d40;
  --ink:#eef3fb;
  --ink-soft:#93a8d0;
  --rule:#26386e;
  --rule-hard:#eef3fb;
  --signal:#3e6bff;
  --signal-ink:#04091c;
  --signal-rule:rgba(4,9,28,.38);
  --void:#04091c;
  --void-ink:#eef3fb;
  --focus:#7ea0ff;
}

/* ── base ─────────────────────────────────────────────────────────────── */
*,*::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(--paper);
  color:var(--ink);
  font-family:"Space Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:var(--step-0);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0;font-weight:700;line-height:1.08;letter-spacing:-.02em;text-wrap:balance}
p{margin:0}
ul,ol,dl,dd{margin:0;padding:0}
li{list-style:none}
img{max-width:100%;display:block}

a{color:inherit;text-decoration:none}
:where(a,button):focus-visible{outline:2px solid var(--focus);outline-offset:3px}

.skip{position:absolute;left:-9999px;top:0;z-index:99;padding:.75rem 1rem;background:var(--signal);color:var(--signal-ink)}
.skip:focus{left:0}

.wrap{width:100%;max-width:1180px;margin-inline:auto;padding-inline:var(--gutter)}
.wrap--narrow{max-width:820px}

.eyebrow{
  font-size:var(--step--1);text-transform:uppercase;letter-spacing:.16em;
  color:var(--ink-soft);margin-bottom:1.5rem;
}

/* ── header ───────────────────────────────────────────────────────────── */
.nav{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:1.5rem;
  padding:.9rem var(--gutter);
  background:var(--paper);
  border-bottom:1px solid var(--rule);
}
.nav__mark{display:flex;align-items:center;gap:.55rem;font-weight:700;letter-spacing:-.03em;font-size:var(--step-1)}
.nav__glyph{color:var(--ink);font-size:1.05em;line-height:1}
.nav__links{display:none;gap:1.75rem;margin-inline:auto;font-size:var(--step--1);letter-spacing:.06em}
.nav__links a{padding-block:.35rem;border-bottom:1px solid transparent}
.nav__links a:hover{border-bottom-color:var(--rule-hard)}
.nav__end{display:flex;align-items:center;gap:.6rem;margin-left:auto}
.nav__cta{
  padding:.5rem .8rem;font-size:var(--step--1);letter-spacing:.06em;white-space:nowrap;
  background:var(--signal);color:var(--signal-ink);border:1px solid var(--signal);
}
.nav__cta:hover{background:transparent;color:var(--ink);border-color:var(--rule-hard)}

.toggle{
  font:inherit;font-size:var(--step--1);letter-spacing:.1em;text-transform:uppercase;
  padding:.5rem .8rem;cursor:pointer;
  background:transparent;color:var(--ink);border:1px solid var(--rule);
}
.toggle:hover{border-color:var(--rule-hard)}
.toggle__label[data-dark]{display:none}
:root[data-theme="dark"] .toggle__label[data-light]{display:none}
:root[data-theme="dark"] .toggle__label[data-dark]{display:inline}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .toggle__label[data-light]{display:none}
  :root:not([data-theme="light"]) .toggle__label[data-dark]{display:inline}
}

@media (min-width:900px){
  .nav__links{display:flex}
  .nav__cta{padding:.5rem .95rem}
}
/* on narrow screens the links collapse, but the one action must survive */
@media (max-width:420px){
  .nav{gap:.75rem;padding-inline:1rem}
  .nav__word{display:none}
  .nav__end{gap:.4rem}
}

/* ── marquee banners ──────────────────────────────────────────────────── */
.banners{display:block;border-bottom:1px solid var(--rule)}
.banner{overflow:hidden;padding-block:.7rem}
.banner--rule{border-block:1px solid var(--rule)}
.banner--signal{background:var(--signal);color:var(--signal-ink)}
.banner--void{background:var(--void);color:var(--void-ink)}
.banner__track{
  display:flex;width:max-content;
  animation:slide 42s linear infinite;
}
.banner__track--rev{animation-direction:reverse}
.banner__unit{
  display:inline-flex;align-items:center;white-space:nowrap;
  font-size:clamp(1.1rem,2.6vw,1.9rem);font-weight:700;letter-spacing:-.02em;
}
.banner__unit i{font-style:normal;padding-inline:.9em;opacity:.55}
@keyframes slide{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion:reduce){
  .banner__track{animation:none}
  .banner{overflow-x:auto}
}

/* ── bands ────────────────────────────────────────────────────────────── */
.band{padding-block:var(--bandpad);border-bottom:1px solid var(--rule)}
.band--tint{background:var(--tint)}

.hero__head{font-size:var(--step-4);max-width:19ch;margin-bottom:clamp(2rem,4vw,3.25rem)}
.prose{display:flex;flex-direction:column;gap:1.5rem;max-width:74ch;margin-bottom:2.5rem}
.prose p{color:var(--ink-soft)}
.prose p:first-child{color:var(--ink);font-size:var(--step-1)}

.arrow{border-bottom:1px solid currentColor;padding-bottom:.15em;white-space:nowrap}
.arrow::after{content:" →"}
.arrow:hover{background:var(--signal);color:var(--signal-ink);border-bottom-color:transparent}

.sec{max-width:68ch;margin-bottom:clamp(2.25rem,4vw,3.5rem)}
.sec__head{font-size:var(--step-3);margin-bottom:1rem}
.sec__sub{color:var(--ink-soft)}
.note{margin-top:2rem;color:var(--ink-soft);font-size:var(--step--1)}

/* ── shared-border grid: cells butt against one hairline, terminal-style ─ */
.grid{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule)}
@media (min-width:700px){.grid--3{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.grid--3{grid-template-columns:repeat(3,1fr)}}

.cell{
  background:var(--paper);padding:clamp(1.5rem,2.4vw,2.1rem);
  display:flex;flex-direction:column;gap:.9rem;
  transition:background .18s ease,color .18s ease;
}
.band--tint .cell{background:var(--tint)}
.cell__tag{font-size:var(--step--1);text-transform:uppercase;letter-spacing:.16em;color:var(--ink-soft)}
.cell__head{font-size:var(--step-2)}
.cell__body{color:var(--ink-soft);font-size:var(--step-0)}
.cell__list{display:flex;flex-direction:column;gap:.4rem;margin-top:auto;padding-top:.75rem;border-top:1px solid var(--rule);font-size:var(--step--1)}
.cell__list li{padding-left:1.1em;position:relative;color:var(--ink-soft)}
.cell__list li::before{content:"▚";position:absolute;left:0;opacity:.6}

.cell:hover,.band--tint .cell:hover{background:var(--signal);color:var(--signal-ink)}
.cell:hover .cell__tag,.cell:hover .cell__body,.cell:hover .cell__list li{color:var(--signal-ink)}
.cell:hover .cell__list{border-top-color:var(--signal-rule)}

/* ── steps ────────────────────────────────────────────────────────────── */
.steps{display:flex;flex-direction:column;border-top:1px solid var(--rule)}
.step{
  display:grid;grid-template-columns:auto 1fr;gap:.5rem 1.5rem;align-items:start;
  padding-block:clamp(1.6rem,3vw,2.4rem);border-bottom:1px solid var(--rule);
}
.step__n{font-size:var(--step-2);font-weight:700;color:var(--ink-soft);font-variant-numeric:tabular-nums;line-height:1.1}
.step__head{font-size:var(--step-2);margin-bottom:.6rem}
.step__body p{color:var(--ink-soft);max-width:62ch}
.step__when{
  grid-column:2;font-size:var(--step--1);text-transform:uppercase;letter-spacing:.14em;
  color:var(--ink-soft);
}
@media (min-width:820px){
  .step{grid-template-columns:5rem 1fr 9rem}
  .step__when{grid-column:3;grid-row:1;text-align:right}
}

/* ── stats ────────────────────────────────────────────────────────────── */
.stats{background:var(--signal);color:var(--signal-ink);padding-block:clamp(2.5rem,5vw,3.75rem)}
.stats__row{display:grid;gap:2rem clamp(1.5rem,3vw,3rem)}
@media (min-width:640px){.stats__row{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.stats__row{grid-template-columns:repeat(4,1fr)}}
.stats__row li{display:flex;flex-direction:column;gap:.5rem}
.stats__row b{font-size:var(--step-3);line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.stats__row span{font-size:var(--step--1);line-height:1.5;max-width:26ch}

/* ── quotes ───────────────────────────────────────────────────────────── */
.quote{
  margin:0;background:var(--tint);padding:clamp(1.5rem,2.4vw,2.1rem);
  display:flex;flex-direction:column;gap:1.5rem;
}
.quote blockquote{margin:0;font-size:var(--step-1);line-height:1.55}
.quote blockquote::before{content:"“"}
.quote blockquote::after{content:"”"}
.quote figcaption{display:flex;flex-direction:column;gap:.25rem;margin-top:auto;padding-top:1rem;border-top:1px solid var(--rule);font-size:var(--step--1)}
.quote figcaption b{letter-spacing:.02em}
.quote figcaption span{color:var(--ink-soft)}

/* ── faq ──────────────────────────────────────────────────────────────── */
.faq{display:flex;flex-direction:column;border-top:1px solid var(--rule)}
.faq__item{padding-block:clamp(1.4rem,2.6vw,2rem);border-bottom:1px solid var(--rule)}
.faq dt{font-size:var(--step-1);font-weight:700;margin-bottom:.75rem}
.faq dd{color:var(--ink-soft);max-width:70ch}

/* ── cta ──────────────────────────────────────────────────────────────── */
.cta{background:var(--void);color:var(--void-ink);padding-block:clamp(4.5rem,9vw,8rem);text-align:center}
.cta__head{font-size:var(--step-3);max-width:20ch;margin:0 auto 1.5rem}
.cta__sub{color:var(--void-ink);opacity:.72;max-width:58ch;margin:0 auto 2.5rem}
.cta__row{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}
.btn{
  padding:.95rem 1.75rem;font-size:var(--step-0);letter-spacing:.04em;
  background:var(--signal);color:var(--signal-ink);border:1px solid var(--signal);
}
.btn:hover{background:transparent;color:var(--signal)}
.btn--ghost{background:transparent;color:var(--void-ink);border-color:currentColor}
.btn--ghost:hover{background:var(--signal);color:var(--signal-ink);border-color:var(--signal)}

/* ── footer ───────────────────────────────────────────────────────────── */
.foot{padding-block:2.25rem;background:var(--paper);color:var(--ink)}
.foot__row{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:space-between;font-size:var(--step--1)}
.foot__mark{font-weight:700;letter-spacing:-.02em}
.foot__links{display:flex;flex-wrap:wrap;gap:1.25rem}
.foot__links a{color:var(--ink-soft)}
.foot__links a:hover{color:var(--ink)}
.foot__copy{color:var(--ink-soft)}

/* ── scroll reveal ────────────────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .cell{transition:none}
}