/* ==========================================================================
   Minds & Apps — stylesheet
   No build step, no external resources. One file, mobile-first.
   Sections: tokens / reset / type / layout / header / hero / components /
             forms / footer / utilities / motion+print
   ========================================================================== */

/* --- Design tokens ------------------------------------------------------ */
:root {
  /* "Minds" and "Apps" — the two halves of the brand. Minds (Petra, left) is
     teal, Apps (Stefan, right) is orange.

     🔴 The token names are historical: the site launched as "Minds warm, Apps
     cool", and the hues were later swapped without renaming. Read --warm-* as
     "the Minds side" and --cool-* as "the Apps side", whatever the colour —
     every .*--warm class, .accent-warm, --grad-warm etc. follows suit.

     Each brand hue is declared once as a bare channel triplet, and every other
     form derives from it. The triplet is not decoration: a custom property
     cannot be alpha-adjusted without one, and some thirty washes, glows and
     tints further down need exactly these hues at low alpha. Declaring the hex
     form independently alongside would let the two drift apart on the first
     nudge, so the hex tokens are computed from the triplets instead.

     🔴 The commas in the triplets are load-bearing — do not modernise these to
     `226 112 60` and `rgb(... / .13)`. The modern syntax stores components as
     floats where the legacy comma form stores them 8-bit, and Chromium then
     interpolates gradients one bit differently. Switching cost a Δ of 1–3 per
     channel on every wash and glow in the site: invisible, but it means the
     next refactor can no longer be gated on "nothing moved".

     Consequence worth knowing: a misspelled var() in an rgba() below does not
     throw and does not warn — the declaration becomes invalid at computed-value
     time and the property silently falls back, so a section just loses its
     background. tools/compare-shots.mjs is the guard against that. */
  --warm-rgb:     20, 96, 110;
  --warm-ink-rgb: 15, 76, 88;
  --warm-lit-rgb: 26, 128, 146;

  --cool-rgb:     201, 85, 47;
  --cool-ink-rgb: 168, 67, 31;
  --cool-lit-rgb: 226, 112, 60;

  --warm:        rgb(var(--warm-rgb));
  --warm-ink:    rgb(var(--warm-ink-rgb));   /* text-safe variant on light backgrounds */
  --warm-soft:   #dfebed;
  --warm-tint:   #f2f8f9;
  --warm-tint-deep: #e7f1f3;   /* bottom stop of the .section--warm wash */

  --cool:        rgb(var(--cool-rgb));
  --cool-ink:    rgb(var(--cool-ink-rgb));
  --cool-soft:   #f7e8e0;
  --cool-tint:   #fdf4f0;
  --cool-tint-deep: #fbeadf;

  /* Brighter siblings of the two brand colours — used in gradients only,
     never as text on light backgrounds (see --warm-ink / --cool-ink). */
  --warm-lit:    rgb(var(--warm-lit-rgb));
  --cool-lit:    rgb(var(--cool-lit-rgb));

  --ink:         #16191d;
  --ink-soft:    #454b54;
  --muted:       #6a7078;
  --line:        #e8e1d8;
  --line-strong: #d6ccbf;

  --bg:          #fbf8f4;
  --surface:     #ffffff;
  --surface-alt: #f4efe8;

  /* The brand gradient runs Minds → Apps, left to right. Direction matters:
     it is the visual shorthand for "both halves of the cooperation".
     The #a4553f midpoint (and #7a4a44 below) is where the two hues meet; a
     blend of orange and teal is the same brown whichever side each is on. */
  --grad-brand:  linear-gradient(96deg, var(--warm-lit) 0%, #a4553f 50%, var(--cool-lit) 100%);
  --grad-warm:   linear-gradient(135deg, var(--warm-lit), #0e4753);
  --grad-cool:   linear-gradient(135deg, var(--cool-lit), #ad441f);
  --grad-ink:    linear-gradient(135deg, #23292f, #0f1215);

  /* Text-bearing variants. The bright gradients above are decoration only:
     white on #e2703c is 3.7:1, which fails AA for the small uppercase tags and
     the buttons. These stay at or above 4.5:1 across their whole length, and
     they are also what gradient-filled text uses so it clears 3:1 on cream. */
  --grad-warm-deep:  linear-gradient(135deg, #17707f, #0c414c);
  --grad-cool-deep:  linear-gradient(135deg, #bc4d28, #8f3617);
  --grad-brand-deep: linear-gradient(96deg, #17707f 0%, #7a4a44 50%, #bc4d28 100%);

  /* The split hero: Petra's teal half on the left literally meets Stefan's
     orange half on the right, joined at the same #7a4a44 midpoint
     --grad-brand-deep uses. Both ends are dark enough to carry white text once
     the scrim on top (.hero--split::after) has done its work. Each half keeps
     its own lightness profile — the left darkens towards the seam, the right
     towards the outer edge. */
  --grad-split:  linear-gradient(100deg,
                   #10606f 0%, #0c414c 28%, #7a4a44 50%, #a8431f 72%, #9c3c19 100%);
  /* Vertical variant for phones, where the halves stack instead of splitting. */
  --grad-split-v: linear-gradient(172deg,
                   #10606f 0%, #0c414c 24%, #7a4a44 52%, #a8431f 78%, #9c3c19 100%);

  /* Two samples taken along --grad-brand. The four .steps rules interpolate
     between them so the process visibly walks from Petra's end to Stefan's. */
  --brand-mid-warm: #3b7683;
  --brand-mid-cool: #9d5a45;

  /* The full-bleed dark band, shared verbatim by .section--dark and .statement
     so the two read as one family. Only the far corner carries brand hue —
     a deep orange-brown, luminance-matched (≈ .019) to the teal it replaced. */
  --dark-band-tint: #3a1b0f;
  --grad-dark-band: linear-gradient(125deg, #1d242a 0%, #16191d 45%,
                      var(--dark-band-tint) 100%);

  /* Accents for text sitting ON the dark bands. The -ink variants are tuned for
     cream and go muddy here; these clear 4.5:1 against the scrimmed split.

     Three pairs rather than one because three pairs is what the stylesheet
     actually had. They are close enough to look like drift, but collapsing them
     is a real (if small) visual change, so it stays its own decision instead of
     riding along inside a pass whose whole promise is that nothing moves. */
  --warm-on-dark:       #7fd2e2;   /* split hero accents, dark-band step numerals */
  --warm-on-dark-soft:  #9fd7e2;   /* .section--dark eyebrow */
  --warm-on-dark-muted: #8fc9d4;   /* .statement eyebrow, footer wordmark + mark */
  --cool-on-dark:       #ffb083;
  --cool-on-dark-soft:  #f5c3ac;
  --cool-on-dark-muted: #f0b79f;

  --radius:      14px;
  --radius-lg:   22px;
  --shadow:      0 1px 2px rgba(22, 25, 29, .04), 0 8px 28px rgba(22, 25, 29, .06);
  --shadow-lift: 0 2px 6px rgba(22, 25, 29, .06), 0 18px 48px rgba(22, 25, 29, .10);
  --glow-warm:   0 16px 36px -14px rgba(var(--warm-rgb), .55);
  --glow-cool:   0 16px 36px -14px rgba(var(--cool-rgb), .5);

  --wrap:        1120px;
  --prose:       64ch;

  --font-sans:   ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
  --font-serif:  "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
                 "Times New Roman", serif;

  --step:        clamp(3.5rem, 7vw, 6.5rem);   /* vertical section rhythm */
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  /* Two very faint colour washes so the page is never a flat beige. Fixed, so
     they stay put while opaque sections scroll over them. */
  background:
    radial-gradient(58rem 40rem at 92% -8%, rgba(var(--warm-lit-rgb), .13), transparent 62%),
    radial-gradient(50rem 36rem at -10% 22%, rgba(var(--cool-rgb), .11), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: clamp(1.02rem, .4vw + .95rem, 1.14rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--step) 0;
}

/* --- Typography --------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 0 0 .6em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.35rem, 5.2vw, 3.9rem); letter-spacing: -.025em; }
h2 { font-size: clamp(1.85rem, 3.4vw, 2.65rem); }
h3 { font-size: clamp(1.24rem, 1.6vw, 1.45rem); line-height: 1.3; }
h4 { font-size: 1.08rem; line-height: 1.35; }

p { margin: 0 0 1.15em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--cool-ink); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--warm-ink); }

strong { font-weight: 650; color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--warm);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Eyebrow — small caps label above a heading */
.eyebrow {
  font-family: var(--font-sans);
  font-size: .78rem;
  font-weight: 650;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--warm-ink);
  margin: 0 0 1rem;
  display: flex;
  align-items: flex-start;
  gap: .6rem;
}
/* Aligned to the first line, not the block centre, so a two-line eyebrow
   still reads as "dash, then label". */
.eyebrow::before {
  content: "";
  width: 1.9rem;
  height: 3px;
  margin-top: .62em;
  border-radius: 2px;
  background: var(--grad-warm);
  flex: none;
}
.eyebrow--cool { color: var(--cool-ink); }
.eyebrow--cool::before { background: var(--grad-cool); }
/* Unused since the split hero replaced the two-column one, but kept as the
   third member of the eyebrow set alongside --cool: it is the "both halves"
   variant, and section headings that speak for the cooperation want it. */
.eyebrow--both::before { background: var(--grad-brand); width: 2.6rem; }

/* Gradient-filled text. The plain colour underneath is the fallback for
   browsers without background-clip: text — never remove it. */
.grad-warm, .grad-cool, .grad-brand { -webkit-background-clip: text; background-clip: text; }
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .grad-warm, .grad-cool, .grad-brand { color: transparent; }
}
.grad-warm  { color: var(--warm-ink); background-image: var(--grad-warm-deep); }
.grad-cool  { color: var(--cool-ink); background-image: var(--grad-cool-deep); }
.grad-brand { color: var(--ink);      background-image: var(--grad-brand-deep); }

/* Accent rule — a short gradient bar used to break up long text blocks. */
.rule {
  border: 0;
  height: 4px;
  width: 5.5rem;
  border-radius: 3px;
  background: var(--grad-brand);
  margin: 0 0 1.6rem;
}

.lead {
  font-size: clamp(1.14rem, .6vw + 1rem, 1.35rem);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 56ch;
}

.prose { max-width: var(--prose); }
.prose h2 { margin-top: 2.2em; }
.prose h3 { margin-top: 1.8em; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li { margin-bottom: .5em; }

/* --- Layout ------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(1.15rem, 4vw, 2.5rem);
}

.section { padding-block: var(--step); position: relative; }
.section--tight { padding-block: calc(var(--step) * .6); }
.section--alt  { background: linear-gradient(178deg, #f8f2ea, #f1e9de); }
.section--cool { background: linear-gradient(178deg, var(--cool-tint), var(--cool-tint-deep)); }
.section--warm { background: linear-gradient(178deg, var(--warm-tint), var(--warm-tint-deep)); }

/* White sections sit on top of the body wash, so they need their own colour
   or the page turns into a stack of plain white slabs. */
.section--surface {
  background:
    radial-gradient(42rem 30rem at 100% 0%, rgba(var(--warm-lit-rgb), .07), transparent 60%),
    radial-gradient(38rem 28rem at 0% 100%, rgba(var(--cool-rgb), .06), transparent 60%),
    var(--surface);
}

/* Hairline gradient edge between stacked sections. */
.section--edge { border-top: 3px solid transparent; border-image: var(--grad-brand) 1; }

/* Decorative blur blobs, one warm and one cool, positioned in the corners of
   whatever section carries .section--glow. Purely ornamental. */
.section--glow { overflow: hidden; isolation: isolate; }
.section--glow::before,
.section--glow::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .5;
  pointer-events: none;
  z-index: -1;
}
.section--glow::before { width: 30rem; height: 30rem; background: var(--warm-soft); top: -14rem; left: -12rem; }
.section--glow::after  { width: 28rem; height: 28rem; background: var(--cool-soft); bottom: -16rem; right: -10rem; }
.section--glow > .wrap { position: relative; z-index: 1; }

/* Full-bleed dark band. Used to give the scroll a pulse: cream sections are
   punctuated by these so the page is never a single flat field. Same warm/cool
   corner glows as .statement, so the two read as one family. */
.section--dark {
  background: var(--grad-dark-band);
  color: #fff;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.section--dark::before,
.section--dark::after {
  content: "";
  position: absolute;
  width: 34rem;
  height: 34rem;
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
}
.section--dark::before {
  inset: -14rem auto auto -10rem;
  background: radial-gradient(circle, rgba(var(--warm-lit-rgb), .38), transparent 66%);
}
.section--dark::after {
  inset: auto -10rem -16rem auto;
  background: radial-gradient(circle, rgba(var(--cool-lit-rgb), .45), transparent 68%);
}
.section--dark h2,
.section--dark h3 { color: #fff; }
.section--dark p { color: rgba(255, 255, 255, .82); }
.section--dark .lead { color: rgba(255, 255, 255, .88); }
.section--dark .eyebrow { color: var(--warm-on-dark-soft); }
.section--dark .eyebrow::before { background: var(--warm-on-dark-soft); }
.section--dark .eyebrow--cool { color: var(--cool-on-dark-soft); }
.section--dark .eyebrow--cool::before { background: var(--cool-on-dark-soft); }

/* Steps sitting on a dark band: the -deep gradients are tuned for cream and
   disappear here, so the numerals switch to the light accents instead. */
.section--dark .steps li::before,
.section--dark .steps li:nth-child(3)::before,
.section--dark .steps li:nth-child(4)::before {
  background-image: none;
  color: var(--warm-on-dark);
}
.section--dark .steps li:nth-child(3)::before,
.section--dark .steps li:nth-child(4)::before { color: var(--cool-on-dark); }
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .section--dark .steps li::before { color: var(--warm-on-dark); }
  .section--dark .steps li:nth-child(3)::before,
  .section--dark .steps li:nth-child(4)::before { color: var(--cool-on-dark); }
}
.section--dark .steps p { color: rgba(255, 255, 255, .78); }

.section-head { max-width: 62ch; margin-bottom: 3rem; }

.grid { display: grid; gap: 1.5rem; }
@media (min-width: 700px)  { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 700px)  { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px)  { .grid--4 { grid-template-columns: repeat(2, 1fr); gap: 1.75rem; } }

@media (min-width: 900px) {
  .split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: start;
  }
  .split--sticky > :first-child { position: sticky; top: 6.5rem; }
}

/* --- Skip link ---------------------------------------------------------- */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: #fff;
  padding: .8rem 1.2rem;
  border-radius: 0 0 var(--radius) 0;
}
.skip:focus { left: 0; color: #fff; }

/* --- Header ------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(251, 248, 244, .88);
  backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.site-header[data-scrolled] {
  border-bottom-color: var(--line);
  box-shadow: 0 1px 20px rgba(22, 25, 29, .04);
}
/* Brand gradient hairline across the very top of every page. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--grad-brand);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 4.6rem;
}

/* Wordmark */
.brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-serif);
  font-size: 1.32rem;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--ink);
  text-decoration: none;
  margin-right: auto;
  flex: none;
}
.brand:hover { color: var(--ink); }
.brand svg { width: 30px; height: 30px; flex: none; }
/* The mark is a split ring holding a lightbulb (Minds) and a prompt (Apps).
   Every one of its shapes carries a literal stroke="" attribute in all 16 files
   — but which half a shape belongs to is declared by .m-side / .a-side rather
   than by its element type, because both halves are drawn with <path> now. A
   presentation attribute loses to any author rule, so colouring them here
   overrides the markup without a 16-file edit, and the attributes stay put as
   the no-CSS fallback. Do not "fix" the duplication by editing the HTML: these
   two rules are the only place the mark's colour is decided. */
.brand svg .m-side { stroke: var(--warm); }
.brand svg .a-side { stroke: var(--cool); }
.brand .m { color: var(--warm-ink); }
.brand .amp { color: var(--muted); font-style: italic; padding-inline: .1em; }
.brand .a { color: var(--cool-ink); }

/* Navigation */
.nav {
  display: flex;
  align-items: center;
  gap: clamp(.9rem, 2vw, 1.9rem);
}
.nav a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: .96rem;
  font-weight: 550;
  padding-block: .4rem;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.nav a:hover { color: var(--ink); border-bottom-color: var(--line-strong); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--warm); }

/* .nav a (0,1,1) outranks .btn--warm (0,1,0), so without this the header CTA
   renders --ink-soft on the brand fill — 2.3:1 and unreadable. Re-assert the button. */
.nav a.btn { padding-block: .62rem; border-bottom: 0; }
.nav a.btn--warm,
.nav a.btn--warm:hover { color: #fff; }

.nav-tail { display: flex; align-items: center; gap: 1rem; margin-left: .4rem; }

/* Language switch */
.lang {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  overflow: hidden;
  font-size: .8rem;
  font-weight: 650;
  letter-spacing: .04em;
  background: var(--surface);
}
.lang a {
  padding: .3rem .6rem;
  color: var(--muted);
  text-decoration: none;
  line-height: 1.4;
}
.lang a:hover { color: var(--ink); background: var(--surface-alt); }
.lang a[aria-current="true"] { background: var(--ink); color: #fff; }

/* Mobile menu */
.nav-toggle {
  display: none;
  align-items: center;
  gap: .5rem;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: .45rem .85rem;
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
.nav-toggle svg { width: 16px; height: 16px; }

/* Without JavaScript the <button> above cannot open anything, so Base.astro
   carries a <noscript> twin: a visually hidden checkbox and a label dressed as
   .nav-toggle. With JS on, <noscript> content is plain text, never elements, so
   none of these selectors match and the page is exactly the scripted one. The
   checkbox stays focusable; its focus ring is drawn on the label. */
.site-header:has(.nav-open) button.nav-toggle { display: none; }
.nav-open:focus-visible + .nav-toggle {
  outline: 2px solid var(--warm);
  outline-offset: 3px;
}

/* 900, not 860: with five items the German row ("Erstgespräch") needs ~896px
   and ran into the header's right padding below that. A sixth item needs 1024. */
@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--surface);
    border-block: 1px solid var(--line);
    padding: .5rem clamp(1.15rem, 4vw, 2.5rem) 1.25rem;
    box-shadow: var(--shadow);
  }
  .site-header.is-open .nav,
  .site-header:has(.nav-open:checked) .nav { display: flex; }
  .nav a {
    padding-block: .85rem;
    border-bottom: 1px solid var(--line);
    font-size: 1.05rem;
  }
  .nav a[aria-current="page"] { border-bottom-color: var(--line); color: var(--warm-ink); }
  .nav-tail { margin: 1rem 0 0; }
}

/* --- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .82rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, background-color .15s ease,
              box-shadow .15s ease, border-color .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--grad-ink); color: #fff; box-shadow: var(--shadow); }
.btn--primary:hover {
  background: var(--grad-ink);
  color: #fff;
  box-shadow: var(--shadow-lift), 0 16px 34px -16px rgba(var(--cool-rgb), .7);
}

.btn--warm { background: var(--grad-warm-deep); color: #fff; box-shadow: var(--glow-warm); }
.btn--warm:hover { color: #fff; box-shadow: 0 20px 42px -14px rgba(var(--warm-rgb), .7); }

.btn--cool { background: var(--grad-cool-deep); color: #fff; box-shadow: var(--glow-cool); }
.btn--cool:hover { color: #fff; box-shadow: 0 20px 42px -14px rgba(var(--cool-rgb), .65); }

.btn--ghost { background: rgba(255, 255, 255, .6); color: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover { background: var(--surface); border-color: var(--warm); color: var(--warm-ink); box-shadow: var(--shadow); }

.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { background: #fff; color: var(--warm-ink); }

.btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.42); }
.btn--outline-light:hover { background: rgba(255,255,255,.12); color: #fff; border-color: #fff; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  align-items: center;
}

/* Text link with arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--cool-ink);
}
.link-arrow::after { content: "→"; transition: transform .15s ease; }
.link-arrow:hover::after { transform: translateX(3px); }

/* --- Hero --------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.5rem, 9vw, 7rem) clamp(3rem, 7vw, 5.5rem);
}

/* --- Split hero (home) --------------------------------------------------
   Minds on the left, Apps on the right, meeting in the middle where the photo
   of the two of them sits. The halves are a single background gradient rather
   than two elements, so the seam can be a blend instead of a hard edge and
   nothing needs to line up with the grid.
   ------------------------------------------------------------------------ */
.hero--split {
  background: var(--grad-split-v);
  color: #fff;
  padding-block: clamp(2.75rem, 6vw, 4.5rem) clamp(3rem, 7vw, 5rem);
  text-align: center;
  isolation: isolate;
}
@media (min-width: 820px) {
  .hero--split { background: var(--grad-split); }
}

/* Tech texture, cool side only — a circuit-ish grid that fades out before it
   reaches Petra's half, so the two halves read differently, not just in hue. */
.hero--split::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(rgba(255, 255, 255, .16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .16) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: linear-gradient(100deg, transparent 42%, #000 78%);
  mask-image: linear-gradient(100deg, transparent 42%, #000 78%);
  opacity: .5;
  pointer-events: none;
}

/* Central scrim. Without it the headline crosses the seam and its contrast
   swings with the background underneath; with it every glyph sits on ~#3a2118
   or darker, so white and both -on-dark accents stay above 4.5:1. */
.hero--split::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 78% at 50% 44%, rgba(10, 13, 16, .66), rgba(10, 13, 16, .26) 58%, transparent 80%),
    linear-gradient(180deg, rgba(10, 13, 16, .34), transparent 34%);
  pointer-events: none;
}

.hero--split > .wrap { position: relative; z-index: 1; }

/* .hero.hero--split, not .hero--split: the latter ties with `.hero h1` on
   specificity (0,1,1) and loses on source order, inheriting max-width:18ch. */
.hero.hero--split h1 {
  color: #fff;
  font-size: clamp(2.15rem, 4.6vw, 3.5rem);
  /* One sentence, no <br>: balance splits it into two even lines instead of
     leaving the last word alone ("… grow / together."). Keep 32ch — narrower
     and it wraps to three lines and pushes the CTA below the fold at 1440x900.
     If a forced <br> ever comes back, drop the balance: it re-wraps around the
     break and the headline goes to four lines. */
  max-width: 32ch;
  margin-inline: auto;
  text-wrap: balance;
}
/* The gradient-clip treatment used on cream would sink these into the coloured
   background here, so the split hero opts out of it entirely. Doubling
   .hero.hero--split is deliberate: it has to outrank .hero h1 .accent-*, which
   is defined further down the file and would otherwise win on source order. */
.hero.hero--split h1 .accent-warm,
.hero.hero--split h1 .accent-cool { background-image: none; }
.hero.hero--split h1 .accent-warm { color: var(--warm-on-dark); }
.hero.hero--split h1 .accent-cool { color: var(--cool-on-dark); }
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .hero.hero--split h1 .accent-warm { color: var(--warm-on-dark); }
  .hero.hero--split h1 .accent-cool { color: var(--cool-on-dark); }
}

.hero--split .lead {
  color: rgba(255, 255, 255, .88);
  font-size: 1.02rem;
  max-width: 56ch;
  margin-top: 1.1rem;
  margin-inline: auto;
}
.hero--split .eyebrow { color: rgba(255, 255, 255, .84); justify-content: center; }
.hero--split .eyebrow::before,
.hero--split .eyebrow::after { background: rgba(255, 255, 255, .5); }

.hero--split .btn-row { justify-content: center; margin-top: 2.4rem; }
.hero--split .btn--ghost {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .45);
  color: #fff;
}
.hero--split .btn--ghost:hover {
  background: rgba(255, 255, 255, .2);
  border-color: #fff;
  color: #fff;
}

.hero--split .hero-note {
  color: rgba(255, 255, 255, .72);
  max-width: 62ch;
  margin-inline: auto;
  border-image: linear-gradient(90deg, transparent, var(--warm-on-dark), var(--cool-on-dark), transparent) 1;
}

/* The three-part middle row: Minds label | photo | Apps label. On phones the
   labels sit above and below the photo, matching the vertical gradient. */
.hero__split {
  display: grid;
  gap: 1.75rem;
  align-items: center;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  justify-items: center;
}
@media (min-width: 820px) {
  .hero__split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 3vw, 2.75rem);
  }
}

/* Full width on phones — a 22ch cap here squeezes the keyword row into a wrap
   that starts the second line with a separator dot. The cap only earns its
   keep in the narrow flanking columns of the desktop three-up. */
.hero__side { max-width: 100%; }
@media (min-width: 820px) { .hero__side { max-width: 22ch; } }
.hero__side-label {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 3vw, 2.15rem);
  line-height: 1;
  margin: 0 0 .5rem;
  letter-spacing: -.02em;
}
.hero__side--mind .hero__side-label { color: var(--warm-on-dark); }
.hero__side--apps .hero__side-label { color: var(--cool-on-dark); }
/* A list rather than a "A · B · C" string: at narrow column widths the string
   wraps onto a dangling separator, and the items are genuinely a list anyway.
   Separators are drawn between items so they can never end a line. */
.hero__side-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .25rem .55rem;
  font-size: .86rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
  line-height: 1.5;
}
.hero__side-list li { display: flex; align-items: center; gap: .55rem; }
.hero__side-list li + li::before {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: .55;
}
/* Beside the photo the flanking columns are ~265px — too narrow for one row,
   and a wrapped row starts the new line with a separator dot. Stack instead,
   and drop the separators since the column already does that job. */
@media (min-width: 820px) {
  .hero__side-list { flex-direction: column; gap: .28rem; }
  .hero__side-list li + li::before { display: none; }
}

/* The photo straddles the seam — it is the only thing that touches both
   halves, which is the whole point of the layout. */
.hero__photo {
  margin: 0;
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  padding: 5px;
  background: var(--grad-brand);
  box-shadow:
    0 30px 70px -30px rgba(0, 0, 0, .75),
    0 0 0 1px rgba(255, 255, 255, .14);
}
.hero__photo img {
  width: 100%;
  /* Crop the 3:2 original a little wider so the hero stays short enough to keep
     the CTA row in view at 1440x900. */
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: 50% 42%;
  border-radius: calc(var(--radius-lg) - 5px);
  display: block;
}
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .55;
  pointer-events: none;
  z-index: 0;
}
.hero::before { width: 40rem; height: 40rem; background: radial-gradient(circle, rgba(var(--warm-lit-rgb), .55), rgba(var(--warm-lit-rgb), 0) 70%); top: -16rem; right: -12rem; opacity: .85; }
.hero::after  { width: 36rem; height: 36rem; background: radial-gradient(circle, rgba(var(--cool-lit-rgb), .45), rgba(var(--cool-lit-rgb), 0) 70%); bottom: -20rem; left: -14rem; opacity: .85; }
.hero .wrap { position: relative; z-index: 1; }

/* Faint dot grid over the whole hero — texture without an image file. */
.hero > .wrap::before {
  content: "";
  position: absolute;
  inset: -4rem -50vw;
  z-index: -1;
  background-image: radial-gradient(rgba(22, 25, 29, .13) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 35%, #000, transparent 75%);
  mask-image: radial-gradient(70% 60% at 50% 35%, #000, transparent 75%);
  opacity: .5;
  pointer-events: none;
}

.hero h1 { max-width: 18ch; }
.hero h1 .accent-warm,
.hero h1 .accent-cool {
  -webkit-background-clip: text;
  background-clip: text;
}
.hero h1 .accent-warm { color: var(--warm-ink); background-image: var(--grad-warm-deep); }
.hero h1 .accent-cool { color: var(--cool-ink); background-image: var(--grad-cool-deep); }
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .hero h1 .accent-warm, .hero h1 .accent-cool { color: transparent; }
}
.hero .lead { margin-top: 1.4rem; max-width: 54ch; }
.hero .btn-row { margin-top: 2.2rem; }

.hero-note {
  margin-top: 2.4rem;
  padding-top: 1.5rem;
  border-top: 3px solid transparent;
  border-image: linear-gradient(90deg, var(--warm-lit), var(--cool-lit) 70%, transparent) 1;
  font-size: .92rem;
  color: var(--muted);
  max-width: 52ch;
}

/* Page header for subpages */
.page-head {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.75rem, 6vw, 4.5rem) clamp(2rem, 4vw, 3.25rem);
  background:
    radial-gradient(38rem 22rem at 88% -20%, rgba(var(--warm-lit-rgb), .22), transparent 65%),
    radial-gradient(34rem 22rem at 4% 120%, rgba(var(--cool-lit-rgb), .18), transparent 65%),
    linear-gradient(180deg, var(--warm-tint), var(--bg));
}
/* Gradient underline instead of the plain hairline. */
.page-head::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: var(--grad-brand);
  opacity: .75;
}
.page-head .wrap { position: relative; z-index: 1; }
.page-head h1 { max-width: 20ch; }
.page-head .lead { margin-top: 1.1rem; }

/* Variant that carries a photo next to the title. */
@media (min-width: 900px) {
  .page-head--media .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: clamp(2.5rem, 5vw, 4rem);
    align-items: center;
  }
}
.page-head--media .photo { margin-top: 2rem; }
@media (min-width: 900px) { .page-head--media .photo { margin-top: 0; } }

/* --- Photo frame -------------------------------------------------------- */
/* A gradient border around the image rather than an offset panel behind it:
   an offset panel would stick out past .wrap's padding on narrow screens and
   produce a horizontal scrollbar. */
.photo {
  position: relative;
  margin: 0;
  padding: 7px;
  border-radius: calc(var(--radius-lg) + 7px);
  background: var(--grad-brand);
  box-shadow: var(--shadow-lift), 0 34px 60px -34px rgba(var(--warm-rgb), .55);
}
.photo img {
  width: 100%;
  border-radius: var(--radius-lg);
  display: block;
}
/* A post's image at the top of the reading column: the text starts below the
   frame's shadow, not against it. */
.prose > .photo { margin-bottom: 2.5rem; }
.photo--warm { background: var(--grad-warm); }
.photo--cool { background: var(--grad-cool); box-shadow: var(--shadow-lift), 0 34px 60px -34px rgba(var(--cool-rgb), .55); }

.photo__caption {
  position: absolute;
  left: 1.25rem;
  bottom: 1.25rem;
  right: 1.25rem;
  color: #fff;
  font-size: .86rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .6);
}

/* --- Cards -------------------------------------------------------------- */
.card {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 2.6vw, 2.1rem);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
/* Gradient bar along the top edge — always visible, and it grows to full
   width when the card is a link and gets hovered. */
.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--grad-brand);
  transform: scaleX(.28);
  transform-origin: left;
  transition: transform .3s ease;
}
.card h3 { margin-bottom: .45rem; }
.card p { color: var(--ink-soft); }

a.card { text-decoration: none; color: inherit; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
a.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift), 0 26px 44px -28px rgba(var(--warm-rgb), .55);
  border-color: var(--warm-soft);
  color: inherit;
}
a.card:hover::before, a.card:focus-visible::before { transform: scaleX(1); }

.card__tag {
  align-self: flex-start;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .3rem .7rem;
  border-radius: 999px;
  margin-bottom: 1rem;
}
.card__tag--warm { background: var(--grad-warm-deep); color: #fff; box-shadow: var(--glow-warm); }
.card__tag--cool { background: var(--grad-cool-deep); color: #fff; box-shadow: var(--glow-cool); }
.card__tag--both { background: var(--grad-brand-deep); color: #fff; box-shadow: var(--glow-warm); }

.card__foot {
  margin-top: auto;
  padding-top: 1.4rem;
  font-size: .95rem;
}

/* List with checkmarks */
.ticks { list-style: none; padding: 0; margin: 1.1rem 0 0; }
.ticks li {
  position: relative;
  padding-left: 1.65rem;
  margin-bottom: .55rem;
  color: var(--ink-soft);
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .58em;
  width: .62rem;
  height: .62rem;
  border-radius: 50%;
  border: 2px solid var(--warm);
}
.ticks--cool li::before { border-color: var(--cool); }

/* --- Two-column contrast (problem / solution) --------------------------- */
.contrast {
  display: grid;
  gap: 1.25rem;
  margin-top: 2.5rem;
}
@media (min-width: 800px) { .contrast { grid-template-columns: 1fr 1fr; gap: 1.75rem; } }

.contrast__col {
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 2.6vw, 2.1rem);
  border: 1px solid var(--line);
}
.contrast__col--bad { background: transparent; }
.contrast__col--bad h3 { color: var(--muted); }
.contrast__col--good {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(26rem 18rem at 100% 0%, rgba(var(--warm-lit-rgb), .1), transparent 65%),
    var(--surface);
  border-color: var(--warm-soft);
  box-shadow: var(--shadow-lift), 0 30px 50px -34px rgba(var(--warm-rgb), .5);
}
.contrast__col--good::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--grad-brand);
}
.contrast ul { list-style: none; padding: 0; margin: 1rem 0 0; }
.contrast li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: .7rem;
  color: var(--ink-soft);
}
.contrast li::before {
  position: absolute;
  left: 0;
  top: -.02em;
  font-weight: 700;
}
.contrast__col--bad li::before { content: "×"; color: var(--line-strong); font-size: 1.3em; }
.contrast__col--good li::before { content: "✓"; color: var(--warm); }

/* --- Numbered steps ----------------------------------------------------- */
.steps {
  counter-reset: step;
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 760px)  { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .steps { grid-template-columns: repeat(4, 1fr); gap: 1.75rem; } }

.steps li {
  counter-increment: step;
  position: relative;
  padding-top: 1.35rem;
  border-top: 0;
}
/* The rule above each step walks from warm to cool across the four steps —
   the same Minds → Apps progression as the brand gradient. */
.steps li::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  border-radius: 3px;
  background: var(--grad-brand);
}
.steps li:nth-child(1)::after { background: linear-gradient(90deg, var(--warm-lit), var(--warm)); }
.steps li:nth-child(2)::after { background: linear-gradient(90deg, var(--warm), var(--brand-mid-warm)); }
.steps li:nth-child(3)::after { background: linear-gradient(90deg, var(--brand-mid-warm), var(--brand-mid-cool)); }
.steps li:nth-child(4)::after { background: linear-gradient(90deg, var(--brand-mid-cool), var(--cool-lit)); }

.steps li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font-family: var(--font-serif);
  font-size: 2.1rem;
  color: var(--warm-ink);
  background-image: var(--grad-warm-deep);
  -webkit-background-clip: text;
  background-clip: text;
  margin-bottom: .5rem;
  line-height: 1;
  width: max-content;
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .steps li::before { color: transparent; }
}
.steps li:nth-child(3)::before,
.steps li:nth-child(4)::before { color: var(--cool-ink); background-image: var(--grad-cool-deep); }
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .steps li:nth-child(3)::before, .steps li:nth-child(4)::before { color: transparent; }
}
.steps h3 { font-size: 1.12rem; margin-bottom: .35rem; }
.steps p { font-size: .96rem; color: var(--ink-soft); }

/* --- People ------------------------------------------------------------- */
.people { display: grid; gap: 1.75rem; }
@media (min-width: 820px) { .people { grid-template-columns: 1fr 1fr; gap: 2.25rem; } }

.person {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
}
/* Colour bar identifying the half of the brand this person belongs to. */
.person::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  z-index: 2;
}
.person--mind::before { background: var(--grad-warm); }
.person--apps::before { background: var(--grad-cool); }
.person--mind { box-shadow: var(--shadow), 0 30px 54px -38px rgba(var(--warm-rgb), .7); }
.person--apps { box-shadow: var(--shadow), 0 30px 54px -38px rgba(var(--cool-rgb), .7); }
.person--mind:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift), var(--glow-warm); }
.person--apps:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift), var(--glow-cool); }
.person__body { padding: clamp(1.5rem, 2.6vw, 2.1rem); display: flex; flex-direction: column; flex: 1; }
.person__role {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  margin-bottom: .5rem;
}
.person--mind .person__role { color: var(--warm-ink); }
.person--apps .person__role { color: var(--cool-ink); }
.person h3 { margin-bottom: .7rem; }
.person p { color: var(--ink-soft); }
.person__links { margin-top: auto; padding-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 1.25rem; font-size: .95rem; }

/* Portrait: shows a photo when present, an initial monogram until then. */
.portrait {
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  font-family: var(--font-serif);
  font-size: clamp(3.5rem, 8vw, 5rem);
  line-height: 1;
  letter-spacing: -.03em;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.person--mind .portrait { background: var(--grad-warm); }
.person--apps .portrait { background: var(--grad-cool); }
.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%; position: absolute; inset: 0; }

/* The photos are half-body shots, so the default 4:3 window crops them hard.
   .portrait--tall gives them room where the layout has it. */
.portrait--tall { aspect-ratio: 5 / 6; }
@media (min-width: 820px) { .portrait--tall { aspect-ratio: 4 / 5; } }

/* Tint the photo towards its half of the brand and fade the bottom into the
   card, so the image and the text below read as one object. */
.portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.person--mind .portrait::after {
  background:
    linear-gradient(180deg, transparent 55%, rgba(var(--warm-ink-rgb), .28)),
    linear-gradient(150deg, rgba(var(--warm-lit-rgb), .18), transparent 55%);
}
.person--apps .portrait::after {
  background:
    linear-gradient(180deg, transparent 55%, rgba(var(--cool-ink-rgb), .28)),
    linear-gradient(150deg, rgba(var(--cool-lit-rgb), .18), transparent 55%);
}

/* --- Quote / statement band -------------------------------------------- */
.statement {
  background: var(--grad-dark-band);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 5vw, 3.5rem);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-lift);
}
/* Two glows, warm from one corner and cool from the other — the brand
   gradient restated on a dark ground. */
.statement::before {
  content: "";
  position: absolute;
  inset: -12rem auto auto -10rem;
  width: 30rem;
  height: 30rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--warm-lit-rgb), .42), transparent 66%);
  pointer-events: none;
}
.statement::after {
  content: "";
  position: absolute;
  inset: auto -8rem -14rem auto;
  width: 30rem;
  height: 30rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--cool-lit-rgb), .5), transparent 68%);
  pointer-events: none;
}
.statement * { position: relative; z-index: 1; }
.statement h2, .statement h3 { color: #fff; }
.statement p { color: rgba(255, 255, 255, .82); }
.statement .eyebrow { color: var(--warm-on-dark-muted); }
.statement .eyebrow::before { background: var(--warm-on-dark-muted); }
.statement a:not(.btn) { color: #fff; }

.quote {
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  line-height: 1.35;
  letter-spacing: -.015em;
  margin: 0 0 1.25rem;
  max-width: 26ch;
}
.quote-source { font-size: .95rem; color: var(--muted); }

/* --- CTA band ----------------------------------------------------------- */
.cta-band { padding-block: var(--step); }
.cta-band .statement { text-align: left; }
.cta-band .btn-row { margin-top: 2rem; }
@media (min-width: 860px) {
  .cta-band .statement {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
  }
  .cta-band .btn-row { margin-top: 0; flex: none; }
}

/* --- Facts strip -------------------------------------------------------- */
.facts {
  display: grid;
  gap: 1.5rem;
  padding: 1.75rem 0 0;
  border-top: 1px solid var(--line);
  margin-top: 2.5rem;
}
@media (min-width: 700px) { .facts { grid-template-columns: repeat(3, 1fr); } }
.facts {
  border-top: 3px solid transparent;
  border-image: linear-gradient(90deg, var(--warm-lit), var(--cool-lit)) 1;
}
.facts dt {
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 4vw, 3rem);
  line-height: 1;
  color: var(--ink);
  background-image: var(--grad-brand-deep);
  -webkit-background-clip: text;
  background-clip: text;
  width: max-content;
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .facts dt { color: transparent; }
}
.facts dd { margin: .45rem 0 0; font-size: .95rem; color: var(--muted); }

/* --- FAQ / details ------------------------------------------------------ */
.faq { border-top: 3px solid transparent; border-image: linear-gradient(90deg, var(--warm-lit), var(--cool-lit)) 1; }
.faq details[open] { background: linear-gradient(90deg, rgba(var(--warm-lit-rgb), .07), transparent 60%); }
.faq details[open] summary { color: var(--warm-ink); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer;
  padding: 1.25rem 2.5rem 1.25rem 0;
  font-weight: 600;
  font-size: 1.06rem;
  list-style: none;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: .35rem;
  top: 1.05rem;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--warm);
  transition: transform .18s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > *:not(summary) { padding-bottom: 1.4rem; max-width: var(--prose); color: var(--ink-soft); }

/* --- Forms -------------------------------------------------------------- */
.form { display: grid; gap: 1.15rem; }
.field { display: grid; gap: .4rem; }
.field label { font-size: .92rem; font-weight: 600; color: var(--ink); }
.field .hint { font-size: .84rem; color: var(--muted); font-weight: 400; }

.field input,
.field select,
.field textarea {
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: .78rem .95rem;
  width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { min-height: 9.5rem; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--warm);
  box-shadow: 0 0 0 3px var(--warm-soft);
}
.field input::placeholder, .field textarea::placeholder { color: #9aa0a8; }

@media (min-width: 640px) { .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; } }

.check { display: flex; gap: .7rem; align-items: flex-start; font-size: .92rem; color: var(--ink-soft); }
.check input { width: 1.1rem; height: 1.1rem; margin-top: .25rem; flex: none; accent-color: var(--warm); }

.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.form-status {
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
  font-size: .96rem;
  display: none;
}
.form-status[data-state="ok"]   { display: block; background: var(--cool-soft); color: var(--cool-ink); }
.form-status[data-state="err"]  { display: block; background: var(--warm-soft); color: var(--warm-ink); }
.form-status[data-state="busy"] { display: block; background: var(--surface-alt); color: var(--ink-soft); }

/* --- Contact aside ------------------------------------------------------ */
.contact-box {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(24rem 16rem at 100% 0%, rgba(var(--cool-lit-rgb), .09), transparent 65%),
    var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 2.6vw, 2rem);
  box-shadow: var(--shadow);
}
.contact-box::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--grad-brand);
}
.contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.1rem; }
.contact-list dt, .contact-list .label {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .15rem;
}

/* --- Footer ------------------------------------------------------------- */
.site-footer {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(46rem 26rem at 88% 110%, rgba(var(--cool-lit-rgb), .3), transparent 62%),
    radial-gradient(38rem 24rem at 6% -20%, rgba(var(--warm-lit-rgb), .22), transparent 62%),
    var(--ink);
  color: rgba(255, 255, 255, .72);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
  font-size: .95rem;
}
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--grad-brand);
}
.site-footer .wrap { position: relative; z-index: 1; }
.site-footer a { color: rgba(255, 255, 255, .82); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer h4 {
  font-family: var(--font-sans);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
  margin-bottom: 1rem;
}
.footer-grid { display: grid; gap: 2.5rem; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr; gap: 3rem; } }
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.site-footer .brand { color: #fff; margin-bottom: 1rem; }
.site-footer .brand .m { color: var(--warm-on-dark-muted); }
.site-footer .brand .a { color: var(--cool-on-dark-muted); }
.site-footer .brand svg .m-side { stroke: var(--warm-on-dark-muted); }
.site-footer .brand svg .a-side { stroke: var(--cool-on-dark-muted); }
.site-footer .brand .amp { color: rgba(255,255,255,.5); }

.footer-bottom {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, .14);
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  font-size: .88rem;
  color: rgba(255, 255, 255, .55);
}
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: 1.25rem; list-style: none; padding: 0; margin: 0; }

/* --- Utilities ---------------------------------------------------------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.text-muted { color: var(--muted); }
.small { font-size: .9rem; }

/* --- Motion & print ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  .site-header, .cta-band, .nav-toggle, .form { display: none; }
  body { background: #fff; font-size: 11pt; }
  /* Strip every decorative gradient, glow and colour wash. */
  .hero::before, .hero::after,
  .hero > .wrap::before,
  .hero--split::before, .hero--split::after,
  .section--glow::before, .section--glow::after,
  .section--dark::before, .section--dark::after,
  .statement::before, .statement::after,
  .site-footer::before, .card::before, .contact-box::before,
  .person::before, .portrait::after { display: none; }
  .hero, .page-head, .section--alt, .section--cool, .section--warm,
  .section--surface, .section--dark, .statement, .site-footer,
  .photo, .hero__photo { background: #fff; }
  .photo, .hero__photo { padding: 0; box-shadow: none; }
  .statement, .statement h2, .statement h3, .statement p,
  .site-footer, .site-footer a { color: #000; }
  /* The split hero and the dark band are white-on-colour on screen; on paper
     they lose their background, so every colour set for them must come back. */
  .hero--split, .hero--split h1, .hero--split p, .hero--split .lead,
  .hero--split .eyebrow, .hero--split .hero-note,
  .hero--split .hero__side-label, .hero--split .hero__side-list,
  .hero.hero--split h1 .accent-warm, .hero.hero--split h1 .accent-cool,
  .section--dark, .section--dark h2, .section--dark h3, .section--dark p,
  .section--dark .lead, .section--dark .eyebrow,
  .section--dark .steps li::before { color: #000; }
}