/* ==========================================================================
   Garage BSR Inc. — Design System
   ---------------------------------------------------------------------------
   ART DIRECTION: "Fiche technique".
   The shop's promise is an estimate before anyone touches the car — they
   measure, document, then quote. So the page is built like the paperwork:
   a mono data layer (codes, counts, labels) over wide stamped display type,
   square corners, dotted leaders, and red used as a marker rather than a fill.

   Palette extracted from BSR-logo.png. No colours outside the logo are used.
     Red    #D5020D   Black  #000000   Grey #727272
     Light  #D2D2CC   White  #FFFFFF
   Everything else is an alpha level or a shade/tint of those five.

   BANDS: header, home hero and footer are black; the body between is white.
   Their dark tokens are re-declared in the scoped block further down.
   ========================================================================== */

:root {
  /* --- Logo colours --------------------------------------------------- */
  --red: #d5020d;
  --black: #000000;
  --grey: #727272;
  --light: #d2d2cc;
  --white: #ffffff;

  /* --- Derived surfaces (tints of logo white / light grey) ------------ */
  --ink: #ffffff;
  --ink-1: #f6f6f4;
  --ink-2: #efefec;
  --ink-3: #e6e6e2;
  --line: rgba(0, 0, 0, 0.16);
  --line-soft: rgba(0, 0, 0, 0.09);

  /* --- Derived text (logo black and shades of logo grey) -------------- */
  --text: #000000;
  --text-2: #494949;
  --text-3: #727272;

  /* --- Derived red ---------------------------------------------------- */
  --red-deep: #8c0109;
  --red-glow: rgba(213, 2, 13, 0.35);
  --red-veil: rgba(213, 2, 13, 0.08);

  /* --- Type -----------------------------------------------------------
     One superfamily doing two jobs. Archivo is a variable grotesque with a
     real width axis (62–125%): set wide and heavy it reads like stamped
     vehicle badging, set normal it is a clean text face. IBM Plex Mono is
     the data layer — codes, counts, measurements, labels. */
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Display is set WIDE; the body stays at normal width. */
  --wide: 118%;
  --wider: 125%;

  /* --- Metrics -------------------------------------------------------- */
  --wrap: 1220px;
  --hdr-h: 96px;      /* header height; the drawer hangs off it */
  --gut: clamp(20px, 5vw, 56px);
  --radius: 0px;        /* square: nothing in a workshop is rounded */
  --radius-lg: 0px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ==========================================================================
   Reset
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.68;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-stretch: var(--wide);
  font-weight: 800;
  line-height: 0.94;
  letter-spacing: -0.022em;
  text-transform: uppercase;
  margin: 0;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--red); color: var(--white); }

:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: 0;
}

/* ==========================================================================
   Layout primitives
   ========================================================================== */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}

/* Anchor jumps must clear the sticky header, or the target lands under it */
section[id],
main[id],
.acc__item[id] { scroll-margin-top: 116px; }

.section { padding: clamp(72px, 10vw, 132px) 0; position: relative; }
.section--tight { padding: clamp(52px, 7vw, 84px) 0; }
.section--alt { background: var(--ink-1); }
.section--edge { border-top: 1px solid var(--line-soft); }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--red);
  color: var(--white);
  padding: 12px 20px;
  z-index: 999;
  font-weight: 600;
}
.skip:focus { left: 12px; top: 12px; }

/* ==========================================================================
   Type helpers
   ========================================================================== */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0 0 20px;
}
/* Red register mark, not a decorative dash */
.eyebrow::before {
  content: "";
  width: 9px;
  height: 9px;
  background: var(--red);
  flex: none;
}
.eyebrow--muted { color: var(--text-3); }
.eyebrow--muted::before { background: var(--red); }

.h-xl { font-size: clamp(30px, 4.4vw, 58px); }
.h-lg { font-size: clamp(24px, 3.0vw, 40px); }
.h-md { font-size: clamp(19px, 2.0vw, 28px); }
.h-sm { font-size: clamp(16px, 1.4vw, 19px); }

.lede {
  font-size: clamp(17px, 1.55vw, 20px);
  color: var(--text-2);
  line-height: 1.68;
  max-width: 62ch;
}
.muted { color: var(--text-3); }
.accent { color: var(--red); }

/* A phone number must never break across lines — the space inside
   "(514) 978-9413" is an ordinary space and would otherwise wrap. */
a[href^="tel:"] { white-space: nowrap; }

.measure { max-width: 66ch; }

/* Thin red rule used as a section signature */
.rule {
  width: 62px;
  height: 3px;
  background: var(--red);
  margin: 26px 0 0;
  border: 0;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  --btn-bg: var(--red);
  --btn-fg: var(--white);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 30px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bg);
  border-radius: var(--radius);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease),
    background-color 0.28s var(--ease), border-color 0.28s var(--ease),
    color 0.28s var(--ease);
}
/* Hard, unblurred offset — a stamped block, not a floating card */
.btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 0 var(--text);
}
.btn:active { transform: translate(0, 0); box-shadow: 0 0 0 0 var(--text); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  border-color: var(--line);
}
.btn--ghost:hover {
  border-color: var(--red);
  color: var(--red);
  box-shadow: 4px 4px 0 0 var(--red);
}

.btn--light {
  --btn-bg: var(--white);
  --btn-fg: var(--black);
  border-color: var(--white);
}
.btn--light:hover { box-shadow: 4px 4px 0 0 rgba(0, 0, 0, 0.55); }

.btn--sm { padding: 12px 20px; font-size: 11px; }
.btn--block { width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 38px;
}

/* Text link with animated red underline */
.tlink {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
  padding-bottom: 4px;
  background-image: linear-gradient(var(--red), var(--red));
  background-size: 0% 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.4s var(--ease), color 0.3s var(--ease);
}
.tlink:hover { background-size: 100% 2px; color: var(--red); }
.tlink svg { transition: transform 0.35s var(--ease); }
.tlink:hover svg { transform: translateX(5px); }

/* ==========================================================================
   DARK BANDS — the header, the home-page hero and the footer keep the original
   dark treatment; everything between them is light.
   Re-declaring the surface tokens here means every rule inside these blocks
   (nav, buttons, panels, links) keeps resolving to its original dark values.
   ========================================================================== */
.hdr,
.drawer,
.hero,
.ftr {
  --ink: #000000;
  --ink-1: #070707;
  --ink-2: #0e0e0e;
  --ink-3: #161616;
  --line: rgba(210, 210, 204, 0.14);
  --line-soft: rgba(210, 210, 204, 0.08);
  --text: #ffffff;
  --text-2: #d2d2cc;
  --text-3: #8f8f8c;
  color: var(--text);
}

/* Solid black, not translucent: the wordmark PNG carries a pure black
   background, and any transparency over the light page would reveal it
   as a lighter rectangle behind the logo. */
.hdr {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--ink);
  border-bottom: 1px solid var(--line-soft);
  transition: border-color 0.3s var(--ease);
}
.hdr.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.55);
}

/* The header runs wider than the body copy so the enlarged brand and nav
   never crowd each other. */
.hdr .wrap { max-width: 1400px; }

.hdr__in {
  display: flex;
  align-items: center;
  gap: 30px;
  min-height: var(--hdr-h);
}

.brand {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-right: auto;
  flex: none;
}
.brand__img { height: 80px; width: auto; }   /* banner 2.46:1 -> ~196px wide */

/* Narrow screens: the banner steps down, the bar shortens with it */
@media (max-width: 619px) {
  :root { --hdr-h: 74px; }
  .hdr__in { gap: 14px; }
  .brand__img { height: 56px; }
}
@media (max-width: 430px) {
  :root { --hdr-h: 66px; }
  .brand__img { height: 46px; }
  .lang a { padding: 9px 11px; }
}
.brand__txt { display: none; line-height: 1.1; }
/* Set in the display face, like the section headings — not the mono data layer */
.brand__tag {
  display: block;
  font-family: var(--display);
  font-stretch: var(--wide);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
}
/* The banner is ~196px wide, so the tagline only fits alongside it from
   here up — at 620px the two together overflowed the bar. */
@media (min-width: 780px) { .brand__txt { display: block; } }

.nav { display: none; align-items: center; gap: 26px; }
@media (min-width: 1300px) { .nav { display: flex; } }

.nav a {
  position: relative;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-2);
  padding: 8px 0;
  transition: color 0.25s var(--ease);
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease);
}
.nav a:hover { color: var(--white); }
.nav a:hover::after,
.nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--white); }

.hdr__act { display: flex; align-items: center; gap: 14px; }

/* Language switch */
.lang {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.lang a {
  padding: 9px 14px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--text-3);
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}
.lang a:hover { color: var(--white); }
.lang a[aria-current="true"] { background: var(--red); color: var(--white); }

.hdr__cta { display: none; }
@media (min-width: 1300px) { .hdr__cta { display: inline-flex; } }

/* Burger */
.burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 50px;
  height: 46px;
  padding: 0 11px;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
}
@media (min-width: 1300px) { .burger { display: none; } }
.burger span {
  display: block;
  height: 2px;
  background: var(--white);
  transition: transform 0.32s var(--ease), opacity 0.2s var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.drawer {
  position: fixed;
  inset: calc(var(--hdr-h) + 1px) 0 auto;
  background: var(--ink);
  border-bottom: 1px solid var(--line);
  padding: 18px var(--gut) 34px;
  transform: translateY(-14px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease),
    visibility 0.3s;
  z-index: 99;
  max-height: calc(100dvh - var(--hdr-h) - 1px);
  overflow-y: auto;
}
.drawer.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.drawer a {
  display: block;
  padding: 18px 0;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--display);
  font-size: 24px;
  text-transform: uppercase;
  transition: color 0.2s var(--ease), padding-left 0.25s var(--ease);
}
.drawer a:hover { color: var(--red); padding-left: 8px; }
.drawer .btn { margin-top: 24px; }
@media (min-width: 1300px) { .drawer { display: none; } }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  padding: clamp(66px, 10vw, 120px) 0 clamp(56px, 8vw, 104px);
  overflow: hidden;
  /* The shop itself, at 50% over the black ground. Photo sits centre-right so
     the building fills the copy side; the flat 50% layer is what dims it. */
  background:
    /* legibility scrim over the copy — stacked layout puts it up top */
    linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.55) 62%,
      rgba(0, 0, 0, 0) 88%),
    /* the photo, at 50% */
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url("../img/atelier.jpg") center 85% / cover no-repeat,
    var(--ink);
  border-bottom: 1px solid var(--line-soft);
}
/* The shop photograph replaced the drawn arc in the hero — one focal
   device, not two. The page headers keep no arc either. */
.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 42%;
  background: linear-gradient(to top, var(--ink), transparent);
  pointer-events: none;
}
.hero > * { position: relative; z-index: 2; }

.hero__grid {
  display: grid;
  gap: clamp(38px, 5vw, 64px);
  align-items: center;
}
@media (min-width: 960px) {
  .hero__grid { grid-template-columns: 1.12fr 0.88fr; }
  /* Copy takes the left track; the photograph carries the right one. */
  .hero__copy { grid-column: 1; }
    /* copy is on the left, so the scrim runs that way */
  .hero {
    background:
      linear-gradient(to left, rgba(0, 0, 0, 0) 26%, rgba(0, 0, 0, 0.55) 54%),
      linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
      url("../img/atelier.jpg") left 100% / cover no-repeat,
      var(--ink);
  }
}

.hero h1 { font-size: clamp(26px, 7.5vw, 54px); }   /* stacked: copy is full width */
/* Two-column layout gives the copy only ~1.12fr, so the headline scales
   more slowly there. Declared after the base rule — same specificity, so
   source order decides. */
@media (min-width: 960px) {
  .hero h1 { font-size: clamp(34px, 4.1vw, 54px); }
}
.hero h1 .line { display: block; }
.hero h1 .stroke {
  color: transparent;
  -webkit-text-stroke: 1.7px rgba(255, 255, 255, 0.92);
}


.chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px 7px 12px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--red);
  background: transparent;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: 26px;
}
.chip .dot { display: none; }

/* The photo is 1.88:1, almost the hero's own shape, so `cover` leaves barely
   any vertical room to reposition. From 1300px up the hero is comfortably
   wider than the photo, so a 6% width zoom is safe and buys ~120px of travel
   to lift the building and sign clear of the sky. */
@media (min-width: 1300px) {
  .hero { background-size: auto, auto, 106% auto; }
}

/* ==========================================================================
   Marquee strip (logo-style red band)
   ========================================================================== */
.strip {
  background: var(--red);
  color: var(--white);
  padding: 15px 0;
  overflow: hidden;
}
.strip__track {
  display: flex;
  gap: 46px;
  width: max-content;
  animation: slide 42s linear infinite;
}
.strip span {
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 46px;
}
.strip span::after { content: "/"; font-size: 12px; opacity: 0.5; }
@keyframes slide {
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .strip__track { animation: none; }
}

/* ==========================================================================
   Stat / trust row
   ========================================================================== */
.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
@media (min-width: 860px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { background: var(--ink); padding: 32px 26px; }
.stat__n {
  font-family: var(--display);
  font-size: clamp(27px, 3.1vw, 40px);
  line-height: 1;
  color: var(--text);
  font-stretch: var(--wider);
  letter-spacing: -0.03em;
}
.stat__n em { font-style: normal; color: var(--red); }
.stat__l {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  line-height: 1.45;
}

/* ==========================================================================
   Section head
   ========================================================================== */
.shead {
  display: grid;
  gap: 22px;
  border-top: 1px solid var(--text);
  padding-top: 26px;
  margin-bottom: clamp(38px, 4.6vw, 58px);
}
@media (min-width: 900px) {
  .shead {
    grid-template-columns: 1.22fr 0.78fr;
    align-items: end;
    gap: 48px;
  }
}
.shead__x { max-width: 46ch; }

/* ==========================================================================
   Cards
   ========================================================================== */
.grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
}
/* The service grid is built like the spec table: hairline gaps, one outer rule */
.grid:not(.grid--2) {
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 34px 30px 36px;
  background: var(--ink);
  border: 0;
  overflow: hidden;
  transition: background-color 0.35s var(--ease);
}
.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease);
}
.card:hover { background: var(--ink-1); }
.card:hover::before { transform: scaleX(1); }

.card__ico {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--red);
  margin-bottom: 24px;
  transition: border-color 0.35s var(--ease);
}
.card:hover .card__ico { border-color: var(--red); }
.card__ico svg { width: 22px; height: 22px; }

/* Same taxonomy code as the services sheet, so the two read as one system */
.card__code {
  position: absolute;
  top: 34px;
  right: 30px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--text-3);
}
.card:hover .card__code { color: var(--red); }
/* Reserve two lines so descriptions align across the row */
.card h3 { font-size: 17px; margin-bottom: 11px; min-height: 1.9em; }
.card p { font-size: 15.5px; color: var(--text-3); line-height: 1.62; }

.card__list {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 9px;
}
.card__list li {
  position: relative;
  padding-left: 19px;
  font-size: 14.5px;
  color: var(--text-2);
  line-height: 1.5;
}
/* Photo sits flush to the card edges at the bottom. The auto margin on the
   list absorbs any leftover height, so the three photos line up across the row
   even when the copy above them differs in length. */
.card__list { margin-bottom: auto; }

.card__img {
  display: block;
  width: calc(100% + 60px);
  max-width: none;   /* the global img cap would defeat the full-bleed */
  margin: 30px -30px -36px;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  filter: grayscale(1) contrast(1.04);
}
.card__ico { flex: none; }

.card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  background: var(--red);
}

.card__n {
  position: absolute;
  top: 22px;
  right: 26px;
  font-family: var(--display);
  font-size: 46px;
  line-height: 1;
  color: var(--text);
  opacity: 0.09;
}

/* ==========================================================================
   Split feature
   ========================================================================== */
.split {
  display: grid;
  gap: clamp(38px, 5vw, 70px);
  align-items: center;
}
@media (min-width: 940px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--rev .split__media { order: -1; }
}
.split__media img {
  width: 100%;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
}

/* Owner's sign-off under the About paragraph. A short red rule, not the
   eyebrow's square marker — a square would read as another section label,
   while the rule reads as the end of a signed statement. */
.sig {
  margin: 26px 0 0;
  padding-top: 22px;
  position: relative;
}
.sig::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 36px;
  height: 2px;
  background: var(--red);
}
.sig__name {
  display: block;
  font-family: var(--display);
  font-stretch: var(--wide);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.01em;
  color: var(--text);
}
.sig__role {
  display: block;
  margin-top: 5px;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* ==========================================================================
   Réalisations — photo gallery
   The source photos are mixed: 14 portrait, 3 landscape (most carry an EXIF
   orientation tag, so their stored pixels are sideways and only the browser
   knows the true shape). Rather than fight that, the files keep their own
   aspect and the SQUARE tile plus object-fit:cover does the framing — every
   tile renders at identical dimensions no matter which way the photo was shot.
   ========================================================================== */
/* Hourly rates on the contact page — priced facts, so they get the mono
   "data layer" treatment and a red rule rather than reading as body copy. */
.rates {
  margin: 30px 0 0;
  padding-left: 20px;
  border-left: 3px solid var(--red);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.72;
  color: var(--text-2);
}
.rates__k {
  display: block;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 7px;
}

.gal {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.gal__i {
  display: block;
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--ink-1);
  border: 1px solid var(--line);
}
.gal__i img {
  width: 100%;
  height: 100%;
  /* max-width:none defeats the global `img { max-width: 100% }`, which would
     otherwise stop the image short of filling a tile wider than 900px */
  max-width: none;
  object-fit: cover;
  display: block;
  transition: transform 0.5s var(--ease);
}
.gal__i:hover img,
.gal__i:focus-visible img { transform: scale(1.035); }

/* Red rule wipes across the bottom edge on hover — the same red marker the
   eyebrows and section rules use, not a new decorative idea */
.gal__i::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.gal__i:hover::after,
.gal__i:focus-visible::after { transform: scaleX(1); }

.gal__note {
  margin: 44px 0 0;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--text-3);
}
.gal__note a { color: var(--text); border-bottom: 1px solid var(--red); }
.gal__note a:hover { color: var(--red); }

/* --- Lightbox --------------------------------------------------------------
   Progressive enhancement: without JS each tile is an ordinary link to the
   full-size JPEG, so the gallery still works. */
.lbx {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.94);
  padding: clamp(16px, 4vw, 56px);
}
.lbx.is-open { display: flex; }
.lbx__fig { margin: 0; max-width: 100%; max-height: 100%; }
.lbx__fig img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - clamp(88px, 12vw, 150px));
  width: auto;
  height: auto;
}
.lbx__cap {
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: #8f8f8c;
  display: flex;
  gap: 18px;
  align-items: baseline;
}
.lbx__n { color: var(--red); flex: none; }
.lbx__btn {
  position: absolute;
  background: none;
  border: 1px solid rgba(210, 210, 204, 0.28);
  color: #fff;
  width: 46px;
  height: 46px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
}
.lbx__btn:hover { background: var(--red); border-color: var(--red); }
.lbx__x    { top: 18px; right: 18px; }
.lbx__prev { left: 18px;  top: 50%; transform: translateY(-50%); }
.lbx__next { right: 18px; top: 50%; transform: translateY(-50%); }

@media (max-width: 560px) {
  .lbx__prev { left: 12px; }
  .lbx__next { right: 12px; }
  .lbx__btn { width: 40px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .gal__i img,
  .gal__i::after { transition: none; }
  .gal__i:hover img { transform: none; }
}

.ticks { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 15px; }
.ticks li {
  position: relative;
  padding-left: 34px;
  color: var(--text-2);
  font-size: 15.5px;
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 20px;
  height: 20px;
  border-radius: 0;
  border: 1.5px solid var(--red);
}
.ticks li::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 9px;
  width: 8px;
  height: 4px;
  border-left: 1.5px solid var(--red);
  border-bottom: 1.5px solid var(--red);
  transform: rotate(-45deg);
}

/* ==========================================================================
   Info blocks (address / hours)
   ========================================================================== */
.panel {
  background: var(--ink-1);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: clamp(26px, 3.4vw, 42px);
}
.panel--red {
  background: var(--red);
  border-color: var(--red);
}
.panel--red .panel__k,
.panel--red .muted { color: rgba(255, 255, 255, 0.78); }

.panel__k {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 12px;
}

.hours { list-style: none; margin: 0; padding: 0; }
.hours li {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 15px;
}
.hours li:last-child { border-bottom: 0; }
.hours dt, .hours .d { color: var(--text-2); }
/* Weekdays carry two ranges on two lines — keep them flush right */
.hours .t {
  color: var(--text);
  font-family: var(--mono);
  font-size: 13.5px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-align: right;
  line-height: 1.5;
}
.hours .t.closed { color: var(--text-3); font-weight: 500; }

.addr { font-style: normal; font-size: 19px; line-height: 1.55; }

.map {
  width: 100%;
  min-height: 340px;
  border: 0;
  border-radius: var(--radius-lg);
  filter: grayscale(1) contrast(0.94);
  transition: filter 0.5s var(--ease);
}
.map:hover { filter: grayscale(0) contrast(1); }

/* ==========================================================================
   CTA band
   ========================================================================== */
.band {
  position: relative;
  background: var(--red);
  color: var(--white);
  padding: clamp(56px, 7vw, 92px) 0;
  overflow: hidden;
}
.band::before {
  content: "";
  position: absolute;
  top: -48%;
  left: -10%;
  width: 56vw;
  height: 56vw;
  border-radius: 50%;
  border: clamp(22px, 3.2vw, 44px) solid transparent;
  border-bottom-color: var(--white);
  border-left-color: var(--white);
  opacity: 0.13;
  transform: rotate(-24deg);
  pointer-events: none;
}
.band__in {
  position: relative;
  display: grid;
  gap: 30px;
  align-items: center;
}
@media (min-width: 900px) {
  .band__in { grid-template-columns: 1fr auto; gap: 56px; }
}
.band h2 { font-size: clamp(23px, 3.2vw, 40px); }
.band p { color: rgba(255, 255, 255, 0.85); max-width: 52ch; margin-top: 16px; }

/* ==========================================================================
   Accordion (services detail)
   ========================================================================== */
/* THE SIGNATURE: each category is a line on a work order.
   code | name | dotted leader | item count | expand mark. */
.acc { border-top: 1px solid var(--text); }
.acc__item { border-bottom: 1px solid var(--line-soft); }
.acc__item:last-child { border-bottom: 1px solid var(--text); }

.acc__btn {
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 21px 4px;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  position: relative;
  transition: color 0.25s var(--ease);
}
/* Red marker sweeps in from the left edge of the sheet */
.acc__btn::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 50%;
  width: 6px;
  height: 0;
  background: var(--red);
  transform: translateY(-50%);
  transition: height 0.3s var(--ease);
}
.acc__btn:hover::before,
.acc__btn[aria-expanded="true"]::before { height: calc(100% - 26px); }
.acc__btn:hover { color: var(--red); }

/* Category code — the taxonomy a parts counter would use */
.acc__num {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--red);
  flex: none;
  width: 46px;
  align-self: center;
}
.acc__ttl {
  font-family: var(--display);
  font-stretch: var(--wide);
  font-weight: 800;
  font-size: clamp(16px, 1.75vw, 23px);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  line-height: 1.05;
  align-self: center;
}
/* Dotted leader fills the gap, as on a printed price list */
.acc__lead {
  flex: 1 1 auto;
  min-width: 24px;
  align-self: center;
  height: 1em;
  border-bottom: 1px dotted var(--line);
  transform: translateY(-0.28em);
}
.acc__count {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--text-3);
  flex: none;
  align-self: center;
  font-variant-numeric: tabular-nums;
}
.acc__ico {
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  position: relative;
  align-self: center;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease),
    transform 0.35s var(--ease);
}
.acc__ico::before,
.acc__ico::after {
  content: "";
  position: absolute;
  background: currentColor;
}
.acc__ico::before { width: 12px; height: 1.5px; }
.acc__ico::after {
  width: 1.5px;
  height: 12px;
  transition: transform 0.35s var(--ease), opacity 0.25s var(--ease);
}
.acc__btn[aria-expanded="true"] .acc__ico {
  background: var(--red);
  border-color: var(--red);
  color: var(--white);
}
.acc__btn[aria-expanded="true"] .acc__ico::after { transform: scaleY(0); opacity: 0; }

.acc__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s var(--ease);
}
.acc__body > div { overflow: hidden; }
.acc__item.is-open .acc__body { grid-template-rows: 1fr; }
.acc__inner { padding: 2px 4px 32px 64px; }
@media (max-width: 620px) {
  .acc__inner { padding-left: 4px; }
  .acc__lead, .acc__count { display: none; }
}

.taglist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px 26px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.taglist li {
  position: relative;
  padding-left: 20px;
  font-size: 15px;
  color: var(--text-2);
}
.taglist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 2px;
  background: var(--red);
}

/* ==========================================================================
   Document list — built like the services sheet: a type tag, the title, a
   dotted leader, then the file's language and weight.
   ========================================================================== */
.docs {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--text);
}
.docs li { border-bottom: 1px solid var(--line-soft); }
.docs li:last-child { border-bottom: 1px solid var(--text); }

.doc {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 19px 4px;
  transition: color 0.25s var(--ease);
}
/* Same red marker that runs down the services sheet */
.doc::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 50%;
  width: 6px;
  height: 0;
  background: var(--red);
  transform: translateY(-50%);
  transition: height 0.3s var(--ease);
}
.doc:hover::before,
.doc:focus-visible::before { height: calc(100% - 22px); }
.doc:hover { color: var(--red); }

.doc__k {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--red);
  flex: none;
  width: 46px;
}
.doc__t {
  font-family: var(--display);
  font-stretch: var(--wide);
  font-weight: 800;
  font-size: clamp(15px, 1.5vw, 19px);
  letter-spacing: -0.015em;
  text-transform: uppercase;
  line-height: 1.15;
}
.doc__lead {
  flex: 1 1 auto;
  min-width: 20px;
  height: 1em;
  border-bottom: 1px dotted var(--line);
  transform: translateY(-0.28em);
}
.doc__m {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-3);
  flex: none;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.doc__go { flex: none; transition: transform 0.3s var(--ease); }
.doc:hover .doc__go { transform: translateY(3px); }

.docs__note {
  margin-top: 30px;
  max-width: 70ch;
  font-size: 15.5px;
  color: var(--text-3);
}

@media (max-width: 620px) {
  .doc { flex-wrap: wrap; gap: 8px 14px; padding: 17px 4px; }
  .doc__lead { display: none; }
  .doc__t { flex: 1 1 auto; }
  .doc__m { width: 100%; padding-left: 60px; }
  .doc__go { position: absolute; right: 4px; top: 19px; }
}

/* ==========================================================================
   Steps
   ========================================================================== */
.steps {
  display: grid;
  gap: 20px;
  counter-reset: s;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}
.step {
  position: relative;
  padding: 30px 26px 32px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: var(--ink-1);
}
.step__n {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 0;
  background: var(--red);
  color: var(--white);
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 18px;
}
.step h3 { font-size: 16px; margin-bottom: 9px; }
.step p { font-size: 15px; color: var(--text-3); }

/* ==========================================================================
   Booking / embed
   ========================================================================== */
.embed {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: var(--ink-1);
  overflow: hidden;
  min-height: 700px;
}
.embed .calendly-inline-widget { min-height: 700px; }

.notice {
  display: grid;
  gap: 14px;
  padding: clamp(30px, 4vw, 52px);
  text-align: center;
  place-content: center;
  min-height: 420px;
}
.notice__ico {
  width: 58px;
  height: 58px;
  margin: 0 auto;
  display: grid;
  place-items: center;
  border-radius: 0;
  background: var(--red-veil);
  border: 1px solid rgba(213, 2, 13, 0.3);
  color: var(--red);
}
.notice h3 { font-size: 20px; }
.notice p { color: var(--text-3); max-width: 46ch; margin-inline: auto; font-size: 15.5px; }

/* ==========================================================================
   Forms
   ========================================================================== */
.form { display: grid; gap: 18px; }
.form__row { display: grid; gap: 18px; }
@media (min-width: 700px) { .form__row { grid-template-columns: 1fr 1fr; } }

.field { display: grid; gap: 8px; }
.field > label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 14px 16px;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--body);
  font-size: 15.5px;
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.field textarea { min-height: 140px; resize: vertical; }
.field input::placeholder,
.field textarea::placeholder { color: rgba(0, 0, 0, 0.36); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--red);
  background: var(--ink-3);
}
.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--grey) 50%),
    linear-gradient(135deg, var(--grey) 50%, transparent 50%);
  background-position: calc(100% - 20px) 22px, calc(100% - 14px) 22px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.form__note { font-size: 13px; color: var(--text-3); }

/* ==========================================================================
   Contact tiles
   ========================================================================== */
.tiles { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.tile {
  padding: 28px 26px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: var(--ink-1);
  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease);
}
.tile:hover { border-color: rgba(213, 2, 13, 0.45); transform: translateY(-3px); }
.tile__ico { color: var(--red); margin-bottom: 16px; }
.tile__k {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 7px;
}
.tile__v { font-size: 18px; font-weight: 600; line-height: 1.45; }
.tile a:hover { color: var(--red); }

/* ==========================================================================
   Page header (inner pages)
   ========================================================================== */
.phead {
  position: relative;
  padding: clamp(46px, 5.5vw, 74px) 0 clamp(44px, 5vw, 68px);
  border-bottom: 1px solid var(--line-soft);
  overflow: hidden;
}
/* No arc on the light page headers: at low opacity red reads as pink on
   white, which fights the technical register. The dark hero keeps its arc. */
.phead > * { position: relative; }

.crumb {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  align-items: center;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 22px;
}
.crumb a:hover { color: var(--red); }
.crumb span { color: var(--grey); }

/* ==========================================================================
   Footer
   ========================================================================== */
.ftr {
  background: var(--ink);
  border-top: 1px solid var(--line-soft);
  padding: clamp(56px, 7vw, 88px) 0 34px;
}
.ftr__grid {
  display: grid;
  gap: 42px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
.ftr__grid > div:first-child { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .ftr__grid { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; }
  .ftr__grid > div:first-child { grid-column: auto; }
}
.ftr__logo { height: 92px; width: auto; margin-bottom: 24px; }  /* ~208px wide */
/* FOOTER TYPE SCALE — three steps and nothing else:
     mono 11px   column labels
     15px        body text, links and the address
     13px        the bottom bar
   `font-style: normal` is required: browsers italicise <address> by default,
   which had the whole contact column leaning while nothing else did. */
.ftr p,
.ftr address {
  color: var(--text-3);
  font-size: 15px;
  font-style: normal;
}
.ftr h4 {
  font-size: 11px;
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 20px;
}
.ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ftr ul a, .ftr address a { color: var(--text-3); font-size: 15px; transition: color 0.22s var(--ease); }
.ftr ul a:hover, .ftr address a:hover { color: var(--red); }

/* Membership band, full width between the columns and the bottom bar. It used
   to sit inside the brand column, making that column 155px taller than the
   other three and leaving the right side of the footer empty. */
.ftr__member {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid var(--line-soft);
}
.ftr__member img { width: 168px; max-width: 100%; height: auto; }
/* Set exactly like the business description above: same face, size, weight,
   tracking, leading and colour, so the two blocks read as one voice. */
.ftr__member-txt { display: grid; gap: 0; }

.ftr__member span {
  font-family: var(--body);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: inherit;
  color: var(--text-3);
}

.ftr__btm {
  margin-top: 52px;
  padding-top: 26px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--text-3);
}
.ftr__btm a:hover { color: var(--red); }

/* ==========================================================================
   Long-form legal prose
   ========================================================================== */
.prose { max-width: 74ch; }
.prose h2 {
  font-size: clamp(17px, 1.8vw, 23px);
  margin: 46px 0 14px;
}
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--text-2); font-size: 16.5px; line-height: 1.7; }
.prose ul {
  list-style: none;
  margin: 0 0 1.2em;
  padding: 0;
  display: grid;
  gap: 10px;
}
.prose li {
  position: relative;
  padding-left: 21px;
  color: var(--text-2);
  font-size: 16.5px;
  line-height: 1.65;
}
.prose li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  background: var(--red);
}
.prose strong { color: var(--text); font-weight: 600; }
.prose a { color: var(--red); }
.prose a:hover { text-decoration: underline; }

.prose__meta {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-top: 24px;
}

/* Build credit, sitting after the copyright on the same line */
/* Two classes so it beats `.ftr p`, which would otherwise force 15px here.
   margin:0 matters for alignment — the global `p` rule adds 1.1em below,
   which pushed the copyright's centre ~8px above the policies and icons
   that sit beside it on the same centred flex line. */
.ftr .ftr__btm p { font-size: 13px; margin: 0; }
.ftr__by { color: var(--text-3); }
.ftr__by::before {
  content: "·";
  margin: 0 8px;
  color: var(--grey);
}

/* Legal links in the footer's bottom bar. Two-class selector: the generic
   `.ftr ul` rule stacks lists in a grid and would otherwise win on specificity. */
.ftr .ftr__legal {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
}
/* two classes, so it outranks `.ftr ul a` (one class + two elements) */
.ftr .ftr__legal a { color: var(--text-3); font-size: 13px; white-space: nowrap; }
.ftr__legal a:hover { color: var(--red); }

/* Social marks in the footer's bottom bar */
.ftr .ftr__social {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 14px;
  align-items: center;
}
.ftr__social a {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: var(--text-3);
  transition: color 0.25s var(--ease), transform 0.25s var(--ease);
}
.ftr__social svg { width: 19px; height: 19px; display: block; }
.ftr__social a:hover { color: var(--red); transform: translateY(-2px); }

/* ==========================================================================
   Reveal on scroll
   ========================================================================== */
.rv {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.rv.in { opacity: 1; transform: none; }
.rv[data-d="1"] { transition-delay: 0.07s; }
.rv[data-d="2"] { transition-delay: 0.14s; }
.rv[data-d="3"] { transition-delay: 0.21s; }
.rv[data-d="4"] { transition-delay: 0.28s; }
.rv[data-d="5"] { transition-delay: 0.35s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .rv { opacity: 1; transform: none; }
}

/* ==========================================================================
   Print
   ========================================================================== */
@media print {
  .hdr, .drawer, .band, .strip, .btn { display: none !important; }
  body { background: #fff; color: #000; }
}