/* Alva Nexo — website mockup, "broadsheet" variant
   Structure: architectural-broadsheet system (bone canvas, one colour detonating
   full-bleed, hierarchy by scale alone, borderless flat components, mono micro-labels).
   Palette and type remain Alva Nexo's own: Visual Language v1.0 + Document Standards v1.0.
   Forest takes the role of the "strike" colour; pink stays rare by design.

   Revised 2026-08-27 against DESIGN-REVIEW.md. Changes are marked [REV-xx]. */

:root{
  color-scheme: light;                       /* [REV-E4] the canvas is bone, always */

  --bone:#F1EBDD;        /* canvas — the warm ground */
  --ink:#171917;
  --strike:#183D30;      /* the single chromatic voice — full-bleed sections */
  --strike-deep:#0E251D;
  --pink:#F35A98;        /* accent, used sparingly and never as a surface */

  /* [REV-B3] WEB TINTS v1.0 — screen-only extension to Document Standards §06.
     DS §06's ink defaults are print values and fail on screen (#7E8C82 on bone is
     2.96:1, #9EAEA2 is 1.96:1), so the web needs its own set. Every value below is
     measured; the ratio is the contrast against its stated ground. Do not add a
     tint here without recording its ratio. Mirror this table into the Visual
     Language as a "Web tints v1.0" addendum before launch. */
  --ink-soft:#5B6560;    /* 5.08:1 on bone   — secondary body */
  --hair:#CFC5AF;        /* 1.44:1 on bone   — RULES ONLY, never text or a bullet */
  --hair-dark:#2E5344;   /*                  — rules on forest */
  --on-forest:#C3D6CB;   /* 7.89:1 on forest — lede */
  --on-forest-2:#BACCC2; /* 7.15:1 on forest — body */
  --on-forest-3:#A9C0B5; /* 6.23:1 on forest — nav, footer body */
  --on-forest-4:#8FB0A2; /* 5.09:1 on forest — meta */
  --on-forest-5:#8AA79A; /* 4.62:1 on forest, 6.21:1 on carbon — quietest permitted */
  --field:#24473A;       /* §05 field colour on forest */

  --max:1200px;
  --gut:clamp(20px,5vw,60px);
  /* Vertical rhythm. Every gap in the page comes from one of these four —
     inline one-off values are how a system quietly stops being one. */
  --s1:clamp(10px,1.1vw,12px);
  --s2:clamp(18px,2.2vw,26px);
  --s3:clamp(26px,3vw,40px);
  --s4:clamp(40px,5vw,68px);
  /* [REV-B1] Document Standards §02: UPPERCASE tracks +0.14 to +0.18em, and
     negative tracking is reserved for type never below 14pt. Every uppercase
     label on this site now uses this token instead of the -0.05em it had. */
  --track-caps:.12em;
  --hdr:76px;            /* sticky header height — anchors offset by this */
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bone);color:var(--ink);
  font-family:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* [REV-A7] the sticky header would otherwise cover every anchor target. */
[id]{scroll-margin-top:calc(var(--hdr) + 20px)}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

/* [REV-D2] focus was entirely undefined; the browser default belongs to no part
   of this palette. Pink earns its keep here — a focus ring is not a decorative
   glyph and does not spend the §03 one-per-page permission. */
:focus-visible{outline:2px solid var(--pink);outline-offset:3px;border-radius:1px}
.bleed :focus-visible,.hero :focus-visible,header.site :focus-visible,
footer.site :focus-visible{outline-color:var(--bone)}

/* [REV-D1] skip link and the visually-hidden helper it shares with the brand name */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:var(--gut);top:-100px;z-index:60;background:var(--bone);
  color:var(--ink);padding:14px 18px;font-family:'IBM Plex Mono',monospace;
  font-size:12px;letter-spacing:var(--track-caps);text-transform:uppercase}
.skip:focus{top:10px}

/* ---------- type: one sans, hierarchy by size alone ---------- */
.display,h1,h2,h3,h4{font-family:'Space Grotesk',system-ui,sans-serif;font-weight:500;
  letter-spacing:-0.02em;line-height:1}
h1{font-size:clamp(44px,7.4vw,104px);line-height:.93;letter-spacing:-0.035em}
/* [REV-B7] "Better ways forward." is the TAGLINE; "Technology with purpose." is the
   GUIDING PRINCIPLE, one level down in Brand Foundation §01. The display was 150px
   against an 88px h1, which inverted that. The h1 is now the largest type on the
   page and the statement sits just under it. */
.display{font-size:clamp(40px,6.8vw,94px);line-height:.95;letter-spacing:-0.035em}
h2{font-size:clamp(32px,4.6vw,46px);letter-spacing:-0.025em}
h3{font-size:clamp(24px,2.6vw,30px);letter-spacing:-0.02em}
h4{font-size:20px;font-weight:500;letter-spacing:-0.01em}
.lede{font-size:clamp(17px,1.6vw,18px);line-height:1.5;color:var(--ink-soft)}
p{max-width:68ch}
b{font-weight:500;color:var(--ink)}
.bleed b,.hero b,footer.site b{color:var(--bone)}

/* mono micro-labels: annotation, never content.
   [REV-B2] 10px was the site's smallest and most-used size — sixteen elements on
   the homepage. DS §03 bottoms out at 8pt, but that is a print scale read on
   paper; the screen equivalent is ~11px. */
.m{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;font-weight:500;
  letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--ink-soft)}
.m14{font-family:'IBM Plex Mono',monospace;font-size:14px;letter-spacing:.02em;line-height:1.3}
/* [REV-C3] mono is the annotation layer. Lines that carry a proposition rather
   than metadata are set in Plex Sans — see .claim. */
.claim{font-size:16px;line-height:1.45;color:var(--ink-soft)}
.hero .claim,.bleed .claim{color:var(--on-forest)}

/* ---------- layout: asymmetric, generous, borderless ---------- */
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
section{padding-block:clamp(56px,7vw,110px)}
.bleed{background:var(--strike);color:var(--bone)}
.bleed .lede{color:var(--on-forest-2)}
.bleed .m{color:var(--on-forest-5)}
.hair{border:0;border-top:1px solid var(--hair)}
.bleed .hair{border-color:var(--hair-dark)}

/* the signature split: label column left, content right.
   VL v1.0 §06: 12 columns, standard divisions only — 8+4, 6+6, 4+4+4, 3+9.

   [REV-A2] These used to sit outside a media query, where `.split>*:first-child`
   (0,2,0) outranked the `max-width:820px` reset `.split>*` (0,1,0). The single
   column was never applied: children still asked for `span 3` / `span 9`, so the
   grid invented implicit columns and the phone layout was an accident. Every
   multi-column rule now lives behind min-width, so small screens are the default
   and cannot be outranked. */
.split{display:grid;grid-template-columns:1fr;gap:18px}
.entry{display:grid;grid-template-columns:1fr;gap:12px;
  padding-block:clamp(30px,4vw,52px);border-top:1px solid var(--hair)}
@media(min-width:821px){
  .split{grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(20px,5vw,80px)}
  .split>*:first-child{grid-column:span 3}
  .split>*:last-child{grid-column:span 9}
  .split.wide>*:first-child,.split.wide>*:last-child{grid-column:span 6}
  .entry{grid-template-columns:repeat(12,minmax(0,1fr));
    gap:clamp(16px,3.4vw,56px);align-items:start}
  /* [REV-C2] was 1+4+7, which left the left third of every interior page empty
     for ~350px per entry. 1+5+6 gives the title column enough width to hold the
     eye, and the body a measure closer to 60ch. */
  .entry>.idx{grid-column:span 1}
  .entry>*:nth-child(2){grid-column:span 5}
  .entry>.body{grid-column:span 6}
}

/* ---------- header ----------
   Logo Guidelines §06: the HORIZONTAL REVERSED lockup is specified for
   "dark headers, footers and navigation bands" — so the header is forest,
   carrying the Rake field at fine tile (small area, finest scale).
   §03 four cuts: WEB NAV is the STANDARD cut, 40–96px. */
header.site{position:sticky;top:0;z-index:40;background:var(--strike);
  color:var(--bone);border-bottom:1px solid var(--strike-deep);isolation:isolate}
header.site::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:repeating-linear-gradient(43deg,
    rgba(36,71,58,.9) 0 4.2px, transparent 4.2px 14px)}
header.site .bar{display:flex;align-items:center;gap:26px;height:var(--hdr);
  max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
.brand{display:flex;align-items:center;color:var(--bone)}
.brand .lockup svg{height:40px;width:auto}  /* §03 STANDARD cut floor, web nav */
.brand .symbol{display:none}
.brand .symbol svg{height:32px;width:32px}  /* §03 SMALL cut, §07 "symbol only" */
nav.main{display:flex;gap:22px;margin-left:auto}
nav.main a{font-family:'IBM Plex Mono',monospace;font-size:12px;
  letter-spacing:var(--track-caps);text-transform:uppercase;
  color:var(--on-forest-3);padding-bottom:2px}
nav.main a:hover{color:var(--bone)}
/* §03 colour permissions: on forest the reversed mark is BONE. The page's one
   permitted pink goes to the divider band (§05: pink on light, 22px band). */
nav.main a[aria-current]{color:var(--bone);box-shadow:0 1px 0 var(--bone)}
.lang{font-family:'IBM Plex Mono',monospace;font-size:11px;
  letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--on-forest-5);
  cursor:default;user-select:none}   /* not a control until Portuguese exists */
.lang b{color:var(--bone);font-weight:500}
.lang span[data-off]{opacity:.55}

/* [REV-D3] Target size, in two tiers.
   WCAG 2.2 §2.5.8 (Minimum) asks 24×24 CSS px for EVERY pointer, mouse included —
   the nav was 20px and the footer 18px, so the baseline overlay below applies at
   all widths. §2.5.5 (Enhanced) asks 44×44, which is the right floor for touch;
   the 46px tier used to start at 640px, leaving 641–820px — the band where
   tablets live — on the 20px targets. Both overlays are invisible and centred, so
   nothing moves visually. */
nav.main a,footer.site a,.strip a{position:relative}
nav.main a::after,footer.site a::after,.strip a::after{content:"";position:absolute;
  left:-6px;right:-6px;top:50%;transform:translateY(-50%);height:26px}
@media(hover:none),(max-width:820px){
  nav.main a::after,footer.site a::after,.strip a::after{height:46px}
}
/* The brand link is only as tall as the 40px lockup (32px symbol on phones);
   the header band has room for the rest. */
.brand{padding-block:6px}
@media(max-width:640px){.brand{padding-block:8px}}
/* §07: on a narrow header the specified application is SYMBOL ONLY at the
   SMALL cut — not the horizontal lockup squeezed below its 40px floor. */
@media(max-width:640px){
  header.site .bar{height:64px;gap:14px}
  nav.main{gap:14px}
  .brand .lockup{display:none}.brand .symbol{display:block}
  /* [REV-D7] the language control used to vanish below 640px. For a studio
     shipping EN and PT it is primary navigation, and most traffic is mobile, so
     it stays — reduced to the two codes. */
  .lang{font-size:11px;letter-spacing:.06em}
}
@media(max-width:380px){.lang{display:none}}  /* below this the header genuinely runs out */

/* ---------- hero ----------
   Forest ground. The mark sits in its own column with §08 clear space
   (½ its width) intact — never behind the text. */
.hero{position:relative;background:var(--strike);color:var(--bone);overflow:hidden;
  padding-block:clamp(44px,6vw,86px) clamp(48px,7vw,96px)}
.hero .wrap{position:relative}
.hero .m{color:var(--on-forest-4)}
.hero .lede{color:var(--on-forest)}
.hero .m14{color:var(--bone)}
.meta{display:flex;gap:clamp(14px,3vw,44px);flex-wrap:wrap;padding-bottom:clamp(28px,4vw,52px)}
.meta span{white-space:nowrap}
.hero h1{margin:0 0 clamp(28px,4vw,48px);max-width:14ch}
.hero .after{display:grid;grid-template-columns:1fr;gap:22px;
  padding-top:clamp(22px,3vw,34px);border-top:1px solid var(--hair-dark)}
@media(min-width:821px){
  .hero .after{grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(20px,5vw,80px);
    align-items:start}
  .hero .after>*:first-child{grid-column:span 8}  /* 8+4 */
  .hero .after>*:last-child{grid-column:span 4}
}

/* [REV-A5] interior heroes were three inline clamp() values repeated per page.
   One class, and the colour bug that lived in those inline styles cannot recur. */
.hero-page{padding-block:clamp(30px,4vw,56px) clamp(34px,4vw,60px)}
.hero-page h1{font-size:clamp(44px,8vw,110px);max-width:12ch}

/* home only: headline left, DISPLAY-cut mark in its own column */
/* [REV-C1] min-height was min(88vh,840px) with align-items:center — 792px of hero
   holding 465px of content, so a third of it was empty forest and the pink band
   fell below a 900px fold with nothing signalling that anything followed. */
.hero-home{display:flex;align-items:center;min-height:min(74vh,700px);
  padding-block:clamp(40px,6vw,72px)}
/* 12ch keeps "Better ways / forward." on two lines at every width; 11ch broke
   "ways" onto a line of its own once the size came up. */
.hero-home h1{max-width:12ch;margin-bottom:0}
.hero-home .lede{margin-top:clamp(22px,2.6vw,32px);max-width:46ch;
  font-size:clamp(15px,1.4vw,17px)}
/* [REV-C1b] The mark used to leave its column and drop below the text at 1000px,
   so resizing the window MOVED it rather than scaling it. The two-column hero now
   holds all the way down, and the mark column is sized by the mark itself
   (clamp), so narrowing the window shrinks it in place.
   Text column is minmax(0,1fr) — it absorbs whatever the mark does not take. */
.hero-mark{display:grid;
  grid-template-columns:minmax(0,1fr) clamp(88px,19vw,330px);
  gap:clamp(20px,4vw,64px);align-items:center}
.hero-mark .h-t{grid-column:1;grid-row:1}
.hero-mark .h-m{grid-column:2;grid-row:1;display:flex;justify-content:center}
.hero-mark .h-m svg{width:100%;height:auto}

/* Below this the two columns would leave the headline under ~300px, where
   "Better ways forward." breaks into four lines. Only here does the mark stack —
   and it goes BELOW the text, never above it, so the message still leads. */
@media(max-width:560px){
  .hero-mark{display:flex;flex-direction:column}
  .hero-mark .h-t{order:1}
  .hero-mark .h-m{order:2;margin-top:clamp(40px,8vw,64px);display:block}
  .hero-mark .h-m svg{max-width:clamp(110px,30vw,180px)}
}

/* ---------- flat link CTA (no buttons, no fills) ---------- */
.go{display:inline-flex;align-items:center;gap:9px;font-family:'IBM Plex Mono',monospace;
  font-size:12px;letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--ink);
  padding-bottom:4px;box-shadow:0 1px 0 var(--ink);position:relative;
  transition:gap .14s ease,box-shadow .14s ease}
.go:hover{gap:15px;box-shadow:0 1px 0 var(--strike)}
@media(prefers-reduced-motion:reduce){.go{transition:none}.go:hover{gap:9px}}
/* Underline stays tight to the text; the touch target is expanded to the 44px
   minimum with an overlay, so nothing moves visually. */
.go::after{content:"";position:absolute;left:0;right:0;top:50%;
  transform:translateY(-50%);height:46px}
.bleed .go,.hero .go{color:var(--bone);box-shadow:0 1px 0 var(--bone)}
.bleed .go:hover,.hero .go:hover{box-shadow:0 1px 0 var(--pink)}
.go-row{display:flex;gap:clamp(18px,3vw,36px);flex-wrap:wrap;margin-top:clamp(22px,3vw,34px)}

/* ---------- broadsheet entries: numbered, borderless, hairline-separated ---------- */
.bleed .entry{border-color:var(--hair-dark)}
.entry .idx{font-family:'IBM Plex Mono',monospace;font-size:clamp(28px,3.4vw,44px);
  line-height:.9;letter-spacing:-0.04em;color:var(--strike)}
/* VL v1.0 §03 colour permissions: on forest the reversed mark is BONE.
   (Pink on forest was only 3.85:1, a large-text-only pass; bone is 10.1:1.) */
.bleed .entry .idx{color:var(--bone)}
.entry h3{margin-bottom:10px}
/* The service pillars are offers; the principles in the statement section are
   values. Equal size read as equal rank, so the principles step down. */
.bleed.statement .entry h3{font-size:clamp(20px,1.9vw,24px)}
.entry .body p+p{margin-top:13px}
.entry .body p{color:var(--ink-soft)}
.bleed .entry .body p{color:var(--on-forest-2)}
@media(max-width:820px){.entry .idx{font-size:26px}}

/* ---------- rhythm utilities (the four tokens, nothing else) ---------- */
.mt1{margin-top:var(--s1)}.mt2{margin-top:var(--s2)}
.mt3{margin-top:var(--s3)}.mt4{margin-top:var(--s4)}
.mb1{margin-bottom:var(--s1)}.mb2{margin-bottom:var(--s2)}
.mb3{margin-bottom:var(--s3)}
.pb3{padding-bottom:var(--s3)}.pt3{padding-top:var(--s3)}.pt4{padding-top:var(--s4)}
/* measure utilities — [REV-A5] these replace the inline max-width/font-size values */
.w16{max-width:16ch}.w18{max-width:18ch}.w20{max-width:20ch}
.w32{max-width:32ch}.w46{max-width:46ch}.w66{max-width:66ch}
.soft{color:var(--ink-soft)}
.bleed .soft{color:var(--on-forest-2)}

/* ---------- plain lists, no cards ---------- */
.list{list-style:none;display:flex;flex-direction:column}
.list li{padding-block:11px;border-top:1px solid var(--hair);color:var(--ink-soft);
  font-size:16px;line-height:1.45;max-width:60ch}
.list li:first-child{border-top:0;padding-top:0}
.bleed .list li{border-color:var(--hair-dark);color:var(--on-forest-2)}
.list.tick li{padding-left:20px;position:relative}
/* Node bullets (VL §08) — forest on light, not pink: the page's single pink
   permission is already spent on the divider band. */
.list.tick li::before{content:"";position:absolute;left:0;top:19px;width:7px;height:7px;
  background:var(--strike);transform:rotate(45deg)}
.list.tick li:first-child::before{top:8px}
/* [REV-B3] --hair is 1.44:1 and was making these bullets effectively invisible.
   The "what this is not" markers are decorative, so they are now a lighter ink
   rather than a tint that disappears. */
.list.mute li::before{background:var(--ink-soft);opacity:.45}

/* ---------- §04-§05 surfaces: fields ----------
   Four fields exist (Rake, Lattice, Hatch, Node); all tile at 43 degrees.
   THE ONE HARD LIMIT: one surface per document. This site's field is RAKE —
   heavy parallel bars, 30-unit stroke on a 100 tile — because a website's
   hero and full-bleed sections are its covers and section breaks, which is
   exactly what Rake is for. No other field appears anywhere on the site.

   Scale is chosen by the SIZE OF THE AREA, never by taste: the smaller the
   area, the finer the tile.
     fine   14 tile - footer bands and rules, 22px tall; texture, not pattern
     mid    40 tile - half-page dividers and pull-out panels; may carry a label
     coarse 100 tile - covers only, full bleed, forest ground, never on light  */
.rake{--tile:40px;--fc:rgba(24,61,48,.30);
  background-image:repeating-linear-gradient(43deg,
    var(--fc) 0 calc(var(--tile) * 0.3), transparent calc(var(--tile) * 0.3) var(--tile))}
.rake.fine{--tile:14px}
.rake.coarse{--tile:100px}
.bleed .rake,.rake.on-forest{--fc:var(--field);--tile:100px}

/* §05: "Pink on light — 22px band". This is the page's one pink element. */
.rake-band{height:22px;background:var(--bone);
  background-image:repeating-linear-gradient(43deg,
    var(--pink) 0 4.2px, transparent 4.2px 14px)}

/* ---------- logo mark, entry animation (see Motion spec) ---------- */
/* The echo must carry its resting offset or it hides behind the mark. */
.brand svg .echo,.h-m svg .echo{transform:translate(-3.019px,2.624px)}
.anim .h-m svg .echo{animation:mk-echo 1400ms cubic-bezier(.22,.61,.36,1) both}
.anim .h-m svg .mark{animation:mk-mark 1400ms cubic-bezier(.22,.61,.36,1) both}
.anim .h-m svg .nexo{animation:mk-nexo 588ms cubic-bezier(.34,1.3,.64,1) both;
  animation-delay:868ms;transform-origin:50px 50px}
@keyframes mk-echo{0%{transform:translate(-13px,11px);opacity:0}
  55%{opacity:1}100%{transform:translate(-3.019px,2.624px);opacity:1}}
@keyframes mk-mark{0%{transform:translate(9px,-8px);opacity:0}
  55%{opacity:1}100%{transform:translate(0,0);opacity:1}}
@keyframes mk-nexo{0%{transform:scale(0);opacity:0}
  70%{transform:scale(1.18);opacity:1}100%{transform:scale(1);opacity:1}}
@media(prefers-reduced-motion:reduce){
  .anim .h-m svg .echo,.anim .h-m svg .mark,.anim .h-m svg .nexo{
    animation:mk-fade 840ms ease both}
  .anim .h-m svg .echo{transform:translate(-3.019px,2.624px)}
  @keyframes mk-fade{from{opacity:0}to{opacity:1}}
}

/* ---------- logo mark, loading cycle (Motion spec: Cycle) ----------
   Waiting states only, 58px and up, and only while something is genuinely
   loading. Not placed on any page yet — nothing on this static site loads. */
.mark-loading .nexo{animation:mk-turn 2600ms cubic-bezier(.65,0,.35,1) infinite;
  transform-origin:50px 50px}
.mark-loading .echo{animation:mk-breathe 2600ms cubic-bezier(.65,0,.35,1) infinite}
@keyframes mk-turn{0%{transform:rotate(0) scale(1)}
  50%{transform:rotate(180deg) scale(.62)}100%{transform:rotate(360deg) scale(1)}}
@keyframes mk-breathe{0%,100%{transform:translate(-3.019px,2.624px)}
  50%{transform:translate(-5.4px,4.7px)}}
@media(prefers-reduced-motion:reduce){
  .mark-loading .nexo,.mark-loading .echo{animation:none}
  .mark-loading .echo{transform:translate(-3.019px,2.624px)}
}

/* ---------- the detonation: one full-bleed statement ---------- */
.statement{padding-block:clamp(72px,11vw,150px)}
.statement .display{max-width:16ch;margin-bottom:clamp(26px,3.4vw,44px)}
.statement .lede{max-width:60ch}

/* ---------- strip ----------
   [REV-A4] was a space-between flex row, which orphaned GaggiApp onto a second
   line alone at 1440px and read as a mistake rather than a list. */
.strip{padding-block:20px;border-top:1px solid var(--strike);border-bottom:1px solid var(--strike)}
.strip .wrap{display:grid;grid-template-columns:1fr;gap:10px}
.strip .item{font-size:15px;color:var(--ink-soft)}
.strip .item b{font-family:'Space Grotesk',sans-serif;font-weight:500;color:var(--ink)}
.strip a{box-shadow:0 1px 0 var(--strike)}
@media(min-width:821px){
  .strip .wrap{grid-template-columns:auto 1fr 1fr;gap:clamp(20px,3vw,40px);
    align-items:baseline}
}

/* ---------- footer ----------
   [REV-A3] grid-template-columns was 1.7fr repeat(3,1fr) — four tracks for five
   children, so "Language" fell into an implicit second row under the brand and
   read as an orphan rather than a peer. */
footer.site{background:var(--strike-deep);color:var(--on-forest-3);
  padding-block:clamp(52px,6vw,84px) 30px}
footer.site .cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,4vw,44px)}
@media(min-width:821px){footer.site .cols{grid-template-columns:1.6fr repeat(4,1fr)}}
footer.site .fh{font-family:'IBM Plex Mono',monospace;font-size:11px;
  letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--on-forest-5);
  margin-bottom:14px;font-weight:500}
footer.site ul{list-style:none;display:flex;flex-direction:column;gap:9px;font-size:15px}
footer.site a:hover{color:var(--bone)}
footer.site .soon{color:var(--on-forest-5)}
footer.site .brand{color:var(--bone);margin-bottom:14px;gap:8px}
footer.site .brand svg{color:var(--bone);width:26px;height:26px}
footer.site .fnote{font-size:15px;max-width:32ch}
footer.site .end{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:clamp(34px,4vw,58px);padding-top:20px;border-top:1px solid var(--hair-dark);
  font-family:'IBM Plex Mono',monospace;font-size:11px;
  letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--on-forest-5)}

/* ---------- mockup banner ---------- */
.mockbar{background:var(--strike);color:var(--bone);font-family:'IBM Plex Mono',monospace;
  font-size:11px;letter-spacing:var(--track-caps);text-transform:uppercase;
  text-align:center;padding:7px 16px}
@media print{.mockbar{display:none}}