/*
 * Rutledge Family Insurance: site styles.
 *
 * The look comes from the approved pinecone brand (rfi-brand: the logo
 * files in assets/logo/ and tokens/rfi-tokens.json). Eight colours, two
 * typefaces. Olive and terracotta are sampled from the mark; paper, ink,
 * sand, clay and lake support them. Nothing here is shared with any other
 * Rutledge company.
 */

@font-face {
  font-family: "Libre Caslon Text";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/libre-caslon-text-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/jost-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/jost-latin-500-normal.woff2") format("woff2");
}

/* Metric-matched fallbacks, so text holds its lines while the web fonts
   load. Each is the width of the site's own text in the web font against
   Times or Arial (Liberation Serif and Sans share their metrics), and the
   web font's ascent and descent over that size. */
@font-face {
  font-family: "Caslon Fallback";
  src: local("Times New Roman"), local("Times"), local("Liberation Serif");
  size-adjust: 117.31%;
  ascent-override: 82.68%;
  descent-override: 22.16%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Jost Fallback";
  font-weight: 400;
  src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 95.55%;
  ascent-override: 111.99%;
  descent-override: 39.25%;
  line-gap-override: 0%;
}
/* Jost Medium against the same regular cut, so the medium text never
   relies on a synthetic bold. */
@font-face {
  font-family: "Jost Fallback";
  font-weight: 500;
  src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 99.58%;
  ascent-override: 107.45%;
  descent-override: 37.66%;
  line-gap-override: 0%;
}

/* Brand values. Every colour, radius, space and font on the site is read
   from the variables below, and every colour is one of the eight in
   rfi-tokens.json. tools/verify.js fails on any other colour. */
:root {
  /* From the mark */
  --olive: #555732;
  --terracotta: #ab5a35;
  --off-white: #fffffd;
  /* Supporting */
  --ink: #2b2d19;
  --paper: #fbf8f1;
  --sand: #ede4d3;
  --clay: #c9977c; /* decoration only, never text on a light ground */
  --lake: #4f6b6e; /* the draft marks only, so they never read as design */

  /* Roles. Contrast (WCAG 2.x): ink on paper 13.27, on sand 11.15, on
     off-white 14.06. Olive on paper 7.08, on sand 5.95, on off-white 7.50.
     Terracotta on paper 4.66 and on off-white 4.94, so terracotta text sits
     only on those two; on sand it is 3.92 and is never used for text.
     Off-white on olive 7.50, on terracotta 4.94, on ink 14.06. Sand on
     olive 5.95. Lake on paper 5.41. */
  --surface-page: var(--paper);
  --surface-inverse: var(--olive);
  --surface-raised: var(--off-white);
  --surface-hover: var(--sand);
  --surface-disabled: var(--sand);
  --text-primary: var(--ink);
  --text-heading: var(--olive);
  --text-secondary: var(--olive);
  --text-on-inverse: var(--off-white);
  --text-on-inverse-muted: var(--sand);
  --text-accent: var(--terracotta);
  --text-disabled: var(--olive);
  --accent-rule: var(--terracotta);
  --border-strong: var(--ink);
  --border-subtle: var(--olive);
  --border-hair: var(--sand);
  --border-focus: var(--olive);
  --border-focus-inverse: var(--off-white);
  --border-disabled: var(--olive);
  --border-card: var(--sand);
  --button-primary-bg: var(--terracotta);
  --button-primary-bg-hover: var(--ink);
  --button-primary-label: var(--off-white);
  --button-secondary-bg: var(--paper);
  --button-secondary-bg-hover: var(--sand);
  --button-secondary-label: var(--ink);
  --button-disabled-bg: var(--sand);
  --button-disabled-label: var(--olive);
  --link-default: var(--ink);
  --link-hover: var(--terracotta);
  --draft: var(--lake);

  --radius-button: 4px;
  --radius-card: 6px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  --font-serif: "Libre Caslon Text", "Caslon Fallback", Georgia, "Times New Roman", serif;
  --font-sans: "Jost", "Jost Fallback", "Century Gothic", "Avenir Next", system-ui, sans-serif;

  /* Text styles, as font shorthands (weight size/line-height family).
     Sizes follow rfi-tokens: display 56, h1 44, h2 32, h3 24, lead 20,
     body 18, small 16, caption 14, label 13. */
  --type-display: 400 56px/64px var(--font-serif);
  --type-display-mobile: 400 36px/44px var(--font-serif);
  --type-display-small: 400 32px/40px var(--font-serif);
  --type-h1: 400 44px/52px var(--font-serif);
  --type-h2: 400 32px/40px var(--font-serif);
  --type-h3: 400 24px/32px var(--font-serif);
  --type-body-large: 400 20px/32px var(--font-sans);
  --type-body: 400 18px/29px var(--font-sans);
  --type-body-small: 400 16px/26px var(--font-sans);
  --type-button: 500 17px/24px var(--font-sans); /* with --track-button */
  --type-label: 500 16px/22px var(--font-sans);
  --type-eyebrow: 500 13px/16px var(--font-sans); /* with --track-eyebrow, upper */
  --type-caption: 400 14px/22px var(--font-sans);
  --type-input: 400 16px/24px var(--font-sans);
  --track-display: -0.01em;
  --track-h1: -0.01em;
  --track-button: 0.01em;
  --track-eyebrow: 0.2em;
  /* Three small inline icons (select arrow, error mark, checkbox tick) are
     data-URI SVGs and repeat ink, terracotta and off-white as hex. Search
     this file for "data:image/svg" if the palette ever changes. */
  --banner-h: 0px; /* set by site.js while the sample banner shows */

  --page-gutter: 80px;
  --page-max: 1440px;
  --section-pad: var(--space-24);
  --measure: 664px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--banner-h) + var(--space-6));
}

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  /* Body/Default */
  font: var(--type-body);
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
fieldset {
  margin: 0;
}
/* Running text never leaves one word alone on its last line where the
   browser can avoid it. Headings and step lines balance instead (below). */
p,
.consent > span {
  text-wrap: pretty;
}

/* The hidden attribute always wins over a component's display value. */
[hidden] {
  display: none !important;
}

/* One focus treatment everywhere: a 2 px gap in the surface colour, then
   a 3 px ring. Olive on light surfaces, off-white on olive. */
:focus {
  outline: none;
}
:focus-visible {
  outline: 3px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: 4px;
}
.on-inverse :focus-visible,
.on-inverse:focus-visible {
  outline-color: var(--border-focus-inverse);
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 10;
  background: var(--button-primary-bg);
  color: var(--button-primary-label);
  font: var(--type-button);
  letter-spacing: var(--track-button);
  padding: 10px var(--space-4);
  border-radius: var(--radius-button);
}
.skip-link:focus {
  top: calc(var(--banner-h) + var(--space-4));
}

.wrap {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding-left: var(--page-gutter);
  padding-right: var(--page-gutter);
}

/* Read by screen readers, not shown. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- Type styles ---- */

/* The label: spaced capitals after a thin rule, as "FAMILY INSURANCE"
   sits between its two rules in the logo. Terracotta on paper and
   off-white only; on sand and on olive the words take the text colour and
   the rule keeps the terracotta. */
.eyebrow {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font: var(--type-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--text-accent);
}
.eyebrow::before {
  content: "";
  flex: none;
  width: var(--space-8);
  height: 1px;
  margin-top: 7px;
  background: var(--accent-rule);
}
.is-sand .eyebrow {
  color: var(--text-secondary);
}
/* Display/Desktop */
.display {
  font: var(--type-display);
  letter-spacing: var(--track-display);
  text-wrap: balance;
}
/* Heading/H1 */
.h1 {
  font: var(--type-h1);
  letter-spacing: var(--track-h1);
}
/* Heading/H2 */
.h2 {
  font: var(--type-h2);
}
/* Heading/H3 */
.h3 {
  font: var(--type-h3);
}
/* Headings are olive, the colour of the wordmark; on olive they take the
   surface's own text colour. */
h1,
h2,
h3,
.h3,
.form-group > legend {
  color: var(--text-heading);
}
.on-inverse h2,
.on-inverse h3,
.on-inverse .h3 {
  color: inherit;
}
/* Headings and step lines share one rule: lines of even length, so no
   word is left alone on a last line. */
.h1,
.h2,
.h3,
.form-group > legend,
.steps li > span:last-child {
  text-wrap: balance;
}
/* Body/Large */
.lead {
  font: var(--type-body-large);
  color: var(--text-primary);
  /* Under 80 characters a line at either size. */
  max-width: 33em;
  text-wrap: pretty;
}
/* Body/Small */
.small {
  font: var(--type-body-small);
}
/* UI/Caption */
.caption {
  font: var(--type-caption);
  color: var(--text-secondary);
}
.muted {
  color: var(--text-secondary);
}

/* The leaf: one leaf of the pinecone, as drawn in the mark, above a card
   heading. */
.rule {
  display: block;
  width: 28px;
  height: 20px;
  background: url("leaf-terracotta.svg") no-repeat left center / contain;
}
/* A leaf between two thin rules, between sections. */
.leaf-divider {
  position: relative;
  height: 20px;
  margin-bottom: var(--section-pad);
  background: url("leaf-olive.svg") no-repeat center / auto 15px;
}
.leaf-divider::before,
.leaf-divider::after {
  content: "";
  position: absolute;
  top: 50%;
  width: min(120px, 28%);
  height: 1px;
  background: var(--accent-rule);
}
.leaf-divider::before {
  right: calc(50% + 28px);
}
.leaf-divider::after {
  left: calc(50% + 28px);
}

/* ---- Sample copy banner ---- */
.sample-banner {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--surface-hover);
  color: var(--text-primary);
  font: var(--type-caption);
}
/* With the banner off, early.js leaves no draft flag in the head, so the
   banner never paints and nothing below it moves when site.js runs. */
html:not([data-draft]) .sample-banner {
  display: none;
}
/* The rest of the page follows the same head flags (early.js), so nothing
   swaps or moves after the first paint. A pending agent line is a draft
   note: it never shows on a live page, with or without JavaScript. */
html:not([data-draft]) [data-agent-line][data-todo] {
  display: none;
}
/* Book a call shows once there is a booking link, in place of the quote
   button; the lines beside it say what it does. */
html:not([data-book]) [data-book-call],
html:not([data-book]) [data-book-call-item],
html[data-book] [data-quote-fallback],
html:not([data-book]) [data-when="book"],
html[data-book] [data-when="quote"] {
  display: none;
}
/* The contact title: asks for a quote, offers a call once there is a
   booking link, and names the agent once there is a phone, email or hours. */
[data-title] {
  display: none;
}
html:not([data-book]):not([data-reach]) [data-title="quote"],
html[data-book]:not([data-reach]) [data-title="book"],
html[data-reach] [data-title="facts"] {
  display: inline;
}
/* The contact details card shows on a live page only once it has a fact. */
html:not([data-draft]):not([data-reach]) [data-contact-panel] {
  display: none;
}
.sample-banner .wrap {
  padding-top: 10px;
  padding-bottom: 10px;
}

/* ---- Buttons. Terracotta is the one action in a view. ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 14px 28px;
  border: 0;
  border-radius: var(--radius-button);
  font: var(--type-button);
  letter-spacing: var(--track-button);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.btn:focus-visible {
  border-radius: var(--radius-button);
}
.btn-primary {
  background: var(--button-primary-bg);
  color: var(--button-primary-label);
}
.btn-primary:hover,
.btn-primary:active {
  background: var(--button-primary-bg-hover);
}
/* The button for the page you are on (the quote page's own nav button). */
.btn[aria-current="page"] {
  background: var(--button-primary-bg-hover);
  text-decoration: underline;
  text-decoration-color: var(--clay);
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}
.btn-secondary {
  background: var(--button-secondary-bg);
  color: var(--button-secondary-label);
  box-shadow: inset 0 0 0 1px var(--border-subtle);
}
.btn-secondary:hover {
  background: var(--button-secondary-bg-hover);
}
.btn-secondary:active {
  background: var(--surface-disabled);
}
.btn[disabled],
.btn[aria-disabled="true"] {
  background: var(--button-disabled-bg);
  color: var(--button-disabled-label);
  box-shadow: none;
  cursor: not-allowed;
}
.btn-secondary[disabled] {
  box-shadow: inset 0 0 0 1px var(--border-disabled);
}

/* ---- Text link: ink, on a thin terracotta rule ---- */
.text-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 2px;
  border-radius: 4px;
  font: var(--type-button);
  letter-spacing: var(--track-button);
  color: var(--link-default);
  text-decoration: underline;
  text-decoration-color: var(--accent-rule);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  transition: color 0.15s ease;
}
.text-link:hover,
.text-link:active {
  color: var(--link-hover);
}
.on-inverse .text-link {
  color: var(--text-on-inverse);
  text-decoration-color: var(--text-on-inverse-muted);
}
/* A link inside a sentence takes the sentence's own type and sits on its
   line, with no gap before the full stop. (A link in running text is
   exempt from the 44 px target.) */
.inline-link {
  border-radius: 2px;
  color: var(--link-default);
  text-decoration: underline;
  text-decoration-color: var(--accent-rule);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.inline-link:hover,
.inline-link:active {
  color: var(--link-hover);
}
.on-inverse .text-link:hover,
.on-inverse .text-link:active {
  color: var(--text-on-inverse-muted);
}

/* ---- Header: the horizontal lockup, then the nav ---- */
.site-header {
  border-bottom: 1px solid var(--border-hair);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}
.brand {
  display: flex;
  align-items: center;
  flex: none;
  color: var(--text-primary);
  text-decoration: none;
}
/* The logo files carry their own clear space, one eighth of the
   pinecone's height on every side. The negative margin lines the pinecone
   itself up with the page gutter; the clear space stays empty. */
.brand img {
  /* The global image cap would shrink a logo by its own negative margin. */
  max-width: none;
}
.brand-lockup {
  flex: none;
  width: 246px;
  height: 90px;
  margin-left: -9px;
}
/* Narrower than the lockup's 240 px minimum allows: the pinecone alone. */
.brand-mark {
  display: none;
  flex: none;
  width: 50px;
  height: 64px;
  margin-left: -6px;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 36px;
  padding: 0;
  list-style: none;
}
.nav-links a:not(.btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  /* Room for the focus ring, without moving the label. */
  padding: 0 8px;
  margin: 0 -8px;
  /* UI/Label */
  font: var(--type-label);
  color: var(--text-primary);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease;
}
.nav-links a:not(.btn):hover,
.nav-links a:not(.btn):active {
  color: var(--link-hover);
}
.nav-links a:not(.btn)[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--accent-rule);
  text-decoration-thickness: 1px;
  text-underline-offset: 8px;
}
.menu-toggle {
  display: none;
}

/* ---- Home hero ---- */
.hero .wrap {
  display: flex;
  align-items: center;
  gap: var(--space-24);
  padding-top: 88px;
  padding-bottom: 112px;
}
.hero-copy {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
}
.cta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 28px;
  padding-top: var(--space-3);
}

/* ---- Call card: olive, with the pinecone cropped behind the steps ---- */
.call-card {
  position: relative;
  overflow: hidden;
  flex: none;
  width: 520px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: var(--space-12);
  border-radius: var(--radius-card);
  background: var(--surface-inverse);
  color: var(--text-on-inverse);
}
/* The pinecone as a backdrop, the off-white mark at 7%. Under it the
   off-white text keeps 6.2:1 and the sand numerals 4.9:1. */
.call-card::after,
.closing::after,
.has-cone::after {
  content: "";
  position: absolute;
  pointer-events: none;
  background: url("logo/rfi-mark-offwhite.svg") no-repeat center / contain;
  opacity: 0.07;
}
.call-card::after {
  right: -72px;
  bottom: -96px;
  width: 281px;
  height: 360px;
}
/* The home page's card is the larger one: a larger title and pinecone. */
.hero .call-card > .h3 {
  font: var(--type-h2);
}
.hero .call-card::after {
  right: -88px;
  bottom: -120px;
  width: 359px;
  height: 460px;
}
.call-card > *,
.closing > .wrap,
.has-cone > .wrap {
  position: relative;
  z-index: 1;
}
/* The card's title sits on a thin rule. */
.call-card > .h3 {
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--text-on-inverse-muted);
}
.steps {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0;
  list-style: none;
}
.steps li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}
/* The numeral, in the wordmark's serif, on the line's own baseline. */
.step-num {
  flex: none;
  width: 24px;
  font: var(--type-h3);
  line-height: 29px;
  color: var(--text-accent);
}
.on-inverse .step-num {
  color: var(--text-on-inverse-muted);
}
/* The compact card used beside the form and on inner pages. */
.call-card.is-compact {
  width: auto;
  padding: 40px;
  gap: var(--space-6);
}

/* ---- Sections ---- */
.section .wrap {
  padding-top: var(--section-pad);
  padding-bottom: var(--section-pad);
}
.section.is-tight-top .wrap {
  padding-top: 0;
}
.section.is-sand {
  background: var(--surface-hover);
}
.section.is-olive {
  position: relative;
  overflow: hidden;
  background: var(--surface-inverse);
  color: var(--text-on-inverse);
}
.section.is-olive .eyebrow,
.section.is-olive .lead {
  color: var(--text-on-inverse-muted);
}
/* The closing band: the pinecone runs off the right edge. */
.closing::after {
  right: -40px;
  top: 50%;
  width: 437px;
  height: 560px;
  transform: translateY(-46%);
}
/* On sand: the olive mark at 6%, off the lower left corner, where the
   wide layout leaves the heading's column empty. Ink keeps 10:1 over it
   and olive 5.4:1; no terracotta text sits on sand. */
.has-cone {
  position: relative;
  overflow: hidden;
}
.has-cone::after {
  display: none;
  left: -96px;
  bottom: -190px;
  width: 359px;
  height: 460px;
  background-image: url("logo/rfi-mark-olive.svg");
  opacity: 0.06;
}
@media (min-width: 1221px) {
  .has-cone::after {
    display: block;
  }
}
.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: var(--measure);
}
.section-head .h2,
.page-intro .h1,
.closing .h2 {
  text-wrap: balance;
}
.section-head .lead,
.tile p,
.points p {
  text-wrap: pretty;
}
/* A hyphenated compound in a lead stays on one line, so a line never
   ends on "small-". */
.keep {
  white-space: nowrap;
}
/* An email breaks after its @ and before each dot. Each part between those
   points stays whole while it fits its column, hyphen included, and only a
   part wider than the column (a long address with no dots) breaks inside
   itself instead of running past the column. The parts carry the link's
   underline, which does not reach inside an inline block. */
.email,
.email > .keep {
  text-decoration: inherit;
}
.email > .keep {
  display: inline-block;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}
/* Long lines stay under about 80 characters wherever a column is wider
   than the text needs: the points in one column, the closing line, the
   licence strip and the draft notes. */
.points p,
.closing .lead,
.todo-note {
  max-width: 34em;
}
/* The licence strip is small text, so its cap is tighter. */
.license-footer p {
  max-width: 30em;
  text-wrap: pretty;
}
/* The licensed-agent line starts the caption on a line of its own, so the
   disclaimer under it always starts its own line and a late web font
   cannot rewrap the two into each other. */
.license-footer [data-agent-line] {
  display: block;
}
.section-head .lead {
  padding-top: var(--space-2);
}
.section-head.is-wide {
  max-width: 880px;
}
.section-head + * {
  margin-top: var(--space-12);
}

/* Heading on the left, content on the right. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--space-16);
  align-items: start;
}
.split > .section-head {
  position: sticky;
  top: calc(var(--banner-h) + var(--space-8));
}
.split > .section-head + * {
  margin-top: 0;
}

/* Tiles: who we work with, coverage. */
.tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
  padding: 0;
  list-style: none;
}
.tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-8);
  border-radius: var(--radius-card);
  background: var(--surface-raised);
  border: 1px solid var(--surface-raised);
}
.tile p {
  /* Body/Small, the card body */
  font: var(--type-body-small);
  color: var(--text-primary);
  /* Under 80 characters a line where the card runs the full width. */
  max-width: 34em;
}
.tile .text-link {
  align-self: flex-start;
  margin-top: auto;
}
.tile.is-large {
  gap: var(--space-4);
  padding: var(--space-12);
}

/* Points: three or four short columns, each under a thin terracotta rule. */
.points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-12);
  padding: 0;
  list-style: none;
}
.points.is-four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-8);
}
.points li {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.points .rule {
  width: 100%;
  height: 1px;
  margin-bottom: var(--space-3);
  background: var(--accent-rule);
}
.points p {
  color: var(--text-primary);
}
.points.is-four p {
  font: var(--type-body-small);
}

/* Closing band (olive). */
.closing .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
}
.closing-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: var(--measure);
}
.closing .cta-row {
  flex: none;
  padding-top: 0;
}
/* On olive the action is the off-white button with an ink label;
   terracotta on olive would not stand out (1.5:1). */
.on-inverse .btn-secondary {
  background: var(--off-white);
  box-shadow: none;
}
.on-inverse .btn-secondary:hover,
.on-inverse .btn-secondary:active {
  background: var(--sand);
}

/* ---- Inner pages ---- */
.page-intro .wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
}
.page-intro .h1 {
  max-width: 920px;
}
.page-intro .lead {
  max-width: 33em;
  text-wrap: balance;
}
.prose {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  /* Under 80 characters a line. */
  max-width: 34em;
}
.prose p {
  text-wrap: pretty;
}

.with-aside {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-24);
  align-items: start;
}
.with-aside.is-wide {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--space-16);
}
/* A page title with the call card beside it. */
.page-intro .wrap.with-aside {
  display: grid;
  align-items: center;
}
.intro-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
}

/* The not-found page: the pinecone beside the words on a wide screen. */
.page-intro .wrap.notfound {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
}
.notfound-mark {
  flex: none;
  width: 200px;
  height: 256px;
  margin-right: var(--space-16);
}
@media (max-width: 960px) {
  .notfound-mark {
    display: none;
  }
}

/* A marked draft note. Shown only while config.showSampleBanner is on. */
.todo-note {
  padding: var(--space-3) var(--space-4);
  border: 1px dashed var(--draft);
  border-radius: var(--radius-button);
  background: var(--paper);
  font: var(--type-caption);
  color: var(--text-primary);
}
/* The pending agent line in the licence strip is a draft note too, so it
   carries the same Draft mark. */
[data-todo="agentLine"]::before,
.todo-note::before {
  content: "Draft";
  margin-right: var(--space-2);
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  font-size: 13px;
  color: var(--draft);
}

/* ---- Panels (raised cards on inner pages) ---- */
.panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-12);
  border-radius: var(--radius-card);
  background: var(--surface-raised);
  border: 1px solid var(--border-hair);
}
.panel > .btn,
.panel > .cta-row {
  margin-top: var(--space-2);
}
.panel .cta-row {
  padding-top: 0;
}
/* On paper a raised card takes a sand hairline; on sand the off-white
   card needs none. */
.section:not(.is-sand) .tile,
.panel {
  border-color: var(--border-card);
}
/* The agent beside the quote form. Shown only once config has a name.
   The portrait sits beside the facts when the card has room for a text
   column of 300 px or more (the full-width card under 1221), and above
   them in the narrow column beside the form, so the name and the license
   line never squeeze. Stacked, the text column is 270 px at 320. */
.agent-block {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-8);
}
.agent-block img {
  flex: none;
  width: 96px;
  height: 96px;
  border-radius: var(--radius-card);
  object-fit: cover;
}
.agent-facts {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  flex: 1 1 300px;
  min-width: 0;
}
/* The license line and the lookup link wrap in the narrow column;
   balanced, so no word is left alone on a last line, and the license
   number never splits. */
.agent-facts .caption,
.agent-facts .text-link {
  text-wrap: balance;
}
/* In the full-width card the agent line keeps a readable length, the same
   cap as the footer caption. */
.agent-facts .caption {
  max-width: 60ch;
}
/* A text link that starts its own line sits on the column's edge: its
   2 px focus padding moves outside the edge. */
.agent-facts .text-link,
.field > .text-link {
  margin-left: -2px;
}
.license-number {
  white-space: nowrap;
}
/* The license lookup sits on its own line under the caption, so the
   caption's lines stay evenly spaced and the link keeps its 44 px target. */
.license-footer a {
  display: flex;
  align-items: center;
  width: fit-content;
  min-height: 44px;
  margin-top: var(--space-1);
  font: var(--type-caption);
  color: var(--text-secondary);
  text-underline-offset: 3px;
}
.license-footer a:hover,
.license-footer a:active {
  color: var(--link-hover);
}
.panel > .form {
  align-self: stretch;
}
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
/* The quote page, in reading order: the agent, the form, then "What
   happens next". At 1220 and below they stack in that order, so the agent
   comes before the form and the form starts in the first screen. From 1221
   up the agent and the steps share the right-hand column. An empty agent
   slot takes no room. */
.with-aside.is-wide {
  grid-template-rows: auto 1fr;
  row-gap: var(--space-6);
}
/* Above the quote form: the agent once one is set, otherwise (in draft
   mode only) the note that the agent is pending. These follow the flags
   early.js sets in the head, so the layout is right at first paint. */
html:not([data-agent]) .quote-agent > [data-agent-block],
html[data-agent] .quote-agent > [data-todo],
html:not([data-draft]) .quote-agent > [data-todo],
html:not([data-agent]):not([data-draft]) .quote-agent {
  display: none;
}
.with-aside.is-wide > .quote-agent {
  grid-column: 2;
  grid-row: 1;
}
.with-aside.is-wide > [data-form-panel] {
  grid-column: 1;
  grid-row: 1 / span 2;
}
.with-aside.is-wide > .quote-next {
  grid-column: 2;
  grid-row: 2;
}
@media (min-width: 1221px) {
  html:not([data-agent]):not([data-draft]) .quote-next {
    grid-row: 1;
  }
}
/* The confirmation that replaces the form after a send. */
.sent {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}
.sent > .text-link {
  margin-left: -2px;
}

/* ---- Quote form ---- */
.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  align-items: stretch;
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  min-width: 0;
  padding: 0;
  border: 0;
}
.form-group + .form-group {
  padding-top: var(--space-12);
  border-top: 1px solid var(--border-hair);
}
.form-group > legend {
  float: left; /* lets the legend take part in the flex gap */
  width: 100%;
  padding: 0;
  font: var(--type-h3);
}
.form-group > legend + * {
  clear: both;
}
.field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
}
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  padding: 0;
  border: 0;
}
.field > label,
.field > legend {
  padding: 0;
  font: var(--type-label);
  color: var(--text-primary);
}
.field > legend {
  float: left;
  width: 100%;
}
.field > legend + * {
  clear: both;
}
.optional {
  /* UI/Caption */
  font: var(--type-caption);
  color: var(--text-secondary);
}
.hint {
  font: var(--type-caption);
  color: var(--text-secondary);
}
.input,
.field select,
.field textarea {
  width: 100%;
  min-height: 52px;
  padding: 13px 15px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-button);
  background: var(--paper);
  color: var(--text-primary);
  /* 16 px keeps phones from zooming. */
  font: var(--type-input);
  transition: border-color 0.15s ease;
  appearance: none;
  -webkit-appearance: none;
}
.field select {
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 6l5 5 5-5' stroke='%232B2D19' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
}
.field textarea {
  min-height: 132px;
  resize: vertical;
}
.input:hover,
.field select:hover,
.field textarea:hover {
  border-color: var(--border-strong);
}
.input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  border-color: var(--border-strong);
  border-radius: var(--radius-button);
}
.input[aria-invalid="true"],
.field select[aria-invalid="true"] {
  border-color: var(--text-accent);
  box-shadow: inset 0 0 0 1px var(--text-accent);
}
.field-error {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  /* UI/Label */
  font: var(--type-label);
  color: var(--text-accent);
}
.field-error::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Ccircle cx='8' cy='8' r='7.25' stroke='%23AB5A35' stroke-width='1.5'/%3E%3Cpath d='M8 4.5v4' stroke='%23AB5A35' stroke-width='1.75' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='11.25' r='1' fill='%23AB5A35'/%3E%3C/svg%3E") no-repeat;
}
.field-error:empty {
  display: none;
}

/* Choice chips (radio) and the consent checkbox. */
.choices {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}
.choice {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 13px 15px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-button);
  background: var(--paper);
  /* UI/Button */
  font: var(--type-button);
  letter-spacing: var(--track-button);
  color: var(--text-primary);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.choice:hover {
  border-color: var(--border-strong);
}
.choice:active {
  background: var(--surface-hover);
}
.choice:has(input:checked) {
  border-color: var(--border-strong);
  background: var(--surface-hover);
  box-shadow: inset 0 0 0 1px var(--border-strong);
}
.choice:has(input:focus-visible),
.consent:has(input:focus-visible) {
  outline: 3px solid var(--border-focus);
  outline-offset: 2px;
}
.choice input:focus-visible,
.consent input:focus-visible {
  outline: none;
}
.choice:has(input[aria-invalid="true"]) {
  border-color: var(--text-accent);
}
.choice input,
.consent input {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 0;
  border: 1px solid var(--border-subtle);
  background: var(--paper);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.choice input {
  border-radius: 50%;
}
.choice input:checked {
  border-color: var(--border-strong);
  background: radial-gradient(circle, var(--olive) 0 5px, var(--paper) 5.5px);
}
.field > label.consent {
  font: var(--type-input);
}
.field > .todo-note {
  margin-top: var(--space-3);
}
.consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-height: 44px;
  padding: 10px 0 2px;
  border-radius: 4px;
  font: var(--type-input);
  color: var(--text-primary);
  cursor: pointer;
}
/* The consent sentence keeps under 80 characters a line in the wide form. */
.consent > span {
  max-width: 30em;
}
.consent input {
  margin-top: 1px;
  border-radius: 4px;
}
.consent input:checked {
  border-color: var(--olive);
  background: var(--olive)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5l3 3 6-7' stroke='%23FFFFFD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 16px no-repeat;
}
.consent input[aria-invalid="true"] {
  border-color: var(--text-accent);
}
.form-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
}
.form-status {
  padding: var(--space-4) 20px;
  border-radius: var(--radius-button);
  border: 1px solid var(--border-strong);
  background: var(--paper);
  font: var(--type-label);
  color: var(--text-primary);
}
.form-status[data-kind="error"] {
  border-color: var(--text-accent);
  color: var(--text-accent);
}
.form-status:empty {
  display: none;
}

/* ---- Contact ---- */
.contact-list {
  display: flex;
  flex-direction: column;
  align-self: stretch;
}
.contact-list > div {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-4);
  min-height: 60px;
  padding: var(--space-2) 0;
}
.contact-list > div {
  border-top: 0;
}
.contact-list > div:not([hidden]) ~ div:not([hidden]) {
  border-top: 1px solid var(--border-hair);
}
.contact-list dt {
  font: var(--type-label);
  color: var(--text-secondary);
}
/* Every value in the list, linked or not, is set in Body/Default; the
   phone and email keep their underline. */
.contact-list dd {
  margin: 0;
  font: var(--type-body);
  color: var(--text-primary);
}
.contact-list dd .text-link {
  margin-left: -2px;
  /* Its 2 px padding sits outside the text column on both sides, so the
     text has the full width of the value column. */
  margin-right: -2px;
  max-width: calc(100% + 4px);
  font: inherit;
  letter-spacing: normal;
  /* A long email address breaks inside the card on a narrow phone rather
     than pushing the page sideways. */
  overflow-wrap: anywhere;
}

/* ---- Footer: the stacked lockup, the link columns, the licence strip ---- */
.site-footer {
  border-top: 1px solid var(--border-hair);
}
/* The link columns never squeeze: when the brand and the columns do not
   fit side by side (the third "Reach us" column, at small desktop widths),
   the columns move to their own row under the brand. */
.footer-main {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-12);
  padding-top: var(--space-16);
  padding-bottom: var(--space-12);
}
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 360px;
}
.brand-stacked {
  flex: none;
  width: 200px;
  height: 200px;
  margin: -14px 0 0 -14px;
}
.footer-cols {
  display: flex;
  flex: none;
  gap: var(--space-24);
}
/* With the third column, the wide gap would push the columns under the
   brand just above 1220. */
@media (min-width: 1221px) {
  html[data-reach] .footer-cols {
    gap: var(--space-16);
  }
}
.footer-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.footer-col .eyebrow {
  color: var(--text-secondary);
  padding-bottom: var(--space-1);
}
.footer-col .eyebrow::before,
.agent-block .eyebrow::before {
  display: none;
}
.footer-col ul {
  display: flex;
  flex-direction: column;
  padding: 0;
  list-style: none;
}
.footer-col a,
.footer-col .footer-fact {
  display: inline-flex;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
  font: var(--type-label);
  color: var(--text-primary);
  text-decoration: none;
  transition: color 0.15s ease;
}
.footer-col a:hover,
.footer-col a:active {
  color: var(--link-hover);
  text-decoration: underline;
  text-underline-position: from-font;
}
.footer-col .footer-fact {
  font: var(--type-caption);
  color: var(--text-secondary);
  /* Long hours wrap into even lines, so no word is left alone. */
  text-wrap: balance;
}
.license-footer {
  border-top: 1px solid var(--border-hair);
}
.license-footer .wrap {
  padding-top: 20px;
  padding-bottom: var(--space-6);
}

/* ---- 1400 and below: four points sit two by two, so each column keeps
   room for its heading and a comfortable line. ---- */
@media (max-width: 1400px) {
  .points.is-four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-12) var(--space-8);
  }
}

/* ---- 1339 and below: beside the quote form the "What happens next" card
   takes two fifths, so its step lines keep a readable width, and the four
   choices sit two by two in the narrower form. ---- */
@media (max-width: 1339px) {
  .with-aside.is-wide {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--space-12);
  }
  .choices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---- Small desktop (961 to 1220) ---- */
@media (max-width: 1220px) {
  :root {
    --page-gutter: 40px;
    --section-pad: var(--space-16);
  }
  .hero .wrap {
    gap: var(--space-12);
  }
  .call-card {
    width: 440px;
  }
  .with-aside {
    gap: var(--space-12);
  }
  /* The heading sits above its tiles, which take the full width. */
  .split {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-12);
  }
  .split > .section-head {
    position: static;
  }
  .footer-cols {
    gap: var(--space-12);
  }
  .nav-links {
    gap: var(--space-6);
  }
  .with-aside.is-wide {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-12);
  }
  .with-aside.is-wide > .quote-agent,
  .with-aside.is-wide > [data-form-panel],
  .with-aside.is-wide > .quote-next {
    grid-column: auto;
    grid-row: auto;
  }
  .with-aside.is-wide {
    grid-template-rows: none;
    row-gap: var(--space-8);
  }
  /* The form has the full width again, so the choices return to one row. */
  .choices {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ---- 1060 and below ---- */
@media (max-width: 1060px) {
  /* The hero card narrows and trims its padding, so the headline keeps
     three lines and the step lines keep their width. */
  .call-card {
    width: 380px;
    padding: 40px;
  }
  /* Beside a title or a card, the call card would be too narrow to read.
     It moves below. */
  .with-aside {
    grid-template-columns: minmax(0, 1fr);
  }
  .nav-links {
    gap: 20px;
  }
}

/* ---- 961 to 1060 (about, contact) and 961 to 1220 (quote): the compact
   call card spans the full width under the page's main column, so its three
   steps sit in one row, each numeral above its line. Each step keeps a
   column of 250 px or more. ---- */
@media (min-width: 961px) and (max-width: 1060px) {
  .with-aside > .call-card.is-compact .steps {
    flex-direction: row;
    gap: var(--space-6);
  }
  .with-aside > .call-card.is-compact .steps li {
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    gap: var(--space-3);
  }
}
@media (min-width: 961px) and (max-width: 1220px) {
  .with-aside.is-wide .call-card.is-compact .steps {
    flex-direction: row;
    gap: var(--space-6);
  }
  .with-aside.is-wide .call-card.is-compact .steps li {
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    gap: var(--space-3);
  }
}

/* ---- Tablet and phone (960 and below): the menu, one main column ---- */
@media (max-width: 960px) {
  :root {
    --page-gutter: 32px;
    --section-pad: var(--space-16);
  }

  /* Header and menu */
  .site-header .wrap {
    flex-wrap: wrap;
    gap: 0 var(--space-4);
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
  }
  .site-header .wrap {
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
  }
  .brand-lockup {
    width: 240px;
    height: 88px;
  }
  .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    min-width: 44px;
    min-height: 44px;
    padding: 0 2px;
    margin-left: auto;
    background: none;
    border: 0;
    font: var(--type-label);
    color: var(--text-primary);
    cursor: pointer;
  }
  .menu-toggle:active {
    color: var(--link-hover);
  }
  .menu-icon {
    position: relative;
    width: 18px;
    height: 12px;
  }
  .menu-icon::before,
  .menu-icon::after {
    content: "";
    position: absolute;
    left: 0;
    width: 18px;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
  }
  .menu-icon::before {
    top: 1px;
  }
  .menu-icon::after {
    top: 9px;
  }
  .menu-toggle[aria-expanded="true"] .menu-icon::before {
    top: 5px;
    transform: rotate(45deg);
  }
  .menu-toggle[aria-expanded="true"] .menu-icon::after {
    top: 5px;
    transform: rotate(-45deg);
  }
  /* The menu ships closed (data-open="false" in the markup), so nothing
     moves on load. It animates only after site.js marks the page ready. */
  .site-nav {
    flex-basis: 100%;
    display: grid;
    grid-template-rows: 1fr;
  }
  .site-nav[data-open="false"] {
    grid-template-rows: 0fr;
    visibility: hidden;
  }
  .menu-ready .site-nav {
    transition: grid-template-rows 0.24s ease;
  }
  .menu-ready .site-nav[data-open="false"] {
    transition: grid-template-rows 0.24s ease, visibility 0s linear 0.24s;
  }
  .menu-ready .menu-icon::before,
  .menu-ready .menu-icon::after {
    transition: transform 0.2s ease, top 0.2s ease;
  }
  .nav-links {
    min-height: 0;
    overflow: hidden;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .nav-links li:first-child {
    margin-top: var(--space-3);
  }
  .nav-links li {
    border-top: 1px solid var(--border-hair);
  }
  .nav-links li:last-child {
    padding: var(--space-4) 0 var(--space-2);
  }
  /* The rows reach 12 px past the gutter on each side, so the focus ring
     has room inside the row and never touches the label, while the label
     and the dividers stay on the gutter. */
  .nav-links {
    margin-inline: calc(-1 * var(--space-3));
  }
  .nav-links li {
    margin-inline: var(--space-3);
  }
  .nav-links a:not(.btn) {
    justify-content: flex-start;
    width: calc(100% + 2 * var(--space-3));
    min-height: 56px;
    padding: 0 var(--space-3);
    margin: 0 calc(-1 * var(--space-3));
    /* UI/Button */
    font: var(--type-button);
    letter-spacing: var(--track-button);
  }
  .nav-links a:not(.btn):focus-visible {
    outline-offset: -3px;
  }
  .nav-links a:not(.btn)[aria-current="page"] {
    text-underline-offset: 6px;
  }
  .nav-links .btn {
    width: 100%;
  }

  /* Type: one smaller display size for page titles. */
  .display,
  .h1 {
    font: var(--type-display-mobile);
    letter-spacing: var(--track-h1);
  }
  .lead {
    font: var(--type-body);
  }

  /* Hero: copy above the card. */
  .hero .wrap {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-top: var(--space-12);
    padding-bottom: var(--space-16);
  }
  .hero-copy {
    gap: 20px;
    max-width: var(--measure);
  }
  .call-card,
  .call-card.is-compact {
    width: 100%;
    padding: 40px;
  }
  .hero .call-card {
    margin-top: var(--space-12);
  }

  /* Sections: tiles and points stay in two columns on a tablet. */
  .section-head + * {
    margin-top: var(--space-8);
  }
  .split,
  .with-aside,
  .with-aside.is-wide {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
  }
  .points,
  .points.is-four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-8);
  }
  /* Three points sit in one row, so none is left alone on a second row. */
  .points:not(.is-four) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
  }
  .tile.is-large {
    padding: var(--space-8);
  }
  .closing .wrap {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-8);
  }
  .page-intro .wrap {
    gap: 20px;
    padding-top: var(--space-12);
    padding-bottom: var(--space-12);
  }
  .panel {
    padding: var(--space-8);
  }
  .footer-main {
    flex-direction: column;
    gap: var(--space-8);
    padding-top: var(--space-12);
    padding-bottom: var(--space-8);
  }
  .footer-cols {
    flex-wrap: wrap;
    gap: var(--space-8) var(--space-16);
  }
}

/* ---- 839 and below: three points stack, since a third of the width is
   too narrow a column to read. ---- */
@media (max-width: 839px) {
  .points:not(.is-four) {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
  }
}

/* ---- Phone (739 and below) ---- */
@media (max-width: 739px) {
  :root {
    --page-gutter: 20px;
    --section-pad: var(--space-12);
  }
  .hero .wrap {
    padding-top: var(--space-8);
    padding-bottom: 40px;
  }
  .hero-copy {
    max-width: none;
  }
  .cta-row {
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    width: 100%;
    padding-top: var(--space-2);
  }
  .cta-row .btn {
    width: 100%;
  }
  .hero-copy > .caption {
    align-self: center;
  }
  .call-card,
  .call-card.is-compact {
    padding: 28px;
  }
  .hero .call-card {
    margin-top: 40px;
  }
  .tiles,
  .points,
  .points.is-four,
  .points:not(.is-four) {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
  }
  .tiles {
    gap: var(--space-4);
  }
  /* Pretty keeps the headline's natural breaks and still never leaves
     the last word alone. */
  .display {
    text-wrap: pretty;
  }
  .tile,
  .tile.is-large {
    padding: var(--space-6);
  }
  .closing .wrap {
    align-items: stretch;
  }
  /* The label keeps one line on most phones: a shorter rule and a
     little less tracking. */
  .eyebrow {
    gap: var(--space-2);
    letter-spacing: 0.14em;
  }
  .eyebrow::before {
    width: var(--space-4);
  }
  /* Inner pages on a phone: the title one size down and a tighter intro,
     so the quote form still starts in the first screen under the lockup. */
  .h1 {
    font: var(--type-display-small);
    letter-spacing: var(--track-h1);
  }
  .page-intro .wrap {
    gap: var(--space-4);
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
  }
  .panel {
    padding: var(--space-6);
    align-items: stretch;
  }
  .form {
    gap: var(--space-8);
  }
  .form-group + .form-group {
    padding-top: var(--space-8);
  }
  .field-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .choices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .choice {
    padding-left: 12px;
    padding-right: 12px;
  }
  .form-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .contact-list > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: var(--space-3) 0;
  }
}

/* ---- Phones (739 and below): the agent above the quote form is the short
   version, so the form starts in the first screen. The portrait sits beside
   the eyebrow and the name, the license lookup runs the card's full
   width, and the agent line stays in the footer and on About. ---- */
@media (max-width: 739px) {
  .agent-block.is-short {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: var(--space-3);
    row-gap: var(--space-1);
    padding: 20px;
  }
  .with-aside.is-wide {
    row-gap: var(--space-4);
  }
  .agent-block.is-short:has(img[hidden]) {
    grid-template-columns: minmax(0, 1fr);
  }
  .agent-block.is-short img {
    width: 48px;
    height: 48px;
  }
  .agent-block.is-short .agent-facts {
    display: contents;
  }
  /* The portrait spans the eyebrow and the name, which is set in UI/Label
     so it stays on one line beside the portrait down to 320. */
  .agent-block.is-short img {
    grid-row: span 2;
  }
  .agent-block.is-short .eyebrow {
    align-self: end;
  }
  .agent-block.is-short .h3 {
    align-self: start;
    font: var(--type-label);
    letter-spacing: normal;
  }
  .agent-block.is-short .text-link {
    grid-column: 1 / -1;
    margin-top: var(--space-1);
  }
  .agent-block.is-short [data-agent-license] {
    display: none;
  }
}

/* ---- Phones narrower than 390. The call card and the
   gutter give their room to the text, step by step, so every wrapped line
   keeps a 240 px column down to a 320 px screen. ---- */
@media (max-width: 387px) {
  /* The short agent block: the name takes the card's full width under
     the portrait and the label, so a long name keeps one line. */
  .agent-block.is-short img {
    grid-row: auto;
  }
  .agent-block.is-short .eyebrow {
    align-self: center;
  }
  .agent-block.is-short .h3 {
    grid-column: 1 / -1;
    margin-top: var(--space-1);
  }
  .call-card,
  .call-card.is-compact,
  .panel.agent-block {
    padding: 20px;
  }
  .steps li {
    gap: var(--space-3);
  }
}
@media (max-width: 367px) {
  :root {
    --page-gutter: 16px;
  }
}
@media (max-width: 355px) {
  .panel {
    padding: var(--space-4);
  }
}
/* Under 360 each numeral sits above its line, so the step text has the
   card's full width. */
@media (max-width: 359px) {
  .steps li {
    flex-direction: column;
    gap: var(--space-2);
  }
}
/* Under 340 the form gives the consent sentence the last of its room. */
@media (max-width: 339px) {
  :root {
    --page-gutter: 12px;
  }
  .panel {
    padding: var(--space-3);
  }
  .consent {
    gap: var(--space-2);
  }
}

/* ---- The narrowest phones (353 and below) ---- */
@media (max-width: 353px) {
  /* The 1 px card border counts toward the 24 px inset, which keeps the
     text column at 240 px on a 320 px screen. */
  .tile,
  .tile.is-large {
    padding: calc(var(--space-6) - 1px);
  }
}
/* ---- 389 and below: the word Menu alone, so the lockup keeps its
   minimum width. 351 and below: the pinecone alone, as the logo's usage
   rules ask under 240 px. ---- */
@media (max-width: 389px) {
  .menu-icon {
    display: none;
  }
}
@media (max-width: 351px) {
  .brand-lockup {
    display: none;
  }
  .brand-mark {
    display: block;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}