/* Harrison's Plumbing. Lettered from the van: decal indigo fields, their pipe-fitting mark, a parts-sheet index. */
@view-transition { navigation: auto; }

:root {
  --indigo: #2b3592;
  --indigo-pc: #3f4cb3;      /* the mark's pipes, tone on tone */
  --indigo-th: #6a76cc;      /* the mark's threaded ends on indigo */
  --indigo-deep: #1b2166;
  --ink: #121212;
  --paper: #f3f4f8;
  --white: #fff;
  --rule: #d5d8e6;
  --muted: #4a4e63;
  --on-indigo: #d7dbf5;
  --thread: #a9abb3;
  --sans: "Chivo", system-ui, sans-serif;
  --mono: "Chivo Mono", ui-monospace, monospace;
  --cond: "Sofia Sans Condensed", "Arial Narrow", sans-serif;
  --gut: 20px;
  --max: 1240px;
  --sec: 80px;
  --m-dur: .8s;
  --m-rise: 24px;
  --m-ease: cubic-bezier(.2, .9, .25, 1);
}
@media (min-width: 720px) { :root { --gut: 40px; --sec: 120px; } }
@media (min-width: 1100px) { :root { --sec: 144px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--sans); font-size: 17px; line-height: 1.6; color: var(--ink); background: var(--white); font-kerning: normal; }
h1, h2, h3, p, ol, ul, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ol, ul { list-style: none; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.th { fill: var(--th, var(--thread)); }
.wrap { width: 100%; max-width: calc(var(--max) + var(--gut) * 2); margin-inline: auto; padding-inline: var(--gut); }
.mono { font-family: var(--mono); font-weight: 400; letter-spacing: 0; }
.tnum { font-variant-numeric: tabular-nums; }
.lbl { font-family: var(--sans); font-weight: 600; font-size: .8125rem; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; }
:focus-visible { outline: 3px solid var(--indigo); outline-offset: 3px; }

.skip { position: absolute; left: 12px; top: -80px; z-index: 50; background: var(--white); color: var(--indigo); padding: 12px 16px; font-weight: 700; }
.skip:focus { top: 12px; }
.preview { background: var(--ink); color: #c9ccd8; font-size: .8125rem; line-height: 1.4; text-align: center; padding: 7px 16px; }
.preview b { color: var(--white); font-weight: 600; }
@media (max-width: 719px) { .preview { font-size: .75rem; padding-inline: 10px; } }

/* ---------- buttons and the one text-link style ---------- */
.btn { display: inline-flex; align-items: center; gap: .55em; min-height: 56px; padding: 0 24px; font-family: var(--sans); font-weight: 800; font-size: 1.0625rem; text-decoration: none; border: 2px solid transparent; border-radius: 0; cursor: pointer; }
.btn .tnum { font-weight: 600; }
.btn-white { background: var(--white); color: var(--indigo); --m-fill: #e4e7f5; }
.btn-indigo { background: var(--indigo); color: var(--white); --m-fill: var(--indigo-deep); }
.btn-line { border-color: currentColor; color: inherit; --m-fill: rgba(255, 255, 255, .14); }
/* The italic slogan voice from the van, underlined: the site's only text-link style. */
.tl { display: inline-flex; align-items: center; gap: .35em; min-height: 44px; font-family: var(--cond); font-style: italic; font-weight: 700; font-size: 1.3125rem; letter-spacing: .005em; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; transition: text-underline-offset .4s var(--m-ease); -webkit-tap-highlight-color: transparent; }
.tl .m-nudge { font-style: normal; font-family: var(--sans); font-weight: 400; text-decoration: none; display: inline-block; }
@media (hover: hover) { .tl:hover { text-underline-offset: 8px; } }

/* ---------- lockup ---------- */
.lockup { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; min-height: 44px; }
.lockup-mark { width: 21px; height: 37px; flex: none; }
.lm-indigo { display: none; }
.lockup-name { font-family: var(--cond); font-weight: 800; font-size: 1.375rem; line-height: 1; letter-spacing: -.005em; white-space: nowrap; }

/* ---------- header ---------- */
.top { position: sticky; top: 0; z-index: 30; background: var(--indigo); color: var(--white); --th: var(--thread); }
.top-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; }
.nav { display: none; }
.top-call { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1.5px solid rgba(255, 255, 255, .85); color: var(--white); font-weight: 700; font-size: .9375rem; text-decoration: none; white-space: nowrap; --m-fill: rgba(255, 255, 255, .14); }
.top-call-word { display: none; }
/* Solid at all times: indigo over the hero, white once the hero has gone (site.js sets .is-past). No colour fade,
   so the bar is never caught half-way as a washed-out tint. */
.top[data-header] { transition: translate .5s var(--m-ease); }
.top.is-past { background: var(--white); color: var(--ink); box-shadow: 0 1px 0 var(--rule); }
.top.is-past .lm-white { display: none; }
.top.is-past .lm-indigo { display: block; }
.top.is-past .top-call { background: var(--indigo); border-color: var(--indigo); color: var(--white); --m-fill: var(--indigo-deep); }
@media (min-width: 420px) { .top-call-word { display: inline; white-space: pre; } }
@media (min-width: 960px) {
  .top-in { height: 76px; }
  .nav { display: flex; gap: 32px; margin-left: auto; margin-right: 16px; font-weight: 500; font-size: .9375rem; }
  .nav a { padding: 12px 0; }
  .top-call { font-size: 1rem; padding: 0 18px; min-height: 48px; }
}

/* ---------- hero: the decal indigo field and their mark at architectural scale ---------- */
.hero { position: relative; overflow: hidden; background: var(--indigo); color: var(--white); min-height: calc(100svh - 64px - 34px); display: flex; flex-direction: column; justify-content: flex-end; }
/* Phone: a deliberate crop. The mark's big elbow, its two couplings and a threaded end sit whole in the top right,
   the elbow's outer curve running off the edge; the rest of the mark falls away behind the name. */
.giant { position: absolute; top: -138px; right: -45px; height: 1092px; width: auto; max-width: none; aspect-ratio: 478 / 840; pointer-events: none; overflow: visible; }
.giant .pc { fill: var(--indigo-pc); }
.giant .tp { fill: var(--indigo-th); }
/* Phone: one whole fitting from the mark, top right: the elbow and its two couplings, and the straight pipe beside it
   ending in its grey threaded end. The rest of the mark is left out. The group (335 x 317 mark units) is scaled to the
   space the hero leaves above the label (--s = px per unit), the elbow's outer curve just touching the edge. */
@media (max-width: 719px) {
  .hero { --s: clamp(.8px, (100svh - 530px) / 317, 1.15px); }
  .hero .giant { top: calc(14px - 75 * var(--s)); right: calc(-10px - 8 * var(--s)); height: calc(840 * var(--s)); }
  .hero .giant g > :not(.ph) { display: none; }
  .hero .giant .pc { fill: #4350bb; }
  .hero .giant .tp { fill: #8e98dd; }
  /* The long pipe and its thread are moved (phone only) so the thread seats in the elbow's upper coupling:
     pipe, thread, coupling, elbow, coupling read as one run of pipe. */
  .hero .giant .k1 { x: 316px; y: 310px; }
  .hero .giant .k5 { x: 508px; y: 315px; }
  .lbl-more { display: none; }
}
.hero-in { position: relative; padding-top: 48px; padding-bottom: 44px; }
.hero-lbl { color: var(--on-indigo); margin-bottom: 16px; }
.hero h1 { font-weight: 900; font-size: clamp(3.25rem, 15vw, 7.75rem); line-height: .93; letter-spacing: -.04em; max-width: 8.5ch; }
.slogan { font-family: var(--cond); font-style: italic; font-weight: 700; font-size: clamp(1.375rem, 5.6vw, 2rem); line-height: 1.2; margin-top: 14px; color: var(--on-indigo); }
.hero-what { margin-top: 16px; max-width: 34ch; font-size: 1.0625rem; line-height: 1.55; }
.actions { margin-top: 28px; display: flex; align-items: center; flex-wrap: wrap; gap: 12px 28px; }
.hero .tl { color: var(--white); }
.hero-foot { display: none; }
@media (min-width: 720px) {
  .giant { top: -14%; right: -16%; height: 150%; }
  .hero-in { padding-top: 96px; padding-bottom: 72px; }
  .hero-what { font-size: 1.1875rem; }
}
@media (min-width: 1000px) {
  .hero { min-height: calc(100svh - 76px - 34px); justify-content: center; }
  .giant { top: calc(-22% - 120px); right: calc(-4% - 40px); height: 168%; }
  /* The 45° bend and its coupling would end flat inside the frame at this crop: left out on desktop. */
  .hero .giant .p20, .hero .giant .p19 { display: none; }
  /* So is the straight pipe between them, which would float with two bare ends. */
  .hero .giant .p14 { display: none; }
  /* And the three thin bars, which end loose mid-field. */
  .hero .giant .p10 { display: none; }
  .hero-in { padding-top: 120px; padding-bottom: 136px; }
  .hero-foot { display: block; position: absolute; left: 0; right: 0; bottom: 0; }
  .hero-foot-in { display: flex; gap: 0; background: linear-gradient(rgba(215, 219, 245, .32), rgba(215, 219, 245, .32)) var(--gut) 0 / calc(100% - var(--gut) * 2) 1px no-repeat; padding-top: 18px; padding-bottom: 22px; font-size: .9375rem; color: var(--on-indigo); }
  .hero-foot-in span + span::before { content: "·"; margin: 0 14px; }
  .hero-foot-in .mono { color: var(--white); }
}
@media (min-width: 1000px) and (prefers-reduced-motion: no-preference) {
  .hero-foot { animation: foot-in .45s var(--m-ease) .76s both; }
}
/* Desktop entrance: the same tight timeline as the phone, settled by about 1.1s. */
@media (min-width: 720px) and (prefers-reduced-motion: no-preference) {
  @media (scripting: enabled) {
    .hero .giant [data-reveal] { transition-duration: .5s; }
    .hero-lbl { --m-dur: .5s; }
    .hero h1 { --m-dur: .55s; --m-word: 70ms; }
    .hero .slogan, .hero-what { --m-dur: .45s; }
    .hero .actions { --m-dur: .3s; }
  }
}
@keyframes foot-in { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
/* Words rise from fully below their own clip box (the kit's 110% left the tops of tall letters showing). */
@media (prefers-reduced-motion: no-preference) {
  @media (scripting: enabled) {
    [data-reveal="words"] .m-w { padding-bottom: .12em; margin-bottom: -.12em; }
    [data-reveal="words"] .m-wi { transform: translate3d(0, 190%, 0); }
  }
}
/* The mark assembles in fitting order: pipes slide along their 45° axis, elbows seat, thread ends come last. */
@media (prefers-reduced-motion: no-preference) {
  @media (scripting: enabled) {
    .giant [data-reveal] { transform: translate(var(--tx, 0px), var(--ty, 0px)); transition-duration: .55s; transition-timing-function: cubic-bezier(.33, 1, .68, 1); }
    .giant .sx { --tx: -120px; }
    .giant .sy { --ty: -120px; }
    .giant .se { --tx: -48px; --ty: -48px; }
    .giant [data-reveal].is-in { transform: none; }
    .giant .tp[data-reveal] { transition-duration: .5s; }
  }
}
/* Phone: the fitting assembles in order (pipe, elbow, couplings seat, thread end last, about 900ms), then the name.
   The kit's own phone pacing would compress these delays, so they are set here. */
@media (max-width: 719px) and (prefers-reduced-motion: no-preference) {
  @media (scripting: enabled) {
    .hero .giant [data-reveal] { transition-duration: .45s; }
    .hero .giant .sx { --tx: -48px; }
    .hero .giant .sy { --ty: -48px; }
    .hero .giant .se { --tx: -34px; --ty: -34px; }
    .hero .giant .k1 { --d: 0ms !important; }
    .hero .giant .k2 { --d: 70ms !important; }
    .hero .giant .k3 { --d: 150ms !important; }
    .hero .giant .k4 { --d: 190ms !important; }
    .hero .giant .k5 { --d: 320ms !important; }
    .hero-lbl { --d: 300ms !important; --m-dur: .5s; }
    .hero h1 { --d: 360ms !important; --m-dur: .55s; --m-word: 70ms; }
    .hero .slogan { --d: 600ms !important; --m-dur: .45s; }
    .hero-what { --d: 650ms !important; --m-dur: .45s; }
    .hero .actions { --d: 700ms !important; --m-dur: .3s; }
  }
}

/* ---------- the van, with a panel set into its corner ---------- */
.van { background: var(--ink); }
.van-in { position: relative; }
.van-frame { aspect-ratio: 4 / 5; }
.van-frame img { object-position: 50% 40%; }
.panel { position: absolute; left: 0; bottom: 0; width: min(88%, 520px); background: var(--white); padding: 22px var(--gut) 24px; }
.panel .lbl { color: var(--indigo); }
.panel p + p { margin-top: 8px; font-size: 1.0625rem; line-height: 1.5; }
.panel strong { font-weight: 800; }
@media (min-width: 720px) {
  /* Desktop: the frame sits on the container grid over paper, and the wide crop holds the van and the garage only. */
  .van { background: var(--paper); padding-top: 72px; }
  .van-in { width: calc(100% - var(--gut) * 2); max-width: 1120px; margin-inline: auto; }
  .van-frame { aspect-ratio: auto; height: min(578px, 80svh); width: 100%; }
  .van-frame img { object-position: 66% 45%; }
  /* Narrow enough that no decal letter reaches its edge. */
  .panel { width: 400px; padding: 30px 36px 32px; }
  .panel p + p { font-size: 1.1875rem; }
}

/* ---------- section heads (services, reviews, area): one big heading style everywhere ---------- */
.sheet-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; padding-bottom: 16px; }
.sheet-head h2 { font-weight: 900; font-size: clamp(2.75rem, 11.2vw, 4rem); line-height: 1; letter-spacing: -.028em; }
.sheet-head .lbl { color: var(--muted); }
/* The 2px ink rule under a heading draws in from the left as the section arrives. */
.rule { display: block; height: 2px; background: var(--ink); transform-origin: 0 50%; }
@media (prefers-reduced-motion: no-preference) {
  @media (scripting: enabled) {
    .rule[data-reveal] { opacity: 1; transition: transform .7s cubic-bezier(.33, 1, .68, 1); }
    .rule[data-reveal]:not(.is-in) { transform: scaleX(0); }
  }
}

/* ---------- services: their mark in full colour beside a numbered index ---------- */
/* Each row lights its own fitting in the mark (data-row on both); the rest of the mark falls back. */
.svc { background: var(--paper); padding-top: var(--sec); padding-bottom: 64px; overflow-x: clip; }
.svc-grid { display: grid; grid-template-columns: 1fr auto; column-gap: 16px; }
/* Phone: the full-colour mark stands beside the heading; each row carries its own fitting. */
.svc-mark { grid-column: 2; grid-row: 1; align-self: start; }
.mk { --f: var(--indigo); --t: var(--thread); width: auto; height: 126px; max-width: none; aspect-ratio: 478 / 840; }
/* Phone: the whole mark, full colour, its right edge on the content edge and its foot on the label's line, 24px clear of the rule. */
@media (max-width: 899px) {
  .svc-mark { align-self: end; margin-bottom: 24px; }
  .svc .svc-grid .sheet-head { align-self: end; padding-bottom: 20px; }
}
.mk rect, .mk path { fill: var(--f); transition: fill .25s ease; }
.mk .mt { fill: var(--t); }
/* Fully indigo at rest; the row being read keeps exactly its own pieces and the rest fall back. */
@media (min-width: 900px) {
  .svc[data-on] .mk { --f: #6b74c0; --t: #b8bac4; }
  .mk g[data-row] { transition: transform .25s ease; }
}
.svc[data-on="1"] .mk g[data-row="1"], .svc[data-on="2"] .mk g[data-row="2"], .svc[data-on="3"] .mk g[data-row="3"],
.svc[data-on="4"] .mk g[data-row="4"], .svc[data-on="5"] .mk g[data-row="5"], .svc[data-on="6"] .mk g[data-row="6"] { --f: var(--indigo); --t: var(--thread); }
/* Desktop: the lit fitting goes to indigo-deep so it stands clear of the faded mark. */
@media (min-width: 900px) {
  .svc[data-on="1"] .mk g[data-row="1"], .svc[data-on="2"] .mk g[data-row="2"], .svc[data-on="3"] .mk g[data-row="3"],
  .svc[data-on="4"] .mk g[data-row="4"], .svc[data-on="5"] .mk g[data-row="5"], .svc[data-on="6"] .mk g[data-row="6"] { --f: var(--indigo-deep); }
}
/* The lit fitting slides 8px along the mark's 45° axis (the groups sit inside the rotated frame, so x is that axis). */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .svc[data-on="1"] .mk g[data-row="1"], .svc[data-on="2"] .mk g[data-row="2"], .svc[data-on="3"] .mk g[data-row="3"],
  .svc[data-on="4"] .mk g[data-row="4"], .svc[data-on="5"] .mk g[data-row="5"], .svc[data-on="6"] .mk g[data-row="6"] { transform: translate(-9px, 0); }
}
.svc .sheet-head { grid-column: 1; grid-row: 1; align-self: start; flex-direction: column; align-items: flex-start; }
.svc .rule { grid-column: 1 / -1; grid-row: 2; }
.rows { grid-column: 1 / -1; grid-row: 3; }
.row { position: relative; display: grid; grid-template-columns: 48px 1fr; gap: 6px 16px; padding: 22px 0 24px; border-bottom: 1px solid var(--rule); align-items: baseline; -webkit-tap-highlight-color: transparent; }
.row .no { grid-column: 1; grid-row: 1; font-size: 1.0625rem; color: var(--ink); transition: color .25s ease; }
.row h3 { grid-column: 2; grid-row: 1; font-weight: 800; font-size: 1.625rem; line-height: 1.15; letter-spacing: -.02em; }
.row p { grid-column: 2; color: var(--muted); font-size: 1.0625rem; line-height: 1.5; max-width: 44ch; }
/* Each row's fitting, cut from the mark, under its number on phones: thread grey, turning indigo and seating as the row is read. */
.frag { grid-column: 1; grid-row: 2; align-self: start; justify-self: start; margin-top: 10px; width: 48px; height: 48px; color: var(--thread); translate: 0 -12px; transition: color .25s ease, translate .25s ease; }
.svc[data-on="1"] .row[data-row="1"], .svc[data-on="2"] .row[data-row="2"], .svc[data-on="3"] .row[data-row="3"],
.svc[data-on="4"] .row[data-row="4"], .svc[data-on="5"] .row[data-row="5"], .svc[data-on="6"] .row[data-row="6"] { --on: var(--indigo); }
.row .no { color: var(--on, var(--ink)); }
.row .frag { color: var(--on, var(--thread)); }
.svc[data-on="1"] .row[data-row="1"] .frag, .svc[data-on="2"] .row[data-row="2"] .frag, .svc[data-on="3"] .row[data-row="3"] .frag,
.svc[data-on="4"] .row[data-row="4"] .frag, .svc[data-on="5"] .row[data-row="5"] .frag, .svc[data-on="6"] .row[data-row="6"] .frag { translate: 0 0; }
@media (min-width: 900px) {
  .svc { padding-block: 96px; }
  .svc-grid { grid-template-columns: repeat(12, 1fr); column-gap: 24px; }
  /* The mark fills the left of the sheet, bleeding off the page edge, held in view until row 06 ends. */
  .svc-mark { grid-column: 1 / span 4; grid-row: 1 / span 3; justify-self: start; position: sticky; top: 104px; z-index: 1; margin-left: calc(-1 * (max(0px, (100vw - var(--max) - var(--gut) * 2) / 2) + var(--gut)) - 56px); }
  .mk { height: min(100svh - 128px, 780px, 52vw); }
  .svc .sheet-head { grid-column: 6 / -1; grid-row: 1; align-self: end; flex-direction: row; align-items: baseline; }
  .svc .rule { grid-column: 6 / -1; }
  .rows { grid-column: 6 / -1; }
  .row { grid-template-columns: 56px 1fr 72px; gap: 6px 24px; padding: 34px 0 36px; }
  .row h3 { font-size: 2.125rem; line-height: 1.12; }
  .row p { grid-column: 2; font-size: 1.125rem; }
  .frag { grid-column: 3; grid-row: 1 / span 2; align-self: center; justify-self: end; margin-top: 0; width: 72px; height: 72px; translate: -12px 0; }
}
@media (min-width: 1100px) {
  .svc .sheet-head, .svc .rule, .rows { grid-column: 5 / -1; }
}

/* ---------- 24-hour band: the van's reversed plate ---------- */
.band { background: var(--ink); color: var(--white); padding-block: calc(var(--sec) * .85); }
/* The van's black "24 HOUR EMERGENCY SERVICE" plate, inverted for the black field: a solid white plate, ink letters. */
.plate { display: inline-block; background: var(--white); color: var(--ink); padding: 10px 16px; font-family: var(--sans); font-weight: 800; font-size: .9375rem; line-height: 1.2; letter-spacing: .06em; text-transform: uppercase; }
.bignum { display: block; margin-top: 28px; font-weight: 900; font-size: clamp(3rem, 13.6vw, 11.5rem); line-height: .95; letter-spacing: -.04em; font-variant-numeric: tabular-nums; text-decoration: none; color: var(--white); white-space: nowrap; transition: color .35s ease; }
@media (hover: hover) { .bignum:hover { color: var(--on-indigo); } }
.band-note { margin-top: 20px; color: #c9ccd8; font-size: 1.0625rem; }
@media (min-width: 720px) {
  .band-in { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 24px; }
  .plate { grid-column: 1 / -1; justify-self: start; font-size: 1.125rem; padding: 10px 16px; }
  .bignum { grid-column: 1 / -1; margin-top: 40px; }
  .band-note { grid-column: 1 / -1; margin-top: 32px; font-size: 1.25rem; }
}

/* ---------- reviews ---------- */
.reviews { padding-top: var(--sec); padding-bottom: 64px; }
.big-q { margin-top: 32px; }
.big-q blockquote p { font-weight: 400; font-size: clamp(2.125rem, 8.7vw, 4rem); line-height: 1.14; letter-spacing: -.025em; }
.big-q em { font-style: normal; color: var(--indigo); font-weight: 700; }
.big-q figcaption, .sm-q figcaption { margin-top: 20px; font-weight: 600; font-size: .9375rem; color: var(--muted); }
.rev-facts { margin-top: 44px; display: grid; gap: 8px; }
.rate { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.rate-n { font-weight: 800; font-size: 3.5rem; line-height: 1; letter-spacing: 0; font-variant-numeric: tabular-nums; color: var(--ink); }
.rate-of { font-size: 1rem; color: var(--muted); }
.rate-nd { margin-top: 8px; font-size: 1rem; text-wrap: balance; }
.rev-facts .tl { color: var(--indigo); justify-self: start; margin-top: 16px; }
.rev-more { margin-top: 56px; display: grid; gap: 48px; }
/* A short indigo rule opens each smaller quote; space, not hairlines, separates them. */
.sm-q::before { content: ""; display: block; width: 32px; height: 3px; margin-bottom: 20px; background: var(--indigo); }
.sm-q blockquote p { font-size: 1.0625rem; line-height: 1.55; }
.sm-q figcaption { margin-top: 14px; }
@media (min-width: 900px) {
  .rev-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 24px; align-items: start; }
  .rev-grid .sheet-head { grid-column: 1 / -1; }
  .big-q { grid-column: 1 / span 11; margin-top: 48px; }
  .reviews { padding-bottom: 96px; }
  /* The facts run as one line under the big quote; the two smaller quotes sit side by side below. */
  .rev-facts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 40px; margin-top: 48px; }
  .rate-nd { margin-top: 0; font-size: 1.0625rem; }
  .rev-facts .tl { margin-top: 0; }
  .rev-more { grid-column: 1 / -1; grid-template-columns: repeat(12, 1fr); gap: 0 24px; margin-top: 72px; }
  /* Aaron's short quote a size up in a narrower column, so both columns end together. */
  .sm-q:first-child { grid-column: 1 / span 4; }
  .sm-q:first-child blockquote p { font-size: 1.25rem; line-height: 1.5; }
  .sm-q:last-child { grid-column: 6 / span 6; }
  .sm-q blockquote p { font-size: 1.0625rem; line-height: 1.6; }
}

/* ---------- about: the deep-indigo field, a big lead clause ---------- */
.about { position: relative; overflow: hidden; background: var(--indigo-deep); color: var(--white); padding-top: 64px; padding-bottom: 64px; }
@media (min-width: 900px) { .about { padding-top: 96px; } }
/* One fitting from the mark, the elbow and its couplings, tone on tone, closing the field on the right. */
.about-fit { position: absolute; right: -4px; bottom: 65px; width: auto; height: 112px; max-width: none; fill: #262d7a; pointer-events: none; }
.about-grid { position: relative; z-index: 1; }
@media (min-width: 900px) { .about-fit { height: 340px; right: -8px; } }
/* A rule in the mark's pipe tone closes the field, 64px above its edge. */
.about-grid::after { content: ""; display: block; grid-column: 1 / -1; height: 1px; margin-top: calc(var(--sec) - 64px); background: #3d4aad; }
/* About opens on its lead: the heading is only a small label above it. */
.about .about-lbl { color: var(--thread); }
.about .lead { margin-top: 20px; font-size: 1.75rem; line-height: 1.25; letter-spacing: -.02em; color: var(--on-indigo); max-width: 24ch; }
.about .lead strong { font-weight: 800; color: var(--white); }
.about-cols { margin-top: 32px; display: grid; gap: 18px; color: var(--on-indigo); font-size: 1.0625rem; }
.sign { display: grid; gap: 2px; margin-top: 48px; }
.sign-name { font-family: var(--cond); font-weight: 800; font-size: 1.5rem; line-height: 1.2; }
.sign-role { font-weight: 600; font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; color: var(--on-indigo); }
.sign a { justify-self: start; margin-top: 8px; padding-block: 10px; color: var(--white); font-weight: 600; overflow-wrap: anywhere; }
/* On phones the email stays clear of the fitting at 360px. */
@media (max-width: 899px) { .sign a { font-size: 1rem; } }
.about :focus-visible { outline-color: var(--white); }
@media (min-width: 900px) {
  .about-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 24px; }
  .about h2 { grid-column: 1 / -1; }
  .about .lead { grid-column: 1 / span 9; margin-top: 24px; font-size: 2.5rem; line-height: 1.2; max-width: none; }
  .about-cols { grid-column: 1 / span 7; grid-row: 3; gap: 24px; margin-top: 56px; font-size: 1.125rem; line-height: 1.6; }
  .sign { grid-column: 9 / span 4; grid-row: 3; align-self: start; margin-top: 56px; }
}

/* ---------- where we work: a route board, the neighbourhoods run as lines of text under each city ---------- */
.area { background: var(--paper); padding-top: var(--sec); padding-bottom: 96px; }
.area-intro { margin-top: 24px; max-width: 52ch; font-size: 1.0625rem; color: var(--muted); }
.area .sheet-head { padding-bottom: 0; }
.routes { margin-top: 40px; display: grid; gap: 40px; }
.route h3 { font-family: var(--cond); font-weight: 800; font-size: 2.5rem; letter-spacing: .01em; line-height: 1; text-transform: uppercase; }
.hoods { margin-top: 14px; display: flex; flex-wrap: wrap; overflow: hidden; font-size: 1.125rem; line-height: 1.65; font-weight: 500; }
/* Each name carries its separator in front, in the gap; at the start of a line it falls outside the list and is clipped. */
.hoods li { position: relative; margin-right: 24px; white-space: nowrap; }
.hoods li::before { content: ""; position: absolute; left: -16.5px; top: .86em; width: 9px; height: 5px; margin-top: -2.5px; background: var(--thread); transform: rotate(45deg); }
.route-note { margin-top: 48px; color: var(--muted); }
.route-note a { color: var(--indigo); font-weight: 700; padding-block: 10px; white-space: nowrap; }
/* Phone: the heading is only a small label; the board opens on the city names. */
@media (max-width: 899px) {
  .area .sheet-head h2 { font-weight: 600; font-size: .8125rem; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  .area-intro { margin-top: 12px; }
  .routes { margin-top: 24px; }
  /* The route note lives in the head (beside the intro on desktop) but closes the section on phones. */
  .area-grid { display: flex; flex-direction: column; }
  .area-head { display: contents; }
  .routes { order: 1; }
  .route-note { order: 2; }
}
@media (min-width: 900px) {
  /* Desktop: a split board. The heading holds on the left while the two cities stack large on the right. */
  .area-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 24px; align-items: start; }
  .area-head { grid-column: 1 / span 4; grid-row: 1; position: sticky; top: 120px; }
  .area-intro { margin-top: 28px; font-size: 1.1875rem; }
  .routes { grid-column: 6 / -1; grid-row: 1; gap: 64px; margin-top: 0; }
  .route h3 { font-size: 3.5rem; }
  .area-head .route-note { margin-top: 32px; }
  .hoods { margin-top: 20px; font-size: 1.375rem; line-height: 1.6; }
  .route-note { font-size: 1.125rem; }
}

/* ---------- footer: the indigo field again, the mark bleeding off the corner ---------- */
.foot { position: relative; overflow: hidden; background: var(--indigo); color: var(--white); padding-top: 72px; padding-bottom: calc(40px + 72px + env(safe-area-inset-bottom)); --th: var(--indigo-th); }
.foot-mark { position: absolute; width: 300px; height: 527px; max-width: none; right: -160px; bottom: -270px; pointer-events: none; }
.foot-in { position: relative; display: grid; gap: 36px; }
.foot .lockup-mark { --th: var(--thread); }
.foot .slogan { font-size: 1.3125rem; margin-top: 6px; }
.foot-tel { justify-self: start; font-weight: 900; font-size: clamp(2.5rem, 11vw, 5.5rem); line-height: 1; letter-spacing: -.035em; font-variant-numeric: tabular-nums; text-decoration: none; padding-block: 4px; }
.foot-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 16px; }
.foot-facts > div:last-child { grid-column: 1 / -1; }
.foot-facts dt { color: var(--on-indigo); margin-bottom: 6px; }
.foot-facts dd { font-size: 1.0625rem; line-height: 1.4; overflow-wrap: anywhere; }
.foot-facts dd a { display: inline-block; padding-block: 12px; margin-block: -12px; }
.foot-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; font-weight: 500; font-size: 1.125rem; }
.foot-nav a { padding-block: 10px; }
.foot-base { display: grid; gap: 4px; padding-top: 20px; border-top: 1px solid rgba(215, 219, 245, .3); font-size: .875rem; color: var(--on-indigo); }
.foot-base a { display: inline-block; padding-block: 11px; }
.foot-legal { display: flex; flex-wrap: wrap; gap: 0 20px; }
@media (min-width: 900px) {
  .foot { padding-top: 112px; padding-bottom: 40px; }
  .foot-mark { width: 440px; height: 773px; right: -190px; top: -250px; bottom: auto; }
  .foot-in { grid-template-columns: repeat(12, 1fr); gap: 56px 24px; }
  .foot-brand { grid-column: 1 / span 5; }
  .foot-tel { grid-column: 1 / span 7; grid-row: 2; }
  .foot-facts { grid-column: 1 / span 8; grid-row: 3; grid-template-columns: repeat(3, auto); justify-content: start; gap: 48px; }
  .foot-facts > div:last-child { grid-column: auto; }
  .foot-nav { display: flex; font-size: 1rem; }
  .foot-facts dd { overflow-wrap: normal; white-space: nowrap; }
  .foot-facts { align-items: start; }
  .foot-facts dd a { padding-block: 0; margin-block: 0; }
  .foot-nav { grid-column: 9 / span 3; grid-row: 1 / span 2; flex-direction: column; gap: 0; align-self: start; }
  .foot-base { grid-column: 1 / -1; grid-template-columns: 1fr auto auto; gap: 32px; align-items: center; }
}

/* ---------- phone action bar ---------- */
/* The bar starts tucked away in CSS (not only once the kit's JS runs), so it never flashes on load. */
[data-actionbar]:not(.is-shown) { translate: 0 calc(100% + 24px); visibility: hidden; transition: translate .3s var(--m-ease), visibility 0s .3s; }
[data-actionbar].is-shown { visibility: visible; transition: translate .3s var(--m-ease), visibility 0s; }
@media (scripting: none) { [data-actionbar]:not(.is-shown) { translate: none; visibility: visible; } }
.actionbar { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; background: var(--indigo); padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); box-shadow: 0 -1px 0 rgba(255, 255, 255, .12); }
.ab-call { display: flex; align-items: center; justify-content: center; gap: .45em; min-height: 50px; background: var(--white); color: var(--indigo); font-weight: 800; font-size: 1.0625rem; text-decoration: none; --m-fill: #e4e7f5; }
.ab-svc { display: flex; align-items: center; min-height: 50px; padding: 0 12px; color: var(--white); font-family: var(--cond); font-style: italic; font-weight: 700; font-size: 1.25rem; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
@media (min-width: 720px) { .actionbar { display: none; } }

/* ---------- 404 ---------- */
.lost { position: relative; overflow: hidden; background: var(--indigo); color: var(--white); min-height: calc(100svh - 64px - 34px); display: flex; align-items: flex-end; }
.lost .giant { top: -10%; }
.lost-in { position: relative; padding-top: 64px; padding-bottom: 64px; }
.lost h1 { font-weight: 900; font-size: clamp(3rem, 13vw, 6.5rem); line-height: .95; letter-spacing: -.04em; max-width: 9ch; }
.lost p { margin-top: 18px; max-width: 40ch; font-size: 1.125rem; color: var(--on-indigo); }
.lost .actions { margin-top: 32px; }
.lost .giant use { color: var(--indigo-pc); }
.lost { --th: var(--indigo-th); }

/* ---------- policy pages (tools/legal.mjs) ---------- */
main.wrap.legal { max-width: calc(760px + var(--gut) * 2); padding: 56px var(--gut) 96px; }
.legal .wrap > * { max-width: 70ch; }
main.legal h1 { font-weight: 900; font-size: clamp(2.5rem, 8vw, 3.75rem); line-height: 1; letter-spacing: -.035em; padding-bottom: 16px; border-bottom: 2px solid var(--ink); margin-bottom: 32px; }
.legal h2 { font-weight: 800; font-size: 1.5rem; line-height: 1.2; letter-spacing: -.015em; margin: 40px 0 12px; }
.legal p, .legal li { margin-bottom: 12px; }
.legal ul { list-style: disc; padding-left: 1.25em; }
.legal a { color: var(--indigo); }