/* ===================================================================
   GORILLO 2026 — design system
   Self-contained. Every class is g- prefixed, so it never collides with
   the Webflow stylesheet that the remaining legacy pages still load.
   Dark premium DTC supplement look: one product, one price, one CTA.
   =================================================================== */

/* ---------- tokens ---------- */
:root{
  --g-bg:        #060607;
  --g-bg-2:      #0b0b0d;
  --g-surface:   #101013;
  --g-surface-2: #17171b;
  --g-line:      rgba(255,255,255,.10);
  --g-line-2:    rgba(255,255,255,.06);

  --g-gold:      #D4AF37;
  --g-gold-2:    #F2D877;
  --g-gold-dim:  rgba(212,175,55,.14);

  --g-text:      #F4F4F2;
  --g-muted:     rgba(244,244,242,.62);
  --g-faint:     rgba(244,244,242,.58);

  --g-wrap:      1180px;
  --g-gut:       clamp(20px, 4vw, 40px);
  --g-sect:      clamp(64px, 8vw, 116px);
  --g-r:         14px;

  --g-display: 'Oswald', 'Arial Narrow', system-ui, sans-serif;
  --g-body:    'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ---------- reset ---------- */
.g-page *,
.g-page *::before,
.g-page *::after{ box-sizing:border-box; }

body.g-body{
  margin:0;
  background:var(--g-bg);
  color:var(--g-text);
  font-family:var(--g-body);
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
.g-page img{ max-width:100%; height:auto; display:block; }
.g-page a{ color:inherit; text-decoration:none; }
.g-page p{ margin:0 0 1em; }
.g-page p:last-child{ margin-bottom:0; }

.g-wrap{ width:100%; max-width:var(--g-wrap); margin-inline:auto; padding-inline:var(--g-gut); }
.g-sect{ padding-block:var(--g-sect); position:relative; }
.g-sect--tight{ padding-block:clamp(44px,5vw,72px); }
.g-alt{ background:var(--g-bg-2); }

/* ---------- typography ---------- */
.g-h1,.g-h2,.g-h3,.g-eyebrow{ font-family:var(--g-display); font-weight:600; margin:0; text-transform:uppercase; }
.g-h1{
  font-weight:700;
  font-size:clamp(2.7rem, 6.4vw, 5.1rem);
  line-height:.94;
  letter-spacing:-.005em;
}
.g-h2{
  font-size:clamp(1.85rem, 3.6vw, 2.9rem);
  line-height:1.06;
  letter-spacing:.005em;
}
.g-h3{ font-size:clamp(1.05rem,1.5vw,1.25rem); line-height:1.25; letter-spacing:.03em; }
.g-eyebrow{
  font-size:.72rem; font-weight:500; letter-spacing:.34em;
  color:var(--g-gold); margin-bottom:16px;
}
.g-lead{ font-size:clamp(1rem,1.25vw,1.12rem); color:var(--g-muted); max-width:56ch; }
.g-muted{ color:var(--g-muted); }
.g-gold{ color:var(--g-gold); }

/* section header block */
.g-shead{ max-width:62ch; margin-bottom:clamp(32px,4vw,54px); }
.g-shead--center{ margin-inline:auto; text-align:center; }
.g-shead .g-lead{ margin-top:16px; }
.g-shead--center .g-lead{ margin-inline:auto; }

/* ---------- buttons ---------- */
.g-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--g-display); font-weight:600;
  font-size:.88rem; letter-spacing:.14em; text-transform:uppercase;
  padding:16px 30px; border-radius:8px; border:1px solid transparent;
  cursor:pointer; transition:transform .18s ease, background .18s ease, box-shadow .22s ease, border-color .18s ease;
  line-height:1; text-align:center;
}
.g-btn--primary{ background:var(--g-gold); color:#0a0a0a; border-color:var(--g-gold); }
.g-btn--primary:hover{ background:var(--g-gold-2); border-color:var(--g-gold-2); transform:translateY(-2px); box-shadow:0 14px 34px rgba(212,175,55,.26); }
.g-btn--ghost{ background:transparent; color:var(--g-text); border-color:var(--g-line); }
.g-btn--ghost:hover{ border-color:var(--g-gold); color:var(--g-gold); transform:translateY(-2px); }
.g-btn--lg{ padding:19px 38px; font-size:.95rem; }
.g-btn--block{ width:100%; }

/* ---------- announcement bar ---------- */
.g-topbar{
  background:var(--g-gold); color:#0a0a0a;
  font-family:var(--g-display); font-weight:500;
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
}
.g-topbar__in{
  display:flex; gap:34px; align-items:center; justify-content:center;
  padding:9px var(--g-gut); flex-wrap:wrap; text-align:center;
}
.g-topbar__in span{ display:inline-flex; align-items:center; gap:8px; }
/* Two messages still wrapped onto two lines at 420px, costing 91px of the
   first screen. Below 720px keep two, below 560px keep only the first. */
@media (max-width:720px){
  .g-topbar__in{ gap:20px; padding-block:7px; }
  .g-topbar__in span:nth-child(n+3){ display:none; }
}
@media (max-width:560px){
  .g-topbar__in span:nth-child(n+2){ display:none; }
}

/* ---------- header ---------- */
.g-head{
  position:sticky; top:0; z-index:900;
  background:rgba(6,6,7,.82);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--g-line-2);
}
.g-head__in{
  display:flex; align-items:center; gap:28px;
  min-height:74px;
}
.g-head__logo img{ height:46px; width:auto; }
.g-nav{ display:flex; gap:30px; margin-left:auto; }
.g-nav a{
  font-family:var(--g-display); font-weight:500;
  font-size:.85rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--g-muted); padding-block:6px; position:relative;
  transition:color .18s ease;
}
.g-nav a:hover, .g-nav a[aria-current="page"]{ color:var(--g-text); }
.g-nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--g-gold); transform:scaleX(0); transform-origin:left;
  transition:transform .2s ease;
}
.g-nav a:hover::after, .g-nav a[aria-current="page"]::after{ transform:scaleX(1); }
.g-head__cta{ flex:none; }
.g-head__cta .g-btn{ padding:13px 22px; font-size:.8rem; }

/* mobile menu */
/* border at --g-line (10% white) was almost invisible on the near-black
   header in a real capture; the menu button has to read as a button. */
.g-burger{
  display:none; margin-left:auto; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.22);
  border-radius:8px; width:44px; height:44px; cursor:pointer; padding:0;
  align-items:center; justify-content:center; flex-direction:column; gap:5px;
}
.g-burger span{ display:block; width:19px; height:2px; background:var(--g-text); transition:transform .2s ease, opacity .2s ease; }
.g-head.is-open .g-burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.g-head.is-open .g-burger span:nth-child(2){ opacity:0; }
.g-head.is-open .g-burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width:900px){
  .g-burger{ display:flex; }
  .g-nav{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0; margin:0;
    background:var(--g-bg-2); border-bottom:1px solid var(--g-line);
    padding:8px var(--g-gut) 20px;
    display:none;
  }
  .g-head.is-open .g-nav{ display:flex; }
  .g-nav a{ padding:15px 0; border-bottom:1px solid var(--g-line-2); font-size:1rem; }
  .g-nav a::after{ display:none; }
  .g-head__cta{ display:none; }
}

/* ---------- hero ---------- */
.g-hero{
  position:relative; overflow:hidden;
  padding-block:clamp(52px,7vw,104px) clamp(52px,7vw,96px);
  background:
    radial-gradient(120% 90% at 78% 42%, rgba(212,175,55,.16) 0%, rgba(212,175,55,0) 58%),
    linear-gradient(180deg, #08080a 0%, var(--g-bg) 100%);
}
.g-hero__bg{
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center;
  opacity:.20; filter:grayscale(.35) contrast(1.05);
}
.g-hero__bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, var(--g-bg) 8%, rgba(6,6,7,.72) 46%, rgba(6,6,7,.42) 100%);
}
.g-hero__in{ position:relative; z-index:1; display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(28px,5vw,64px); align-items:center; }
.g-hero__copy{ min-width:0; }
.g-hero .g-h1{ margin-bottom:22px; }
.g-hero .g-h1 em{ font-style:normal; color:var(--g-gold); display:block; }
.g-hero__sub{ font-size:clamp(1rem,1.3vw,1.14rem); color:var(--g-muted); max-width:46ch; margin-bottom:28px; }

.g-hero__buy{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:26px; }
.g-price{ font-family:var(--g-display); font-weight:600; font-size:1.85rem; line-height:1; }
.g-price small{ display:block; font-family:var(--g-body); font-weight:400; font-size:.74rem; letter-spacing:.05em; color:var(--g-faint); margin-top:7px; text-transform:none; }

.g-hero__shot{ position:relative; display:flex; justify-content:center; align-items:center; min-width:0; }
.g-hero__shot::before{
  content:""; position:absolute; width:96%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(212,175,55,.30) 0%, rgba(212,175,55,0) 66%);
  filter:blur(18px);
}
/* the pack shot is a portrait cut-out (gorillo-pot.webp, 900x1370), so it is
   capped on WIDTH and gets a light rim so the near-black pot separates from
   the near-black hero. */
.g-hero__shot img{
  position:relative; width:100%; max-width:372px;
  filter:drop-shadow(0 30px 55px rgba(0,0,0,.8)) drop-shadow(0 0 26px rgba(212,175,55,.16));
}

@media (max-width:900px){
  .g-hero__in{ grid-template-columns:1fr; }
  .g-hero__shot{ order:0; }
  .g-hero__shot img{ max-width:330px; }
  .g-hero__sub{ max-width:none; }
}
/* Phones: a full-bleed pack shot pushed the headline to 780px and the buy
   button to 1048px — both below a 900px fold. Headline first, smaller shot,
   so the promise and the price are on the first screen. */
@media (max-width:600px){
  .g-hero{ padding-block:26px 44px; }
  .g-hero__in{ gap:22px; }
  .g-hero__shot{ order:0; }
  .g-hero__shot img{ max-width:236px; }
  .g-hero__shot::before{ width:70%; }
  .g-hero .g-h1{ margin-bottom:16px; }
  .g-hero__sub{ margin-bottom:20px; }
  .g-hero__buy{ gap:14px; margin-bottom:20px; }
  .g-hero__buy .g-btn{ flex:1 1 100%; }
}

/* rating */
.g-rating{ display:inline-flex; align-items:center; gap:10px; margin-bottom:20px; font-size:.86rem; color:var(--g-muted); }
.g-stars{ display:inline-flex; gap:2px; color:var(--g-gold); letter-spacing:1px; font-size:.95rem; }

/* trust chips under the CTA */
.g-chips{ display:flex; flex-wrap:wrap; gap:9px; list-style:none; margin:0; padding:0; }
.g-chips li{
  font-size:.74rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--g-muted); border:1px solid var(--g-line);
  border-radius:100px; padding:7px 14px; background:rgba(255,255,255,.02);
}

/* ---------- trust strip ---------- */
.g-strip{ border-block:1px solid var(--g-line-2); background:var(--g-bg-2); }
.g-strip__in{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--g-line-2); }
.g-strip__item{ background:var(--g-bg-2); padding:26px 22px; text-align:center; }
.g-strip__item strong{ display:block; font-family:var(--g-display); font-weight:600; font-size:.94rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:5px; }
.g-strip__item span{ font-size:.8rem; color:var(--g-faint); }
@media (max-width:760px){ .g-strip__in{ grid-template-columns:repeat(2,1fr); } }

/* ---------- generic card grid ---------- */
.g-grid{ display:grid; gap:20px; }
.g-grid--3{ grid-template-columns:repeat(3,1fr); }
.g-grid--4{ grid-template-columns:repeat(4,1fr); }
.g-grid--2{ grid-template-columns:repeat(2,1fr); }
@media (max-width:960px){ .g-grid--4{ grid-template-columns:repeat(2,1fr); } .g-grid--3{ grid-template-columns:1fr; } }
@media (max-width:680px){ .g-grid--4,.g-grid--2{ grid-template-columns:1fr; } }

.g-card{
  background:var(--g-surface); border:1px solid var(--g-line-2);
  border-radius:var(--g-r); padding:30px 26px;
  transition:border-color .22s ease, transform .22s ease, background .22s ease;
  display:flex; flex-direction:column;
}
.g-card:hover{ border-color:rgba(212,175,55,.34); transform:translateY(-3px); background:var(--g-surface-2); }
.g-card .g-h3{ margin-bottom:11px; }
.g-card p{ font-size:.93rem; color:var(--g-muted); }
.g-card__num{
  font-family:var(--g-display); font-weight:700; font-size:1.6rem;
  color:var(--g-gold); line-height:1; margin-bottom:16px; display:block;
}
.g-card__ico{
  width:44px; height:44px; border-radius:11px; margin-bottom:18px;
  background:var(--g-gold-dim); border:1px solid rgba(212,175,55,.26);
  display:flex; align-items:center; justify-content:center; color:var(--g-gold); flex:none;
}
.g-card__ico svg{ width:21px; height:21px; }
.g-card__more{
  margin-top:auto; padding-top:18px;
  font-family:var(--g-display); font-weight:500; font-size:.78rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--g-gold);
}

/* ---------- ingredient table ---------- */
.g-ing{ border:1px solid var(--g-line); border-radius:var(--g-r); overflow:hidden; background:var(--g-surface); }
.g-ing__scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.g-ing table{ width:100%; border-collapse:collapse; min-width:620px; }
.g-ing th, .g-ing td{ padding:16px 20px; text-align:left; border-bottom:1px solid var(--g-line-2); font-size:.92rem; }
.g-ing thead th{
  background:var(--g-bg-2); font-family:var(--g-display); font-weight:600;
  font-size:.76rem; letter-spacing:.15em; text-transform:uppercase; color:var(--g-faint);
  white-space:nowrap;
}
.g-ing tbody tr:last-child td{ border-bottom:0; }
.g-ing tbody tr:hover{ background:rgba(255,255,255,.02); }
.g-ing td:first-child{ font-weight:600; color:var(--g-text); }
.g-ing td.g-dose{ font-family:var(--g-display); font-weight:600; color:var(--g-gold); white-space:nowrap; letter-spacing:.02em; }
.g-ing td:last-child{ color:var(--g-muted); }
.g-ing__note{ padding:16px 20px; font-size:.82rem; color:var(--g-faint); background:var(--g-bg-2); border-top:1px solid var(--g-line-2); }

/* Phones: min-width:620px inside overflow-x:auto silently pushed "Per dag"
   and "Functie" off-screen with no affordance — on the site's single best
   asset, on the majority device. Restack as one card per ingredient, with the
   column name coming from each cell's data-label. */
@media (max-width:820px){
  .g-ing__scroll{ overflow-x:visible; }
  .g-ing table{ min-width:0; display:block; }
  .g-ing thead{ display:none; }
  .g-ing tbody, .g-ing tr, .g-ing td{ display:block; width:100%; }
  .g-ing tr{ border-bottom:1px solid var(--g-line-2); padding:6px 0; }
  .g-ing tr:last-child{ border-bottom:0; }
  .g-ing td{ border:0; padding:7px 18px; display:flex; gap:14px; align-items:baseline; }
  .g-ing td::before{
    content:attr(data-label);
    flex:0 0 44%;
    font-family:var(--g-display); font-weight:500;
    font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
    color:var(--g-faint);
  }
  .g-ing td:first-child{
    padding-top:16px;
    font-family:var(--g-display); font-size:1.02rem; letter-spacing:.04em;
    text-transform:uppercase;
  }
  .g-ing td:first-child::before{ content:none; }
}

/* ---------- coaching band ---------- */
.g-band{ position:relative; overflow:hidden; }
.g-band__bg{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:.30; }
.g-band__bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(6,6,7,.86) 0%, rgba(6,6,7,.70) 50%, rgba(6,6,7,.94) 100%); }
.g-band__in{ position:relative; z-index:1; }

/* ---------- steps ---------- */
.g-steps{ counter-reset:s; display:grid; gap:18px; grid-template-columns:repeat(3,1fr); }
@media (max-width:820px){ .g-steps{ grid-template-columns:1fr; } }
.g-step{ border-left:2px solid var(--g-gold); padding:4px 0 4px 22px; }
.g-step h3{ font-family:var(--g-display); font-weight:600; font-size:1rem; letter-spacing:.09em; text-transform:uppercase; margin:0 0 8px; }
.g-step p{ font-size:.92rem; color:var(--g-muted); }

/* legal / safety small print. Boxed rather than loose under a column grid,
   so it reads as a separate note instead of colliding with the steps above. */
.g-note{
  border-left:2px solid var(--g-line);
  padding:14px 0 14px 20px;
  font-size:.85rem; line-height:1.75;
  color:var(--g-faint); max-width:78ch;
}

/* ---------- guarantee ---------- */
.g-guar{
  border:1px solid rgba(212,175,55,.28); border-radius:var(--g-r);
  background:linear-gradient(140deg, rgba(212,175,55,.09), rgba(212,175,55,0) 62%), var(--g-surface);
  padding:clamp(30px,4vw,46px);
  display:grid; grid-template-columns:auto 1fr auto; gap:clamp(22px,3vw,38px); align-items:center;
}
@media (max-width:820px){ .g-guar{ grid-template-columns:1fr; text-align:center; justify-items:center; } }
.g-guar__seal{
  width:82px; height:82px; border-radius:50%; flex:none;
  border:2px solid var(--g-gold); color:var(--g-gold);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-family:var(--g-display); font-weight:700; line-height:1;
}
.g-guar__seal b{ font-size:1.5rem; }
.g-guar__seal span{ font-size:.55rem; letter-spacing:.16em; margin-top:3px; }

/* ---------- FAQ ---------- */
.g-faq{ border-top:1px solid var(--g-line-2); }
.g-faq details{ border-bottom:1px solid var(--g-line-2); }
.g-faq summary{
  list-style:none; cursor:pointer; padding:22px 46px 22px 0; position:relative;
  font-family:var(--g-display); font-weight:500; font-size:1.02rem; letter-spacing:.02em;
  transition:color .18s ease;
}
.g-faq summary::-webkit-details-marker{ display:none; }
.g-faq summary:hover{ color:var(--g-gold); }
.g-faq summary::after{
  content:""; position:absolute; right:6px; top:50%; width:12px; height:12px;
  border-right:2px solid var(--g-gold); border-bottom:2px solid var(--g-gold);
  transform:translateY(-70%) rotate(45deg); transition:transform .22s ease;
}
.g-faq details[open] summary::after{ transform:translateY(-30%) rotate(-135deg); }
.g-faq__a{ padding:0 0 24px; max-width:74ch; color:var(--g-muted); font-size:.94rem; }

/* ---------- form ---------- */
.g-form{ display:grid; gap:16px; grid-template-columns:repeat(2,1fr); }
.g-form .g-full{ grid-column:1 / -1; }
@media (max-width:680px){ .g-form{ grid-template-columns:1fr; } }
.g-field label{
  display:block; font-family:var(--g-display); font-weight:500;
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--g-faint); margin-bottom:8px;
}
.g-field input, .g-field textarea{
  width:100%; background:var(--g-surface); color:var(--g-text);
  border:1px solid rgba(255,255,255,.24); border-radius:9px;
  padding:14px 16px; font-family:var(--g-body); font-size:.95rem;
  transition:border-color .18s ease, background .18s ease;
}
.g-field textarea{ min-height:150px; resize:vertical; }
.g-field input:focus, .g-field textarea:focus{ outline:none; border-color:var(--g-gold); background:var(--g-surface-2); }
.g-field input::placeholder, .g-field textarea::placeholder{ color:rgba(244,244,242,.46); }
.g-page .w-form-done, .g-page .w-form-fail{
  background:var(--g-surface); border:1px solid var(--g-line);
  border-radius:9px; padding:20px; color:var(--g-text); margin-top:16px;
}
.g-page .w-form-fail{ border-color:#7c2d3a; }

/* ---------- footer ---------- */
.g-foot{ background:#050506; border-top:1px solid var(--g-line-2); padding-block:clamp(48px,6vw,72px) 30px; }
.g-foot__top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:36px; }
@media (max-width:900px){ .g-foot__top{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .g-foot__top{ grid-template-columns:1fr; } }
.g-foot img.g-foot__logo{ height:56px; width:auto; margin-bottom:18px; }
.g-foot h4{
  font-family:var(--g-display); font-weight:600; font-size:.76rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--g-faint);
  margin:0 0 16px;
}
.g-foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.g-foot a{ color:var(--g-muted); font-size:.9rem; transition:color .18s ease; }
.g-foot a:hover{ color:var(--g-gold); }
.g-foot address{ font-style:normal; color:var(--g-muted); font-size:.9rem; line-height:1.85; }
.g-pay{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:18px; }
.g-pay img{ height:26px; width:auto; background:#fff; border-radius:5px; padding:4px 7px; }
.g-foot__bar{
  margin-top:44px; padding-top:22px; border-top:1px solid var(--g-line-2);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:.8rem; color:var(--g-faint);
}
.g-social{ display:flex; gap:14px; }
.g-social a{ color:var(--g-faint); }
.g-social svg{ width:18px; height:18px; }

/* ---------- sticky mobile buy bar ---------- */
.g-buybar{
  position:fixed; left:0; right:0; bottom:0; z-index:880;
  background:rgba(11,11,13,.96); backdrop-filter:blur(12px);
  border-top:1px solid var(--g-line);
  padding:11px var(--g-gut); display:none;
  align-items:center; gap:14px;
  transform:translateY(110%); transition:transform .28s ease;
}
.g-buybar.is-on{ transform:translateY(0); }
.g-buybar__p{ font-family:var(--g-display); font-weight:600; font-size:1.05rem; line-height:1.15; flex:none; }
.g-buybar__p small{ display:block; font-family:var(--g-body); font-weight:400; font-size:.68rem; color:var(--g-faint); }
.g-buybar .g-btn{ margin-left:auto; padding:14px 22px; font-size:.8rem; }
@media (max-width:820px){
  .g-buybar{ display:flex; }
  body.g-body{ padding-bottom:0; }
}

/* the consent banner sits above the buy bar */
#gorillo-consent{ z-index:99999 !important; }

/* ---------- anchor alignment ----------
   The header is position:sticky, so a browser landing on /coaching#training
   from another page scrolls the target to y=0 and the header then covers its
   heading. The in-page JS applies an offset, but a hash arriving with the
   navigation never goes through that JS. scroll-margin-top fixes both cases
   natively, including the back button restoring a hash. */
.g-page :where(section, .g-sect, .g-band)[id]{ scroll-margin-top:96px; }
@media (max-width:900px){
  .g-page :where(section, .g-sect, .g-band)[id]{ scroll-margin-top:84px; }
}
/* Deliberately NO scroll-behavior:smooth. Measured on this machine, smooth
   scrolling is a complete no-op (prefers-reduced-motion is off and a direct
   window.scrollTo({behavior:'smooth'}) never moves) — with it declared, an
   anchor sets the hash and then does not scroll at all. An instant jump that
   always lands, correctly offset by scroll-margin-top, beats an animation
   that silently swallows the navigation. */

/* ---------- misc ---------- */
.g-hr{ border:0; border-top:1px solid var(--g-line-2); margin:0; }
.g-center{ text-align:center; }
.g-mt{ margin-top:clamp(28px,3.5vw,42px); }
@media (prefers-reduced-motion:reduce){
  .g-page *{ transition:none !important; animation:none !important; }
}