/* ethea.app — the iOS app's "illustrated world", on the web.
   Palette and type are lifted from ios/Ethea/Ethea/Design/Theme.swift (worldDeep,
   worldPanel, worldCream, worldMuted, worldGold) and its bundled fonts, so the site and
   the app cannot drift apart. The app's surfaces are a dark painted world, and the site is
   dark-only to match: `color-scheme` is pinned rather than offering a light pass nobody
   designed. Panels are always worldPanel — no light cards anywhere. */

@font-face { font-family: "Fraunces"; src: url("fonts/Fraunces72pt-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("fonts/Fraunces72pt-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("fonts/Fraunces72pt-Italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("fonts/InstrumentSans-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("fonts/InstrumentSans-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("fonts/InstrumentSans-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  color-scheme: dark;

  --deep: #123e36;        /* worldDeep — the page */
  --deeper: #0e332c;      /* footer, one step below the page */
  --panel: #214f43;       /* worldPanel — every card */
  --panel-hi: #285a4d;    /* a panel inside a panel */
  --cream: #fff3d1;       /* worldCream — headings, strong text */
  --muted: #cdd8bc;       /* worldMuted — body */
  --faint: #a9bba6;       /* fine print; ≥4.5:1 on --deep and --deeper */
  --gold: #e7cf8d;        /* worldGold — accent and primary button */
  --mint: #d7f3e8;
  --rose: #f3c3ae;        /* the "cost" side of a pair; decoration and small caps only */
  --lilac: #d9cdf3;
  --line: rgba(255, 255, 255, 0.12);
  --track: rgba(255, 255, 255, 0.15);
  --gold-soft: rgba(231, 207, 141, 0.14);
  --mint-soft: rgba(215, 243, 232, 0.12);

  --r: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --wrap: 1160px;
  --gutter: clamp(18px, 4vw, 32px);
  --sec-y: clamp(56px, 6.5vw, 100px);

  --shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 24px 48px -30px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 40px 80px -36px rgba(0, 0, 0, 0.7);

  --serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--deep); }

body {
  margin: 0;
  background: var(--deep);
  color: var(--muted);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-synthesis: none;
  overflow-x: hidden;
}

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

a { color: var(--gold); text-decoration-color: color-mix(in srgb, var(--gold) 40%, transparent); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }

h1, h2, h3 { font-family: var(--serif); font-weight: 600; color: var(--cream); margin: 0 0 0.5em; letter-spacing: -0.015em; line-height: 1.12; text-wrap: balance; }
h1 { font-size: clamp(2.4rem, 5.4vw, 4.1rem); line-height: 1.04; letter-spacing: -0.025em; }
h2 { font-size: clamp(1.75rem, 3.1vw, 2.7rem); }
h3 { font-size: clamp(1.2rem, 1.6vw, 1.4rem); letter-spacing: -0.01em; }
h4 { font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); font-weight: 600; margin: 0 0 0.5em; }
p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }
strong { color: var(--cream); font-weight: 600; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: 760px; margin-inline: auto; }
.center { text-align: center; margin-inline: auto; }

.lead { font-size: clamp(1.0625rem, 1.5vw, 1.25rem); line-height: 1.55; color: var(--muted); max-width: 62ch; }
.tiny { font-size: 0.875rem; color: var(--faint); }
.eyebrow { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.1em; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--gold); color: var(--deep); font-weight: 600; padding: 12px 20px; border-radius: 0 0 var(--r) 0;
}
.skip:focus { left: 0; }

:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 6px; }

/* ── header ─────────────────────────────────────────────────────────────── */

.site-head {
  position: sticky; top: 0; z-index: 40;
  background: rgba(18, 62, 54, 0.82);
  backdrop-filter: saturate(140%) blur(18px);
  -webkit-backdrop-filter: saturate(140%) blur(18px);
  border-bottom: 1px solid var(--line);
}
.head-inner { display: flex; align-items: center; gap: 24px; min-height: 66px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand span { font-family: var(--serif); font-weight: 600; font-size: 1.375rem; color: var(--cream); letter-spacing: -0.01em; }
.mark { width: 28px; height: 28px; flex: none; border-radius: 8px; box-shadow: 0 0 0 1px var(--line); }
.head-nav { display: flex; gap: 22px; margin-left: 8px; flex-wrap: wrap; }
.head-nav a { color: var(--muted); text-decoration: none; font-size: 0.9375rem; font-weight: 500; }
.head-nav a:hover, .head-nav a[aria-current] { color: var(--cream); }
.head-nav a[aria-current] { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 8px; text-decoration-thickness: 2px; }
.head-end { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.lang { color: var(--muted); font-size: 0.875rem; text-decoration: none; white-space: nowrap; }
.lang:hover { color: var(--cream); }

/* ── buttons ────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 28px; border-radius: 999px; font-family: var(--sans); font-size: 1rem; font-weight: 600;
  text-decoration: none; border: 1px solid transparent; white-space: nowrap;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.btn-primary { background: var(--gold); color: var(--deep); box-shadow: 0 12px 28px -14px rgba(231, 207, 141, 0.55); }
.btn-primary:hover { background: #efdba3; transform: translateY(-1px); }
.btn-ghost { background: rgba(255, 243, 209, 0.06); color: var(--cream); border-color: rgba(255, 243, 209, 0.3); }
.btn-ghost:hover { border-color: var(--cream); transform: translateY(-1px); }
/* Not a link until the listing is live — it must not look pressable. */
.head-end .btn { padding: 9px 18px; font-size: 0.875rem; }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 28px 0 18px; }

/* ── painted heads ──────────────────────────────────────────────────────────
   A scene fills the head; a scrim sized in px (never as a share of the text box, which
   would grow with the type) darkens the side the words sit on and fades the bottom into
   the page, so the painting ends in the page colour instead of a hard edge. */

.hero, .has-art, .final { position: relative; isolation: isolate; overflow: hidden; }
.head-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero-art { position: absolute; inset: 0; z-index: -2; }
.hero-art .head-art { z-index: auto; }
.hero::before, .has-art::before, .final::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }

.has-art::before {
  background:
    linear-gradient(180deg, rgba(18, 62, 54, 0.3) 0, rgba(18, 62, 54, 0) 140px, rgba(18, 62, 54, 0) calc(100% - 180px), var(--deep) 100%),
    linear-gradient(90deg, rgba(18, 62, 54, 0.88) 0, rgba(18, 62, 54, 0.72) calc(50% - 40px), rgba(18, 62, 54, 0.12) calc(50% + 260px), rgba(18, 62, 54, 0) 100%);
}

/* Wide screens: the portrait paintings would be cut to a thin band across the full width,
   so they hang on the right at a size that keeps their subject, feathered into the page. */
@media (min-width: 861px) {
  .has-art .head-art {
    left: auto; width: min(62%, 980px);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 38%);
    mask-image: linear-gradient(90deg, transparent 0, #000 38%);
  }
}
.sec-dim-intro + .sec-ends { padding-top: 0; }
/* Index and article heads carry a long lead across the painting: keep more of it dark.
   Type, skill and dimension heads have a short tagline and show more of their scene. */
@media (min-width: 861px) {
  .has-art:not(.type-head):not(.dim-head)::before {
    background:
      linear-gradient(180deg, rgba(18, 62, 54, 0.3) 0, rgba(18, 62, 54, 0) 140px, rgba(18, 62, 54, 0) calc(100% - 180px), var(--deep) 100%),
      linear-gradient(90deg, rgba(18, 62, 54, 0.9) 0, rgba(18, 62, 54, 0.84) calc(50% + 80px), rgba(18, 62, 54, 0.2) calc(50% + 380px), rgba(18, 62, 54, 0.05) 100%);
  }
}
.page-head.has-art .lead { max-width: 56ch; }

/* ── hero ───────────────────────────────────────────────────────────────── */

.hero { padding-block: clamp(56px, 7vw, 104px) clamp(56px, 6vw, 96px); }
.hero::before {
  background:
    linear-gradient(180deg, rgba(18, 62, 54, 0.3) 0, rgba(18, 62, 54, 0) 160px, rgba(18, 62, 54, 0) calc(100% - 220px), var(--deep) 100%),
    linear-gradient(90deg, rgba(18, 62, 54, 0.9) 0, rgba(18, 62, 54, 0.74) calc(50% - 60px), rgba(18, 62, 54, 0.12) calc(50% + 200px), rgba(18, 62, 54, 0) 100%);
}

.hero-inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero h1 span { display: block; }
.hero h1 span:nth-child(2) { font-style: italic; font-weight: 400; color: var(--gold); }
.hero .lead { margin-top: 1.1em; color: #dfe7d0; }
.trust { font-size: 0.9375rem; color: var(--muted); display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; }
.trust::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--mint); flex: none; box-shadow: 0 0 0 4px var(--mint-soft); }
.hero-phone { display: flex; justify-content: center; align-items: flex-end; }
.hero-phone .phone { max-width: 320px; }

/* ── phone frame ────────────────────────────────────────────────────────────
   An iPhone 17 Pro Max: the display corner is ~13.5% of the screen width. The bezel is a
   box-shadow ring, so it follows the same curve at every size; the radius is in container
   units of the figure, so a small phone keeps the proportions of a large one. */

.phone { margin: 0; padding: 8px; max-width: 300px; width: 100%; flex: none; align-self: center; container-type: inline-size; }
.phone img {
  width: 100%; border-radius: 13.5cqw;
  box-shadow:
    0 0 0 6px #0a1d19,
    0 0 0 7px rgba(255, 255, 255, 0.16),
    0 30px 60px -20px rgba(0, 0, 0, 0.65),
    0 0 90px -10px rgba(215, 243, 232, 0.14);
}

/* ── stats ──────────────────────────────────────────────────────────────── */

.stats { padding-block: clamp(28px, 4vw, 44px); border-block: 1px solid var(--line); }
.stats-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; text-align: center; }
.stats-row div { display: flex; flex-direction: column; gap: 6px; }
.stats-row strong { font-family: var(--serif); font-size: clamp(2rem, 3.2vw, 2.75rem); font-weight: 600; color: var(--gold); line-height: 1; }
.stats-row span { font-size: 0.8125rem; color: var(--muted); line-height: 1.35; }

/* ── sections ───────────────────────────────────────────────────────────── */

.sec { padding-block: var(--sec-y); }
.sec-head { max-width: 66ch; margin-bottom: clamp(32px, 4vw, 56px); }
.sec-head p { font-size: clamp(1.0625rem, 1.4vw, 1.2rem); color: var(--muted); margin-bottom: 0; }
.sec-cta { margin-top: clamp(28px, 3vw, 44px); }

.sec-statement { padding-block: clamp(56px, 7vw, 104px); }
.statement { max-width: 74ch; }
.statement h2 { font-size: clamp(1.9rem, 4vw, 3.3rem); }
.statement p { font-size: clamp(1.0625rem, 1.5vw, 1.25rem); }

/* Alternate bands a shade darker, so a long page reads in movements without light slabs. */
.sec-dims, .sec-science, .sec-exemplars, .sec-phases, .sec-measured { background: var(--deeper); border-block: 1px solid var(--line); }

/* ── grids and tiles ────────────────────────────────────────────────────── */

.grid { display: grid; gap: clamp(14px, 1.6vw, 22px); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.tile {
  display: flex; flex-direction: column; gap: 16px; padding: 12px 12px 22px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg);
  text-decoration: none; color: inherit; box-shadow: var(--shadow);
  transition: transform 0.18s ease, border-color 0.18s ease;
}
.tile > div:last-child { padding-inline: 10px; }
.tile:hover { transform: translateY(-3px); border-color: rgba(231, 207, 141, 0.45); }
.tile h3 { margin: 8px 0 6px; }
.tile p { font-size: 0.9375rem; color: var(--muted); margin: 0; }

.tile-art { position: relative; border-radius: calc(var(--r-lg) - 8px); overflow: hidden; aspect-ratio: 4 / 5; background: var(--panel-hi); }
.tile-art img:first-child { width: 100%; height: 100%; object-fit: cover; object-position: 52% 48%; }
.dim-tile .tile-art { aspect-ratio: 16 / 10; }
.dim-tile .tile-art img:first-child { object-position: 50% 66%; }
.plate {
  position: absolute; left: 12px; bottom: 12px; width: 56px; height: 56px; border-radius: 14px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25), 0 8px 18px -6px rgba(0, 0, 0, 0.55);
}

.tile-code {
  display: inline-block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em;
  padding: 4px 10px; border-radius: 999px; background: var(--gold-soft); color: var(--gold);
}
.tile-code.big { font-size: 0.875rem; padding: 6px 14px; margin-bottom: 14px; }

.pill { display: inline-block; margin-top: 12px; font-size: 0.75rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--mint-soft); color: var(--mint); }

.cards .card { display: flex; flex-direction: column; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(22px, 2.4vw, 32px); box-shadow: var(--shadow); }
.card h2 { font-size: clamp(1.3rem, 1.8vw, 1.55rem); }
.card .tile-code { align-self: flex-start; margin-bottom: 12px; }
.card-good { border-top: 3px solid var(--mint); }
.card-cost { border-top: 3px solid var(--rose); }
.pair { align-items: start; }
.prose + .pair { margin-top: clamp(32px, 4vw, 56px); }

/* ── steps ──────────────────────────────────────────────────────────────── */

.steps { display: flex; flex-direction: column; gap: clamp(40px, 5.5vw, 84px); }
.step { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.step:nth-child(even) .step-copy { order: 2; }
.step-copy { max-width: 52ch; }
.step-n { display: inline-block; font-family: var(--serif); font-style: italic; font-size: 1.5rem; color: var(--gold); margin-bottom: 8px; }
.step-copy h3 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.step-copy p { font-size: 1.0625rem; }
.step .phone { max-width: 280px; margin-inline: auto; }

.phone-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2.5vw, 36px); margin-top: clamp(56px, 7vw, 104px); padding-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--line); }
.phone-cell { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.phone-cell .phone { max-width: 240px; }
.phone-cell p { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); text-align: center; }
.phone-cell:nth-child(even) { padding-top: 48px; }

/* ── phases and ladder ──────────────────────────────────────────────────── */

.phases { margin-top: clamp(36px, 4vw, 56px); padding: clamp(24px, 3vw, 40px); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-xl); }
.phases h3 { font-size: clamp(1.3rem, 2vw, 1.65rem); }
.phases > p { margin-bottom: 22px; }
.phases ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.phases li { display: flex; flex-direction: column; gap: 4px; padding: 18px; background: var(--panel-hi); border: 1px solid var(--line); border-radius: var(--r); }
.phases li strong { font-family: var(--serif); font-size: 1.15rem; }
.phases li span:last-child { font-size: 0.9375rem; }
.phase-days { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; color: var(--gold); text-transform: uppercase; }

.phase-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 22px); }
.phase-cards li { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; box-shadow: var(--shadow); }
.phase-cards h3 { margin: 10px 0 6px; }
.phase-cards p { font-size: 0.9375rem; margin: 0; }

/* ── ticks, splits ──────────────────────────────────────────────────────── */

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.ticks { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
/* An item may carry one child (a line) or two (a heading and a paragraph). Pinning every
   real child to the second column keeps the tick in its own lane either way — left to
   auto-placement, a second child lands under the tick and wraps a word per line. */
.ticks li { display: grid; grid-template-columns: 26px 1fr; gap: 2px 12px; align-items: start; }
.ticks li > * { grid-column: 2; }
.ticks li::before {
  grid-column: 1; grid-row: 1;
  content: ""; width: 22px; height: 22px; border-radius: 50%; margin-top: 3px;
  background: var(--mint-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D7F3E8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.ticks-cost li::before {
  background: rgba(243, 195, 174, 0.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F3C3AE' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.ticks li strong { display: block; color: var(--cream); }
.ticks li span { color: var(--muted); }
.ticks li strong + span { font-size: 0.9375rem; }
.sec-privacy .ticks { gap: 22px; padding: clamp(22px, 3vw, 36px); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-xl); }

/* ── price ──────────────────────────────────────────────────────────────── */

.price-card {
  max-width: 760px; margin-inline: auto; text-align: center; background: var(--panel);
  border: 1px solid rgba(231, 207, 141, 0.35); border-radius: var(--r-xl); padding: clamp(32px, 4vw, 56px);
  box-shadow: var(--shadow-lg), 0 0 120px -40px rgba(231, 207, 141, 0.25);
}
.price-card .lead { margin-inline: auto; }
.price-card h3 { margin-top: 32px; font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.price-card .ticks { text-align: left; max-width: 520px; margin-inline: auto; }
.price-card .cta-row { justify-content: center; margin-bottom: 0; }

/* ── faq ────────────────────────────────────────────────────────────────── */

.faq { max-width: 860px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; padding: 22px 44px 22px 0; position: relative;
  font-family: var(--serif); font-size: clamp(1.125rem, 1.6vw, 1.3rem); font-weight: 600; color: var(--cream);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 14px; height: 14px; margin-top: -7px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E7CF8D' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.2s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding-bottom: 24px; max-width: 68ch; }

/* ── final band ─────────────────────────────────────────────────────────── */

.final { padding-block: clamp(96px, 11vw, 160px) clamp(72px, 8vw, 120px); text-align: center; }
.final .head-art { object-position: 52% 64%; }
.final::before {
  background:
    radial-gradient(ellipse 620px 260px at 50% 50%, rgba(18, 62, 54, 0.72), rgba(18, 62, 54, 0) 100%),
    linear-gradient(180deg, var(--deep) 0, rgba(18, 62, 54, 0.25) 200px, rgba(18, 62, 54, 0.3) calc(100% - 140px), var(--deeper) 100%);
}
.final h2 { font-size: clamp(2rem, 4vw, 3.2rem); }
.final p { color: #e3eadb; font-size: clamp(1.0625rem, 1.4vw, 1.2rem); max-width: 54ch; margin-inline: auto; }
.final .cta-row { justify-content: center; }
.final .tiny { color: var(--muted); }

/* ── page heads and inner pages ─────────────────────────────────────────── */

.page-head { padding-block: clamp(40px, 5vw, 80px) clamp(32px, 4vw, 64px); border-bottom: 1px solid var(--line); }
.page-head.has-art { padding-block: clamp(56px, 7vw, 120px) clamp(48px, 5vw, 88px); border-bottom: 0; display: flex; flex-direction: column; justify-content: flex-end; min-height: clamp(360px, 38vw, 540px); }
.page-head h1 { margin-top: 10px; }
.page-head .lead { color: #dfe7d0; }
.type-head-inner { display: grid; grid-template-columns: 1fr auto; gap: clamp(24px, 4vw, 56px); align-items: end; }
.type-emblem {
  width: clamp(96px, 12vw, 150px); border-radius: 28px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25), 0 24px 48px -20px rgba(0, 0, 0, 0.6);
}

.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 6px; padding: 0; font-size: 0.875rem; color: var(--muted); }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--faint); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--gold); }
.crumbs [aria-current] { color: var(--cream); }

.page-head + .sec { padding-top: clamp(36px, 4vw, 64px); }

.prose { max-width: 72ch; }
/* On a narrow page the body has to line up with the head, not merely share its centre. */
.prose.narrow { max-width: 760px; }
.prose h2 { margin-top: 1.6em; font-size: clamp(1.4rem, 2.2vw, 1.9rem); }
.prose h2:first-child { margin-top: 0; }
.prose p { font-size: 1.0625rem; }
.legal-address { font-style: normal; font-size: 1.125rem; line-height: 1.7; color: var(--cream); font-weight: 500; }
.legal-rows { margin: 2em 0 0; display: flex; flex-direction: column; gap: 18px; }
.legal-row { display: grid; grid-template-columns: minmax(0, 18em) 1fr; gap: 4px 24px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.legal-row dt { color: var(--faint); font-size: 0.9375rem; }
.legal-row dd { margin: 0; color: var(--cream); }
@media (max-width: 640px) { .legal-row { grid-template-columns: 1fr; } }

.citation { margin-top: 3em; padding: 24px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); }
.citation h2 { margin: 0 0 8px; font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.citation p { font-size: 0.9375rem; margin-bottom: 0.5em; }
.citation a { word-break: break-word; }

.type-row, .dim-row {
  display: grid; grid-template-columns: 150px 1fr; gap: clamp(20px, 3vw, 36px); align-items: start;
  padding: clamp(16px, 2vw, 22px); background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-xl); box-shadow: var(--shadow);
}
.dim-row + .dim-row { margin-top: clamp(14px, 1.6vw, 22px); }
.type-row img, .dim-row img { width: 100%; border-radius: var(--r-lg); }
.dim-row > img:not(.row-art) { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2); }
.row-art { aspect-ratio: 4 / 5; object-fit: cover; object-position: 52% 48%; }
.type-row > div, .dim-row > div { padding-block: 6px; }
.type-row h2, .dim-row h2 { margin: 10px 0 4px; font-size: clamp(1.4rem, 2.2vw, 1.8rem); }
.skill-row h2 { margin-top: 0; }
.type-row h2 a, .dim-row h2 a { color: inherit; text-decoration: none; }
.type-row h2 a:hover, .dim-row h2 a:hover { color: var(--gold); }
.tagline { color: var(--cream); font-family: var(--serif); font-style: italic; font-size: 1.0625rem; }
.type-row p, .dim-row p { font-size: 0.9875rem; }
.more { font-weight: 600; text-decoration: none; }
.more::after { content: " →"; }

.facet-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 1em; padding: 0; }
.facet-chips li { font-size: 0.8125rem; padding: 4px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); border: 1px solid var(--line); color: var(--muted); }

.axes, .facets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; max-width: 860px; }
.axes li, .facets li { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px 24px; }
.axes li { display: grid; grid-template-columns: auto auto 1fr; gap: 8px 14px; align-items: center; }
.axes li span:last-child { grid-column: 1 / -1; font-size: 0.9375rem; }
.axes strong a { color: var(--cream); text-decoration: none; font-family: var(--serif); font-size: 1.15rem; }
.axes strong a:hover { color: var(--gold); }
.axis-end { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.axis-high .axis-end { color: var(--mint); }
.axis-low .axis-end { color: var(--lilac); }
.facets li { display: flex; flex-direction: column; gap: 2px; }
.facets strong { font-family: var(--serif); font-size: 1.15rem; }
.facets span { font-size: 0.9375rem; }

.exemplars { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.exemplars figure { margin: 0; padding: 22px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.exemplars img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; background: var(--panel-hi); margin-bottom: 14px; box-shadow: 0 0 0 2px rgba(231, 207, 141, 0.5); }
.exemplars figcaption { display: flex; flex-direction: column; gap: 4px; font-size: 0.9375rem; }
.exemplars strong { font-family: var(--serif); font-size: 1.15rem; }
.src { color: var(--faint); font-size: 0.8125rem; font-style: italic; }
.end { align-self: flex-start; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; }
.end-high { background: var(--mint-soft); color: var(--mint); }
.end-low { background: rgba(217, 205, 243, 0.14); color: var(--lilac); }

/* ── challenges ─────────────────────────────────────────────────────────── */

.challenges { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(14px, 1.6vw, 22px); align-items: stretch; }
.challenge { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-xl); padding: clamp(22px, 2.4vw, 30px); box-shadow: var(--shadow); }
.challenge-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.challenge-head .pill { margin-top: 0; }
.challenge h3 { font-size: 1.35rem; }
.challenge-meta { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 16px; }
.challenge-meta h4 { margin-bottom: 4px; }
.challenge-meta p, .challenge-meta li { font-size: 0.9375rem; margin: 0; }
.challenge-meta ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }

.sec-measured .phone { max-width: 260px; }

/* ── footer ─────────────────────────────────────────────────────────────── */

.site-foot { background: var(--deeper); border-top: 1px solid var(--line); padding-block: clamp(48px, 6vw, 80px) 32px; }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: clamp(28px, 4vw, 56px); }
.foot-brand p { max-width: 34ch; }
.foot-brand .btn { margin-top: 8px; }
.foot-brand .tiny { margin-top: 12px; }
.site-foot h2 { font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; }
.site-foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.site-foot ul a { color: var(--muted); text-decoration: none; font-size: 0.9375rem; }
.site-foot ul a:hover { color: var(--cream); }
.foot-fine { margin-top: clamp(36px, 4vw, 56px); padding-top: 24px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 12px 32px; justify-content: space-between; }
.foot-fine p { font-size: 0.8125rem; color: var(--faint); max-width: 70ch; margin: 0; }

/* ── responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 1000px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .head-nav { display: none; }
  .stats-row { grid-template-columns: repeat(3, 1fr); gap: 24px 12px; }
  .phone-row { grid-template-columns: repeat(2, 1fr); row-gap: 48px; }
  .phone-cell:nth-child(even) { padding-top: 0; }
}

@media (max-width: 860px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-phone { order: 2; }
  .hero-phone .phone { max-width: 280px; }
  /* Stacked, the words sit over the whole width of the painting — darken all of it. */
  .hero::before {
    /* Measured from the bottom: the phone below the copy is ~600px tall and needs no scrim. */
    background: linear-gradient(180deg, rgba(18, 62, 54, 0.8) 0, rgba(18, 62, 54, 0.76) calc(100% - 640px), rgba(18, 62, 54, 0.3) calc(100% - 420px), var(--deep) 100%);
  }
  .has-art::before {
    background: linear-gradient(180deg, rgba(18, 62, 54, 0.62) 0, rgba(18, 62, 54, 0.74) calc(100% - 200px), var(--deep) 100%);
  }
  .step, .split, .foot-grid { grid-template-columns: 1fr; }
  .step:nth-child(even) .step-copy { order: 0; }
  .step .phone, .sec-measured .phone { max-width: 250px; }
  .grid-3, .grid-2, .phases ol, .phase-cards { grid-template-columns: 1fr; }
  .type-row, .dim-row { grid-template-columns: 110px 1fr; }
  .foot-grid { gap: 32px; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .grid-4 { grid-template-columns: 1fr 1fr; gap: 12px; }
  .grid-4 .tile { padding: 8px 8px 16px; gap: 10px; }
  .grid-4 .tile > div:last-child { padding-inline: 6px; }
  .grid-4 .tile h3 { font-size: 1.05rem; }
  .grid-4 .tile p { font-size: 0.8125rem; }
  .grid-4 .plate { width: 40px; height: 40px; border-radius: 10px; left: 8px; bottom: 8px; }
  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .cta-row .btn { width: 100%; }
  .head-end .lang { display: none; }
  .type-head-inner { grid-template-columns: 1fr; }
  .type-emblem { width: 84px; border-radius: 18px; }
  .type-row, .dim-row { grid-template-columns: 1fr; }
  .dim-row > img:not(.row-art) { width: 96px; }
  .row-art { aspect-ratio: 16 / 9; }
  .phone-row { gap: 20px; }
  .phone-cell .phone { max-width: 170px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}