/* 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; order: 99; }
.co-card > .co-form__actions, .co-card > .co-action { display: flex; flex-wrap: wrap; justify-content: flex-end; padding-left: 0; }
.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%; }
/* Hero mark (owner 2026-10-02): the sports car from the logo, right above "Lose the dent", about as wide as the heading */
.cx-hero-mark { display: block; width: min(100%, calc(var(--co-h1-size) * 5.6)); height: auto; margin: 0 0 18px; }
.cx-map-note { margin: 0; }
/* Home hero (owner 2026-10-04, to his own mock-up): no car mark above the heading. From 901px the hero is two columns:
   on the left a text column about a quarter of the screen wide (heading on two lines, intro, the ZIP box above the
   button, the two numbers); on the right the animation, about half the screen wide, right-aligned and centred against
   the text, with clear space between the two. Everything is sized from the screen width, so it scales with the page;
   the px caps stop it outgrowing the 1800px frame. Below 901px it is one column (ltd.css), unchanged. */
@media (min-width: 901px) {
  .cx-sec.cx-sec--hero .co-section { grid-template-columns: minmax(260px, min(27vw, 432px)) minmax(0, 1fr); column-gap: var(--co-gutter); row-gap: 0; align-items: start;
    grid-template-areas: "head anim" "intro anim" "form anim" "help anim" "stats anim"; }
  .cx-sec.cx-sec--hero .co-section__main { display: contents; }
  .cx-sec.cx-sec--hero .co-heading { grid-area: head; }
  .cx-sec.cx-sec--hero .co-intro { grid-area: intro; margin-top: 36px; margin-left: 0; padding-left: 0; }
  .cx-sec.cx-sec--hero .co-action { grid-area: form; margin-top: 36px; margin-left: 0; padding-left: 0; }
  .cx-sec.cx-sec--hero .co-section__main > .co-helper { grid-area: help; margin-left: 0; padding-left: 0; }
  .cx-sec.cx-sec--hero .cx-postcode { align-items: stretch; }
  .cx-sec.cx-sec--hero .cx-postcode .co-form-row { flex-direction: column; align-items: stretch; }
  .cx-sec.cx-sec--hero .cx-postcode .co-form-row > *, .cx-sec.cx-sec--hero .cx-postcode .co-input, .cx-sec.cx-sec--hero .cx-postcode .co-btn { width: 100%; }
  .cx-sec.cx-sec--hero .cx-stats { grid-area: stats; margin-top: 40px; margin-left: 0; padding-left: 0; }
  .cx-sec.cx-sec--hero .co-section__graphic--hero { grid-area: anim; align-self: center; justify-self: end; width: min(100%, 52vw, 936px); margin-top: 0; padding: 0 clamp(20px, 3.2vw, 60px); align-items: stretch; }   /* breathing room left and right of the drawing (owner) */
  .cx-sec.cx-sec--hero .co-section__graphic--hero svg { width: 100%; }
  .cx-sec.cx-sec--hero .cx-map-note { max-width: none; padding-left: 4%; }
}
/* Phones and small tablets (owner 2026-10-04): the animation was far down the page, under the form and the numbers.
   It now comes straight after the heading, so it is on the first screen; then the intro, the ZIP form, the numbers. */
@media (max-width: 900px) {
  .cx-sec.cx-sec--hero .co-section { display: flex; flex-direction: column; }
  .cx-sec.cx-sec--hero .co-section__main { display: contents; }
  .cx-sec.cx-sec--hero .co-heading { order: 1; }
  .cx-sec.cx-sec--hero .co-section__graphic--hero { order: 2; padding: 0; margin-top: 20px; gap: 10px; width: 100%; }
  .cx-sec.cx-sec--hero .co-section__graphic--hero svg { width: 100%; max-width: 560px; }
  .cx-sec.cx-sec--hero .co-intro { order: 3; margin-top: 24px; }
  .cx-sec.cx-sec--hero .co-action { order: 4; margin-top: 24px; }
  .cx-sec.cx-sec--hero .co-section__main > .co-helper { order: 5; }
  .cx-sec.cx-sec--hero .cx-stats { order: 6; }
}
/* Home illustrations (owner 2026-10-03): each one fills its column, so it grows with the page instead of sitting
   at a fixed 260px. One column layouts (900px and under) cap it at 520px. */
.cx-sec .co-section__graphic svg, .cx-sec .co-section__graphic img { width: 100%; }
.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; }
  .cx-sec .co-section__graphic svg, .cx-sec .co-section__graphic img { width: min(100%, 520px); }
  .cx-map-note { max-width: 520px; }
  .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; }
/* Header wordmark (owner 2026-10-02): text only, the car moved to the home hero; the footer keeps the full lockup */
.co-brand .co-brand__wordmark, .co-brand img.co-brand__wordmark { width: auto; height: 44px; }
@media (max-width: 560px) { .co-brand .co-brand__wordmark, .co-brand img.co-brand__wordmark { height: 40px; } }
@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; } }

/* Home h1: the T of DENT is a light pole a car has hit. The real letter keeps its lower part standing; a copy of it
   (::before) shows only the upper part, tipped over from the kink. Screen readers still get the plain word. */
.cx-bent-t { position: relative; display: inline-block; color: transparent; }
.cx-bent-t::before, .cx-bent-t::after { content: "T"; position: absolute; left: 0; top: 0; color: var(--co-ink); }
.cx-bent-t::after { clip-path: inset(50% -10% -10% -10%); }
.cx-bent-t::before { clip-path: inset(-20% -80% 43% -80%); transform-origin: 50% 53%; transform: rotate(13deg); }

/* Desktop (owner 2026-10-04): the name is said once, in a bigger header wordmark, so the home hero drops the
   "Lose the dent" line under the car and leads with "Quotes from local dent specialists". The h1 text stays in the
   page for search engines and screen readers. Phones keep the old hero and header. */
@media (min-width: 901px) {
  :root { --cx-header-h: 88px; }
  .co-brand .co-brand__wordmark, .co-brand img.co-brand__wordmark { height: 66px; }
  .cx-sec--hero .co-heading .co-h1 { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .cx-sec--hero .co-heading .co-h1-sub { margin-top: 0; padding-left: 0; font-size: calc(var(--co-h1-size) * 0.86); font-weight: 600; line-height: 1.05; }
}
/* Owner 2026-10-06: the "Send photos. Compare quotes. Choose a repairer." line under the hero animation made bigger,
   in the display font so it reads as a tagline, not a caption. Scales with the screen; was 16px body text. */
.cx-sec.cx-sec--hero .cx-map-note { font-family: var(--co-font-display); font-weight: 600; font-size: clamp(19px, 2.1vw, 36px); line-height: 1.15; letter-spacing: 0.01em; color: var(--co-ink, inherit); margin-top: 8px; }
@media (max-width: 900px) { .cx-sec.cx-sec--hero .cx-map-note { font-size: clamp(22px, 6vw, 30px); margin-bottom: 8px; } }