/* ==========================================================================
   CJB Decorators
   --------------------------------------------------------------------------
   The organising idea is a "drop": a length of wallpaper hung ceiling to
   skirting. Every photograph in the library is portrait, so every photograph
   is a drop. Drops butt edge to edge with no gutter, hang from a gold rail,
   and stop at staggered heights, because paper is hung long and trimmed at
   the skirting.

   Specificity: layout classes are single-class and flat. Section padding
   lives only on .section (and its --flush / --raised variants) so nothing
   element-based can cancel it out.
   ========================================================================== */

/* ---- fonts --------------------------------------------------------------- */

/* Archivo carries both display and body. The width axis does the work a
   second family usually would: wide heavy caps for headings, normal width at
   400 for text. IBM Plex Mono is the utility face for specification data
   only — surface labels, filters, meta — because that content genuinely is a
   schedule of surfaces and finishes. */

@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-var-latin.woff2') format('woff2-variations');
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---- tokens -------------------------------------------------------------- */

:root {
  --ink: #0D0D0F;
  --ink-raised: #17171A;
  --gold: #C8A24A;
  --gold-bright: #E3C16F;
  --chalk: #EDEAE3;
  --chalk-dim: #9C978D;
  --line: #2A2A2E;

  --sans: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Fluid scale. The display size is bounded by the longest word in the
     tagline — "EXQUISITE" is nine wide caps and has to fit the thesis column
     without spilling into the drops. */
  --t-display: clamp(2.4rem, 5.9vw, 5.5rem);
  --t-h2: clamp(2rem, 4.2vw, 3.4rem);
  --t-lede: clamp(1.05rem, 1.35vw, 1.3rem);
  --t-body: 1.0625rem;
  --t-mono: 0.75rem;

  --gutter: clamp(1.25rem, 5vw, 5rem);
  --stack: clamp(3.5rem, 9vw, 8rem);

  --rail: 1px solid var(--gold);
  --ease: cubic-bezier(.16, .84, .44, 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(--chalk);
  font: 400 var(--t-body)/1.65 var(--sans);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
h1, h2, p, dl, dd, dt, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; }

/* One focus treatment everywhere. Gold on near-black reads at 8.1:1, so the
   ring is visible without needing a second colour. */
:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: -100%;
  z-index: 100;
  padding: .7rem 1.1rem;
  background: var(--gold);
  color: var(--ink);
  font: 400 var(--t-mono)/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
}
.skip:focus { top: .75rem; }

/* ---- masthead ------------------------------------------------------------ */

.masthead {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: var(--gutter);
  padding: 1rem var(--gutter);
  background: color-mix(in srgb, var(--ink) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.wordmark {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-weight: 800;
  font-stretch: 118%;
  font-size: 1.0625rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.wordmark__rule {
  width: 1.4rem;
  height: 1px;
  background: var(--gold);
}

.wordmark__sub {
  font-weight: 400;
  font-stretch: 100%;
  font-size: .8125rem;
  letter-spacing: .22em;
  color: var(--chalk-dim);
}

.masthead__nav {
  display: flex;
  gap: clamp(1rem, 2.2vw, 2.25rem);
  margin-left: auto;
  font: 400 var(--t-mono)/1 var(--mono);
  letter-spacing: .09em;
  text-transform: uppercase;
}

.masthead__nav a {
  padding: .4rem 0;
  color: var(--chalk-dim);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .2s, border-color .2s;
}
.masthead__nav a:hover { color: var(--chalk); border-bottom-color: var(--gold); }

.masthead__tel {
  font: 400 var(--t-mono)/1 var(--mono);
  letter-spacing: .08em;
  color: var(--gold);
  text-decoration: none;
  white-space: nowrap;
}
.masthead__tel-label {
  margin-right: .5rem;
  color: var(--chalk-dim);
  text-transform: uppercase;
}
.masthead__tel:hover { color: var(--gold-bright); }

@media (max-width: 900px) {
  .masthead__nav { display: none; }
  .masthead__tel { margin-left: auto; }
}

/* Below this the wordmark and the phone number together exceed the content
   width, so the masthead sheds its non-essential words. The number stays: it
   is the most useful thing on the page for someone standing in the room they
   want decorating. */
@media (max-width: 560px) {
  .masthead { gap: 1rem; padding-inline: var(--gutter); }
  .masthead__tel-label { display: none; }
}

@media (max-width: 430px) {
  .wordmark__sub { display: none; }
}

/* ---- hero ---------------------------------------------------------------- */

/* Both columns start at the top so the drops hang from a rail directly under
   the masthead — a picture rail, not a band floating mid-page. The thesis
   column is the wider of the two because the headline sets the measure. */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  align-items: start;
  gap: var(--gutter);
  padding: 0 var(--gutter);
}

.hero__thesis {
  max-width: 36rem;
  padding: clamp(2.75rem, 6vw, 5.5rem) 0 clamp(3rem, 7vw, 6rem);
}

.eyebrow {
  margin-bottom: 1.75rem;
  font: 400 var(--t-mono)/1.5 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
}

.hero__title {
  font-size: var(--t-display);
  font-weight: 800;
  font-stretch: 112%;
  line-height: .92;
  letter-spacing: -.02em;
  text-transform: uppercase;
}

.hero__lede {
  max-width: 30rem;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: var(--rail);
  font-size: var(--t-lede);
  color: var(--chalk-dim);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 2.25rem;
}

/* The rail the drops hang from. It reaches past the right gutter so the run
   of paper looks cut off by the viewport rather than politely inset. */
.hero__drops {
  display: flex;
  align-items: flex-start;
  height: clamp(21rem, 72vh, 42rem);
  /* Clear of the masthead, or the gold rail sits underneath its bottom border
     and the one device the whole page is built on becomes invisible. */
  margin-top: clamp(1.5rem, 3.2vw, 2.75rem);
  margin-right: calc(var(--gutter) * -1);
  border-top: var(--rail);
}

/* ---- drops --------------------------------------------------------------- */

.drop {
  position: relative;
  overflow: hidden;
  /* --chip is that photograph's own dominant colour, computed at build time.
     It tints the box before the image decodes, so a slow connection sees the
     colour of the wall rather than a grey hole. */
  background: var(--chip, var(--ink-raised));
}

.drop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__drops .drop {
  flex: 1 1 0;
  /* --len staggers the trimmed ends. Set per drop in the markup. */
  height: calc(var(--len, 100) * 1%);
}

/* Hide the two narrowest drops before they become slivers. */
@media (max-width: 1100px) {
  .hero__drops .drop:nth-child(n+5) { display: none; }
}

/* Single column below this, and the drops become a scrollable rail rather than
   a fixed row — so all six stay reachable instead of three being thrown away.
   min-width:0 stops a flex row of fixed-basis children widening the grid. */
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; }
  .hero__thesis { padding: clamp(2rem, 6vw, 3rem) 0 2.5rem; }

  .hero__drops {
    min-width: 0;
    height: clamp(15rem, 42vh, 22rem);
    margin-left: 0;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: var(--line) transparent;
  }

  .hero__drops .drop {
    flex: 0 0 42vw;
    scroll-snap-align: start;
  }

  /* Undo the desktop trimming — everything is scrollable now. */
  .hero__drops .drop:nth-child(n+5) { display: block; }
}

/* ---- sections ------------------------------------------------------------ */

.section { padding: var(--stack) var(--gutter); }
.section--raised { background: var(--ink-raised); }
.section--flush { padding-bottom: 0; }

.section__title {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2.5rem;
  font-size: var(--t-h2);
  font-weight: 800;
  font-stretch: 108%;
  line-height: 1;
  letter-spacing: -.015em;
  text-transform: uppercase;
}

.section__eyebrow {
  font: 400 var(--t-mono)/1 var(--mono);
  font-stretch: normal;
  letter-spacing: .16em;
  color: var(--gold);
}

.section__lede {
  max-width: 46rem;
  margin-bottom: 3rem;
  font-size: var(--t-lede);
  color: var(--chalk-dim);
}

/* ---- specification list -------------------------------------------------- */

/* Not service cards with icons. A decorator's trades have no icon vocabulary
   of their own, and inventing one is the template answer. This is a schedule:
   term on the left, what it means on the right, hairline between. */

.spec { border-top: 1px solid var(--line); }

.spec__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--gutter);
  padding: clamp(1.5rem, 3vw, 2.5rem) 0;
  border-bottom: 1px solid var(--line);
}

.spec__term {
  font: 400 var(--t-mono)/1.45 var(--mono);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--gold);
}

.spec__def { max-width: 44rem; color: var(--chalk); }

.spec--tight { margin-top: 3.5rem; }

@media (max-width: 720px) {
  .spec__row { grid-template-columns: 1fr; gap: .85rem; }
}

/* ---- filters ------------------------------------------------------------- */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
  margin-bottom: 2rem;
  font: 400 var(--t-mono)/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.filter {
  padding: .45rem 0;
  color: var(--chalk-dim);
  border-bottom: 1px solid transparent;
  transition: color .2s, border-color .2s;
}
.filter:hover { color: var(--chalk); }
.filter.is-active { color: var(--gold); border-bottom-color: var(--gold); }

/* ---- gallery ------------------------------------------------------------- */

/* Zero gap is the whole point: drops butt up against each other the way
   hung paper does. Full-bleed, so the run is cut off by the viewport. */
.gallery {
  display: grid;
  /* 17rem lands on five columns at desktop widths. Narrower and the drops
     read as slivers rather than as hung lengths of paper. */
  grid-template-columns: repeat(auto-fill, minmax(min(17rem, 45vw), 1fr));
  gap: 0;
  margin: 0 calc(var(--gutter) * -1);
  border-top: var(--rail);
}

.gallery .drop { aspect-ratio: 3 / 4; }

.drop__open {
  position: absolute;
  inset: 0;
  width: 100%;
  z-index: 2;
}

/* Colour-card caption. The chip is the photograph's real dominant colour;
   the words are the surface in trade terms. The chip carries the colour, the
   words carry the fact — no invented colour names. */
.card {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .1rem .75rem;
  padding: 1rem;
  background: linear-gradient(to top,
              color-mix(in srgb, var(--ink) 94%, transparent) 0%,
              color-mix(in srgb, var(--ink) 78%, transparent) 62%,
              transparent 100%);
  opacity: 0;
  transform: translateY(.5rem);
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}

.chip {
  width: .9rem;
  height: .9rem;
  margin-top: .2rem;
  background: var(--chip, var(--chalk));
  border: 1px solid color-mix(in srgb, var(--chalk) 35%, transparent);
  grid-row: span 2;
}

.card__surface {
  font-size: .875rem;
  line-height: 1.35;
  font-weight: 500;
}

.card__meta {
  font: 400 .6875rem/1.4 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
}

.drop:hover .card,
.drop:focus-within .card { opacity: 1; transform: translateY(0); }

.drop img { transition: transform .5s var(--ease), opacity .3s; }
.drop:hover img, .drop:focus-within img { transform: scale(1.03); }

/* Touch has no hover, so the card is simply always on. */
@media (hover: none) {
  .card { opacity: 1; transform: none; }
}

.gallery__empty {
  padding: 3rem var(--gutter);
  font: 400 var(--t-mono)/1.5 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--chalk-dim);
}

.drop[hidden] { display: none; }

/* ---- prep strip ---------------------------------------------------------- */

/* Narrower drops than the gallery. These are the mid-job photographs, and
   they are meant to read as a run of evidence rather than as portfolio. */
.prep-strip {
  display: flex;
  gap: 0;
  overflow-x: auto;
  /* Bleeds off the right edge only. Bleeding left as well would slice the
     first photograph in half at scroll position zero. */
  margin: 0 calc(var(--gutter) * -1) 0 0;
  padding: 0 0 1rem;
  border-top: var(--rail);
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

.prep-strip .drop {
  flex: 0 0 clamp(8rem, 15vw, 12rem);
  aspect-ratio: 3 / 4;
  scroll-snap-align: start;
  filter: saturate(.78);
}
.prep-strip .drop:hover { filter: saturate(1); }

/* ---- about --------------------------------------------------------------- */

.about { max-width: 52rem; }
.about__body { margin-bottom: 1.5rem; font-size: var(--t-lede); }

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1px;
  margin-top: 3rem;
  background: var(--line);
  border: 1px solid var(--line);
}

.facts__item { padding: 1.25rem; background: var(--ink); }
.section--raised .facts__item { background: var(--ink-raised); }

.facts dt {
  margin-bottom: .5rem;
  font: 400 var(--t-mono)/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--chalk-dim);
}

.facts dd { font-size: 1.25rem; font-weight: 700; }

/* The named-towns line. Set quieter than body copy — it earns its place for
   somebody scanning for their own village, not as a paragraph to be read. */
.about__area {
  max-width: 46rem;
  margin-top: 1.75rem;
  font-size: .9375rem;
  line-height: 1.7;
  color: var(--chalk-dim);
}

.about__area-label {
  display: block;
  margin-bottom: .4rem;
  font: 400 var(--t-mono)/1.5 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
}

/* Unfilled placeholder. Deliberately conspicuous so nothing fake reaches
   production unnoticed — delete this rule once the real copy is in. */
.tbc {
  padding: .1em .4em;
  background: color-mix(in srgb, var(--gold) 18%, transparent);
  border-bottom: 1px dashed var(--gold);
  color: var(--gold-bright);
  font: 400 .8em/1.5 var(--mono);
}

/* ---- contact ------------------------------------------------------------- */

.contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(2.5rem, 6vw, 6rem);
}

@media (max-width: 860px) {
  .contact { grid-template-columns: 1fr; }
}

.direct { border-top: 1px solid var(--line); }

.direct li {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--line);
}

.direct__label {
  flex: 0 0 5.5rem;
  font: 400 var(--t-mono)/1.5 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--chalk-dim);
}

.direct__value {
  font-size: 1.125rem;
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .2s, border-color .2s;
}
.direct__value:hover { color: var(--gold-bright); border-bottom-color: currentColor; }

/* ---- form ---------------------------------------------------------------- */

.field { margin-bottom: 1.25rem; }

.field--pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

/* Side-by-side phone and postcode get too cramped to type into on a phone. */
@media (max-width: 480px) {
  .field--pair { grid-template-columns: 1fr; gap: 1.25rem; }
}

.field label {
  display: block;
  margin-bottom: .5rem;
  font: 400 var(--t-mono)/1.5 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--chalk-dim);
}

.field__opt { text-transform: none; letter-spacing: 0; opacity: .7; }

.field input,
.field textarea {
  width: 100%;
  padding: .8rem .9rem;
  background: var(--ink);
  color: var(--chalk);
  font: 400 var(--t-body)/1.5 var(--sans);
  border: 1px solid var(--line);
  border-radius: 0;
  transition: border-color .2s;
}

.field textarea { resize: vertical; min-height: 7rem; }

.field input:hover,
.field textarea:hover { border-color: var(--chalk-dim); }

.field input:focus,
.field textarea:focus { border-color: var(--gold); outline-offset: 1px; }

.field ::placeholder { color: color-mix(in srgb, var(--chalk-dim) 65%, transparent); }

.field input[aria-invalid='true'],
.field textarea[aria-invalid='true'] { border-color: #E2745F; }

.field__error {
  display: block;
  margin-top: .4rem;
  font: 400 var(--t-mono)/1.4 var(--mono);
  letter-spacing: .05em;
  color: #E2745F;
  text-transform: none;
}

.honeypot {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.form__status {
  margin-top: 1rem;
  min-height: 1.5rem;
  font: 400 var(--t-mono)/1.5 var(--mono);
  letter-spacing: .06em;
  color: var(--gold);
}
.form__status[data-state='error'] { color: #E2745F; }

/* Only ever appears when a post fails, offering the enquiry as an email so a
   backend outage does not lose the customer. Underlined rather than gold:
   it sits inside an error message and should not read as the happy path. */
.form__fallback {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: .25em;
}
.form__fallback:hover,
.form__fallback:focus-visible { color: var(--chalk); }

/* ---- buttons ------------------------------------------------------------- */

.btn {
  display: inline-block;
  padding: .95rem 1.6rem;
  font: 400 var(--t-mono)/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--chalk);
  border: 1px solid var(--line);
  transition: border-color .2s, color .2s, background-color .2s;
}
.btn:hover { border-color: var(--chalk-dim); }

.btn--gold {
  background: var(--gold);
  color: var(--ink);
  border-color: var(--gold);
  font-weight: 500;
}
.btn--gold:hover { background: var(--gold-bright); border-color: var(--gold-bright); }

.btn--wide { width: 100%; }

/* ---- footer -------------------------------------------------------------- */

.footer {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem var(--gutter);
  padding: var(--stack) var(--gutter) 3rem;
  border-top: var(--rail);
}

.wordmark--footer { font-size: 1.25rem; }

.footer__tag {
  margin-top: .85rem;
  font: 400 var(--t-mono)/1 var(--mono);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
}

.footer__meta {
  display: grid;
  gap: .55rem;
  font: 400 var(--t-mono)/1.5 var(--mono);
  letter-spacing: .06em;
  color: var(--chalk-dim);
  text-align: right;
}
.footer__meta a { text-decoration: none; }
.footer__meta a:hover { color: var(--gold); }

@media (max-width: 620px) {
  .footer__meta { text-align: left; }
}

/* ---- lightbox ------------------------------------------------------------ */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: color-mix(in srgb, var(--ink) 96%, transparent);
  backdrop-filter: blur(8px);
}

.lightbox[hidden] { display: none; }

.lightbox__figure {
  display: grid;
  gap: 1.25rem;
  max-height: 100%;
}

.lightbox__img {
  max-height: min(80vh, 62rem);
  width: auto;
  margin: 0 auto;
  background: var(--chip, var(--ink-raised));
  border-top: var(--rail);
}

.lightbox__caption {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .15rem .75rem;
  justify-self: center;
  max-width: 34rem;
}

.lightbox__surface { font-size: .9375rem; font-weight: 500; }

.lightbox__meta {
  font: 400 .6875rem/1.4 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
}

.lightbox__close {
  position: absolute;
  top: clamp(1rem, 3vw, 2rem);
  right: clamp(1rem, 3vw, 2rem);
  padding: .6rem 1rem;
  font: 400 var(--t-mono)/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--chalk-dim);
  border: 1px solid var(--line);
}
.lightbox__close:hover { color: var(--chalk); border-color: var(--chalk-dim); }

.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 3rem;
  height: 3rem;
  font-size: 1.25rem;
  color: var(--chalk-dim);
  border: 1px solid var(--line);
}
.lightbox__nav:hover { color: var(--gold); border-color: var(--gold); }
.lightbox__nav--prev { left: clamp(.5rem, 2vw, 1.5rem); }
.lightbox__nav--next { right: clamp(.5rem, 2vw, 1.5rem); }

@media (max-width: 640px) {
  .lightbox__nav { top: auto; bottom: 1rem; transform: none; }
  .lightbox__nav--prev { left: 25%; }
  .lightbox__nav--next { right: 25%; }
}

/* ---- motion -------------------------------------------------------------- */

/* The one orchestrated moment: on load the hero drops hang, revealing top
   down from behind the rail, the way paper comes off the roll. clip-path is
   compositable, so this stays cheap. Everything else on the page is a quiet
   hover state. */
@keyframes hang {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 0 0); }
}

.hero__drops .drop {
  animation: hang 700ms var(--ease) backwards;
  animation-delay: calc(var(--i, 0) * 80ms + 120ms);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .hero__drops .drop { animation: none; }

  /* Keep the state changes, drop the movement. */
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .drop:hover img, .drop:focus-within img { transform: none; }
}