/* ============================================================
   THE FAIRWAY GROUP INSURANCE AGENCY QUOTE REQUEST: design system.
   The Ascension quoting app stylesheet (base: BASE_VERSION in js/config.js) with this logo's palette
   (the green #084327 on the logo's paper #f7f4ef) and the skin at the
   end of this file. Spectral headlines (echo the wordmark), Montserrat
   labels and buttons (echo INSURANCE AGENCY), Inter body copy.
   ============================================================ */

:root {
  --blue: #084327;          /* the logo green (token name kept from core) */
  --blue-dark: #05301c;
  --blue-darker: #032214;
  --blue-light: #2b6e49;
  --ink: #10241a;
  --charcoal: #1f2a24;
  --grey: #c9c3b8;
  --grey-mid: #5b6560;
  --grey-light: #f7f4ef;
  --white: #ffffff;
  --danger: #c0392b;
  --warn: #8a5a00;
  --success: #1e8a4c;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 18px 50px rgba(24, 36, 28, 0.13);
  --shadow-sm: 0 6px 18px rgba(24, 36, 28, 0.06);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --font-display: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body {
  margin: 0; padding: 0; min-height: 100%;
  font-family: var(--font-body);
  color: var(--charcoal);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -0.01em; margin: 0; text-wrap: balance; }
p { margin: 0; }
button { font-family: inherit; }
img { max-width: 100%; }


/* ------------------------------------------------------------
   App shell
   ------------------------------------------------------------ */
#app { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; overflow-x: hidden; overflow-x: clip; }
.shell {
  width: 100%; max-width: 1060px; margin: 0 auto;
  padding: 0 22px; flex: 1; display: flex; flex-direction: column;
}

/* Top bar — white logo over video, blue logo over light surface */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 0 10px; gap: 14px;
}
.topbar .logo-link { display: inline-flex; align-items: center; text-decoration: none; }
.topbar img { height: 44px; display: block; }
@media (max-width: 560px) { .topbar img { height: 36px; } }

.top-actions { display: flex; align-items: center; gap: 10px; }

/* ------------------------------------------------------------
   Buttons
   ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  border: none; border-radius: 8px; padding: 14px 26px; cursor: pointer;
  transition: background .18s, transform .18s var(--ease), box-shadow .18s, border-color .18s, color .18s;
  text-decoration: none;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.btn[aria-disabled="true"], .btn[aria-disabled="true"]:hover { opacity: .55; cursor: not-allowed; transform: none; } /* 2.8.6: "Finishing upload…" stays focusable */
.btn svg { width: 17px; height: 17px; flex: none; }

.btn-primary { background: var(--blue); color: #fff; position: relative; overflow: hidden; }
.btn-primary:hover { background: var(--blue-dark); transform: translateY(-1px); box-shadow: 0 10px 24px rgba(8, 67, 39, .3); }
.btn-primary::after {
  content: ''; position: absolute; top: 0; left: -70%; width: 45%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-18deg); transition: left .55s ease; pointer-events: none;
}
.btn-primary:hover::after { left: 135%; }
/* A solid keyboard focus ring that clears 3:1 on the paper and on white */
.btn:focus-visible, .btn-link:focus-visible, .pill:focus-visible, .select-card:focus-visible, .choice-card:focus-visible,
.logo-link:focus-visible, .btn-add:focus-visible, .btn-remove:focus-visible,
.dropzone:focus-visible, .check-row input:focus-visible, .af-dropzone:focus-visible, a:focus-visible {
  outline: 3px solid var(--blue-light); outline-offset: 2px;
}

.btn-ghost {
  background: transparent; color: var(--charcoal);
  border: 1.5px solid #d6cfc2; padding: 12.5px 22px;
}
.btn-ghost:hover { border-color: var(--charcoal); }

.btn-glass {
  color: #fff; border: 1.5px solid rgba(255, 255, 255, .4);
  background: rgba(255, 255, 255, .1); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  padding: 10px 18px; font-size: 14px; border-radius: 8px;
}
.btn-glass:hover { background: rgba(255, 255, 255, .2); border-color: #fff; transform: translateY(-1px); }
body.mode-light .btn-glass { color: var(--charcoal); border-color: #d6cfc2; background: rgba(255,255,255,.7); }
body.mode-light .btn-glass:hover { border-color: var(--charcoal); }

.btn-link {
  background: none; border: none; color: var(--blue); font-weight: 600;
  cursor: pointer; font-size: 14px; padding: 6px 8px; font-family: var(--font-display);
}
.btn-link:hover { color: var(--blue-dark); text-decoration: underline; }

/* ------------------------------------------------------------
   Choice screens (role + line of business) — glass over video
   ------------------------------------------------------------ */
.choice-screen {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 34px 0 60px; text-align: center;
}
.eyebrow {
  font-family: var(--font-display); font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; font-size: .72rem;
  color: rgba(255, 255, 255, .85);
}
.eyebrow .accent { color: var(--blue-light); }
.choice-screen h1 {
  color: #fff; font-weight: 700; letter-spacing: -0.02em; line-height: 1.08;
  font-size: clamp(1.9rem, 4.6vw, 3.1rem);
  margin: 14px 0 10px; text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
}
.choice-screen .sub {
  color: rgba(255, 255, 255, .88); font-size: clamp(1rem, 1.6vw, 1.12rem);
  max-width: 560px; margin: 0 auto 38px; line-height: 1.6;
}
.choice-grid {
  display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; width: 100%;
}
.choice-card {
  flex: 1 1 240px; max-width: 300px; text-align: left; cursor: pointer;
  background: rgba(255, 255, 255, 0.32);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 18px; padding: 26px 24px 24px;
  box-shadow: 0 10px 40px rgba(24, 36, 28, .22), inset 0 1px 0 rgba(255, 255, 255, .45);
  transition: transform .28s var(--ease), background .28s, box-shadow .28s, border-color .28s;
  color: var(--ink); font-family: inherit;
  position: relative; overflow: hidden;
  /* 2.8.2: content starts at the top (a button centres it), so cards in one row line up */
  display: flex; flex-direction: column; align-items: flex-start;
}
.choice-card::before {
  content: ''; position: absolute; top: 0; left: 0; height: 3px; width: 0;
  background: var(--blue); transition: width .45s var(--ease);
}
.choice-card:hover, .choice-card:focus-visible {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.46);
  border-color: rgba(255, 255, 255, 0.85);
  box-shadow: 0 16px 50px rgba(24, 36, 28, .3), inset 0 1px 0 rgba(255, 255, 255, .6);
}
.choice-card:hover::before, .choice-card:focus-visible::before { width: 100%; }
.choice-card .chip {
  width: 46px; height: 46px; border-radius: 12px;
  background: rgba(8, 67, 39, .14); color: var(--blue-dark);
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px;
}
.choice-card .chip svg { width: 24px; height: 24px; }
.choice-card h3 { font-size: 1.12rem; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.choice-card p { font-size: .88rem; line-height: 1.55; color: #26322b; }
.choice-card .go {
  margin-top: auto; padding-top: 14px; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-display); font-weight: 600; font-size: .85rem; color: var(--blue-dark);
}
.choice-card .go svg { width: 15px; height: 15px; transition: transform .25s var(--ease); }
.choice-card:hover .go svg { transform: translateX(4px); }
.choice-card .badge {
  position: absolute; top: 14px; right: 14px;
  font-family: var(--font-display); font-weight: 700; font-size: .6rem;
  letter-spacing: .12em; text-transform: uppercase;
  background: var(--blue); color: #fff; border-radius: 99px; padding: 4px 10px;
}


/* Back link on choice screens */
.choice-back { margin-top: 34px; }
.choice-back .btn-link { color: rgba(255, 255, 255, .85); min-height: 40px; padding: 10px 12px; }
.choice-back .btn-link:hover { color: #fff; }

/* ------------------------------------------------------------
   Wizard chrome — light surface
   ------------------------------------------------------------ */
.wizard { flex: 1; display: flex; flex-direction: column; padding-bottom: 70px; }
.wizard-head { padding: 8px 0 22px; }
.step-eyebrow {
  font-family: var(--font-display); font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; font-size: .68rem; color: var(--grey-mid);
  display: flex; align-items: center; gap: 10px;
}
.step-eyebrow .accent-bar { width: 34px; height: 3px; background: var(--blue); border-radius: 2px; }
/* Step label: the colour bar keeps its size and stays by the first line when the label wraps */
.step-eyebrow { align-items: flex-start; line-height: 1.5; }
.step-eyebrow .accent-bar { flex: none; margin-top: calc(.75em - 1.5px); }
@media (max-width: 360px) { .step-eyebrow { letter-spacing: .1em; } }

/* Ascent progress — a climbing path with a dot and summit flag */
.ascent-progress { display: flex; align-items: center; gap: 16px; margin-top: 12px; }
.ascent-track { flex: 1; position: relative; height: 34px; }
.ascent-track svg { width: 100%; height: 100%; display: block; overflow: visible; }
.ascent-track .track-ghost { stroke: rgba(8, 67, 39, .16); stroke-width: 2.5; fill: none; }
.ascent-track .track-fill {
  stroke: var(--blue); stroke-width: 3; fill: none;
  stroke-linecap: round; transition: stroke-dashoffset .7s var(--ease);
}
.ascent-track .track-dot {
  fill: var(--blue); stroke: #fff; stroke-width: 2;
  transition: transform .7s var(--ease);
}
.ascent-track .track-flag {
  stroke: var(--blue); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
  fill: none; opacity: 0; transition: opacity .4s ease .3s;
}
.ascent-track.summit .track-flag { opacity: 1; }
.ascent-count {
  font-family: var(--font-display); font-weight: 700; font-size: .8rem;
  color: var(--blue-dark); white-space: nowrap;
}

/* Step panel */
.panel-enter { animation: rise .5s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.panel > h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.panel > .lede { color: var(--grey-mid); font-size: .98rem; line-height: 1.6; margin-bottom: 26px; max-width: 640px; }

.card {
  background: #fff; border: 1px solid #e7e1d6; border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 26px; margin-bottom: 18px;
}
/* 2.8.2: block, not flex, so a heading that wraps on a phone keeps "(optional)", the * and the Beta pill after its last
   word. Every card heading starts with its icon, which sits by the first line. */
.card h3 {
  font-size: 1rem; font-weight: 700; color: var(--ink); line-height: 1.35;
  position: relative; padding-left: 27px; margin-bottom: 4px;
}
.card h3 svg { width: 18px; height: 18px; color: var(--blue); position: absolute; left: 0; top: .2em; }
/* A card with no grey subtitle gives its first field the same room as the others. */
.card > h3 + :not(.card-sub):not(.err-msg) { margin-top: 16px; }
/* Home, mailing and physical address headings read as field labels, like City / State / ZIP under them. */
.card .card-sub.group-label { font-family: var(--font-display); font-weight: 600; font-size: .8rem; color: var(--label); line-height: 1.4; }
.card .card-sub { font-size: .85rem; color: var(--grey-mid); margin-bottom: 18px; line-height: 1.5; }

/* Selectable big cards (coverage type, home type) */
.select-grid { display: grid; gap: 14px; }
.select-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.select-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 720px) { .select-grid.cols-3, .select-grid.cols-2 { grid-template-columns: 1fr; } }
.select-card {
  position: relative; text-align: left; cursor: pointer; font-family: inherit;
  background: #fff; border: 1.5px solid #e4ded2; border-radius: 14px; padding: 20px 18px;
  transition: transform .28s var(--ease), border-color .2s, box-shadow .28s, background .2s;
  overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start; /* 2.8.2: content from the top, like .choice-card */
}
.select-card::before {
  content: ''; position: absolute; top: 0; left: 0; height: 3px; width: 0;
  background: var(--blue); transition: width .45s var(--ease);
}
.select-card:hover { transform: translateY(-3px); border-color: rgba(8, 67, 39, .4); box-shadow: 0 14px 34px rgba(24, 36, 28, .1); }
.select-card:hover::before { width: 100%; }
.select-card.selected { border-color: var(--blue); background: rgba(8, 67, 39, .05); box-shadow: 0 8px 24px rgba(8, 67, 39, .12); }
.select-card.selected::before { width: 100%; }
.select-card .chip {
  width: 42px; height: 42px; border-radius: 11px;
  background: rgba(8, 67, 39, .1); color: var(--blue);
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: 12px;
}
.select-card .chip svg { width: 22px; height: 22px; }
.select-card h4 { font-size: 1rem; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.select-card p { font-size: .82rem; color: var(--grey-mid); line-height: 1.5; }
.select-card .badge {
  position: absolute; top: 12px; right: 12px;
  font-family: var(--font-display); font-weight: 700; font-size: .58rem;
  letter-spacing: .12em; text-transform: uppercase;
  background: var(--blue); color: #fff; border-radius: 99px; padding: 3px 9px;
}

/* ------------------------------------------------------------
   Form fields
   ------------------------------------------------------------ */
.grid { display: grid; gap: 16px; }
.grid.cols-2 { grid-template-columns: 1fr 1fr; }
.grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 720px) {
  .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; }
  .grid.cols-4 { grid-template-columns: 1fr 1fr; }
}

.field label {
  display: block; font-family: var(--font-display); font-weight: 600;
  font-size: .8rem; color: var(--label); margin-bottom: 7px;
}
.req { color: var(--blue); }
.field input, .field select, .field textarea {
  /* 16px minimum stops iOS Safari from auto-zooming on focus */
  width: 100%; padding: 12px 14px; font-family: var(--font-body); font-size: 16px;
  border: 1.5px solid #dcd5c8; border-radius: 8px; background: #fff; color: var(--charcoal);
  transition: border-color .15s, box-shadow .15s;
}
/* 2.8.2: text boxes, dropdowns and date fields share one height, so side-by-side rows line up. The dropdown draws its
   own arrow, so its text lines up with the text boxes, and an unanswered one shows its prompt in placeholder grey. */
.field input:not([type=checkbox]):not([type=radio]):not([type=file]), .field select { height: 48px; }
.field select {
  -webkit-appearance: none; appearance: none; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%233a4a41' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center;
}
.field select:not([data-empty-answer]):has(option[value=""]:checked) { color: #757575; }
.field select option { color: var(--charcoal); }
/* High-contrast modes: the native arrow, drawn in the system colours */
@media (forced-colors: active) { .field select { -webkit-appearance: auto; appearance: auto; background-image: none; padding-right: 14px; } }
/* Autofill pre-filled highlight (Joe's PR #1 review item 28: `.af-pre` alone lost to `.field input`). Item 40: this rule
   sits ABOVE the :focus and .has-error rules, which share its specificity, so a pre-filled field that fails validation
   turns red and a focused one blue. Item 37: the selected pill keeps a readable colour instead of inheriting #fff. */
.field input.af-pre, .field select.af-pre, .field textarea.af-pre { background-color: #e9f2ec; border-color: #b8d3c1; } /* colour only: keeps the dropdown arrow */
.pill-row.af-pre .pill.selected { background: #e9f2ec; border-color: #b8d3c1; color: var(--blue-dark); box-shadow: inset 0 0 0 1px #b8d3c1; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(8, 67, 39, .13);
}
.field.has-error input, .field.has-error select, .field.has-error textarea {
  border-color: var(--danger); box-shadow: 0 0 0 3px rgba(192, 57, 43, .1);
}
.field .err-msg { color: var(--danger); font-size: .75rem; margin-top: 5px; font-weight: 600; }
.field .hint { color: var(--grey-mid); font-size: .78rem; margin-top: 5px; line-height: 1.45; }
.field .warn-msg { color: var(--warn); font-size: .75rem; margin-top: 5px; font-weight: 600; line-height: 1.45; }
.field .warn-msg:empty { display: none; }
.field textarea { resize: vertical; min-height: 90px; }

/* Checkbox / toggle rows */
.check-row {
  display: flex; align-items: flex-start; gap: 11px; cursor: pointer; min-height: 40px; padding: 4px 0;
  font-size: .92rem; color: #2a352f; line-height: 1.5;
  -webkit-user-select: none; user-select: none;
}
.check-row input {
  width: 19px; height: 19px; margin: 1px 0 0; accent-color: var(--blue); cursor: pointer; flex: none;
}
.check-row .check-title { font-weight: 600; color: var(--ink); display: block; }
.check-row .check-sub { font-size: .82rem; color: var(--grey-mid); display: block; margin-top: 2px; }

/* Pill toggles (yes/no, contact method) */
.pill-row { display: flex; flex-wrap: wrap; gap: 9px; }
.pill {
  font-family: var(--font-display); font-weight: 600; font-size: .86rem;
  padding: 10px 20px; border-radius: 99px; cursor: pointer;
  border: 1.5px solid #dcd5c8; background: #fff; color: #4a5650;
  transition: all .18s var(--ease); text-transform: capitalize;
}
.pill:hover { border-color: var(--blue-light); }
.pill.selected { border-color: var(--blue); background: var(--blue); color: #fff; box-shadow: 0 6px 16px rgba(8, 67, 39, .28); }

/* Repeating items (drivers, vehicles, losses) */
.repeat-item {
  border: 1.5px solid #e4ded2; border-radius: 12px; padding: 20px;
  margin-bottom: 14px; position: relative; background: #fcfaf6;
}
.repeat-item .repeat-head {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px;
}
.repeat-item .repeat-title {
  font-family: var(--font-display); font-weight: 700; font-size: .82rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--blue-dark);
  display: flex; align-items: center; gap: 8px;
}
.repeat-item .repeat-title .num {
  width: 24px; height: 24px; border-radius: 50%; background: var(--blue); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .72rem; letter-spacing: 0;
}
.btn-remove {
  background: none; border: none; color: var(--grey-mid); font-size: .8rem;
  font-family: var(--font-display); font-weight: 600; cursor: pointer; padding: 10px 12px; min-height: 40px;
  border-radius: 6px; transition: color .15s, background .15s;
}
.btn-remove:hover { color: var(--danger); background: rgba(192, 57, 43, .07); }
.btn-add {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(8, 67, 39, .07); color: var(--blue-dark);
  border: 1.5px dashed rgba(8, 67, 39, .45); border-radius: 10px;
  font-family: var(--font-display); font-weight: 600; font-size: .9rem;
  padding: 12px 20px; cursor: pointer; width: 100%; justify-content: center;
  transition: background .18s, border-color .18s;
}
.btn-add:hover { background: rgba(8, 67, 39, .12); border-color: var(--blue); }
.btn-add svg { width: 16px; height: 16px; }

/* Upload zones */
.upload-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 720px) { .upload-grid { grid-template-columns: 1fr; } }
.upload-grid:has(> :only-child) { grid-template-columns: 1fr; } /* 2.8.2: one box on its own takes the full width */
.dropzone {
  border: 1.5px dashed #c9c0b0; border-radius: 12px; padding: 20px 16px;
  text-align: center; cursor: pointer; background: #fcfaf6;
  transition: border-color .18s, background .18s;
}
.dropzone:hover, .dropzone.dragover { border-color: var(--blue); background: rgba(8, 67, 39, .05); }
.dropzone .dz-icon { color: var(--blue); margin-bottom: 8px; }
.dropzone .dz-icon svg { width: 22px; height: 22px; }
.dropzone .dz-label { font-family: var(--font-display); font-weight: 600; font-size: .86rem; color: var(--ink); }
.dropzone .dz-sub { font-size: .74rem; color: var(--grey-mid); margin-top: 3px; }
.dropzone.has-file { border-style: solid; border-color: var(--success); background: rgba(30, 138, 76, .05); }
.dropzone.has-file .dz-icon { color: var(--success); }
.dropzone .dz-file { font-size: .8rem; color: var(--ink); font-weight: 600; overflow-wrap: anywhere; margin-top: 4px; }
.dropzone .dz-clear { color: var(--danger); font-size: .8rem; font-weight: 600; margin-top: 2px; display: inline-flex; align-items: center; min-height: 40px; padding: 10px 16px; }

/* Uploaded-file rows for the open-ended "Anything else" zone */
.file-row {
  display: flex; align-items: center; gap: 10px;
  border: 1.5px solid #e4ded2; background: #fcfaf6; border-radius: 10px;
  padding: 10px 14px; margin-bottom: 10px; font-size: .88rem;
}
.file-row svg { width: 16px; height: 16px; color: var(--blue); flex: none; }
.file-row .fr-name { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; flex: 1; min-width: 0; }
/* Phones: the file name gets the whole first line; its size sits under it and Remove at the right */
@media (max-width: 480px) {
  .file-row { flex-wrap: wrap; row-gap: 0; }
  .file-row .fr-name { flex: 1 1 calc(100% - 26px); }
  .file-row .fr-size { margin-left: 26px; }
  .file-row .btn-remove { margin-left: auto; }
}
.file-row .fr-size { color: var(--grey-mid); font-size: .78rem; white-space: nowrap; }

/* Wizard footer nav */
.wizard-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-top: 30px;
}
.wizard-nav .spacer { flex: 1; }
/* Back and Continue / Submit: a 48px floor at every width (Montserrat's line height is compact) */
.wizard-nav .btn { min-height: 48px; }

/* Error banner */
.banner {
  border-radius: 12px; padding: 14px 18px; margin-bottom: 18px;
  font-size: .9rem; line-height: 1.5; display: flex; gap: 10px; align-items: flex-start;
}
.banner svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.banner-error { background: rgba(192, 57, 43, .08); border: 1.5px solid rgba(192, 57, 43, .3); color: #8e2b20; }
.banner-info { background: rgba(8, 67, 39, .07); border: 1.5px solid rgba(8, 67, 39, .25); color: var(--blue-darker); }

/* Resume-draft banner. 2.8.2: a banner at the top of the opening screen (it sits before #app), so it never covers the
   role cards on a short phone. It used to float at the bottom, centred with translateX(-50%), which the rise animation
   replaced, so Resume sat off the screen on phones and tablets. It goes away when a role is picked and comes back on Back
   or the logo while nothing has been typed (app.js), so it never disappears mid-form or moves anything under the pointer. */
.draft-bar {
  position: relative; z-index: 60; display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  background: var(--ink); color: #fff; border-radius: 14px;
  padding: 13px 18px; box-shadow: var(--shadow); font-size: .88rem;
  width: calc(100% - 32px); max-width: 560px; margin: 17px auto 0;
  animation: rise .5s var(--ease) both;
}
.draft-bar > div { flex: 1 1 200px; line-height: 1.5; }
.draft-bar b { white-space: nowrap; }
.draft-bar .btn { padding: 8px 16px; font-size: .82rem; }
.draft-bar .btn-link { color: #b7dcc3; }

/* 2.8.2: no single word left alone on a line in headings and short copy (older browsers ignore this) */
.choice-screen h1, .panel > h2, .card h3, .check-row .check-title, .success-card h1,
.next-steps .ns span, .dropzone .dz-label { text-wrap: balance; }
.eyebrow, .site-footer .foot-line, .choice-screen .sub, .choice-card p, .select-card p, .panel > .lede, .card .card-sub, .check-row .check-sub,
.dropzone .dz-sub, .banner > div, .success-card .sub, .field .hint, .field label { text-wrap: pretty; }
.success-card a[href^="tel:"] { white-space: nowrap; } /* the office number never splits */

/* 2.8.2: phones (from a render check of every screen at 320, 375 and 414 wide) */
@media (max-width: 480px) {
  /* The main button sits above Back, both full width, so "Submit quote request" never wraps */
  .wizard-nav { flex-direction: column-reverse; align-items: stretch; gap: 10px; }
  .wizard-nav .spacer { display: none; }
  .wizard-nav .btn { width: 100%; white-space: nowrap; }
  /* Less nested padding, so fields and their hints have room */
  .card { padding: 20px 16px; }
  .repeat-item { padding: 16px 14px; }
  .field textarea { min-height: 130px; }
  /* Resume bar: the sentence on its own row, Resume and Discard together below it, easier to tap */
  .draft-bar > div { flex-basis: 100%; }
  .draft-bar .btn { padding: 11px 20px; }
  .draft-bar .btn-link { padding: 11px 10px; }
}

/* ------------------------------------------------------------
   Success screen
   ------------------------------------------------------------ */
.success-screen {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; padding: 40px 0 80px;
}
.success-card {
  background: rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 22px; padding: 46px 40px;
  box-shadow: 0 20px 60px rgba(24, 36, 28, .3);
  max-width: 560px; width: 100%; animation: rise .6s var(--ease) both;
}
.summit-glyph { margin: 0 auto 18px; width: 84px; height: 84px; }
.summit-glyph .draw { stroke-dasharray: 400; stroke-dashoffset: 400; animation: drawIn 1.4s var(--ease) .3s forwards; }
.summit-glyph .dot { opacity: 0; animation: fadeIn .5s ease 1.5s forwards; }
@keyframes drawIn { to { stroke-dashoffset: 0; } }
@keyframes fadeIn { to { opacity: 1; } }
.success-card h1 { font-size: 1.7rem; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.success-card .ref {
  display: inline-block; font-family: var(--font-display); font-weight: 700; white-space: nowrap; /* 2.8.6: never splits after "AAG-" */
  background: var(--ink); color: #fff; border-radius: 10px;
  padding: 10px 22px; letter-spacing: .06em; margin: 14px 0 6px; font-size: 1.02rem;
}
.success-card .sub { color: #2a352f; font-size: .93rem; line-height: 1.6; }
@media (max-width: 340px) { /* 2.8.6: on the narrowest phones the one-line reference still fits inside the card */
  .success-card { padding: 36px 18px; }
  .success-card .ref { font-size: .9rem; padding: 10px 14px; }
}
.next-steps { text-align: left; margin: 26px 0 8px; display: grid; gap: 12px; }
.next-steps .ns {
  display: flex; gap: 13px; align-items: flex-start; font-size: .89rem; color: #26322b; line-height: 1.5;
}
.next-steps .ns .n {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  background: var(--blue); color: #fff; font-family: var(--font-display);
  font-weight: 700; font-size: .78rem; display: inline-flex; align-items: center; justify-content: center;
}
.next-steps .ns b { color: var(--ink); }
/* Phones: a tighter success card, so the words have room */
@media (max-width: 560px) { .success-card { padding: 32px 22px; } }

/* ------------------------------------------------------------
   Footer
   ------------------------------------------------------------ */
.site-footer {
  text-align: center; padding: 20px 22px 26px; font-size: .78rem;
  color: rgba(255, 255, 255, .75); position: relative; z-index: 1;
}
.site-footer a { color: rgba(255, 255, 255, .9); text-decoration: none; font-weight: 600; }
.site-footer a:hover { text-decoration: underline; }
.site-footer a[href^="tel:"] { white-space: nowrap; } /* 2.8.3: the office number never splits */
body.mode-light .site-footer { color: var(--grey-mid); }
body.mode-light .site-footer a { color: var(--blue-dark); }
.site-footer .ver { opacity: .7; font-variant-numeric: tabular-nums; }

/* Short screens (small phones, iPad landscape with Safari's bars): a tighter success card */
@media (max-height: 820px) {
  .success-screen { padding: 16px 0 36px; }
  .success-card { padding-top: 30px; padding-bottom: 30px; }
  .summit-glyph { width: 72px; height: 72px; margin-bottom: 10px; }
  .next-steps { margin: 18px 0 6px; gap: 9px; }
}

/* Reveal-on-scroll for long commercial page */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal.no-anim { transition: none; }

/* Submitting spinner */
.spin {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #fff;
  animation: spin .7s linear infinite; display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }
.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; } /* 2.8.6: read by screen readers only */

/* Crash fallback */
.fallback {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px; text-align: center;
}
.fallback .card { max-width: 460px; padding: 40px 32px; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .panel-enter, .success-card, .draft-bar { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .choice-card, .select-card, .btn { transition: none; }
  .btn-primary::after { display: none; }
  .summit-glyph .draw { animation: none; stroke-dashoffset: 0; }
  .summit-glyph .dot { animation: none; opacity: 1; }
  .ascent-track .track-fill, .ascent-track .track-dot-h { transition: none; }
}


/* ==== Autofill (CENTRiO beta) ==== */
.af-card { border: 1px dashed #084327; background: #f4f8f5; }
.af-dropzone {
  margin-top: 10px; border: 2px dashed #b6cfbe; border-radius: 10px; padding: 22px;
  text-align: center; cursor: pointer; background: #fff; transition: border-color .15s;
}
.af-dropzone:hover { border-color: #084327; }
.af-files { margin: 10px 0; }
.af-error { color: #b00020; margin-top: 10px; font-size: 14px; }
/* The .af-pre highlight rules live above .field input:focus (item 40). */
/* Item 29: the Autofill card's file rows are not inside a .dropzone, so its Remove read as plain text. */
.af-card .dz-file { font-size: .8rem; color: var(--ink); font-weight: 600; word-break: break-all; margin-top: 4px; }
.af-card .dz-clear { color: var(--danger); font-size: .74rem; font-weight: 600; margin-top: 6px; display: inline-block; cursor: pointer; }
.af-card .dz-label { font-family: var(--font-display); font-weight: 600; font-size: .86rem; color: var(--ink); }
.af-card .dz-sub { font-size: .74rem; color: var(--grey-mid); margin-top: 3px; }
.af-notice { margin: 10px 0; padding: 10px 12px; border-radius: 8px; background: #e9f2ec; border: 1px solid #b8d3c1; font-size: 14px; }
#af-run { margin-top: 10px; }

.af-done { border-style: solid; border-color: #bfe3c5; background: #f2fbf4; }

/* Autofill is a Beta for every agent (Joe, 2026-09-10) — a small pill beside the card title */
.af-beta { display:inline-block; margin-left:8px; padding:2px 8px; border-radius:999px; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; vertical-align:middle; background:#fff3cd; color:#7a5a00; border:1px solid #f0d27a; }


/* ============================================================
   THE FAIRWAY GROUP SKIN (appended to core's stylesheet by the build)
   The logo is one dark green on off-white paper (about 7% ink, 93%
   paper), so the page is mostly paper with the green as the accent.
   Contrast (WCAG): green #084327 on paper 10.4:1, on white 11.4:1;
   mid green #2b6e49 on paper 5.6:1; grey #5b6560 on paper 5.5:1.
   ============================================================ */
:root {
  --paper: #f7f4ef;          /* the logo's paper */
  --paper-soft: #faf8f4;     /* behind the forms */
  --card: #fffefb;
  --brand: #084327;          /* the logo green */
  --brand-mid: #2b6e49;
  --label: #3a4a41;
  --line: #e4ded2;
  --line-strong: #d3cbbc;
  --body-soft: #3d4a43;
  --font-serif: 'Spectral', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
}
/* The canvas colour sits on html only: a body background would paint over the fixed paper layers. */
html { background: var(--paper); }
.fw-bg {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 50% 32%, #fbfaf7 0%, rgba(251, 250, 247, 0) 70%),
    linear-gradient(180deg, #f7f4ef 0%, #f2ede4 100%);
}
.fw-veil {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0; transition: opacity .6s var(--ease);
  background: linear-gradient(180deg, #f5f1ea 0%, var(--paper-soft) 240px, var(--paper-soft) 100%);
}
body.mode-light .fw-veil { opacity: 1; }

/* Headlines in the serif that echoes the wordmark */
.choice-screen h1, .panel > h2, .success-card h1 {
  font-family: var(--font-serif); font-weight: 600; letter-spacing: -0.005em; color: var(--brand);
}
.panel > h2 { font-size: clamp(1.6rem, 3.2vw, 2.15rem); line-height: 1.15; }
.success-card h1 { line-height: 1.15; margin-bottom: 10px; }   /* Spectral's normal leading is about 1.5: too loose on two lines */
/* Ledes and the Personal/Commercial subtitle: even lines, so no short last line under the heading */
.panel > .lede, .choice-screen .sub { text-wrap: balance; }
/* Field labels: Montserrat's normal leading (about 1.17) sat tighter than the group labels (1.4) when a label wraps */
.field label { line-height: 1.4; }
/* 320px phones: "As shown on the license" is about 2px wider than the text box in Inter; the right padding gives it */
@media (max-width: 340px) { .field input { padding-right: 10px; } }
.req { color: var(--brand-mid); }
/* A field's border is its only visible edge (a white box on a near-white card), so it gets 3:1 (WCAG 1.4.11):
   #8a8272 is 3.8:1 on white and on the card. Focus (green), errors (red) and Autofill outrank it. */
.field input, .field select, .field textarea { border-color: #8a8272; }
/* A field in its error state keeps its red border and still shows the keyboard focus (core's .has-error rule outranks
   .field input:focus) */
.field.has-error input:focus, .field.has-error select:focus, .field.has-error textarea:focus { outline: 3px solid var(--brand-mid); outline-offset: 2px; }

/* Top bar: the horizontal lockup on every screen (the home page shows the big one instead) */
.topbar .logo-link { border-radius: 6px; }
.topbar img.logo-h { height: 46px; width: auto; display: block; }
@media (max-width: 560px) { .topbar img.logo-h { height: 38px; } }
.btn-glass, body.mode-light .btn-glass {
  color: var(--charcoal); border-color: var(--line-strong); background: rgba(255, 255, 255, .75);
  -webkit-backdrop-filter: none; backdrop-filter: none; min-height: 40px;
}
.btn-glass:hover, body.mode-light .btn-glass:hover { border-color: var(--brand); color: var(--brand); background: #fff; }
.btn-primary:hover { background: var(--blue-dark); }

/* Choice screens (home, Personal/Commercial, success) sit on the paper, not over a video */
.eyebrow { color: var(--brand-mid); }
.eyebrow .accent { color: var(--brand-mid); }
.choice-screen h1 { color: var(--brand); text-shadow: none; font-size: clamp(2rem, 4.6vw, 3.05rem); line-height: 1.1; }
.choice-screen .sub { color: var(--body-soft); }
.choice-card {
  background: var(--card); border: 1px solid var(--line);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 0 10px 30px rgba(24, 36, 28, .07);
}
.choice-card:hover, .choice-card:focus-visible {
  background: #fff; border-color: rgba(8, 67, 39, .32);
  box-shadow: 0 18px 40px rgba(24, 36, 28, .12);
}
.choice-card .chip { background: rgba(8, 67, 39, .08); color: var(--brand); }
.choice-card h3 { color: var(--ink); }
.choice-card p { color: var(--body-soft); }
.choice-card .go { color: var(--brand); }
.choice-back .btn-link { color: var(--grey-mid); }
.choice-back .btn-link:hover { color: var(--brand); }

/* Progress: a fairway from tee to pin. The ball and the flag are HTML over the stretched SVG, so they keep their shape. */
.ascent-track .track-ghost { stroke: rgba(8, 67, 39, .14); stroke-width: 3; }
.ascent-track .track-fill { stroke: var(--brand-mid); }
.ascent-track .track-dot-h {
  position: absolute; left: .67%; top: 24px; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px;
  border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--brand), 0 2px 5px rgba(24, 36, 28, .2);
  transition: left .7s var(--ease), top .7s var(--ease);
}
.ascent-track .track-flag-h {
  position: absolute; left: 98.33%; top: 22px; width: 16px; height: 26px; margin: -25px 0 0 -3px; pointer-events: none;
}
.ascent-track .track-flag-h svg { width: 100%; height: 100%; display: block; overflow: visible; }
.ascent-track .track-pin { stroke: var(--brand); stroke-width: 1.7; stroke-linecap: round; fill: none; opacity: .55; }
.ascent-track .track-flag { fill: var(--brand); stroke: none; opacity: .32; transition: opacity .4s ease .3s; }
.ascent-track.summit .track-flag, .ascent-track.summit .track-pin { opacity: 1; }
.ascent-progress { padding-right: 4px; }

/* Cards and forms on the lighter paper */
.card { background: var(--card); border-color: var(--line); }
.select-card, .pill, .field input, .field select, .field textarea { background-color: #fff; }
.pill.selected { background: var(--brand); border-color: var(--brand); }
/* Tap targets at least 40px: pills, the logo link, the resume banner's buttons */
.pill { min-height: 40px; }
.topbar .logo-link { min-height: 40px; }
.draft-bar .btn, .draft-bar .btn-link { min-height: 40px; }
.repeat-item { background: #fcfaf6; }

/* Resume banner: the green-black bar, a paper-coloured Resume, a white focus ring */
.draft-bar .btn-primary { background: var(--paper); color: var(--brand); }
.draft-bar .btn-primary:hover { background: #fff; }
.draft-bar .btn:focus-visible, .draft-bar .btn-link:focus-visible { outline-color: #fff; }
.draft-bar > div { text-wrap: pretty; }   /* also core 2.8.6's upload note, which reuses the bar */

/* Success */
.success-card {
  background: var(--card); border: 1px solid var(--line);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 0 20px 50px rgba(24, 36, 28, .10);
}
.summit-glyph { color: var(--brand); overflow: visible; }
.summit-glyph .draw { stroke: currentColor; stroke-dasharray: 100; stroke-dashoffset: 100; }
.summit-glyph .flag { fill: var(--brand); }
.summit-glyph .ball { fill: #fff; stroke: var(--brand); stroke-width: 2; }
.success-card .ref { background: var(--brand); }
.success-card .sub.ref-note { font-size: .8rem; color: var(--grey-mid); }
.success-card .sub.questions { font-size: .85rem; margin-top: 10px; }
.success-card .questions a { color: var(--brand); font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
.success-card .questions a:hover { text-decoration: underline; }
/* core 2.8.6's narrowest-phone sides (18px), which the 560px phone rule from patch_css.py would otherwise override */
@media (max-width: 340px) { .success-card { padding-left: 18px; padding-right: 18px; } }
.next-steps .ns .n { background: var(--brand); }

/* Footer: the practice, the privacy line (Personal/Commercial screen), Powered by Ascension, the version */
.site-footer, body.mode-light .site-footer {
  color: var(--grey-mid); display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 22px 22px 26px; line-height: 1.5;
}
.site-footer .foot-line { display: block; max-width: 560px; }
.site-footer .nw { white-space: nowrap; }
/* Phones: the practice line would wrap around its dot and leave it stranded; stack the two phrases instead */
@media (max-width: 560px) {
  .site-footer .foot-line .nw { display: block; }
  .site-footer .foot-line .sep { display: none; }
}
.site-footer .foot-line.disclosure { font-size: .74rem; }
.site-footer .powered { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .74rem; }
.site-footer .powered .asc-i { height: 16px; width: auto; }
.site-footer .powered .asc-w { height: 11px; width: auto; margin-top: 1px; }
.site-footer .ver { font-size: .68rem; opacity: 1; }   /* core's .7 put it at about 3:1 on the paper */

/* Crash fallback page */
.fallback .card { background: var(--card); }
.fallback h2 { font-family: var(--font-serif); color: var(--brand); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .fw-veil { transition: none; }
  .summit-glyph .draw { animation: none; stroke-dashoffset: 0; }
  .ascent-track .track-dot-h, .ascent-track .track-flag { transition: none; }
}

/* ============================================================
   HOME, OPTION B "SPLIT FAIRWAY"
   Words on the left, an arched window on the right (the hole
   seen from the tee: a cross-mown fairway, deeper rough, tree
   lines, bunkers, and the logo mark as the green at the far
   end, on a pale putting surface).
   Phones and portrait tablets: one column, the window becomes a
   short band under the button. Everything is scoped to .hero-b.
   Contrast on the paper: green 10.4:1, mid green 5.6:1,
   grey 5.5:1, label 9:1.
   ============================================================ */
.hero-b {
  flex: 1; display: grid; align-content: center;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: 1fr auto auto 1fr;
  grid-template-areas: ". art" "copy art" "handy art" ". art";
  column-gap: clamp(44px, 5.5vw, 80px);
  padding: 30px 0 52px;
}
.hero-b .hb-copy { grid-area: copy; max-width: 540px; }
.hero-b .hb-eyebrow {
  display: flex; align-items: center; gap: 14px; margin: 0 0 22px;
  font-family: var(--font-display); font-weight: 600; font-size: .74rem; line-height: 1.4;
  letter-spacing: .2em; text-transform: uppercase; color: var(--brand-mid);
}
.hero-b .hb-eyebrow::before { content: ''; flex: none; width: 34px; height: 1px; background: currentColor; }
.hero-b h1 {
  font-family: var(--font-serif); font-weight: 500; color: var(--brand);
  font-size: clamp(2.15rem, 1.1rem + 3.4vw, 3.55rem); line-height: 1.05; letter-spacing: -0.015em;
  margin: 0 0 22px; text-wrap: balance;
}
.hero-b .hb-sub {
  font-size: 1.08rem; line-height: 1.7; color: var(--body-soft);
  max-width: 31em; margin: 0 0 34px; text-wrap: pretty;
}
.hero-b .hb-cta { display: flex; flex-direction: column; align-items: flex-start; }
.hero-b .hb-start { font-size: 15.5px; padding: 17px 30px; min-height: 54px; letter-spacing: .01em; }
.hero-b .hb-micro { margin: 14px 0 0; font-size: .84rem; line-height: 1.5; color: var(--grey-mid); text-wrap: pretty; }

/* Helpful to have handy */
.hero-b .hb-handy { grid-area: handy; max-width: 540px; margin-top: 42px; padding-top: 24px; border-top: 1px solid var(--line); }
.hero-b .hb-handy h2 {
  font-family: var(--font-display); font-weight: 600; font-size: .72rem; line-height: 1.4;
  letter-spacing: .18em; text-transform: uppercase; color: var(--label); margin: 0 0 16px;
}
.hero-b .hb-handy ul {
  list-style: none; margin: 0; padding: 0;
  /* the second column is wider so "Current dec pages (optional)" keeps to one line wherever the column allows */
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 12px 24px;
}
/* 900-999px: the split column is too narrow for 1fr/1.25fr to keep "Current dec pages (optional)" on one line */
@media (min-width: 900px) and (max-width: 999px) {
  .hero-b .hb-handy ul { grid-template-columns: auto auto; column-gap: 16px; }
}
.hero-b .hb-handy li { display: flex; align-items: center; gap: 12px; font-size: .93rem; line-height: 1.35; color: var(--ink); }
.hero-b .hb-chip {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(8, 67, 39, .07); color: var(--brand);
}
.hero-b .hb-chip svg { width: 17px; height: 17px; }
.hero-b .hb-opt { color: var(--grey-mid); }

/* The window */
.hero-b .hb-window {
  grid-area: art; align-self: center; justify-self: end; position: relative; margin: 0;
  filter: drop-shadow(0 26px 34px rgba(24, 36, 28, .08)) drop-shadow(0 2px 3px rgba(24, 36, 28, .05));
}
.hero-b .hb-window.is-panel { aspect-ratio: 440 / 560; width: min(420px, calc((100vh - 250px) * .786), 42vw); min-width: 330px; }
.hero-b .hb-window.is-band { display: none; aspect-ratio: 640 / 260; width: 100%; }
.hero-b .hb-scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.hero-b .hb-mark { position: absolute; height: auto; display: block; }
.hero-b .hb-frame { fill: var(--card); stroke: rgba(8, 67, 39, .12); stroke-width: 1; vector-effect: non-scaling-stroke; }
.hero-b .hb-inner { fill: none; stroke: rgba(8, 67, 39, .26); stroke-width: 1; vector-effect: non-scaling-stroke; }
/* the art's colours are tints and shades of the two brand greens and the paper, worked out in the script along the hole;
   the stripes and the trees' shade are the logo green over them, the putting surface a pale tint of the mid green (the
   mark keeps strong contrast on it), the bunkers the one sand in two tones under a faint turf lip */
.hero-b .hb-stripes { fill: rgba(8, 67, 39, .075); }
.hero-b .hb-stripes-lt { fill: rgba(251, 249, 244, .1); }
.hero-b .hb-shade { fill: rgba(8, 67, 39, .2); }
.hero-b .hb-fringe { fill: #bacbbd; }
.hero-b .hb-putt { fill: #d2dcd1; }
.hero-b .hb-sand-lip { fill: rgba(8, 67, 39, .12); }
.hero-b .hb-sand-face { fill: #d6c8aa; }
.hero-b .hb-sand-floor { fill: #ece2cc; }

/* One column: phones and portrait tablets */
@media (max-width: 899px) {
  .hero-b {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: none;
    grid-template-areas: "copy" "art" "handy"; align-content: start;
    padding: 22px 0 36px;
  }
  .hero-b .hb-window.is-panel { display: none; }
  /* the band shares the copy's and the list's 540px column */
  .hero-b .hb-window.is-band { display: block; justify-self: start; width: 100%; max-width: 540px; margin-top: 38px; }
  .hero-b .hb-handy { margin-top: 34px; padding-top: 0; border-top: 0; }
}
@media (max-width: 480px) {
  .hero-b { padding-top: 18px; }
  .hero-b .hb-eyebrow { font-size: .68rem; letter-spacing: .18em; gap: 12px; margin-bottom: 18px; }
  .hero-b .hb-eyebrow::before { width: 24px; }
  .hero-b h1 { margin-bottom: 18px; }
  .hero-b .hb-sub { font-size: 1rem; line-height: 1.65; margin-bottom: 28px; }
  .hero-b .hb-cta { align-items: stretch; }
  .hero-b .hb-start { width: 100%; }
  .hero-b .hb-micro { text-wrap: balance; }
  .hero-b .hb-handy ul { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}
@media (max-width: 360px) {
  .hero-b .hb-eyebrow { letter-spacing: .12em; }
  .hero-b .hb-eyebrow::before { display: none; }
}
/* Short windows (small phones, landscape phones): tighten the vertical rhythm so Start stays in the first screen */
@media (max-height: 600px) {
  .hero-b { padding-top: 10px; }
  .hero-b .hb-eyebrow { margin-bottom: 12px; }
  .hero-b h1 { margin-bottom: 12px; }
  .hero-b .hb-sub { margin-bottom: 20px; }
}

/* One column (phones and portrait tablets), centred (Joe, 2026-10-06: left-justified looked odd once the window drops
   under the words). The column is centred on the page, the words and the button centred in it, the eyebrow between two
   hairlines, the band a little wider, and the handy list a centred block whose items stay left-aligned. */
@media (max-width: 899px) {
  .hero-b { justify-items: center; text-align: center; }
  .hero-b .hb-copy { justify-self: center; max-width: 560px; }
  .hero-b .hb-eyebrow { justify-content: center; }
  .hero-b .hb-eyebrow::after { content: ''; flex: none; width: 34px; height: 1px; background: currentColor; }
  .hero-b .hb-sub { margin-left: auto; margin-right: auto; }
  .hero-b .hb-cta { align-items: center; }
  .hero-b .hb-window.is-band { justify-self: center; max-width: 640px; }
  .hero-b .hb-handy { justify-self: center; width: 100%; max-width: 560px; }
  .hero-b .hb-handy ul { grid-template-columns: repeat(2, max-content); justify-content: center; column-gap: 40px; text-align: left; }
}
@media (max-width: 480px) {
  .hero-b .hb-cta { align-items: stretch; }
  /* centred, the two hairlines would push the eyebrow onto two lines on a phone */
  .hero-b .hb-eyebrow::before, .hero-b .hb-eyebrow::after { display: none; }
  .hero-b .hb-handy ul { grid-template-columns: max-content; }
}

/* ============================================================
   FIRST-VISIT MOTION (Joe, 2026-10-06: trees, mow, breeze, words)
   renderHome adds hb-in and hm-<word> to .hero-b once per browser
   tab (and drops them 2.4 s after the first drawn frames): Back,
   the logo and "Start a new quote" show the page at rest. Transform and opacity
   only, inside the window's clip or a few px on the words, so
   nothing shifts and nothing scrolls sideways. All still by
   about 1.3 s; nothing loops. Start My Quote and its micro line
   never move. Pivots are given in the SVG's own units by B.js
   (--hb-o), not taken from each shape's box.
   In a mix the parts take turns: the words first, the trees
   just after, the mowing last.
   Reduce motion: the last block turns each of them off, so the
   final state shows.
   ============================================================ */

/* trees: each side's tree line grows in from its own edge of the window, from its outer foot, the far layer first and
   the near ones a touch later and from further out. Only the far layer fades in (briefly); the two near ones slide in
   whole from past the window's edge, so no layer shows through another. The low woods behind the green stay put; the
   trees' shade on the rough comes in as the near layers settle over it. */
.hero-b.hb-in.hm-trees .hb-trees-l { --hb-side: -1; }
.hero-b.hb-in.hm-trees .hb-trees-r { --hb-side: 1; }
.hero-b.hb-in.hm-trees.hm-words { --hb-t0: 40ms; }
.hero-b.hb-in.hm-trees .hb-tl {
  transform-box: view-box; transform-origin: var(--hb-o);
  animation: hbTrees 900ms cubic-bezier(.25, .6, .3, 1) calc(var(--hb-t0, 0ms) + var(--hb-d, 0ms)) backwards;
}
.hero-b.hb-in.hm-trees .hb-tl1 { --hb-g: 18px; --hb-d: 0ms; animation-name: hbTreesFar; }
.hero-b.hb-in.hm-trees .hb-tl2 { --hb-g: 26px; --hb-d: 70ms; }
.hero-b.hb-in.hm-trees .hb-tl3 { --hb-g: 36px; --hb-d: 140ms; }
.hero-b.hb-in.hm-trees .hb-shade { animation: hbFade 450ms ease-out calc(var(--hb-t0, 0ms) + 420ms) backwards; }
@keyframes hbTrees {
  from { transform: translate(calc(var(--hb-g) * var(--hb-side)), calc(var(--hb-g) * .4)) scale(.88); }
}
@keyframes hbTreesFar {
  from { transform: translate(calc(var(--hb-g) * var(--hb-side)), calc(var(--hb-g) * .4)) scale(.88); opacity: 0; }
  13% { opacity: 1; }
}
@keyframes hbFade { from { opacity: 0; } }

/* mow: the fairway's colour is there from the start; its cross-mown stripes arrive band by band from the tee toward the
   green, one mower pass (each band's place from the tee, --k, comes from B.js). With trees, it waits for them. */
.hero-b.hb-in.hm-mow.hm-trees { --hb-m0: 320ms; --hb-ms: 48ms; }
.hero-b.hb-in.hm-mow .hb-stripes path, .hero-b.hb-in.hm-mow .hb-stripes-lt path {
  animation: hbFade 300ms ease-in-out calc(var(--hb-m0, 160ms) + var(--k, 0) * var(--hb-ms, 52ms)) backwards;
}

/* breeze: one gust: a narrow band of light crosses the fairway once, after the trees have started growing in (the
   layers are already moving, so the trees do not lean as well). The far woods and the mark stay still. */
.hero-b.hb-in.hm-breeze .hb-sheen { animation: hbSheen 900ms ease-in-out 350ms backwards; }
/* the band rests just past the fairway's right edge (B.js gives the start, --hb-sx, as far past its left edge) */
@keyframes hbSheen {
  from { transform: translateX(var(--hb-sx)); opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  to { transform: none; opacity: 0; }
}

/* words: the eyebrow and the headline, then the sub, then the list, each rise a few px from a slight fade (faintly
   there from the first frame, so Start My Quote never stands alone) */
.hero-b.hb-in.hm-words .hb-eyebrow { animation: hbWords 560ms var(--ease) backwards; }
.hero-b.hb-in.hm-words h1 { animation: hbWords 620ms var(--ease) 40ms backwards; }
.hero-b.hb-in.hm-words .hb-sub { animation: hbWords 580ms var(--ease) 120ms backwards; }
.hero-b.hb-in.hm-words .hb-handy { animation: hbWords 580ms var(--ease) 220ms backwards; }
@keyframes hbWords { from { opacity: .18; transform: translateY(8px); } }

/* Reduce motion: everything above off; the page shows its final, still state (keep this block last; each selector
   matches its rule above exactly, so it wins) */
@media (prefers-reduced-motion: reduce) {
  .hero-b.hb-in.hm-trees .hb-tl, .hero-b.hb-in.hm-trees .hb-tl1, .hero-b.hb-in.hm-trees .hb-shade { animation: none; }
  .hero-b.hb-in.hm-mow .hb-stripes path, .hero-b.hb-in.hm-mow .hb-stripes-lt path { animation: none; }
  .hero-b.hb-in.hm-breeze .hb-sheen { animation: none; }
  .hero-b.hb-in.hm-words .hb-eyebrow, .hero-b.hb-in.hm-words h1, .hero-b.hb-in.hm-words .hb-sub,
  .hero-b.hb-in.hm-words .hb-handy { animation: none; }
}