/* Back Lane Garage Doors — Mayfield. One stylesheet, tokens verbatim from
   brand-kit/brand-kit.md. Two paths, one system: oxblood = urgent repair,
   gunmetal = considered measure-and-quote. Ground is cream weatherboard. */

:root {
  /* Ink */
  --ink:            oklch(24.9% 0.012 56);   /* #26201C */
  --ink-soft:       oklch(45.5% 0.015 64);   /* #5D554E */

  /* Grounds */
  --paper:          oklch(95.0% 0.025 89);   /* #F5EEDC */
  --paper-raised:   oklch(91.2% 0.033 85);   /* #ECE1CA */
  --brick-wash:     oklch(89.8% 0.022 43);   /* #EBD9D2 */

  /* Brand — urgent-repair path */
  --primary:        oklch(35.6% 0.090 29);   /* #63261F */
  --primary-deep:   oklch(27.8% 0.071 29);   /* #451813 */

  /* Brand — considered path */
  --corrugate:      oklch(42.8% 0.009 242);  /* #4B5054 */
  --corrugate-deep: oklch(33.4% 0.008 240);  /* #33373A */

  /* Trim + states */
  --hardwood:       oklch(70.4% 0.023 76);   /* #A89E90 */
  --leadlight:      oklch(48.7% 0.068 156);  /* #3E6B4F */

  --font-display: "Fraunces", "Georgia", serif;
  --font-body: "Cabin", "Gill Sans", "Trebuchet MS", sans-serif;

  --measure: 68ch;
  --gutter: clamp(1.1rem, 4vw, 2rem);
  --wrap: 72rem;
}

/* ── base ─────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 50, "WONK" 0;
  font-weight: 600;
  line-height: 1.12;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 5.4vw, 3.4rem); font-variation-settings: "SOFT" 50, "WONK" 1; }
h2 { font-size: clamp(1.55rem, 3.4vw, 2.25rem); }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.45rem); font-weight: 550; }
h4 { font-family: var(--font-body); font-weight: 700; font-size: 1.02rem; letter-spacing: .04em; text-transform: uppercase; margin: 0 0 .4em; }

p { margin: 0 0 1em; max-width: var(--measure); }
a { color: var(--primary); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--primary-deep); }
img { max-width: 100%; height: auto; display: block; }
strong { font-weight: 700; }
small, .meta { color: var(--ink-soft); }

::placeholder { color: color-mix(in oklab, var(--ink-soft) 30%, transparent); }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.flow > * + * { margin-top: 1em; }

/* the brand hr: fence-bar divider */
hr {
  border: 0;
  height: 14px;
  margin: clamp(2rem, 5vw, 3.2rem) auto;
  width: min(220px, 50%);
  background: url("/assets/micro/divider.svg") center / contain no-repeat;
}

/* brand bullets */
ul.strap {
  list-style: none;
  padding-left: 0;
  max-width: var(--measure);
}
ul.strap li {
  padding-left: 1.9rem;
  position: relative;
  margin-bottom: .55em;
}
ul.strap li::before {
  content: "";
  position: absolute;
  left: 0; top: .42em;
  width: 1.15rem; height: .62rem;
  background: url("/assets/micro/bullet.svg") center / contain no-repeat;
}

blockquote {
  margin: 1.6rem 0;
  padding: .4rem 0 .4rem 3.2rem;
  position: relative;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 550;
  max-width: 56ch;
}
blockquote::before {
  content: "";
  position: absolute;
  left: 0; top: .3rem;
  width: 2.2rem; height: 2.2rem;
  background: url("/assets/micro/blockquote-mark.svg") center / contain no-repeat;
}

/* ── header: corrugate strip, cream band, picture-rail rules ──────────── */
.lane-strip {
  height: 9px;
  background: var(--corrugate-deep) url("/assets/textures/pattern-corrugate-cream.png") repeat-x center / auto 100%;
  background-blend-mode: multiply;
}
header.site {
  background: var(--paper);
  border-bottom: 1px solid var(--hardwood);
  position: relative;
}
header.site::after { /* the second picture-rail line */
  content: "";
  display: block;
  position: absolute;
  left: 0; right: 0; bottom: -5px;
  border-bottom: 1px solid color-mix(in oklab, var(--hardwood) 55%, transparent);
}
.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: .85rem;
}
.masthead .logo img { height: 46px; width: auto; }

nav.primary ul {
  list-style: none;
  display: flex;
  gap: clamp(.9rem, 2vw, 1.7rem);
  margin: 0; padding: 0;
  align-items: center;
}
nav.primary a {
  font-weight: 600;
  font-size: .98rem;
  letter-spacing: .02em;
  text-decoration: none;
  color: var(--ink);
  padding-block: .3rem;
  border-bottom: 2px solid transparent;
}
nav.primary a:hover { color: var(--primary); }
/* active state via body data-page */
body[data-page="services"] nav.primary a[href="/services/"],
body[data-page="areas"]    nav.primary a[href="/areas/"],
body[data-page="guides"]   nav.primary a[href="/guides/"],
body[data-page="about"]    nav.primary a[href="/about/"] {
  border-bottom-color: var(--primary);
  color: var(--primary);
}
nav.primary a.enq {
  background: var(--primary);
  color: var(--paper);
  padding: .55rem 1.05rem;
  border-bottom: none;
}
nav.primary a.enq:hover { background: var(--primary-deep); color: var(--paper); }

/* mobile nav: a <details> gate — JS-free on purpose */
details.gate-nav { display: none; }
@media (max-width: 830px) {
  nav.primary { display: none; }
  details.gate-nav { display: block; position: relative; }
  details.gate-nav summary {
    list-style: none;
    cursor: pointer;
    font-weight: 700;
    font-size: .92rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: .5rem .8rem;
    border: 2px solid var(--corrugate);
    color: var(--corrugate);
    user-select: none;
  }
  details.gate-nav summary::-webkit-details-marker { display: none; }
  details.gate-nav[open] summary { background: var(--corrugate); color: var(--paper); }
  details.gate-nav .pane {
    position: absolute;
    right: 0; top: calc(100% + 10px);
    z-index: 40;
    background: var(--paper);
    border: 2px solid var(--corrugate);
    box-shadow: 0 10px 24px rgb(0 0 0 / .18);
    min-width: 15rem;
    padding: .4rem 0;
  }
  details.gate-nav .pane a {
    display: block;
    padding: .7rem 1.2rem;
    text-decoration: none;
    color: var(--ink);
    font-weight: 600;
    border-bottom: 1px solid color-mix(in oklab, var(--hardwood) 45%, transparent);
  }
  details.gate-nav .pane a:last-child { border-bottom: 0; }
  details.gate-nav .pane a.enq { color: var(--primary); font-weight: 700; }
}

/* ── the two paths: twin driveway strips ─────────────────────────────── */
.paths {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(.9rem, 2.5vw, 1.6rem);
  position: relative;
  max-width: 58rem;
}
.paths::before { /* the grass strip between the concrete */
  content: "";
  position: absolute;
  inset: 8% auto 8% 50%;
  translate: -50% 0;
  border-left: 2px dashed color-mix(in oklab, var(--hardwood) 70%, transparent);
}
.path {
  padding: clamp(1.1rem, 2.6vw, 1.7rem);
  color: var(--paper);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  min-height: 100%;
  transition: transform .15s ease;
}
.path:hover { transform: translateY(-3px); color: var(--paper); }
.path.repair { background: var(--primary); }
.path.repair:hover { background: var(--primary-deep); }
.path.quote { background: var(--corrugate); }
.path.quote:hover { background: var(--corrugate-deep); }
.path .kicker {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .85;
}
.path .head {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.4vw, 1.5rem);
  font-weight: 600;
  line-height: 1.15;
}
.path .sub { font-size: .95rem; opacity: .92; margin: 0; }
.path .go { margin-top: auto; font-weight: 700; font-size: .95rem; }
.path .go::after { content: " \2192"; }
@media (max-width: 620px) {
  .paths { grid-template-columns: 1fr; }
  .paths::before { display: none; }
}

/* buttons for in-flow CTAs */
.btn {
  display: inline-block;
  padding: .7rem 1.35rem;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font-body);
}
.btn.repair { background: var(--primary); color: var(--paper); }
.btn.repair:hover { background: var(--primary-deep); color: var(--paper); }
.btn.quote { background: var(--corrugate); color: var(--paper); }
.btn.quote:hover { background: var(--corrugate-deep); color: var(--paper); }
.btn.ghost { background: transparent; color: var(--primary); box-shadow: inset 0 0 0 2px var(--primary); }
.btn.ghost:hover { background: var(--primary); color: var(--paper); }

/* ── the lane-gate frame (framed-opening motif for feature imagery) ───── */
.gate-frame {
  position: relative;
  border: 6px solid var(--corrugate);
  outline: 1px solid var(--hardwood);
  outline-offset: 4px;
  background: var(--corrugate);
}
.gate-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gate-frame::before, .gate-frame::after { /* hinge straps — mounted ON the gate leaf
  (flush with the hanging edge, running inward over the image, like a real strap
  hinge). Never protrude into the margin: off-frame they clip at the viewport on
  phones and read as broken elements, not hardware. */
  content: "";
  position: absolute;
  left: -6px;
  width: 32px; height: 10px;
  background: var(--primary);
  border-radius: 0 5px 5px 0;
  z-index: 2;
}
.gate-frame::before { top: 18%; }
.gate-frame::after { bottom: 18%; }
figcaption { font-size: .85rem; color: var(--ink-soft); margin-top: .55rem; }
figure { margin: 0; }

/* ── sections ─────────────────────────────────────────────────────────── */
section { padding-block: clamp(2.2rem, 6vw, 4rem); }
.section-cream { background: var(--paper); }
.section-raised { background: var(--paper-raised); }
.section-corrugated {
  background: var(--paper) url("/assets/textures/pattern-corrugate-cream.png");
}
.section-brick-dark {
  background: var(--primary-deep) url("/assets/textures/pattern-brick-oxblood.png");
  color: var(--paper);
}
.section-brick-dark a { color: var(--paper); }
.section-brick-dark .meta, .section-brick-dark small { color: color-mix(in oklab, var(--paper) 78%, transparent); }
.kicker {
  display: block;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--corrugate);
  margin-bottom: .6rem;
}
.section-brick-dark .kicker { color: color-mix(in oklab, var(--paper) 70%, transparent); }

/* honest-call panel: the spine sentence on brand ground */
.honest-call {
  background: var(--brick-wash);
  border-left: 6px solid var(--primary);
  padding: clamp(1.2rem, 3vw, 2rem);
}

/* hero */
.hero { padding-block: clamp(2.4rem, 6vw, 4.6rem) clamp(2rem, 5vw, 3.4rem); }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(1.6rem, 4vw, 3.2rem);
  align-items: center;
}
.hero .lede { font-size: clamp(1.05rem, 1.6vw, 1.2rem); max-width: 52ch; }
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-grid .gate-frame { max-height: 46vh; overflow: hidden; }
}

/* three-lives rail timeline */
.rail { position: relative; padding-left: 2.1rem; max-width: 46rem; margin-bottom: 1.4rem; }
.rail::before, .rail::after { /* the twin strips as the rail */
  content: "";
  position: absolute;
  top: .35rem; bottom: .35rem;
  width: 5px;
  background: var(--hardwood);
}
.rail::before { left: 0; }
.rail::after { left: 11px; }
.rail .stop { position: relative; padding: 0 0 1.6rem 0; }
.rail .stop:last-child { padding-bottom: 0; }
.rail .stop::before { /* sleeper across the strips */
  content: "";
  position: absolute;
  left: -2.1rem; top: .45rem;
  width: 1.55rem; height: 8px;
  background: var(--primary);
}
.rail .when {
  font-family: var(--font-display);
  font-weight: 650;
  font-size: 1.12rem;
  color: var(--primary);
}
.rail p { margin: .15em 0 0; }

/* service tiles */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.1rem;
  margin-top: 1.4rem;
}
.tile {
  background: var(--paper-raised);
  padding: 1.15rem 1.15rem 1.25rem;
  text-decoration: none;
  color: var(--ink);
  border-top: 4px solid var(--corrugate);
  transition: transform .15s ease;
}
.tile:hover { transform: translateY(-3px); color: var(--ink); }
.tile.urgent { border-top-color: var(--primary); }
.tile img { width: 54px; height: 54px; margin-bottom: .6rem; }
.tile .t { font-weight: 700; margin-bottom: .25rem; }
.tile p { font-size: .93rem; color: var(--ink-soft); margin: 0; }

/* ── the Will It Fit checker ──────────────────────────────────────────── */
.checker {
  background: var(--brick-wash);
  padding: clamp(1.4rem, 3.5vw, 2.4rem);
  border: 1px solid var(--hardwood);
  position: relative;
}
.checker fieldset { border: 0; padding: 0; margin: 0; }
.checker .qgroup { margin-bottom: 1.35rem; }
.checker .qgroup > .q {
  font-weight: 700;
  margin-bottom: .55rem;
  display: block;
}
.checker .opts {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.checker .opts label {
  background: var(--paper);
  border: 2px solid var(--hardwood);
  padding: .5rem .85rem;
  cursor: pointer;
  font-size: .95rem;
  user-select: none;
}
.checker .opts input { position: absolute; opacity: 0; pointer-events: none; }
.checker .opts label:has(input:checked) {
  border-color: var(--corrugate);
  background: var(--corrugate);
  color: var(--paper);
  font-weight: 600;
}
.checker .opts label:has(input:focus-visible) { outline: 3px solid var(--primary); outline-offset: 2px; }
.checker-result {
  margin-top: 1.4rem;
  background: var(--paper);
  border-left: 6px solid var(--corrugate);
  padding: 1.2rem 1.4rem;
}
.checker-result.urgent { border-left-color: var(--primary); }
.checker-result h3 { margin-bottom: .4rem; }
.checker-result .rail-note { font-size: .88rem; color: var(--ink-soft); margin-top: .9rem; margin-bottom: 0; }
.checker-result .cta-row { margin-top: 1rem; display: flex; gap: .8rem; flex-wrap: wrap; }

/* ── tables ───────────────────────────────────────────────────────────── */
.table-scroll { overflow-x: auto; }
table {
  border-collapse: collapse;
  width: 100%;
  font-size: .95rem;
  margin: 1.2rem 0;
}
caption { text-align: left; font-size: .85rem; color: var(--ink-soft); padding-bottom: .5rem; }
th, td {
  text-align: left;
  padding: .6rem .8rem;
  border-bottom: 1px solid color-mix(in oklab, var(--hardwood) 60%, transparent);
  vertical-align: top;
}
th { font-weight: 700; border-bottom: 2px solid var(--corrugate); }
tbody th { font-weight: 600; border-bottom: 1px solid color-mix(in oklab, var(--hardwood) 60%, transparent); }
/* phones: tighten the comparison tables so all four columns sit inside the screen
   instead of clipping mid-letter behind a barely-there horizontal scroll */
@media (max-width: 560px) {
  table { font-size: .85rem; }
  th, td { padding: .5rem .45rem; }
}

/* ── forms ────────────────────────────────────────────────────────────── */
form.enquiry {
  background: var(--paper-raised);
  padding: clamp(1.3rem, 3.5vw, 2.2rem);
  border-top: 6px solid var(--primary);
  max-width: 44rem;
}
form.enquiry .row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) { form.enquiry .row { grid-template-columns: 1fr; } }
label.field { display: block; margin-bottom: 1rem; font-weight: 600; font-size: .95rem; }
label.field .req { color: var(--primary); }
input[type="text"], input[type="tel"], input[type="email"], select, textarea {
  display: block;
  width: 100%;
  margin-top: .35rem;
  padding: .65rem .75rem;
  font: inherit;
  font-weight: 400;
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--hardwood);
  border-radius: 0;
}
input:focus, select:focus, textarea:focus { border-color: var(--corrugate); outline: none; box-shadow: 0 0 0 2px color-mix(in oklab, var(--corrugate) 30%, transparent); }
textarea { min-height: 7.5rem; resize: vertical; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.form-note { font-size: .88rem; color: var(--ink-soft); }
[data-lead-success] {
  background: var(--paper);
  border-left: 6px solid var(--leadlight);
  padding: 1.3rem 1.5rem;
  margin-top: 1.2rem;
}
[data-lead-success] img { width: min(230px, 60%); height: auto; margin-bottom: .8rem; }
[data-lead-success] .ok-head { color: var(--leadlight); font-family: var(--font-display); font-weight: 650; font-size: 1.25rem; margin-bottom: .3rem; }
[data-lead-error] {
  background: var(--brick-wash);
  border-left: 6px solid var(--primary);
  padding: .9rem 1.2rem;
  margin-top: 1.2rem;
  font-weight: 600;
}

/* ── footer ───────────────────────────────────────────────────────────── */
footer.site {
  background: var(--corrugate-deep);
  color: color-mix(in oklab, var(--paper) 88%, transparent);
  border-top: 6px solid var(--corrugate);
}
main > section:last-child { padding-bottom: clamp(2.2rem, 6vw, 4rem); }
footer.site .cols {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 2rem;
  padding-block: clamp(2rem, 5vw, 3rem) 1.4rem;
}
@media (max-width: 700px) { footer.site .cols { grid-template-columns: 1fr; } }
footer.site img.fl { height: 60px; width: auto; margin-bottom: .9rem; }
footer.site a { color: var(--paper); text-decoration-color: color-mix(in oklab, var(--paper) 45%, transparent); }
footer.site ul { list-style: none; margin: 0; padding: 0; }
footer.site li { margin-bottom: .45rem; }
footer.site .disclosure {
  border-top: 1px solid color-mix(in oklab, var(--paper) 22%, transparent);
  padding-block: 1rem 1.4rem;
  font-size: .82rem;
  color: color-mix(in oklab, var(--paper) 62%, transparent);
}
footer.site h4 { color: var(--paper); }
footer.site p { max-width: 44ch; }

/* ── page furniture ──────────────────────────────────────────────────── */
.page-head { padding-block: clamp(2rem, 5vw, 3.2rem) 0; }
.page-head .lede { font-size: 1.12rem; max-width: 60ch; }

/* in-page anchor rail (services) */
.anchor-rail {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 1.2rem 0 0;
  padding: 0;
  list-style: none;
}
.anchor-rail a {
  display: inline-block;
  padding: .4rem .8rem;
  background: var(--paper-raised);
  border: 1px solid var(--hardwood);
  text-decoration: none;
  font-size: .9rem;
  font-weight: 600;
  color: var(--ink);
}
.anchor-rail a:hover { border-color: var(--primary); color: var(--primary); }

.svc {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 1.3rem;
  align-items: start;
  padding-block: clamp(1.6rem, 4vw, 2.4rem);
  border-bottom: 1px solid color-mix(in oklab, var(--hardwood) 55%, transparent);
  scroll-margin-top: 2rem;
}
.svc:last-of-type { border-bottom: 0; }
.svc img.icon { width: 64px; height: 64px; }
.svc .cta-row { margin-top: .9rem; display: flex; gap: .8rem; flex-wrap: wrap; align-items: center; }
@media (max-width: 560px) { .svc { grid-template-columns: 1fr; } .svc img.icon { width: 54px; height: 54px; } }

/* two-up media + text */
.duet {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.4rem, 4vw, 2.8rem);
  align-items: center;
}
@media (max-width: 780px) { .duet { grid-template-columns: 1fr; } }

/* area cards on the areas index */
.area-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; margin-top: 1.4rem; }
@media (max-width: 700px) { .area-cards { grid-template-columns: 1fr; } }
.area-card {
  text-decoration: none;
  color: var(--ink);
  background: var(--paper-raised);
  border-top: 4px solid var(--corrugate);
  transition: transform .15s ease;
  display: block;
}
.area-card:hover { transform: translateY(-3px); color: var(--ink); }
.area-card img { width: 100%; aspect-ratio: 3 / 1.6; object-fit: cover; }
.area-card .pad { padding: 1.1rem 1.2rem 1.3rem; }
.area-card .t { font-family: var(--font-display); font-weight: 650; font-size: 1.25rem; }
.area-card p { font-size: .95rem; color: var(--ink-soft); margin: .3rem 0 0; }

/* glossary */
dl.glossary { max-width: var(--measure); }
dl.glossary dt {
  font-weight: 700;
  margin-top: 1.1rem;
  font-size: 1.05rem;
}
dl.glossary dd { margin: .2rem 0 0; padding-left: 0; }

/* numbered constraints (hamilton) */
ol.brief { counter-reset: c; list-style: none; padding: 0; max-width: var(--measure); }
ol.brief li { counter-increment: c; position: relative; padding: 0 0 1.3rem 3.4rem; }
ol.brief li::before {
  content: counter(c, decimal-leading-zero);
  position: absolute;
  left: 0; top: -.15rem;
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 650;
  color: var(--primary);
}

/* wear ladder (new lambton) */
.ladder { max-width: var(--measure); }
.ladder .rung {
  border-left: 6px solid var(--corrugate);
  background: var(--paper-raised);
  padding: 1.1rem 1.3rem;
  margin-bottom: 1rem;
}
.ladder .rung.last { border-left-color: var(--primary); }
.ladder .rung .t { font-weight: 700; margin-bottom: .25rem; }
.ladder .rung p { margin: 0; font-size: .97rem; }

/* references block */
.refs {
  background: var(--paper-raised);
  padding: 1.3rem 1.5rem;
  font-size: .92rem;
  max-width: var(--measure);
}
.refs h3 { font-size: 1.1rem; }
.refs li { margin-bottom: .6rem; }

/* checklists / scenario cards */
.scenario {
  background: var(--paper-raised);
  border-top: 4px solid var(--hardwood);
  padding: 1.2rem 1.4rem;
  margin: 1.1rem 0;
  max-width: var(--measure);
}
.scenario .tag {
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--corrugate);
  padding: .15rem .55rem;
  margin-bottom: .6rem;
}
.scenario .tag.repair { background: var(--primary); }

/* 404 */
.lost { text-align: center; padding-block: clamp(3rem, 8vw, 5rem); }
.lost img { width: min(320px, 70%); margin: 0 auto 1.6rem; }
.lost .cta-row { display: flex; gap: .9rem; justify-content: center; flex-wrap: wrap; margin-top: 1.4rem; }
.lost p { margin-inline: auto; }

/* utility */
.cta-row { display: flex; gap: .9rem; flex-wrap: wrap; }
.center { text-align: center; }
.center p, .center h2 { margin-inline: auto; }