/* Lose the Dent page frame. Loaded after brand/ltd.css and brand/ltd-site.css on every page of the app layout.
   - a 72px header with the one action in it
   - a rail down the left of wide pages carrying one guide line: dotted ahead of you, solid behind you, a marker at
     every heading. It is a progress line, nothing more; it is hidden under 900px and drawn whole under reduced motion
   - one alignment grid. Everything sits on one of three left edges: the rail, the heading edge, and the indent one
     gutter in from it. Every control is a 280px module (or two modules plus the 8px gap: 568px), so inputs, buttons,
     filter columns and maps share edges
   ltd-journey.js draws the line and, on the homepage, writes --f (focus, 0 to 1) and --s (position, -1 to 1) on
   each section. Without JS, under 900px or with reduced motion the site is a plain document. */

:root {
  --cx-header-h: 72px;
  --cx-rail-w: 96px;
  --cx-edge: calc(var(--co-gutter) + var(--cx-rail-w));   /* the heading edge */
  --cx-dim: 0.34;
  --cx-shrink: 0.035;
  --cx-drift: 28px;
  --cx-module: var(--co-control-w);                        /* 280 */
  --cx-module-2: calc(var(--co-control-w) * 2 + var(--co-gap-control));   /* 568 */
  /* One vertical rhythm for every page */
  --co-intro: 28px;
  --co-content: 56px;
  --co-action: 48px;
  --co-row: 40px;
  --co-row-list: 28px;
  --co-row-guides: 40px;
  --co-pin: var(--cx-header-h);
}
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--cx-header-h) + 16px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* 1. Header ----------------------------------------------------------------------------------------- */
.cx-header { position: sticky; top: 0; z-index: 20; height: var(--cx-header-h); display: flex; align-items: center; gap: 28px; padding: 0 var(--co-gutter); background: var(--co-ground); max-width: 1440px; margin: 0 auto; box-shadow: 0 1px 0 var(--co-rule); }
.cx-nav { display: flex; gap: 28px; margin-left: auto; }
.cx-nav a, .cx-header__me { display: inline-flex; align-items: center; min-height: 44px; }
.cx-nav a[aria-current="page"], .cx-header__me[aria-current="page"] { color: var(--co-blue); box-shadow: inset 0 -3px 0 var(--co-blue); }
.cx-header__cta { width: auto; min-width: 150px; height: 44px; }
.cx-header__me { margin-left: auto; white-space: nowrap; }
.cx-nav + .cx-header__me { margin-left: 0; }
@media (max-width: 900px) { .cx-header__me, .cx-nav + .cx-header__me { margin-left: auto; } .cx-header .cx-header__me + .cx-header__cta { margin-left: 0; } }

/* 2. Page frame ------------------------------------------------------------------------------------- */
.cx-main { position: relative; max-width: 1440px; margin: 0 auto; }
.cx-page { display: block; min-width: 0; padding: 88px var(--co-gutter) 0 var(--cx-edge); min-height: calc(100vh - var(--cx-header-h) - 220px); }
.cx-page-foot { padding: 120px var(--co-gutter) 64px var(--cx-edge); }

/* The guide line down the rail (svg drawn by ltd-journey.js). Class names keep the word "pipe" from the code this
   was built on; it is a plain line with a marker at each heading */
.cx-pipe { position: absolute; top: 0; left: 0; width: 100%; height: 0; pointer-events: none; overflow: visible; z-index: 1; }
.cx-pipe__route { fill: none; stroke: var(--co-rule); stroke-width: 2; stroke-linecap: round; }
.cx-pipe__run { fill: none; stroke: var(--co-blue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cx-pipe__stub { stroke: var(--co-blue); stroke-width: 2; stroke-linecap: round; transition: stroke-dashoffset 360ms var(--co-ease); }
.cx-pipe__cap { stroke: var(--co-rule); stroke-width: 2; stroke-linecap: round; }
.cx-pipe__joint circle { fill: var(--co-ground); stroke: var(--co-blue); stroke-width: 2; transition: fill 200ms var(--co-ease); }
.cx-pipe__joint text { font: 700 13px/1 var(--co-font-display); fill: var(--co-blue); text-anchor: middle; dominant-baseline: central; transition: fill 200ms var(--co-ease); }
.cx-pipe__joint.is-passed circle { fill: var(--co-blue); }
.cx-pipe__joint.is-passed text { fill: var(--co-ground); }

/* ZIP code entry in the hero and the closing section: label, then input and button side by side */
.cx-postcode { flex-direction: column; align-items: flex-start; gap: 8px; }
.cx-postcode .co-form-row { align-items: stretch; }
.cx-postcode .co-input--hero { font-size: 18px; }
@media (max-width: 600px) { .cx-postcode { align-items: stretch; } .cx-postcode .co-form-row { flex-direction: column; width: 100%; } .cx-postcode .co-input--hero, .cx-postcode .co-btn { width: 100%; } }

/* 3. Type and rhythm -------------------------------------------------------------------------------- */
.co-intro { font-size: 19px; line-height: 1.45; max-width: calc(50ch + var(--co-gutter)); }
.co-helper { margin-top: 20px; }
.cx-kicker { color: var(--co-blue); margin-bottom: 20px; }
.co-band .cx-kicker { color: var(--co-ground); }
.co-notice { font-size: var(--co-body-size); }
.co-subsection { margin-top: 72px; gap: 28px; }
.co-gap-top-lg { margin-top: 40px; }
.co-prose__body { font-size: 17px; line-height: 1.55; }
.co-prose__body h2, .co-prose__body h3, .co-prose__body h4 { margin: 48px 0 16px; scroll-margin-top: calc(var(--cx-header-h) + 16px); }
.co-prose__body h3 { font-size: 18px; margin-top: 32px; }
.co-prose__body img, .co-prose__body table, .co-prose__body ul, .co-prose__body ol, .co-prose__body h2, .co-prose__body h3, .co-prose__body h4, .co-prose__body p { max-width: 68ch; }
.co-section__graphic { padding-top: 0; }

/* 4. Controls: one module ---------------------------------------------------------------------------- */
/* A field is a label, a control and its help, stacked 8px apart and exactly one module wide, so a row of fields and the
   button beside them share top and bottom edges. A wide field is two modules. Nothing is sized to its content */
.co-field { width: var(--cx-module); max-width: 100%; gap: 8px; }
.co-field > .co-input, .co-field > .co-suggest-wrap, .co-field > select, .co-field .co-suggest-wrap > .co-input { width: 100%; }
.co-field:has(> .co-textarea), .co-field:has(> .co-code), .co-field:has(> .co-map), .co-field--wide, .co-field:has(> .co-choices), .co-field:has(> .co-input[type="file"]) { width: var(--cx-module-2); }
.co-field > .co-textarea, .co-field > .co-code, .co-field > .co-input[type="file"] { width: 100%; }
.co-field > .co-label, .co-field > label.co-label { min-height: 18px; display: block; }
.co-field__help, .co-field__error { font-size: var(--co-label-size); line-height: 1.4; max-width: var(--cx-module-2); }
.co-form-row { align-items: flex-end; row-gap: 24px; }
.co-form-row > .co-field { flex: 0 0 auto; }
.co-form-row > .co-btn { margin-bottom: 0; }
/* Fields sit on a two-module grid: two single fields share a row (280 + 8 + 280) and end on the same right edge as the
   568px textarea, choice list or file input beneath them. Anything that is not a plain field takes the full row */
.co-fieldset__fields, .cx-pairs { display: grid; grid-template-columns: repeat(2, var(--cx-module)); gap: 24px var(--co-gap-control); align-items: start; justify-content: start; }
.co-fieldset__fields > *, .cx-pairs > * { grid-column: 1 / -1; min-width: 0; }
.co-fieldset__fields > .co-field, .cx-pairs > .co-field { grid-column: auto; }
.co-fieldset__fields > .co-field:has(> .co-textarea), .co-fieldset__fields > .co-field:has(> .co-choices), .co-fieldset__fields > .co-field:has(> .co-input[type="file"]), .co-fieldset__fields > .co-field:has(> .co-code), .co-fieldset__fields > .co-field:has(> .co-map), .co-fieldset__fields > .co-field:has(.co-choice), .co-fieldset__fields > .co-field--wide,
.cx-pairs > .co-field:has(> .co-textarea), .cx-pairs > .co-field:has(> .co-choices), .cx-pairs > .co-field:has(.co-choice), .cx-pairs > .co-field--wide { grid-column: 1 / -1; }
.co-fieldset > legend { margin-bottom: 20px; }
.co-form { gap: 56px; }
.co-form__actions { margin-top: 0; }

/* Select boxes: the same block as an input, with the pack's own arrow drawn in ink at the same 16px inset as the text */
select.co-input, .co-field > select {
  appearance: none; -webkit-appearance: none; width: 100%; height: var(--co-control-h); padding: 0 44px 0 16px;
  font: 400 16px/1 var(--co-font); color: var(--co-ink); background-color: var(--co-ground); border: var(--co-line); border-radius: var(--co-radius); cursor: pointer;
  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.5l5 5 5-5' fill='none' stroke='%2315181C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; text-overflow: ellipsis;
}
select.co-input:focus-visible, .co-field > select:focus-visible { outline: 2px solid var(--co-blue); outline-offset: 2px; }
.co-input, .co-textarea { font-size: 16px; }     /* 16px also stops iOS zooming the page on focus */

/* Choices: the square sits on the first line of its label, however many lines the label runs to */
.co-choice { align-items: flex-start; gap: 12px; }
.co-choice input { margin-top: 1px; }
.co-choice > span, .co-choice > .co-label { line-height: 18px; }
.co-choice--text span { font-size: var(--co-body-size); line-height: var(--co-body-lh); }
.co-choice--text input { margin-top: 3px; }
.co-choices { gap: 12px; }
.co-grid > .co-block > .co-choice + span, .co-grid > .co-block > .co-choice + p { padding-left: 28px; }   /* the description hangs under the label, not under the square */

/* 5. Lists, cards and results ------------------------------------------------------------------------ */
.co-grid { gap: 40px var(--co-gutter); }
.co-grid--list { gap: 28px var(--co-gutter); }
.co-block { gap: 6px; }
/* Cards in a row are the same height, with the button on the bottom edge, so a row of cards ends on one line */
.co-cards { gap: 56px var(--co-gutter); align-items: stretch; }
.co-card { gap: 14px; height: 100%; }
.co-card > .co-title { font-size: 22px; }
.co-card > p { max-width: 46ch; }
.co-card__facts { margin-top: 6px; gap: 12px 24px; }
.co-card > .co-btn, .co-card > .co-form__actions, .co-card > .co-action { margin-top: auto; }
.co-card > .co-card__facts + .co-btn { margin-top: auto; }
.co-card::after { content: ""; order: 98; height: 6px; flex: 0 0 auto; }
.co-card > .co-btn { order: 99; }
.co-fact { gap: 4px; }
/* Results: the filter column is one module, the same width as the search inputs above it and the map inside it */
.co-results { grid-template-columns: var(--cx-module) minmax(0, 1fr); gap: var(--co-gutter); align-items: start; }
.co-nav-list { gap: 10px; }
.co-nav-list__head { margin-top: 28px; }
.co-nav-list > a, .co-nav-list form button { font-size: var(--co-label-size); }
.co-map { height: var(--cx-module); margin-top: 12px; }
.co-map--wide { height: 340px; max-width: var(--cx-module-2); }
.co-rows { gap: 14px 24px; }
.co-entry { gap: 6px; }
.co-stack { gap: 40px; }
.cx-guides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px var(--co-gutter); }
.cx-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--co-gutter); }
.cx-step-no { font-family: var(--co-font-display); font-size: var(--co-h1-size); line-height: 1; font-weight: 700; color: var(--co-blue); margin-bottom: 8px; }
.co-band .cx-step-no { color: var(--co-ground); }
.co-form-page { margin-top: 56px; }
.co-form-aside { gap: 40px; padding-top: 0; position: sticky; top: calc(var(--cx-header-h) + 24px); }

/* 6. The homepage: one section to a window ----------------------------------------------------------- */
.cx-sec { min-height: calc(100vh - var(--cx-header-h)); min-height: calc(100svh - var(--cx-header-h)); display: flex; align-items: center; padding: 56px var(--co-gutter) 56px var(--cx-edge); --f: 1; --s: 0; }
.cx-sec__inner { width: 100%; transform-origin: 0 50%; }
.cx-sec--hero .co-intro { margin-top: 36px; }
.cx-sec--hero .co-action { margin-top: 44px; }
.cx-sec--post { min-height: 72vh; align-items: stretch; padding-bottom: 64px; }
.cx-sec--post .cx-sec__inner { display: flex; flex-direction: column; justify-content: space-between; gap: 96px; padding-top: 72px; }
.cx-sec .co-band { margin: 0; padding: 72px var(--co-gutter); border-radius: calc(var(--co-radius) * 2); }
.cx-finish { display: grid; grid-template-columns: minmax(220px, 340px) minmax(0, 1fr); gap: var(--co-gutter); align-items: center; }
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .cx-js .cx-sec__inner {
    opacity: calc(var(--cx-dim) + (1 - var(--cx-dim)) * var(--f));
    transform: translate3d(0, calc(var(--s) * (1 - var(--f)) * var(--cx-drift)), 0) scale(calc(1 - var(--cx-shrink) * (1 - var(--f))));
    will-change: transform, opacity;
  }
  /* The accent block never goes pale: its contents fade, the block only shrinks */
  .cx-js .cx-sec--band .cx-sec__inner { opacity: 1; }
  .cx-js .cx-sec--band .co-band > * { opacity: calc(var(--cx-dim) + (1 - var(--cx-dim)) * var(--f)); }
  .cx-js .cx-sec:focus-within .cx-sec__inner, .cx-js .cx-sec--band:focus-within .co-band > * { opacity: 1; }
}

/* 7. Narrower windows -------------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  :root { --cx-rail-w: 72px; }
  .co-results .co-cards { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  :root { --cx-rail-w: 0px; }
  .cx-pipe { display: none; }
  .cx-nav { display: none; }
  .cx-header__cta { margin-left: auto; }
  .cx-page { padding-top: 40px; min-height: 0; }
  .cx-page-foot { padding-top: 72px; }
  .cx-sec { padding: 48px var(--co-gutter); min-height: 0; }
  .cx-sec--hero { padding-top: 40px; }
  .cx-sec .co-band { margin: 0 calc(-1 * var(--co-gutter)); border-radius: 0; }
  .cx-steps, .cx-guides, .cx-finish { grid-template-columns: minmax(0, 1fr); }
  .cx-finish__unit { max-width: 260px; }
  .co-content { margin-top: 40px; }
  .co-results { grid-template-columns: minmax(0, 1fr); }
  .co-form-aside { position: static; padding-top: 32px; }
  .co-map { height: 320px; }
}
@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  .cx-js .cx-sec__inner { opacity: calc(0.55 + 0.45 * var(--f)); }
  .cx-js .cx-sec--band .cx-sec__inner { opacity: 1; }
}
@media (max-width: 640px) {
  .cx-header__cta { min-width: 0; padding: 0 16px; }
  .co-field, .co-field:has(> .co-textarea), .co-field--wide, .co-field:has(> .co-choices), .co-field:has(> .co-input[type="file"]), .co-field:has(> .co-code), .co-field:has(> .co-map) { width: 100%; }
  .cx-pairs, .co-fieldset__fields { grid-template-columns: minmax(0, 1fr); }
  .co-grid > .co-block > .co-choice + span { padding-left: 28px; }
}

@media (max-width: 480px) { .cx-header--auth .co-brand span { display: none; } }
/* Header "Messages (n)" link sits right after "My quotes"/"Opportunities" */
.cx-header .cx-header__me + .cx-header__msgs { margin-left: 0; }
@media (max-width: 560px) { .cx-header { gap: 12px; } .cx-header__msgs { font-size: 14px; } .co-brand { font-size: 20px; gap: 8px; } .co-brand img, .co-brand svg { width: 28px; height: 28px; } }
@media (max-width: 400px) { .cx-header__me:not(.cx-header__msgs) { font-size: 14px; } .cx-header__cta { padding: 0 12px; font-size: 15px; } }

/* Sign out (owner 2026-09-30): in the header on wider screens, in the footer on every screen (a phone header has no room). Form buttons that read like the links beside them. */
.cx-header__out { display: inline-flex; margin: 0; }
.cx-header__out button.co-label { font-family: var(--co-font-display); text-decoration: none; }
@media (max-width: 900px) { .cx-header .cx-header__out .cx-header__me { margin-left: 0; } }
@media (max-width: 640px) { .cx-header__out { display: none; } }
.co-footer__out { margin: 0; }
.co-footer__out button { background: none; border: 0; padding: 0; margin: 0; color: inherit; font: inherit; cursor: pointer; text-align: left; }
.co-footer__out button:hover, .co-footer__out button:focus-visible { color: var(--co-blue); }
@media (max-width: 760px) { .co-footer__out button { display: inline-flex; align-items: center; min-height: 44px; } }

/* The owner's logo (2026-09-30): the stacked car + name lockup as one image in the header and footer. */
.co-brand .co-brand__lockup, .co-brand img.co-brand__lockup { width: auto; height: 60px; }
.co-footer .co-brand .co-brand__lockup { height: 96px; }
@media (max-width: 560px) { .co-brand .co-brand__lockup, .co-brand img.co-brand__lockup { height: 52px; } .co-footer .co-brand .co-brand__lockup { height: 84px; } }