/* ============ Section spacing ============ */
.section { padding-block: var(--space-9); }
.section--alt { background: var(--color-bg-alt); }
.section--ink { background: var(--color-ink); color: #fff; }
.section--ink h2, .section--ink h3 { color: #fff; }
.section--tight { padding-block: var(--space-7); }

/* ============ Hero ============ */
.hero {
  position: relative;
  /* Full-viewport home hero: fill the screen below the fixed header, so
     header + hero = one screen and the bottom-aligned content stays in view.
     The header is fixed + opaque with body padding-top: 96px (72px ≤768px, see
     components.css). `dvh` tracks the mobile URL bar; the `vh` line is the
     fallback for browsers without dvh. (min-height, so it grows if content needs more.) */
  min-height: calc(100vh - 96px);
  min-height: calc(100dvh - 96px);
  display: grid;
  align-items: end;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  background: var(--color-ink);
}
.hero__image {
  /* Oversized + top-anchored so the upward parallax (animations.js: yPercent -15)
     never lifts the image off the hero's bottom edge and exposes the dark base
     (.hero background). Coverage needs height >= 100% + 15/85 ≈ 118%; 125% leaves
     a safe margin. The extra height hangs below the hero, clipped by overflow:hidden.
     Anchored top:0 (not inset:0) because the image only ever travels upward. */
  position: absolute;
  top: 0; left: 0;
  z-index: -2;
  object-fit: cover;
  width: 100%; height: 125%;
}
.hero::after {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
              rgba(26, 31, 46, 0.10) 0%,
              rgba(26, 31, 46, 0.55) 55%,
              rgba(26, 31, 46, 0.85) 100%);
}
.hero__inner { padding-block: var(--space-9) var(--space-8); }
.hero__title {
  font-size: var(--fs-800);
  color: #fff;
  max-width: 18ch;
}
.hero__subtitle {
  margin-top: var(--space-4);
  max-width: 56ch;
  color: rgba(255,255,255,0.92);
  font-size: var(--fs-300);
  line-height: 1.5;
}
.hero__eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  font-size: var(--fs-100);
  color: #fff;
  background: var(--color-accent-strong);
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-4);
}
.hero__actions {
  margin-top: var(--space-6);
  display: flex; flex-wrap: wrap; gap: var(--space-3);
}

.hero--compact { min-height: clamp(280px, 40vh, 420px); }

/* Below 768px the fixed header is 72px tall (components.css), so subtract that
   instead of 96px to keep header + hero = exactly one screen. */
@media (max-width: 768px) {
  .hero {
    min-height: calc(100vh - 72px);
    min-height: calc(100dvh - 72px);
  }
}

/* ============ Two-column ============ */
.two-col {
  display: grid;
  gap: var(--space-7);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 768px) {
  .two-col { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
  .two-col--wide-left { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .two-col--wide-right{ grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
}
.two-col img,
.two-col picture { border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }

/* ============ Card grid ============ */
.grid-cards {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  align-items: stretch;             /* explicit — default, but stops any */
  grid-auto-rows: 1fr;              /* row stretching from being affected */
}                                   /* by ancestor align-* declarations. */

/* ============ Numbers band ============ */
.numbers-band {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  text-align: center;
}
.numbers-band__value {
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 900;
  line-height: 1;
  color: var(--color-accent);
}
.numbers-band__label {
  margin-top: var(--space-2);
  color: var(--color-ink-muted);
  font-size: var(--fs-100);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

/* ============ Timeline (zig-zag with center rail) ============ */
.timeline {
  position: relative;
  padding-block: var(--space-6);
}

/* Center rail — full-height neutral track + accent-coloured progress fill */
.timeline-rail {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 1.5rem;                  /* mobile: left rail */
  width: 4px;
  background: var(--color-line);
  border-radius: 4px;
}
.timeline-rail__progress {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;                  /* default fully filled — animations.js
                                    overrides to 0 then scrubs to 100% */
  background: var(--color-accent-strong);
  border-radius: 4px;
  transform-origin: top center;
}

.timeline__items {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.timeline__item {
  display: grid;
  align-items: center;
  gap: var(--space-3);
  grid-template-columns: 3rem 1fr;     /* mobile: node | card */
}

.timeline__node {
  grid-column: 1;
  justify-self: center;
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  background: var(--color-accent-strong);
  color: #fff;
  border-radius: 50%;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--fs-300);
  line-height: 1;
  position: relative;
  z-index: 2;
  /* Donut "halo" so the node visually punches through the rail */
  box-shadow: 0 0 0 6px var(--color-bg-alt),
              0 8px 16px -8px rgba(26, 31, 46, 0.35);
}

.timeline__card {
  grid-column: 2;
  background: var(--color-surface);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  position: relative;
}

.timeline__era {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--fs-400);
  font-weight: 700;
  color: var(--color-accent-strong);
  margin-bottom: var(--space-2);
}
.timeline__body { color: var(--color-ink); margin: 0; }

/* Desktop: center the rail, alternate cards left/right */
@media (min-width: 769px) {
  .timeline-rail { left: 50%; transform: translateX(-50%); }
  .timeline__items { gap: var(--space-7); }
  .timeline__item {
    grid-template-columns: 1fr 4rem 1fr;
  }
  .timeline__node { grid-column: 2; }
  /* Odd items: card on the left */
  .timeline__item:nth-child(odd) .timeline__card {
    grid-column: 1; grid-row: 1;
    text-align: right;
    margin-right: var(--space-4);
  }
  /* Even items: card on the right */
  .timeline__item:nth-child(even) .timeline__card {
    grid-column: 3; grid-row: 1;
    margin-left: var(--space-4);
  }
  /* Little arrow off the card pointing at the node */
  .timeline__item:nth-child(odd) .timeline__card::after,
  .timeline__item:nth-child(even) .timeline__card::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 0; height: 0;
    border-block: 10px solid transparent;
  }
  .timeline__item:nth-child(odd) .timeline__card::after {
    right: -10px;
    border-left: 10px solid var(--color-surface);
  }
  .timeline__item:nth-child(even) .timeline__card::after {
    left: -10px;
    border-right: 10px solid var(--color-surface);
  }
}

/* ============ Process steps (horizontal flow on desktop, vertical on mobile) === */
.process {
  position: relative;
  /* No padding-block — the section already provides outer spacing, and adding
     padding here pushes the rail's coordinate frame away from the node row. */
}

/* Rail — vertical on mobile, switches to horizontal on desktop. Mobile values
   below put the rail's vertical extent from the first node centre (1.5rem)
   down to the last node centre (1.5rem from bottom). */
.process__rail {
  position: absolute;
  top: 1.5rem;
  bottom: 1.5rem;
  left: calc(1.5rem - 2px);
  width: 4px;
  background: var(--color-line);
  border-radius: 4px;
}
.process__rail-progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;       /* mobile: full width of the 4px rail */
  height: 100%;      /* default: full — no-JS/reduced-motion shows complete fill */
  background: var(--color-accent-strong);
  border-radius: 4px;
}

.process__steps {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: 0;
}

.process__step {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: var(--space-4);
  align-items: center;
}

.process__node {
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  background: var(--color-surface);
  border: 3px solid var(--color-accent-strong);
  color: var(--color-accent-strong);
  border-radius: 50%;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--fs-300);
  line-height: 1;
  position: relative;
  z-index: 2;
  /* Halo punches the node through the rail */
  box-shadow: 0 0 0 6px var(--color-bg);
}

.process__label {
  margin: 0;
  font-size: var(--fs-200);
  font-weight: 500;
  color: var(--color-ink);
  line-height: 1.4;
}

/* Desktop: horizontal river */
@media (min-width: 768px) {
  .process__rail {
    /* Horizontal rail centred through the node row. Node is 3rem tall,
       so its centre sits at 1.5rem from the top — minus half the rail
       thickness (2px) so the line is perfectly bisected. */
    top: calc(1.5rem - 2px);
    bottom: auto;
    left: max(1.5rem, 10%);
    right: max(1.5rem, 10%);
    width: auto;
    height: 4px;
  }
  .process__rail-progress {
    /* Same top/left/100% pair, just oriented horizontally because the
       parent .process__rail is now wide instead of tall. */
    width: 100%;
    height: 100%;
  }
  .process__steps {
    flex-direction: row;
    gap: var(--space-3);
    align-items: flex-start;
  }
  .process__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 1 0;
    gap: var(--space-3);
    text-align: center;
    min-width: 0;
  }
  .process__label { font-size: var(--fs-100); max-width: 18ch; }
}

/* ============ Tablist (Locations) ============ */
.tablist {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  border-bottom: 2px solid var(--color-line);
  margin-bottom: var(--space-6);
}
.tablist [role="tab"] {
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--color-ink-muted);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  border: 0;
  cursor: pointer;
  background: transparent;
  position: relative;
  bottom: -2px;
  border-bottom: 2px solid transparent;
}
.tablist [role="tab"][aria-selected="true"] {
  color: var(--color-accent-strong);
  border-bottom-color: var(--color-accent-strong);
}

/* ============ Form ============ */
.form {
  display: grid;
  gap: var(--space-5);
}
.form__field { display: grid; gap: var(--space-2); }
.form__field label { font-weight: 600; }
.form__field input,
.form__field textarea {
  width: 100%;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  transition: border-color var(--duration-fast) var(--ease-smooth);
}
.form__field input:focus,
.form__field textarea:focus { border-color: var(--color-accent); outline: none; }
.form__field textarea { min-height: 10rem; resize: vertical; }
.form__field--invalid input,
.form__field--invalid textarea { border-color: var(--color-error); }
.form__error {
  font-size: var(--fs-100);
  color: var(--color-error);
  min-height: 1.2em;
}
.form__consent { display: flex; gap: var(--space-3); align-items: flex-start; }
.form__consent input { width: auto; margin-top: 0.25rem; }
.form__honeypot {
  position: absolute !important;
  left: -10000px;
  width: 1px; height: 1px;
  overflow: hidden;
}
.form__status {
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-line);
  background: var(--color-bg-alt);
}
.form__status--success {
  border-color: var(--color-success);
  background: #f0f7f3;
  color: #1f5733;
}
.form__status--error {
  border-color: var(--color-error);
  background: #fdeded;
  color: var(--color-error);
}