/* ==========================================================================
   INK & STAMP — Design Concept Option 02 "Buyer-Led Editorial"
   Organised around the escrow officer's decision sequence:
     1 Coverage (typography) · 2 Placement (form surface)
     3 Order visibility (sequence rail) · 4 Trust (editorial cards)
   Static design-review prototype. No build step, no network dependency.
   ========================================================================== */

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

  /* Accessible copper steps. #BD9577 is 1.9-2.7:1 on light surfaces, so it
     stays decorative (rules, fills, large marks) and text uses these. */
  --copper-display: #96683F;  /* large display text — clears 3:1 */
  --copper-text:    #7A5233;  /* small text/labels — clears 4.5:1 */

  --text-strong: #000000;
  --text-body:   #241A12;
  --text-muted:  #5A4A40;
  --on-dark:         #F4EDE9;
  --on-dark-muted:   #B9AAA0;

  --rule:         rgba(36, 26, 18, 0.14);
  --rule-strong:  rgba(36, 26, 18, 0.30);
  --rule-copper:  rgba(189, 149, 119, 0.55);
  --rule-on-dark: rgba(244, 237, 233, 0.18);

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

  --r-btn: 8px;
  --r-surface: 14px;
  --r-pill: 999px;

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

  --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;

  --shadow-surface: 0 2px 6px rgba(36, 26, 18, 0.05), 0 24px 60px rgba(36, 26, 18, 0.10);
  --shadow-soft:    0 1px 2px rgba(36, 26, 18, 0.04), 0 10px 28px rgba(36, 26, 18, 0.06);

  --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-body);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

/* Zero every user-agent default used for layout here */
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-visible {
  outline: 3px solid var(--copper-text);
  outline-offset: 3px;
  border-radius: 3px;
}
.on-dark :focus-visible, .o2-photo :focus-visible { outline-color: var(--copper); }

.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: 200;
  transform: translateY(-200%);
  background: var(--espresso); color: var(--cream);
  padding: 12px 20px; border-radius: var(--r-btn);
  font-size: 14px; font-weight: 600;
}
.skip-link:focus { transform: translateY(0); }

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

.band { padding-block: var(--s-8); }
.band--tight { padding-block: var(--s-7); }

.bg-white  { background: var(--white); }
.bg-cream  { background: var(--cream); }
.bg-beige  { background: var(--beige); }
.bg-espresso { background: var(--espresso); color: var(--on-dark); }

/* --------------------------------------------------------------------------
   4. Type
   -------------------------------------------------------------------------- */
.eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--copper-text);
}
.on-dark .eyebrow, .bg-espresso .eyebrow { color: var(--copper); }

/* Editorial question headings — the spine of the page */
.q-head {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.015em;
}
.display {
  font-family: var(--font-display);
  line-height: 1.03;
  letter-spacing: -0.02em;
}
.prose {
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-muted);
  max-width: 56ch;
}
.micro { font-size: 13px; line-height: 1.45; color: var(--text-muted); }

/* Section opener: eyebrow + question, used across all four buyer questions */
.q-open { margin-bottom: var(--s-6); }
.q-open .eyebrow { display: block; margin-bottom: var(--s-2); }

/* --------------------------------------------------------------------------
   5. Prototype banner
   -------------------------------------------------------------------------- */
/* The review bar now lives in ../review-bar.css — it is review scaffolding,
   not part of this concept, so it is deliberately not styled here. */

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 28px;
  border: 1.5px solid transparent;
  border-radius: var(--r-btn);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease,
              border-color .18s ease, transform .18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.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-strong); }
.btn--outline:hover { border-color: var(--espresso); background: rgba(36,26,18,.05); }

/* On the espresso band */
.btn--light { background: var(--cream); color: var(--espresso); border-color: var(--cream); }
.btn--light:hover { background: var(--white); border-color: var(--white); }
.btn--ghost-light { background: transparent; color: var(--cream); border-color: var(--rule-on-dark); }
.btn--ghost-light:hover { border-color: var(--copper); color: var(--copper); }

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

/* --------------------------------------------------------------------------
   7. Header
   -------------------------------------------------------------------------- */
.site-header {
  position: relative;
  background: var(--cream);
  border-bottom: 1px solid rgba(122,82,51,.24);
}
.site-header::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: max(var(--gutter), calc(50% - 636px));
  width: 48px;
  height: 1px;
  background: var(--copper);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 28px;
  max-width: 1320px;
  min-height: 84px;
  flex-wrap: wrap;
}

.brand { display: flex; align-items: center; gap: 12px; min-height: 48px; flex: none; }
.brand__mark { width: 42px; height: 42px; flex: none; }
.brand__name {
  font-size: 16px; font-weight: 700; letter-spacing: 0.09em;
  color: var(--text-strong); line-height: 1;
}
.brand__tag {
  display: block;
  font-size: 9px; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--copper-text); margin-top: 4px;
}

.nav { display: flex; align-items: center; gap: 30px; margin-inline: auto; }
.nav a {
  font-size: 14px; font-weight: 500; color: var(--text-body);
  padding: 4px 0; border-bottom: 2px solid transparent;
  transition: border-color .7s cubic-bezier(.32,.72,0,1), color .7s cubic-bezier(.32,.72,0,1);
}
.nav a:hover { color: var(--text-strong); border-bottom-color: var(--copper); }
.nav-phone, .nav-account { display: none; }

.header-actions { display: flex; align-items: center; gap: 20px; flex: none; }

.signin, .nav-signin {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 15px; font-weight: 600; color: var(--text-strong);
  white-space: nowrap; border-bottom: 2px solid transparent;
}
.signin:hover, .nav-signin:hover { border-bottom-color: var(--copper); }
.nav-signin { display: none; }

.phone-link {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; white-space: nowrap;
  font-size: 15px; font-weight: 600; color: var(--text-strong);
  border-bottom: 2px solid transparent;
}
.phone-link svg { width: 15px; height: 15px; flex: none; color: var(--copper-text); }
.phone-link:hover { border-bottom-color: var(--copper); }

.header-actions .btn { min-height: 44px; padding: 0 18px; font-size: 12px; }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  margin-left: auto;
  background: rgba(255,255,255,.6);
  border: 1px solid var(--rule);
  border-radius: var(--r-btn);
  cursor: pointer;
}
.nav-toggle span { display: block; width: 18px; height: 2px; background: var(--text-strong); position: relative; transition: background-color .7s cubic-bezier(.32,.72,0,1); }
.nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--text-strong);
  transition: top .7s cubic-bezier(.32,.72,0,1), transform .7s cubic-bezier(.32,.72,0,1);
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after  { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

/* --------------------------------------------------------------------------
   8. HERO — certainty first. 55/45 asymmetry, image bleeds to the right edge.
   -------------------------------------------------------------------------- */
.o2-hero {
  background: var(--cream);
  display: grid;
  /* Three tracks: a gutter that mirrors the 1200px container, the editorial
     column, then the image bleeding to the right viewport edge. Track
     percentages resolve against the grid container, so the copy lines up
     with the header exactly — vw would be off by half a scrollbar. */
  grid-template-columns:
    minmax(var(--gutter), calc(50% - (var(--container) / 2) + var(--gutter)))
    minmax(0, min(calc(var(--container) * 0.55 - var(--gutter)), 55%))
    minmax(0, 1fr);
  align-items: stretch;
  border-bottom: 1px solid var(--rule);
}

.o2-hero__content {
  grid-column: 2;
  padding-right: var(--s-6);
  padding-block: var(--s-8);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.o2-hero__eyebrow { display: block; margin-bottom: var(--s-3); }

.o2-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(38px, 4.6vw, 66px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin-bottom: var(--s-3);
}
.o2-hero h1 .line-2 { display: block; color: var(--copper-display); }

.o2-hero__support {
  font-size: 19px;
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 34ch;
}

.o2-hero .btn-row { margin-top: var(--s-5); }
.btn--notary {
  background: rgba(255,255,255,.34);
  color: var(--espresso);
  border-color: rgba(36,26,18,.42);
  transition: background-color .7s cubic-bezier(.32,.72,0,1), border-color .7s cubic-bezier(.32,.72,0,1), transform .7s cubic-bezier(.32,.72,0,1);
}
.btn--notary svg { width: 18px; height: 18px; flex: none; transition: transform .7s cubic-bezier(.32,.72,0,1); }
.btn--notary:hover { background: var(--white); border-color: var(--copper-text); }
.btn--notary:hover svg { transform: translateX(3px); }

.hero-features {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr) minmax(0, .9fr);
  width: calc(100% + var(--s-6));
  max-width: none;
  margin-top: var(--s-6);
  padding-top: 42px;
  border-top: 1px solid var(--rule-copper);
}
.hero-feature {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  min-height: 81px;
  padding-inline: 24px;
}
.hero-feature:first-child { padding-left: 0; }
.hero-feature:last-child { padding-right: 0; }
.hero-feature + .hero-feature { border-left: 1px solid var(--rule-copper); }
.hero-feature__icon {
  display: block;
  width: 50px;
  height: 50px;
  object-fit: contain;
}
.hero-feature span { font-size: 15.5px; font-weight: 600; line-height: 1.4; letter-spacing: .045em; color: var(--text-strong); }

.o2-hero__media { grid-column: 3; position: relative; min-height: 560px; }
.o2-hero__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Hero source is portrait (1122x1402). In the tall desktop column it fills
     by width, so only a little top/bottom is trimmed and centre holds both
     faces and the signing. */
  object-position: 50% 50%;
}

/* --------------------------------------------------------------------------
   9. Q1 COVERAGE — approved editorial atlas composition
   -------------------------------------------------------------------------- */
#coverage.band { padding: 0; border-block: 1px solid var(--copper-text); }
.coverage-wrap { width: 100%; margin: 0; padding: 0; }
.coverage-layout {
  display: grid;
  grid-template-columns: clamp(126px, 9.33vw, 156px) minmax(420px, .853fr) minmax(540px, 1fr);
  grid-template-rows: clamp(640px, 44.5vw, 744px) minmax(96px, 1fr);
  column-gap: clamp(48px, 4.42vw, 74px);
  min-height: clamp(808px, 56.22vw, 940px);
  padding-right: clamp(48px, 5.26vw, 88px);
}

/* The supplied full still-life is deliberately held at its natural vertical
   framing; object-position isolates the notebook, pen, and folder in one
   documentary strip just as the approved art direction does. */
.coverage-artifact {
  grid-row: 1 / 3;
  position: relative;
  min-width: 0;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--espresso);
}
.coverage-artifact::after { content: ""; position: absolute; inset: 0; border-right: 1px solid rgba(36,26,18,.26); pointer-events: none; }
.coverage-artifact img { width: 100%; height: 100%; object-fit: cover; object-position: 43% 50%; }

.coverage-copy { align-self: start; margin-top: clamp(108px, 8.49vw, 142px); }
.coverage-open { margin-bottom: clamp(64px, 5.15vw, 86px); }
.coverage-open .eyebrow { display: block; margin: 0; }
.coverage-open__ornament {
  display: flex;
  align-items: center;
  width: 74px;
  height: 10px;
  margin: 28px 0 28px;
  border-top: 1px solid var(--copper);
}
.coverage-open__ornament::before,
.coverage-open__ornament::after { content: ""; flex: 1; height: 1px; background: var(--copper); }
.coverage-open__ornament i { width: 6px; height: 6px; margin-inline: 5px; background: var(--copper); transform: rotate(45deg); }
.coverage-open .q-head {
  max-width: 12ch;
  font-size: clamp(50px, 4.25vw, 71px);
  line-height: 1.03;
  letter-spacing: -.025em;
}
.coverage-copy .prose { max-width: 47ch; font-size: clamp(17px, 1.25vw, 21px); line-height: 1.7; }

.fifty-feature {
  position: relative;
  isolation: isolate;
  align-self: start;
  display: grid;
  aspect-ratio: 692 / 614;
  margin-top: clamp(76px, 6.1vw, 102px);
  place-items: center;
  overflow: hidden;
  background: #FCF9F6;
}
.fifty-feature__frame { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; fill: none; stroke: rgba(166,112,75,.62); stroke-width: 1.1; pointer-events: none; }
.fifty-feature__map {
  position: absolute;
  z-index: -1;
  width: 92%;
  height: auto;
  fill: url(#coverage-map-dots);
  stroke: rgba(189,149,119,.23);
  stroke-width: 2;
  stroke-linejoin: round;
}
.fifty-feature__map circle { fill: rgba(189,149,119,.54); }
.fifty-feature__content {
  display: grid;
  justify-items: center;
  width: 100%;
  max-width: 100%;
  padding: 64px 72px 48px;
  transform: translateY(12px);
}
.big-fifty__num {
  display: block;
  box-sizing: border-box;
  max-width: 100%;
  padding-inline: .08em;
  font-family: var(--font-display);
  font-size: clamp(220px, 19vw, 318px);
  font-variant-numeric: lining-nums;
  line-height: .82;
  letter-spacing: -.06em;
  white-space: nowrap;
  background: linear-gradient(112deg, #6B3F26 3%, #BB7D4B 31%, #754124 62%, #D29A64 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.big-fifty__word { margin-top: 34px; font-family: var(--font-display); font-size: clamp(44px, 3.9vw, 64px); line-height: 1; letter-spacing: .30em; text-transform: uppercase; color: var(--black); }
.fifty-feature__ornament { display: flex; align-items: center; justify-content: center; width: 200px; height: 12px; margin-top: 29px; border-top: 1px solid var(--copper); }
.fifty-feature__ornament::before, .fifty-feature__ornament::after { content: ""; width: 15px; height: 1px; background: var(--copper); }
.fifty-feature__ornament i { width: 7px; height: 7px; margin-inline: 7px; background: var(--copper); transform: rotate(45deg); }

/* Low-priority state index. The fixed 19-column rhythm reproduces the wide,
   evenly spaced rows in the approved desktop composition. */
.state-texture {
  grid-column: 2 / -1;
  display: grid;
  grid-template-columns: repeat(19, minmax(0, 1fr));
  align-self: start;
  gap: 20px 0;
  margin: 22px 0 0;
}
.state-texture li { position: relative; font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: .11em; color: #68574C; }
.state-texture li::after { content: "•"; position: absolute; right: 18px; color: #806657; }
.state-texture li:nth-child(19n)::after, .state-texture li:last-child::after { content: none; }

/* --------------------------------------------------------------------------
   10. Q2 PLACEMENT — grammar: form / interaction surface
   -------------------------------------------------------------------------- */
#placement {
  position: relative;
  overflow: hidden;
}
#placement > .wrap {
  position: relative;
  z-index: 1;
}
.placement-monogram {
  position: absolute;
  z-index: 0;
  left: -90px;
  bottom: -150px;
  width: 500px;
  pointer-events: none;
  opacity: .32;
  transform: rotate(-3deg);
}
.placement-monogram img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
}
.placement-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: var(--s-7);
  align-items: start;
}

/* Approved Q2 left-column treatment. The form surface remains on its original
   selectors so this editorial pass cannot restyle the right-hand interaction. */
.placement-copy {
  min-width: 0;
  padding-top: 4px;
}
.placement-copy .q-open {
  margin-bottom: var(--s-5);
}
.placement-copy .q-open .eyebrow {
  margin-bottom: 0;
}
.placement-copy__rule {
  display: block;
  width: 68px;
  height: 1px;
  margin: 16px 0 24px;
  background: var(--copper);
}
.placement-copy .q-head {
  max-width: 11ch;
  font-size: clamp(40px, 4.2vw, 56px);
  line-height: 1.02;
  text-wrap: balance;
}
.placement-copy .q-head > span { display: block; }
.placement-copy .prose {
  max-width: 34ch;
  font-size: 17px;
  line-height: 1.7;
  text-wrap: pretty;
}
.placement-support {
  display: flex;
  align-items: center;
  gap: 16px;
  width: min(100%, 264px);
  min-height: 76px;
  margin-top: var(--s-4);
  padding: 10px 16px 10px 10px;
  background: rgba(255,255,255,.38);
  border-radius: var(--r-surface);
}
.placement-support__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.66);
  color: var(--copper-text);
}
.placement-support__icon svg { width: 24px; height: 24px; }
.placement-support__copy {
  display: grid;
  gap: 2px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--text-muted);
}
.placement-support__copy a {
  color: var(--copper-text);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .03em;
}
.form-surface {
  background: var(--white);
  border-radius: var(--r-surface);
  box-shadow: var(--shadow-surface);
  padding: var(--s-5);
}

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2) var(--s-3); }
.field { display: flex; flex-direction: column; gap: 7px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 13px; font-weight: 600; color: var(--text-strong); }
.field input, .field select, .field textarea {
  min-height: 48px;
  padding: 0 14px;
  background: var(--white);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-btn);
  font-size: 15px;
  width: 100%;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.field textarea { padding: 12px 14px; min-height: 86px; resize: vertical; font-family: inherit; }
.field input::placeholder, .field textarea::placeholder { color: #9A8B82; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--copper-text);
  box-shadow: 0 0 0 3px rgba(189,149,119,.28);
  outline: none;
}
.field select {
  appearance: none; cursor: pointer; padding-right: 40px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237A5233' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

/* Segmented "Already have a signing ready?" control */
.segmented { grid-column: 1 / -1; margin-top: var(--s-2); }
.segmented__q { font-size: 14px; font-weight: 600; color: var(--text-strong); margin-bottom: 10px; }
.segmented__set { display: flex; gap: 10px; }
.segmented__set label {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 18px;
  border: 1.5px solid var(--rule-strong);
  border-radius: var(--r-btn);
  font-size: 14px; font-weight: 600;
  cursor: pointer;
  background: var(--white);
  /* Only the hover border animates. Fill and text must flip together and
     instantly — transitioning them leaves a window of light-on-light text. */
  transition: border-color .16s ease;
}
.segmented__set input { position: absolute; opacity: 0; pointer-events: none; }
.segmented__set label:hover { border-color: var(--copper); }
.segmented__set label:has(input:checked) {
  background: var(--espresso);
  border-color: var(--espresso);
  color: var(--cream);
}
/* Fallback for engines without :has() — JS mirrors the state onto the label */
.segmented__set label[data-checked="true"] {
  background: var(--espresso);
  border-color: var(--espresso);
  color: var(--cream);
}
.segmented__set input:focus-visible + span { outline: 3px solid var(--copper-text); outline-offset: 4px; }

.signing-block {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2) var(--s-3);
  margin-top: var(--s-2);
  padding-top: var(--s-3);
  border-top: 1px solid var(--rule);
}
.signing-block[hidden] { display: none; }

.block-label {
  grid-column: 1 / -1;
  display: flex; align-items: baseline; gap: 10px;
}
.block-label h3 {
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-strong);
}
.block-label .tag {
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--copper-text); background: rgba(189,149,119,.2);
  border-radius: var(--r-pill); padding: 3px 9px;
}

.form-surface .btn { width: 100%; margin-top: var(--s-3); }

.form-note {
  margin-top: var(--s-2);
  font-size: 13px; font-weight: 600;
  color: var(--copper-text);
  background: rgba(189,149,119,.18);
  border: 1px dashed rgba(122,82,51,.45);
  border-radius: var(--r-btn);
  padding: 10px 14px;
}
.form-note[hidden] { display: none; }

/* --------------------------------------------------------------------------
   11. Q3 ORDER VISIBILITY — grammar: sequence rail
   -------------------------------------------------------------------------- */
#order {
  position: relative;
  overflow: hidden;
}
#order > .wrap {
  position: relative;
  z-index: 1;
}
.order-monogram {
  position: absolute;
  z-index: 0;
  top: 8%;
  right: -56px;
  width: clamp(280px, 24vw, 420px);
  aspect-ratio: 1;
  pointer-events: none;
  opacity: .16;
  background: var(--beige);
  mix-blend-mode: multiply;
  transform: rotate(-5deg);
  -webkit-mask-image: url("assets/question-three-monogram.webp");
  mask-image: url("assets/question-three-monogram.webp");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.order-monogram img {
  display: none;
}
.rail {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
  margin-top: var(--s-6);
}
.rail__step { position: relative; padding-top: var(--s-4); }
/* the rail itself */
.rail__step::before {
  content: "";
  position: absolute;
  top: 5px; left: 0; right: 0;
  height: 1px;
  background: var(--rule-strong);
}
.rail__step::after {
  content: "";
  position: absolute;
  top: 1px; left: 0;
  width: 9px; height: 9px;
  border-radius: var(--r-pill);
  background: var(--copper);
}
.rail__num {
  font-family: var(--font-display);
  font-size: clamp(38px, 4vw, 54px);
  line-height: 1;
  color: var(--espresso);
  letter-spacing: -0.02em;
  display: block;
  margin-bottom: 10px;
}
.rail__label {
  font-size: 12px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--copper-text);
  display: block; margin-bottom: 10px;
}
.rail__copy { font-size: 14px; line-height: 1.55; color: var(--text-muted); }

/* --------------------------------------------------------------------------
   12. Documentary photo break
   -------------------------------------------------------------------------- */
.o2-photo {
  position: relative;
  min-height: 440px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--espresso);
}
.o2-photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
}
/* Scrim heavy enough that the line clears AA even over the lightest pixels */
.o2-photo::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg,
    rgba(36,26,18,.88) 0%,
    rgba(36,26,18,.80) 42%,
    rgba(36,26,18,.42) 72%,
    rgba(36,26,18,.24) 100%);
}
.o2-photo .wrap { position: relative; z-index: 1; }
.o2-photo__line {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 46px);
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--cream);
  max-width: 20ch;
}
.o2-photo__line span { display: block; color: var(--copper); }

/* --------------------------------------------------------------------------
   13. Q4 TRUST — approved editorial card composition
   -------------------------------------------------------------------------- */
#trust {
  position: relative;
  overflow: hidden;
}
#trust.band { padding-block: 80px 48px; }
#trust > .wrap {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  padding-inline: 64px;
}
.trust-layout {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1fr);
  gap: 96px;
  align-items: start;
}
.trust-copy {
  position: relative;
  z-index: 2;
  padding-top: 28px;
}
.trust-copy .q-open { margin-bottom: var(--s-4); }
.trust-copy .q-open .eyebrow { display: block; margin-bottom: 0; }
.trust-copy__rule {
  display: block;
  width: 72px;
  height: 2px;
  margin: 24px 0 32px;
  background: var(--copper);
}
.trust-copy .q-head {
  max-width: 12ch;
  font-size: clamp(44px, 4.4vw, 64px);
  line-height: 1.02;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.trust-copy .q-head > span { display: block; }
.trust-copy .prose {
  max-width: 46ch;
  margin-top: var(--s-4);
  font-size: clamp(16px, 1.15vw, 19px);
  line-height: 1.7;
  text-wrap: pretty;
}
.trust-copy__art {
  position: absolute;
  z-index: 0;
  left: -300px;
  bottom: -70px;
  width: 900px;
  height: 520px;
  overflow: hidden;
  pointer-events: none;
}
.trust-copy__art img {
  position: relative;
  left: -76px;
  width: 1000px;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 55%;
  transform: scaleX(-1);
  opacity: .24;
  mix-blend-mode: multiply;
}
.trust-cards {
  display: grid;
  gap: 16px;
}
.trust-card {
  position: relative;
  display: grid;
  grid-template-columns: 124px minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  min-height: 154px;
  padding: 16px 20px 16px 24px;
  overflow: hidden;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(189,149,119,.52);
  border-radius: var(--r-surface);
  box-shadow: 0 2px 5px rgba(36,26,18,.04), 0 12px 28px rgba(36,26,18,.07);
}
.trust-card::after {
  content: "";
  position: absolute;
  top: 14px;
  right: 0;
  bottom: 14px;
  width: 6px;
  border-radius: 6px 0 0 6px;
  background: var(--copper);
}
.trust-card__icon {
  display: grid;
  place-items: center;
  width: 124px;
  height: 124px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.trust-card__icon-img {
  display: block;
  width: 132%;
  height: 132%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  mix-blend-mode: multiply;
}
.trust-card__content {
  display: grid;
  gap: 10px;
  min-width: 0;
  align-content: center;
}
.trust-card__label {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  padding: 6px 12px 5px;
  border-radius: 4px;
  background: var(--copper);
  color: var(--white);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2em;
  line-height: 1.1;
  text-transform: uppercase;
  white-space: nowrap;
}
.trust-card__body {
  max-width: 30ch;
  font-size: clamp(16px, 1.2vw, 20px);
  line-height: 1.55;
  color: var(--text-body);
  text-wrap: pretty;
}
/* --------------------------------------------------------------------------
   14. Secondary notary band — dark editorial invitation
   -------------------------------------------------------------------------- */
.notary-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: 112px;
  color: var(--on-dark);
  background-color: var(--espresso);
  background-image:
    radial-gradient(circle at 88% -18%, rgba(189,149,119,.16), transparent 34%),
    radial-gradient(circle at 8% 118%, rgba(150,104,63,.12), transparent 38%),
    linear-gradient(118deg, rgba(255,255,255,.018), transparent 34%, rgba(0,0,0,.13) 74%, rgba(255,255,255,.012));
  border-block: 1px solid rgba(189,149,119,.22);
}
.notary-section::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: .28;
  background-image:
    repeating-linear-gradient(108deg, rgba(244,237,233,.018) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(18deg, rgba(0,0,0,.026) 0 1px, transparent 1px 9px);
}
.notary-section > .wrap { position: relative; z-index: 1; }
.notary-section__seal {
  position: absolute;
  z-index: 0;
  top: -238px;
  right: -152px;
  width: 540px;
  height: auto;
  max-width: none;
  opacity: .10;
  transform: rotate(7deg);
  pointer-events: none;
}
.notary-band {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.18fr) minmax(280px, .92fr);
  gap: clamp(36px, 4vw, 64px);
  align-items: center;
}
.notary-band__eyebrow-row {
  display: flex;
  align-items: center;
  gap: 24px;
}
.notary-band__eyebrow-row .eyebrow { color: var(--copper); }
.notary-band__eyebrow-rule {
  width: 54px;
  height: 1px;
  flex: none;
  background: var(--copper);
}
.notary-band h2 {
  font-family: var(--font-display);
  max-width: 8.7ch;
  margin-top: 30px;
  font-size: clamp(46px, 4.4vw, 68px);
  line-height: 1.03;
  letter-spacing: -.018em;
  color: var(--white);
  text-wrap: balance;
}
.notary-band__copy {
  display: flex;
  align-items: center;
  min-height: 228px;
  padding-left: clamp(36px, 4vw, 58px);
  border-left: 1px solid rgba(189,149,119,.76);
}
.notary-band__copy p {
  max-width: 30ch;
  font-size: clamp(18px, 1.55vw, 22px);
  line-height: 1.72;
  color: var(--on-dark);
  text-wrap: pretty;
}
.notary-band__action {
  display: flex;
  justify-content: flex-end;
}
.notary-cta {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 20px;
  width: 100%;
  min-height: 104px;
  padding: 24px 28px;
  border: 1px solid var(--copper);
  border-radius: 8px;
  color: var(--copper);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .12em;
  text-transform: uppercase;
  box-shadow: inset 0 0 0 1px rgba(189,149,119,.08), 0 18px 48px rgba(0,0,0,.16);
  transition: color .25s ease, background-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.notary-cta:hover {
  color: var(--espresso);
  background: var(--copper);
  box-shadow: 0 20px 54px rgba(0,0,0,.25), 0 0 30px rgba(189,149,119,.12);
  transform: translateY(-2px);
}
.notary-cta:active { transform: translateY(0); }
.notary-cta:focus-visible { outline: 2px solid var(--cream); outline-offset: 4px; }
.notary-cta__nib { width: 34px; height: 34px; }
.notary-cta__arrow { width: 24px; height: 24px; justify-self: end; }
.notary-cta span { text-align: center; white-space: nowrap; }

/* --------------------------------------------------------------------------
   15. FAQ — concise
   -------------------------------------------------------------------------- */
/* Editorial: the same copper-hairline grammar as the trust principles, in a
   single measured column rather than a card grid. */
.faq-list { margin-top: var(--s-5); max-width: 78ch; }
.faq-item { border-top: 1px solid var(--rule-copper); }
.faq-item:last-child { border-bottom: 1px solid var(--rule-copper); }
.faq-item__q { margin: 0; }

.faq-trigger {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-5);
  width: 100%;
  min-height: 64px;
  padding: var(--s-3) 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.008em;
  color: var(--text-strong);
}
.faq-trigger:hover { color: var(--black); }

.faq-sign { position: relative; width: 14px; height: 14px; flex: none; align-self: center; }
.faq-sign::before, .faq-sign::after {
  content: ""; position: absolute; background: var(--copper-text);
  transition: opacity .16s ease;
}
.faq-sign::before { left: 0; right: 0; top: 6px; height: 1.5px; }
.faq-sign::after  { top: 0; bottom: 0; left: 6px; width: 1.5px; }
.faq-trigger[aria-expanded="true"] .faq-sign::after { opacity: 0; }

.faq-panel {
  padding-bottom: var(--s-4);
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 62ch;
}
.faq-panel[hidden] { display: none; }

/* --------------------------------------------------------------------------
   16. Closing conversion — the one full-width espresso statement
   -------------------------------------------------------------------------- */
.closing {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--s-7);
  align-items: end;
}
.closing h2 {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.2vw, 58px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--cream);
  margin-top: var(--s-3);
}
.closing p { color: var(--on-dark-muted); font-size: 17px; line-height: 1.6; max-width: 46ch; margin-top: var(--s-3); }
.closing .btn-row { margin-top: var(--s-5); }

.closing__aside {
  border-left: 1px solid var(--rule-on-dark);
  padding-left: var(--s-5);
}
.closing__aside .eyebrow { display: block; margin-bottom: var(--s-2); }
.phone-big {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 48px;
  font-family: var(--font-display);
  font-size: clamp(30px, 3vw, 40px);
  line-height: 1.05;
  color: var(--copper);
  letter-spacing: -0.01em;
}
.phone-big svg { width: 22px; height: 22px; flex: none; }
.phone-big:hover { color: var(--cream); }
.closing__aside .btn { margin-top: var(--s-3); }

/* --------------------------------------------------------------------------
   17. Footer — restrained
   -------------------------------------------------------------------------- */
.site-footer { background: var(--cream); border-top: 1px solid var(--rule); }
.site-footer .wrap { padding-block: var(--s-6) var(--s-4); }
.footer-top {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
  justify-content: space-between;
  align-items: flex-start;
}
.footer-links { display: flex; flex-wrap: wrap; gap: 4px var(--s-5); }
.footer-links a {
  font-size: 15px; color: var(--text-body);
  /* Standalone nav links, so they carry a full tap target */
  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-5);
  padding-top: var(--s-3);
  border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4);
  justify-content: space-between;
  font-size: 13px; color: var(--text-muted);
}

/* Placeholder chip, matching Option 01's convention */
.ph {
  display: inline-block;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  color: #6B4526;
  background: rgba(189,149,119,.20);
  border-radius: 4px;
  padding: 2px 6px;
}
.ph--copy {
  font-size: inherit; font-weight: 600; letter-spacing: normal;
  padding: 3px 8px; border: 1px dashed rgba(122,82,51,.5);
}

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

  .hero-features { grid-template-columns: minmax(0, .95fr) minmax(0, 1.3fr) minmax(0, .75fr); }
  .hero-feature { grid-template-columns: 47px minmax(0, 1fr); gap: 14px; padding-inline: 16px; }
  .hero-feature__icon { width: 47px; height: 47px; }
  .hero-feature span { font-size: 14.5px; }

  /* Nav collapses here: brand + links + Sign In + phone + CTA stop fitting */
  .site-header .wrap { min-height: 72px; 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, .nav-signin {
    font-size: 15px; padding: 14px 0; min-height: 44px;
    display: flex; align-items: center;
    border-bottom: 1px solid var(--rule);
  }
  .nav a:hover { border-bottom-color: var(--rule); }
  .nav-signin { display: flex; }
  .nav-phone { gap: 8px; }
  .nav-phone svg { width: 16px; height: 16px; color: var(--copper-text); }
  .nav-account {
    justify-content: center;
    min-height: 48px !important;
    margin-top: 12px;
    padding-inline: 16px !important;
    background: var(--espresso);
    color: var(--cream) !important;
    border: 1px solid var(--espresso) !important;
    border-radius: var(--r-btn);
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: .07em;
    text-transform: uppercase;
  }
  .header-actions { order: 2; margin-left: 0; }
  .header-actions .signin { display: none; }

  .coverage-layout {
    grid-template-columns: 86px minmax(310px, .94fr) minmax(390px, 1.06fr);
    grid-template-rows: 560px 104px;
    column-gap: 32px;
    min-height: 664px;
    padding-right: 44px;
  }
  .coverage-copy { margin-top: 72px; }
  .fifty-feature { min-height: 0; margin-top: 56px; }
  .fifty-feature__content { padding: 40px 48px 32px; transform: translateY(4px); }
  .placement-layout, .trust-layout { gap: var(--s-5); }
  .placement-monogram { left: -82px; bottom: -112px; width: 390px; opacity: .26; }
  #trust > .wrap { max-width: none; padding-inline: 44px; }
  .trust-copy { padding-top: 24px; }
  .trust-copy__art { left: -240px; bottom: -50px; width: 720px; height: 420px; }
  .trust-copy__art img { left: -70px; width: 900px; }
  .trust-card {
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 20px;
    min-height: 168px;
    padding: 16px 22px 16px 24px;
  }
  .trust-card__icon { width: 104px; height: 104px; }
}

@media (max-width: 900px) {
  .o2-hero { grid-template-columns: 1fr; }
  .o2-hero__content {
    grid-column: 1;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
    padding-block: var(--s-7) var(--s-6);
    max-width: var(--container);
    margin-inline: auto;
    width: 100%;
  }
  /* Stacked: 16/10 would slice a portrait source to a letterbox strip, so the
     frame goes to 4/3 and sits slightly high to hold both faces and the pens. */
  .o2-hero__media { grid-column: 1; min-height: 0; aspect-ratio: 4 / 3; }
  .o2-hero__media img { position: static; object-position: 50% 45%; }
  .hero-features { width: 100%; max-width: 636px; }

  .coverage-layout, .placement-layout, .trust-layout, .closing {
    grid-template-columns: 1fr;
  }
  .placement-monogram { left: -72px; bottom: -92px; width: 340px; opacity: .24; }
  .trust-layout { gap: var(--s-6); }
  #trust.band { padding-block: var(--s-6) var(--s-5); }
  .trust-copy { max-width: 720px; }
  .trust-copy__art { left: -220px; bottom: -42px; width: 700px; height: 410px; }
  .trust-copy__art img { left: -70px; width: 860px; }
  .order-monogram { top: 12%; right: -38px; width: 300px; opacity: .12; }
  .trust-card { min-height: 168px; }
  .coverage-layout {
    grid-template-rows: auto;
    gap: 0;
    min-height: 0;
    padding: var(--s-7) var(--gutter) var(--s-6);
  }
  .coverage-artifact { display: none; }
  .coverage-copy { margin-top: 0; padding-block: 0; }
  .coverage-open { margin-bottom: var(--s-5); }
  .coverage-open .q-head { max-width: 13ch; }
  .coverage-copy .prose { max-width: 56ch; }
  .fifty-feature { width: min(100%, 650px); min-height: 0; margin: var(--s-6) 0 0; }
  .state-texture { grid-column: auto; grid-template-columns: repeat(10, minmax(0, 1fr)); width: 100%; gap: 18px 0; margin-top: var(--s-6); }
  .state-texture li::after { right: 12px; }
  .state-texture li:nth-child(19n)::after { content: "•"; }
  .closing__aside { border-left: 0; padding-left: 0; padding-top: var(--s-4); border-top: 1px solid var(--rule-on-dark); }

  .rail { grid-template-columns: repeat(2, 1fr); gap: var(--s-5) var(--s-4); }
  .faq-list { max-width: 100%; }
  .notary-section { padding-block: 88px; }
  .notary-section__seal { top: -170px; right: -118px; width: 430px; }
  .notary-band { grid-template-columns: 1fr; gap: 0; max-width: 720px; }
  .notary-band h2 { max-width: 10ch; }
  .notary-band__copy {
    min-height: 0;
    margin-top: 40px;
    padding: 34px 0 0;
    border-top: 1px solid rgba(189,149,119,.58);
    border-left: 0;
  }
  .notary-band__copy p { max-width: 42ch; }
  .notary-band__action { justify-content: flex-start; margin-top: 42px; }
  .notary-cta { max-width: 420px; }

  .o2-photo { min-height: 380px; }
  .o2-photo::after {
    background: linear-gradient(180deg,
      rgba(36,26,18,.62) 0%, rgba(36,26,18,.86) 100%);
  }
}

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

  /* On phones the frame goes square: near the source's own proportions, so
     both women, the documents and the embosser all stay in shot. */
  .o2-hero__media { aspect-ratio: 1 / 1; }
  .o2-hero__media img { object-position: 50% 50%; }

  .band { padding-block: var(--s-8); }
  #trust.band { padding-block: var(--s-5); }
  .btn { width: 100%; }
  .btn-row { gap: 12px; }
  .header-actions { display: none; }
  .hero-features { grid-template-columns: 1fr; margin-top: var(--s-5); padding-top: 30px; }
  .hero-feature { min-height: 78px; padding: 21px 0; }
  .hero-feature + .hero-feature { border-top: 1px solid var(--rule-copper); border-left: 0; }
  .hero-feature__icon { width: 47px; height: 47px; }
  .hero-feature span { font-size: 15px; }

  .notary-section { padding-block: 72px; }
  .notary-section__seal { top: -90px; right: -105px; width: 300px; opacity: .08; }
  .notary-band__eyebrow-row { gap: 16px; }
  .notary-band__eyebrow-rule { width: 38px; }
  .notary-band h2 { margin-top: 24px; font-size: clamp(42px, 13vw, 56px); }
  .notary-band__copy { margin-top: 32px; padding-top: 28px; }
  .notary-band__copy p { font-size: 18px; line-height: 1.65; }
  .notary-band__action { margin-top: 34px; }
  .notary-cta {
    grid-template-columns: 30px minmax(0, 1fr) 22px;
    gap: 14px;
    min-height: 88px;
    padding: 20px;
    font-size: 12px;
  }
  .notary-cta__nib { width: 30px; height: 30px; }
  .notary-cta__arrow { width: 22px; height: 22px; }

  .form-surface { padding: var(--s-3); }
  .form-grid, .signing-block { grid-template-columns: 1fr; }
  .segmented__set { flex-direction: column; }
  .placement-monogram { left: -58px; bottom: -62px; width: 260px; opacity: .20; }

  #trust > .wrap { padding-inline: 20px; }
  .trust-layout { gap: var(--s-5); }
  .trust-copy { padding-top: 0; }
  .trust-copy .q-head { font-size: 42px; }
  .trust-copy__rule { margin-block: 24px 32px; }
  .trust-copy .prose { margin-top: var(--s-4); font-size: 17px; }
  .trust-copy__art { left: -230px; bottom: -30px; width: 520px; height: 330px; opacity: .8; }
  .trust-copy__art img { left: -60px; width: 720px; }
  .order-monogram { top: 20%; right: -28px; width: 230px; opacity: .10; }
  .trust-card {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 16px;
    min-height: 144px;
    padding: 20px;
  }
  .trust-card::after { top: 16px; bottom: 16px; width: 5px; }
  .trust-card__icon { width: 72px; height: 72px; }
  .trust-card__content { gap: 8px; }
  .trust-card__label { font-size: 10px; letter-spacing: .16em; }
  .trust-card__body { font-size: 16px; line-height: 1.45; }

  /* Rail becomes a vertical sequence with the rule running down the left */
  .rail { grid-template-columns: 1fr; gap: 0; }
  .rail__step {
    padding: var(--s-3) 0 var(--s-3) var(--s-4);
    border-left: 1px solid var(--rule-strong);
  }
  .rail__step::before { display: none; }
  .rail__step::after { top: var(--s-4); left: -5px; }
  .rail__num { font-size: 32px; margin-bottom: 4px; }

  .coverage-layout { padding-block: var(--s-6); }
  .coverage-open .q-head { font-size: clamp(40px, 10vw, 54px); }
  .coverage-open__ornament { margin-block: 24px; }
  .coverage-copy .prose { font-size: 17px; line-height: 1.65; }
  .fifty-feature { margin-top: var(--s-5); }
  .fifty-feature__content { padding: 24px 32px 20px; transform: translateY(2px); }
  .big-fifty__num { font-size: clamp(148px, 46vw, 194px); }
  .big-fifty__word { margin-top: 16px; font-size: clamp(30px, 10vw, 42px); letter-spacing: .24em; }
  .fifty-feature__ornament { width: 156px; margin-top: 16px; }
  .state-texture { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 15px 0; margin-top: var(--s-5); }
  .state-texture li { font-size: 10px; letter-spacing: .08em; }
  .state-texture li::after { display: none; }

}

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

/* --------------------------------------------------------------------------
   19. Motion / print
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .btn:hover { transform: none; }
}

@media print {
  /* review bar print behaviour lives in ../review-bar.css */
  .nav-toggle { display: none; }
}

/* --------------------------------------------------------------------------
   TRUSTED PARTNERS — grammar: colophon.

   Not the card grammar of Question Four and not a centred logo wall: the label
   sits in the margin and the marks run as a ruled masthead, which is the one
   editorial device this page had not used yet.

   The five supplied marks arrived in three incompatible states — two white on
   transparent, two on opaque white, one usable — so they were normalised to a
   single espresso set. Sizing pairs a height cap with a width cap per mark, so
   a stacked lockup and a wide wordmark carry equal optical weight instead of
   equal bounding boxes.
   -------------------------------------------------------------------------- */
.o2-partners__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.34fr) minmax(0, 1fr);
  gap: var(--s-6);
  align-items: center;
}
.o2-partners__rule {
  display: block;
  width: 56px;
  height: 1px;
  margin: var(--s-3) 0 var(--s-3);
  background: var(--copper);
}
.o2-partners__line {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 2.6vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--text-strong);
}
.o2-partners__note {
  margin-top: var(--s-3);
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 34ch;
}

.o2-partners__row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: center;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.o2-partners__row li {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 132px;
  padding: var(--s-3) 14px;
}
.o2-partners__row li + li { border-left: 1px solid var(--rule); }

.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(56px * var(--k)); max-width: calc(118px * var(--k)); }
.plogo--real       { max-height: calc(38px * var(--k)); max-width: calc(122px * var(--k)); }
.plogo--lift       { max-height: calc(58px * var(--k)); max-width: calc(132px * var(--k)); }
.plogo--wonderland { max-height: calc(44px * var(--k)); max-width: calc(158px * var(--k)); }
.plogo--socal      { max-height: calc(42px * var(--k)); max-width: calc(128px * var(--k)); }

@media (max-width: 1000px) {
  .o2-partners__grid { grid-template-columns: 1fr; gap: var(--s-5); }
  .o2-partners__note { max-width: 52ch; }
}
@media (max-width: 760px) {
  /* three then two, with the interior rules following the wrap */
  .o2-partners__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .o2-partners__row li { min-height: 108px; border-left: 0; border-top: 1px solid var(--rule); }
  .o2-partners__row li:nth-child(-n+2) { border-top: 0; }
  .o2-partners__row li:nth-child(odd) { border-right: 1px solid var(--rule); }
  .plogo { --k: .76; }
  /* the orphan cell would otherwise leave a rule hanging into empty space */
  .o2-partners__row li:last-child { grid-column: 1 / -1; border-right: 0; }
}