/* ==========================================================================
   broikos.gr — design system
   Orange gradient on black. Sometimes white. Nothing else. (STYLE.md)
   Type floor: body computes 16–18px at 1920×1080 — verified, not assumed.
   ========================================================================== */

:root {
  --ink-0: #000000;
  --ink-1: #080604;
  --ink-2: #141010;
  --flame-0: #ff8a1f;
  --flame-1: #ff6a00;
  --flame-2: #e63c00;
  --ember: #8a2400;
  --paper: #ffffff;
  --dim: #9a8f88;
  /* WCAG 1.4.3: the old #5a504a measured 2.41:1 on #141010, well under the 4.5
     minimum, and Lighthouse failed .board-tag and .g-lbl on it. #8a7f76 is
     4.84:1 on the lightest ink and 5.38:1 on black - the smallest lift that
     passes while staying visibly quieter than --dim (5.99:1). */
  --faint: #8a7f76;
  --flame: linear-gradient(135deg, #ff8a1f 0%, #ff6a00 45%, #e63c00 100%);
  --flame-soft: radial-gradient(60% 60% at 50% 40%, rgba(255,106,0,.38), transparent 70%);

  /* 17.1px at 1920, clamped 16–18 everywhere */
  --fs-body: clamp(17px, 16px + 0.21vw, 20px);
  --fs-small: 16px;            /* nothing readable under 16px, ever */
  --fs-mono: clamp(16px, 15.4px + 0.05vw, 17px);

  --space: clamp(4.5rem, 9vh, 8rem);
  --wrap: 1240px;
  --ease-arrive: cubic-bezier(.16, 1, .3, 1);
}

html { background: var(--ink-0); }
body {
  font-family: "Lato", "Lato-fb", system-ui, sans-serif;
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--paper);
  background: var(--ink-0);
  overflow-x: clip;
}

.teko { font-family: "Teko", "Teko-fb", sans-serif; font-weight: 600; letter-spacing: .02em; }
.mono { font-family: "Manrope", "Manrope-fb", sans-serif; font-weight: 600; font-size: var(--fs-mono); letter-spacing: .05em; }
.anurati { font-family: "Anurati", sans-serif; text-transform: uppercase; letter-spacing: .3em; }
.dim { color: var(--dim); }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 3rem); }

h1, h2, h3 { line-height: 1.04; text-wrap: balance; }
.display {
  font-family: "Teko", "Teko-fb", sans-serif;
  font-weight: 600;
  /* The clamp FLOOR is rem-based, so 200% text zoom doubles it while the
     viewport stays 320px and the heading is clipped (WCAG 1.4.4 - measured:
     "ΜΟΝΟΣ" ran past the right edge on /el/work). The outer min() adds a
     viewport ceiling that only binds in that case: at 320px/100% and at every
     desktop width the clamp still wins, so nothing else changes. */
  font-size: min(clamp(2.6rem, 5.2vw, 5.4rem), 13.5vw);
  letter-spacing: .01em;
  text-transform: uppercase;
}
p { max-width: 62ch; }
/* Inline prose links: real 24px targets without reflowing the line */
main p a, .sec-lead a, .list-row a { display: inline-block; min-height: 24px; }
a { color: inherit; }
::selection { background: var(--flame-1); color: var(--ink-0); }

html:has(#langmodal) .skip-link { display: none; }
.skip-link {
  position: fixed; left: 14px; bottom: 14px; z-index: 500;
  font-family: "Manrope", "Manrope-fb", sans-serif; font-weight: 600;
  font-size: 12px; letter-spacing: .08em;
  color: var(--dim); background: rgba(10, 6, 3, .9);
  border: 1px solid rgba(255, 106, 0, .28); border-radius: 4px;
  padding: 7px 11px; text-decoration: none;
  opacity: 0; pointer-events: none; transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease;
}
.skip-link:focus-visible {
  opacity: 1; pointer-events: auto; transform: none;
  outline: none; color: var(--paper);
}

:focus-visible { outline: 2px solid var(--flame-0); outline-offset: 3px; }
/* On the white breaks the flame-0 ring measures 2.36:1 - under the 3:1
   non-text minimum. flame-2 holds 4.19:1 there. */
.break :focus-visible { outline-color: var(--flame-2); }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-block;
  font-family: "Manrope", "Manrope-fb", sans-serif;
  font-weight: 700;
  font-size: var(--fs-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: .85rem 1.6rem;
  min-height: 44px;
  border: 0;
  cursor: pointer;
}
.btn-flame { background: var(--flame); color: var(--ink-0); font-weight: 700; }
.btn-flame:hover { filter: brightness(1.12); }
/* Secondary: the primary's silhouette, hollow, edged in the identical CTA
   gradient (two backgrounds - the fill clips to padding-box, the gradient to
   border-box - which is the only way to gradient a border without a wrapper).
   Fills solid on hover so the pair reads as one family. */
.btn-line {
  color: var(--paper);
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--ink-0), var(--ink-0)) padding-box,
    linear-gradient(135deg, var(--flame-2), var(--flame-0)) border-box;
  transition: color .28s ease, background .28s ease;
}
.btn-line:hover {
  color: var(--ink-0);
  background:
    linear-gradient(135deg, var(--flame-2), var(--flame-1) 55%, var(--flame-0)) padding-box,
    linear-gradient(135deg, var(--flame-2), var(--flame-0)) border-box;
}
/* On the white break sections the hollow fill must match the paper, not ink.
   Only .break is light - .sec-selected is dark and must NOT match this. */
.break .btn-line { background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, var(--flame-2), var(--flame-0)) border-box; color: #1a1410; }
.break .btn-line:hover { color: var(--ink-0); background: linear-gradient(135deg, var(--flame-2), var(--flame-1) 55%, var(--flame-0)) padding-box, linear-gradient(135deg, var(--flame-2), var(--flame-0)) border-box; }

/* ==========================================================================
   Nav — fixed, outside the smoother. Scrim keeps it readable over white
   sections even with JS off; JS adds .nav-on-light for the proper inversion.
   ========================================================================== */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 200;
  isolation: isolate;
  display: flex; align-items: center; gap: 2rem;
  padding: .9rem clamp(1.25rem, 3vw, 2.5rem);
  justify-content: flex-start; }
/* The two scrims live on their OWN layers and crossfade. When the dark
   gradient sat on the element itself it kept painting over the white scrim
   and the mix read as gray mud on light sections - now dark fades OUT while
   white fades IN, so each state is pure and the swap is animated. */
.nav::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(255,255,255,.94), rgba(255,255,255,0));
  opacity: 0; transition: opacity .5s ease;
}
.nav::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(0,0,0,.82), rgba(0,0,0,0));
  opacity: 1; transition: opacity .5s ease;
}
.nav.nav-on-light::before { opacity: 1; }
.nav.nav-on-light::after { opacity: 0; }
.nav-brand { display: flex; align-items: center; gap: 20px; text-decoration: none; justify-content: flex-start; }
.nav-brand img { display: block; transition: filter .45s ease; }
.nav-name { font-family: "Anurati", sans-serif; font-size: 17px; letter-spacing: .38em; text-transform: uppercase; translate: 0 1px; }
.nav-links { display: flex; gap: 1.8rem; margin-left: auto; align-items: stretch; justify-content: flex-start; }
.nav-link {
  font-family: "Manrope", "Manrope-fb", sans-serif; font-size: calc(var(--fs-mono) + 2px);
  letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  color: var(--dim); padding: .5rem 0; min-height: 24px;
  transition: color .45s ease;
}
.nav-link:hover, .nav-link.is-here { color: var(--paper); }
.nav-link.is-here { box-shadow: inset 0 -2px 0 var(--flame-1); }
.nav-cta { margin-left: .5rem; }

/* de/fr nav labels need ~1230px at full size; measured at 1100px the French
   links and CTA wrapped into the brand. Below 1340px the whole bar tightens
   and nothing may wrap - every locale then fits to the 901px burger line. */
@media (min-width: 901px) and (max-width: 1340px) {
  .nav { gap: 1.1rem; }
  .nav-links { gap: 1rem; }
  .nav-link { font-size: 15px; letter-spacing: .06em; white-space: nowrap; }
  .nav-cta { margin-left: .2rem; padding: .7rem 1rem; font-size: 14px; white-space: nowrap; }
  .nav-brand { gap: 12px; }
  .nav-name { letter-spacing: .26em; }
}
.nav-burger { display: none; }

.nav.nav-on-light .nav-link { color: #55483f; }
.nav.nav-on-light .nav-link:hover, .nav.nav-on-light .nav-link.is-here { color: var(--ink-0); }
.nav-name { transition: color .45s ease; }
.nav.nav-on-light .nav-name { color: var(--ink-0); }
.nav.nav-on-light .nav-brand img { filter: invert(1); }

.nav-overlay {
  position: fixed; inset: 0; z-index: 190;
  background: var(--ink-0);
  display: flex; align-items: center; justify-content: center;
}
.nav-overlay nav {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 1.15rem; text-align: center;
}
.nav-overlay-link { display: block; padding: .3rem 1.6rem; line-height: 1; }
.nav-overlay-cta { margin-top: 1.4rem; }
.nav-overlay-link {
  font-family: "Teko", "Teko-fb", sans-serif; font-size: clamp(2.4rem, 9vw, 4rem);
  font-weight: 600; text-transform: uppercase; text-decoration: none;
  color: var(--paper); text-align: center;
}
.nav-overlay-link:hover { color: var(--flame-0); }
.nav-overlay-cta { color: var(--flame-1); }

@media (max-width: 900px) {
  .nav-links, .nav-cta { display: none; }
  .nav-burger {
    display: grid; gap: 7px; margin-left: auto;
    width: 44px; height: 44px; place-content: center;
    background: transparent; border: 0; cursor: pointer;
  }
  .nav-burger span { display: block; width: 26px; height: 2px; background: var(--paper); transition: transform .3s; }
  .nav-burger[aria-expanded="true"] span:first-child { transform: translateY(4.5px) rotate(45deg); }
  .nav-burger[aria-expanded="true"] span:last-child { transform: translateY(-4.5px) rotate(-45deg); }
  .nav.nav-on-light .nav-burger span { background: var(--ink-0); }
}

/* ==========================================================================
   Sections, shared
   ========================================================================== */
.sec { position: relative; padding-block: var(--space); }
.sec-label {
  color: var(--flame-1);
  text-transform: uppercase;
  letter-spacing: .18em;
  margin-bottom: 1.6rem;
}
.sec-lead { margin-top: 1.2rem; margin-bottom: 2.2rem; color: var(--dim); }

/* White breaks — the register change. Exactly two per page.
   overflow:clip keeps the drain overlay inside its own box — translated up,
   it was painting over the whole section above it. */
.break { background: var(--paper); color: var(--ink-0); overflow: clip; }
.break .sec-label { color: #c33200; } /* flame-2 measures 4.19:1 on paper - just under 4.5 */
.break p { color: #2b221c; }
/* On white, orange is #e63c00 and display-only (STRUCTURE.md §5). */
.break a:not(.btn) { color: var(--ink-0); }
.ink-drain {
  position: absolute; inset: 0; z-index: 5;
  background: var(--ink-0);
  pointer-events: none;
  display: none; /* full-motion JS turns it on; static page shows white directly */
}

/* ==========================================================================
   6.1 Hero
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: grid; align-items: center;
  overflow: clip;
}
.hero-canvas, .hero-canvas canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-ink {
  position: absolute; inset: 0;
  background:
    radial-gradient(52% 46% at 50% 62%, rgba(230,60,0,.42), transparent 70%),
    radial-gradient(30% 26% at 46% 58%, rgba(255,106,0,.30), transparent 75%),
    var(--ink-0);
}
/* Padding tracks viewport HEIGHT: a fixed 7rem is 28% of a 800px laptop but
   only 21% of a 1080p screen, and on the short ones it pushed the CTA under
   the fold once the headline grew to full sentences. */
.hero-stage { position: relative; z-index: 10; padding-block: clamp(3rem, 7vh, 7rem); }
.hero-stage .hero-kicker, .hero-stage .hero-type, .hero-stage .hero-name, .hero-stage .hero-sub { text-shadow: 0 4px 32px rgba(0, 0, 0, .42), 0 2px 20px rgba(0, 0, 0, .25); }
.hero-kicker { color: var(--dim); letter-spacing: .22em; margin-bottom: 1.4rem; }
.hero-type {
  font-family: "Teko", "Teko-fb", sans-serif; font-weight: 600;
  /* Sized so each of the three phrases holds ONE line at desktop. The pivot
     lines are full sentences, not the old four-word fragments, and at 6.4vw
     two of them wrapped - five rows pushed the CTA below the fold. */
  /* min(): identical 200%-text-zoom guard to .display's - the rem floor
     doubles under zoom while the viewport stays 320px wide. */
  font-size: min(clamp(2.3rem, 5.3vw, 5.6rem), 13.5vw);
  text-transform: uppercase; line-height: .98;
  max-width: 14em;
}
.type-phrase { display: block; }
.type-phrase[data-phase="3"] { color: var(--flame-0); display: inline-block; }
.type-caret {
  display: inline-block; width: .45em; height: .8em;
  margin-left: .12em; vertical-align: baseline;
  background: var(--flame-1);
  animation: caret 1.05s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }

.hero-id { margin-top: 2.6rem; display: grid; gap: .5rem; justify-items: start; }
/* brighter than --dim on purpose (readability over the canvas), opacity
   pinned to 1 so no inherited/animated alpha can wash them out */
.hero-name { font-size: clamp(18px, 16.4px + 0.3vw, 22px); color: #cfc6bf; opacity: 1; }
.hero-name strong { color: var(--paper); font-weight: 400; }
.hero-sub { font-size: clamp(19px, 17.8px + 0.27vw, 23px); color: #cfc6bf; opacity: 1; max-width: 46ch; }
.hero-id .btn { margin-top: 1rem; }

.hero-ticker {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 9;
  border-top: 1px solid rgba(90,80,74,.4);
  padding-block: .8rem;
  overflow: clip;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.ticker-row { display: flex; width: max-content; animation: ticker 36s linear infinite; align-items: stretch; justify-content: flex-start; }
.ticker-set { display: flex; align-items: stretch; justify-content: flex-start; }
.ticker-set span { padding-inline: 1.6rem; color: var(--faint); text-transform: uppercase; letter-spacing: .14em; white-space: nowrap; }
.ticker-set span:nth-child(odd) { color: var(--dim); }
@keyframes ticker { to { transform: translateX(-25%); } } /* 4 copies in the markup: -25% = exactly one set, seamless on ultrawides */

/* ==========================================================================
   6.2 Claim + pillars
   ========================================================================== */
.sec-claim .display { max-width: 20em; }
.claim-tail { margin-top: 1.4rem; color: var(--dim); }
.pillars { margin-top: 3.5rem; display: grid; gap: 1.4rem; }
.pillar-link {
  position: relative;
  display: block;
  padding: 1.1rem 0 1.3rem;
  text-decoration: none;
  color: var(--paper);
  text-transform: uppercase;
  letter-spacing: .1em;
}
.pillar-no { color: var(--flame-1); margin-right: 1rem; }
.pillar-link:hover { color: var(--flame-0); }
.pillar-u { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 2px; }
.pillar-u path { stroke: var(--flame-1); stroke-width: 2; }

/* ==========================================================================
   6.3 Trust — white break A
   ========================================================================== */
.trust-rows { display: grid; gap: 3rem; margin-bottom: 3.5rem; }
.trust-agencies, .trust-brands, .facts, .footer-nav { list-style: none; padding-left: 0; }
/* --faint was tuned against the DARK inks (4.84:1 there) and only measures
   3.90:1 on paper; this darker stone holds 4.6:1 on white. */
.trust-h { color: #6b6058; text-transform: uppercase; letter-spacing: .16em; margin-bottom: 1.1rem; }
.trust-agencies { display: flex; flex-wrap: wrap; gap: .4rem 2.4rem; align-items: stretch; justify-content: flex-start; }
.trust-agencies li {
  font-size: clamp(1.9rem, 3.4vw, 3.2rem);
  text-transform: uppercase; line-height: 1.1;
}
.trust-brands { display: grid; gap: 1.1rem; }
.trust-brands li { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr) auto; gap: .4rem 1.6rem; align-items: baseline; }
.brand-name { font-size: clamp(1.5rem, 2.4vw, 2.2rem); text-transform: uppercase; }
.brand-what { color: #55483f; }
.trust-disclaimer { color: var(--ink-0); margin-block: 1rem 1rem; }
.trust-small { color: #55483f; }
.facts { display: flex; flex-wrap: wrap; gap: .8rem 2.4rem; margin-top: 2.4rem; align-items: stretch; justify-content: flex-start; }
.facts li { color: #55483f; }
.facts strong { color: #c33200; font-weight: 700; } /* flame-2 is 4.19:1 on paper; this is 4.9:1 at the same hue */
.trust-frame { margin-top: 2.2rem; font-style: italic; color: #2b221c; }

@media (max-width: 700px) {
  .trust-brands li { grid-template-columns: minmax(0, 1fr); gap: .15rem; }
}

/* ==========================================================================
   6.4 Twelve years — pinned rail
   ========================================================================== */
.sec-years { padding-block: 0; }
.years-hold { min-height: 100vh; display: grid; align-content: center; gap: 3rem; overflow: clip; padding-block: 6rem 2.5rem; }
.years-head .display { max-width: 16em; }
/* overflow-x auto is the no-JS fallback: the rail holds 12 years of markers
   and without the timeline they were simply unreachable. buildYearsRail
   switches it to clip and takes over the transport. */
.rail-viewport { position: relative; width: 100%; overflow-x: auto; overflow-y: clip; scrollbar-width: none; }
/* The band was a flat 380px. On a 1800-2000px tall screen that left over half
   the pinned section empty and read as a black gap - and it is height-driven,
   so checking widths alone never showed it. Grow the space BETWEEN the two
   rails with the viewport; every offset INSIDE a rail group stays fixed, so
   labels keep their relationship to their dots and to their year. */
.rail-viewport { --rail-gap: clamp(0px, calc((100vh - 900px) * 0.42), 470px); }
.rail { position: relative; width: 385%; height: calc(380px + var(--rail-gap)); }
/* -13% on the right: markers are 15% wide and the last starts at 98%, so the
   content runs to 113% of the rail. Without this the line stopped short and
   the final markers floated next to a bare black strip. */
.rail-line { position: absolute; left: 0; right: -13%; height: 2px; }
.rail-top { top: 96px; background: linear-gradient(90deg, var(--ember), var(--flame-2) 55%, var(--flame-1) 80%, var(--flame-0)); }
.rail-bottom { top: calc(268px + var(--rail-gap)); background: linear-gradient(90deg, rgba(138,36,0,.55), rgba(255,106,0,.75) 70%, var(--flame-0)); }
.era, .own { position: absolute; left: var(--x); width: 15%; }
.era { top: 40px; }
.era-dot, .own-dot {
  position: absolute; top: 49px; left: 0; width: 14px; height: 14px;
  border-radius: 50%; background: var(--flame-1);
  box-shadow: 0 0 18px rgba(255,106,0,.8);
}
.era-t { display: block; font-size: clamp(1.3rem, 1.8vw, 1.9rem); text-transform: uppercase; margin-top: 76px; line-height: 1.05; }
/* Teko leaves ~4.6px of empty box below its caps, so a positive margin here
   reads as a much larger gap than the number suggests and the pair stops
   looking like one label. Negative pulls the sub-label back under the ink;
   the boxes overlap slightly, the glyphs do not. */
.era-s { display: block; color: var(--faint); margin-top: -.1rem; }
.own { top: calc(262px + var(--rail-gap)); }
.own-dot { top: 0; }
.own-t { display: block; margin-top: 26px; color: var(--flame-0); text-transform: lowercase; }
.own-s { display: block; color: var(--faint); margin-top: .2rem; }
.own-future .own-dot { background: transparent; border: 2px dashed var(--flame-1); box-shadow: none; }
.own-future .own-t { color: var(--paper); }
/* 180, not 168: .era-t grows with the viewport (up to 30.4px) while this tick
   is pinned, so on a 1920+ monitor the title pushed the sub-label down until it
   sat closer to the YEAR than to its own title - the pair stopped reading as a
   pair. 180 keeps the sub nearer its title at every width. */
.rail-tick {
  position: absolute; left: var(--x); color: var(--faint);
  top: calc(180px + var(--rail-gap) / 2);
  /* nudges up on big screens only: 16px until ~2100px wide, then grows */
  font-size: clamp(16px, 0.75vw, 24px);
}
.years-note { color: var(--dim); letter-spacing: .12em; text-transform: uppercase; }

/* ==========================================================================
   6.5 / 6.7 / 6.10 — copy + vis grids
   ========================================================================== */
.route-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem); align-items: center;
}
.route-copy p { margin-top: 1.2rem; color: var(--dim); }
.route-copy .btn { margin-top: 1.8rem; }
.route-vis svg { width: 100%; height: auto; }
.route-path { stroke: var(--faint); stroke-width: 2; }
.route-nodes circle { fill: var(--ink-2); stroke: var(--flame-2); stroke-width: 2; }
.route-tag { fill: var(--dim); font-family: "Manrope", "Manrope-fb", sans-serif; font-size: 16px; }
.route-tag-warn { fill: var(--flame-0); }
.route-dot { fill: var(--flame-0); filter: drop-shadow(0 0 8px rgba(255,138,31,.9)); }

.funnel-path { stroke: var(--flame-2); stroke-width: 2.5; }
.funnel-labels text { fill: var(--dim); font-family: "Manrope", "Manrope-fb", sans-serif; font-size: 16px; }
.funnel-hot { fill: var(--flame-0) !important; }

.six-wire path, .six-wire circle, .six-wire line { stroke: var(--flame-2); stroke-width: 1.5; opacity: .85; }
.six-wave { stroke: var(--ember) !important; }
#sixHand, #sixSweep { stroke: var(--flame-0); stroke-width: 2; }
#sixSweep { opacity: .45; }
.six-leak { fill: var(--flame-0); }
#sixSeal { stroke: var(--flame-0); stroke-width: 3; filter: drop-shadow(0 0 6px rgba(255,138,31,.9)); }
#sixLeakLabel { fill: var(--flame-0); }
.six-labels text { fill: var(--dim); font-family: "Manrope", "Manrope-fb", sans-serif; font-size: 16px; }
.six-redact { fill: var(--faint); }
.six-line { font-size: clamp(1.15rem, 1.6vw, 1.45rem); color: var(--paper) !important; }
.six-meta { color: var(--flame-1) !important; letter-spacing: .16em; }

@media (max-width: 900px) {
  .route-grid { grid-template-columns: minmax(0, 1fr); }
  .sec-funnel .route-vis { order: 2; }
}

/* ==========================================================================
   6.6 Build strip
   ========================================================================== */
.build-strip {
  display: flex; gap: clamp(1rem, 2vw, 2rem);
  margin-block: 3rem;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none; /* the strip pans with the page scroll instead */; align-items: stretch; justify-content: flex-start; }
.build-strip::-webkit-scrollbar { display: none; }
.build-card {
  position: relative;
  flex: 0 0 clamp(240px, 26vw, 360px);
  /* matches the 2:3 source exactly, so the strip shows the whole shot instead
     of cropping ~16% off both sides */
  aspect-ratio: 2 / 3;
  overflow: clip;
  background: var(--ink-2);
}
.build-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.build-card figcaption {
  position: absolute; inset-inline: 0; bottom: 0;
  padding: 2.4rem .9rem .7rem;
  background: linear-gradient(180deg, transparent, rgba(5, 6, 10, .74));
  color: #fff; text-transform: uppercase; letter-spacing: .14em; font-size: .72rem;
}

/* ==========================================================================
   6.8 Selected work
   ========================================================================== */
.selected-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.8rem);
}
.sel-card { grid-column: span 2; background: var(--ink-2); overflow: clip; }
.sel-wide { grid-column: span 3; aspect-ratio: 16 / 10; }
/* Exactly 100% and anchored to the top: the screenshot's own header is the
   point of these cards, and the old 108% + pan from -8% cut it off for most
   of the scroll. The card's rise-and-fade is the motion now. */
.sel-card img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.sel-card figcaption { padding: .6rem .6rem; color: var(--faint); text-transform: uppercase; letter-spacing: .12em; }
@media (max-width: 700px) {
  .selected-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sel-card, .sel-wide { grid-column: span 2; }
}

/* ==========================================================================
   6.9 Scoreboard
   ========================================================================== */
.sec-speed .sec-lead { max-width: 56ch; }
.board { margin-top: 3rem; display: grid; gap: 1px; background: var(--ink-2); border-block: 1px solid var(--ink-2); }
.board-row {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 1.5rem; align-items: center;
  padding: 1.4rem clamp(1rem, 2.5vw, 1.8rem); background: var(--ink-0);
}
.board-site { display: grid; gap: .2rem; text-decoration: none; }
/* Domains are single unbreakable tokens: at 200% text they push past a 320px
   viewport. Scoped to this element only - a global overflow-wrap would split
   short nav words like "FAQ" across lines. */
.board-name { font-size: clamp(1.5rem, 2.4vw, 2.3rem); text-transform: lowercase; transition: color .3s; overflow-wrap: anywhere; }
.board-site:hover .board-name { color: var(--flame-0); }
.board-tag { color: var(--faint); }
.board-gauges { display: flex; flex-wrap: wrap; gap: clamp(.8rem, 2vw, 1.8rem); justify-content: flex-end; align-items: stretch; }
.gauge { position: relative; display: grid; justify-items: center; gap: .15rem; width: 64px; }
.gauge svg { width: 52px; height: 52px; transform: rotate(-90deg); }
.g-track { fill: none; stroke: var(--ink-2); stroke-width: 4; }
.g-arc {
  fill: none; stroke: var(--flame-1); stroke-width: 4; stroke-linecap: round;
  stroke-dasharray: calc(119.38 * var(--p, 0)) 119.38;
}
.g-num { position: absolute; top: 15px; font-size: var(--fs-small); color: var(--paper); }
.g-lbl { color: var(--faint); font-size: var(--fs-small); }
.board-honest { margin-top: 2.4rem; font-style: italic; color: var(--dim); }
.board-method { margin-top: .6rem; color: var(--faint); letter-spacing: .14em; }
@media (max-width: 900px) {
  .board-row { grid-template-columns: minmax(0, 1fr); }
  .board-gauges { justify-content: flex-start; }
}

/* ==========================================================================
   6.11 Process — pinned
   ========================================================================== */
.sec-process { padding-block: 0; }
.process-hold { min-height: 100vh; display: grid; align-content: center; gap: 2.5rem; padding-block: 6rem; }
.process-stage { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.morph { display: grid; place-content: center; aspect-ratio: 1; }
.morph-core {
  display: block; width: clamp(140px, 16vw, 220px); height: clamp(140px, 16vw, 220px);
  background: var(--flame);
  box-shadow: 0 0 60px rgba(255,106,0,.35);
}
.process-steps { display: grid; gap: 2.2rem; }
.p-step h3 { font-size: clamp(1.8rem, 2.6vw, 2.6rem); text-transform: uppercase; color: var(--paper); }
.p-step p { color: var(--dim); margin-top: .3rem; }
.process-line { font-style: italic; color: var(--paper); border-left: 2px solid var(--flame-1); padding-left: 1.2rem; }
@media (max-width: 900px) {
  .process-hold { gap: 0; }
  .sec-process .sec-label { margin-bottom: .4rem; }
  .process-stage { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .morph { display: grid; order: -1; aspect-ratio: auto; max-height: 30vh; width: auto; }
  .morph-core { width: 110px; height: 110px; margin-block: 1.2rem; }
}

/* ==========================================================================
   6.12 Ask — white break B
   ========================================================================== */
.ask-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 6rem); }
.ask-copy p { color: #2b221c; margin-top: 1rem; }
.ask-facts { margin-top: 2rem; flex-direction: column; gap: .5rem; }
.ask-form { display: grid; gap: 1.3rem; align-content: start; }
.field { display: grid; gap: .45rem; }
.field label { font-family: "Manrope", "Manrope-fb", sans-serif; font-size: var(--fs-mono); letter-spacing: .1em; text-transform: uppercase; color: #55483f; }
.field input, .field textarea, .field select {
  font: inherit; font-size: var(--fs-body);
  padding: .8rem .9rem; min-height: 44px;
  background: #fcfcfc; color: var(--ink-0);
  border: 1px solid #e4e1de; border-radius: 0;
  transition: border-color .25s, box-shadow .25s;
}
.field input:hover, .field textarea:hover, .field select:hover { border-color: #cbc6c1; }
.field input:focus, .field textarea:focus, .field select:focus { outline: 2px solid var(--flame-2); outline-offset: 0; border-color: var(--flame-2); box-shadow: 0 2px 14px rgba(230,60,0,.08); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.field-check { display: flex; align-items: center; gap: .65rem; justify-content: flex-start; }
.field-check input { width: 24px; height: 24px; min-height: 0; accent-color: var(--flame-2); flex: 0 0 auto; cursor: pointer; }
.field-check label { font-family: "Lato", "Lato-fb", sans-serif; font-weight: 400; font-size: var(--fs-body); letter-spacing: 0; text-transform: none; color: #2b221c; cursor: pointer; padding-block: .35rem; }
.field-check a { color: var(--ink-0); }
.ask-form .btn { justify-self: start; }
@media (max-width: 900px) { .ask-grid { grid-template-columns: minmax(0, 1fr); } }

/* Form result states (contact page) */
.form-note { padding: 1rem 1.2rem; border-left: 3px solid var(--flame-2); background: #f4f1ee; color: #2b221c; }
.form-note.ok { border-color: #1a7f37; }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer { border-top: 1px solid var(--ink-2); padding-block: 4rem 2rem; background: var(--ink-0); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; }
.footer-line { margin-top: .8rem; }
.footer-nav { display: grid; gap: .7rem; align-content: start; }
.footer-nav a, .footer-ext {
  font-family: "Manrope", "Manrope-fb", sans-serif; font-size: var(--fs-mono);
  letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: var(--dim);
  padding-block: .2rem; display: inline-block;
}
.footer-nav a:hover, .footer-ext:hover { color: var(--flame-0); }
.footer-meta { display: grid; gap: .7rem; align-content: start; justify-items: start; }
.footer-sign {
  margin-top: 4rem; text-align: center;
  font-size: clamp(2.4rem, 8vw, 7rem);
  color: var(--faint);
  user-select: none;
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   404
   ========================================================================== */
.err-hold { min-height: 70vh; display: grid; place-content: center; text-align: center; gap: 1.2rem; }

/* ==========================================================================
   Inner pages, shared shells
   ========================================================================== */
.page-hero { padding-top: clamp(9rem, 18vh, 13rem); }
.page-hero .display { max-width: 15em; }
.page-hero-lead { margin-top: 1.6rem; color: var(--dim); max-width: 58ch; }
.cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 1.5rem; margin-top: 3rem;
  counter-reset: card; /* the ghost index is generated, so no markup carries it */
}
.card {
  counter-increment: card;
  position: relative; overflow: hidden;
  border: 1px solid var(--ink-2);
  border-left: 2px solid #24252c;
  padding: 1.8rem; background: var(--ink-1);
  transition: background .3s ease, transform .3s ease, border-color .3s ease;
}
/* left edge: a gradient bar wipes down over the flat border on hover */
.card::before {
  content: ""; position: absolute; left: -2px; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, var(--flame-0), var(--flame-2));
  transform: scaleY(0); transform-origin: top;
  transition: transform .4s ease;
}
/* ghost index, echoing the 01/02/03 pillars on the home page */
.card::after {
  content: counter(card, decimal-leading-zero);
  position: absolute; right: .5rem; bottom: -1.4rem;
  font-family: "Teko", "Teko-fb", sans-serif; font-size: 6rem; line-height: 1;
  color: var(--paper); opacity: .04; pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
}
.card:hover { background: var(--ink-2); transform: translateX(3px); border-left-color: var(--flame-1); }
.card:hover::before { transform: scaleY(1); }
.card:hover::after { opacity: .12; transform: translateY(-6px); }
/* the white break sections invert: ghost digit must darken, not lighten */
.card h3 { font-family: "Teko", "Teko-fb", sans-serif; font-size: 1.9rem; text-transform: uppercase; position: relative; }
.card p { color: var(--dim); margin-top: .6rem; position: relative; }
.card .mono { color: var(--flame-1); }
.list-rows { margin-top: 2.5rem; display: grid; }
.list-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--ink-2); align-items: baseline; }
.list-row:first-child { border-top: 1px solid var(--ink-2); }

/* Ember field (built by JS on the full-motion branch only) */
/* screen blend: on the black sections the sparks read as before; over the
   white breaks they multiply out to paper and vanish. The old sibling
   selector could never match (the layer hangs off <body>), so bright sparks
   were painting over the white sections. */
.embers { position: fixed; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: screen; }
.embers span {
  position: absolute; border-radius: 50%;
  background: var(--flame-0);
  box-shadow: 0 0 6px rgba(255,106,0,.8);
}

/* ==========================================================================
   Reduced motion — CSS side. JS builds zero ScrollTriggers on this branch.
   ========================================================================== */

/* Product #6 scene v2 — chart, seam, moon, splashes, sweep */
.six-chart path { stroke: rgba(255,106,0,.10); stroke-width: 1; }
.six-chart .six-contour { stroke: rgba(255,106,0,.22); }
#sixSeam { stroke: var(--ember); stroke-width: 2; }
.six-splash { stroke: var(--flame-0); stroke-width: 2; stroke-linecap: round; }
#sixMoon { stroke: rgba(255,138,31,.55); stroke-width: 1.5; }
#sixShimmer { stroke: rgba(255,138,31,.4); stroke-width: 2; }
#sixSweep { fill: rgba(255,106,0,.14); stroke: rgba(255,138,31,.5); stroke-width: 1; }
.six-blip { fill: var(--flame-0); stroke: none; }

/* ---- Product #6, take three: the meter, anchored (01·F) ---- */
.six-meter {
  position: relative; overflow: clip;
  min-height: 420px;
  display: grid; align-content: center;
  padding: clamp(1rem, 3vw, 2rem);
  background: none; border: 0;
}
.six-meter::before {
  /* inset centring: the old margin-top was a WIDTH-relative percentage
     compensating height, tuned for the desktop aspect - at phone ratios the
     halo sat ~100px low and clipped at the bottom. */
  content: ""; position: absolute; inset: 6% 4%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 106, 0, .15), rgba(255, 106, 0, .04) 55%, transparent 76%);
  z-index: 0; pointer-events: none;
}
.six-meter .six-anchor {
  position: absolute; left: 50%; bottom: 8%;
  width: min(32vh, 44%, 270px) !important; height: auto; aspect-ratio: 1;
  margin-left: calc(min(32vh, 44%, 270px) / -2);
  z-index: 1; pointer-events: none;
}
.six-meterbox { position: relative; z-index: 2; max-width: 440px; }
.six-mlabel { font-size: 13px; letter-spacing: .2em; color: var(--faint); margin-bottom: .3rem; }
.six-mvalue {
  font-family: "Teko", "Teko-fb", sans-serif; font-weight: 600;
  font-size: clamp(3.6rem, 6vw, 6rem); line-height: .95;
  color: var(--flame-0); font-variant-numeric: tabular-nums;
  margin-bottom: 1.4rem;
}
.six-mrow { display: flex; gap: 2.6rem; margin-bottom: 1.4rem; align-items: stretch; justify-content: flex-start; }
.six-mmid {
  font-family: "Teko", "Teko-fb", sans-serif; font-weight: 600;
  font-size: 2.1rem; line-height: 1; color: var(--paper);
  font-variant-numeric: tabular-nums;
}
.six-mbar { height: 9px; background: rgba(255,255,255,.07); overflow: hidden; margin: .3rem 0 .9rem; }
.six-mbar i { display: block; height: 100%; width: 4%; background: linear-gradient(90deg, var(--flame-2), var(--flame-0)); }
.six-mfoot { font-size: .95rem; font-style: italic; color: var(--dim); }

/* ---- mobile rails: wider track, smaller markers, no label collisions ---- */
@media (max-width: 640px) {
  .rail { width: 560%; height: 330px; }
  .rail-top { top: 84px; }
  .rail-bottom { top: 236px; }
  .era { top: 28px; }
  .era-dot { top: 49px; }
  .own { top: 230px; }
  .era, .own { width: 7%; }
  .era-t, .era-s, .own-t, .own-s { overflow-wrap: anywhere; }
  .era-t { font-size: 1.05rem; margin-top: 72px; }
  .era-s, .own-s { font-size: .82rem; }
  .own-t { font-size: .98rem; margin-top: 24px; }
  .rail-tick { top: 172px; }
  .years-hold { gap: 1.6rem; }
  .years-head .display { max-width: none; }
}

/* stable pin holds on mobile: small-viewport units ignore the toolbar */
@supports (min-height: 100svh) {
  .years-hold, .process-hold { min-height: 100svh; }
}

/* the agentic section rises into the rails' trailing padding — no dead band */
.sec-route { margin-top: -12vh; margin-top: -12svh; }

/* ---- preloader: covers first paint until the motion engine is live ---- */
#preloader {
  position: fixed; inset: 0; z-index: 400;
  background: var(--ink-0);
  display: grid; place-content: center; justify-items: center; gap: 20px;
  transition: opacity .55s ease, visibility .55s ease;
}
#preloader .pre-bar {
  display: block; width: 148px; height: 2px;
  background: rgba(255, 106, 0, .16); overflow: hidden;
}
#preloader .pre-bar i {
  display: block; height: 100%; width: 38%;
  background: linear-gradient(90deg, var(--flame-2), var(--flame-0));
  animation: preSweep 1.05s ease-in-out infinite;
}
@keyframes preSweep {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(390%); }
}
#preloader.done { opacity: 0; visibility: hidden; }

/* breathing room between the campaign disclaimer and the brand list */
.trust-small.trust-pre { margin-bottom: 1.8rem; }

/* While the first-visit picker is up, the page behind it must not scroll -
   :has() gates it on the modal actually being in the DOM (first visit only). */
html:has(#langmodal), html:has(#langmodal) body { overflow: hidden; }

/* ---- language picker, NEON RING design (owner-picked, option 4) ----
   The card wears a conic orange gradient edge; options are borderless pills
   that pulse a neon ring while hovered. Sits ABOVE the preloader (z 400). */
.langmodal {
  /* 600: above the skip-link's 500. At the old tie the later-in-DOM modal
     painted on top anyway, so Tab #1 landed on a covered, unclickable link. */
  position: fixed; inset: 0; z-index: 600;
  display: grid; place-items: center;
  background: rgba(4, 5, 8, .72);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.langmodal-ring {
  width: min(92vw, 410px);
  padding: 2px; border-radius: 26px;
  background: conic-gradient(from 210deg,
    rgba(255, 106, 0, 0), rgba(255, 138, 31, .75), rgba(230, 60, 0, .2),
    rgba(255, 138, 31, .6), rgba(255, 106, 0, 0));
  box-shadow: 0 0 44px rgba(255, 106, 0, .18), 0 30px 80px rgba(0, 0, 0, .8);
  animation: lmIn .35s ease both;
}
.langmodal-card {
  position: relative;
  background: #0a0a0c; border-radius: 24px;
  padding: 2rem 1.6rem 1.6rem;
  /* Six languages stack taller than the three this was designed for. The cap
     plus scroll is the safety net for short screens (landscape phones); the
     two-column rule below is what normally keeps it off. */
  max-height: 88vh; overflow-y: auto;
}
@keyframes lmIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.langmodal-close {
  position: absolute; top: .45rem; right: .75rem;
  font-size: 1.5rem; line-height: 1; padding: .35rem .5rem;
  color: var(--faint); text-decoration: none; transition: color .2s ease, text-shadow .2s ease;
}
.langmodal-close:hover { color: var(--flame-0); text-shadow: 0 0 12px rgba(255, 106, 0, .8); }
.langmodal-title {
  display: flex; align-items: center; justify-content: flex-start; gap: .6rem;
  color: var(--dim); letter-spacing: .16em; text-transform: uppercase; font-size: .74rem; margin-bottom: 1.2rem;
}
.langmodal-title .lang-globe { color: var(--flame-0); filter: drop-shadow(0 0 5px rgba(255, 106, 0, .9)); }
.langmodal-grid { display: grid; grid-template-columns: 1fr; gap: .6rem; }
/* Two columns once there is room for the longest native name ("Français",
   "Ελληνικά") beside its code badge - three rows instead of six. Below this
   the single column stays, because a cramped two-up wraps the name. */
@media (min-width: 380px) { .langmodal-grid { grid-template-columns: 1fr 1fr; } }
/* Landscape phones: height is the binding constraint, so take the two-up even
   when narrow and tighten the pills to buy the rows back. */
@media (max-height: 560px) {
  .langmodal-grid { grid-template-columns: 1fr 1fr; gap: .45rem; }
  .langmodal-opt { padding: .6rem .8rem; gap: .55rem; }
  .langmodal-card { padding: 1.4rem 1.1rem 1.1rem; }
  .langmodal-title { margin-bottom: .8rem; }
}
.langmodal-opt {
  display: flex; align-items: center; gap: .85rem;
  padding: .8rem 1.15rem; border-radius: 999px;
  background: #111113;
  color: #fff; text-decoration: none;
  transition: box-shadow .25s ease, background .25s ease;
}
.langmodal-opt:hover {
  background: #131110;
  box-shadow: 0 0 0 1.5px var(--flame-0), 0 0 20px rgba(255, 106, 0, .55), inset 0 0 22px rgba(255, 106, 0, .1);
  animation: lmPulse 1.6s ease-in-out infinite;
}
.langmodal-opt.is-active {
  box-shadow: 0 0 0 1.5px var(--flame-0), 0 0 26px rgba(255, 106, 0, .6);
}
@keyframes lmPulse {
  50% { box-shadow: 0 0 0 1.5px var(--flame-0), 0 0 34px rgba(255, 106, 0, .85), inset 0 0 22px rgba(255, 106, 0, .16); }
}
.langmodal-code { color: var(--flame-0); font-size: .72rem; letter-spacing: .14em; min-width: 2.2em; }

/* ---- nav switcher: circular globe button + gradient language badge ---- */
.langdrop { position: relative; margin-left: auto; margin-right: 1rem; }
.langdrop summary {
  list-style: none; cursor: pointer; position: relative;
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--flame-0); background: #111113;
  transition: box-shadow .25s ease;
}
.langdrop summary::-webkit-details-marker { display: none; }
.langdrop summary:hover,
.langdrop[open] summary {
  box-shadow: 0 0 0 1.5px var(--flame-0), 0 0 18px rgba(255, 106, 0, .6);
}
.langdrop-badge {
  position: absolute; bottom: -4px; right: -7px;
  background: linear-gradient(135deg, var(--flame-2), var(--flame-0));
  color: #000; font-size: .5rem; letter-spacing: .06em; font-style: normal;
  padding: 2px 5px; border-radius: 999px;
}
.langdrop-menu {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 60;
  display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: .45rem;
  min-width: 175px;
  /* six entries, so cap it against the viewport rather than letting it run off
     the bottom of a short screen */
  max-height: min(70vh, 420px); overflow-y: auto;
  background: #0a0a0c; border-radius: 18px; padding: .6rem;
  box-shadow: 0 0 0 1px rgba(255, 138, 31, .35), 0 0 34px rgba(255, 106, 0, .22), 0 22px 50px rgba(0, 0, 0, .7);
}
.langdrop-opt {
  display: flex; align-items: center; justify-content: flex-start; gap: .7rem;
  padding: .55rem .85rem; border-radius: 999px;
  background: #111113; color: #fff; text-decoration: none; font-size: .82rem;
  transition: box-shadow .25s ease, background .25s ease;
}
.langdrop-opt:hover {
  background: #131110;
  box-shadow: 0 0 0 1.5px var(--flame-0), 0 0 16px rgba(255, 106, 0, .5);
}
.langdrop-opt.is-active { box-shadow: 0 0 0 1.5px var(--flame-0), 0 0 20px rgba(255, 106, 0, .55); }
@media (max-width: 900px) { .langdrop { display: none; } }

.nav-overlay-langs { display: flex; align-items: center; justify-content: center; gap: 1.4rem; margin-top: 1.4rem; }
.nav-overlay-langs a { color: var(--faint); text-decoration: none; font-size: .8rem; letter-spacing: .16em; padding: .4rem .2rem; }
.nav-overlay-langs a.is-here { color: var(--flame-0); }

.footer-langs { display: flex; align-items: center; justify-content: flex-start; gap: 1rem; margin-block: .5rem .7rem; flex-wrap: wrap; }
.footer-langs a { color: var(--faint); text-decoration: none; font-size: .72rem; letter-spacing: .1em; }
.footer-langs a.is-here { color: var(--flame-0); }
.footer-langs a:hover { color: #fff; }

/* ---- blog ---- */
.blog-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.8rem);
}
@media (max-width: 900px) { .blog-grid { grid-template-columns: 1fr; } }
.blog-card { border: 1px solid rgba(255, 255, 255, .1); background: var(--ink-2); transition: border-color .2s ease; }
.blog-card:hover { border-color: var(--flame-0); }
.blog-card > a { display: block; padding: 1.4rem 1.4rem 1.2rem; color: inherit; text-decoration: none; height: 100%; }
.blog-card h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.05; margin: .55rem 0 .6rem; text-transform: uppercase; }
.post-meta { color: var(--faint); font-size: .72rem; letter-spacing: .12em; }
.post-excerpt { color: #b7aca3; font-size: .95rem; line-height: 1.55; }
.post-read { display: inline-block; margin-top: .9rem; color: var(--flame-0); font-size: .74rem; letter-spacing: .12em; }
.post-back { color: inherit; text-decoration: none; }
.post-back:hover { color: var(--flame-0); }
.post-wrap { max-width: 780px; }
.post-body { font-size: 1.06rem; line-height: 1.72; color: #d9d2cb; }
.post-body h2, .post-body h3 { color: #fff; line-height: 1.15; margin: 2.2rem 0 .8rem; }
.post-body h2 { font-size: 1.7rem; }
.post-body h3 { font-size: 1.25rem; }
.post-body p { margin-block: 1rem; }
.post-body a { color: var(--flame-0); }
.post-body ul, .post-body ol { margin: 1rem 0 1rem 1.4rem; }
.post-body li { margin-block: .35rem; }
.post-body img { max-width: 100%; height: auto; display: block; margin-block: 1.4rem; }
.post-body blockquote { border-left: 2px solid var(--flame-0); padding-left: 1.1rem; margin-block: 1.4rem; color: #b7aca3; }
.post-body pre { background: #0d0e12; border: 1px solid rgba(255, 255, 255, .08); padding: 1rem 1.2rem; overflow-x: auto; margin-block: 1.3rem; font-size: .88rem; }
.post-body code { background: #0d0e12; padding: .1em .35em; font-size: .92em; }
.post-body pre code { background: none; padding: 0; }

/* ---- touch tap-targets: 44px minimum on coarse pointers only ---- */
@media (pointer: coarse) {
  .nav-brand { padding-block: 7px; }
  .footer-nav a, .footer-ext { padding-block: 11px; }
  .field-check label a, .list-row a, .route-copy p a {
    padding: 14px 10px; margin: -14px -10px; display: inline-block;
  }
  /* The consent box keeps its 22px look on phones; the 44px tap target comes
     from the row and the linked label, not from inflating the control itself
     (a 40px checkbox reads as a bug, not as accessibility). */
  input[type="checkbox"] { width: 40px; height: 40px; }
  .field-check input[type="checkbox"] { width: 22px; height: 22px; }
  .field-check { min-height: 44px; }
  .field-check label { padding-block: .7rem; }
  .board-site { padding-block: 6px; }
}


/* Touch: the hero "pin" is pure CSS — a 270svh room with a sticky hero.
   Exists from first paint, so no ScrollTrigger spacer can shift layout.
   Fine pointers keep the ScrollTrigger pin (sticky breaks under the
   smoother's transform), created statically before the smoother. */
.hero-flow { position: relative; }
@media (pointer: coarse) {
  .hero-flow { height: 270svh; }
  .hero { position: sticky; top: 0; height: 100svh; min-height: 0; }
}

/* The caret occupies no layout space: absolutely positioned at its static
   inline spot (end of the typed phrase). Moving it between phrases used to
   change line wraps — that reflow was the remaining mobile CLS. */
.type-phrase { position: relative; }
/* Caret rides the text flow; a WORD JOINER (U+2060) after each phrase's last
   character glues it to the dot, so it can never wrap onto a line of its own
   (absolute positioning broke on longer Greek lines - it landed line-start). */
.type-caret { position: static; margin-left: .1em; transform: none; }

/* Touch: the stage is top-anchored (not grid-centered) so the type engine's
   split/typing height changes grow DOWNWARD instead of re-centering the
   whole block — that re-centering was the residual mobile CLS. */
@media (pointer: coarse) {
  .hero { align-items: start; }
  .hero-stage { padding-top: max(88px, 11svh); }
}

@media (pointer: coarse) {
  html:not(.fonts-in) .hero-type { visibility: hidden; }
}