/* =========================================================
   Thomas James Strategy — get.thomasjamesstrategy.com
   Visual system: Thomas James & Co. Design System
   Palette discipline: 60% cream/bone, 25% ink, 15% vermillion + gold
   Sharp corners throughout. No gradients, no rounded cards.

   MOBILE-FIRST. Base styles are the 375–699px design.
   Breakpoints scale UP:
     @media (min-width: 700px)   tablet / small laptop
     @media (min-width: 1000px)  desktop — multi-column layouts appear here
     @media (min-width: 1400px)  wide — watermark reaches full bleed
   ========================================================= */

/* ---------------------------------------------------------
   1. TOKENS
   --------------------------------------------------------- */
:root {
  /* Color — every value written out */
  --vermillion:      #C52525;
  /* Lighter red reserved for text on --ink. The base red only reaches 3.59:1
     against #1A1612; darkening it for the cream backgrounds pushes it further
     down, so dark sections need the contrast to run the other way. */
  --vermillion-on-ink: #DE5353;
  --vermillion-deep: #B22020;
  --ink:             #1A1612;
  --ink-soft:        #2D2620;
  --cream:           #F4EFE6;
  --cream-warm:      #EDE5D3;
  --bone:            #E8DFC9;
  --muted:           #6B5E4F;
  --gold:            #B8893A;
  --line:            rgba(26, 22, 18, 0.12);
  --line-strong:     rgba(26, 22, 18, 0.25);
  --line-on-ink:     rgba(244, 239, 230, 0.18);
  --cream-72:        rgba(244, 239, 230, 0.72);
  --cream-82:        rgba(244, 239, 230, 0.82);
  --cream-68:        rgba(244, 239, 230, 0.68);
  --cream-60:        rgba(244, 239, 230, 0.60);
  --cream-55:        rgba(244, 239, 230, 0.55);
  --error-wash:      rgba(197, 37, 37, 0.06);

  /* Type families */
  --serif: "Instrument Serif", Georgia, serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:  "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  /* Type scale — MOBILE values. Overridden at 700 / 1000 / 1400. */
  --fs-h1:        46px;
  --fs-h2:        34px;
  --fs-h3:        26px;
  --fs-h3-ink:    26px;
  --fs-legal-h1:  40px;
  --fs-legal-h2:  27px;
  --fs-lede:      21px;
  --fs-hero-sub:  19px;
  --fs-body:      16px;
  --fs-sm:        15px;
  --fs-quote:     23px;
  --fs-faq:       20px;
  --fs-brand:     19px;
  --fs-footmark:  25px;
  --fs-mono-sm:   11px;
  --fs-mono-xs:   10px;

  /* Line height / tracking */
  --lh-body:      1.65;
  --lh-prose:     1.75;
  --lh-display:   0.98;
  --tr-h1:       -0.035em;
  --tr-h2:       -0.025em;

  /* Spacing scale — 8-step brand scale */
  --s-1:   4px;
  --s-2:   8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  80px;
  --s-10: 100px;
  --s-11: 120px;

  /* Paper-margin discipline — MOBILE gutter; 48px from 700px up */
  --pad-x:        28px;
  --pad-section:  72px;
  --pad-hero-top: 72px;
  --pad-card:     28px 24px 24px;

  /* Watermark (the signature gesture) */
  --wm-size:        380px;
  --wm-size-left:   320px;
  --wm-size-footer: 300px;
  --wm-right:      -60px;
  --wm-bottom:    -120px;
  --wm-left:      -120px;
  --wm-op:          0.05;
  --wm-op-left:     0.09;

  /* Motion */
  --ease:     cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur-fast: 150ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;

  /* Geometry — sharp corners are load-bearing */
  --radius: 0;

  /* Booking container height */
  --booking-h: 640px;
}

/* ---------------------------------------------------------
   2. RESET / BASE
   --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a {
  color: var(--ink);
  text-decoration: none;
  transition: color var(--dur-base) var(--ease);
}
a:hover  { color: var(--vermillion); }
a:active { color: var(--vermillion-deep); }
p a, .prose a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

:focus-visible { outline: 2px solid var(--vermillion); outline-offset: 2px; }

img, iframe { max-width: 100%; }
section[id] { scroll-margin-top: 88px; }
hr { border: 0; border-top: 1px solid var(--line); margin: 0; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--cream);
  padding: 14px 20px;
  font-family: var(--mono); font-size: var(--fs-mono-sm);
  letter-spacing: 0.2em; text-transform: uppercase;
}
.skip:focus { left: 0; color: var(--cream); }

.wrap { max-width: 1180px; margin: 0 auto; }
.it   { font-style: italic; color: var(--vermillion); }
.gold { color: var(--gold); }
.breakable { word-break: break-word; }

/* ---------------------------------------------------------
   3. TYPE
   --------------------------------------------------------- */
h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: var(--fs-h1); line-height: var(--lh-display);
  letter-spacing: var(--tr-h1);
  margin: 0; max-width: 15ch;
}
h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: var(--fs-h2); line-height: 1.05;
  letter-spacing: var(--tr-h2);
  margin: 0 0 20px; max-width: 26ch;
}
h3 {
  font-family: var(--serif); font-weight: 400;
  font-size: var(--fs-h3); line-height: 1.2;
  letter-spacing: -0.02em; margin: 0 0 14px;
}
h1 em, h2 em, h3 em { font-style: italic; color: var(--vermillion); }

.eyebrow {
  font-family: var(--mono); font-size: var(--fs-mono-sm); font-weight: 600;
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--vermillion);
  margin: 0 0 40px;
}
.eyebrow--hero {
  font-size: var(--fs-body); letter-spacing: 0.18em;
  line-height: 1.5; margin: 0 0 34px;
}
.minilabel {
  font-family: var(--mono); font-size: var(--fs-mono-xs); font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
  line-height: 1.7; margin: 0;
}
.lede {
  font-family: var(--serif); font-size: var(--fs-lede);
  line-height: 1.45; color: var(--ink-soft); margin: 0 0 var(--s-5);
}
.muted {
  color: var(--muted); margin: 0 0 40px;
  max-width: 58ch; text-wrap: pretty;
}
.hero-sub {
  font-size: var(--fs-hero-sub); line-height: 1.55; color: var(--ink-soft);
  margin: 28px 0 0; max-width: 56ch; text-wrap: pretty;
}
.rule { border-top: 2px solid var(--vermillion); margin: 44px 0 var(--s-6); }

/* ---------------------------------------------------------
   4. NAV — sticky top. The only sanctioned blur in the system.
   Nothing in this system is fixed to the bottom-right corner;
   that corner is reserved for the injected chat bubble.
   --------------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(244, 239, 230, 0.96);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  max-width: 1180px; margin: 0 auto;
  padding: 14px var(--pad-x);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-6);
}
.brand {
  font-family: var(--serif); font-size: var(--fs-brand);
  letter-spacing: -0.02em; line-height: 1; white-space: nowrap;
  /* 44px tap target. Visually inert: the nav row is already 94px tall. */
  display: inline-flex; align-items: center; min-height: 44px;
}
.nav-right { display: flex; align-items: center; gap: var(--s-6); }
.nav-links { display: none; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  font-family: var(--mono); font-size: var(--fs-mono-sm); font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  display: inline-flex; align-items: center; min-height: 44px;
}

/* ---------------------------------------------------------
   5. BUTTONS — all states written out
   --------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  width: 100%;
  background: var(--vermillion); color: var(--cream);
  border: 0; border-radius: var(--radius);
  padding: 18px var(--s-5); min-height: 48px;
  font-family: var(--mono); font-size: var(--fs-mono-sm); font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  text-align: center; cursor: pointer;
  transition: background var(--dur-base) var(--ease),
              transform var(--dur-base) var(--ease);
}
.btn:hover         { background: var(--vermillion-deep); color: var(--cream); transform: translateY(-1px); }
.btn:active        { background: var(--vermillion-deep); color: var(--cream); transform: translateY(0); }
.btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.btn:disabled,
.btn[aria-disabled="true"] { opacity: 0.55; cursor: progress; transform: none; background: var(--vermillion); }

.btn--sm { width: auto; padding: 15px var(--s-5); min-height: 46px; letter-spacing: 0.16em; }

.btn--ghost {
  background: transparent; color: var(--ink);
  border: 1px solid var(--ink); padding: 18px var(--s-5);
}
.btn--ghost:hover         { background: var(--ink); color: var(--cream); transform: none; }
.btn--ghost:active        { background: var(--ink-soft); color: var(--cream); transform: none; }
.btn--ghost:focus-visible { outline: 2px solid var(--vermillion); outline-offset: 3px; }
.btn--ghost:disabled      { opacity: 0.45; background: transparent; color: var(--ink); }

/* ---------------------------------------------------------
   6. SECTIONS
   --------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden;
  padding: var(--pad-hero-top) var(--pad-x) var(--s-8);
  border-bottom: 1px solid var(--line);
}
.section {
  position: relative; overflow: hidden;
  padding: var(--pad-section) var(--pad-x);
  border-bottom: 1px solid var(--line);
}
.section--warm { background: var(--cream-warm); }
.section--bone { background: var(--bone); }
.section--ink  { background: var(--ink); }
.section--ink h2, .section--ink h3 { color: var(--cream); }
.section--ink .muted { color: var(--cream-72); }
/* Every red that renders as text on --ink, not just the section number. */
.section--ink .sec-num,
.section--ink h1 em, .section--ink h2 em, .section--ink h3 em,
.section--ink .it {
  color: var(--vermillion-on-ink);
}
.section--ink .sec-num { border-top-color: var(--vermillion-on-ink); }

.sec-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-6); align-items: start; }
.sec-num {
  font-family: var(--mono); font-size: var(--fs-mono-sm); font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--vermillion);
  border-top: 2px solid var(--vermillion); padding-top: var(--s-4); margin: 0;
}

/* The signature gesture: giant faded section mark bleeding off the page */
.watermark {
  position: absolute;
  right: var(--wm-right); bottom: var(--wm-bottom);
  font-family: var(--serif); font-style: italic;
  font-size: var(--wm-size); line-height: 0.7;
  color: var(--vermillion); opacity: var(--wm-op);
  pointer-events: none; user-select: none;
}
.watermark--left {
  left: var(--wm-left); right: auto; top: -140px; bottom: auto;
  font-size: var(--wm-size-left); opacity: var(--wm-op-left);
}
.watermark--footer {
  right: -40px; bottom: -110px;
  font-size: var(--wm-size-footer); opacity: 0.12;
}

/* ---------------------------------------------------------
   7. HERO
   --------------------------------------------------------- */
.hero-head,
.hero-grid { position: relative; display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start; }
.hero-side { display: grid; gap: var(--s-5); }
.hero-cta  { margin-top: var(--s-6); }
.actions   { display: flex; flex-direction: column; align-items: stretch; gap: var(--s-4); }

.portrait {
  margin: 0; width: 100%; max-width: 300px; justify-self: start;
  background: var(--cream);
  border: 1px solid var(--line); border-top: 3px solid var(--vermillion);
  padding: 14px 14px 0;
}
.portrait img {
  display: block; width: 100%; height: auto; aspect-ratio: 1 / 1;
  object-fit: cover; object-position: 50% 16%;
  filter: saturate(0.92) contrast(1.02) sepia(0.05);
}
.portrait figcaption {
  letter-spacing: 0.22em; font-weight: 600;
  padding: var(--s-4) 2px 14px;
  border-top: 1px solid var(--line); margin-top: 14px;
}

/* ---------------------------------------------------------
   8. CARDS
   --------------------------------------------------------- */
.card {
  background: var(--cream-warm);
  border: 1px solid var(--line); border-top: 3px solid var(--vermillion);
  padding: var(--pad-card);
}
.card .minilabel { letter-spacing: 0.24em; font-weight: 600; margin-bottom: 22px; }

/* ---------------------------------------------------------
   9. HAIRLINE GRIDS (why independent / coverage)
   --------------------------------------------------------- */
.hairgrid {
  display: grid; grid-template-columns: 1fr; gap: 1px;
  background: var(--line); margin-top: var(--s-5);
}
.hairgrid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hairgrid--ink  { background: rgba(244, 239, 230, 0.16); }

.cell { background: var(--cream); padding: var(--pad-card); }
.section--warm .cell { background: var(--cream); }
.hairgrid--ink .cell { background: var(--ink); }
.hairgrid--four .cell { padding: var(--s-5) 20px 22px; }
.cell--top { border-top: 3px solid var(--vermillion); }
.cell p { margin: 0; font-size: var(--fs-sm); line-height: var(--lh-prose); color: var(--ink-soft); }
.hairgrid--ink .cell p  { color: var(--cream-68); }
.hairgrid--ink .cell h3 { font-size: var(--fs-h3-ink); }
.cell-label {
  font-family: var(--mono); font-size: var(--fs-mono-xs); font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold);
  margin: 0 0 14px !important;
}
.gold-label { color: var(--gold); margin-bottom: var(--s-2) !important; letter-spacing: 0.2em; }

/* ---------------------------------------------------------
   10. STEPS
   --------------------------------------------------------- */
.steps { display: grid; grid-template-columns: 1fr; gap: 40px; margin-top: 28px; }
.steps h3 { margin-bottom: 14px; }
.steps p  { margin: 0; font-size: var(--fs-sm); line-height: var(--lh-prose); color: var(--muted); }
.step-n {
  font-family: var(--mono); font-size: var(--fs-mono-sm); font-weight: 600; letter-spacing: 0.2em;
  color: var(--vermillion); border-top: 2px solid var(--vermillion);
  padding-top: 14px; margin: 0 0 20px;
}

/* ---------------------------------------------------------
   11. CARRIER PANEL — type recreations, not carrier artwork.
   Replace with licensed carrier logo files when supplied.
   --------------------------------------------------------- */
.carrier-panel { padding: 30px 0 0; }
.carrier-panel .minilabel { padding: 0 24px; margin-bottom: var(--s-5); letter-spacing: 0.24em; font-weight: 600; }
.carriers {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid rgba(26, 22, 18, 0.09);
}
.carriers li {
  display: flex; align-items: center; justify-content: center;
  min-height: 92px; padding: var(--s-4) 14px;
  border-bottom: 1px solid rgba(26, 22, 18, 0.09);
}
.carriers li:nth-child(odd) { border-right: 1px solid rgba(26, 22, 18, 0.09); }
.carriers li:nth-last-child(-n + 2) { border-bottom: 0; }

.lg { display: block; text-align: center; line-height: 1.15; }
.lg-aig { border: 2px solid #001871; padding: 2px 10px; font-weight: 700; font-size: 22px; letter-spacing: 0.02em; color: #001871; }
.lg-americo { font-style: italic; font-weight: 800; font-size: 20px; letter-spacing: 0.01em; color: #17418E; text-transform: uppercase; }
.lg-americo em { display: block; font-weight: 400; font-size: 9px; margin-top: 3px; text-transform: none; }
.lg-aetna { font-weight: 700; font-size: 25px; letter-spacing: -0.01em; color: #7D3F98; }
.lg-aetna i { font-style: normal; font-size: 19px; margin-right: 2px; }
.lg-nlg { font-family: Georgia, "Times New Roman", serif; font-size: 15px; line-height: 1.14; color: #2D2A26; }
.lg-nlg .tri { display: inline-block; vertical-align: -3px; margin-right: var(--s-2); width: 0; height: 0; border-left: 11px solid transparent; border-right: 11px solid transparent; border-bottom: 19px solid #2D2A26; }
.lg-athene { font-size: 20px; letter-spacing: 0.16em; color: #3D4543; text-transform: uppercase; padding-left: 0.16em; }
.lg-moo { font-family: Georgia, "Times New Roman", serif; font-variant: small-caps; font-weight: 700; font-size: 18px; color: #003087; white-space: nowrap; }
.lg-moo i { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 16px; margin: 0 3px; }
.lg-transam { font-family: Georgia, "Times New Roman", serif; font-variant: small-caps; font-size: 16px; letter-spacing: 0.02em; color: #4B4F54; white-space: nowrap; }
.lg-transam .tri { display: inline-block; vertical-align: -2px; margin-right: 6px; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 17px solid #CE0E2D; }
.lg-ethos { font-size: 20px; font-weight: 500; letter-spacing: 0.28em; color: #0F4C3A; text-transform: uppercase; padding-left: 0.28em; }

/* ---------------------------------------------------------
   12. BOOKING EMBED — integration point.
   Deliberately undecorated: no border, no shadow, no radius,
   nothing that can clash with third-party iframe chrome.
   Full-bleed on mobile; reserved height so the page does not
   jump while the iframe resizes itself.
   --------------------------------------------------------- */
.booking-embed {
  margin: 0 calc(var(--pad-x) * -1);
  width: calc(100% + var(--pad-x) * 2);
  min-height: var(--booking-h);
  background: transparent;
  border: 0; border-radius: 0; box-shadow: none; padding: 0;
}
.booking-embed iframe {
  display: block; width: 100%;
  min-height: var(--booking-h);
  border: none; overflow: hidden;
}

/* Consent disclosure — body text, not fine print (carrier review item) */
.disclosure {
  border-left: 3px solid var(--gold); background: var(--cream-warm);
  padding: var(--s-5) 26px; margin-top: var(--s-6);
}
.disclosure .minilabel { font-weight: 600; letter-spacing: 0.24em; margin-bottom: var(--s-3); }
.disclosure p {
  margin: 0; font-size: var(--fs-body); line-height: var(--lh-prose); color: var(--ink);
  max-width: 74ch; text-wrap: pretty;
}

/* ---------------------------------------------------------
   13. FAQ
   --------------------------------------------------------- */
.faq { border-top: 1px solid var(--line); margin-top: var(--s-5); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none;
  display: flex; gap: 20px; align-items: baseline;
  padding: var(--s-5) 0; min-height: 44px;
  font-family: var(--serif); font-size: var(--fs-faq); line-height: 1.3; letter-spacing: -0.015em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--vermillion); }
.faq-n {
  font-family: var(--mono); font-size: var(--fs-mono-sm); font-weight: 600; letter-spacing: 0.16em;
  color: var(--vermillion); flex: 0 0 auto; padding-top: var(--s-2);
}
.faq p {
  margin: 0 0 26px; padding-left: 0;
  font-size: var(--fs-sm); line-height: var(--lh-prose); color: var(--ink-soft); max-width: 68ch;
}

/* ---------------------------------------------------------
   14. FORM — all field states written out
   --------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start; }
.form { display: grid; gap: var(--s-5); }
.row  { display: grid; grid-template-columns: 1fr; gap: var(--s-5); }
.field { display: grid; gap: var(--s-2); }
.field label {
  font-family: var(--mono); font-size: var(--fs-mono-xs); font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted);
}
.req { color: var(--vermillion); }

.field input,
.field textarea {
  font-family: var(--sans); font-size: var(--fs-body); color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: 15px 14px; min-height: 48px; line-height: 1.6;
  transition: border-color var(--dur-base) var(--ease);
}
.field textarea { resize: vertical; }
.field input:hover,
.field textarea:hover { border-color: var(--ink); }
.field input:focus,
.field textarea:focus { outline: 2px solid var(--vermillion); outline-offset: 1px; border-color: var(--ink); }
.field input:user-invalid,
.field textarea:user-invalid,
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: var(--vermillion); border-width: 2px; }
.field input:disabled,
.field textarea:disabled { background: var(--cream-warm); color: var(--muted); cursor: not-allowed; }

/* Consent block — body-size label, full-contrast ink, never pre-checked */
.consent {
  border: 1px solid var(--line); background: var(--cream-warm);
  padding: var(--s-5); display: flex; gap: var(--s-4); align-items: flex-start;
}
.consent input[type="checkbox"] {
  width: 24px; height: 24px; flex: 0 0 auto; margin: 1px 0 0;
  accent-color: var(--vermillion);
}
.consent label {
  font-size: var(--fs-sm); line-height: var(--lh-prose); color: var(--ink);
  cursor: pointer; text-wrap: pretty;
}
.optional {
  font-family: var(--mono); font-size: var(--fs-mono-xs);
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
  white-space: nowrap;
}

.form-error {
  border-left: 3px solid var(--vermillion); background: var(--error-wash);
  padding: 14px var(--s-4); margin: 0;
  font-family: var(--mono); font-size: var(--fs-mono-sm); letter-spacing: 0.08em; color: var(--vermillion-deep);
}
.submit-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
.success { padding: var(--s-6) var(--s-5); }
.success .eyebrow { margin-bottom: var(--s-4); font-weight: 600; letter-spacing: 0.24em; }
.success-line { font-family: var(--serif); font-size: var(--fs-quote); line-height: 1.35; color: var(--ink); margin: 0; }

.direct { display: grid; gap: 22px; }
.direct p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--ink-soft); }
.direct a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; }
.serif-lg { font-family: var(--serif); font-size: var(--fs-footmark); letter-spacing: -0.01em; }

/* ---------------------------------------------------------
   15. FOOTER
   The d/b/a line is body-size and wraps rather than shrinking.
   --------------------------------------------------------- */
.footer {
  background: var(--ink); color: var(--cream);
  padding: 56px var(--pad-x) var(--s-6);
  position: relative; overflow: hidden;
}
.footer .wrap { position: relative; }
.footer a { color: var(--cream); }
.footer a:hover { color: var(--vermillion); }
.foot-grid {
  display: grid; grid-template-columns: 1fr; gap: 40px;
  padding-bottom: var(--s-7); border-bottom: 1px solid var(--line-on-ink);
}
.foot-mark { font-family: var(--serif); font-size: var(--fs-footmark); letter-spacing: -0.02em; margin: 0 0 14px; }
.foot-legal {
  font-size: var(--fs-body); line-height: var(--lh-prose); color: var(--cream);
  margin: 0 0 var(--s-3); max-width: 34ch;
  overflow-wrap: break-word; text-wrap: pretty;
}
.footer .minilabel { color: var(--cream-60); }
.foot-contact { font-size: var(--fs-sm); line-height: 1.85; color: var(--cream-82); margin: 0; }
.foot-links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.foot-links a {
  font-family: var(--mono); font-size: var(--fs-mono-sm); letter-spacing: 0.16em; text-transform: uppercase;
  display: inline-flex; align-items: center; min-height: 44px;
}
.foot-license { font-size: 14px; line-height: var(--lh-prose); color: var(--cream-60); margin: var(--s-2) 0 0; }
.foot-fine {
  display: flex; flex-direction: column; gap: 10px;
  justify-content: space-between; padding-top: 28px;
  font-family: var(--mono); font-size: var(--fs-mono-xs); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--cream-55);
}

/* ---------------------------------------------------------
   16. LEGAL PAGES
   --------------------------------------------------------- */
.legal { padding: 40px var(--pad-x) var(--pad-section); }
.legal-doc { max-width: 880px; margin: 0 auto; }
.back {
  display: inline-flex; align-items: center; gap: var(--s-3); min-height: 44px;
  font-family: var(--mono); font-size: var(--fs-mono-sm); font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted);
  margin-bottom: var(--s-6);
}
.legal-head { border-top: 2px solid var(--vermillion); padding-top: var(--s-5); }
.legal-head .eyebrow { margin-bottom: var(--s-5); }
.legal-head h1 {
  font-size: var(--fs-legal-h1); line-height: 1.02; letter-spacing: -0.03em;
  margin: 0 0 var(--s-4); max-width: none;
}
.updated {
  font-family: var(--mono); font-size: var(--fs-mono-sm); letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 var(--s-7);
}
.prose h2 {
  font-size: var(--fs-legal-h2); line-height: 1.2; letter-spacing: -0.02em;
  margin: 40px 0 var(--s-4); max-width: none;
}
.prose h2:first-of-type { border-top: 1px solid var(--line); padding-top: 40px; margin-top: 0; }
.prose p { font-size: var(--fs-body); line-height: var(--lh-prose); color: var(--ink-soft); margin: 0 0 20px; }
.prose strong { font-weight: 600; color: var(--ink); }
.prose .contact-block { line-height: 1.9; margin-bottom: 0; }
.callout {
  border-left: 3px solid var(--gold); background: var(--cream-warm);
  padding: var(--s-5) 26px; font-weight: 600; color: var(--ink) !important;
}

/* =========================================================
   BREAKPOINT: 700px and up
   ========================================================= */
@media (min-width: 700px) {
  :root {
    --fs-h1:       62px;
    --fs-h2:       42px;
    --fs-legal-h1: 52px;
    --fs-legal-h2: 30px;
    --fs-lede:     25px;
    --fs-hero-sub: 21px;
    --fs-faq:      23px;
    --fs-brand:    21px;
    --fs-footmark: 27px;

    --pad-x:        48px;
    --pad-section:  96px;
    --pad-hero-top: 104px;
    --pad-card:     32px 28px 28px;

    --wm-size:        620px;
    --wm-size-left:   520px;
    --wm-size-footer: 420px;
    --wm-bottom:    -180px;
    --wm-left:      -260px;

    --booking-h: 700px;
  }

  .nav-inner { padding: 18px var(--pad-x); }
  .footer    { padding: var(--pad-section) var(--pad-x) var(--s-6); }

  .btn      { width: auto; padding: 20px var(--s-6); }
  .btn--sm  { padding: 15px var(--s-5); }
  .btn--ghost { padding: 20px 28px; }
  .actions  { flex-direction: row; flex-wrap: wrap; align-items: center; }

  .hairgrid:not(.hairgrid--four) { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .hairgrid--ink .cell { padding: 34px 30px 30px; }
  .steps { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .row   { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
  .card  { padding: 36px 36px 30px; }
  .carrier-panel .minilabel { padding: 0 28px; }
  .success { padding: 44px 36px; }
  .consent { padding: 22px var(--s-5); }
  .faq p   { padding-left: 44px; }
  .hairgrid--four .cell { padding: 28px 22px 26px; }

  /* Booking returns to in-column width once the gutter is generous */
  .booking-embed { margin: 0; width: 100%; }

  .foot-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s-7); }
  .foot-fine { flex-direction: row; gap: 20px; }

  .legal { padding: var(--s-8) var(--pad-x) var(--pad-section); }
}

/* =========================================================
   BREAKPOINT: 1000px and up — multi-column layouts
   ========================================================= */
@media (min-width: 1000px) {
  :root {
    --fs-h1:     76px;
    --fs-h2:     52px;
    --fs-h3-ink: 27px;
    --wm-op-left: 0.09;
  }

  .nav-links { display: flex; align-items: center; gap: 28px; }

  .sec-grid { grid-template-columns: 200px minmax(0, 1fr); gap: var(--s-7); }
  .hero-head,
  .hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--s-8); }
  .contact-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: 56px; }
  .portrait { max-width: 380px; }
  .hairgrid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* =========================================================
   BREAKPOINT: 1400px and up — watermark reaches full bleed
   ========================================================= */
@media (min-width: 1400px) {
  :root {
    --fs-h1:   86px;
    --wm-right: -80px;
    --wm-left:  -60px;
    --wm-op:      0.06;
    --wm-op-left: 0.14;
  }
}

/* =========================================================
   PREFERENCES / PRINT
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

@media print {
  .nav, .booking-embed, .form, .watermark { display: none; }
  body { background: #fff; }
}