/* ==========================================================================
   Upwind Sailing — styles.css
   Everything tunable lives in the :root block below. Change a colour, a type
   step or a spacing step here and the whole site follows.
   ========================================================================== */

:root {
  /* ---- Palette (binding) ------------------------------------------------ */
  --bg:          #E7DECF;   /* beige: page background                          */
  --ink:         #3D3E3E;   /* charcoal: text, header/footer, logo on light   */
  --accent:      #F87C4A;   /* orange: THE button, focus, active nav, 1 mark  */
  --blue:        #5980A0;   /* steel blue: logo boat, hovers, hero overlay    */
  --blue-text:   #3F5D77;   /* steel blue darkened for text on beige (5.2:1)  */
  --terracotta:  #B0795A;   /* warm hairline details only                     */
  --card:        #FFFFFF;   /* offer cards, FAQ panels, form fields           */
  --muted:       #5E5F5F;   /* muted text on beige (4.8:1)                    */
  --muted-on-white: #6B6C6C;/* charcoal at 70% — only inside white panels     */
  --line:        rgba(61, 62, 63, 0.15); /* hairlines                         */
  --line-on-dark: rgba(231, 222, 207, 0.18);
  --bg-on-dark-muted: #C9C0B2; /* secondary text on charcoal (6:1)            */

  /* ---- Type ------------------------------------------------------------- */
  --font-head: "Roboto Slab", Georgia, "Times New Roman", serif;
  --font-body: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --step--1: clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem);
  --step-0:  clamp(1rem, 0.97rem + 0.2vw, 1.0625rem);
  --step-1:  clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
  --step-2:  clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
  --step-3:  clamp(1.5rem, 1.25rem + 1.2vw, 2rem);
  --step-4:  clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  --step-5:  clamp(2.75rem, 1.5rem + 5vw, 5rem);
  --leading-body: 1.6;
  --leading-tight: 1.1;
  --measure: 62ch;

  /* ---- Spacing (4px base) ---------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --section-pad: clamp(4rem, 9vw, 8rem);
  --gutter: clamp(1rem, 4vw, 2rem);
  --container: 72rem;
  --radius: 4px;
  --pill: 999px;
  --header-h: 4.5rem;
  --header-h-compact: 3.75rem;
  --logo-h: clamp(5rem, 9vw, 7.5rem);   /* logo at the top of the page */
  --notch-rx: clamp(6rem, 14vw, 10rem); /* the dip cut into the hero for it */
  --notch-ry: clamp(2rem, 4vw, 3.5rem);

  /* ---- Motion ---------------------------------------------------------- */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 180ms;
}

/* ==========================================================================
   Reset and base
   ========================================================================== */

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

html {
  /* Smooth scrolling is switched on by main.js after load, so a link straight
     to /policies.html#weather still lands on the anchor instantly. */
  scroll-behavior: auto;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  position: relative;
}

/* Canvas grain: a tiny inline SVG noise tile at very low opacity. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.24 0 0 0 0 0.24 0 0 0 0 0.24 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

img, svg { display: block; max-width: 100%; }
p, ul, ol, h1, h2, h3, h4 { margin: 0; }
p + p { margin-top: var(--space-4); }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: var(--step-5); font-weight: 700; letter-spacing: -0.025em; line-height: 1.02; }
h2 { font-size: var(--step-4); font-weight: 700; letter-spacing: -0.02em; }
h3 { font-size: var(--step-2); }

a { color: var(--blue-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--ink); text-decoration-color: var(--blue); }

strong { font-weight: 600; }
small { font-size: var(--step--1); }

.measure { max-width: var(--measure); }
.muted { color: var(--muted); }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* ---- Focus: orange ring with a charcoal inner edge so it reads everywhere */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 1px var(--ink);
  border-radius: var(--radius);
}
.btn:focus-visible { border-radius: var(--pill); }

/* ---- Skip link */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: 100;
  padding: var(--space-3) var(--space-5);
  background: var(--accent);
  color: var(--ink);
  font-weight: 700;
  font-size: 1.1875rem;
  border-radius: var(--pill);
  text-decoration: none;
}
.skip-link:focus { top: var(--space-4); }

/* ==========================================================================
   Layout primitives
   ========================================================================== */

.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}
.container--narrow { max-width: 48rem; }

.section {
  padding-block: var(--section-pad);
}
.section + .section { border-top: 1px solid var(--line); }

/* Section header: eyebrow between two rules (the badge's dash device),
   then H2, then an optional lede. Eyebrow numeral is the section's one
   orange mark. */
.section-head { margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-5);
}
/* The leading rule is orange: the section's one small accent mark. */
.eyebrow::before, .eyebrow::after {
  content: "";
  height: 1px;
  background: var(--line);
  flex: 0 0 2.5rem;
}
.eyebrow::before { height: 3px; background: var(--accent); border-radius: 2px; }
.eyebrow::after { flex: 1 1 auto; }
.eyebrow--center { justify-content: center; }
.eyebrow--center::before, .eyebrow--center::after { flex: 0 0 2.5rem; }
.eyebrow .num {
  color: var(--ink);
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-right: -0.25rem;
}
.section-head .lede {
  margin-top: var(--space-4);
  font-size: var(--step-1);
  color: var(--muted);
  max-width: 52ch;
}
.section-head--split {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4) var(--space-6);
}
.section-head--split .aside-link { font-size: var(--step--1); font-weight: 500; }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 3rem;
  padding: 0.75rem 1.5rem;
  border-radius: var(--pill);
  border: 2px solid transparent;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--step-0);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* The one primary button. Charcoal on orange is 4.1:1, which passes AA as
   large text, so the label is 19px bold (≥14pt bold). */
.btn--primary {
  background: var(--accent);
  color: var(--ink);
  font-size: 1.1875rem;
  font-weight: 700;
  min-height: 3.25rem;
  padding: 0.8rem 1.75rem;
}
.btn--primary:hover { background: var(--accent); color: var(--ink); border-color: var(--ink); }

.btn--outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn--outline:hover { background: var(--ink); color: var(--bg); }

.btn--light {
  background: transparent;
  color: var(--bg);
  border-color: var(--bg);
}
.btn--light:hover { background: var(--bg); color: var(--ink); }

.btn--block { width: 100%; }

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
/* Three columns: nav left, logo centred, book button right. The logo is
   taller than the bar and hangs down into the notch cut out of the hero. */
.site-header .container {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--space-4);
  min-height: var(--header-h);
  width: min(100% - 2 * var(--gutter), 90rem); /* as wide as the hero block */
  transition: min-height var(--dur) var(--ease);
}
.site-header.is-compact .container { min-height: var(--header-h-compact); }
.header__actions { justify-self: end; display: flex; align-items: center; }

/* The logo is taken out of the row so the bar keeps its height while the mark
   hangs down into the notch. */
.brand {
  position: absolute;
  left: 50%;
  top: 0.5rem;
  transform: translateX(-50%);
  color: inherit;
  text-decoration: none;
  line-height: 0;
  transition: top var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.brand .logo {
  height: var(--logo-h);
  width: auto;
  transition: height var(--dur) var(--ease);
}
.site-header.is-compact .brand { top: 50%; transform: translate(-50%, -50%); }
.site-header.is-compact .brand .logo { height: 3.1rem; }

/* Logo colour rules. Default = on light ground. */
.logo .logo-boat path { fill: var(--blue); }
.logo .logo-wave path { stroke: var(--blue); }
.logo .logo-text path, .logo .logo-text rect { fill: var(--ink); }
/* On charcoal header and footer: beige text, orange boat. */
.on-dark .logo .logo-boat path { fill: var(--accent); }
.on-dark .logo .logo-wave path { stroke: var(--accent); }
.on-dark .logo .logo-text path, .on-dark .logo .logo-text rect { fill: var(--bg); }

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  justify-self: start;
}
.nav__list {
  display: none;
  gap: var(--space-2);
  align-items: center;
}
.nav__link {
  display: inline-block;
  padding: 0.5rem 0.6rem;
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  border-radius: var(--radius);
}
.nav__link:hover { color: var(--blue-text); border-bottom-color: var(--blue); }
.nav__link[aria-current="true"], .nav__link.is-active { border-bottom-color: var(--accent); }

.header__actions .btn--primary { min-height: 2.75rem; padding: 0.55rem 1.1rem; }
/* On phones the header button reads "Book"; the rest of the label stays for screen readers. */
@media (max-width: 767px) {
  .header__actions .btn__rest {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
}

.menu-toggle {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  cursor: pointer;
}
.menu-toggle svg { width: 1.375rem; height: 1.375rem; }
.menu-toggle .icon-close { display: none; }
.menu-toggle[aria-expanded="true"] .icon-open { display: none; }
.menu-toggle[aria-expanded="true"] .icon-close { display: block; }

.mobile-menu {
  background: var(--bg);
  border-top: 1px solid var(--line);
}
.mobile-menu[hidden] { display: none; }
.mobile-menu ul {
  display: grid;
  padding-block: var(--space-3);
}
.mobile-menu a {
  display: block;
  padding: var(--space-3) 0;
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  font-size: var(--step-1);
  border-bottom: 1px solid var(--line);
}
.mobile-menu li:last-child a { border-bottom: 0; }
.mobile-menu a.is-active { color: var(--ink); box-shadow: inset 4px 0 0 var(--accent); padding-left: var(--space-4); }

/* The link row needs room either side of the centred logo, so it appears
   from 1200px; below that the menu button does the job. */
@media (min-width: 1200px) {
  .nav__list { display: flex; }
  .menu-toggle, .mobile-menu { display: none !important; }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  isolation: isolate;
  color: var(--bg);
  background: var(--ink); /* base under the photo while it loads */
  display: grid;
  align-items: end;
  min-height: min(calc(100svh - var(--header-h) - 2rem), 48rem);
  padding-block: clamp(3rem, 8vw, 6rem) clamp(2.5rem, 5vw, 4rem);
  overflow: hidden;
  width: min(100% - 2 * var(--gutter), 90rem);
  margin: var(--space-4) auto 0;
  border-radius: var(--radius);
  /* The notch: a shallow ellipse cut from the top centre so the logo sits in it. */
  -webkit-mask-image: radial-gradient(ellipse var(--notch-rx) var(--notch-ry) at 50% 0, transparent calc(100% - 1px), #000 100%);
  mask-image: radial-gradient(ellipse var(--notch-rx) var(--notch-ry) at 50% 0, transparent calc(100% - 1px), #000 100%);
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__media .photo { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border: 0; border-radius: 0; }

/* No overlay: the photo shows clean. Text sits low left, over the water,
   which is the darkest, calmest part of the frame. */
.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 80%; /* keep the water in frame; the text sits on it */
}
.hero .container {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-5);
  justify-items: start;
  width: min(100% - 2 * clamp(1.25rem, 5vw, 4rem), 46rem);
  margin-inline: clamp(1.25rem, 5vw, 4rem) auto;
}
.hero h1 { color: var(--bg); }
.hero__sub {
  font-size: var(--step-1);
  max-width: 40ch;
  color: var(--bg);
}
.hero__cta { margin-top: var(--space-2); }
.hero__trust {
  font-size: var(--step--1);
  color: var(--bg);
  opacity: 0.92;
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line-on-dark);
}

/* ==========================================================================
   Photo placeholders (real photos drop in here, see README)
   ========================================================================== */

.photo {
  position: relative;
  display: grid;
  place-items: center;
  background: var(--blue);
  color: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background-image:
    repeating-linear-gradient(135deg, rgba(231, 222, 207, 0.08) 0 2px, transparent 2px 14px);
}
.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo__note {
  position: relative;
  z-index: 1;
  margin: var(--space-4);
  padding: var(--space-2) var(--space-3);
  font-size: var(--step--1);
  font-weight: 500;
  text-align: center;
  background: rgba(61, 62, 62, 0.72);
  border-radius: var(--radius);
  max-width: 34ch;
}
.photo--portrait { aspect-ratio: 4 / 5; }
.hero .photo__note { position: absolute; right: var(--space-4); bottom: var(--space-4); margin: 0; z-index: 1; max-width: 28ch; text-align: right; }
@media (max-width: 1023px) {
  /* Phones and tablets: the photo stands alone (no overlay, nothing on it) and the words
     sit below it on the beige, so they stay readable at any brightness. Wide screens put
     the words low left, over the water. */
  .hero {
    display: block;
    min-height: 0;
    padding: 0;
    background: transparent;
    color: var(--ink);
    -webkit-mask-image: none;
    mask-image: none;
  }
  .hero__media {
    position: relative;
    inset: auto;
    z-index: 0;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius);
    overflow: hidden;
    -webkit-mask-image: radial-gradient(ellipse var(--notch-rx) var(--notch-ry) at 50% 0, transparent calc(100% - 1px), #000 100%);
    mask-image: radial-gradient(ellipse var(--notch-rx) var(--notch-ry) at 50% 0, transparent calc(100% - 1px), #000 100%);
  }
  .hero__img { object-position: 60% 50%; }
  .hero .container {
    width: 100%;
    margin-inline: 0;
    padding: var(--space-5) 0 var(--space-6);
    gap: var(--space-4);
  }
  .hero h1 { color: var(--ink); font-size: 2.5rem; }
  .hero__sub { color: var(--ink); }
  .hero__trust { color: var(--muted); border-top-color: var(--line); opacity: 1; }
}

/* ==========================================================================
   Experience (the story section)
   ========================================================================== */

.experience__grid {
  display: grid;
  gap: 0;
}
.experience__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4) var(--space-5);
  padding-block: var(--space-6);
  border-top: 1px solid var(--line);
}
.experience__item:first-child { border-top: 0; padding-top: 0; }
.experience__num {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--step-5);
  line-height: 1;
  color: var(--terracotta);
  min-width: 2.5ch;
}
.experience__item h3 { font-size: var(--step-2); margin-bottom: var(--space-2); }
.experience__item p { color: var(--ink); max-width: 44ch; }
.experience__close {
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--terracotta);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}
.experience__close p { font-family: var(--font-head); font-weight: 700; font-size: var(--step-2); max-width: 28ch; }

@media (min-width: 768px) {
  .experience__grid {
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(2rem, 6vw, 5rem);
    row-gap: 0;
  }
  .experience__item { grid-template-columns: 1fr; gap: var(--space-3); padding-block: var(--space-7); }
  .experience__item:nth-child(2) { border-top: 0; padding-top: 0; }
  /* Right column offset down by half a card: the staggered rhythm. */
  .experience__item:nth-child(even) { transform: translateY(clamp(2rem, 6vw, 5rem)); }
  .experience__close { margin-top: calc(var(--space-9) + 1rem); }
}

/* ==========================================================================
   Offers (cards)
   ========================================================================== */

.offers__grid {
  display: grid;
  gap: var(--space-5);
}
.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: transparent;
  border: 1px solid var(--line);
  border-top: 2px solid var(--terracotta);
  border-radius: var(--radius);
  padding: var(--space-6) var(--space-5) var(--space-5);
  transition: border-color var(--dur) var(--ease);
}
.card:hover { border-color: var(--blue); border-top-color: var(--terracotta); }
.card h3 { font-size: var(--step-2); }
.card__line { color: var(--ink); }
.card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-2);
  font-size: var(--step--1);
  color: var(--muted);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
  margin-top: auto;
}
.card__meta .price { color: var(--ink); font-weight: 600; }
.card .btn { align-self: flex-start; margin-top: var(--space-2); }
.offers__cta {
  margin-top: var(--space-8);
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  text-align: center;
}
.offers__cta p { color: var(--muted); font-size: var(--step--1); }

@media (min-width: 640px) { .offers__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .offers__grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } }

/* ==========================================================================
   Guide
   ========================================================================== */

.guide__grid {
  display: grid;
  gap: var(--space-6);
}
.guide__card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-6) var(--space-5);
}
.guide__card h2 { font-size: var(--step-3); }
.guide__card .rule {
  width: 3rem;
  height: 2px;
  background: var(--terracotta);
  margin: var(--space-4) 0 var(--space-5);
}
.guide__card p { color: var(--ink); }
.guide__base {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  font-size: var(--step--1);
  color: var(--muted);
}

@media (min-width: 900px) {
  .guide__grid {
    grid-template-columns: 5fr 6fr;
    align-items: center;
    gap: 0;
  }
  .guide__card {
    margin-left: -4rem;
    padding: var(--space-7) var(--space-7);
    position: relative;
    z-index: 1;
  }
}

/* ==========================================================================
   FAQ (native details/summary)
   ========================================================================== */

.faq__list {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}
.faq details {
  background: transparent;
  border-bottom: 1px solid var(--line);
}
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--step-1);
  line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: 0 0 auto;
  width: 0.75rem;
  height: 0.75rem;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: rotate(45deg);
  transition: transform var(--dur) var(--ease);
  margin-right: 0.25rem;
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq summary:hover { color: var(--blue-text); }
.faq summary:focus-visible { border-radius: var(--radius); }
.faq .faq__answer {
  padding: 0 0 var(--space-5);
  color: var(--ink);
  max-width: 62ch;
}

/* ==========================================================================
   Book (Calendly) and lead form
   ========================================================================== */

.book .section-head { text-align: left; }
.calendly-wrap {
  position: relative;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  min-height: 760px;
  overflow: hidden;
}
.calendly-inline-widget { min-width: 320px; height: 760px; }
.calendly-loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: var(--space-3);
  text-align: center;
  color: var(--muted);
  padding: var(--space-6);
  pointer-events: none;
}
.calendly-loading .spinner {
  width: 2rem; height: 2rem;
  margin-inline: auto;
  border: 3px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 900ms linear infinite;
}
.calendly-wrap.is-loaded .calendly-loading { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

.lead {
  margin-top: var(--space-8);
  padding-top: var(--space-8);
  border-top: 1px solid var(--line);
}
.lead__intro h3 { font-size: var(--step-3); font-weight: 900; }
.lead__intro p { margin-top: var(--space-3); color: var(--ink); max-width: 44ch; }
.lead__grid { display: grid; gap: var(--space-6); }
@media (min-width: 900px) {
  .lead__grid { grid-template-columns: 5fr 7fr; gap: var(--space-8); align-items: start; }
}

.form { display: grid; gap: var(--space-4); }
.form__row { display: grid; gap: var(--space-4); }
@media (min-width: 640px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: var(--space-2); }
.field label { font-weight: 500; font-size: var(--step--1); }
.field .hint { font-size: var(--step--1); color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  padding: 0.75rem 0.875rem;
  min-height: 3rem;
}
.field textarea { min-height: 7rem; resize: vertical; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%233D3E3E' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  padding-right: 2.5rem;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--blue); }
.check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: start;
  font-size: var(--step--1);
}
.check input {
  width: 1.25rem; height: 1.25rem;
  margin: 0.15rem 0 0;
  accent-color: var(--ink);
  min-height: 0;
}
.form .btn { justify-self: start; }
.form__fine { font-size: var(--step--1); color: var(--muted); }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background: var(--bg);
  color: var(--ink);
  padding-block: var(--space-8) var(--space-6);
  border-top: 1px solid var(--line);
}
.site-footer a { color: var(--ink); text-decoration-color: var(--line); }
.site-footer a:hover { color: var(--blue-text); text-decoration-color: var(--blue); }
.site-footer .btn--primary, .site-footer .btn--primary:hover { color: var(--ink); }
.footer__grid {
  display: grid;
  gap: var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--line);
}
.footer__brand .logo { height: 8rem; width: auto; }
.footer__col .footer__heading {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: 0.75rem;
  color: var(--muted);
  margin-bottom: var(--space-3);
}
.footer__col ul { display: grid; gap: var(--space-2); }
.footer__col p { color: var(--ink); }
.footer__legal {
  padding-top: var(--space-5);
  display: grid;
  gap: var(--space-2);
  font-size: var(--step--1);
  color: var(--muted);
}
@media (min-width: 768px) {
  .footer__grid { grid-template-columns: 1.2fr 1fr 1fr 1fr; align-items: start; }
  .footer__legal { grid-template-columns: 1fr auto; align-items: center; }
}

/* ==========================================================================
   Sub-pages (policies, thanks)
   ========================================================================== */

.page-head { padding-block: var(--section-pad) var(--space-7); }
.page-head h1 { font-size: var(--step-4); }
.page-head .lede { margin-top: var(--space-4); font-size: var(--step-1); color: var(--muted); max-width: 52ch; }
.prose { max-width: var(--measure); }
.prose h2 {
  font-size: var(--step-2);
  font-weight: 700;
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
  scroll-margin-top: calc(var(--header-h) + 1rem);
}
.prose h2:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h2 + p { margin-top: var(--space-3); }
.prose p { margin-top: var(--space-4); }
.prose .toc {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-7);
}
.prose .toc a {
  font-size: var(--step--1);
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--pill);
  text-decoration: none;
  background: transparent;
}
.prose .toc a:hover { border-color: var(--blue); }
.prose .callout {
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-5);
  border-left: 2px solid var(--terracotta);
  background: transparent;
  border-radius: 0;
}
.thanks { text-align: center; padding-block: var(--section-pad); }
.thanks .container { display: grid; gap: var(--space-5); justify-items: center; }
.thanks p { max-width: 48ch; font-size: var(--step-1); }
.thanks .badge-mark { width: 5rem; }

/* ==========================================================================
   Motion preferences
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .btn:hover { transform: none; }
  .calendly-loading .spinner { animation: none; border-top-color: var(--line); }
}

/* ==========================================================================
   Print
   ========================================================================== */

@media print {
  .site-header, .site-footer, .skip-link, .btn, .calendly-wrap, .lead { display: none !important; }
  body::before { display: none; }
  body { background: #fff; color: #000; }
}

/* ==========================================================================
   StoryBrand sections: promises, problem, plan, bands, photo strip, quote
   ========================================================================== */

.promises { padding-block: var(--space-6); border-bottom: 1px solid var(--line); }
.promises__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-6);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}
.promises__list li { display: flex; align-items: center; gap: var(--space-3); }
.promises__list li + li::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--terracotta); }

.problem__grid { display: grid; gap: var(--space-5); }
.problem__item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-6) var(--space-5);
  display: grid;
  gap: var(--space-4);
}
.problem__fear {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--step-1);
  line-height: 1.35;
  color: var(--ink);
}
.problem__answer { color: var(--ink); padding-top: var(--space-4); border-top: 1px solid var(--line); }
@media (min-width: 900px) { .problem__grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } }

.plan__grid { display: grid; gap: var(--space-6); counter-reset: step; }
.plan__step { display: grid; gap: var(--space-3); align-content: start; }
.plan__step .photo { margin-bottom: var(--space-2); }
.plan__num {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--step-3);
  line-height: 1;
  color: var(--terracotta);
}
.plan__step h3 { font-size: var(--step-2); }
.plan__step p { color: var(--ink); max-width: 36ch; }
.plan__cta { margin-top: var(--space-8); display: grid; justify-items: center; }
@media (min-width: 768px) { .plan__grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } }

.photo--wide { aspect-ratio: 3 / 2; }
.photo-strip {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-8);
  padding-top: var(--space-8);
  border-top: 1px solid var(--line);
}
.photo-strip .photo { aspect-ratio: 4 / 5; }
@media (min-width: 640px) { .photo-strip { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) { .photo-strip { margin-top: calc(var(--space-9) + 2rem); } }

/* Charcoal bands: the few deliberate blocks of ink on the beige ground. */
.band {
  background: var(--ink);
  color: var(--bg);
  padding-block: clamp(3rem, 7vw, 5.5rem);
  width: min(100% - 2 * var(--gutter), 90rem);
  margin-inline: auto;
  border-radius: var(--radius);
}
.band + .section, .section + .band { border-top: 0; }
.band .container { width: min(100% - 2 * var(--gutter), var(--container)); }
.band h2, .band h3, .band p { color: var(--bg); }
.band .eyebrow--on-dark { color: var(--bg-on-dark-muted); justify-content: center; }
.band .eyebrow--on-dark::after { background: var(--line-on-dark); }
.band a:not(.btn) { color: var(--bg); text-decoration-color: var(--line-on-dark); }

.stats {
  display: grid;
  gap: var(--space-6);
  margin: 0;
}
.stat { display: grid; gap: var(--space-1); }
.stat .stat__label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bg-on-dark-muted);
}
.stat .stat__value {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--step-5);
  line-height: 1;
  color: var(--accent); /* large text on charcoal, 4.1:1 */
}
.stat__unit { font-size: 0.5em; font-weight: 700; }
.stat__note { font-size: var(--step--1); color: var(--bg-on-dark-muted) !important; max-width: 24ch; margin-top: var(--space-2); }
.stat .stat__label { color: var(--bg-on-dark-muted) !important; }
@media (min-width: 640px) { .stats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .stats { grid-template-columns: repeat(4, 1fr); } }

.band--cta { text-align: center; margin-top: var(--space-8); }
.band--cta .container { display: grid; justify-items: center; gap: var(--space-5); }
.band--cta h2 { max-width: 20ch; }
.change {
  display: grid;
  gap: var(--space-5);
  width: 100%;
  max-width: 52rem;
  text-align: left;
  margin-block: var(--space-3);
}
.change__col {
  padding: var(--space-5);
  border: 1px solid var(--line-on-dark);
  border-radius: var(--radius);
}
.change__label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bg-on-dark-muted) !important;
  margin-bottom: var(--space-2);
}
.change__col p + p { margin-top: 0; font-size: var(--step-1); }
.band__fine { font-size: var(--step--1); color: var(--bg-on-dark-muted) !important; }
@media (min-width: 640px) { .change { grid-template-columns: 1fr 1fr; } }

.pull-quote {
  margin: var(--space-8) auto 0;
  max-width: 44rem;
  text-align: center;
  padding-top: var(--space-6);
  position: relative;
}
.pull-quote::before {
  content: "";
  display: block;
  width: 3rem;
  height: 2px;
  background: var(--terracotta);
  margin: 0 auto var(--space-5);
}
.pull-quote blockquote { margin: 0; }
.pull-quote blockquote p {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--step-3);
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.pull-quote figcaption { margin-top: var(--space-4); font-size: var(--step--1); color: var(--muted); }

/* Lead form on a charcoal band */
.lead.band { padding: clamp(2.5rem, 6vw, 4rem); border-top: 0; width: 100%; }
.lead.band .lead__intro p { color: var(--bg); }
.lead.band .field label { color: var(--bg); }
.lead.band .field .hint, .lead.band .form__fine { color: var(--bg-on-dark-muted); }
.lead.band .check { color: var(--bg); }
.lead.band .field input, .lead.band .field select, .lead.band .field textarea { border-color: var(--card); }
.lead.band .check input { accent-color: var(--accent); }

/* ==========================================================================
   FAQ tabs (dropdown on phones)
   ========================================================================== */

.faq-tabs__pick { margin-bottom: var(--space-5); }
.faq-tabs__select {
  width: 100%;
  font: inherit;
  font-weight: 600;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  padding: 0.75rem 2.5rem 0.75rem 0.875rem;
  min-height: 3rem;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%233D3E3E' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
}
.faq-tabs__list {
  display: none;
  gap: var(--space-2);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--space-5);
}
.faq-tabs__tab {
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  padding: 0.75rem 0.25rem;
  cursor: pointer;
  white-space: nowrap;
}
.faq-tabs__tab:hover { color: var(--ink); }
.faq-tabs__tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.faq-tabs__tab:focus-visible { border-radius: var(--radius); }
.faq-tabs__heading {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-3);
}
.js .faq-tabs__heading { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.faq-tabs__panel + .faq-tabs__panel { margin-top: var(--space-7); }
.js .faq-tabs__panel + .faq-tabs__panel { margin-top: 0; }
@media (min-width: 768px) {
  .js .faq-tabs__pick { display: none; }
  .js .faq-tabs__list { display: flex; flex-wrap: wrap; gap: var(--space-4); }
}
.faq__answer a { color: var(--blue-text); }
.band__lede { font-size: var(--step-1); max-width: 34ch; }