/* ==========================================================================
   Grupo Empresa · Energy — design system
   ========================================================================== */

/* Palette, type and shapes lifted from the live Grupo Empresa site
   (energyempresa.com): Poppins, #F8F5F0 paper, #24211E dark, #55504B text,
   #E95057 brand, pill buttons. */
:root {
  /* Dark ground — warm brown-black */
  --ink-950: #1B1917;
  --ink-900: #24211E;
  --ink-870: #2C2926;
  --ink-850: #35312D;
  --ink-800: #403B36;

  --line:    rgba(255, 255, 255, .11);
  --line-2:  rgba(255, 255, 255, .20);

  /* Light ground — warm paper */
  --paper:   #F8F5F0;
  --paper-2: #EFEAE2;
  --card:    #FFFFFF;
  --paper-line: rgba(85, 80, 75, .16);

  /* Text */
  --fg:      #F6F3EE;
  --fg-dim:  #C3BCB3;
  --fg-mute: #948C83;
  --ink:     #413C37;
  --ink-dim: #55504B;
  --ink-mute:#877F76;

  /* Brand */
  --brand:      #E95057;
  --brand-deep: #C23B42;
  --brand-soft: #FBEDEC;
  --ok:         #3E8E6C;

  --font-display: 'Poppins', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-body: 'Poppins', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-mono: 'Poppins', system-ui, -apple-system, Segoe UI, sans-serif;

  --r-sm: 8px;
  --r:    14px;
  --r-lg: 20px;

  --sh-sm: 0 1px 2px rgba(30, 35, 43, .05), 0 3px 10px rgba(30, 35, 43, .045);
  --sh-md: 0 2px 4px rgba(30, 35, 43, .04), 0 14px 36px rgba(30, 35, 43, .075);
  --sh-dk: 0 2px 6px rgba(0, 0, 0, .22), 0 18px 44px rgba(0, 0, 0, .26);

  --pad: clamp(20px, 4.2vw, 64px);
  --maxw: 1360px;
  --gut: clamp(30px, 3.6vw, 60px);

  --strip-h: 36px;
  --hdr-h: 92px;
  --hdr-total: calc(var(--strip-h) + var(--hdr-h));

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* --------------------------------------------------------------- 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(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.24;
  color: var(--ink);
}
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--brand); color: #fff; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 3px; }

/* --------------------------------------------------------- i18n switch */
html[lang="en"] [data-l="es"],
html[lang="es"] [data-l="en"] { display: none; }

/* ------------------------------------------------------------ primitives */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.mono {
  font-size: .78rem;
  letter-spacing: .04em;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: .78rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--brand-deep);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--brand-soft);
  padding: 7px 15px;
  border-radius: 999px;
}
.on-dark .eyebrow, .on-dark-2 .eyebrow, .hero .eyebrow, .cta-band .eyebrow, .pagehead .eyebrow, .statement .eyebrow {
  color: #FFB9B6;
  background: rgba(232, 83, 90, .16);
}

.idx {
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .04em;
  color: var(--brand-deep);
  font-weight: 500;
}

.h-xl { font-size: clamp(2.15rem, 4.6vw, 3.7rem); line-height: 1.16; letter-spacing: -.018em; font-weight: 600; }
.h-l  { font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1.22; letter-spacing: -.014em; font-weight: 600; }
.h-m  { font-size: clamp(1.3rem, 2vw, 1.75rem); line-height: 1.3; letter-spacing: -.01em; font-weight: 600; }
.h-s  { font-size: 1.1rem; line-height: 1.4; letter-spacing: -.005em; font-weight: 600; }

.lede { font-size: clamp(1.03rem, 1.25vw, 1.16rem); line-height: 1.68; color: var(--ink-dim); }
.on-dark .lede, .on-dark-2 .lede, .hero .lede, .cta-band .lede, .pagehead .lede, .statement .lede { color: var(--fg-dim); }

.muted { color: var(--ink-dim); }
.on-dark .muted, .on-dark-2 .muted, .hero .muted, .cta-band .muted, .pagehead .muted, .statement .muted { color: var(--fg-dim); }

.small { font-size: .955rem; line-height: 1.65; }
.tiny { font-size: .845rem; line-height: 1.6; }

.measure { max-width: 58ch; }
.measure-s { max-width: 44ch; }

.rule { height: 1px; background: var(--paper-line); border: 0; margin: 0; }

.brand-txt { color: var(--brand-deep); }
.on-dark .brand-txt, .on-dark-2 .brand-txt, .cta-band .brand-txt, .statement .brand-txt { color: #FF9A96; }

/* --------------------------------------------------------------- buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  font-family: var(--font-body);
  font-size: .97rem;
  font-weight: 600;
  letter-spacing: -.005em;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: background .22s var(--ease), color .22s var(--ease),
              border-color .22s var(--ease), box-shadow .22s var(--ease),
              transform .22s var(--ease);
  white-space: nowrap;
  line-height: 1.2;
}
.btn svg { width: 16px; height: 16px; flex: none; transition: transform .28s var(--ease); }
.btn:hover svg { transform: translateX(4px); }
.btn:hover { transform: translateY(-1px); }

.btn-primary { background: var(--brand); color: #fff; box-shadow: 0 4px 14px rgba(232, 83, 90, .3); }
.btn-primary:hover { background: var(--brand-deep); box-shadow: 0 8px 22px rgba(232, 83, 90, .34); }

.btn-ghost { border-color: var(--paper-line); color: var(--ink); background: var(--card); box-shadow: var(--sh-sm); }
.btn-ghost:hover { border-color: transparent; box-shadow: var(--sh-md); }

.on-dark .btn-ghost, .on-dark-2 .btn-ghost, .hero .btn-ghost, .cta-band .btn-ghost, .pagehead .btn-ghost {
  border-color: var(--line-2); color: var(--fg); background: rgba(255,255,255,.06); box-shadow: none;
}
.on-dark .btn-ghost:hover, .hero .btn-ghost:hover, .cta-band .btn-ghost:hover {
  background: rgba(255,255,255,.13); border-color: var(--line-2);
}

.lnk {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .95rem;
  font-weight: 600;
  color: var(--brand-deep);
  transition: gap .2s var(--ease), color .2s var(--ease);
}
.lnk:hover { gap: 13px; }
.on-dark .lnk, .on-dark-2 .lnk { color: #FF9A96; }

/* ----------------------------------------------------------------- chips */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border: 1px solid var(--paper-line);
  border-radius: 999px;
  font-size: .87rem;
  font-weight: 500;
  color: var(--ink-dim);
  background: var(--card);
}
.chip-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); flex: none; }
.on-dark .chip, .on-dark-2 .chip, .cta-band .chip {
  border-color: var(--line-2); color: var(--fg-dim); background: rgba(255,255,255,.05);
}
.chips { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------------------------------------------------------------- header */
.hdr {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;
  border-bottom: 1px solid transparent;
  transition: background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.hdr.is-stuck {
  background: rgba(250, 248, 245, .88);
  backdrop-filter: blur(18px) saturate(1.5);
  border-bottom-color: var(--paper-line);
}
.hdr.is-stuck .nav a { color: var(--ink-dim); }
.hdr.is-stuck .nav a:hover, .hdr.is-stuck .nav a[aria-current="page"] { color: var(--ink); }
.hdr.is-stuck .brandmark img { filter: none; }
.hdr.is-stuck .langsw { border-color: var(--paper-line); background: var(--card); }
.hdr.is-stuck .langsw button { color: var(--ink-mute); }
.hdr.is-stuck .langsw button[aria-pressed="true"] { color: #fff; }
.hdr.is-stuck .burger { border-color: var(--paper-line); background: var(--card); }
.hdr.is-stuck .burger span { background: var(--ink); }

/* Parent-brand strip — states that this is an official Grupo Empresa site */
.topstrip {
  background: var(--ink-950);
  border-bottom: 1px solid var(--line);
  height: var(--strip-h);
}
.hdr.is-stuck .topstrip { background: var(--ink-900); border-bottom-color: transparent; }
.topstrip-in {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 0 var(--pad);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.ts-label {
  font-size: .8rem;
  color: var(--fg-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ts-label b { color: var(--fg); font-weight: 600; }
.ts-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--brand);
  white-space: nowrap;
  flex: none;
  transition: color .2s var(--ease), gap .2s var(--ease);
}
.ts-link svg { width: 13px; height: 13px; }
.ts-link:hover { color: #fff; gap: 11px; }

.hdr-in {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 0 var(--pad);
  height: var(--hdr-h);
  display: flex;
  align-items: center;
  gap: 30px;
}

.brandmark { display: flex; align-items: center; gap: 16px; flex: none; }
.brandmark img { height: 42px; width: auto; }
.brandmark .div-tag {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.08rem;
  letter-spacing: .06em;
  color: var(--brand);
  padding-left: 16px;
  border-left: 1px solid currentColor;
  line-height: 1;
}
.hdr.is-stuck .brandmark .div-tag { color: var(--brand-deep); }

/* Logo ships with a white wordmark — invert it once the header goes light. */
.hdr.is-stuck .brandmark img { filter: invert(1) hue-rotate(180deg) saturate(1.6); }

/* Over the dark 3D hero the header stays dark, even when stuck. */
.hdr.is-stuck.over-hero {
  background: rgba(26, 26, 28, .82);
  border-bottom-color: var(--line);
}
.hdr.is-stuck.over-hero .topstrip { background: var(--ink-950); }
.hdr.is-stuck.over-hero .brandmark img { filter: none; }
.hdr.is-stuck.over-hero .brandmark .div-tag { color: var(--brand); }
.hdr.is-stuck.over-hero .nav a { color: var(--fg-dim); }
.hdr.is-stuck.over-hero .nav a:hover,
.hdr.is-stuck.over-hero .nav a[aria-current="page"] { color: var(--fg); }
.hdr.is-stuck.over-hero .langsw { border-color: var(--line-2); background: transparent; }
.hdr.is-stuck.over-hero .langsw button { color: var(--fg-mute); }
.hdr.is-stuck.over-hero .langsw button[aria-pressed="true"] { color: #fff; }
.hdr.is-stuck.over-hero .burger { border-color: var(--line-2); background: rgba(255,255,255,.06); }
.hdr.is-stuck.over-hero .burger span { background: var(--fg); }

.nav { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.nav a {
  font-size: .96rem;
  font-weight: 500;
  color: var(--fg-dim);
  padding: 8px 0;
  position: relative;
  transition: color .2s var(--ease);
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s var(--ease);
}
.nav a:hover { color: var(--fg); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--fg); }

.hdr-actions { display: flex; align-items: center; gap: 12px; flex: none; }

.langsw {
  display: flex;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  overflow: hidden;
  padding: 2px;
  gap: 2px;
}
.langsw button {
  background: transparent;
  border: 0;
  padding: 6px 13px;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--fg-mute);
  cursor: pointer;
  transition: background .2s, color .2s;
}
.langsw button[aria-pressed="true"] { background: var(--brand); color: #fff; }
.langsw button:not([aria-pressed="true"]):hover { color: var(--fg); background: rgba(255,255,255,.09); }

/* Two asymmetric bars that square up and cross into an X when open —
   the third bar in the markup is kept for older cached CSS but hidden. */
.burger {
  display: none;
  width: 46px; height: 46px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  cursor: pointer;
  padding: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.burger:hover { background: rgba(255,255,255,.13); }
.burger span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--fg);
  transition: transform .34s var(--ease), width .34s var(--ease);
}
.burger span:nth-child(1) { width: 19px; }
.burger span:nth-child(2) { display: none; }
.burger span:nth-child(3) { width: 12px; }
.burger[aria-expanded="true"] span:nth-child(1) { width: 19px; transform: translateY(3.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(3) { width: 19px; transform: translateY(-3.5px) rotate(-45deg); }

/* -------------------------------------------------------------- sections */
.sec { padding-block: clamp(68px, 8vw, 118px); position: relative; }
.sec-tight { padding-block: clamp(48px, 5.5vw, 76px); }

.on-dark  { background: var(--ink-900); color: var(--fg); }
.on-dark-2 { background: var(--ink-870); color: var(--fg); }
.on-paper { background: var(--paper); color: var(--ink); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4,
.on-dark-2 h1, .on-dark-2 h2, .on-dark-2 h3, .on-dark-2 h4 { color: var(--fg); }

.sec-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--gut);
  align-items: end;
  margin-bottom: clamp(36px, 4.2vw, 60px);
}
.sec-head > div:first-child { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
@media (max-width: 900px) { .sec-head { grid-template-columns: 1fr; align-items: start; gap: 22px; } }

/* ---------------------------------------------------------- decoration */
.grid-overlay {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 110px 110px;
  mask-image: radial-gradient(ellipse 85% 70% at 20% 45%, #000 0%, transparent 76%);
}
/* ------------------------------------------------------------ factstrip */
.hero-strip {
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--line);
}
.hero-strip > div {
  padding: 26px 22px 30px 0;
  background: transparent;
  border: 0;
}
.hero-strip .n {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.1vw, 1.95rem);
  letter-spacing: -.012em;
  line-height: 1.1;
  display: block;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.hero-strip .n small { font-size: .55em; font-weight: 600; color: var(--fg-dim); margin-left: 3px; }
.hero-strip .k { display: block; margin-top: 10px; color: var(--fg-mute); font-size: .87rem; line-height: 1.45; font-family: var(--font-body); letter-spacing: 0; text-transform: none; }
@media (max-width: 1000px) {
  .hero-strip { grid-template-columns: repeat(2, 1fr); }
  .hero-strip > div { padding: 18px 16px 20px 0; }
  .hero-strip > div:last-child { grid-column: 1 / -1; }
}

/* ------------------------------------------------------- 3D scroll hero */
/* One viewport tall until hero3d.js reports the scene is running, so a CDN
   failure, missing WebGL or reduced-motion never leaves empty scroll. */
.hero3d {
  position: relative;
  height: 100svh;
  background: #1A1A1C;
  color: #fff;
}
.hero3d.is-live { height: 600vh; }

.hero3d-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}
.hero3d-canvas { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; display: block; }
.hero3d-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(26,26,28,.94) 0%, rgba(26,26,28,.72) 26%, rgba(26,26,28,.18) 52%, rgba(26,26,28,0) 68%),
    linear-gradient(0deg, rgba(26,26,28,.85) 0%, rgba(26,26,28,0) 42%),
    radial-gradient(120% 90% at 50% 45%, rgba(0,0,0,0) 40%, rgba(0,0,0,.55) 100%);
}
@media (max-width: 900px) {
  /* Below --hero3d-canvas-h the canvas has ended and the section's own
     #1A1A1C background shows through — it's the same hex as the WebGL clear
     colour, so the seam is invisible without needing a fade there. Only the
     model itself still wants a soft edge vignette and a touch of shading
     under the fixed header. */
  .hero3d-vignette {
    background:
      linear-gradient(180deg, rgba(26,26,28,.55) 0%, rgba(26,26,28,0) 22%),
      radial-gradient(120% 90% at 50% 38%, rgba(0,0,0,0) 40%, rgba(0,0,0,.42) 100%);
  }
}

.hero3d-ticks {
  position: absolute;
  right: clamp(14px, 2vw, 30px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: flex; flex-direction: column; gap: 14px; align-items: flex-end;
}
.hero3d-ticks span {
  width: 26px; height: 2px; border-radius: 2px;
  background: rgba(255,255,255,.22);
  transition: width .35s var(--ease), background .35s var(--ease);
}
.hero3d-ticks span.is-on { width: 38px; background: var(--brand); }

.hero3d-stages { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hero3d-frame { position: relative; height: 100%; }

.h3-stage {
  position: absolute;
  left: var(--pad);
  right: var(--pad);
  bottom: 15vh;
  max-width: 620px;
  opacity: 0;
}
.h3-stage:first-child { opacity: 1; }
.h3-stage .btn { pointer-events: auto; }

.h3-eyebrow {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 14px;
}
.h3-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.1rem, 5.2vw, 4rem);
  line-height: 1.05;
  letter-spacing: -.022em;
  color: #fff;
}
.h3-body {
  margin-top: 20px;
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  line-height: 1.6;
  color: #BFBFBE;
  max-width: 46ch;
  text-wrap: pretty;
}
.h3-meta {
  margin-top: 16px;
  font-size: .85rem;
  letter-spacing: .02em;
  color: #8A8A8C;
  font-variant-numeric: tabular-nums;
}
.h3-cta { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 28px; }
.h3-cta .btn-ghost { border-color: rgba(255,255,255,.25); color: #fff; background: rgba(255,255,255,.07); box-shadow: none; }
.h3-cta .btn-ghost:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.25); }

.h3-figs { display: flex; flex-wrap: wrap; gap: clamp(22px, 3vw, 44px); margin-top: 28px; }
.h3-fig {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.h3-fig i { font-style: normal; font-size: .5em; margin-left: 3px; color: #8A8A8C; }
.h3-figk { display: block; margin-top: 7px; font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; color: #8A8A8C; }

.h3-stage-end {
  left: var(--pad); right: var(--pad);
  top: 50%; bottom: auto;
  max-width: none;
  transform: translateY(-50%);
  text-align: center;
}
.h3-title-end { font-size: clamp(1.9rem, 4vw, 3.2rem); }
.h3-stage-end .h3-body { margin-inline: auto; }
.h3-cta-end { justify-content: center; }
.h3-stage-end .h3-meta { margin-top: 24px; }

@media (max-width: 900px) {
  /* Six full viewports of hero is too much scrolling on a phone; the stages
     are the same, each one just takes less thumb travel. */
  .hero3d.is-live { height: 420vh; }

  /* On a narrow screen the model and the copy stop sharing the same frame —
     overlaying text on a phone-portrait render of a wide structural model
     made both hard to read and made the model itself tiny (fitting its full
     width at that aspect pushes the camera a long way back). Instead the
     canvas keeps a fixed box at the top (hero3d.js sizes the WebGL viewport
     from this box, not the window, so the model is framed for it directly)
     and the copy gets a clean, fully opaque zone below — no gradient needed
     between them since the canvas clear colour and this section's
     background are the same #1A1A1C. */
  /* --hero3d-split is the boundary between the two: hero3d.js measures the
     tallest stage's copy and sets it so the canvas gets exactly the room
     left between the header and the text. The fallback here is only used
     for the moment before that first measurement lands. */
  .hero3d { --hero3d-split: 52svh; }
  .hero3d-canvas {
    top: var(--hdr-total);
    bottom: auto;
    height: calc(var(--hero3d-split) - var(--hdr-total));
  }
  /* The vignette darkens only the canvas area, which reads as a panel edge
     against the flat page background. Nothing to fade against here. */
  .hero3d-vignette { display: none; }
  .hero3d-ticks {
    top: calc(var(--hdr-total) + (var(--hero3d-split) - var(--hdr-total)) / 2);
  }

  /* The copy box spans from the canvas down to the bottom margin and centres
     its content, so short stages sit in the middle of that space rather than
     dropping to the floor and leaving a hole under the model. */
  .h3-stage, .h3-stage-end {
    top: var(--hero3d-split);
    bottom: 2.5svh;
    max-width: none;
    transform: none;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .h3-body, .h3-stage-end .h3-body { margin-inline: auto; }
  .h3-cta, .h3-cta-end { justify-content: center; }
  .h3-figs { justify-content: center; }
  .h3-eyebrow { text-align: center; }
}
@media (max-width: 620px) {
  /* Every line trimmed off the copy block is a line the canvas gets back,
     since the split between them is computed from the tallest stage. */
  .h3-eyebrow { margin-bottom: 9px; font-size: .74rem; }
  .h3-title { font-size: clamp(1.8rem, 7.6vw, 2.3rem); line-height: 1.06; }
  .h3-body { font-size: .93rem; line-height: 1.48; margin-top: 12px; }
  .h3-meta { margin-top: 10px; font-size: .78rem; }
  .h3-cta { margin-top: 16px; gap: 9px; }
  .h3-cta .btn { padding: 12px 18px; font-size: .88rem; }
  /* Three across instead of wrapping to two rows — the second row cost the
     model about 55px of band height. */
  .h3-figs { gap: 14px; margin-top: 16px; flex-wrap: nowrap; }
  .h3-fig { font-size: 1.45rem; }
  .h3-figk { font-size: .66rem; margin-top: 4px; letter-spacing: .03em; }
  .hero3d-ticks { gap: 10px; right: 12px; }
  .hero3d-ticks span { width: 16px; }
  .hero3d-ticks span.is-on { width: 24px; }
}

/* ------------------------------------------------------------ factstrip */
.factstrip { background: var(--ink-950); color: var(--fg); }
.factstrip .hero-strip { border-top: 0; }
/* The grid's 1px gaps are painted by the parent, so the cells need their own
   fill or the line colour washes across the whole strip. */
.factstrip .hero-strip > div { background: var(--ink-950); }

/* -------------------------------------------------------------- pagehead */
.pagehead {
  padding-top: calc(var(--hdr-total) + clamp(50px, 6vw, 100px));
  padding-bottom: clamp(50px, 6vw, 86px);
  position: relative;
  overflow: hidden;
  background: var(--ink-900);
  color: var(--fg);
}
.pagehead h1, .pagehead h2 { color: var(--fg); }
.pagehead .grid-overlay { mask-image: radial-gradient(ellipse 80% 90% at 80% 50%, #000 0%, transparent 74%); }
.pagehead-in { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); gap: var(--gut); align-items: end; }
.pagehead h1 { margin-block: 22px 0; }
@media (max-width: 900px) { .pagehead-in { grid-template-columns: 1fr; gap: 24px; } }

/* ------------------------------------------------------------- statement */
.statement { background: var(--ink-870); color: var(--fg); }
.statement h1, .statement h2, .statement h3 { color: var(--fg); }
.statement-in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--gut); align-items: start; }
@media (max-width: 900px) { .statement-in { grid-template-columns: 1fr; gap: 24px; } }
.statement .big {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.3rem, 2.1vw, 1.8rem);
  line-height: 1.34;
  letter-spacing: -.016em;
  color: var(--fg);
}
.statement .big b { font-weight: 600; color: #FF8D89; }
.on-paper .statement .big, .on-paper .big { color: var(--ink); }
.on-paper .big b { color: var(--brand-deep); }

.excl {
  margin-top: 28px;
  border-left: 3px solid var(--brand);
  border-radius: 3px;
  padding: 6px 0 6px 22px;
}

/* ----------------------------------------------------------------- cards */
.grid-3, .grid-2 { display: grid; gap: 16px; background: none; border: 0; }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1000px) { .grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 700px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } }

.cell {
  background: var(--card);
  border: 1px solid var(--paper-line);
  border-radius: var(--r);
  padding: clamp(24px, 2.4vw, 34px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  box-shadow: var(--sh-sm);
  transition: box-shadow .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease);
}
.cell:hover { box-shadow: var(--sh-md); transform: translateY(-3px); border-color: transparent; }
.cell h3 { font-size: 1.16rem; }
.on-dark .cell, .on-dark-2 .cell {
  background: var(--ink-850); border-color: var(--line); box-shadow: none;
}
.on-dark .cell:hover, .on-dark-2 .cell:hover { background: var(--ink-800); box-shadow: var(--sh-dk); border-color: var(--line-2); }

/* ---------------------------------------------------------- pain / fix */
.pain {
  background: var(--card);
  border: 1px solid var(--paper-line);
  border-radius: var(--r);
  padding: clamp(26px, 2.6vw, 34px);
  display: flex;
  flex-direction: column;
  box-shadow: var(--sh-sm);
  overflow: hidden;
  position: relative;
  transition: box-shadow .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease);
}
.pain:hover { box-shadow: var(--sh-md); transform: translateY(-3px); border-color: transparent; }
.on-dark .pain, .on-dark-2 .pain { background: var(--ink-850); border-color: var(--line); box-shadow: none; }
.on-dark .pain:hover, .on-dark-2 .pain:hover { background: var(--ink-800); box-shadow: var(--sh-dk); }

.pain .p-tag {
  display: inline-flex;
  align-self: flex-start;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--brand-deep);
  background: var(--brand-soft);
  padding: 6px 13px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.on-dark .p-tag, .on-dark-2 .p-tag { color: #FFB9B6; background: rgba(232,83,90,.17); }

.pain h3 { font-size: 1.13rem; margin-bottom: 12px; }
.pain .p-risk { color: var(--ink-dim); font-size: .96rem; line-height: 1.65; }
.on-dark .p-risk, .on-dark-2 .p-risk { color: var(--fg-dim); }

.pain .p-sep { height: 1px; background: var(--paper-line); margin: 22px 0 20px; }
.on-dark .p-sep, .on-dark-2 .p-sep { background: var(--line); }

.pain .p-fix-l {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ok);
  margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px;
}
.pain .p-fix-l::before {
  content: "";
  width: 16px; height: 16px; flex: none;
  border-radius: 50%;
  background: var(--ok);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9.6 16.2 5.4 12l-1.4 1.4 5.6 5.6L20.4 8.2 19 6.8z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9.6 16.2 5.4 12l-1.4 1.4 5.6 5.6L20.4 8.2 19 6.8z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.pain .p-fix { color: var(--ink); font-size: .96rem; line-height: 1.68; }
.on-dark .p-fix, .on-dark-2 .p-fix { color: var(--fg-dim); }

/* ---------------------------------------------------------------- specs */
.spec { width: 100%; border-collapse: collapse; font-size: .97rem; }
.spec caption {
  text-align: left;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--brand-deep);
  padding-bottom: 16px;
}
.on-dark .spec caption, .on-dark-2 .spec caption { color: #FF9A96; }
.spec th, .spec td { text-align: left; padding: 15px 18px 15px 0; border-bottom: 1px solid var(--paper-line); vertical-align: top; }
.on-dark .spec th, .on-dark .spec td, .on-dark-2 .spec th, .on-dark-2 .spec td { border-color: var(--line); }
.spec thead th {
  font-size: .8rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 600;
}
.on-dark .spec thead th, .on-dark-2 .spec thead th { color: var(--fg-mute); }
.spec tbody th { font-weight: 500; color: var(--ink); }
.on-dark .spec tbody th, .on-dark-2 .spec tbody th { color: var(--fg); }
.spec td.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; padding-right: 0; white-space: nowrap; }
.spec tbody tr:last-child th, .spec tbody tr:last-child td { border-bottom: 0; }
.spec tbody tr { transition: background .2s var(--ease); }
.table-scroll { overflow-x: auto; }

/* --------------------------------------------------------------- process */
.flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; background: none; border: 0; }
@media (max-width: 1000px) { .flow { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px) { .flow { grid-template-columns: 1fr; } }
.step {
  background: var(--card);
  border: 1px solid var(--paper-line);
  border-radius: var(--r);
  padding: 24px clamp(18px, 1.8vw, 24px) 26px;
  display: flex; flex-direction: column; gap: 9px;
  box-shadow: var(--sh-sm);
  transition: box-shadow .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease);
}
.step:hover { box-shadow: var(--sh-md); transform: translateY(-3px); border-color: transparent; }
.on-dark .step, .on-dark-2 .step { background: var(--ink-850); border-color: var(--line); box-shadow: none; }
.on-dark .step:hover, .on-dark-2 .step:hover { background: var(--ink-800); box-shadow: var(--sh-dk); }

.step .s-n {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand-deep);
  font-family: var(--font-mono);
  font-size: .82rem;
  font-weight: 500;
  margin-bottom: 6px;
}
.on-dark .s-n, .on-dark-2 .s-n { background: rgba(232,83,90,.17); color: #FFB9B6; }
.step h4 { font-size: 1.01rem; font-family: var(--font-display); font-weight: 600; }
.step p { font-size: .91rem; color: var(--ink-dim); line-height: 1.6; }
.on-dark .step p, .on-dark-2 .step p { color: var(--fg-mute); }

/* ----------------------------------------------------------------- media */
.media { position: relative; overflow: hidden; background: var(--paper-2); border-radius: var(--r); }
.media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.media:hover img { transform: scale(1.04); }
.media .cap {
  position: absolute; left: 0; bottom: 0; right: 0;
  padding: 22px;
  /* Sits over the photo; without this it would swallow clicks meant for it. */
  pointer-events: none;
  background: linear-gradient(to top, rgba(20,23,28,.9), rgba(20,23,28,0));
  font-size: .88rem;
  font-weight: 500;
  color: #fff;
}

/* Shop gallery — two feature tiles carry the composition, the rest fill in. */
.shots {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 200px;
  gap: 14px;
}
.shots .media { margin: 0; }
.shots .shot-tall { grid-row: span 2; }
.shots .shot-wide { grid-column: span 2; }
@media (max-width: 1000px) {
  .shots { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 190px; }
}
@media (max-width: 560px) {
  .shots { grid-template-columns: 1fr; grid-auto-rows: 220px; gap: 12px; }
  .shots .shot-tall { grid-row: span 1; }
  .shots .shot-wide { grid-column: span 1; }
}

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gut); align-items: center; }
.split-wide { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); }
@media (max-width: 900px) { .split, .split-wide { grid-template-columns: 1fr; gap: 32px; } }

/* -------------------------------------------------------------- listings */
.ticklist { display: flex; flex-direction: column; gap: 0; }
.ticklist li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 14px;
  padding: 15px 0;
  border-bottom: 1px solid var(--paper-line);
  align-items: start;
  font-size: .98rem;
  line-height: 1.65;
  color: var(--ink-dim);
}
.on-dark .ticklist li, .on-dark-2 .ticklist li, .cta-band .ticklist li { border-color: var(--line); color: var(--fg-dim); }
.ticklist li::before {
  content: "";
  width: 18px; height: 18px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--brand);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9.6 16.2 5.4 12l-1.4 1.4 5.6 5.6L20.4 8.2 19 6.8z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9.6 16.2 5.4 12l-1.4 1.4 5.6 5.6L20.4 8.2 19 6.8z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.ticklist li b, .ticklist li strong { color: var(--ink); font-weight: 600; }
.on-dark .ticklist li b, .on-dark-2 .ticklist li b, .cta-band .ticklist li b { color: var(--fg); }
.ticklist li:last-child { border-bottom: 0; }

.deflist { display: grid; gap: 0; }
.deflist > div {
  display: grid;
  grid-template-columns: minmax(150px, .3fr) minmax(0, 1fr);
  gap: 26px;
  padding: 24px 0;
  border-bottom: 1px solid var(--paper-line);
}
.on-dark .deflist > div, .on-dark-2 .deflist > div { border-color: var(--line); }
.deflist dt { font-size: .95rem; font-weight: 700; color: var(--brand-deep); padding-top: 2px; }
.on-dark .deflist dt, .on-dark-2 .deflist dt { color: #FF9A96; }
.deflist dd { margin: 0; color: var(--ink-dim); font-size: .98rem; line-height: 1.68; }
.on-dark .deflist dd, .on-dark-2 .deflist dd { color: var(--fg-dim); }
.deflist dd b { color: var(--ink); font-weight: 600; }
.on-dark .deflist dd b, .on-dark-2 .deflist dd b { color: var(--fg); }
.deflist > div:last-child { border-bottom: 0; }
@media (max-width: 700px) { .deflist > div { grid-template-columns: 1fr; gap: 8px; } }

/* -------------------------------------------------------------- certs */
.cert {
  border: 1px solid var(--paper-line);
  border-radius: var(--r);
  padding: clamp(24px, 2.4vw, 32px);
  display: flex; flex-direction: column; gap: 13px;
  background: var(--card);
  box-shadow: var(--sh-sm);
}
.on-dark .cert, .on-dark-2 .cert { background: var(--ink-850); border-color: var(--line); box-shadow: none; }
.cert .c-code { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; letter-spacing: -.018em; }
.cert .c-scope { font-size: .96rem; color: var(--ink-dim); line-height: 1.65; }
.on-dark .cert .c-scope, .on-dark-2 .cert .c-scope { color: var(--fg-dim); }

/* ------------------------------------------------------------- clients */
/* Flex rather than grid so an odd last row centres instead of hanging left. */
.clients {
  --cols: 5;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  background: none;
  border: 0;
}
@media (max-width: 1000px) { .clients { --cols: 3; } }
@media (max-width: 600px)  { .clients { --cols: 2; } }
.client {
  flex: 0 1 calc((100% - (var(--cols) - 1) * 14px) / var(--cols));
  background: var(--card);
  border: 1px solid var(--paper-line);
  border-radius: var(--r);
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  padding: 26px;
  box-shadow: var(--sh-sm);
  transition: box-shadow .3s var(--ease), transform .3s var(--ease);
}
.client:hover { box-shadow: var(--sh-md); transform: translateY(-3px); }
.client img {
  max-height: 52px;
  width: auto;
  max-width: 100%;
  /* Landscape marks are capped by height; a portrait mark capped the same way
     would read a third the width of its neighbours, so .is-tall trades height
     for the width it cannot have. */
  object-fit: contain;
  filter: grayscale(1);
  opacity: .55;
  transition: filter .3s var(--ease), opacity .3s var(--ease);
}
.client:hover img { filter: grayscale(0); opacity: 1; }
.client.is-tall img { max-height: 66px; }

/* The tile carries a typographic wordmark and only swaps to the image once that
   image has actually decoded (site.js adds .has-logo). A logo file that is
   missing or still to be supplied shows the client's name instead of a broken
   image icon, and drops in with no markup change. */
.client img { display: none; }
.client.has-logo img { display: block; }
.client.has-logo .client-wm { display: none; }
.client-wm {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-align: center;
  font-size: 1.04rem;
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.25;
  color: var(--ink-mute);
  transition: color .3s var(--ease);
}
.client:hover .client-wm { color: var(--ink); }
.client-wm i {
  font-style: normal;
  font-size: .64rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  opacity: .72;
}
@media (max-width: 560px) {
  .client-wm { font-size: .94rem; }
}

/* ----------------------------------------------------------------- forms */
.form { display: grid; gap: 0; }
.field {
  display: flex; flex-direction: column; gap: 7px;
  padding: 14px 16px;
  border: 1px solid var(--paper-line);
  border-radius: var(--r-sm);
  background: var(--card);
  margin-bottom: 12px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.on-dark .field, .on-dark-2 .field { background: var(--ink-850); border-color: var(--line); }
.field > label { font-size: .82rem; font-weight: 600; color: var(--ink-mute); }
.on-dark .field > label, .on-dark-2 .field > label { color: var(--fg-mute); }
.field > label .req { color: var(--brand); }
.field input, .field select, .field textarea {
  background: transparent;
  border: 0;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 2px 0;
  width: 100%;
}
.on-dark .field input, .on-dark .field select, .on-dark .field textarea,
.on-dark-2 .field input, .on-dark-2 .field select, .on-dark-2 .field textarea { color: var(--fg); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; }
.field textarea { resize: vertical; min-height: 92px; line-height: 1.6; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-mute); opacity: .8; }
.on-dark .field input::placeholder, .on-dark .field textarea::placeholder { color: var(--fg-mute); opacity: .75; }
.field select { appearance: none; cursor: pointer; }
.field select option { background: var(--card); color: var(--ink); }
.on-dark .field select option, .on-dark-2 .field select option { background: var(--ink-850); color: var(--fg); }
.field:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(232, 83, 90, .16); }

.field-row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 14px; }
@media (max-width: 700px) { .field-row { grid-template-columns: 1fr; } }

.form-note { font-size: .89rem; color: var(--ink-mute); line-height: 1.6; }
.on-dark .form-note, .on-dark-2 .form-note { color: var(--fg-mute); }

.form-status {
  margin-top: 18px;
  padding: 14px 18px;
  border-radius: var(--r-sm);
  font-size: .94rem;
  line-height: 1.55;
  background: rgba(62, 142, 108, .14);
  border: 1px solid rgba(62, 142, 108, .38);
  color: #8FD9B6;
}
.form-status.is-err {
  background: rgba(233, 80, 87, .13);
  border-color: rgba(233, 80, 87, .4);
  color: #FFAFAB;
}
.form-status a { color: inherit; border-bottom: 1px solid currentColor; }
.on-paper .form-status { color: #2C7355; }
.on-paper .form-status.is-err { color: var(--brand-deep); }

/* ------------------------------------------------------- full-bleed band */
.band {
  position: relative;
  min-height: clamp(360px, 46vw, 560px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: var(--fg);
  background: var(--ink-900);
}
.band > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 45%;
  filter: saturate(.9) brightness(.82);
}
.band::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(20,23,28,.94) 4%, rgba(20,23,28,.42) 48%, rgba(20,23,28,.18) 100%);
  /* Covers the whole band, so it has to let the photo underneath be clicked. */
  pointer-events: none;
}
.band-in { position: relative; z-index: 2; padding-block: clamp(38px, 5vw, 66px); width: 100%; }
.band h2 { color: var(--fg); }
.band .chip { border-color: var(--line-2); color: var(--fg); background: rgba(255,255,255,.1); backdrop-filter: blur(6px); }

/* -------------------------------------------------------------- numbers */
.nums { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
@media (max-width: 900px) { .nums { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 480px) { .nums { grid-template-columns: 1fr; } }
.num {
  border: 1px solid var(--paper-line);
  border-radius: var(--r);
  background: var(--card);
  padding: clamp(24px, 2.6vw, 34px);
  display: flex; flex-direction: column; gap: 10px;
  box-shadow: var(--sh-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.num:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.on-dark .num, .on-dark-2 .num { background: var(--ink-850); border-color: var(--line); box-shadow: none; }
.on-dark .num:hover, .on-dark-2 .num:hover { background: var(--ink-800); box-shadow: var(--sh-dk); }
.num-v {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.6rem, 5vw, 3.7rem);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}
.num-v i { font-style: normal; font-size: .38em; margin-left: 4px; color: var(--fg-mute); letter-spacing: 0; }
.on-paper .num-v { color: var(--brand-deep); }
.on-paper .num-v i { color: var(--ink-mute); }
.num-k { font-size: .93rem; line-height: 1.45; color: var(--fg-dim); }
.on-paper .num-k { color: var(--ink-dim); }

/* --------------------------------------------------------- compact flow */
.flow.compact { grid-template-columns: repeat(6, minmax(0,1fr)); gap: 12px; counter-reset: none; }
@media (max-width: 1100px) { .flow.compact { grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (max-width: 760px)  { .flow.compact { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 460px)  { .flow.compact { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.flow.compact .step { padding: 20px 16px 22px; gap: 6px; }
.flow.compact .s-n { width: 30px; height: 30px; font-size: .76rem; margin-bottom: 4px; }
.flow.compact h4 { font-size: .95rem; line-height: 1.3; }

/* ------------------------------------------------------------------- faq */
.faq { max-width: 880px; margin-inline: auto; display: flex; flex-direction: column; gap: 10px; }
.faq details {
  background: var(--card);
  border: 1px solid var(--paper-line);
  border-radius: var(--r);
  box-shadow: var(--sh-sm);
  transition: box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.faq details[open] { box-shadow: var(--sh-md); border-color: transparent; }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 56px 20px 24px;
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.45;
  color: var(--ink);
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: 22px; top: 24px;
  width: 14px; height: 14px;
  background: var(--brand);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M11 5h2v14h-2z'/%3E%3Cpath fill='%23fff' d='M5 11h14v2H5z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M11 5h2v14h-2z'/%3E%3Cpath fill='%23fff' d='M5 11h14v2H5z'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: transform .3s var(--ease);
}
.faq details[open] summary::after { transform: rotate(135deg); }
.faq details > p {
  padding: 0 56px 22px 24px;
  color: var(--ink-dim);
  font-size: .98rem;
  line-height: 1.7;
  margin-top: -4px;
}

/* ------------------------------------------------------------------- cta */
.cta-band {
  background: var(--ink-870);
  color: var(--fg);
  position: relative;
  overflow: hidden;
}
.cta-band h1, .cta-band h2, .cta-band h3 { color: var(--fg); }
.cta-band .grid-overlay { mask-image: radial-gradient(ellipse 70% 100% at 86% 50%, #000 0%, transparent 70%); }
.cta-in { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr); gap: var(--gut); align-items: center; }
@media (max-width: 900px) { .cta-in { grid-template-columns: 1fr; gap: 28px; } }

/* ---------------------------------------------------------------- footer */
.ftr { background: var(--ink-950); color: var(--fg); padding-block: clamp(52px, 6vw, 78px) 32px; }
.ftr-top { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: var(--gut); }
@media (max-width: 950px) { .ftr-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .ftr-top { grid-template-columns: 1fr; } }
.ftr h4 { font-family: var(--font-body); font-weight: 600; font-size: .82rem; letter-spacing: .05em; text-transform: uppercase; color: var(--fg-mute); margin-bottom: 16px; }
.ftr .muted { color: var(--fg-dim); }
.ftr-official {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: .86rem;
  line-height: 1.6;
  color: var(--fg-mute);
  max-width: 44ch;
}
.ftr-official a { color: var(--brand); font-weight: 600; white-space: nowrap; }
.ftr-official a:hover { color: var(--fg); }
.ftr-links li { padding: 6px 0; }
.ftr-links a { color: var(--fg-dim); font-size: .96rem; transition: color .2s; }
.ftr-links a:hover { color: var(--brand); }
.ftr-bot {
  margin-top: clamp(38px, 4.5vw, 58px);
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 14px 32px; justify-content: space-between;
  color: var(--fg-mute);
  font-size: .88rem;
}
.ftr-bot.mono { font-family: var(--font-body); letter-spacing: 0; }

/* ------------------------------------------------------------- lightbox */
.is-zoomable { cursor: zoom-in; }

html.lb-lock { overflow: hidden; }

.lb {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 56px);
  background: rgba(24, 21, 19, .93);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .28s var(--ease);
}
/* display:flex above beats the browser's own [hidden]{display:none}, so without
   this the closed overlay still covers the viewport and eats every click on the
   page. */
.lb[hidden] { display: none; }
.lb.is-open { opacity: 1; }

.lb-stage {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 100%;
  max-height: 100%;
}
.lb-img {
  display: block;
  max-width: 100%;
  /* Leave the caption room rather than letting a tall photo push it off. */
  max-height: calc(100vh - clamp(16px, 4vw, 56px) * 2 - 64px);
  width: auto;
  height: auto;
  border-radius: var(--r);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
  transform: scale(.97);
  transition: transform .28s var(--ease);
}
.lb.is-open .lb-img { transform: none; }

.lb-cap {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 14px;
  text-align: center;
  color: rgba(255, 255, 255, .82);
  font-size: .95rem;
  line-height: 1.5;
}
.lb-count {
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .12em;
  color: rgba(255, 255, 255, .45);
}

.lb-x, .lb-nav {
  position: absolute;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  color: #fff;
  cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.lb-x:hover, .lb-nav:hover {
  background: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .34);
}
.lb-x svg, .lb-nav svg { width: 20px; height: 20px; }
.lb-x { top: clamp(14px, 3vw, 26px); right: clamp(14px, 3vw, 26px); }
.lb-nav { top: 50%; transform: translateY(-50%); }
.lb-prev { left: clamp(10px, 2vw, 22px); }
.lb-next { right: clamp(10px, 2vw, 22px); }

@media (max-width: 640px) {
  /* Arrows sit under the artwork on a phone so they never cover it. The height
     budget subtracts the caption, the arrow row and the gaps around both —
     trimming it any finer leaves the caption resting on the buttons. */
  .lb { align-items: flex-start; padding-top: clamp(64px, 14vw, 88px); }
  .lb-nav { top: auto; bottom: clamp(14px, 4vw, 26px); transform: none; }
  .lb-prev { left: 50%; margin-left: -54px; }
  .lb-next { right: 50%; margin-right: -54px; }
  .lb-img { max-height: calc(100svh - clamp(64px, 14vw, 88px) - 176px); }
}

@media (prefers-reduced-motion: reduce) {
  .lb, .lb-img { transition: none; }
  .lb-img { transform: none; }
}

/* --------------------------------------------------------------- reveal */
.rv { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } }

/* ------------------------------------------------------------- responsive */
@media (max-width: 1080px) {
  .nav { display: none; }
  .burger { display: flex; }
  .nav.is-open {
    display: flex;
    position: fixed;
    inset: var(--hdr-total) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: rgba(250, 248, 245, .98);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--paper-line);
    box-shadow: var(--sh-md);
    padding: 10px var(--pad) 24px;
    margin: 0;
    max-height: calc(100svh - var(--hdr-total));
    overflow-y: auto;
  }
  .nav.is-open a { padding: 16px 0; border-bottom: 1px solid var(--paper-line); font-size: 1.02rem; color: var(--ink); }
  .nav.is-open a::after { display: none; }
}
@media (max-width: 760px) {
  .ts-label { display: none; }
  .topstrip-in { justify-content: center; }
}
@media (max-width: 520px) {
  :root { --hdr-h: 76px; --strip-h: 32px; }
  body { font-size: 16px; }
  .brandmark { gap: 11px; }
  .brandmark img { height: 34px; }
  .brandmark .div-tag { font-size: .86rem; padding-left: 11px; }
  .hdr-in { gap: 10px; }
  .btn { padding: 14px 22px; font-size: .93rem; }
  .langsw button { padding: 6px 10px; }
}

@media print {
  .hdr, .cta-band, .burger, .langsw { display: none; }
  body { background: #fff; color: #000; }
}