/* Lose the Dent stylesheet. Provisional brand layer, 30 September 2026.
   The whole design system in one file: every color, font, size and spacing value is a token in the block below, so a
   later design revision is a change to this block (plus the logo files in /public and /public/brand).
   Layout system and class names (co-, cx-) are the ones the site was built on; the token NAMES are an API that the
   other stylesheets (ltd-site, ltd-journey, ltd-mobile, ltd-quote, ltd-market) read, so rename nothing here.
   --co-blue is the ACCENT color. The name is historical; the value is not blue. */

/* 0. Fonts: Barlow Condensed (SIL Open Font License), self-hosted. No third-party font CDN. */
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/barlow-condensed-500.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/barlow-condensed-700.woff2") format("woff2"); }

/* 1. Tokens ---------------------------------------------------------------------------------------- */
:root {
  /* Color. Contrast checked for WCAG AA: accent on ground 5.1:1, ground on accent 5.1:1, ink on ground 17:1.
     The accent is NOT legible on ink (3.3:1): on a dark background use --co-ground for text. */
  --co-ground: #FBFAF8;                    /* page background */
  --co-ink: #15181C;                       /* text, outlines, the input border */
  --co-blue: #C8330B;                      /* THE ACCENT (signal orange-red): main buttons, links on hover, the band, map pins */
  --co-accent: var(--co-blue);             /* readable alias for new code */
  --co-accent-ink: #9E2608;                /* accent, pressed or hovered */
  --co-ink-muted: rgba(21, 24, 28, 0.62);  /* placeholder text and secondary lines (5.6:1 on ground) */
  --co-rule: rgba(21, 24, 28, 0.14);       /* hairlines: header edge, card edge, badge outline */
  --co-tint: #F1EEE9;                      /* quiet fill: badges, the screenshot frame, the map before tiles load */

  /* Type: system sans for reading, Barlow Condensed for headings, labels and buttons */
  --co-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --co-font-display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
  --co-h1-size: clamp(38px, 4.4vw, 64px);  /* every page heading, the two-line pattern */
  --co-h1-lh: 1.02;
  --co-h1-ls: 0;
  --co-body-size: 16px;                    /* all running text */
  --co-body-lh: 1.5;
  --co-label-size: 13px;                   /* small print, meta, help text */
  --co-cap-size: 15px;                     /* condensed caps: labels, navigation, section titles */
  --co-cap-ls: 0.045em;
  --co-btn-size: 17px;                     /* condensed caps on buttons */
  --co-wordmark-size: 24px;                /* header wordmark */

  /* Shape */
  --co-radius: 4px;                        /* buttons, inputs, cards, badges, the map */

  /* Spacing */
  --co-gutter: clamp(16px, 4.1667vw, 80px);  /* 100vw / 24: side margins, the indent, grid column gaps */
  --co-header-h: 96px;
  --co-hero-top: 192px;
  --co-pin: calc(var(--co-header-h) + var(--co-hero-top));
  --co-panel-pad: 120px;
  --co-hero-block: 80px;
  --co-hero-helper: 32px;
  --co-hero-steps: 240px;
  --co-intro: 48px;                        /* heading to intro */
  --co-content: 128px;                     /* intro to content */
  --co-action: 80px;                       /* content to the action row */
  --co-row: 56px;                          /* between rows in a content grid */
  --co-row-list: 40px;                     /* between rows in a reference list (states, cities) */
  --co-row-guides: 80px;                   /* between guide entries */
  --co-footer-top: 96px;
  --co-footer-bottom: 96px;
  --co-measure: 65ch;                      /* long-form text */
  --co-measure-intro: 44ch;                /* section intros */

  /* Controls: every input and every button is the same block. 44px is the minimum tap target. */
  --co-control-w: 280px;
  --co-control-h: 48px;
  --co-control-h-hero: 56px;
  --co-gap-control: 8px;
  --co-line: 1px solid var(--co-ink);      /* the input border */

  /* Motion: hover color changes only */
  --co-fast: 120ms;
  --co-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* 2. Base ------------------------------------------------------------------------------------------ */
html { background: var(--co-ground); color-scheme: light; }
body {
  margin: 0;
  font-family: var(--co-font);
  font-size: var(--co-body-size);
  line-height: var(--co-body-lh);
  color: var(--co-ink);
  background: var(--co-ground);
  -webkit-font-smoothing: antialiased;
}
*, *::before, *::after { box-sizing: border-box; }
a { color: inherit; text-decoration: none; }
input, textarea, button, select { color: inherit; font-family: inherit; }
a:hover { color: var(--co-blue); }
p { margin: 0; max-width: var(--co-measure); }
img, svg { display: block; max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--co-blue); outline-offset: 2px; }

/* 3. Type roles ------------------------------------------------------------------------------------ */
/* The two-line heading: line one bold uppercase at the margin, line two regular, indented one gutter, 0.25em below.
   Line one is one to three words, line two two to six, and neither line wraps at 944px */
.co-heading { display: flex; flex-direction: column; margin: 0; font-size: inherit; font-weight: 400; }
.co-h1 { display: block; font-family: var(--co-font-display); font-size: var(--co-h1-size); line-height: var(--co-h1-lh); letter-spacing: var(--co-h1-ls); font-weight: 700; text-transform: uppercase; text-wrap: balance; overflow-wrap: anywhere; }
.co-h1-sub { display: block; font-family: var(--co-font-display); font-size: calc(var(--co-h1-size) * 0.62); line-height: 1.1; letter-spacing: 0; font-weight: 500; color: var(--co-blue); margin-top: 0.3em; padding-left: var(--co-gutter); text-wrap: balance; overflow-wrap: anywhere; }
.co-label { font-family: var(--co-font-display); font-size: var(--co-cap-size); line-height: 1.3; font-weight: 700; letter-spacing: var(--co-cap-ls); text-transform: uppercase; }
.co-title { font-family: var(--co-font-display); font-size: 22px; line-height: 1.2; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; }
.co-small { font-size: var(--co-label-size); line-height: var(--co-body-lh); }

/* 4. Header, pinned -------------------------------------------------------------------------------- */
/* The header block is the 96px bar plus the 192px of ground beneath it. It is sticky at the top and sits above every
   panel, so the menu is always visible and nothing ever rises above the hero heading line */
.co-header-block { position: sticky; top: 0; z-index: 10; background: var(--co-ground); }
.co-header { height: var(--co-header-h); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--co-gutter); }
.co-brand { display: flex; align-items: center; gap: 10px; min-height: 44px; font-family: var(--co-font-display); font-size: var(--co-wordmark-size); line-height: 1; font-weight: 700; letter-spacing: 0.01em; text-transform: uppercase; white-space: nowrap; color: var(--co-ink); }
.co-brand img, .co-brand svg { width: 32px; height: 32px; }
.co-brand b { font-weight: 700; color: var(--co-blue); }
.co-brand:hover { color: var(--co-ink); }
.co-nav { display: flex; gap: 28px; }
.co-hero-spacer { height: var(--co-hero-top); }

/* 5. Panels and scroll stacking -------------------------------------------------------------------- */
/* Every section is a panel pinned on the hero heading line. The next panel slides up over it and stops on the same line.
   Solid ground background on every panel. Off below 900px and under reduced motion, where the panels simply flow */
.co-page { max-width: 1440px; margin: 0 auto; }
.co-panel {
  position: sticky; top: var(--co-pin);
  min-height: calc(100vh - var(--co-pin));
  background: var(--co-ground);
  padding: 0 var(--co-gutter) var(--co-panel-pad);
}
.co-panel--band { padding-bottom: 0; }   /* the band carries its own 120px; the ground beneath comes from the panel height */
.co-panel--last { display: flex; flex-direction: column; padding-bottom: var(--co-footer-bottom); }
.co-panel--last .co-footer-spacer { flex: 1 0 var(--co-footer-top); }   /* pushes the footer to the foot of the window */

/* The feature band: one per page. A full-bleed accent block that starts on the pin line, carries 120px inside at the top
   and the bottom and stops there. The panel behind it runs on to the foot of the window in ground */
.co-band {
  background: var(--co-blue); color: var(--co-ground);
  margin: 0 calc(-1 * var(--co-gutter));
  padding: var(--co-panel-pad) var(--co-gutter);
}

/* 6. Section layout -------------------------------------------------------------------------------- */
/* One layout for every section: heading, intro, content and action stacked in the left 8 of 12 columns, the section
   graphic in the right 4, top aligned with the heading, in the same place every time */
.co-section { display: grid; grid-template-columns: 8fr 4fr; gap: var(--co-gutter); align-items: start; }
.co-section__main { display: flex; flex-direction: column; min-width: 0; }
.co-section__graphic { display: flex; justify-content: flex-end; align-self: start; padding-top: 8px; }
.co-section__graphic img, .co-section__graphic svg { width: 260px; }
.co-section__graphic--sm img { width: 220px; }
.co-section__graphic--md img { width: 240px; }
.co-section__graphic--lg img { width: 300px; }
.co-section__graphic--hero { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 24px; }
.co-section__graphic--hero img, .co-section__graphic--hero svg { width: 360px; }   /* the hero illustration */

/* Everything beneath the heading indents to its second line */
.co-intro { margin-top: var(--co-intro); padding-left: var(--co-gutter); max-width: calc(var(--co-measure-intro) + var(--co-gutter)); }
.co-content { margin-top: var(--co-content); padding-left: var(--co-gutter); }
.co-action { margin-top: var(--co-action); padding-left: var(--co-gutter); display: flex; flex-wrap: wrap; align-items: center; gap: var(--co-gap-control); }
.co-helper { margin-top: var(--co-hero-helper); padding-left: var(--co-gutter); }

/* Hero only: 80px blocks instead of 48 / 128, and 240px down to the steps */
.co-hero .co-intro { margin-top: var(--co-hero-block); }
.co-hero .co-action { margin-top: var(--co-hero-block); }
.co-steps { margin-top: var(--co-hero-steps); padding-left: var(--co-gutter); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--co-gutter); }

/* Content grids: three columns inside the 8 column area */
.co-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--co-row) var(--co-gutter); }
.co-grid--list { gap: var(--co-row-list) var(--co-gutter); }    /* reference lists, A to Z */
.co-stack { display: flex; flex-direction: column; gap: var(--co-row-guides); }   /* guide entries */
.co-block { display: flex; flex-direction: column; gap: 8px; }
.co-entry { display: flex; flex-direction: column; gap: 4px; }

/* In-page graphics (components/brand-graphic.blade.php): inline SVG drawn with these three custom properties, so they
   follow the tokens and turn themselves inside out on the accent band */
.co-graphic { --g-line: var(--co-ink); --g-accent: var(--co-blue); --g-fill: var(--co-ground); display: block; width: 100%; height: auto; overflow: visible; }
.co-band .co-graphic { --g-line: var(--co-ground); --g-accent: var(--co-ground); --g-fill: var(--co-blue); }
.co-section__graphic--hero { position: relative; }

/* 7. Buttons and inputs ---------------------------------------------------------------------------- */
/* Every call to action is the same block (280 wide, 48 high, 56 in the hero). Main action solid accent, every other
   action outlined in ink. Never sized to the label. Full width on phones */
.co-btn {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: var(--co-control-w); max-width: 100%; height: var(--co-control-h); min-height: 44px; padding: 0 20px;
  background: var(--co-blue); color: var(--co-ground);
  font: 700 var(--co-btn-size)/1 var(--co-font-display); letter-spacing: var(--co-cap-ls); text-transform: uppercase; text-align: center;
  border: 0; border-radius: var(--co-radius); box-shadow: none; cursor: pointer; appearance: none;
  transition: background var(--co-fast) var(--co-ease), color var(--co-fast) var(--co-ease), box-shadow var(--co-fast) var(--co-ease);
}
.co-btn:hover { background: var(--co-ink); color: var(--co-ground); }
.co-btn--outline { background: transparent; color: var(--co-ink); box-shadow: inset 0 0 0 1.5px var(--co-ink); }
.co-btn--outline:hover { background: var(--co-ink); color: var(--co-ground); }
.co-btn--hero { height: var(--co-control-h-hero); font-size: 19px; }
.co-btn--blue { background: var(--co-blue); color: var(--co-ground); }
.co-btn--blue:hover { background: var(--co-ink); color: var(--co-ground); box-shadow: none; }
.co-btn--ink { background: var(--co-ink); color: var(--co-ground); }
.co-btn--ink:hover { background: var(--co-blue); color: var(--co-ground); }
.co-btn[disabled], .co-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
/* On the band: solid is ground with accent text, outlined is ground on accent */
.co-band .co-btn { background: var(--co-ground); color: var(--co-blue); }
.co-band .co-btn:hover { background: var(--co-ink); color: var(--co-ground); box-shadow: none; }
.co-band .co-btn--outline { background: transparent; color: var(--co-ground); box-shadow: inset 0 0 0 1.5px var(--co-ground); }
.co-band .co-btn--outline:hover { background: var(--co-ground); color: var(--co-blue); }
.co-band a:hover { color: var(--co-ground); text-decoration: underline; }
.co-band .co-h1-sub { color: var(--co-ground); }
.co-band :focus-visible { outline-color: var(--co-ground); }

.co-input {
  width: var(--co-control-w); max-width: 100%; height: var(--co-control-h); padding: 0 16px;
  font: 400 16px/1 var(--co-font); color: var(--co-ink); background: var(--co-ground);
  border: var(--co-line); border-radius: var(--co-radius); box-shadow: none; appearance: none;
}
.co-input--hero { height: var(--co-control-h-hero); }
.co-input::placeholder { color: var(--co-ink-muted); }
.co-form-row { display: flex; flex-wrap: wrap; gap: var(--co-gap-control); }   /* input and button, never touching */
.co-field { display: flex; flex-direction: column; gap: 8px; }
.co-field__help { font-size: var(--co-label-size); }
.co-field__error { font-size: var(--co-label-size); font-weight: 700; color: var(--co-blue); }
/* Choice control: 16px square, 1px ink outline, ink filled when selected, label 13px bold uppercase */
.co-choice { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.co-choice input { appearance: none; margin: 0; width: 18px; height: 18px; border: var(--co-line); border-radius: 3px; background: var(--co-ground); flex-shrink: 0; }
.co-choice input[type="radio"] { border-radius: 50%; }
.co-choice input:checked { background: var(--co-blue); border-color: var(--co-blue); box-shadow: inset 0 0 0 3px var(--co-ground); }
.co-choice input:focus-visible { outline: 2px solid var(--co-blue); outline-offset: 2px; }
.co-choice--text { align-items: flex-start; }                              /* a consent line: sentence case body text beside the square */
.co-choice--text input { margin-top: 1px; }
.co-choice--text span { font-size: var(--co-body-size); font-weight: 400; text-transform: none; max-width: var(--co-measure); }
.co-choices { display: flex; flex-direction: column; gap: 8px; }           /* a group of choices: vertical list, 8px apart. Used instead of a select */
/* Form pages (request quotes and the steps beneath it). The heading runs the full width above a grid: form in the left
   8 columns, side notes in the right 4. Groups of fields are fieldsets with a bold caps title, 56px apart; fields 24px apart */
.co-form-page { display: grid; grid-template-columns: 8fr 4fr; gap: var(--co-gutter); align-items: start; margin-top: var(--co-intro); }
.co-form { display: flex; flex-direction: column; gap: var(--co-row); padding-left: var(--co-gutter); min-width: 0; }
.co-form__progress { margin: 0; }                                          /* a 13.5px ink line, e.g. Step 1 of 5. No bar, no percentage */
.co-fieldset { display: block; margin: 0; padding: 0; border: 0; min-width: 0; }
.co-fieldset > legend { float: left; width: 100%; padding: 0; margin: 0 0 24px; font-family: var(--co-font-display); font-size: 22px; line-height: 1.2; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; }
.co-fieldset__fields { display: flex; flex-direction: column; gap: 24px; clear: both; }
.co-form__actions { display: flex; flex-wrap: wrap; gap: var(--co-gap-control); }   /* Back outlined, then Continue solid, left aligned */
.co-form-aside { display: flex; flex-direction: column; gap: var(--co-row); padding-top: 4px; }
.co-textarea { width: calc(var(--co-control-w) * 2 + var(--co-gap-control)); max-width: 100%; min-height: calc(var(--co-control-h) * 3); padding: 12px 16px; font: 400 16px/1.4 var(--co-font); color: var(--co-ink); background: var(--co-ground); border: var(--co-line); border-radius: var(--co-radius); box-shadow: none; appearance: none; resize: vertical; }
.co-textarea::placeholder { color: var(--co-ink-muted); }
.co-input[type="date"] { appearance: none; -webkit-appearance: none; }
.co-input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0.6; }

/* 8. Other page components ------------------------------------------------------------------------- */
/* Cards: a hairline frame and a condensed caps title. No shadow */
.co-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--co-row) var(--co-gutter); }
.co-card { display: flex; flex-direction: column; gap: 20px; }
.co-card__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; }
.co-fact { display: flex; flex-direction: column; gap: 2px; }
/* Filter and navigation lists: one active item, in the accent */
.co-nav-list { display: flex; flex-direction: column; gap: 8px; }
.co-nav-list .is-active { color: var(--co-blue); }
/* Two column page bodies (results: 380px filter column plus cards; split: halves) */
.co-results { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: var(--co-gutter); }
.co-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--co-gutter); }
/* Images inside text: square corners, inside the column, no shadow */
.co-prose img { width: 100%; }

/* 9. Footer ---------------------------------------------------------------------------------------- */
.co-footer { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.co-footer__about { display: flex; flex-direction: column; gap: 4px; }
.co-footer__links { display: flex; gap: 24px; }

/* 10. Small screens -------------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .co-header-block, .co-panel { position: static; min-height: 0; }
  .co-panel--last .co-footer-spacer { flex-basis: var(--co-footer-top); }
  .co-section { grid-template-columns: minmax(0, 1fr); }
  .co-section__graphic { justify-content: flex-start; padding-left: var(--co-gutter); padding-top: 40px; }
  .co-section__graphic--hero { align-items: flex-start; }
  .co-steps, .co-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .co-cards, .co-results, .co-split, .co-form-page { grid-template-columns: minmax(0, 1fr); }
  .co-form-aside { padding-left: var(--co-gutter); }
  .co-nav { gap: 20px; }
}
@media (max-width: 600px) {
  .co-header { height: auto; min-height: var(--co-header-h); flex-wrap: wrap; padding-top: 24px; padding-bottom: 24px; row-gap: 16px; }   /* menu drops to a second row; no hamburger, no icon */
  .co-brand { white-space: nowrap; }
  .co-nav { width: 100%; flex-wrap: wrap; gap: 20px; }
  .co-steps, .co-grid { grid-template-columns: minmax(0, 1fr); }
  .co-btn, .co-input, .co-textarea { width: 100%; }
  .co-form__actions { flex-direction: column; }
  .co-action { flex-direction: column; align-items: stretch; }
  .co-section__graphic--hero img, .co-section__graphic--hero svg { width: min(100%, 320px); }
}
@media (prefers-reduced-motion: reduce) {
  .co-header-block, .co-panel { position: static; min-height: 0; }
  * { transition: none !important; animation: none !important; }
}