/* H&S Plumbing — the main site (v4, 2026-10-19). Loaded after site.css, on the main pages only:
   /, /residential-plumbing/, /commercial-plumbing/, /services/ and its pages, /about/, /reviews/,
   /contact/. The ad pages (/commercial/, /residential/), /thanks/, /thanks/ad/, /privacy/ and 404
   never load this file, so nothing in it can change them. site.css is not edited.

   The layout follows what successful plumbers' sites share (work/research-2026-10-19-competitor-sites.md):
   a header with a menu, the phone and one booking button; a hero; two doors (houses, businesses);
   how it works; proof; recent work; the owner; questions; the area; a form; a full footer.
   The brand stays the same: near-black and paper, lime only on the main action, the stencil for
   big headings only, Archivo for the rest. Every section is still one heading, a little text and
   at most one action.

   PARTS, in file order: confirm · tokens · skip link · header and menu · hero · section heading ·
   two doors · ticks · steps · cards · who · gallery · reviews · owner · more link · footer ·
   call bar (pair) · small variants · services list · reviews strip · before and after (revision 2) */

/* ------------------------------------------------------------------ confirm
   DRAFT PLACEHOLDERS. Everything the owner still has to confirm is wrapped in
   <span class="confirm" title="Confirm with owner: ..."> or carries data-confirm, and shows in
   yellow. Every one is listed in work/CONFIRM-v4.md with its question.
   AT LAUNCH: replace or delete each placeholder, then delete this one rule. */
.confirm, [data-confirm] { background: #FFD43B; color: #0B0B0B; outline: 2px dashed #B45309; outline-offset: 1px; padding: 0 .2em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* ------------------------------------------------------------------ tokens */
:root {
  --hdr: 3.5rem;                                   /* header height on phones */
  --t-h2: clamp(2.5rem, 10.7vw, 3.75rem);          /* a section heading: 40 px on a 375 phone, never less */
  --t-h3: clamp(1.75rem, 7.4vw, 2.25rem);          /* a card or panel title, condensed capitals */
}
@media (min-width: 1100px) { :root { --hdr: 5rem; } }

/* A heading inside a section, at one size (not fitted). */
.h2 { font-size: var(--t-h2); }
.h2 + p, .h2 + .lead { margin-top: 18px; }

/* Anchors land below the pinned header on desktop. */
[id] { scroll-margin-top: calc(var(--hdr) + 16px); }

/* ------------------------------------------------------------------ skip link */
.skip { position: absolute; left: -9999px; top: 8px; z-index: 40; padding: 12px 16px; background: var(--lime); color: var(--black); font-weight: 600; }
.skip:focus { left: 8px; }

/* ------------------------------------------------------------------ header and menu
   Phones: the name (link home), the phone number, and a Menu button that opens a panel.
   Desktop (1100 px and up): the name, the six links, the number and the lime button, pinned
   to the top of the screen. The menu is a <details>, so it opens without JavaScript. */
.hdr {
  position: relative;
  z-index: 20;
  background: var(--black);
  color: var(--paper);
  --soft: rgb(241 237 227 / .72);
  --line: rgb(241 237 227 / .22);
  --ring: var(--lime);
  border-bottom: 1px solid rgb(241 237 227 / .12);
}
.hdr__in {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  min-height: var(--hdr);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.hdr__name, .hdr__tel, .hdr__nav a, .menu summary, .menu__link, .ft__name, .ft__h, .ft a, .more, .card__more {
  font-family: var(--font-caps);
  font-stretch: 68%;
  text-transform: uppercase;
  word-spacing: var(--cap-space);
}
.hdr__name {
  margin-right: auto;
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
}
.hdr__tel {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
}
.hdr__nav, .hdr__cta { display: none; }

.menu summary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-right: -10px;
  list-style: none;
  cursor: pointer;
}
.menu summary::-webkit-details-marker { display: none; }
.menu__bars, .menu__bars::before, .menu__bars::after {        /* three bars; an X when open */
  display: block;
  width: 24px;
  height: 2px;
  background: currentColor;
}
.menu__bars { position: relative; }
.menu__bars::before, .menu__bars::after { content: ""; position: absolute; left: 0; }
.menu__bars::before { top: -8px; }
.menu__bars::after { top: 8px; }
.menu[open] .menu__bars { background: transparent; }
.menu[open] .menu__bars::before { top: 0; transform: rotate(45deg); }
.menu[open] .menu__bars::after { top: 0; transform: rotate(-45deg); }
.menu__panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: calc(100vh - var(--hdr));
  max-height: calc(100svh - var(--hdr));
  overflow-y: auto;
  padding: 4px var(--gutter) 28px;
  background: var(--black);
  border-bottom: 1px solid var(--line);
}
.menu__link {
  display: block;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: 1.75rem;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
}
.menu__link[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .16em; }
.menu__panel .actions { margin-top: 22px; }
@media (max-width: 359px) { .hdr__tel { display: none; } }   /* a very narrow phone: the call bar has the number */
@media (min-width: 1100px) {
  .hdr { position: sticky; top: 0; }
  .hdr__in { gap: 28px; }
  .hdr__name { margin-right: 0; font-size: 2rem; }
  .hdr__nav { display: flex; gap: 24px; margin-left: auto; }
  .hdr__nav a {
    display: inline-flex;
    align-items: center;
    min-height: 3rem;
    font-size: 1.1875rem;
    font-weight: 800;
    text-decoration: none;
  }
  .hdr__nav a:hover, .hdr__nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }
  .hdr__tel { font-size: 1.375rem; }
  .hdr .hdr__cta { display: flex; width: auto; min-height: 3.25rem; padding: 0 1.25rem; font-size: 1.375rem; }
  .menu { display: none; }
}

/* ------------------------------------------------------------------ hero
   The near-black first screen under the header: .hero__photo (optional) and .hero__text
   (the h1, a .lead, .actions with the lime button and the outlined phone button, a .label).
   Phones: the photo runs edge to edge at a fixed head-and-shoulders height (the pinned call bar
   holds the actions). Desktop: text left, photo right.
   .hero--plain has no photo (services, reviews, contact). */
.hero {
  background: var(--black);
  color: var(--paper);
  --soft: rgb(241 237 227 / .72);
  --line: rgb(241 237 227 / .28);
  --ring: var(--lime);
}
.hero__in { max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; }
.hero__photo { position: relative; height: 15rem; overflow: hidden; }
.hero__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, 50% 15%);
}
.hero__text { padding: 22px var(--gutter) 28px; }
.hero__text .lead { margin-top: 16px; }
.hero__text .actions { margin-top: 20px; }
.hero__text .label { margin-top: 14px; }
.hero--plain .hero__text { padding-block: 40px 48px; }
@media (max-width: 899px) {
  /* 2026-10-20 (Souhail: "on mobile the header stayed the same"): the photo used to be the part
     that gave, so on a phone it shrank to a ~200 px strip of his face. Now it is a fixed
     head-and-shoulders picture; the pinned Call / Get a call back bar keeps both actions in reach. */
  .hero__photo { height: 22rem; height: clamp(18rem, 46svh, 25rem); }
}
@media (min-width: 900px) {
  .hero__in {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(20rem, 38%);
    column-gap: 3.5rem;
    align-items: center;
    padding: 3.5rem var(--gutter) 4.5rem;
  }
  .hero__photo { grid-column: 2; grid-row: 1; align-self: stretch; height: auto; min-height: 32rem; }
  .hero__text { grid-column: 1; grid-row: 1; padding: 0; }
  .hero__text .lead { margin-top: 1.75rem; line-height: 1.4; }
  .hero__text .actions { margin-top: 2rem; }
  .hero__text .label { margin-top: 1.25rem; }
  .hero--plain .hero__in { display: block; padding-block: 4.5rem 5rem; }
}

/* ------------------------------------------------------------------ section heading
   .sec-head: an h2 and an optional sentence, above a grid of cards, steps or photos. */
.sec-head p { margin-top: 16px; }
.sec-head + * { margin-top: 40px; }
@media (min-width: 900px) {
  .sec-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(3rem, 7vw, 6rem); align-items: end; }
  .sec-head p { margin-top: 0; }
  .sec-head + * { margin-top: 56px; }
}

/* ------------------------------------------------------------------ two doors
   Residential and Commercial side by side on desktop, one under the other on phones.
   Plain panels, split by space: a photo, a title, one line, a few ticks, a link. */
.doors { display: grid; gap: 64px; }
.door h3 { margin-top: 20px; font-size: var(--t-h3); line-height: .95; }
.door { padding-top: 4px; border-top: 2px solid currentColor; }
.door > h3:first-child { margin-top: 16px; }
.door h3 + p { margin-top: 10px; }
@media (max-width: 899px) { .door .photo { margin-inline: calc(-1 * var(--gutter)); } }
@media (min-width: 900px) { .doors { grid-template-columns: 1fr 1fr; column-gap: clamp(2.5rem, 5vw, 4.5rem); } }

/* ------------------------------------------------------------------ ticks
   <ul class="ticks">: short lines, each after a small dash. */
.ticks { margin-top: 16px; padding: 0; list-style: none; }
.ticks li { position: relative; max-width: var(--measure); padding-left: 1.3em; }
.ticks li + li { margin-top: 8px; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .78em; width: .6em; height: 2px; background: currentColor; }

/* ------------------------------------------------------------------ steps
   <ol class="steps">: three steps, each a stencil numeral, a title and one or two sentences. */
.steps { display: grid; gap: 40px; padding: 0; list-style: none; counter-reset: step; }
.steps > li { counter-increment: step; }
.steps > li::before {
  content: counter(step);
  display: block;
  margin-bottom: 14px;
  font-family: var(--font-display);
  font-size: 4rem;
  font-weight: 800;
  line-height: .75;
}
.steps h3 { font-size: var(--t-h3); line-height: .95; }
.steps h3 + p { margin-top: 10px; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(2rem, 4vw, 3.5rem); } }

/* ------------------------------------------------------------------ cards
   <div class="cards"> of <a class="card">: a photo, a title, one sentence, "More". The whole
   card is the link. Used for services and for related pages. */
.cards { display: grid; gap: 48px; }
.card { display: block; color: inherit; text-decoration: none; }
.card .photo img { aspect-ratio: 4 / 3; object-fit: cover; object-position: var(--focus, 50% 50%); }
.card h3 { margin-top: 16px; font-size: var(--t-h3); line-height: .95; }
.card h3 + p { margin-top: 8px; }
.card__more { display: inline-block; margin-top: 12px; font-size: 1.25rem; font-weight: 900; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .16em; }
.card:hover h3 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .12em; }
.cards--text .card { padding-top: 18px; border-top: 2px solid currentColor; }
@media (min-width: 640px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; } }
@media (min-width: 1000px) { .cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ------------------------------------------------------------------ who
   <ul class="who">: kinds of business, in big condensed capitals, two to a row. */
.who { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; padding: 0; list-style: none; }
.who li {
  padding-block: 14px;
  border-top: 1px solid var(--line);
  font-family: var(--font-caps);
  font-size: 1.5rem;
  font-weight: 900;
  font-stretch: 68%;
  line-height: 1.05;
  text-transform: uppercase;
  word-spacing: var(--cap-space);
}
@media (min-width: 900px) { .who { grid-template-columns: repeat(3, minmax(0, 1fr)); } .who li { font-size: 2rem; } }

/* ------------------------------------------------------------------ gallery
   Photos of the work, one shape (4:5), with a plain caption under each. */
.gallery { display: grid; gap: 32px; }
.gallery .photo img { aspect-ratio: 4 / 3; object-fit: cover; object-position: var(--focus, 50% 50%); }   /* revision 2: 4:3, shorter on phones */
@media (min-width: 640px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; } }
@media (min-width: 1000px) { .gallery--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .gallery--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ------------------------------------------------------------------ reviews
   A grid of Google reviews, quoted word for word, a little smaller than the one big review. */
.reviews { display: grid; gap: 44px; }
.reviews .review blockquote p { font-size: 1.1875rem; line-height: 1.45; }
.reviews .review figcaption { margin-top: 12px; }
@media (min-width: 900px) {
  .reviews { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2.5rem, 5vw, 4.5rem); row-gap: 56px; }
  .reviews .review blockquote p { font-size: 1.3125rem; }
}
.rating { margin-top: 18px; }

/* ------------------------------------------------------------------ owner
   The owner's name line under the "Meet the owner" heading. */
.owner-name { margin-top: 14px; font-family: var(--font-caps); font-size: 1.5rem; font-weight: 900; font-stretch: 68%; line-height: 1.1; text-transform: uppercase; word-spacing: var(--cap-space); }
.owner-name + p { margin-top: 16px; }
.pull { font-size: var(--t-quote); font-weight: 600; line-height: 1.35; }

/* ------------------------------------------------------------------ more link
   "See residential plumbing", "Read more reviews": a quiet link in condensed capitals. */
.more { display: inline-block; margin-top: 18px; padding-block: 10px; font-size: 1.375rem; font-weight: 900; line-height: 1; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .16em; }
p + .more, .ticks + .more { margin-top: 14px; }
.band--black .lead + .actions { margin-top: 24px; }

/* A draft list of jobs to confirm: a box with a little room inside. */
.confirm-box, .jobs-box { margin-top: 40px; padding: 18px 18px 20px; }
.confirm-box p, .jobs-box p { max-width: none; }
.confirm-box .ticks, .jobs-box .ticks { margin-top: 10px; }
@media (min-width: 900px) { .confirm-box .ticks, .jobs-box .ticks { columns: 2; column-gap: 40px; } .confirm-box .ticks li, .jobs-box .ticks li { break-inside: avoid; } }

/* Two blocks side by side on desktop, stacked on phones (text beside text). */
.duo { display: grid; gap: 48px; }
@media (min-width: 900px) { .duo { grid-template-columns: 1fr 1fr; column-gap: clamp(3rem, 7vw, 6rem); } }

/* The contact details beside the form on /contact/. */
.facts { margin-top: 28px; padding: 0; list-style: none; }
.facts li + li { margin-top: 14px; }
.facts b { display: block; font-family: var(--font-caps); font-size: var(--t-label); font-weight: 800; font-stretch: 68%; letter-spacing: .05em; text-transform: uppercase; word-spacing: var(--cap-space); color: var(--soft); }

/* ------------------------------------------------------------------ footer
   Near-black: the name, the one line with town and phone, the links in three short lists,
   then the license line, the hours and privacy. */
.ft {
  padding-block: 64px 40px;
  background: var(--black);
  color: var(--paper);
  --soft: rgb(241 237 227 / .72);
  --line: rgb(241 237 227 / .22);
  --ring: var(--lime);
  font-size: 1rem;
  line-height: 1.5;
}
.ft__name { display: inline-block; font-size: 2rem; font-weight: 900; line-height: 1; text-decoration: none; }
.ft__line { margin-top: 12px; color: var(--soft); }
.ft__line a { color: var(--paper); white-space: nowrap; }
.ft__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; margin-top: 40px; }
.ft__h { font-size: var(--t-label); font-weight: 800; letter-spacing: .05em; color: var(--soft); }
.ft ul { margin: 8px 0 0; padding: 0; list-style: none; }
.ft ul a { display: inline-block; padding-block: 7px; font-size: 1.25rem; font-weight: 900; line-height: 1.1; text-decoration: none; }
.ft ul a:hover { text-decoration: underline; }
.ft__legal { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--line); font-size: var(--t-small); color: var(--soft); }
.ft__legal p { max-width: none; }
.ft__legal p + p { margin-top: 8px; }
.ft__legal a { display: inline-block; padding-block: 6px; font-size: 1rem; font-weight: 800; color: var(--paper); }
@media (max-width: 899px) { .ft { padding-bottom: 112px; } }     /* room for the pinned call bar */
@media (min-width: 900px) { .ft__top { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; } .ft__line { margin-top: 0; } .ft__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 52rem; } }

/* ------------------------------------------------------------------ call bar (pair)
   The main site pins two buttons to the bottom of a phone screen, the competitor pattern:
   "Call" outlined and "Get a call back" in lime. Shown and hidden by assets/site.js like the
   one-button bar on the ad pages. */
@media (max-width: 899px) {
  .callbar--pair .callbar__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 8px; max-width: var(--wrap); margin-inline: auto; }
  .callbar--pair .btn { max-width: none; margin: 0; min-height: 3.5rem; padding: 0 .75rem; font-size: clamp(1.125rem, 5.6vw, 1.5rem); }
  .callbar--pair .btn--line { color: var(--paper); }
}

/* ------------------------------------------------------------------ small variants
   .steps--plain: the same three columns without numerals, each under a line.
   .reviews--stack: reviews one under the other, even on desktop (beside a heading). */
.steps--plain > li::before { content: none; }
.steps--plain > li { padding-top: 18px; border-top: 2px solid currentColor; }
.reviews--stack { grid-template-columns: minmax(0, 1fr) !important; row-gap: 40px; }
.split .rating, .reviews + .rating { margin-top: 28px; }
.review + p { margin-top: 24px; }

/* The fitted heading in the hero stops at 34rem on desktop, so a four-line heading, the
   buttons and the proof line all fit on the first screen. .lockup--short is for a heading of
   one or two short words ("Services.", "Meet the owner."), which would otherwise come out huge. */
.lockup--short { max-width: min(100%, 17rem); }
@media (min-width: 900px) {
  .hero .lockup { max-width: 34rem; }
  .hero .lockup--short { max-width: 24rem; }
}
.hero__text .label { max-width: none; }
/* Four photos in a row on desktop, two to a row on phones (smaller captions). */
@media (max-width: 639px) {
  .gallery--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; row-gap: 24px; }
  .gallery--4 .photo figcaption { font-size: var(--t-small); }
}
.facts:first-child { margin-top: 0; }

/* ================================================================== revision 2 (2026-10-19) */

/* ------------------------------------------------------------------ services list
   The home page's services, right under the top. Phones: one row per service (a square
   picture, the name, one line, "See the service"), easy to scan. Desktop: four across. */
.svc { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.svc__item {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding-block: 16px;
  border-bottom: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
}
.svc__item img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: var(--focus, 50% 50%); }
.svc__item h3 { font-size: 1.5rem; line-height: 1; }
.svc__item p { margin-top: 6px; font-size: 1rem; line-height: 1.45; }
.svc__more { display: inline-block; margin-top: 8px; font-family: var(--font-caps); font-size: 1.125rem; font-weight: 900; font-stretch: 68%; text-transform: uppercase; word-spacing: var(--cap-space); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .16em; }
.svc__item:hover h3 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .12em; }
.svc + .more { margin-top: 20px; }
@media (min-width: 900px) {
  .svc { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 28px; border-top: 0; }
  .svc__item { grid-template-columns: 1fr; gap: 0; padding: 0; border-bottom: 0; }
  .svc__item img { aspect-ratio: 4 / 3; }
  .svc__item h3 { margin-top: 16px; font-size: 1.75rem; }
}

/* ------------------------------------------------------------------ reviews strip
   Saved Google reviews moving slowly sideways: one loop of the first list takes --strip-dur.
   The track holds the list twice, so moving it left by half is seamless. Paused on hover, on
   focus and (main.js) on touch; then it is an ordinary scroller that snaps to each card.
   Under "reduce motion" it never moves, and the repeat is hidden. */
.strip {
  --strip-dur: 80s;
  margin-inline: calc(-1 * var(--gutter));
  padding: 4px var(--gutter) 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent 100%);
}
.strip::-webkit-scrollbar { display: none; }
.strip:focus-visible { outline: 3px solid var(--ring); outline-offset: -3px; }
.strip__track { display: flex; width: max-content; animation: strip-move var(--strip-dur) linear infinite; }
.strip:hover .strip__track, .strip:focus-within .strip__track, .strip.is-paused .strip__track { animation-play-state: paused; }
.strip.is-manual .strip__track { animation: none; }
@keyframes strip-move { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.strip__list { display: flex; gap: 16px; margin: 0; padding: 0 16px 0 0; list-style: none; }
.strip__card {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  width: min(78vw, 21rem);
  padding: 20px 20px 18px;
  background: var(--white);
  border: 1px solid rgb(11 11 11 / .1);
  scroll-snap-align: start;
}
.strip__stars { color: #E9A700; font-size: 1.25rem; line-height: 1; letter-spacing: .12em; }
.strip__card blockquote { margin-top: 12px; }
.strip__card blockquote p { font-size: 1.0625rem; font-weight: 500; line-height: 1.5; }
.strip__src { margin-top: auto; padding-top: 14px; font-family: var(--font-caps); font-size: var(--t-label); font-weight: 800; font-stretch: 68%; letter-spacing: .05em; text-transform: uppercase; color: var(--soft); }
.strip + .rating, .strip + * + .rating { margin-top: 14px; }
@media (min-width: 900px) { .strip__card { width: 22rem; } }
@media (prefers-reduced-motion: reduce) {
  .strip__track { animation: none; }
  .strip__list[aria-hidden="true"] { display: none; }
}

/* ------------------------------------------------------------------ before and after
   <figure class="ba">: the before picture, the after picture on top of it cut at --pos, a
   white line with a round handle, "Before" and "After" chips, and a hidden range input for the
   keyboard. main.js moves --pos on drag (mouse, finger, pen), on tap, and on the arrow keys.
   Without the script it stays at half and half. Until a real pair exists the two sides are
   empty panels (.ba__pane) and the figure carries the yellow confirm mark. */
.ba__frame {
  --pos: 50%;
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--black);
  cursor: ew-resize;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}
.ba__img, .ba__pane { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba__after { clip-path: inset(0 0 0 var(--pos)); }
.ba__pane { display: block; }
.ba__pane span {
  position: absolute;
  top: 50%;
  width: 36%;
  transform: translate(-50%, -50%);
  font-family: var(--font-caps);
  font-size: clamp(1.125rem, 4.4vw, 1.75rem);
  font-weight: 900;
  font-stretch: 68%;
  line-height: 1.05;
  text-align: center;
  text-transform: uppercase;
  word-spacing: var(--cap-space);
}
.ba__before.ba__pane { background: #1C1C1C; color: rgb(241 237 227 / .7); }
.ba__before.ba__pane span { left: 24%; }
.ba__after.ba__pane { background: #E3DDCF; color: rgb(11 11 11 / .6); }
.ba__after.ba__pane span { left: 76%; }
.ba__line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: var(--white); box-shadow: 0 0 0 1px rgb(11 11 11 / .25); pointer-events: none; }
.ba__handle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3rem;
  height: 3rem;
  margin: -1.5rem 0 0 -1.5rem;
  border: 2px solid var(--black);
  border-radius: 50%;
  background: var(--white);
}
.ba__handle::before, .ba__handle::after {          /* two small arrows, drawn with borders */
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -6px;
  border: 6px solid transparent;
}
.ba__handle::before { left: 7px; border-right: 8px solid var(--black); border-left: 0; }
.ba__handle::after { right: 7px; border-left: 8px solid var(--black); border-right: 0; }
.ba__chip {
  position: absolute;
  top: 12px;
  padding: 6px 10px 5px;
  background: rgb(11 11 11 / .78);
  color: var(--paper);
  font-family: var(--font-caps);
  font-size: var(--t-label);
  font-weight: 800;
  font-stretch: 68%;
  letter-spacing: .05em;
  line-height: 1;
  text-transform: uppercase;
  pointer-events: none;
}
.ba__chip--before { left: 12px; }
.ba__chip--after { right: 12px; }
.ba__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
.ba__frame:has(.ba__range:focus-visible) { outline: 3px solid var(--black); outline-offset: 3px; }
.ba figcaption { margin-top: 10px; font-size: var(--t-cap); line-height: 1.4; color: var(--soft); }
@media (max-width: 899px) { .ba { margin-inline: calc(-1 * var(--gutter)); } .ba figcaption { padding-inline: var(--gutter); } }
@media (min-width: 900px) { .ba { max-width: 56rem; } .ba__handle { width: 3.5rem; height: 3.5rem; margin: -1.75rem 0 0 -1.75rem; } }