/* ═══════════════════════════════════════════════════════════════════════════
   impossiblemeansgo.asia — the design system for the company site.

   WHY THIS IS A SECOND STYLESHEET AND NOT AN EDIT TO style.css.
   css/style.css dresses the Las Vegas invitation: near-black, gold, an italic
   serif, a particle canvas. That is correct for an invitation to a private room
   and it keeps it — the event page moved to /vegas and still loads it, byte for
   byte. This file dresses a company: the pages that argue Organizational
   Independence, the framework explainer, the offers and every legal document.
   Editing one stylesheet to serve both would have made every change to the
   event page a risk to the privacy policy.

   THE PALETTE IS SAMPLED FROM THE FRAMEWORK DIAGRAM, NOT TYPED FROM A SCREEN
   READING. The Organizational Independence diagram sits in the middle of the
   homepage and already gives every stage a colour that means something to
   anyone who has seen Atiba teach it. Those exact values were read out of
   frameworks/media/organizational-independence.png (1536x1024) by sampling its
   saturated pixels, so the page and the picture agree rather than nearly
   agreeing:

     Alignment   #095993   the blue of stage one
     Movement    #24702B   the green of stage two
     Measurement #A76602   the amber of stage three
     Learning    #444272   the purple of the loop
     Trust       #61676D   the grey of the plinth
     (wash)      #BDE4FD   the light blue tint inside the diagram

   Three values are DECIDED rather than sampled, because the diagram is drawn on
   plain white and has no page furniture in it: the warm paper base #FAFAF8, the
   ink navy #0F1B2D that all type is set in, and the near-black band #0B1626.

   GOLD IS KEPT AND DEMOTED. #C49E45 survives as a signature at low dose — the
   trademark mark, the hairline above a section label, the active nav underline.
   It is never a background, never a glow and never on a button, because at
   2.4:1 on paper it cannot legally carry text. Atiba's instruction was that he
   loves the colours and we overused them; this keeps them and stops making the
   whole site out of them.

   CONTRAST IS A BUILD GATE, not a judgement. scripts/check-contrast.js
   computes every text-on-background pair in this file and fails the deploy
   below AA. That is why --measurement-text exists: the sampled amber is 4.44:1
   on paper, which is under the 4.5 floor for body text, so a darkened
   derivative carries small amber type and the sampled value carries large type
   and graphics.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Sampled from the diagram */
  --alignment: #095993;
  --movement: #24702B;
  --measurement: #A76602;
  --learning: #444272;
  --trust: #61676D;
  --wash: #BDE4FD;
  --rule-grey: #C4C7CA;

  /* Darkened derivative: the sampled amber is under AA at body size */
  --measurement-text: #8F5702;

  /* Decided — the diagram has no page furniture to sample */
  --base: #FAFAF8;
  --ink: #0F1B2D;
  --ink-band: #0B1626;

  /* Kept, demoted. TWO VALUES, and the second one is not a drift.
     #C49E45 is the brand gold and it is 5.6:1 on the near-black band, where it
     has always lived. On warm paper the same value is 2.41:1 — under even the
     3:1 floor for a graphical element — so the hairline and the trademark mark
     on a light background use a deepened gold that measures 3.13:1 and reads
     as the same colour. scripts/check-contrast.js asserts both, and asserts
     that the brand value still fails as body type, which is the rule that
     keeps gold a signature rather than a text colour. */
  --gold: #C49E45;
  --gold-ink: #AE8A36;

  --paper-raised: #FFFFFF;
  --line: #E3E2DD;
  --line-strong: #CFCEC7;

  --wrap: 1160px;
  --measure: 68ch;

  --radius: 4px;
  --radius-lg: 10px;

  --step: clamp(56px, 7vw, 104px);
}

/* ─── 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(--base);
  color: var(--ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; height: auto; }
a { color: var(--alignment); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

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

/* ─── TYPE ──────────────────────────────────────────────────────────────── */
/* One display face and one text face, and real jumps between the levels so a
   section heading and a card heading cannot be confused at a glance. */

h1, h2, h3, h4, .display {
  font-family: Fraunces, Georgia, "Times New Roman", serif;
  font-weight: 600;
  font-variation-settings: "SOFT" 0, "WONK" 0;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2.3rem, 6vw, 4rem); }
h2 { font-size: clamp(1.8rem, 4vw, 2.75rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); line-height: 1.25; }
h4 { font-size: 1.05rem; line-height: 1.3; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(1.1rem, 1.9vw, 1.35rem);
  line-height: 1.55;
  color: var(--ink);
}

.muted { color: var(--trust); }
.small { font-size: 0.9rem; line-height: 1.6; }

strong, b { font-weight: 650; }

/* The one place gold carries a hairline: above a section label. */
.eyebrow {
  font-family: Inter, sans-serif;
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--trust);
  margin: 0 0 18px;
  padding-top: 14px;
  border-top: 2px solid var(--gold-ink);
  display: inline-block;
}

.tm { font-size: 0.5em; vertical-align: super; color: var(--gold-ink); letter-spacing: 0; }
.band-ink .tm, .site-footer .tm { color: var(--gold); }

/* ─── LAYOUT ────────────────────────────────────────────────────────────── */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 20px;
}

section { padding-block: var(--step); }

/* Shape 1 — the split: words one side, an object the other. */
.split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.split.center { align-items: center; }

/* Shape 2 — the narrow editorial column. */
.column { max-width: var(--measure); }
.column.wide { max-width: 80ch; }

/* Shape 3 — the tile grid. */
.tiles {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.tiles.two { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
/* Exactly two columns. auto-fit puts four cards on a 1160px row as three plus an
   orphan, which reads as a mistake rather than as a grid. */
.tiles.pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .tiles.pair { grid-template-columns: 1fr; } }
.tiles.four { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

/* Shape 4 — the full-bleed band. Two ink bands per page maximum: dark is
   punctuation here, which is the only way it stays emphatic. */
.band { background: var(--paper-raised); border-block: 1px solid var(--line); }
.band-ink {
  background: var(--ink-band);
  color: var(--base);
}
.band-ink h1, .band-ink h2, .band-ink h3 { color: var(--base); }
.band-ink a { color: var(--wash); }
.band-ink .muted { color: #A9B2BD; }
.band-ink .eyebrow { color: #A9B2BD; border-top-color: var(--gold); }

.band-wash { background: linear-gradient(180deg, #F2F8FE 0%, var(--base) 100%); }

/* The hero backdrop: every line in the company running to one node. It is a
   background image rather than markup so it can never be read out, tabbed to,
   or printed, and it sits under the type at an opacity the contrast gate's
   floors are unaffected by. */
.band-hero {
  position: relative;
  background:
    url("/img/hero-lattice.svg") center right / cover no-repeat,
    linear-gradient(180deg, #F2F8FE 0%, var(--base) 100%);
}
@media (max-width: 900px) {
  /* On a phone the node lands behind the headline. The gradient alone is enough. */
  .band-hero { background: linear-gradient(180deg, #F2F8FE 0%, var(--base) 100%); }
}

/* ─── SECTION NUMERALS ──────────────────────────────────────────────────
   A design device and a navigation aid: nine sections of continuous prose
   read as one wall, and a numeral gives the eye somewhere to land. Set in the
   display face at the weight of a heading, in the stage colour where the
   section belongs to a stage. */
.numbered { display: flex; align-items: baseline; gap: 16px; }
.numeral {
  font-family: Fraunces, Georgia, serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 600;
  line-height: 1;
  color: var(--line-strong);
  letter-spacing: -0.02em;
}
.band-ink .numeral { color: #33425A; }
.numeral.alignment { color: #9CC2E2; }
.numeral.movement { color: #9FCBA3; }
.numeral.measurement { color: #E0BE84; }
.numeral.learning { color: #A9A4C8; }

/* ─── GLYPHS ────────────────────────────────────────────────────────────
   Small built line-drawings, inline so they inherit the colour of whatever
   they sit in. They are decoration with aria-hidden on every one: the words
   beside them already say it, and an icon that repeats a label out loud is
   noise to a screen reader. */
.glyph { width: 30px; height: 30px; display: block; margin-bottom: 14px; }
.glyph line, .glyph path, .glyph circle, .glyph rect, .glyph polyline {
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.glyph .solid { fill: currentColor; stroke: none; }
.situation .glyph { color: var(--alignment); }
.card .glyph { color: var(--trust); }

/* ─── THE CLOSING LINE ──────────────────────────────────────────────────
   Five steps, set as a run rather than a sentence, because the framework's own
   closing line is a sequence and reads as one. */
.steps {
  display: grid;
  gap: 2px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  margin-top: 36px;
}
.step {
  padding: 22px 20px;
  background: rgba(250,250,248,.05);
  border-top: 3px solid var(--trust);
}
.step:nth-child(1) { border-top-color: var(--alignment); }
.step:nth-child(2) { border-top-color: var(--movement); }
.step:nth-child(3) { border-top-color: var(--measurement); }
.step:nth-child(4) { border-top-color: var(--learning); }
.step:nth-child(5) { border-top-color: var(--gold); }
.step-n {
  font-family: Inter, sans-serif;
  font-size: 0.72rem; font-weight: 700; letter-spacing: .14em;
  color: #8D98A5; display: block; margin-bottom: 8px;
}
.step p {
  font-family: Fraunces, Georgia, serif;
  font-size: 1.15rem; font-weight: 600; line-height: 1.2; margin: 0;
}

/* ─── THE FIGURE STRIP ──────────────────────────────────────────────────
   Four facts, each one checkable, set large. It is the one place on the page
   where a number is the design. */
.figures {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.fig { background: var(--paper-raised); padding: 26px 22px; }
.fig b {
  display: block;
  font-family: Fraunces, Georgia, serif;
  font-size: clamp(2rem, 4vw, 2.6rem);
  font-weight: 600; line-height: 1;
  color: var(--ink);
  margin-bottom: 10px;
}
.fig span { display: block; font-size: 0.92rem; color: var(--trust); line-height: 1.45; }

/* ─── COMPONENTS ────────────────────────────────────────────────────────── */

.card {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 26px;
}
.card h3 { margin-bottom: 10px; }
.card > :last-child { margin-bottom: 0; }

/* A tile that is a link: the whole thing is the target. */
a.card { text-decoration: none; color: inherit; display: block; transition: border-color .18s ease, transform .18s ease; }
a.card:hover { border-color: var(--alignment); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { a.card:hover { transform: none; } }

.stage-rule { border-top: 3px solid var(--trust); padding-top: 18px; }
.stage-rule.alignment { border-color: var(--alignment); }
.stage-rule.movement { border-color: var(--movement); }
.stage-rule.measurement { border-color: var(--measurement); }
.stage-rule.learning { border-color: var(--learning); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: Inter, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  padding: 16px 26px;
  border-radius: var(--radius);
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.btn-primary { background: var(--alignment); color: #FFFFFF; }
.btn-primary:hover { background: #07487A; color: #FFFFFF; }
.btn-ghost { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-ghost:hover { background: var(--ink); color: var(--base); }
.band-ink .btn-ghost { border-color: var(--base); color: var(--base); }
.band-ink .btn-ghost:hover { background: var(--base); color: var(--ink-band); }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

.pull {
  font-family: Fraunces, Georgia, serif;
  font-size: clamp(2.4rem, 6vw, 3.6rem);
  font-weight: 600;
  line-height: 1;
  color: var(--measurement);
  display: block;
  margin-bottom: 8px;
}

.list-plain { list-style: none; margin: 0; padding: 0; }
.list-plain li { margin-bottom: 12px; padding-left: 26px; position: relative; }
.list-plain li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 10px; height: 2px;
  background: var(--trust);
}
.list-plain li:last-child { margin-bottom: 0; }

.kv { margin: 0; }
.kv dt { font-weight: 650; margin-top: 18px; }
.kv dt:first-child { margin-top: 0; }
.kv dd { margin: 4px 0 0; color: var(--trust); }

/* ─── THE SITUATION TILES (homepage section 2) ──────────────────────────── */

.situation {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-left: 4px solid var(--alignment);
  border-radius: var(--radius);
  padding: 22px 24px;
  text-decoration: none;
  color: inherit;
  display: block;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.situation:hover { box-shadow: 0 6px 24px rgba(15,27,45,.08); }
.situation p { font-size: 1.05rem; margin: 0; }
.situation .situation-tag {
  display: block;
  font-family: Inter, sans-serif;
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--trust);
  margin-bottom: 10px;
}

/* ─── THE ORG-CHART DIAGRAM (homepage section 4) ────────────────────────── */
/* Built markup, never an image — the owner's name appearing in two empty roles
   is the argument, and an image of it cannot be read by a screen reader or
   resized on a phone. */

.position {
  background: var(--paper-raised);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  padding: 22px;
}
.position-title {
  font-family: Inter, sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--trust);
  margin: 0 0 16px;
}
.roles { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.role {
  border: 1px solid var(--line);
  border-top: 3px solid var(--trust);
  border-radius: var(--radius);
  padding: 14px 16px;
  background: var(--base);
}
.role.strategic { border-top-color: var(--alignment); }
.role.tactical { border-top-color: var(--movement); }
.role.analytical { border-top-color: var(--measurement); }
.role h4 { margin-bottom: 6px; }
.role .role-q { font-size: 0.9rem; color: var(--trust); margin: 0 0 12px; }
.role .held-by {
  font-family: Inter, sans-serif;
  font-size: 0.82rem;
  font-weight: 650;
  margin: 0;
}
.role .held-by.owner { color: var(--measurement-text); }
.role .held-by.hired { color: var(--trust); font-weight: 500; }

/* ─── THE FRAMEWORK BAND (homepage section 5) ───────────────────────────── */

.framework { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.brain-line, .trust-line {
  font-family: Inter, sans-serif;
  font-size: 0.95rem;
  padding: 16px 20px;
  border-radius: var(--radius);
  background: rgba(68,66,114,.07);
  border: 1px solid rgba(68,66,114,.2);
}
.trust-line { background: rgba(97,103,109,.08); border-color: rgba(97,103,109,.25); }
.band-ink .brain-line { background: rgba(189,228,253,.08); border-color: rgba(189,228,253,.22); }
.band-ink .trust-line { background: rgba(250,250,248,.06); border-color: rgba(250,250,248,.18); }

.loop-line {
  font-family: Inter, sans-serif;
  font-weight: 650;
  color: var(--learning);
  margin-top: 8px;
}
.band-ink .loop-line { color: #B8B3DC; }

.figure {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper-raised);
  padding: 14px;
}
.figure img { display: block; border-radius: var(--radius); }
.figure figcaption { font-size: 0.85rem; color: var(--trust); margin-top: 12px; }

/* ─── NAV ───────────────────────────────────────────────────────────────── */

.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--base);
  padding: 12px 18px; z-index: 200;
}
.skip:focus { left: 12px; top: 12px; }

.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250,250,248,.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 66px;
}
.brand {
  font-family: Fraunces, Georgia, serif;
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.nav-links { display: flex; align-items: center; gap: 26px; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  font-family: Inter, sans-serif;
  font-size: 0.93rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}
.nav-links a:hover { border-bottom-color: var(--line-strong); }
.nav-links a[aria-current="page"] { border-bottom-color: var(--gold-ink); font-weight: 650; }
.nav-links .nav-cta {
  background: var(--alignment);
  color: #FFFFFF;
  padding: 10px 18px;
  border-radius: var(--radius);
  border-bottom: none;
  font-weight: 600;
}
.nav-links .nav-cta:hover { background: #07487A; border-bottom: none; }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 9px 13px;
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  color: var(--ink);
}

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .nav-links {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--base);
    border-bottom: 1px solid var(--line);
    padding: 8px 20px 20px;
  }
  .nav-links.open { display: flex; }
  .nav-links li { border-top: 1px solid var(--line); }
  .nav-links a { display: block; padding: 14px 0; border-bottom: none; }
  .nav-links .nav-cta { text-align: center; margin-top: 14px; }
  .nav-links li:first-child { border-top: none; }
}

/* ─── FOOTER ────────────────────────────────────────────────────────────── */

.site-footer {
  background: var(--ink-band);
  color: #C9D1DB;
  padding-block: 58px 34px;
  font-size: 0.92rem;
}
.site-footer a { color: #C9D1DB; text-decoration: none; }
.site-footer a:hover { color: #FFFFFF; text-decoration: underline; }
.footer-cols {
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.site-footer h2 {
  font-family: Inter, sans-serif;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #8D98A5;
  margin: 0 0 14px;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 9px; }
.footer-base {
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid rgba(201,209,219,.2);
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  justify-content: space-between;
  color: #8D98A5;
  font-size: 0.86rem;
}
.footer-base p { margin: 0; }
.footer-prefs {
  background: none;
  border: 1px solid rgba(201,209,219,.35);
  border-radius: var(--radius);
  color: #C9D1DB;
  font: inherit;
  font-size: 0.86rem;
  padding: 6px 12px;
  cursor: pointer;
}
.footer-prefs:hover { border-color: #FFFFFF; color: #FFFFFF; }

/* ─── COOKIE CONSENT ───────────────────────────────────────────────────
   Moved to css/chrome.css on 2026-10-09. The sheet appears on EVERY page on
   this deployment, including the event pages and the survey, which do not
   load this file - so its styles cannot live here. */

/* ─── FORMS ─────────────────────────────────────────────────────────────── */

.field { margin-bottom: 20px; }
.field label { display: block; font-weight: 650; margin-bottom: 6px; }
.field .hint { display: block; font-size: 0.88rem; color: var(--trust); margin-bottom: 8px; }
.field input[type="email"], .field input[type="text"], .field select, .field textarea {
  width: 100%;
  font: inherit;
  padding: 13px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--paper-raised);
  color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--alignment); }

.form-note {
  padding: 16px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--line-strong);
  background: var(--paper-raised);
  margin-top: 20px;
}
.form-note[hidden] { display: none; }
.form-note.ok { border-left: 4px solid var(--movement); }
.form-note.bad { border-left: 4px solid var(--measurement); }

/* ─── LEGAL PAGES ───────────────────────────────────────────────────────── */

.legal { max-width: 76ch; }
.legal h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin-top: 44px; }
.legal h3 { margin-top: 28px; }
.legal table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 0.93rem; }
.legal th, .legal td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.legal th { font-family: Inter, sans-serif; font-size: 0.8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--trust); }
.legal ul, .legal ol { padding-left: 22px; }
.legal li { margin-bottom: 8px; }
.toc { background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px 24px; }
.toc ol { margin: 0; }

/* ─── REVEAL ────────────────────────────────────────────────────────────── */
/* Gated on has-js, which the inline script in every head sets. The page sells
   completely with JavaScript switched off — the old stylesheet hid
   [data-reveal] unconditionally, so a reader with no JavaScript got a blank
   page, and that is the failure this guard removes. */

html.has-js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1);
}
html.has-js [data-reveal].revealed { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html.has-js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ─── RESPONSIVE ────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  body { font-size: 16.5px; }
}

@media (max-width: 560px) {
  .wrap { padding-inline: 16px; }
  .btn { width: 100%; justify-content: center; }
  .btn-row { gap: 10px; }
  .consent { left: 8px; right: 8px; bottom: 8px; padding: 18px; }
}

@media print {
  .site-nav, .consent, .btn-row { display: none; }
  body { background: #FFFFFF; }
}