/* Primrose Mag Repairs and Tyres Fitment: shared stylesheet. Direction A, Night Bay; see DESIGN.md.
   Mobile first: S below 768px, M from 768px, L from 1024px. */

/* Fonts: four static Archivo cuts (OFL), plus metric-matched local fallbacks so nothing moves when they swap in.
   Verdana and Arial cover iOS, macOS and Windows; Roboto covers Android. The Android display face matches cap height, not width. */
@font-face { font-family: "Archivo Expanded"; src: url(../fonts/archivo-expanded-600.woff2) format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo Expanded Light"; src: url(../fonts/archivo-expanded-300.woff2) format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo SemiExpanded"; src: url(../fonts/archivo-semiexpanded-600.woff2) format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url(../fonts/archivo-text-400.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

@font-face { font-family: "Archivo Expanded Fallback"; src: local("Verdana Bold"), local("Verdana-Bold"); font-weight: 600; size-adjust: 112.9%; ascent-override: 77.77%; descent-override: 18.60%; line-gap-override: 0%; }
@font-face { font-family: "Archivo Expanded Fallback Android"; src: local("Roboto Bold"), local("Roboto-Bold"), local("Roboto"); font-weight: 600; size-adjust: 118%; ascent-override: 74.41%; descent-override: 17.80%; line-gap-override: 0%; }
@font-face { font-family: "Archivo Expanded Light Fallback"; src: local("Verdana"); font-weight: 300; size-adjust: 108.2%; ascent-override: 81.15%; descent-override: 19.41%; line-gap-override: 0%; }
@font-face { font-family: "Archivo Expanded Light Fallback Android"; src: local("Roboto"), local("Roboto-Regular"); font-weight: 300; size-adjust: 124.8%; ascent-override: 70.35%; descent-override: 16.83%; line-gap-override: 0%; }
@font-face { font-family: "Archivo SemiExpanded Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 600; size-adjust: 114.5%; ascent-override: 76.68%; descent-override: 18.34%; line-gap-override: 0%; }
@font-face { font-family: "Archivo SemiExpanded Fallback Android"; src: local("Roboto Bold"), local("Roboto-Bold"), local("Roboto"); font-weight: 600; size-adjust: 116.4%; ascent-override: 75.43%; descent-override: 18.04%; line-gap-override: 0%; }
@font-face { font-family: "Archivo Fallback"; src: local("Arial"), local("ArialMT"); font-weight: 400; size-adjust: 98.5%; ascent-override: 89.14%; descent-override: 21.32%; line-gap-override: 0%; }
@font-face { font-family: "Archivo Fallback Android"; src: local("Roboto"), local("Roboto-Regular"); font-weight: 400; size-adjust: 99.8%; ascent-override: 87.98%; descent-override: 21.04%; line-gap-override: 0%; }

/* Tokens */
:root {
  color-scheme: dark;
  --night: #0a1226;    /* their fascia blue, taken almost to black */
  --night-2: #0f1a36;  /* panels, footer, bar */
  --night-3: #16234a;  /* form fields */
  --ice: #eef2f8;
  --ice-2: #d6ddea;
  --steel: #a4afc7;    /* never over a photograph */
  --line: rgb(238 242 248 / .16);
  --line-2: rgb(238 242 248 / .45);
  --field: #7d8aa8;
  --red: #d2343f;      /* one job: the fascia's red edge */
  --error: #ff9ea5;
  --wide: "Archivo Expanded", "Archivo Expanded Fallback", "Archivo Expanded Fallback Android", sans-serif;
  --thin: "Archivo Expanded Light", "Archivo Expanded Light Fallback", "Archivo Expanded Light Fallback Android", sans-serif;
  --ui: "Archivo SemiExpanded", "Archivo SemiExpanded Fallback", "Archivo SemiExpanded Fallback Android", sans-serif;
  --text: "Archivo", "Archivo Fallback", "Archivo Fallback Android", sans-serif;
  --pad: clamp(20px, 5vw, 64px);
  --pad-l: max(var(--pad), env(safe-area-inset-left));
  --pad-r: max(var(--pad), env(safe-area-inset-right));
  --gap: 16px;
  --space: clamp(88px, 7vw + 50px, 150px);
  --bar: 65px;          /* the phone bar: 48px buttons in 8px of padding, plus its rule */
  --top: 64px;          /* header height */
  --r: 12px;            /* every button, the menu toggle, the bar and the form fields */
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --night-a: 10 18 38;  /* scrims */
}
@media (min-width: 768px) { :root { --gap: 20px; --top: 84px; } }
@media (min-width: 1024px) { :root { --gap: 24px; } }

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--night); overflow-anchor: none; } /* nothing here needs anchoring, and it threw long jumps on Home */
body { margin: 0; background: var(--night); color: var(--ice-2); font: 400 17px/1.6 var(--text); font-synthesis: none; -webkit-font-smoothing: antialiased; }
@media (min-width: 1024px) { body { font-size: 18px; } }
img, iframe { display: block; max-width: 100%; }
a { color: var(--ice); text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--line-2); }
:focus-visible { outline: 2px solid var(--ice); outline-offset: 3px; }
h1, h2, h3, p, figure, ul, dl, dd, address { margin: 0; }
ul { padding: 0; list-style: none; }
h1, h2, h3 { font-weight: inherit; text-wrap: balance; }
p { text-wrap: pretty; }
address { font-style: normal; }
.nw { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.icons { position: absolute; width: 0; height: 0; overflow: hidden; }
@media (max-width: 767px) { html { scroll-padding-bottom: calc(var(--bar) + env(safe-area-inset-bottom) + 8px); } }

/* Grid: 4, 6 and 12 columns. Sections are size containers, so bleeds can reach the screen edge with cqw, never vw. */
.wrap { width: 100%; max-width: calc(1152px + var(--pad-l) + var(--pad-r)); margin-inline: auto; padding-inline: var(--pad-l) var(--pad-r); }
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap); }
.grid > * { grid-column: 1 / -1; }
@media (min-width: 768px) { .grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } }
.bleeds { container-type: inline-size; }
.bleeds { --out-l: max(var(--pad-l), (100cqw - 1152px) / 2); --out-r: max(var(--pad-r), (100cqw - 1152px) / 2); }
@media (max-width: 1023px) { .full { margin-inline: calc(-1 * var(--out-l)) calc(-1 * var(--out-r)); } }
@media (max-width: 767px) { .full-s { margin-inline: calc(-1 * var(--out-l)) calc(-1 * var(--out-r)); } }
main:focus { outline: none; }

/* Type */
.name { font: 600 clamp(30px, 9.8vw, 112px)/.92 var(--wide); letter-spacing: -.012em; text-transform: uppercase; color: var(--ice); }
.name > span { display: block; }
.name .name__sub { margin-top: 16px; font: 300 14px/1.2 var(--thin); letter-spacing: .3em; color: var(--ice-2); }
@media (min-width: 768px) { .name .name__sub { margin-top: 22px; font-size: clamp(14px, 1.5vw, 18px); } }
.h1 { font: 600 clamp(36px, 10vw, 104px)/.92 var(--wide); letter-spacing: -.012em; text-transform: uppercase; color: var(--ice); }
.h2 { font: 600 clamp(28px, 4.4vw, 56px)/1 var(--wide); letter-spacing: -.015em; text-transform: uppercase; color: var(--ice); }
.h2--chapter { font-size: clamp(30px, 9.2vw, 52px); line-height: .95; }
.h2--close { font-size: clamp(28px, 3.9vw, 50px); }
.h3 { font: 600 20px/1.1 var(--wide); letter-spacing: .02em; text-transform: uppercase; color: var(--ice); }
@media (min-width: 768px) { .h3 { font-size: 22px; } }
.label { font: 600 12px/1.3 var(--ui); letter-spacing: .16em; text-transform: uppercase; color: var(--steel); }
.lead { font-size: 17px; line-height: 1.55; color: var(--ice-2); max-width: 19.5em; } /* 34ch in Archivo, in em so a fallback font can't change it */
@media (min-width: 768px) { .lead { font-size: 18px; } }
@media (min-width: 1024px) { .lead { font-size: 19px; } }
.small { font-size: 15px; line-height: 1.5; }

/* Buttons: one rounded style for every button, the phone bar, the menu toggle and the skip link.
   A 12px corner; a hairline 3px inside the edge (the panels' double rule, in small); a lit top edge and a short drop.
   Hover brightens (fine pointers only), press sinks the face and scales to .97 (not under reduced motion),
   and focus is the site's 2px ice ring, which follows the corner. */
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.btn, .bar a, .menu > summary, .skip { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid transparent; border-radius: var(--r); font: 600 13px/1 var(--ui); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .16s var(--ease); }
.btn, .bar a { position: relative; }
.btn { min-height: 54px; padding: 0 26px; }
.btn--sm { min-height: 44px; padding: 0 18px; }
.btn::before, .bar a::before, .menu > summary::before, .skip::before { content: ""; position: absolute; inset: 3px; border: 1px solid transparent; border-radius: calc(var(--r) - 3px); pointer-events: none; transition: border-color .2s ease; }
.btn svg, .bar a svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
.btn--primary, .bar .bar__wa, .skip { background: var(--ice); color: var(--night); box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgb(10 18 38 / .16), 0 1px 2px rgb(2 6 16 / .45), 0 12px 24px -14px rgb(2 6 16 / .9); }
.btn--primary::before, .bar .bar__wa::before, .skip::before { border-color: rgb(10 18 38 / .14); }
.btn--outline, .bar a:not(.bar__wa), .menu > summary { background: rgb(238 242 248 / .04); border-color: var(--line-2); color: var(--ice); box-shadow: inset 0 1px 0 rgb(238 242 248 / .08); }
.btn--outline::before, .bar a:not(.bar__wa)::before, .menu > summary::before { border-color: rgb(238 242 248 / .1); }
/* line-height 1.9: a link that wraps keeps its first underline clear of the next line's capitals; one-line links stay 44px */
.tlink { display: inline-flex; align-items: center; min-height: 44px; font: 600 13px/1.9 var(--ui); letter-spacing: .12em; text-transform: uppercase; color: var(--ice); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 6px; transition: text-decoration-color .16s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover, .skip:hover { background: #fff; box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgb(10 18 38 / .12), 0 1px 2px rgb(2 6 16 / .45), 0 16px 30px -14px rgb(2 6 16 / 1); }
  .btn--primary:hover::before, .skip:hover::before { border-color: rgb(10 18 38 / .26); }
  .btn--outline:hover, .menu > summary:hover { background: rgb(238 242 248 / .09); border-color: var(--ice); }
  .btn--outline:hover::before, .menu > summary:hover::before { border-color: rgb(238 242 248 / .24); }
  .tlink:hover, .h3 a:hover, .dir a:hover .dir__v, .foot a:hover { text-decoration-color: var(--ice); text-decoration-thickness: 2px; }
}
.btn:active, .bar a:active, .menu > summary:active { transition-duration: .1s; }
.btn--primary:active, .bar .bar__wa:active { background: var(--ice-2); box-shadow: inset 0 2px 4px rgb(10 18 38 / .28), 0 1px 1px rgb(2 6 16 / .35); }
.btn--outline:active, .bar a:not(.bar__wa):active, .menu > summary:active { background: rgb(238 242 248 / .13); }
@media (prefers-reduced-motion: no-preference) { .btn:active, .bar a:active, .menu > summary:active { transform: scale(.97); } }
@media (max-width: 767px) {
  .actions--stack { flex-direction: column; align-items: stretch; }
  .actions--stack .tlink { align-self: flex-start; }
}

/* Skip link and header (absolute over every page's opening photograph; not sticky) */
.skip { position: absolute; left: 12px; top: -80px; z-index: 50; min-height: 44px; padding: 0 18px; }
.skip:focus { top: 12px; }
.top { position: absolute; inset: 0 0 auto; z-index: 10; border-bottom: 1px solid var(--line); } /* the rule spans the screen at every width */
.top__in { position: relative; display: flex; flex-wrap: wrap; align-items: center; column-gap: 24px; min-height: calc(var(--top) - 1px); }
.brand { display: inline-flex; align-items: center; min-height: 44px; margin-right: auto; font: 600 13px/1 var(--wide); letter-spacing: .08em; text-transform: uppercase; color: var(--ice); text-decoration: none; white-space: nowrap; }
@media (max-width: 419px) { .brand { letter-spacing: .06em; } }
@media (max-width: 359px) { .brand { font-size: 11px; letter-spacing: .05em; } }
@media (min-width: 1024px) { .brand { font-size: 14px; } }
.nav { display: none; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; font: 600 13px/1 var(--ui); letter-spacing: .12em; text-transform: uppercase; color: var(--ice); text-decoration: none; }
.nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--ice); text-underline-offset: 6px; }
.top__cta { display: none; }
/* Menu (S and M): the toggle never moves; the open panel wraps onto its own row and the header joins the flow,
   so it pushes the page down instead of covering it. */
/* From 768 the row reserves the toggle's full width, so "WhatsApp us" never runs under it; below 420px it's narrower,
   to keep clear of the wordmark at 320 and 360. */
.menu { --menu-w: 86px; order: 9; flex: 0 0 44px; height: 44px; }
@media (min-width: 768px) { .menu { flex-basis: var(--menu-w); } }
.menu > summary { position: absolute; top: calc((var(--top) - 44px) / 2); right: var(--pad-r); width: var(--menu-w); min-height: 44px; padding: 0; list-style: none; }
@media (max-width: 419px) { .menu { --menu-w: 74px; } .menu > summary { letter-spacing: .1em; } }
.menu > summary::-webkit-details-marker { display: none; }
.menu[open] { flex: 1 0 100%; height: auto; }
.menu[open] > summary { background: rgb(238 242 248 / .13); border-color: var(--ice); }
.menu__panel { padding: 4px 0 20px; }
.menu__panel a:not(.btn) { display: flex; align-items: center; min-height: 48px; border-top: 1px solid var(--line); font: 600 15px/1 var(--ui); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; }
.menu__panel a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--ice); text-underline-offset: 6px; }
.menu__panel .btn { display: flex; margin-top: 16px; }
.top:has(.menu[open]) { position: relative; background: var(--night-2); }
.top:has(.menu[open]) .brand { margin-block: calc((var(--top) - 44px) / 2); } /* the open header wraps; this keeps the wordmark level with Menu */
@media (min-width: 768px) { .top__cta { display: inline-flex; } }
@media (min-width: 1024px) {
  .nav { display: flex; gap: 32px; }
  .menu { display: none; }
}

/* Page heads: three layers. The frame clips, .head__scale takes M1, the image takes M4. */
.head { position: relative; isolation: isolate; display: grid; align-items: end; min-height: 78svh; }
.head--home { min-height: 100svh; }
@media (min-width: 768px) { .head { min-height: min(78svh, 800px); } }
@media (min-width: 1024px) { .head { min-height: clamp(560px, 82svh, 760px); } }
@media (min-width: 768px) { .head.head--home { min-height: clamp(640px, 100svh, 920px); } }
.head__frame { position: absolute; inset: 0; z-index: -2; overflow: clip; }
.head__scale { position: absolute; inset: 0; }
.head__scale picture { position: absolute; inset: 0; display: block; }
.head__img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
@media (min-width: 1024px) { .head__img { top: -12%; height: 112%; } }
@media (orientation: portrait) and (min-width: 768px) and (max-width: 1023px) { .head__img { object-position: 50% 30%; } }
/* Scrims sit where the text sits: 75% under the header all the way to its foot, then a bottom and left fall-off. */
.head::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgb(var(--night-a) / .75) 0, rgb(var(--night-a) / .75) var(--top), rgb(var(--night-a) / 0) 200px),
    linear-gradient(0deg, rgb(var(--night-a) / .96) 0%, rgb(var(--night-a) / .85) 52%, rgb(var(--night-a) / .1) 76%, rgb(var(--night-a) / 0) 100%); }
@media (min-width: 768px) and (orientation: landscape), (min-width: 1024px) {
  .head::before { background:
    linear-gradient(180deg, rgb(var(--night-a) / .75) 0, rgb(var(--night-a) / .75) var(--top), rgb(var(--night-a) / 0) 200px),
    linear-gradient(90deg, rgb(var(--night-a) / .94) 0%, rgb(var(--night-a) / .72) 34%, rgb(var(--night-a) / .08) 64%, rgb(var(--night-a) / 0) 100%),
    linear-gradient(0deg, rgb(var(--night-a) / .9) 0%, rgb(var(--night-a) / 0) 46%); }
}
.head::after { content: ""; position: absolute; inset: auto 0 0; height: 3px; background: var(--red); }
/* Home and About: their wheels sit behind the right half of the title (Home's "SE" and "AIRS", About's "THE" and "OP"),
   so the left fall-off runs further. Measured per glyph at every laptop size: About's title 3:1 on 99.4% or more of its
   pixels; Home's name, which section 3 lets cross the lit rim, 97.7% or more, with no clipped highlight behind a letter. */
@media (min-width: 768px) and (orientation: landscape), (min-width: 1024px) {
  .head--home::before, .head--about::before { background:
    linear-gradient(180deg, rgb(var(--night-a) / .75) 0, rgb(var(--night-a) / .75) var(--top), rgb(var(--night-a) / 0) 200px),
    linear-gradient(90deg, rgb(var(--night-a) / .94) 0%, rgb(var(--night-a) / .72) 34%, rgb(var(--night-a) / .48) 60%, rgb(var(--night-a) / .2) 80%, rgb(var(--night-a) / 0) 100%),
    linear-gradient(0deg, rgb(var(--night-a) / .9) 0%, rgb(var(--night-a) / 0) 46%); }
}
.head__in { position: relative; padding-block: 120px 32px; }
@media (min-width: 768px) { .head__in { padding-block: 160px 56px; } }
.head__foot { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); align-items: end; }
.head__foot .actions { margin-top: 24px; }
@media (min-width: 768px) { .head__foot { margin-top: 44px; padding-top: 28px; } }
@media (min-width: 1024px) {
  .head__foot .lead { grid-column: 1 / span 5; }
  .head__foot .actions { grid-column: 6 / -1; justify-content: flex-end; flex-wrap: nowrap; margin-top: 0; }
}
/* 1280×657 and 1366×657: keeps the name below the head's top 30% */
@media (min-width: 1024px) and (max-height: 700px) { .head__foot { margin-top: 20px; } }
.head .lead { color: var(--ice-2); }
.head__lead { margin-top: 20px; }
.head .standfirst { margin-top: 20px; max-width: 17.2em; font-size: clamp(21px, 0.6vw + 18.7px, 26px); line-height: 1.35; letter-spacing: -.005em; color: var(--ice-2); }
.head--inner .actions { margin-top: 24px; }
@media (min-width: 1024px) {
  .head--inner .head__row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; }
  .head--inner .head__row > * { grid-column: 1 / span 5; }
  .head--inner .head__row > .actions { grid-column: 6 / -1; justify-content: flex-end; flex-wrap: nowrap; margin-top: 0; }
}

/* Photographs in the page: the figure clips (M2), .ph__in scales, the image is free for M4.
   A's falloff: light falling off into the bay at the foot of in-column and bleeding photographs. */
.ph { position: relative; overflow: clip; background: var(--night-2); }
.ph__in { position: absolute; inset: 0; }
.ph__in picture { position: absolute; inset: 0; display: block; }
.ph img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.ph--fall::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgb(var(--night-a) / 0) 55%, rgb(var(--night-a) / .55)); }

/* Home: introduction and proof */
.intro { padding-block: var(--space); }
.intro__ph { aspect-ratio: 4 / 3; }
.intro__txt { display: grid; gap: 36px; margin-top: 44px; align-content: center; }
.statement { font: 400 clamp(24px, 1.6vw + 18px, 38px)/1.22 var(--text); letter-spacing: -.012em; color: var(--ice); max-width: 19.5em; }
.statement em { font-style: normal; color: var(--steel); }
.proof { padding-top: 28px; border-top: 1px solid var(--line); font: 300 min(7.6vw, 34px)/1.08 var(--thin); letter-spacing: -.01em; color: var(--ice); }
.proof > span { display: block; }
.proof > span + span { color: var(--steel); }
.proof + .tlink { margin-top: -20px; justify-self: start; }
@media (min-width: 768px) {
  .intro__ph { aspect-ratio: 16 / 9; }
  .proof { font-size: clamp(30px, 3.9vw, 50px); }
}
@media (min-width: 1024px) {
  .intro__grid { align-items: center; }
  .intro__ph { grid-column: 1 / span 5; margin: 0 0 0 calc(-1 * var(--out-l)); aspect-ratio: 4 / 5; }
  .intro__txt { grid-column: 7 / -1; margin-top: 0; gap: 48px; }
  .proof + .tlink { margin-top: -32px; }
}

/* Home: the range */
.range { padding-bottom: var(--space); }
.range__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding-bottom: 28px; margin-bottom: 40px; border-bottom: 1px solid var(--line); }
.range__grid { row-gap: 56px; }
.tile { display: grid; align-content: start; gap: 20px; }
.tile__ph { aspect-ratio: 4 / 3; }
.tile .h3 a { color: inherit; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 6px; transition: text-decoration-color .16s var(--ease); }
.rows li { padding: 9px 0; border-top: 1px solid var(--line); color: var(--ice-2); }
@media (max-width: 767px) { .range__head { flex-direction: column; align-items: flex-start; margin-bottom: 32px; } }
@media (min-width: 768px) {
  .tile--side { grid-column: span 3; }
  .tile--side .tile__ph { aspect-ratio: 16 / 10; }
  .tile--lead .tile__ph { aspect-ratio: 16 / 9; }
  .tile--lead .rows { columns: 2; column-gap: 24px; }
  .tile--lead .rows li { break-inside: avoid; }
}
@media (min-width: 1024px) {
  .tile--lead { grid-column: 1 / span 7; grid-row: span 2; }
  .tile--lead .tile__ph { aspect-ratio: 4 / 5; }
  .tile--side { grid-column: 9 / -1; }
}

/* Home: open seven days (a right-bleed split at L) */
.hours { padding-bottom: var(--space); }
.hours__ph { aspect-ratio: 4 / 3; }
.hours__txt { margin-top: 44px; }
.hours__list { display: grid; grid-template-columns: auto auto; justify-content: start; align-items: baseline; gap: 8px 28px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); text-wrap: balance; }
.hours__list dd { color: var(--ice); }
.hours__txt .tlink { margin-top: 20px; }
@media (min-width: 768px) {
  .hours__ph { aspect-ratio: 21 / 9; }
  .hours__list { grid-template-columns: repeat(3, auto); grid-auto-flow: row; column-gap: 40px; }
  .hours__list > div { display: grid; gap: 6px; }
}
@media (max-width: 767px) { .hours__list > div { display: contents; } }
@media (min-width: 1024px) {
  .hours__grid { align-items: center; }
  .hours__ph { grid-column: 7 / -1; grid-row: 1; margin: 0 calc(-1 * var(--out-r)) 0 0; aspect-ratio: 16 / 9; }
  .hours__txt { grid-column: 1 / span 5; grid-row: 1; margin-top: 0; }
}

/* Closing: a full-bleed photograph with a double-ruled panel laid over its lower edge */
.closing__ph { aspect-ratio: 4 / 5; }
@media (min-width: 768px) { .closing__ph { aspect-ratio: 16 / 9; } }
@media (min-width: 1024px) { .closing__ph { aspect-ratio: 16 / 7; } }
.panel { position: relative; background: var(--night-2); border: 1px solid var(--line); outline: 1px solid var(--line); outline-offset: -10px; }
.closing__panel { margin: -48px -8px 0; padding: 32px 24px; }
.closing__panel p { margin-top: 16px; }
.closing__panel .actions { margin-top: 28px; }
@media (min-width: 768px) { .closing__panel { margin: -72px 32px 0; padding: 48px; } .closing__panel .actions { align-items: center; } }
@media (min-width: 1024px) { .closing__panel { margin: -120px auto 0; width: calc(8 * (100% - 11 * var(--gap)) / 12 + 7 * var(--gap)); padding: 56px 64px; } }

/* Full-bleed section photographs (Home closing, About ending): 116% images at top -8% for M4 at L */
.ph--band img { top: 0; height: 100%; }
@media (min-width: 1024px) { .ph--band img { top: -8%; height: 116%; } }

/* Services */
.index { display: flex; flex-wrap: wrap; column-gap: 48px; border-bottom: 1px solid var(--line); }
.index a { display: inline-flex; align-items: center; min-height: 56px; font: 600 13px/1 var(--ui); letter-spacing: .12em; text-transform: uppercase; color: var(--ice); text-decoration: none; }
@media (max-width: 767px) { .index { flex-direction: column; } .index a { min-height: 44px; } .index a + a { border-top: 1px solid var(--line); } }
.chapter { padding-top: var(--space); scroll-margin-top: 16px; }
.chapter__ph { aspect-ratio: 4 / 5; }
.chapter__card { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 20px; margin-top: 36px; } /* minmax: WebKit adds the print's top margin, times 3/2, to an auto column */
.chapter__card .rows li { padding: 11px 0; }
.chapter__card .rows { margin-top: 4px; }
.chapter__extra { display: none; }
.chapter__print { aspect-ratio: 3 / 2; margin-top: 32px; }
@media (min-width: 768px) and (max-width: 1023px) {
  .chapter__ph { aspect-ratio: 16 / 9; }
  .chapter--b .chapter__ph img { object-position: 50% 12%; } /* the spray gun sits in the top half of its 4:5 frame */
}
@media (min-width: 1024px) {
  .chapter--a .chapter__ph { grid-column: 1 / span 6; margin: 0 0 0 calc(-1 * var(--out-l)); }
  .chapter--a .chapter__card { grid-column: 8 / -1; margin-top: 0; align-self: center; }
  .chapter__extra { display: block; aspect-ratio: 3 / 2; margin-top: 12px; }
  .chapter--b .chapter__ph { grid-column: 7 / -1; grid-row: 1 / span 2; margin: 0 calc(-1 * var(--out-r)) 0 0; }
  .chapter--b .chapter__card { grid-column: 1 / span 5; grid-row: 1; margin-top: 0; }
  .chapter--b .chapter__print { grid-column: 1 / span 5; grid-row: 2; align-self: end; }
}
.pair { display: grid; gap: var(--gap); }
.pair .ph { aspect-ratio: 4 / 5; }
.pair .ph + .ph { display: none; }
.chapter--c .chapter__card .chapter__print { display: block; }
@media (min-width: 768px) {
  .pair { grid-template-columns: 1fr 1fr; }
  .pair .ph { aspect-ratio: 1 / 1; }
  .pair .ph + .ph { display: block; }
  .chapter--c .chapter__card .chapter__print { display: none; }
}
@media (min-width: 1024px) {
  .chapter--c .chapter__card { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; margin-top: 40px; }
  .chapter--c .chapter__card > .chapter__head { grid-column: 1 / span 5; display: grid; gap: 20px; }
  .chapter--c .chapter__card > .chapter__list { grid-column: 7 / -1; display: grid; gap: 20px; }
  .chapter--c .rows { columns: 2; column-gap: 24px; }
  .chapter--c .rows li { break-inside: avoid; }
}
.chapter__head, .chapter__list { display: grid; gap: 20px; }

.ask { margin-top: var(--space); display: grid; }
.ask__ph { aspect-ratio: 4 / 3; }
.ask__txt { padding: 32px 24px; }
.ask__txt p { margin-top: 16px; }
.ask__txt .actions { margin-top: 28px; }
@media (max-width: 767px) { .ask { margin-inline: -8px; } }
@media (min-width: 768px) { .ask__ph { aspect-ratio: 16 / 9; } .ask__txt { padding: 48px; } }
@media (min-width: 1024px) {
  .ask { grid-template-columns: 7fr 5fr; }
  .ask__ph { order: 2; aspect-ratio: auto; min-height: 440px; }
  .ask__txt { padding: 56px; align-self: center; }
}

/* About: the sign, set as a board across the page */
.sign { padding-block: var(--space); }
.sign__lines { margin-top: 28px; }
.sign__lines li { padding: 14px 0; border-top: 1px solid var(--line); font: 600 clamp(20px, 2.9vw, 36px)/1.15 var(--wide); letter-spacing: .02em; text-transform: uppercase; color: var(--ice); text-wrap: balance; }
.sign__edge { display: block; height: 3px; background: var(--red); transform-origin: left center; }

/* About: the ending, text straight on a full-bleed photograph */
.ending { position: relative; isolation: isolate; }
.ending__ph { aspect-ratio: 9 / 16; }
.ending__ph::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(0deg, rgb(var(--night-a) / .96) 0%, rgb(var(--night-a) / .85) 45%, rgb(var(--night-a) / .1) 72%, rgb(var(--night-a) / 0) 100%); }
.ending__txt { position: absolute; inset: auto 0 0; z-index: 2; padding-bottom: 32px; }
.ending__txt p { margin-top: 12px; max-width: 19.5em; color: var(--ice-2); }
.ending__txt .actions { margin-top: 24px; }
@media (max-width: 767px) {
  .ending__txt .actions { display: grid; grid-template-columns: 1fr 1fr; }
  .ending__txt .actions .btn--primary { grid-column: 1 / -1; }
  .ending__txt .actions .btn--outline { padding-inline: 12px; }
}
@media (min-width: 768px) {
  .ending__ph { aspect-ratio: 16 / 9; }
  .ending__ph::before { background:
    linear-gradient(90deg, rgb(var(--night-a) / .9) 0%, rgb(var(--night-a) / .6) 40%, rgb(var(--night-a) / 0) 70%),
    linear-gradient(0deg, rgb(var(--night-a) / .9) 0%, rgb(var(--night-a) / 0) 60%); }
  .ending__txt { padding-bottom: 48px; }
}
@media (min-width: 1024px) {
  .ending__ph { aspect-ratio: 16 / 7; }
  .ending__txt { padding-bottom: 56px; }
  .ending__txt .wrap > * { max-width: calc(7 * (100% - 11 * var(--gap)) / 12 + 6 * var(--gap)); }
}

/* Contact */
.dir { display: grid; border-bottom: 1px solid var(--line); text-wrap: balance; }
.dir a { display: grid; align-content: center; gap: 8px; min-height: 64px; padding: 18px 0; border-top: 1px solid var(--line); text-decoration: none; }
.dir__l { font: 600 12px/1.3 var(--ui); letter-spacing: .16em; text-transform: uppercase; color: var(--steel); }
.dir__v { font: 300 24px/1.2 var(--thin); letter-spacing: -.01em; color: var(--ice); text-decoration: underline; text-decoration-color: var(--line-2); text-decoration-thickness: 1px; text-underline-offset: 6px; overflow-wrap: anywhere; }
.dir__v--mail { font: 400 20px/1.3 var(--text); letter-spacing: 0; }
@media (min-width: 768px) { .dir { grid-template-columns: 1fr 1fr; column-gap: var(--gap); } }
@media (min-width: 1024px) { .dir { grid-template-columns: repeat(4, minmax(0, 1fr)); } .dir a { padding: 28px 0; } }
.visit { padding-top: var(--space); scroll-margin-top: 16px; }
.visit__txt { display: grid; gap: 24px; align-content: start; }
.visit address { color: var(--ice); }
.visit .plus { color: var(--steel); }
.visit__hours { display: grid; grid-template-columns: auto auto; justify-content: start; align-items: baseline; gap: 6px 28px; }
.visit__hours dt { color: var(--steel); }
.visit__hours dd { color: var(--ice); }
.visit__txt .btn { justify-self: start; }
.map { margin-top: 36px; aspect-ratio: 1 / 1; border: 1px solid var(--line); background: var(--night-2); }
.map iframe { width: 100%; height: 100%; border: 0; }
@media (min-width: 768px) and (max-width: 1023px) { .map { aspect-ratio: 4 / 3; } }
@media (min-width: 1024px) {
  .visit__txt { grid-column: 1 / span 5; }
  .map { grid-column: 7 / -1; margin-top: 0; }
}
.message { padding-top: var(--space); scroll-margin-top: 16px; }
.message__ph { display: none; aspect-ratio: 4 / 5; }
.message__body { display: grid; gap: 16px; align-content: start; }
.form { margin-top: 20px; padding: 32px 24px; }
@media (max-width: 767px) { .form { margin-inline: -8px; } }
@media (min-width: 768px) { .form { padding: 40px; } }
@media (min-width: 1024px) {
  .message__ph { display: block; grid-column: 1 / span 5; }
  .message__body { grid-column: 7 / -1; }
  .form { padding: 48px; }
}
.field + .field { margin-top: 20px; }
.field label { display: block; font: 600 12px/1.3 var(--ui); letter-spacing: .16em; text-transform: uppercase; color: var(--ice-2); }
.field input, .field textarea { display: block; width: 100%; margin-top: 8px; padding: 12px 14px; min-height: 48px; background: var(--night-3); border: 1px solid var(--field); border-radius: var(--r); color: var(--ice); font: 400 17px/1.4 var(--text); }
.field textarea { resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { outline-offset: 2px; }
.field input:user-invalid, .field textarea:user-invalid { border: 2px solid var(--error); }
.err { display: none; margin-top: 8px; font-size: 15px; color: var(--error); }
.field input:user-invalid ~ .err, .field textarea:user-invalid ~ .err { display: block; }
.form .btn { margin-top: 28px; }
@media (max-width: 767px) { .form .btn { width: 100%; } }
.status { margin-top: 16px; color: var(--ice); }
.status:empty { margin: 0; }
.noscript { margin-top: 16px; color: var(--ice-2); }

/* Footer */
.foot { margin-top: var(--space); background: var(--night-2); border-top: 1px solid var(--line); padding-block: 56px 40px; font-size: 15px; line-height: 1.5; color: var(--ice-2); }
.foot__grid { row-gap: 32px; }
.foot__name { font: 600 16px/1.25 var(--wide); letter-spacing: .04em; text-transform: uppercase; color: var(--ice); }
.foot__a p + p { margin-top: 4px; }
.foot__a .foot__name + p { margin-top: 14px; }
.foot ul a { display: inline-flex; align-items: center; min-height: 44px; }
.foot__base { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 32px; margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--steel); text-wrap: balance; }
.foot__base a { display: inline-block; padding-block: 11px; color: var(--ice-2); }
@media (min-width: 768px) { .foot__a { grid-column: 1 / span 3; } .foot__b { grid-column: 4 / span 1; } .foot__c { grid-column: 5 / span 2; } }
@media (min-width: 1024px) { .foot__a { grid-column: 1 / span 5; } .foot__b { grid-column: 7 / span 2; } .foot__c { grid-column: 9 / -1; } }
@media (max-width: 767px) { .foot { padding-bottom: calc(var(--bar) + env(safe-area-inset-bottom) + 24px); } }

/* Mobile bar (S only) */
.bar { position: fixed; inset: auto 0 0; z-index: 20; display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; padding: 8px max(10px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); background: var(--night-2); border-top: 1px solid var(--line); }
.bar.is-parked { transform: translateY(110%); visibility: hidden; }
.bar a { min-height: 48px; padding: 0 12px; }
.bar a:focus-visible { outline-offset: 2px; }
@media (min-width: 768px) { .bar { display: none; } }

/* Motion */
/* SplitText line masks get room, so descenders and overhangs are never cropped; a split element is a flex column, so they can't add height. */
.line-mask { padding: .12em .1em; margin: -.12em -.1em; }
.is-split { display: flex; flex-direction: column; }
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: vt-out .16s var(--ease) both; }
  ::view-transition-new(root) { animation: vt-in .42s var(--ease) both; }
}
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) {
  /* 'none', not a tiny duration: a .01ms reset turns every style change into a real transition, which GSAP then reads mid-way. */
  *, *::before, *::after { animation: none !important; transition: none !important; }
}