/* ==========================================================================
   INK & STAMP — Design Concept Option 03 "The Signing Desk"
   Visual execution v2 — photographic and high-contrast.

   Thesis unchanged: there is a team behind every signing; a desk with someone
   at it. What changed is the execution — the page now alternates dark and
   light, carries three near-full-bleed photographs, and sets display type
   OVER imagery rather than beside it.

   Still binding: the palette, DM Serif Display + Inter, the truthfulness
   rules, and copper that never carries text and never marks focus.

   UI/UX Pro Max rules applied by hand (its search.py needs Python, which
   isn't installed here): color-contrast, color-dark-mode (tonal variants,
   contrast tested separately per surface), focus-appearance, line-length,
   line-height, heading-line-balance, whitespace-balance, transform-
   performance, excessive-motion, reduced-motion, web-target-size.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  --black:    #000000;
  --espresso: #241A12;
  --copper:   #BD9577;
  --beige:    #E3D2CA;
  --cream:    #F4EDE9;
  --white:    #FFFFFF;

  /* A near-black one step under espresso, for the deepest fields. Dark
     surfaces are tonal steps, not an inversion of the light palette. */
  --ink:      #15100B;

  /* Copper that may carry text. --copper (#BD9577) reads 1.7:1 on cream and
     still only ever draws rules; these two are darkened until they clear the
     bar for the size they are used at. Measured on #F4EDE9:
       --copper-ink     4.80:1  small caps, AA normal text
       --copper-display 3.65:1  display numerals only, AA large text */
  --copper-ink:     #8F5730;
  --copper-display: #A56E4A;

  --rule-espresso: rgba(36, 26, 18, 0.22);
  --rule-espresso-strong: rgba(36, 26, 18, 0.42);
  --rule-copper: #BD9577;
  --rule-on-dark: rgba(244, 237, 233, 0.22);

  --text:        #241A12;
  --text-strong: #000000;
  --text-muted:  #574539;
  /* Cream at full strength on espresso is 14.7:1; the muted step still
     clears AA at 7.6:1 rather than being a decorative grey-on-grey. */
  --on-dark:       #F4EDE9;
  --on-dark-muted: #C9BAAF;

  --s-1: 8px;  --s-2: 16px; --s-3: 24px; --s-4: 32px;
  --s-5: 48px; --s-6: 64px; --s-7: 96px; --s-8: 128px; --s-9: 176px;

  --container: 1200px;
  --gutter: 24px;
  --radius: 3px;

  --font-display: "DM Serif Display", "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               Helvetica, Arial, "Helvetica Neue", sans-serif;

  --banner-h: 36px;
}
@media (max-width: 720px) { :root { --banner-h: 76px; } }
@media (max-width: 380px) { :root { --banner-h: 82px; } }

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--banner-h) + 16px);
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;              /* line-height rule: 1.5–1.75 for body */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; display: block; }

h1, h2, h3, h4, p, figure, figcaption, blockquote { margin: 0; }
h1, h2, h3, h4 { color: var(--text-strong); font-weight: 400; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }

/* Focus is espresso on light and cream on dark — never copper, which fails
   the 3:1 non-text bar. 3px ring with offset satisfies focus-appearance. */
:focus-visible {
  outline: 3px solid var(--espresso);
  outline-offset: 3px;
  border-radius: 2px;
}
.on-dark :focus-visible { outline-color: var(--cream); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; left: var(--gutter); top: 8px; z-index: 300;
  transform: translateY(-200%);
  background: var(--espresso); color: var(--cream);
  padding: 12px 20px; border-radius: var(--radius);
  font-size: 14px; font-weight: 600;
}
.skip-link:focus { transform: translateY(0); }

.wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* --------------------------------------------------------------------------
   3. Type
   -------------------------------------------------------------------------- */
.statement {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.02em;
  /* heading-line-balance: a progressive hint, not forced non-breaking spaces */
  text-wrap: balance;
}

.label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--text);
}
.label--on-dark { color: var(--on-dark); }

/* line-length: body copy is capped near 65ch */
.body-lg { font-size: 18px; line-height: 1.6; color: var(--text-muted); max-width: 42ch; }
.body    { font-size: 16px; line-height: 1.7; color: var(--text-muted); max-width: 65ch; }
.small   { font-size: 14px; line-height: 1.5; color: var(--text-muted); }

.on-dark .body-lg, .on-dark .body { color: var(--on-dark-muted); }
.on-dark .small { color: var(--on-dark-muted); }

/* --------------------------------------------------------------------------
   4. Rules and registration marks
   -------------------------------------------------------------------------- */
.tick {
  display: block; width: 56px; height: 1px;
  background: var(--rule-copper);
  margin-bottom: var(--s-2);
  transform-origin: left center;
}
.tick--long { width: 96px; }

.regmark { display: block; width: 26px; height: 26px; }
.regmark svg { width: 100%; height: 100%; display: block; stroke: var(--copper); }

/* --------------------------------------------------------------------------
   5. Surfaces
   -------------------------------------------------------------------------- */
.band { padding-block: var(--s-8); }
.band--cream { background: var(--cream); }
.band--beige { background: var(--beige); }
/* The coordination story sat on the same cream as the coverage split above it
   and the two read as one continuous section. A tonal step plus a copper rule
   at the seam makes the boundary unambiguous without adding a fourth dark
   field to a page that already alternates. */
.band--paper {
  background: var(--beige);
  border-top: 1px solid var(--rule-copper);
}
.band--dark  { background: var(--espresso); color: var(--on-dark); }
.band--ink   { background: var(--ink); color: var(--on-dark); }

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 12px;
  min-height: 54px; padding: 0 32px;
  border: 1px solid transparent; border-radius: var(--radius);
  font-size: 13px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; line-height: 1; cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn--primary { background: var(--espresso); color: var(--cream); border-color: var(--espresso); }
.btn--primary:hover { background: var(--black); border-color: var(--black); }

.btn--outline { background: transparent; color: var(--text-strong); border-color: var(--rule-espresso-strong); }
.btn--outline:hover { border-color: var(--espresso); background: rgba(36,26,18,.05); }

/* On dark surfaces the primary inverts to cream — a tonal pairing rather
   than the same espresso fill that would vanish into the field. */
.btn--light { background: var(--cream); color: var(--espresso); border-color: var(--cream); }
.btn--light:hover { background: var(--white); border-color: var(--white); }
/* A control boundary has to clear 3:1 like any other non-text UI. The hairline
   used for rules elsewhere (22% cream) only measured 2.0:1 against the scrimmed
   hero, so the outline button carries its own heavier border. */
.btn--ghost {
  background: transparent;
  color: var(--cream);
  border-color: rgba(244, 237, 233, 0.55);
}
.btn--ghost:hover { border-color: var(--cream); background: rgba(244, 237, 233, 0.07); }

.btn__arrow { display: inline-block; transition: transform .18s ease; }
.btn:hover .btn__arrow { transform: translateX(3px); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-2) 20px; }

/* --------------------------------------------------------------------------
   7. Media slots
   Marked placeholders until the licensed photographs land. The slot itself
   carries the aspect ratio so the composition is already correct, and the
   marker sits in a corner on type-bearing slots so the overlaid headline
   still reads as the finished thing.
   -------------------------------------------------------------------------- */
.media { position: relative; overflow: hidden; background: var(--ink); }
.media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.media--16x9 { aspect-ratio: 16 / 9; }
.media--21x9 { aspect-ratio: 21 / 9; }
.media--4x5  { aspect-ratio: 4 / 5; }

/* Corner tag for slots that carry type over them */
.media__tag {
  position: absolute; right: var(--s-3); bottom: var(--s-3); z-index: 3;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px;
  border: 1px dashed rgba(244, 237, 233, 0.5);
  border-radius: var(--radius);
  background: rgba(21, 16, 11, 0.72);
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--on-dark);
}
.media__tag--light {
  border-color: rgba(36, 26, 18, 0.45);
  background: rgba(244, 237, 233, 0.9);
  color: var(--text);
}

/* Centred marker for image-led slots with no type over them */
.media__note {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px; padding: var(--s-4); text-align: center;
}
.media__note-tag {
  font-size: 11px; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--on-dark);
}
.media__note-body {
  font-size: 13.5px; line-height: 1.6; color: var(--on-dark-muted); max-width: 34ch;
}
.media--placeholder { border: 1px dashed rgba(244, 237, 233, 0.32); }

/* --------------------------------------------------------------------------
   8. HERO — dark, full-bleed, type over image. The premium moment.
   -------------------------------------------------------------------------- */
.o3-hero {
  position: relative;
  /* 56.25vw == 16:9, so the hero slot really is the ratio the photograph is
     sourced at; the floor keeps it from collapsing on narrow screens, and
     content may still push it taller. */
  min-height: max(620px, 56.25vw);
  display: flex; align-items: flex-end;
  background: var(--ink);
  color: var(--on-dark);
  overflow: hidden;
  isolation: isolate;
}
.o3-hero__media { position: absolute; inset: 0; z-index: 0; }
.o3-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }

/* Two-stop scrim: heavy at the base where the type sits, lighter at the top
   so the photograph still reads. Sampled worst-case contrast is reported in
   the verification pass rather than assumed. */
.o3-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    /* The weight is carried horizontally, not vertically. This photograph puts
       its subjects on the right and a bright wall on the left, exactly where
       the type sits — so the scrim is heavy across the left half and falls away
       to almost nothing over the people. A vertical scrim heavy enough for the
       wall would have buried them. Sampled worst-case ratios are recorded in
       the verification pass rather than assumed. */
    linear-gradient(180deg,
      rgba(21,16,11,.30) 0%,
      rgba(21,16,11,.26) 22%,
      rgba(21,16,11,.34) 60%,
      rgba(21,16,11,.58) 100%),
    linear-gradient(90deg,
      rgba(21,16,11,.90) 0%,
      rgba(21,16,11,.88) 30%,
      rgba(21,16,11,.74) 48%,
      rgba(21,16,11,.34) 68%,
      rgba(21,16,11,.04) 100%);
}
.o3-hero__inner { position: relative; z-index: 2; width: 100%; padding-block: var(--s-9) var(--s-7); }

.o3-hero .tick { background: var(--copper); }
.o3-hero__eyebrow { margin-bottom: var(--s-3); }

.o3-hero h1 {
  font-size: clamp(44px, 6.4vw, 104px);
  color: var(--cream);
  max-width: 15ch;
  margin-bottom: var(--s-4);
}
.o3-hero__support {
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.55;
  color: var(--on-dark-muted);
  max-width: 44ch;
}
.o3-hero .btn-row { margin-top: var(--s-6); }

/* Phone treatment — the detail that carries the concept */
.o3-hero__phone { margin-top: var(--s-6); }
.phone-number {
  /* inline-flex with a floor, so the link is a 44px touch target at every
     size the number is set at — it measured 34.8px as an inline-block. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 500; line-height: 1.1;
  color: var(--cream);
  border-bottom: 1px solid transparent;
}
.phone-number:hover { border-bottom-color: var(--cream); }

/* Copper hairline running the full width beneath the hero content */
.o3-hero__rule {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  height: 1px; background: rgba(189, 149, 119, 0.55);
}

/* --------------------------------------------------------------------------
   9. Header — sits over the hero, transparent
   -------------------------------------------------------------------------- */
.site-header {
  position: relative; z-index: 20;
  background: var(--ink);
  border-bottom: 1px solid rgba(244, 237, 233, 0.12);
}
.site-header .wrap {
  display: flex; align-items: center; gap: 20px;
  min-height: 78px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.brand__mark {
  width: 38px; height: 38px; flex: none;
  /* the mark is black line art; on the dark header it sits in a cream badge,
     per the brand kit's on-dark rule */
  background: var(--cream); border-radius: 50%; padding: 4px;
}
.brand__name { font-size: 15px; font-weight: 700; letter-spacing: 0.11em; color: var(--cream); line-height: 1; }
.brand__tag {
  display: block; margin-top: 4px;
  font-size: 9px; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--on-dark-muted);
}
.nav { display: flex; align-items: center; gap: 30px; margin-inline: auto; }
.nav a {
  font-size: 14px; font-weight: 500; color: var(--on-dark);
  min-height: 44px; display: inline-flex; align-items: center;
  border-bottom: 1px solid transparent;
}
.nav a:hover { border-bottom-color: var(--copper); }
.header-actions { display: flex; align-items: center; gap: 16px; }
.header-actions .btn { min-height: 44px; padding: 0 20px; font-size: 11px; }

.nav-toggle {
  display: none; width: 44px; height: 44px;
  align-items: center; justify-content: center; margin-left: auto;
  background: transparent; border: 1px solid rgba(244,237,233,.28);
  border-radius: var(--radius); cursor: pointer;
}
.nav-toggle span { display: block; width: 18px; height: 1px; background: var(--cream); position: relative; }
.nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 1px; background: var(--cream);
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after  { top: 6px; }

/* --------------------------------------------------------------------------
   10. COVERAGE — the split composition, built to the supplied reference.

   Measured off the 1672x941 reference rather than eyeballed: the split falls
   at 57.3%, the panel frame is inset 26/27px, the content column runs
   x120-x845 (12.5% / 11.8%), the headline sets at ~104px on a 958px panel
   (6.2% of the section), body 19.5/34, and the proof panel is 725x184.

   Two deliberate departures, both flagged in the hand-off:
   - the reference sets small copper TEXT, which Option 03 had ruled out at
     #BD9577 (1.7:1). --copper-ink is a darker copper that holds the same
     colour impression at 4.8:1 on cream. #BD9577 still only ever draws rules.
   - the proof panel is a bordered box with an icon, which S13 ruled out. It is
     in the reference, so it is here; the rest of the page stays box-free.
   -------------------------------------------------------------------------- */
.cvg {
  position: relative;
  display: grid;
  grid-template-columns: 57.3% minmax(0, 1fr);
  background: var(--cream);
  /* 941/1672 == 56.3%, so the section holds the reference's proportions and
     is still allowed to grow if the type needs more room. */
  min-height: min(56.3vw, 920px);
}

/* ---- left panel ---------------------------------------------------------- */
.cvg__panel {
  position: relative;
  /* The map is allowed to run off the panel edge; without this it ran off the
     document instead and put 31px of horizontal scroll on the page at 375. */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--s-6);
  isolation: isolate;
}
.cvg__frame {
  position: absolute;
  inset: 26px 12px 26px 26px;
  border: 1px solid rgba(189, 149, 119, 0.21);
  pointer-events: none;
  z-index: 0;
}

/* Decorative dot-matrix map sitting behind the headline. Measured off the
   reference: ~97 dots across, roughly 4% contrast against the ground. */
.cvg__map {
  position: absolute;
  z-index: 0;
  left: 38%;
  top: 20%;
  width: 56%;
  height: auto;
  pointer-events: none;
}

.cvg__content {
  position: relative;
  z-index: 1;
  padding-left: 12.5%;
  padding-right: 11.8%;
  width: 100%;
}

/* ---- eyebrow + rule ------------------------------------------------------ */
.eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--copper-ink);
}
.eyebrow--ink { color: var(--text); }

.cvg__rule {
  display: block;
  width: 102px;
  height: 2px;
  margin-top: 26px;
  background: var(--copper-ink);
  opacity: 0.72;
}

/* ---- headline ------------------------------------------------------------ */
.cvg__head {
  margin-top: 44px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(38px, 6.2vw, 100px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--text-strong);
  max-width: 11ch;
  text-wrap: balance;
}
/* Large display numeral: 3.65:1, clears the 3:1 large-text bar. */
.cvg__head em {
  font-style: italic;
  color: var(--copper-display);
}

/* ---- ornamental divider -------------------------------------------------- */
.cvg__orn {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 44px;
  width: 215px;
}
.cvg__orn-rule { height: 1px; background: var(--copper-ink); opacity: .68; }
.cvg__orn-rule--a { width: 93px; flex: none; }
.cvg__orn-rule--b { flex: 1 1 auto; opacity: .34; }
.cvg__orn-star { width: 15px; height: 15px; flex: none; fill: var(--copper-ink); }

.cvg__body {
  margin-top: 32px;
  font-size: clamp(16px, 1.32vw, 19.5px);
  line-height: 1.75;
  color: var(--text-muted);
  max-width: 39ch;
}

/* ---- proof panel --------------------------------------------------------- */
.cvg__proof {
  display: grid;
  grid-template-columns: auto 1px minmax(0, 1fr);
  align-items: center;
  gap: 0;
  margin-top: 48px;
  padding: 30px 18px;
  border: 1px solid rgba(189, 149, 119, 0.47);
}
.cvg__seal {
  width: clamp(104px, 8.6vw, 137px);
  height: auto;
  justify-self: center;
  margin-inline: 12px;
}
.cvg__vrule {
  align-self: stretch;
  width: 1px;
  background: rgba(189, 149, 119, 0.32);
}

.cvg__claim {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  column-gap: 21px;
  padding-left: 42px;
}
.cvg__shield { width: 38px; height: 44px; flex: none; }
.cvg__claim .cvg__vrule {
  align-self: center;
  width: 1px;
  height: 45px;
  background: rgba(189, 149, 119, 0.5);
}
.cvg__claim-text {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(16px, 1.5vw, 22px);
  line-height: 1.45;
  color: var(--text-strong);
  max-width: 34ch;
}
.cvg__triad {
  grid-column: 1 / -1;
  margin-top: 20px;
  padding-left: 42px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--copper-ink);
}

/* ---- right photograph ---------------------------------------------------- */
.cvg__media { position: relative; overflow: hidden; background: var(--ink); }
.cvg__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 46% 50%; }
/* Inset hairline, open on the left so it runs under the panel exactly as the
   reference has it — the overflow clip does the cutting. */
.cvg__photo-frame {
  position: absolute;
  inset: 26px 26px 26px -48px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 22px;
  pointer-events: none;
}
.cvg__monogram {
  position: absolute;
  top: 9.6%;
  right: 8.3%;
  width: 66px;
  height: 66px;
  transform: translate(50%, -50%);
  pointer-events: none;
}

/* ---- responsive ---------------------------------------------------------- */
@media (max-width: 1180px) {
  .cvg__claim { padding-left: 40px; }
  .cvg__triad { padding-left: 40px; }
  .cvg__seal { margin-inline: 12px; }
  .cvg__proof { padding: 26px 18px; }
}

@media (max-width: 980px) {
  .cvg { grid-template-columns: 1fr; min-height: 0; }
  .cvg__panel { padding-block: var(--s-8) var(--s-7); }
  .cvg__content { padding-inline: var(--gutter); }
  .cvg__frame { inset: 20px; }
  .cvg__map { left: auto; right: -6%; top: 14%; width: 76%; }
  .cvg__head { max-width: 14ch; }
  .cvg__body { max-width: 46ch; }
  .cvg__media { aspect-ratio: 4 / 3; }
  .cvg__photo-frame { inset: 20px; }
  /* The 4:5 crop puts the porch lantern in the top-right corner, so the
     monogram has nowhere clean to sit below this width. It is decorative and
     aria-hidden, so dropping it costs nothing and keeps the corner quiet. */
  .cvg__monogram { display: none; }
}

@media (max-width: 700px) {
  .cvg__proof {
    grid-template-columns: 1fr;
    justify-items: start;
    gap: 24px;
    padding: 26px 22px;
  }
  .cvg__seal { justify-self: start; margin-inline: 0; }
  /* The vertical hairlines become horizontal ones rather than disappearing —
     the panel keeps its measured cadence when it stacks. */
  .cvg__proof > .cvg__vrule { width: 100%; height: 1px; }
  .cvg__claim { padding-left: 0; column-gap: 20px; }
  .cvg__triad { padding-left: 0; margin-top: 4px; }
  .cvg__claim .cvg__vrule { height: 40px; }

}

@media (max-width: 640px) {
  .cvg__head { font-size: 42px; max-width: 100%; }
  .cvg__orn { width: 180px; margin-top: 34px; }
  .cvg__rule { margin-top: 20px; }
  .cvg__head { margin-top: 32px; }
  .cvg__media { aspect-ratio: 4 / 5; }
}

/* --------------------------------------------------------------------------
   10b. COORDINATION — statement plus detail, hairline separated.
   Lifted out of the coverage band when that band became the split
   composition; same paper, next movement.
   -------------------------------------------------------------------------- */
.band--paper .eyebrow { margin-top: var(--s-1); }
.track__lead { margin-top: var(--s-4); font-size: clamp(28px, 3.2vw, 44px); max-width: 20ch; margin-bottom: var(--s-5); }
.track__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.track__step { padding: var(--s-4) var(--s-4) var(--s-4) 0; border-top: 1px solid var(--rule-espresso); }
.track__statement {
  font-size: clamp(18px, 1.7vw, 22px); font-weight: 600; line-height: 1.3;
  letter-spacing: -0.01em; color: var(--text-strong); max-width: 20ch;
}
.track__detail { margin-top: 10px; font-size: 14.5px; line-height: 1.6; color: var(--text-muted); max-width: 34ch; }

@media (max-width: 900px) {
  .track__steps { grid-template-columns: 1fr; }
  .track__step { padding-right: 0; }
}
@media (max-width: 640px) {
  .track__lead { font-size: 30px; max-width: 100%; }
}
/* --------------------------------------------------------------------------
   11. MID-PAGE BREAK — full-bleed 21:9, type over image
   -------------------------------------------------------------------------- */
.photo-band {
  position: relative;
  /* 42.86vw == 21:9 */
  min-height: max(360px, 42.86vw);
  display: flex; align-items: center;
  background: var(--ink); color: var(--on-dark);
  overflow: hidden; isolation: isolate;
}
.photo-band__media { position: absolute; inset: 0; z-index: 0; }
.photo-band__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.photo-band::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(96deg,
    rgba(21,16,11,.92) 0%, rgba(21,16,11,.88) 40%,
    rgba(21,16,11,.79) 58%, rgba(21,16,11,.46) 78%,
    rgba(21,16,11,.22) 100%);
}
.photo-band__inner { position: relative; z-index: 2; width: 100%; padding-block: var(--s-8); }
.photo-band .label { margin-bottom: var(--s-3); }
.photo-band .statement {
  font-size: clamp(30px, 4vw, 58px);
  color: var(--cream);
  max-width: 18ch;
}
.photo-band__support {
  margin-top: var(--s-4);
  font-size: 17px;
  line-height: 1.65;
  color: var(--on-dark-muted);
  max-width: 42ch;
}

/* Caption strip. Kept inside the left 55% of the band, which is where the
   scrim still holds — measured, not assumed. Both rows are full cream rather
   than a muted step, because the muted tone only reached 4.56:1 out here. */
.photo-band__notes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-4);
  max-width: 640px;
  margin-top: var(--s-6);
  padding-top: var(--s-3);
  border-top: 1px solid rgba(189, 149, 119, 0.55);
}
.photo-band__notes dt {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--cream);
}
.photo-band__notes dd {
  margin: 8px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--cream);
}
.photo-band .tick { background: var(--copper); }

/* --------------------------------------------------------------------------
   12. RESOLUTION — "Plans change." Content unchanged; now one dark field
   among several rather than the only one.
   -------------------------------------------------------------------------- */
.resolution { background: var(--espresso); color: var(--on-dark); padding-block: var(--s-9); }
.resolution__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: var(--s-7);
  align-items: center;
}
.resolution__lead { max-width: 62ch; }

/* ---- the reassignment, drawn ----
   Copper on espresso measures 6.8:1, well past the 3:1 bar for non-text
   graphics — which is why the marks can stay as hairline outlines here
   instead of needing to become filled shapes the way they would on cream. */
.reroute .tick { background: var(--copper); }
.reroute__list { margin-top: var(--s-5); }
.reroute__step {
  position: relative;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  column-gap: 22px;
  padding-bottom: 38px;
}
.reroute__step:last-child { padding-bottom: 0; }
.reroute__step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 27px;
  bottom: 5px;
  border-left: 1px solid var(--rule-copper);
}
/* the run that breaks is dashed rather than solid */
.reroute__step--break::before { border-left-style: dashed; }

.reroute__mark {
  position: relative;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border: 1px solid var(--rule-copper);
  border-radius: 50%;
}
.reroute__mark--break { border-style: dashed; }
.reroute__mark--break::before,
.reroute__mark--break::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 11px; height: 1px;
  background: var(--copper);
}
.reroute__mark--break::before { transform: translate(-50%, -50%) rotate(45deg); }
.reroute__mark--break::after  { transform: translate(-50%, -50%) rotate(-45deg); }
.reroute__mark--end::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: var(--copper);
}

.reroute__label { font-size: 15px; line-height: 1.45; color: var(--on-dark); max-width: 36ch; }
.reroute__step--break .reroute__label { color: var(--on-dark-muted); }
.resolution .label { margin-bottom: var(--s-5); }
.resolution .statement { font-size: clamp(34px, 4.4vw, 60px); color: var(--cream); max-width: 15ch; }
.resolution__support { margin-top: var(--s-5); font-size: 17px; line-height: 1.65; color: var(--on-dark-muted); max-width: 46ch; }
.resolution .tick { background: var(--copper); }

/* --------------------------------------------------------------------------
   13. FAQ — plain accordion, hairlines only
   -------------------------------------------------------------------------- */
.faq__grid {
  display: grid; grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr);
  gap: var(--s-7); align-items: start;
}
.faq__head { font-family: var(--font-body); font-size: 21px; font-weight: 600; letter-spacing: -0.005em; }
.faq__note { margin-top: 12px; font-size: 14px; line-height: 1.6; color: var(--text-muted); max-width: 30ch; }

.faq-list { border-top: 1px solid var(--rule-espresso); }
.faq-item { border-bottom: 1px solid var(--rule-espresso); }
.faq-item__q { margin: 0; }
.faq-trigger {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); width: 100%; min-height: 60px;
  padding: var(--s-2) 0;
  background: none; border: 0; text-align: left; cursor: pointer;
  font-size: 17px; font-weight: 500; line-height: 1.35; color: var(--text-strong);
}
.faq-trigger:hover { color: var(--black); }
.faq-sign { position: relative; width: 13px; height: 13px; flex: none; }
.faq-sign::before, .faq-sign::after {
  content: ""; position: absolute; background: var(--espresso); transition: opacity .16s ease;
}
.faq-sign::before { left: 0; right: 0; top: 6px; height: 1px; }
.faq-sign::after  { top: 0; bottom: 0; left: 6px; width: 1px; }
.faq-trigger[aria-expanded="true"] .faq-sign::after { opacity: 0; }
.faq-panel { padding-bottom: var(--s-4); font-size: 15.5px; line-height: 1.7; color: var(--text-muted); max-width: 62ch; }
.faq-panel[hidden] { display: none; }

/* --------------------------------------------------------------------------
   14. SIGNING AGENTS — its own section, on the third paper.

   It used to be a footnote inside the FAQ band. It is now a full section on
   beige, the one surface the page had not used, which lets the secondary
   audience have its own field without adding a fourth dark stretch after
   the photo band and the resolution.

   Copper on beige only measures 1.7:1, so the eyebrow here is espresso and
   copper is left to the rules — the reverse of the coverage panel, where the
   ground is light enough for --copper-ink to clear AA.
   -------------------------------------------------------------------------- */
.agents {
  background: var(--beige);
  padding-block: var(--s-8);
  border-top: 1px solid rgba(189, 149, 119, 0.4);
}
.agents__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  gap: var(--s-7);
  align-items: start;
}
.agents .tick { background: var(--copper-ink); opacity: .8; }
.agents .eyebrow { margin-top: var(--s-1); }
.agents__head {
  margin-top: var(--s-4);
  font-size: clamp(32px, 3.9vw, 56px);
  color: var(--text-strong);
  max-width: 13ch;
}
.agents__intro {
  margin-top: var(--s-4);
  font-size: clamp(16.5px, 1.4vw, 19px);
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 42ch;
}

/* The right column starts level with the headline rather than the eyebrow, so
   the two columns read as a spread instead of two stacked lists. */
.agents__points {
  margin-top: 96px;
  border-top: 1px solid rgba(36, 26, 18, 0.2);
}
.agents__points li { padding: var(--s-3) 0; border-bottom: 1px solid rgba(36, 26, 18, 0.2); }
.agents__point {
  font-size: 17px; font-weight: 600; line-height: 1.35;
  letter-spacing: -0.005em; color: var(--text-strong);
}
.agents__detail {
  margin-top: 7px; font-size: 14.5px; line-height: 1.6;
  color: var(--text-muted); max-width: 44ch;
}

/* ---- the button ---------------------------------------------------------- */
/* Espresso fill on beige is 11.6:1. The copper frame around it is a printed
   register mark, not the thing that makes the control readable — which is why
   copper at 1.7:1 on this ground is not a contrast problem here. */
.btn-premium {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 20px;
  min-height: 64px;
  margin-top: 56px;
  padding: 0 46px;
  background: var(--espresso);
  color: var(--cream);
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(244, 237, 233, 0.16);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.24em;
  line-height: 1;
  text-transform: uppercase;
  transition: background-color .22s ease;
}
.btn-premium__frame {
  position: absolute;
  inset: -13px;
  border: 1px solid var(--copper);
  border-radius: 3px;
  pointer-events: none;
  /* transform, not inset — the frame animates without touching layout */
  transition: transform .3s cubic-bezier(.2, .7, .3, 1), border-color .3s ease;
}
/* Two copper hairlines running out of the frame, left and right: the register
   mark that the rest of the page draws as a bare tick. */
.btn-premium__frame::before,
.btn-premium__frame::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 26px;
  height: 1px;
  background: var(--copper);
}
.btn-premium__frame::before { right: 100%; margin-right: 10px; }
.btn-premium__frame::after  { left: 100%;  margin-left: 10px; }

.btn-premium__arrow { display: inline-block; transition: transform .22s ease; }
.btn-premium:hover { background: var(--black); }
.btn-premium:hover .btn-premium__frame { transform: scale(1.045); }
.btn-premium:hover .btn-premium__arrow { transform: translateX(4px); }
/* The focus ring clears the copper frame instead of landing inside it. */
.btn-premium:focus-visible { outline-offset: 17px; }

.agents__note {
  margin-top: var(--s-5);
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 46ch;
}

@media (max-width: 980px) {
  .agents__inner { grid-template-columns: 1fr; gap: var(--s-5); }
  .agents__head { max-width: 18ch; }
  .agents__points { margin-top: var(--s-2); }
}
@media (max-width: 640px) {
  .agents__head { font-size: 34px; max-width: 100%; }
  .btn-premium { width: 100%; justify-content: center; margin-top: 48px; }
  /* the outrigger hairlines would push past the viewport once the button is full-bleed */
  .btn-premium__frame::before, .btn-premium__frame::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .btn-premium:hover .btn-premium__frame,
  .btn-premium:hover .btn-premium__arrow { transform: none; }
}

/* --------------------------------------------------------------------------
   15. CLOSING — dark CTA
   -------------------------------------------------------------------------- */
.closing { background: var(--ink); color: var(--on-dark); padding-block: var(--s-9); }
.closing__grid {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  gap: var(--s-7); align-items: end;
}
.closing .statement { font-size: clamp(34px, 4.4vw, 62px); color: var(--cream); max-width: 16ch; }
.closing .tick { background: var(--copper); }
.closing__actions { margin-top: var(--s-5); }
.closing__aside { padding-left: var(--s-5); border-left: 1px solid var(--rule-on-dark); }

/* --------------------------------------------------------------------------
   16. Footer — light, restrained
   -------------------------------------------------------------------------- */
.site-footer { background: var(--cream); border-top: 1px solid var(--rule-espresso); }
.site-footer .wrap { padding-block: var(--s-5) var(--s-4); }
.footer-top { display: flex; flex-wrap: wrap; gap: var(--s-5); justify-content: space-between; align-items: flex-start; }
.site-footer .brand__mark { background: none; padding: 0; }
.site-footer .brand__name { color: var(--text-strong); }
.site-footer .brand__tag { color: var(--text-muted); }
.footer-links { display: flex; flex-wrap: wrap; gap: 4px var(--s-5); }
.footer-links a {
  font-size: 14px; color: var(--text);
  display: inline-flex; align-items: center; min-height: 44px;
  border-bottom: 1px solid transparent;
}
.footer-links a:hover { border-bottom-color: var(--copper); }
.footer-bottom {
  margin-top: var(--s-4); padding-top: var(--s-3);
  border-top: 1px solid var(--rule-espresso);
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); justify-content: space-between;
  font-size: 13px; color: var(--text-muted);
}

/* Placeholder tokens */
.ph {
  display: inline-block;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  color: #5C3A1F; background: rgba(189, 149, 119, 0.22);
  border-radius: 2px; padding: 2px 6px;
}
.ph--copy {
  font-size: inherit; font-weight: 600; letter-spacing: normal;
  padding: 3px 8px; border: 1px dashed var(--rule-espresso-strong);
}

/* --------------------------------------------------------------------------
   17. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  :root { --s-9: 128px; --s-8: 96px; --s-7: 72px; }

  .site-header .wrap { min-height: 70px; gap: var(--s-2); }
  .nav-toggle { display: flex; }
  .nav {
    order: 3; width: 100%; margin: 0;
    flex-direction: column; align-items: stretch; gap: 0; padding-bottom: var(--s-2);
  }
  .nav[data-open="false"] { display: none; }
  .nav a { padding: 14px 0; border-bottom: 1px solid rgba(244,237,233,.14); }
  .nav a:hover { border-bottom-color: rgba(244,237,233,.14); }
  .header-actions { order: 2; margin-left: 0; }

  .faq__grid { grid-template-columns: 1fr; gap: var(--s-5); }
  .resolution__inner { grid-template-columns: 1fr; gap: var(--s-6); align-items: start; }
  .reroute__label { max-width: 46ch; }
  .closing__grid { grid-template-columns: 1fr; }
  .closing__aside { padding-left: 0; border-left: 0; padding-top: var(--s-4); border-top: 1px solid var(--rule-on-dark); }
}

@media (max-width: 900px) {
  .o3-hero { min-height: 0; }              /* content-driven once stacked */
  /* Once the type spans the full width it reaches the bright right-hand side
     of the photograph, where the horizontal scrim has deliberately fallen
     away. Below this breakpoint the weight goes vertical instead — measured,
     not assumed: the horizontal-only scrim put the support line at 3.13:1. */
  .o3-hero::after {
    background: linear-gradient(180deg,
      rgba(21,16,11,.58) 0%,
      rgba(21,16,11,.66) 25%,
      rgba(21,16,11,.86) 55%,
      rgba(21,16,11,.93) 100%);
  }
  .o3-hero__inner { padding-block: var(--s-8) var(--s-7); }
  .track__steps { grid-template-columns: 1fr; }
  .track__step { padding-right: 0; }
  .photo-band { min-height: 380px; }       /* 21:9 would be a letterbox strip here */
  .photo-band__notes { grid-template-columns: 1fr; gap: var(--s-3); max-width: 46ch; }
  .photo-band__notes > div + div { padding-top: var(--s-3); border-top: 1px solid rgba(244,237,233,.16); }
  .photo-band::after {
    /* the band carries a support paragraph now, and the muted tone measured
       4.17:1 against the printed page under the old weight */
    background: linear-gradient(180deg,
      rgba(21,16,11,.72) 0%,
      rgba(21,16,11,.86) 45%,
      rgba(21,16,11,.95) 100%);
  }
  .media--21x9 { aspect-ratio: 16 / 9; }
}

@media (max-width: 640px) {
  :root { --s-9: 88px; --s-8: 72px; --s-7: 56px; --s-6: 44px; --gutter: 20px; }

  /* Display type gets its own mobile sizes rather than scaling proportionally */
  .o3-hero h1 { font-size: 44px; max-width: 100%; }
  .track__lead { font-size: 30px; max-width: 100%; }
  .photo-band .statement { font-size: 32px; max-width: 100%; }
  .resolution .statement { font-size: 36px; max-width: 100%; }
  .closing .statement { font-size: 34px; max-width: 100%; }
  .phone-number { font-size: 30px; }

  .btn { width: 100%; }
  .header-actions .btn { width: auto; }
  .media--4x5 { aspect-ratio: 4 / 5; }
  .media__tag { right: var(--s-2); bottom: var(--s-2); }
}

@media (max-width: 380px) {
  .brand__mark { width: 34px; height: 34px; }
  .brand__name { font-size: 14px; }
  .header-actions .btn { padding: 0 14px; font-size: 10px; }
}

/* --------------------------------------------------------------------------
   18. Motion — one idea, transform/opacity only, never load-bearing
   -------------------------------------------------------------------------- */
/* The rule is drawn at full width by default. Only once JS has armed it does
   it start collapsed — so if the script or the observer never runs, the
   copper hairline is still there rather than silently missing. */
.tick[data-extend] { transition: transform .7s cubic-bezier(.2,.7,.3,1); }
.tick[data-extend].is-armed { transform: scaleX(0); }
.tick[data-extend].is-armed.is-in { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .tick[data-extend] { transform: scaleX(1); }
  .btn:hover .btn__arrow { transform: none; }
}

@media print { .nav-toggle { display: none; } }

/* --------------------------------------------------------------------------
   19. TRUSTED PARTNERS — hairlines only.

   S13 rules out cards, boxes, rounded containers and icons, so the row is held
   by a single copper rule and spacing. The five supplied marks arrive in three
   incompatible states — two white-on-transparent, two on opaque white, one
   usable — so they were normalised to one espresso set rather than dropped in
   as-is, which would have put white boxes on a cream band.

   Sizing is per-mark. Equalising the bounding boxes makes a stacked lockup
   (Lift) dwarf a wide wordmark (real); equalising ink mass over-corrects the
   other way. These pair a height cap with a width cap so each mark is bound by
   whichever constraint matches its shape — which is what a designer's eye does.
   -------------------------------------------------------------------------- */
.partners .eyebrow { margin-top: var(--s-1); }
.partners__lede {
  margin-top: var(--s-3);
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-muted);
  max-width: 52ch;
}
.partner-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6) var(--s-5);
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule-copper);
}
.partner-row li { display: flex; align-items: center; justify-content: center; }
.plogo {
  display: block; width: auto; height: auto;
  object-fit: contain;
  opacity: var(--plogo-opacity, .84);
  /* one scale factor keeps the per-mark tuning intact at every width */
  --k: 1;
}
.plogo--rise       { max-height: calc(62px * var(--k)); max-width: calc(135px * var(--k)); }
.plogo--real       { max-height: calc(44px * var(--k)); max-width: calc(140px * var(--k)); }
.plogo--lift       { max-height: calc(66px * var(--k)); max-width: calc(152px * var(--k)); }
.plogo--wonderland { max-height: calc(52px * var(--k)); max-width: calc(185px * var(--k)); }
.plogo--socal      { max-height: calc(50px * var(--k)); max-width: calc(148px * var(--k)); }

@media (max-width: 900px) {
  .partner-row { justify-content: flex-start; gap: var(--s-5) var(--s-6); }
}
@media (max-width: 640px) {
  /* flex-wrap packed these raggedly; a two-column grid with the fifth mark
     spanning both keeps the row even without introducing any container */
  .partner-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-5) var(--s-4);
    justify-items: center;
  }
  .partner-row li:last-child { grid-column: 1 / -1; }
  .plogo { --k: .78; }
}