/* Stonebright: chalk, warm stone, ink and a restrained terracotta and amber.
   Mobile first. No inline styles anywhere, so the content security policy can
   stay strict. Motifs: slab shadows (cards sit like laid slabs) and kerb strips
   (rows of stones) between sections. */

@font-face { font-family: 'Instrument Serif'; src: url('/assets/fonts/InstrumentSerif-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url('/assets/fonts/InstrumentSerif-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Instrument Sans'; src: url('/assets/fonts/InstrumentSans-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Instrument Sans'; src: url('/assets/fonts/InstrumentSans-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --chalk: #F4F1EA;
  --chalk-2: #EBE6DC;
  --paper: #FBF9F4;
  --stone: #DCD2C2;
  --stone-2: #C8BAA4;
  --edge: #7A7266;
  --ink: #1D2026;
  --ink-2: #393D45;
  --ink-3: #5B5853;
  --terracotta: #A44A26;
  --terracotta-deep: #8A3B1C;
  --amber: #E3A23B;
  --amber-soft: #F3DDB4;
  --error: #9B2A1C;
  --line: rgba(29, 32, 38, 0.16);
  --serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --sans: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --radius: 4px;
  --wrap: 74rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --slab: 6px 6px 0 var(--stone);
  --slab-deep: 10px 10px 0 var(--stone-2);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 1rem; }
body {
  margin: 0;
  background: var(--chalk);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--sans);
  overflow-wrap: break-word;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--terracotta-deep); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--terracotta-deep); outline-offset: 3px; border-radius: 2px; }
main:focus { outline: none; }
p, ul, ol, dl, figure, table, fieldset { margin: 0; }
ul, ol { padding: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
sup { font-size: 0.68em; line-height: 0; vertical-align: 0.55em; }
button, input, select { font: inherit; color: inherit; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.no-js .js-only { display: none !important; }
.js .no-js-only { display: none !important; }
[hidden] { display: none !important; }

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 20; padding: 0.75rem 1rem;
  background: var(--ink); color: var(--chalk); font-weight: 700; border-radius: var(--radius);
}
.skip-link:focus { top: 1rem; }

/* Layout */

.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.section { padding-block: clamp(3rem, 2rem + 4vw, 6rem); }
.section--tight { padding-block: clamp(2rem, 1.5rem + 2.5vw, 3.75rem); }
.section--tint { background: var(--chalk-2); }
.stack > * + * { margin-top: 1rem; }
.stack--loose > * + * { margin-top: 1.5rem; }
/* Every grid states a shrinkable column (minmax with a zero minimum), so a
   table or a long word can never force a column wider than the screen. */
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; }
@media (min-width: 60rem) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.section-head { max-width: 46rem; margin-bottom: clamp(1.75rem, 3vw, 2.75rem); }
.section-head > * + * { margin-top: 0.85rem; }
.section-foot { margin-top: 2rem; }

/* A kerb: a row of laid stones used between sections. */
.kerb {
  height: 14px;
  background:
    repeating-linear-gradient(90deg, var(--stone) 0 116px, transparent 116px 122px) 0 0 / 100% 10px no-repeat,
    linear-gradient(var(--stone-2), var(--stone-2)) 0 10px / 100% 4px no-repeat;
}

/* Type */

.display {
  font-family: var(--serif); font-size: clamp(2.6rem, 1.3rem + 5.4vw, 5.4rem);
  line-height: 1; letter-spacing: -0.012em;
}
.heading { font-family: var(--serif); font-size: clamp(2rem, 1.25rem + 2.8vw, 3.25rem); line-height: 1.06; letter-spacing: -0.006em; }
.display em, .heading em { font-style: italic; color: var(--terracotta); }
.subheading { font-family: var(--serif); font-size: clamp(1.55rem, 1.2rem + 1.2vw, 2rem); line-height: 1.12; }
h3, .h3 { font-family: var(--sans); font-weight: 700; font-size: 1.15rem; line-height: 1.3; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3);
}
.eyebrow::before { content: ''; width: 0.7rem; height: 0.7rem; border-radius: 1px; background: var(--terracotta); flex: none; }
.lede { font-size: clamp(1.12rem, 1.02rem + 0.45vw, 1.3rem); line-height: 1.55; color: var(--ink-2); max-width: 40rem; }
.small { font-size: 0.92rem; color: var(--ink-3); }
.prose { max-width: 42rem; }
.prose > * + * { margin-top: 1rem; }
.prose h2 { margin-top: 2.5rem; }
.prose h3 { margin-top: 1.75rem; }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li + li { margin-top: 0.4rem; }
.text-link { font-weight: 700; }
.rules { padding-left: 1.4rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; max-width: 40rem; }
.rules li::marker { font-weight: 700; color: var(--terracotta-deep); }

/* Buttons */

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; }
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 3rem; padding: 0.7rem 1.35rem; border: 2px solid var(--ink); border-radius: var(--radius);
  background: var(--ink); color: var(--chalk); font-weight: 700; text-decoration: none; cursor: pointer;
  box-shadow: 4px 4px 0 var(--stone-2); transition: transform 120ms ease, box-shadow 120ms ease;
}
.button:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--stone-2); }
.button:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--stone-2); }
.button--ghost { background: transparent; color: var(--ink); }
.button--small { min-height: 2.5rem; padding: 0.45rem 0.95rem; font-size: 0.95rem; box-shadow: 3px 3px 0 var(--stone-2); }
.button[disabled], .button[aria-disabled='true'] { opacity: 0.55; cursor: not-allowed; transform: none; }
.button--light { background: var(--chalk); color: var(--ink); border-color: var(--chalk); box-shadow: 4px 4px 0 var(--ink-3); }
.button--outline-light { background: transparent; color: var(--chalk); border-color: var(--chalk); box-shadow: none; }
.chip {
  display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.5rem; padding: 0.35rem 0.9rem;
  border: 1.5px solid var(--edge); border-radius: 999px; background: var(--paper); color: var(--ink);
  font-weight: 700; font-size: 0.95rem; cursor: pointer;
}
.chip[aria-pressed='true'] { background: var(--ink); color: var(--chalk); border-color: var(--ink); }

/* Concept bar, header and navigation */

.concept-bar { background: var(--ink); color: var(--chalk); font-size: 0.85rem; }
.concept-bar p { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; padding-block: 0.45rem; display: flex; flex-wrap: wrap; gap: 0.15rem 0.9rem; }
.concept-bar strong { color: var(--amber); letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.78rem; }
@media (max-width: 26rem) { .concept-bar__extra { display: none; } }

.site-header { border-bottom: 1px solid var(--line); background: var(--chalk); }
.site-header__inner {
  width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto;
  display: flex; align-items: center; gap: 0.75rem 1.5rem; flex-wrap: wrap; padding-block: 0.85rem;
}
.brand { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--ink); text-decoration: none; margin-right: auto; }
.brand__mark { width: 2.1rem; height: 2.1rem; }
.mark__slab { fill: var(--ink); }
.mark__slab--bright { fill: var(--terracotta); }
.brand__name { font-family: var(--serif); font-size: 1.75rem; line-height: 1; letter-spacing: -0.01em; }
.brand__name em { font-style: italic; color: var(--terracotta); }
.nav-toggle {
  display: none; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0.4rem 0.9rem;
  border: 1.5px solid var(--ink); border-radius: var(--radius); background: transparent; font-weight: 700; cursor: pointer;
}
.nav-toggle__icon, .nav-toggle__icon::before, .nav-toggle__icon::after { display: block; width: 1.1rem; height: 2px; background: currentColor; position: relative; }
.nav-toggle__icon::before, .nav-toggle__icon::after { content: ''; position: absolute; left: 0; }
.nav-toggle__icon::before { top: -6px; }
.nav-toggle__icon::after { top: 6px; }
.site-nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
.site-nav a { display: inline-block; padding-block: 0.5rem; color: var(--ink); font-weight: 700; text-decoration: none; border-bottom: 2px solid transparent; }
.site-nav a:hover { border-bottom-color: var(--stone-2); }
.site-nav a[aria-current='page'] { border-bottom-color: var(--terracotta); }
.site-header__cta { display: none; }
@media (max-width: 39.99rem) { .site-header__inner { padding-block: 0.6rem; } }

@media (max-width: 59.99rem) {
  .js .nav-toggle { display: inline-flex; }
  .js .site-nav { display: none; width: 100%; }
  .js .site-nav.is-open { display: block; }
  .site-nav { width: 100%; }
  .site-nav ul { flex-direction: column; gap: 0; border-top: 1px solid var(--line); }
  .site-nav li { border-bottom: 1px solid var(--line); }
  .site-nav a { display: block; padding-block: 0.85rem; border-bottom: 0; }
  .site-nav a[aria-current='page'] { color: var(--terracotta-deep); }
  .site-nav a[aria-current='page']::before { content: ''; display: inline-block; width: 0.55rem; height: 0.55rem; margin-right: 0.6rem; background: var(--terracotta); vertical-align: 0.1em; }
}
@media (min-width: 60rem) {
  .site-nav { margin-left: auto; }
  .site-header__cta { display: inline-flex; }
}

/* Footer */

.site-footer { background: var(--ink); color: var(--chalk); padding-block: 3rem 2.5rem; }
.site-footer a { color: var(--chalk); }
.site-footer__inner { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
@media (min-width: 48rem) { .site-footer__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.site-footer__brand .brand__name { font-size: 2rem; }
.site-footer .brand__name em { color: var(--amber); }
.site-footer__brand p + p { margin-top: 0.5rem; color: #D9D3C7; }
.site-footer__nav ul { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 0.5rem 2rem; }
.site-footer__nav a { font-weight: 700; text-decoration: none; }
.site-footer__nav a:hover { text-decoration: underline; }
.site-footer__small { grid-column: 1 / -1; border-top: 1px solid rgba(244, 241, 234, 0.2); padding-top: 1.5rem; font-size: 0.9rem; color: #D9D3C7; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.6rem; max-width: 60rem; }
.site-footer :focus-visible { outline-color: var(--amber); }

/* Home hero */

/* Small screens read: headline, the whole illustration, the actions, then the
   description and note, so the visual and the estimate action come early.
   Wide screens keep the copy beside the illustration, as before. */
.hero { padding-block: 1.25rem clamp(2.5rem, 2rem + 3vw, 5rem); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.hero__title { margin-top: 0.6rem; font-size: clamp(2.35rem, 1.2rem + 5.6vw, 5.4rem); }
.hero__film { margin-top: 1.15rem; }
.hero__actions { margin-top: 1.25rem; }
.hero__lede { margin-top: 1.25rem; }
.hero__note { margin-top: 0.9rem; font-size: 0.9rem; color: var(--ink-3); max-width: 34rem; }
@media (min-width: 64rem) {
  .hero { padding-top: clamp(2rem, 1.5rem + 3vw, 4.5rem); }
  .hero__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: 1fr auto auto auto auto auto 1fr;
    grid-template-areas: '. film' 'eyebrow film' 'title film' 'lede film' 'actions film' 'note film' '. film';
    column-gap: clamp(2rem, 4vw, 3.5rem);
  }
  .hero__eyebrow { grid-area: eyebrow; }
  .hero__title { grid-area: title; margin-top: 1.15rem; }
  .hero__lede { grid-area: lede; margin-top: 1.15rem; }
  .hero__actions { grid-area: actions; margin-top: 1.75rem; }
  .hero__note { grid-area: note; margin-top: 1.15rem; }
  .hero__film { grid-area: film; align-self: center; margin-top: 0; }
}

/* The approved film keeps its full composition at every screen size. */
.film { margin: 0; }
.film__frame {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 6px;
  background: var(--ink-2); box-shadow: var(--slab-deep);
}
.film__frame > img, .film__frame > video, .film__frame > svg { width: 100%; height: 100%; object-fit: contain; }
.film__controls { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.65rem; }
.film__caption { margin-top: 0.6rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.6rem; font-size: 0.92rem; color: var(--ink-3); }
@media (min-width: 64rem) { .film__caption { margin-top: 1rem; } }
.film__tag, .tag {
  display: inline-block; padding: 0.1rem 0.5rem; border-radius: 3px; background: var(--amber-soft); color: #6B2E15;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; vertical-align: 0.1em;
}

/* Surface specimens */

.specimens { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
@media (min-width: 40rem) { .specimens { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .specimens { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.specimen { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--slab); display: flex; flex-direction: column; }
.specimen__art { aspect-ratio: 32 / 22; width: 100%; object-fit: cover; border-bottom: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0; }
.specimen__body { padding: 1.15rem 1.25rem 1.35rem; display: flex; flex-direction: column; gap: 0.6rem; flex: 1; }
.specimen__no { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.specimen__name { font-family: var(--serif); font-size: 1.85rem; line-height: 1.05; }
.specimen__rate { margin-top: auto; padding-top: 0.75rem; border-top: 1px dashed var(--stone-2); display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.6rem; }
.specimen__rate strong { font-size: 1.35rem; }

/* Before and after */

.reveal { margin: 0; }
.reveal__stage { position: relative; aspect-ratio: 1200 / 750; overflow: hidden; border-radius: 6px; box-shadow: var(--slab-deep); background: var(--ink-2); --split: 50%; }
.reveal__layer { position: absolute; inset: 0; }
.reveal__layer img { width: 100%; height: 100%; object-fit: cover; }
.reveal__layer--after { clip-path: inset(0 0 0 var(--split)); }
.reveal__divider { position: absolute; top: 0; bottom: 0; left: var(--split); width: 4px; margin-left: -2px; background: var(--chalk); box-shadow: 0 0 0 1px rgba(29, 32, 38, 0.35); pointer-events: none; }
.reveal__divider::after {
  content: ''; position: absolute; top: 50%; left: 50%; width: 2.75rem; height: 2.75rem; margin: -1.375rem 0 0 -1.375rem;
  border-radius: 50%; background: var(--chalk); border: 3px solid var(--ink);
}
.reveal__tag {
  position: absolute; top: 0.85rem; padding: 0.2rem 0.6rem; border-radius: 3px; background: rgba(29, 32, 38, 0.82); color: var(--chalk);
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.reveal__tag--before { left: 0.85rem; }
.reveal__tag--after { right: 0.85rem; }
.reveal__stage.is-draggable { touch-action: pan-y; cursor: ew-resize; user-select: none; -webkit-user-select: none; }
.reveal__stage img { pointer-events: none; -webkit-user-drag: none; }
.reveal.is-animating .reveal__layer--after { transition: clip-path 420ms ease; }
.reveal.is-animating .reveal__divider { transition: left 420ms ease; }
.reveal__controls { margin-top: 1.25rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.85rem; }
.reveal__label { font-weight: 700; }
.reveal__range { width: 100%; accent-color: var(--ink); min-height: 2.75rem; cursor: pointer; }
.reveal__buttons { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.reveal__caption { margin-top: 1rem; font-size: 0.92rem; color: var(--ink-3); max-width: 46rem; }
/* Without JavaScript both drawings are shown in full, one after the other. */
.no-js .reveal__stage { aspect-ratio: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem; background: transparent; box-shadow: none; }
.no-js .reveal__layer { position: relative; }
.no-js .reveal__layer--after { clip-path: none; }
.no-js .reveal__divider { display: none; }
.no-js .reveal__tag { display: none; }

/* Steps laid like stepping stones */

.stones { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; counter-reset: stone; }
@media (min-width: 40rem) { .stones { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 68rem) { .stones { grid-template-columns: repeat(4, minmax(0, 1fr)); } .stone:nth-child(even) { margin-top: 1.75rem; } }
.stone { position: relative; padding: 1.35rem 1.25rem 1.5rem; border-radius: var(--radius); background: var(--paper); border: 1px solid var(--line); box-shadow: var(--slab); }
.stone::before { counter-increment: stone; content: counter(stone, decimal-leading-zero); display: block; font-family: var(--serif); font-size: 2.4rem; line-height: 1; color: var(--terracotta); margin-bottom: 0.6rem; }
.stone p { margin-top: 0.45rem; color: var(--ink-2); }

/* Honest limits */

.limits { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.85rem; }
@media (min-width: 48rem) { .limits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.limit { padding: 1rem 1.15rem; border-left: 4px solid var(--terracotta); background: var(--paper); border-radius: 0 var(--radius) var(--radius) 0; }
.limit strong { display: block; }
.limit span { color: var(--ink-2); }

/* A plain panel band */

.band { background: var(--stone); }
.band__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-items: center; }
@media (min-width: 56rem) { .band__inner { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } .band__inner .actions { justify-content: flex-end; } }
.band .eyebrow { color: var(--ink-2); }

/* Tables */

/* The table wraps to fit narrow screens. If it is ever wider than its column
   (very large text, for example) it scrolls inside its own focusable frame,
   which also contains the spoken-only unit text, and a soft shadow shows at
   an edge while there is more to see. */
.table-scroll {
  position: relative; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius);
  background:
    linear-gradient(to right, var(--paper) 40%, rgba(251, 249, 244, 0)) left center / 2.5rem 100% no-repeat local,
    linear-gradient(to left, var(--paper) 40%, rgba(251, 249, 244, 0)) right center / 2.5rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(29, 32, 38, 0.22), rgba(29, 32, 38, 0)) left center / 0.9rem 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(29, 32, 38, 0.22), rgba(29, 32, 38, 0)) right center / 0.9rem 100% no-repeat scroll,
    var(--paper);
}
.data-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.data-table caption { text-align: left; padding: 0.8rem 0.75rem; font-weight: 700; border-bottom: 1px solid var(--line); }
.data-table th, .data-table td { padding: 0.65rem 0.75rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.data-table thead th { font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.data-table tbody tr:last-child th, .data-table tbody tr:last-child td { border-bottom: 0; }
.data-table .num { text-align: right; }
@media (min-width: 40rem) {
  .data-table caption, .data-table th, .data-table td { padding-inline: 1rem; }
  .data-table .num { white-space: nowrap; }
}

/* Worked examples */

.examples { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
@media (min-width: 64rem) { .examples { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; } }
.example { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--slab); padding: 1.25rem; }
.example > * + * { margin-top: 0.85rem; }
.example__title { font-family: var(--serif); font-size: 1.6rem; line-height: 1.1; }

/* Forms */

.field { border: 0; padding: 0; margin: 0; min-width: 0; }
.field + .field, .field + .area-cards, .area-cards + .field, .form-group + .form-group { margin-top: 1.5rem; }
.field__label { display: block; padding: 0; font-weight: 700; font-size: 1.02rem; margin-bottom: 0.35rem; }
legend.field__label { float: left; width: 100%; }
legend.field__label + * { clear: both; }
.field__hint { color: var(--ink-3); font-size: 0.93rem; margin-bottom: 0.6rem; }
.field__error { color: var(--error); font-weight: 700; font-size: 0.95rem; margin-top: 0.45rem; }
.field__error::before { content: ''; display: inline-block; width: 0.55rem; height: 0.55rem; margin-right: 0.45rem; background: var(--error); transform: rotate(45deg); vertical-align: 0.08em; }
.choices { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.55rem; }
@media (min-width: 30rem) { .choices--row { grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); } }
.choice {
  display: flex; align-items: flex-start; gap: 0.7rem; padding: 0.75rem 0.9rem; min-height: 3rem;
  border: 1.5px solid var(--edge); border-radius: var(--radius); background: var(--paper); cursor: pointer;
}
.choice:hover { border-color: var(--ink); }
.choice__input { flex: none; width: 1.2rem; height: 1.2rem; margin: 0.15rem 0 0; accent-color: var(--ink); }
/* Where :has() is supported the whole tile shows the choice and the focus;
   elsewhere the radio keeps its own focus ring. */
@supports selector(:has(*)) {
  .choice:has(input:checked) { border-color: var(--ink); background: #FFF6E6; box-shadow: inset 4px 0 0 var(--terracotta); }
  .choice:has(input:focus-visible) { outline: 3px solid var(--terracotta-deep); outline-offset: 2px; }
  .choice__input:focus-visible { outline: none; }
}
.choice__text { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.15rem; }
.choice__sub { font-size: 0.88rem; color: var(--ink-3); }
.input, .select {
  display: block; width: 100%; min-height: 3rem; padding: 0.6rem 0.8rem;
  border: 1.5px solid var(--edge); border-radius: var(--radius); background: var(--paper);
}
.input:focus-visible, .select:focus-visible { outline-offset: 1px; border-color: var(--ink); }
.input[aria-invalid='true'], .select[aria-invalid='true'] { border-color: var(--error); border-width: 2px; }
@supports selector(:has(*)) { .choice:has(input[aria-invalid='true']) { border-color: var(--error); } }
.input--short { max-width: 9rem; }
.input[readonly] { background: var(--chalk-2); border-style: dashed; color: var(--ink-2); }
.unit { display: flex; align-items: center; gap: 0.5rem; }
.unit span { font-weight: 700; color: var(--ink-3); }

.area-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
.area-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--chalk-2); padding: 1rem 1rem 1.25rem; box-shadow: var(--slab); min-width: 0; margin: 0; }
@media (min-width: 30rem) { .area-card { padding: 1.25rem 1.35rem 1.5rem; } }
.area-card__legend { float: left; width: 100%; padding: 0; margin-bottom: 0.85rem; font-family: var(--serif); font-size: 1.6rem; line-height: 1.1; }
.area-card__legend + * { clear: both; }
.area-card .field + .field { margin-top: 1rem; }
/* Length and width share one row from 30rem, labels and boxes level; below
   that they stack. The row rule is more specific than the spacing above. */
@media (min-width: 30rem) {
  .area-card__sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
  .area-card .area-card__sides > .field + .field { margin-top: 0; }
  .area-card__sides > .field__error { grid-column: 1 / -1; }
}
.area-card__remove { margin-top: 1rem; }
.check { display: flex; align-items: flex-start; gap: 0.7rem; padding: 0.75rem 0.9rem; border: 1.5px dashed var(--edge); border-radius: var(--radius); background: var(--paper); cursor: pointer; }
.check__input { flex: none; width: 1.25rem; height: 1.25rem; margin: 0.15rem 0 0; accent-color: var(--ink); }
.check__text { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
.check__text small { color: var(--ink-3); font-size: 0.88rem; }
.add-area { margin-top: 1.25rem; }
.form-group { border-top: 1px solid var(--line); padding-top: 1.5rem; margin-top: 2rem; }
.form-group__title { font-family: var(--serif); font-size: 1.75rem; line-height: 1.1; margin-bottom: 1rem; }

.error-summary { border: 3px solid var(--error); border-radius: var(--radius); padding: 1rem 1.15rem; background: var(--paper); margin-bottom: 1.5rem; }
.error-summary:focus { outline: 3px solid var(--terracotta-deep); outline-offset: 3px; }
.error-summary h2 { font-family: var(--sans); font-weight: 700; font-size: 1.15rem; }
.error-summary ul { list-style: none; margin-top: 0.6rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.35rem; }
.error-summary a { color: var(--error); font-weight: 700; }
.notice { padding: 0.85rem 1rem; border-left: 4px solid var(--amber); background: var(--paper); border-radius: 0 var(--radius) var(--radius) 0; }
.notice--alert { border-left-color: var(--error); }

/* Estimator layout and the result docket */

.estimator { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: start; }
@media (min-width: 64rem) { .estimator { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3rem; } }
/* On wide screens the result panel stays in view and scrolls inside itself
   when it is taller than the window, so its totals and link stay reachable. */
.estimator__result, .enquiry__aside { padding: 12px 14px 14px 2px; }
@media (min-width: 64rem) {
  .estimator__result, .enquiry__aside { position: sticky; top: 0.5rem; max-height: calc(100vh - 1rem); overflow-y: auto; overscroll-behavior: contain; }
}
/* Small and medium screens: a compact status that stays at the foot of the
   window while the form is in view and stops at the end of the form, so it
   never covers the full result. Focused fields scroll clear of it. Wide
   screens show the result panel beside the form instead. */
.live-status {
  position: sticky; bottom: 0.5rem; z-index: 5; margin-top: 1.75rem;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.2rem 1rem;
  padding: 0.6rem 0.9rem; border-radius: var(--radius); background: var(--ink); color: var(--chalk);
  box-shadow: 0 0 0 3px var(--chalk);
}
.live-status__text { display: grid; grid-template-columns: minmax(0, 1fr); line-height: 1.3; }
.live-status__text strong { color: var(--amber); font-size: 1.1rem; }
.live-status__text span { color: #D9D3C7; font-size: 0.86rem; }
.live-status__link { color: var(--chalk); font-weight: 700; }
.live-status :focus-visible { outline-color: var(--amber); }
@media (max-width: 63.99rem) { html { scroll-padding-bottom: 6rem; } }
@media (min-width: 64rem) { .live-status, .only-narrow { display: none; } }
.summary { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.2rem; padding: 0.9rem 1rem 1rem; background: var(--ink); color: var(--chalk); border-radius: var(--radius); }
.summary__label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber); }
.summary__total { font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 1.6rem + 1.4vw, 2.6rem); line-height: 1.02; }
.summary__range { color: #D9D3C7; font-size: 0.95rem; }
.summary--waiting { background: transparent; color: var(--ink-2); border: 1.5px dashed var(--stone-2); font-weight: 700; }
.docket {
  position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--slab-deep); padding: 1.5rem 1.15rem 1.35rem;
}
@media (min-width: 30rem) { .docket { padding: 1.75rem 1.5rem 1.5rem; } }
/* A torn ticket edge along the top. */
.docket::before {
  content: ''; position: absolute; left: -1px; right: -1px; top: -9px; height: 10px;
  background: radial-gradient(circle at 7px 0, transparent 6px, var(--paper) 6.5px) 0 0 / 14px 10px repeat-x;
}
.docket > * + * { margin-top: 1.15rem; }
.docket__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.docket__title { font-family: var(--serif); font-size: 1.9rem; line-height: 1.05; }
.docket__actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; border-top: 1px dashed var(--stone-2); padding-top: 1.15rem; }
.plan-figure { margin: 0; background: var(--chalk); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.6rem; }
.plan-figure svg { width: 100%; height: auto; }
.plan-figure text { font-family: var(--sans); }
.plan-figure__caption { margin-top: 0.5rem; font-size: 0.86rem; color: var(--ink-3); }
.waiting { padding: 1rem; border: 1.5px dashed var(--stone-2); border-radius: var(--radius); }
.waiting__list { margin-top: 0.6rem; padding-left: 1.15rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.3rem; color: var(--ink-2); font-size: 0.95rem; }

/* Briefs: the same markup on the estimate, the receipt and the inbox */

.brief > * + * { margin-top: 1rem; }
.brief__headline { font-weight: 700; font-size: 1.05rem; line-height: 1.45; }
.brief__label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.area-list { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
.brief__label + .area-list { margin-top: 0.45rem; }
.area-item { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.15rem; padding: 0.7rem 0.85rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--chalk); }
.area-item.is-flagged { border-color: var(--terracotta); }
.area-item__title { display: flex; align-items: center; gap: 0.55rem; font-weight: 700; }
.area-item__num { display: inline-grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: 3px; background: var(--ink); color: var(--chalk); font-size: 0.8rem; }
.area-item__size { font-variant-numeric: tabular-nums; }
.area-item__surface, .area-item__extra { color: var(--ink-2); font-size: 0.95rem; }
.brief-rows { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--line); }
.brief-rows__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.1rem 1rem; padding-block: 0.55rem; border-bottom: 1px solid var(--line); }
@media (min-width: 30rem) { .brief-rows__row { grid-template-columns: minmax(7.5rem, 2fr) minmax(0, 3fr); } }
.brief-rows dt { font-weight: 700; font-size: 0.93rem; }
.brief-rows dd { margin: 0; font-size: 0.95rem; color: var(--ink-2); }
.lines { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.lines caption { text-align: left; font-family: var(--serif); font-size: 1.5rem; padding-bottom: 0.4rem; }
.lines th, .lines td { padding: 0.6rem 0; border-bottom: 1px dotted var(--stone-2); text-align: left; vertical-align: top; }
.lines td { text-align: right; white-space: nowrap; padding-left: 1rem; font-weight: 700; }
.lines__label { display: block; font-weight: 700; }
.lines__detail { display: block; font-weight: 400; font-size: 0.9rem; color: var(--ink-3); }
.lines tfoot th, .lines tfoot td { border-bottom: 0; }
.lines__total th, .lines__total td { border-top: 2px solid var(--ink); padding-top: 0.75rem; font-family: var(--serif); font-weight: 400; font-size: 1.65rem; line-height: 1.1; }
.lines__range th { font-weight: 700; }
.lines__range td { color: var(--terracotta-deep); }
.assess { border-left: 4px solid var(--terracotta); padding: 0.85rem 1rem; background: #FFF6E6; border-radius: 0 var(--radius) var(--radius) 0; }
.assess__title { font-family: var(--serif); font-size: 1.6rem; line-height: 1.1; }
.assess__reasons { margin-top: 0.6rem; padding-left: 1.1rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.45rem; font-size: 0.95rem; }
.brief__note { padding: 0.75rem 0.9rem; background: var(--chalk-2); border-radius: var(--radius); }
.brief__note p + p { margin-top: 0.2rem; }
.brief__notes { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.35rem; font-size: 0.86rem; color: var(--ink-3); border-top: 1px dashed var(--stone-2); padding-top: 0.85rem; }

/* Contact and receipt */

.enquiry { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: start; }
@media (min-width: 64rem) { .enquiry { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3rem; } }
.contact-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.85rem; padding: 1rem 1.15rem; border: 1.5px dashed var(--edge); border-radius: var(--radius); background: var(--paper); }
.contact-card__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.3rem; }
.status { min-height: 1.5rem; font-weight: 700; }
.receipt { background: var(--paper); border: 2px solid var(--ink); border-radius: var(--radius); box-shadow: var(--slab-deep); padding: 1.5rem 1.15rem; }
@media (min-width: 30rem) { .receipt { padding: 2rem 1.75rem; } }
.receipt > * + * { margin-top: 1.1rem; }
.receipt:focus { outline: 3px solid var(--terracotta-deep); outline-offset: 4px; }
.receipt__ref { font-family: var(--serif); font-size: clamp(1.9rem, 1.4rem + 2vw, 2.6rem); line-height: 1.1; overflow-wrap: anywhere; }
.receipt__ref span { color: var(--terracotta); }
.receipt__meta { color: var(--ink-2); }
.enquiry[data-phase='saved'] .enquiry__form, .enquiry[data-phase='saved'] .enquiry__aside { display: none; }
.enquiry[data-phase='saved'] { grid-template-columns: minmax(0, 1fr); }

/* Private inbox */

.inbox { padding-block: 2.5rem 4rem; }
.inbox > * + * { margin-top: 1rem; }
.inbox__records { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; margin-top: 2rem; }
.inbox-record { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--slab); padding: 1.25rem; max-width: 52rem; }
.inbox-record > * + * { margin-top: 1rem; }
.inbox-record__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1rem; align-items: baseline; }
.inbox-record__ref { font-family: var(--serif); font-size: 1.7rem; overflow-wrap: anywhere; }
.inbox-record__eyebrow { display: block; font-family: var(--sans); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.inbox-record__time, .inbox-record__contact { color: var(--ink-3); font-size: 0.92rem; }
.inbox-empty, .inbox-skipped { padding: 1rem; border: 1.5px dashed var(--stone-2); border-radius: var(--radius); }

/* Not found */

.lost { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: center; }
@media (min-width: 56rem) { .lost { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.lost__art img { width: 100%; border-radius: var(--radius); box-shadow: var(--slab-deep); }
.lost__links { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
.lost__links a { font-weight: 700; }

/* Services detail */

.service { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-items: start; }
@media (min-width: 56rem) { .service { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 3rem; } }
.service + .service { margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--line); }
.service__art img { width: 100%; border-radius: var(--radius); box-shadow: var(--slab); }
.service__body > * + * { margin-top: 0.9rem; }
.service__body ul { padding-left: 1.2rem; }
.service__body li + li { margin-top: 0.35rem; }
.service__example { padding: 0.85rem 1rem; background: var(--chalk-2); border-radius: var(--radius); }
.addons { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
@media (min-width: 48rem) { .addons { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.addon { padding: 1.25rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--slab); }
.addon > * + * { margin-top: 0.5rem; }

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