/* ==========================================================================
   Dhan Games - "Table Green"
   Light-locked. Cool paper ground, ONE accent (dark green).
   Hairlines are the accent at low alpha, so the page stays one family.
   Shape system: all-sharp (radius 0). Ornament: jaali lattice.
   Aesthetic family, not an official design system. Native CSS, no framework.
   ========================================================================== */

:root {
  /* Ground - light theme is locked for the whole site.
     Cool paper with a faint green cast, deliberately NOT warm cream. */
  --paper:     #f1f3ef;
  --paper-1:   #e9ece5;
  --paper-2:   #dfe4dc;
  --paper-3:   #d4dbd1;

  /* ONE accent: dark green. Used identically on every section. */
  --accent:     #154734;
  --accent-hi:  #1d6349;
  --accent-dim: rgba(21, 71, 52, .10);

  /* Hairlines are the accent at low alpha, so the page stays one family */
  --hair:       rgba(21, 71, 52, .22);
  --hair-soft:  rgba(21, 71, 52, .11);

  --ink:       #0e1712;
  --ink-dim:   #4b5a51;
  --ink-faint: #57655c;

  --font-display: 'Bricolage Grotesque', 'Familjen Grotesk', system-ui, sans-serif;
  --font-body:    'Familjen Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono:    'Martian Mono', ui-monospace, 'SF Mono', monospace;

  /* Shape lock: everything is square. */
  --r: 0px;

  /* Shared content width - every bounded element sits on these two guides */
  --container: 1200px;
  --gutter:    1.5rem;
  --nav-h:     4.25rem;

  --z-nav: 40;
  --z-overlay: 60;
  --z-grain: 80;
}

*, *::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;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.62;
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Fixed grain. pointer-events:none, never on a scrolling container. */
body::after {
  content: '';
  position: fixed; inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: .28;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
}

img, svg { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  margin: 0 0 .5em;
  color: var(--ink);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.02;
  font-variation-settings: 'wdth' 88;
}
h1 { font-size: clamp(2.6rem, 1.4rem + 5.2vw, 5.6rem); }
h2 { font-size: clamp(1.9rem, 1.2rem + 2.9vw, 3.4rem); }
h3 { font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); letter-spacing: -.02em; }
h4 { font-size: .95rem; font-weight: 700; letter-spacing: -.01em; }

p { margin: 0 0 1.1rem; color: var(--ink-dim); }
ul, ol { margin: 0 0 1.1rem; padding-left: 1.2rem; color: var(--ink-dim); }
li { margin-bottom: .5rem; }
strong { color: var(--ink); font-weight: 700; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-hi); }

::selection { background: var(--accent); color: var(--paper); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--accent); color: var(--paper);
  padding: .75rem 1.25rem; font-weight: 700;
}
.skip-link:focus { left: 0; }

/* --- the two guides every bounded element shares -------------------------
   .container is the ONLY width cap on the page. Headings, paragraphs and
   list text are never given a narrower reading measure. */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* --- jaali lattice: the brand ornament ----------------------------------- */
.jaali {
  background-image:
    repeating-linear-gradient(45deg,  transparent 0 11px, var(--hair-soft) 11px 12px),
    repeating-linear-gradient(-45deg, transparent 0 11px, var(--hair-soft) 11px 12px);
}

/* --- labels -------------------------------------------------------------- */
.label {
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}

.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.04em;
}

/* --- buttons: square, one accent ---------------------------------------- */
.btn, .btn-2 {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem;
  padding: .85rem 1.6rem;
  font-family: var(--font-mono);
  font-size: .78rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--r);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .12s ease;
}
/* Paper on dark green. The accent is dark enough that light text is the
   readable direction here (12.0:1). */
.btn { background: var(--accent); color: var(--paper); }
.btn:hover { background: var(--accent-hi); color: var(--paper); }
.btn:active { transform: translateY(1px); }
.btn-2 { background: transparent; color: var(--accent); border-color: var(--accent); }
.btn-2:hover { background: var(--accent); color: var(--paper); border-color: var(--accent); }
.btn-2:active { transform: translateY(1px); }

/* ======================================================== masthead ======= */
.mast { position: relative; z-index: var(--z-nav); }

/* Marquee trust strip - the page's ONE marquee */
.ticker {
  border-bottom: 1px solid var(--hair);
  background: var(--paper-1);
  overflow: hidden;
}
.ticker-track {
  display: flex; width: max-content;
  animation: slide 42s linear infinite;
}
.ticker-track span {
  font-family: var(--font-mono);
  font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-faint);
  padding: .5rem 0;
  padding-right: 2.6rem;
  white-space: nowrap;
}
.ticker-track span b { color: var(--accent); font-weight: 600; }
@keyframes slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
}

.nav-bar { border-bottom: 1px solid var(--hair); background: var(--paper); }
.nav-bar .container {
  min-height: var(--nav-h);
  display: flex; align-items: center; gap: 1.25rem;
}
.mast.stuck { position: sticky; top: 0; }

.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; flex-shrink: 0; }
.brand img { height: 34px; width: auto; object-fit: contain; }
.brand-name {
  font-family: var(--font-display);
  font-weight: 800; font-size: 1.05rem; letter-spacing: -.03em;
  color: var(--ink);
  font-variation-settings: 'wdth' 82;
}

.nav { margin-left: auto; }
.nav ul { display: flex; align-items: center; gap: 0; list-style: none; margin: 0; padding: 0; }
.nav li { margin: 0; }
.nav a {
  display: block; padding: .5rem .85rem;
  font-family: var(--font-mono);
  font-size: .72rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-dim); text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color .18s ease, border-color .18s ease;
  white-space: nowrap;
}
.nav a:hover { color: var(--ink); }
.nav a.active { color: var(--ink); border-bottom-color: var(--accent); }

.nav-cta { flex-shrink: 0; }
.nav-cta .btn { min-height: 2.6rem; padding: .6rem 1.15rem; }
/* The in-menu CTA exists only for the mobile overlay. */
.menu-cta { display: none; }

.burger {
  display: none;
  width: 44px; height: 44px; margin-left: auto;
  background: transparent; border: 1px solid rgba(21,71,52,.62);
  border-radius: var(--r); cursor: pointer; padding: 0; position: relative;
}
.burger span {
  position: absolute; left: 12px; width: 18px; height: 1.5px;
  background: var(--accent);
  transition: transform .28s cubic-bezier(.2,.8,.3,1), opacity .18s ease, top .28s ease;
}
.burger span:nth-child(1) { top: 16px; }
.burger span:nth-child(2) { top: 21px; }
.burger span:nth-child(3) { top: 26px; }
body.menu-open .burger span:nth-child(1) { top: 21px; transform: rotate(45deg); }
body.menu-open .burger span:nth-child(2) { opacity: 0; }
body.menu-open .burger span:nth-child(3) { top: 21px; transform: rotate(-45deg); }

/* ============================================================ hero ======= */
.hero {
  position: relative;
  padding-top: clamp(2.5rem, 1.5rem + 4vw, 5rem);
  padding-bottom: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  overflow: hidden;
}
.hero::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(760px 440px at 88% 6%, rgba(21,71,52,.10), transparent 68%),
    radial-gradient(640px 520px at 2% 94%, rgba(21,71,52,.06), transparent 66%);
  pointer-events: none;
}
.hero .container { position: relative; }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  align-items: end;
}
.hero-type { min-width: 0; }
.hero h1 {
  margin: 0 0 1.4rem;
  font-variation-settings: 'wdth' 78;
  text-wrap: balance;
}
.hero h1 .em {
  font-style: italic;
  color: var(--accent);
  line-height: 1.1;
  padding-bottom: .06em;
  display: inline-block;
}
.hero-sub {
  font-size: clamp(1rem, .95rem + .35vw, 1.2rem);
  color: var(--ink-dim);
  margin: 0 0 2rem;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* Hero figures: numbers set as type, not as stat cards */
.hero-figures {
  min-width: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--hair-soft);
  border: 1px solid var(--hair);
}
.figure { background: var(--paper); padding: 1.15rem 1.1rem; }
.figure .v {
  display: block;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem);
  font-weight: 700; letter-spacing: -.06em;
  color: var(--ink); line-height: 1;
}
.figure .k {
  display: block; margin-top: .5rem;
  font-family: var(--font-mono);
  font-size: .6rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-faint); line-height: 1.35;
}
.figure:nth-child(1) .v { color: var(--accent); }

.hero-media {
  margin-top: clamp(1.75rem, 1rem + 2.5vw, 3rem);
  position: relative;
  border: 1px solid var(--hair);
}
.hero-media img {
  width: 100%; height: auto;
  aspect-ratio: 21 / 9; object-fit: cover;
  filter: saturate(.92) contrast(1.02);
}
.hero-media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 52%, rgba(241,243,239,.72) 100%);
  pointer-events: none;
}

/* ========================================================= sections ====== */
.sec { padding-block: clamp(3.5rem, 2rem + 5vw, 7rem); }
.sec--tight { padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.sec--rule { border-top: 1px solid var(--hair-soft); }

.sec-head { margin-bottom: clamp(1.75rem, 1rem + 2vw, 3rem); }
.sec-head h2 { margin: 0 0 .85rem; text-wrap: balance; }
.sec-head > :last-child { margin-bottom: 0; }
.sec-head .label { display: block; margin-bottom: .9rem; }

/* --- FAMILY 1: slab (flat panel, no card, no shadow) -------------------- */
.slab {
  width: 100%;
  border-left: 2px solid var(--accent);
  background: var(--paper-1);
  padding: clamp(1.6rem, 1.1rem + 2vw, 2.75rem);
}
.slab > :last-child { margin-bottom: 0; }
.slab h2 { margin-bottom: 1.1rem; }
.slab p { color: var(--ink-dim); }

/* --- FAMILY 2: index (numbered type rows, hairline dividers) ------------- */
.index-list { width: 100%; border-top: 1px solid var(--hair-soft); }
.index-row {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr) minmax(0, 1.35fr);
  gap: clamp(1rem, .6rem + 1.4vw, 2.25rem);
  align-items: baseline;
  padding-block: clamp(1.15rem, .9rem + .8vw, 1.75rem);
  border-bottom: 1px solid var(--hair-soft);
  transition: background .2s ease, padding-left .2s ease;
}
.index-row:hover { background: rgba(21,71,52,.05); }
.index-row .i {
  font-family: var(--font-mono);
  font-size: .72rem; font-weight: 600;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.index-row h3 { margin: 0; }
.index-row .d { margin: 0; color: var(--ink-dim); font-size: .97rem; }
.index-row .d > :last-child { margin-bottom: 0; }

/* --- FAMILY 3: rail (horizontal scroll journey) ------------------------- */
/* The rail BOX sits on both guides; its contents scroll inside it. */
.rail {
  width: 100%;
  display: flex;
  gap: 1px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border: 1px solid var(--hair);
  background: var(--hair-soft);
  cursor: grab;
  overscroll-behavior-x: contain;
}
.rail::-webkit-scrollbar { display: none; }
.rail.dragging { cursor: grabbing; scroll-snap-type: none; }
.rail-card {
  scroll-snap-align: start;
  flex: 0 0 clamp(15rem, 30%, 21rem);
  background: var(--paper);
  padding: clamp(1.4rem, 1rem + 1.2vw, 2rem);
  display: flex; flex-direction: column;
  min-height: 17rem;
}
/* Counter, heading and body all flow from the top so every card in the rail
   shares one baseline. An auto margin here would drop short cards. */
.rail-card .i {
  font-family: var(--font-mono);
  font-size: .68rem; color: var(--accent);
  margin-bottom: 1.75rem;
  font-variant-numeric: tabular-nums;
}
.rail-card h3 { margin: 0 0 .6rem; }
.rail-card p { margin: 0; font-size: .94rem; }
.rail-card ul { margin: .6rem 0 0; font-size: .92rem; }
.rail-hint {
  display: flex; align-items: center; gap: .6rem;
  margin-top: .9rem;
  font-family: var(--font-mono);
  font-size: .62rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-faint);
}
.rail-hint i { flex: 1; height: 1px; background: var(--hair-soft); font-style: normal; }

/* --- FAMILY 4: stack (sticky heading, scrolling blocks) ------------------ */
.stack {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(1.5rem, 1rem + 2vw, 3.5rem);
  align-items: start;
}
.stack-head { position: sticky; top: calc(var(--nav-h) + 2rem); }
.stack-head h2 { margin-bottom: .9rem; }
.stack-head p { margin-bottom: 0; }
.stack-body { min-width: 0; display: grid; gap: 1px; background: var(--hair-soft); border-block: 1px solid var(--hair-soft); }
.stack-block { background: var(--paper); padding: clamp(1.3rem, 1rem + 1vw, 1.9rem) 0; }
.stack-block h3 { margin: 0 0 .6rem; }
.stack-block > :last-child { margin-bottom: 0; }
.stack-block h4 {
  margin: 1.35rem 0 .7rem;
  font-family: var(--font-mono);
  font-size: .66rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent);
}
.stack-block ul { list-style: none; padding: 0; margin: .8rem 0 0; }
.stack-block li {
  padding: .45rem 0 .45rem 1.35rem;
  position: relative;
  font-size: .95rem;
  border-top: 1px solid var(--hair-soft);
}
.stack-block li:first-child { border-top: 0; }
.stack-block li::before {
  content: ''; position: absolute; left: 0; top: 1.05em;
  width: .55rem; height: 1px; background: var(--accent);
}

/* --- FAMILY 5: ledger (two-column list, mono counters) ------------------ */
.ledger { width: 100%; }
.ledger-items {
  list-style: none; margin: 1.5rem 0 0; padding: 0;
  columns: 2; column-gap: clamp(1.5rem, 1rem + 2vw, 3.5rem);
}
/* Three or fewer entries balance badly in two columns; run them across. */
.ledger-items--row { columns: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(1.5rem, 1rem + 2vw, 3.5rem); }
.ledger-items li {
  break-inside: avoid;
  padding: .8rem 0 .8rem 2.1rem;
  border-top: 1px solid var(--hair-soft);
  position: relative;
  font-size: .96rem;
  margin: 0;
}
.ledger-items li::before {
  content: counter(ledger, decimal-leading-zero);
  counter-increment: ledger;
  position: absolute; left: 0; top: .95rem;
  font-family: var(--font-mono);
  font-size: .62rem; color: var(--accent);
}
.ledger-items { counter-reset: ledger; }

/* --- FAMILY 6: frame (image with an overlapping text panel) -------------
   The panel sits ON TOP of the image, never the other way round. An <img>
   is replaced inline content and paints after a sibling block's background,
   so the panel needs its own stacking context to win. The image stretches to
   the row height and the panel is inset vertically, so the picture always
   shows above and below it and the overlap looks deliberate. */
.frame {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: stretch;
}
.frame-media {
  grid-column: 1 / 8; grid-row: 1;
  border: 1px solid var(--hair);
  overflow: hidden;
  min-height: 20rem;
}
.frame-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(.94);
}
.frame-body {
  grid-column: 6 / 13; grid-row: 1;
  position: relative; z-index: 1;
  align-self: center;
  margin-block: clamp(1.5rem, 1rem + 1.6vw, 2.75rem);
  background: var(--paper-1);
  border: 1px solid var(--hair);
  padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
}
.frame-body > :last-child { margin-bottom: 0; }
.frame--flip .frame-media { grid-column: 6 / 13; }
.frame--flip .frame-body { grid-column: 1 / 8; }

/* --- bento (real background variation, exact cell count) ---------------- */
.bento {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1px;
  background: var(--hair-soft);
  border: 1px solid var(--hair);
}
.cell { background: var(--paper); padding: clamp(1.35rem, 1rem + 1.2vw, 2rem); grid-column: span 2; }
.cell h3 { margin: 0 0 .55rem; }
.cell p { margin: 0; font-size: .95rem; }
.cell--wide { grid-column: span 3; }
.cell--half { grid-column: span 3; }
.cell--accent { background: var(--accent); }
.cell--accent h3, .cell--accent .v { color: var(--paper); }
.cell--accent p { color: rgba(241, 243, 239, .86); }
.cell--tint { background: var(--paper-2); }
.cell--jaali { background-color: var(--paper-2); }
.cell--media { padding: 0; position: relative; overflow: hidden; min-height: 12rem; }
.cell--media img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; filter: saturate(.94); }
.cell .v {
  display: block;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: clamp(1.8rem, 1.3rem + 2vw, 3rem); font-weight: 700;
  letter-spacing: -.06em; line-height: 1; margin-bottom: .55rem;
  color: var(--accent);
}

/* --- page hero (inner pages) -------------------------------------------- */
.phero {
  padding-top: clamp(2.25rem, 1.5rem + 2.5vw, 3.75rem);
  padding-bottom: clamp(2rem, 1.5rem + 2vw, 3.25rem);
  border-bottom: 1px solid var(--hair-soft);
  position: relative;
}
.phero::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(680px 340px at 82% 0%, rgba(21,71,52,.08), transparent 72%);
  pointer-events: none;
}
.phero .container { position: relative; }
.crumb { margin-bottom: 1.4rem; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; }
.crumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: .55rem; margin: 0; padding: 0; }
.crumb li { margin: 0; display: inline-flex; gap: .55rem; align-items: center; color: var(--ink-faint); }
.crumb li + li::before { content: '/'; color: var(--hair); }
.crumb a { color: var(--ink-dim); text-decoration: none; }
.crumb a:hover { color: var(--accent); }
.phero h1 { font-size: clamp(2.1rem, 1.3rem + 3.4vw, 4.1rem); margin-bottom: 1rem; text-wrap: balance; }
.phero-sub { font-size: clamp(1rem, .95rem + .3vw, 1.15rem); color: var(--ink-dim); margin-bottom: 1.3rem; }
.byline {
  font-family: var(--font-mono);
  font-size: .64rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint);
  display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center;
  margin: 0; padding-top: 1.15rem; border-top: 1px solid var(--hair-soft);
}
.byline b { color: var(--ink-dim); font-weight: 600; }

/* --- FAQ ---------------------------------------------------------------- */
.faq-list { width: 100%; border-top: 1px solid var(--hair-soft); }
.faq-item { border-bottom: 1px solid var(--hair-soft); }
.faq-item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem;
  padding-block: 1.2rem;
  transition: color .18s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-q {
  font-family: var(--font-display);
  font-weight: 700; font-size: 1.06rem; letter-spacing: -.02em;
  color: var(--ink);
  font-variation-settings: 'wdth' 92;
}
.faq-item:hover .faq-q, .faq-item[open] .faq-q { color: var(--accent); }
.faq-mark {
  flex-shrink: 0;
  font-family: var(--font-mono); font-size: .8rem;
  color: var(--accent);
  transition: transform .25s ease;
}
.faq-item[open] .faq-mark { transform: rotate(45deg); }
.faq-answer { padding: 0 0 1.4rem; }
.faq-answer p { margin: 0; font-size: .98rem; }

/* --- footer -------------------------------------------------------------- */
.foot { border-top: 1px solid var(--hair); background: var(--paper-1); }
.foot-cta {
  padding-block: clamp(2.75rem, 2rem + 3vw, 4.5rem);
  border-bottom: 1px solid var(--hair-soft);
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 2rem; align-items: center;
}
.foot-cta h2 { margin: 0; font-size: clamp(1.8rem, 1.2rem + 2.6vw, 3.2rem); }
.foot-cta .btn { align-self: center; }

.foot-grid {
  padding-block: clamp(2.25rem, 1.5rem + 2.5vw, 3.25rem);
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
}
.foot-brand .brand { margin-bottom: 1rem; }
.foot-brand p { font-size: .92rem; margin-bottom: 1.1rem; }
.pay { display: flex; flex-wrap: wrap; gap: .4rem; }
.pay span {
  font-family: var(--font-mono);
  font-size: .6rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .32rem .6rem;
  border: 1px solid var(--hair-soft);
  color: var(--ink-faint);
}
.foot-col h3 {
  font-family: var(--font-mono);
  font-size: .64rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 1rem;
}
.foot-col ul { list-style: none; margin: 0; padding: 0; }
.foot-col li { margin-bottom: .5rem; }
.foot-col a {
  color: var(--ink-dim); text-decoration: none; font-size: .93rem;
  transition: color .18s ease;
}
.foot-col a:hover { color: var(--accent); }

.foot-end {
  padding-block: 1.15rem 1.6rem;
  border-top: 1px solid var(--hair-soft);
  display: flex; flex-wrap: wrap; gap: .8rem; justify-content: space-between;
  font-family: var(--font-mono);
  font-size: .62rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-faint);
}
.foot-end p { margin: 0; color: inherit; }

/* --- 404 ----------------------------------------------------------------- */
.err {
  padding-block: clamp(3.5rem, 2rem + 5vw, 7rem);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 1rem + 2vw, 3rem); align-items: center;
}
.err-code {
  font-family: var(--font-mono); font-weight: 800;
  font-size: clamp(5rem, 3rem + 13vw, 13rem);
  line-height: .82; letter-spacing: -.08em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--accent);
  margin: 0;
}
.err-body h1 { font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3rem); }
.err-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }

/* --- blog ---------------------------------------------------------------- */
.posts { width: 100%; border-top: 1px solid var(--hair-soft); }
.post {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(1.25rem, 1rem + 1.5vw, 2.5rem);
  align-items: center;
  padding-block: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
  border-bottom: 1px solid var(--hair-soft);
  text-decoration: none;
  transition: background .2s ease;
}
.post:hover { background: rgba(21,71,52,.05); }
.post h3 { margin: 0 0 .7rem; font-size: clamp(1.3rem, 1.1rem + .9vw, 1.85rem); }
.post p { margin: 0; font-size: .95rem; }
.post-go {
  display: inline-block; margin-top: 1rem;
  font-family: var(--font-mono); font-size: .66rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
}

/* --- reveal -------------------------------------------------------------- */
.rv { opacity: 0; transform: translateY(18px); }
@media (prefers-reduced-motion: no-preference) {
  .rv { transition: opacity .55s ease, transform .55s cubic-bezier(.2,.8,.3,1); }
}
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* --- lightbox (only built by JS when a [data-gallery] exists) ----------- */
.lightbox {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  display: grid; place-items: center; padding: clamp(1rem, 4vw, 3rem);
  background: rgba(241,243,239,.96);
}
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 100%; max-height: 88vh; width: auto; border: 1px solid var(--hair); }
.lightbox-close {
  position: absolute; top: 1rem; right: 1rem; width: 44px; height: 44px;
  background: transparent; border: 1px solid rgba(21,71,52,.62);
  color: var(--ink); font-size: 1.4rem; cursor: pointer;
}

/* ====================================================== responsive ======= */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .hero-figures { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* Stack below 1024: no overlap, image back to a fixed ratio. */
  .frame { align-items: start; }
  .frame-media, .frame-body,
  .frame--flip .frame-media, .frame--flip .frame-body { grid-column: 1 / -1; }
  .frame-media { grid-row: 1; min-height: 0; }
  .frame-media img { height: auto; aspect-ratio: 4 / 3; }
  .frame-body { grid-row: 2; margin-block: 0; border-top: 0; }
}

@media (max-width: 900px) {
  .burger { display: block; }
  .nav-cta { display: none; }
  .mast.stuck { position: sticky; }

  .nav {
    position: fixed; inset: 0; z-index: var(--z-overlay);
    background: var(--paper);
    display: grid; align-content: center;
    padding: 5rem var(--gutter) 2rem;
    opacity: 0; visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
    margin-left: 0;
  }
  body.menu-open .nav { opacity: 1; visibility: visible; }
  .nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav li { border-bottom: 1px solid var(--hair-soft); }
  .nav a {
    font-family: var(--font-display);
    font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em;
    text-transform: none; padding: .85rem 0; border-bottom: 0;
    color: var(--ink);
  }
  .nav a.active { color: var(--accent); }
  .nav .menu-cta { display: block; border-bottom: 0; margin-top: 1.5rem; }
  .nav .menu-cta a { font-family: var(--font-mono); font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; }
  .brand, .burger { position: relative; z-index: calc(var(--z-overlay) + 1); }

  .stack { grid-template-columns: minmax(0, 1fr); }
  .stack-head { position: static; }
  .index-row { grid-template-columns: 2.5rem minmax(0, 1fr); }
  .index-row .d { grid-column: 2; }
  .err { grid-template-columns: minmax(0, 1fr); }
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-cta { grid-template-columns: minmax(0, 1fr); }
  .post { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 700px) {
  :root { --gutter: 1.15rem; }
  body { font-size: 1rem; }
  .ledger-items { columns: 1; }
  .ledger-items--row { grid-template-columns: minmax(0, 1fr); }
  .cell, .cell--wide, .cell--half { grid-column: span 6; }
  .rail-card { flex-basis: min(78vw, 19rem); }
  .hero-media img { aspect-ratio: 16 / 10; }
}

@media (max-width: 560px) {
  .hero-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-actions .btn, .hero-actions .btn-2 { flex: 1 1 100%; }
  .foot-end { justify-content: flex-start; }
}

@media (max-width: 420px) {
  .index-row { grid-template-columns: minmax(0, 1fr); }
  .index-row .i { margin-bottom: -.5rem; }
  .index-row .d { grid-column: 1; }
}

/* ============================================================================
   FLOATING CTA (sticky pill at bottom, follows scroll, on every page)
   ============================================================================ */

.floating-cta {
    position: fixed;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    z-index: 800;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(7, 4, 26, 0.82);
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    box-shadow: var(--shadow-lg), 0 0 26px rgba(124, 58, 237, 0.35);
    animation: floatRise 600ms cubic-bezier(0.34, 1.56, 0.64, 1) 300ms backwards;
}

.floating-cta::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(247, 201, 72, 0.55), rgba(236, 72, 153, 0.45) 50%, rgba(124, 58, 237, 0.55));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

@keyframes floatRise {
    from { opacity: 0; transform: translate(-50%, 40px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

.store-badge {
    display: inline-flex;
    border-radius: 999px;
    overflow: hidden;
    transition: transform var(--tx-base), box-shadow var(--tx-base), filter var(--tx-base);
    cursor: pointer;
}

.store-badge img {
    width: auto;
    height: 48px;
    display: block;
    border-radius: 999px;
}

.store-badge:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
}

.store-badge:focus-visible {
    outline: 2px solid var(--accent-gold);
    outline-offset: 4px;
}