/* =========================================================
   Section redesign — CONTACT. See REDESIGN-BRIEF.md.

   Loads after pages.css so it can override the .tile/.routes
   rules it replaces. Scoped to this page only.

   Lead archetype: 5 — alternating full-bleed split. #enquiry
   runs the plant off the LEFT edge with the form against it;
   #visit mirrors it, schematic off the RIGHT. The two are one
   device, which is why they sit next to each other.

   Tokens only. Molten is a mark and a hairline here, never a
   button: the two primary CTAs on this page are white
   (.btn--fill), exactly as the spec requires.
   ========================================================= */

/* =========================================================
   0 · HERO — "arrival"

   `.phero` lives in the shared pages.css, which this page may
   not edit; everything here overrides it from outside, scoped
   to `.chero`.

   The composition, and the reason it is not either of the other
   two heroes shipped in this pass: Quality puts its photograph
   BEHIND everything and Sustainability stands one on the RIGHT
   EDGE, so this one lies along the BOTTOM as a horizon. All the
   type is on navy above it. The strip is full bleed, its top
   dissolved away so the golden-hour sky becomes the page rather
   than ending at a border, and it runs down into the molten
   seam without a gap. It drifts against the scroll on the way
   out — the only hero on the site that moves on scroll.
   ========================================================= */

.chero {
  display: grid; grid-template-rows: 1fr auto;
  /* Tighter at the top than the shared hero, and no padding at the foot
     at all — the horizon owns the bottom edge and runs into the seam. */
  padding-top: calc(var(--nav-h) + clamp(2.2rem, 5.5vh, 3.8rem));
  padding-bottom: 0;
  isolation: isolate;
}
.chero__inner { padding-bottom: clamp(1.6rem, 4.2vh, 2.6rem); }
.chero__inner .badges { margin-top: clamp(1.2rem, 3vh, 1.8rem); }
.chero__inner .phero__actions { margin-top: clamp(1.2rem, 3vh, 1.8rem); }

.chero__band {
  position: relative; margin: 0; overflow: hidden;
  height: clamp(170px, 27vh, 300px);
  /* A mask, not a gradient overlay, because what has to show through the
     top of this strip is the hero's own radial ground — painting navy
     over it would flatten the bloom the rest of the band sits in. The
     figcaption is unaffected: it lives at the foot of the strip, where
     the mask is fully opaque. */
  -webkit-mask-image: linear-gradient(180deg,
      transparent 0%, rgba(0,0,0,.28) 13%, rgba(0,0,0,.85) 31%, #000 48%);
          mask-image: linear-gradient(180deg,
      transparent 0%, rgba(0,0,0,.28) 13%, rgba(0,0,0,.85) 31%, #000 48%);
}

/* Oversized by 9% top and bottom so the parallax has somewhere to travel
   without ever exposing an edge. */
.chero__img {
  position: absolute; left: 0; top: -9%;
  width: 100%; height: 118%;
  object-fit: cover; object-position: 56% 46%;
  filter: saturate(1) brightness(.92) contrast(1.06);
  will-change: transform;
}

.chero__haze {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(6,21,41,.52) 0%, rgba(6,21,41,.10) 34%, rgba(6,21,41,.16) 62%, rgba(6,21,41,.62) 100%),
    linear-gradient(90deg,
      rgba(6,21,41,.48) 0%, rgba(6,21,41,0) 22%, rgba(6,21,41,0) 70%, rgba(6,21,41,.44) 100%);
}

/* The forecourt is the brightest thing in the frame, so this label gets
   a plate rather than trusting the haze. Sampled at glyph pixels by
   _qc/herocontrast3.js, not assumed from the CSS colours. */
.chero__cap {
  position: absolute; z-index: 2;
  right: var(--gutter); bottom: clamp(.7rem, 2.2vh, 1.2rem);
  padding: .42rem .72rem;
  font: 500 var(--fs-label)/1.45 var(--f-mono);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--steel);
  background: rgba(6,21,41,.9);
  border: 1px solid var(--rule-d);
  border-left: 1px solid var(--molten);
}

@media (max-width: 820px) {
  .chero__img { object-position: 62% 48%; }
}
@media (max-width: 560px) {
  .chero__band { height: clamp(150px, 26vh, 210px); }
  .chero__cap { font-size: .66rem; letter-spacing: .08em; left: var(--gutter); text-align: right; }
}

/* ---------------------------------------------------------
   HERO, DESKTOP RELAYOUT — 2026-08-28.

   The photograph moved off the bottom edge and onto the right.

   Reason: the horizon composition above was built for a wide
   golden-hour building shot, where a 170-300px slice still reads
   as a whole scene. The client's own photograph is a gate with a
   signboard beside it — a subject with a top and a bottom — and a
   horizontal slice of it is a slice of tarmac and fence. Standing
   it upright gives the sign back.

   It is a FRAMED PLATE, not a dissolve. Sustainability already
   owns the dissolving right-hand wall of light (.shero__media,
   54% wide, masked open across 62%), and running the same move
   here would make two of the seven heroes the same hero. A hard
   border and a hard edge also suit what this picture is: a
   document of an address, not an atmosphere.

   The band keeps its 118%/-9% overscan, so js/sec-contact.js's
   yPercent:-6 drift still travels without exposing an edge — no
   JS change was needed for any of this.
   --------------------------------------------------------- */
@media (min-width: 900px) {
  .chero {
    position: relative;
    grid-template-rows: 1fr;
    align-content: center;
    min-height: clamp(520px, 74vh, 720px);
    padding-bottom: clamp(2.4rem, 6vh, 4rem);
  }

  /* Keep the type on the site's own measure — the plate is taken
     out of flow rather than made a grid column, so .wrap's gutter
     and max-width still govern where the h1 starts. */
  .chero__inner {
    padding-bottom: 0;
    /* Only .58 of the band, not all of it: the left third of the picture is
       dissolved almost to nothing, so type may sit under it. Reserving the
       full width would squeeze the lede to a narrow column for no reason.
       The number is checked at glyph pixels by _qc/zz-cherocontrast.js. */
    padding-right: calc(var(--chero-plate) * .58 + clamp(1.5rem, 3vw, 2.5rem));
  }

  /* No frame, no edge. The photograph is not placed ON the navy, it comes
     OUT of it: a soft-edged shaft of image bleeding off the right of the
     page and dissolving back into the ground on every other side.

     Still not Sustainability's move. That one is a floor-to-ceiling wall
     with hard top and bottom bleeds and a single left-to-right ramp; this
     is a band through the middle of the hero with no hard edge anywhere. */
  .chero__band {
    position: absolute; z-index: 1;
    right: 0;
    top: 50%; translate: 0 -50%;
    width: min(54%, 780px);
    height: min(74%, 470px);
    border: 0; border-radius: 0;
    /* The mask moves OFF the figure and onto the painted layers. On the
       figure it would take the figcaption with it and dissolve the label
       along with the photograph — the same trap sec-sustainability.css
       documents at .shero__img. */
    -webkit-mask-image: none;
            mask-image: none;
  }

  /* TWO ramps, intersected: a horizontal one that dissolves the left edge
     into the type side, and a vertical one that dissolves top and bottom
     into the ground. The right edge needs no ramp — the band is flush to
     the viewport, so there is no edge there to see.

     A single radial was tried first and does not work here: to put the
     falloff inside a 780x470 box the ellipse has to be small enough that
     it eats the right-hand side too, which is exactly where the signboard
     is. Two ramps let each edge be treated on its own terms.

     If a browser applies only the first layer the picture keeps its left
     dissolve and loses the top/bottom one — degraded, not broken. */
  .chero__img, .chero__haze {
    -webkit-mask-image:
      linear-gradient(90deg, transparent 0%, rgba(0,0,0,.10) 15%, rgba(0,0,0,.60) 36%, #000 58%),
      linear-gradient(180deg, transparent 0%, #000 17%, #000 80%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(90deg, transparent 0%, rgba(0,0,0,.10) 15%, rgba(0,0,0,.60) 36%, #000 58%),
      linear-gradient(180deg, transparent 0%, #000 17%, #000 80%, transparent 100%);
    mask-composite: intersect;
  }

  /* The 118% overscan the parallax needs makes the <img> box narrower
     than the photograph, so `cover` trims the sides. Pushed right so
     what gets trimmed is forecourt on the left and never the signboard,
     which runs from about 50% to 95% of the frame. */
  .chero__img { object-position: 84% 54%; }

  /* Barely there. The dissolve is doing the blending now; this only has to
     keep the caption legible and stop the sky lifting off the top edge. */
  .chero__haze {
    background: linear-gradient(180deg,
      rgba(6,21,41,.44) 0%, rgba(6,21,41,0) 26%,
      rgba(6,21,41,0) 62%, rgba(6,21,41,.58) 100%);
  }

  /* On the right, where the image is opaque — a hard label is the one
     crisp thing in a composition that has no edges. */
  .chero__cap {
    left: auto; right: clamp(1rem, 3vw, 2.4rem);
    /* Lifted clear of the bottom ramp so the label never sits on a part
       of the photograph that is fading out. */
    bottom: clamp(1.8rem, 6vh, 3rem);
    border-radius: var(--rad);
  }
}

/* Declared on the section so both the plate and the text column read the
   same number — change the width in one place. */
.chero { --chero-plate: min(54%, 780px); }

/* Between 900 and 1180 the type column is narrow enough that the lede and
   the third badge run into the picture's soft edge — measured at glyph
   pixels by _qc/zz-cherocontrast.js, which caught the lede at 3.60:1 and a
   badge at 2.72:1 at 960px against 8.6:1 on bare navy. Both are the photo's
   doing, so the photo gives way: smaller plate, and more of it reserved. */
@media (min-width: 900px) and (max-width: 1180px) {
  .chero { --chero-plate: min(46%, 560px); }
  .chero__inner { padding-right: calc(var(--chero-plate) * .82 + clamp(1.5rem, 3vw, 2.5rem)); }
}

/* ---------------------------------------------------------
   1 · ROUTES — the switchboard.
   Four full-width rows on a light band. The row is the object;
   there is no card.
   --------------------------------------------------------- */

.rte { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-l2); }

.rte__row {
  position: relative;
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr) minmax(0, 17rem);
  align-items: baseline;
  gap: clamp(.7rem, 2vw, 2rem);
  padding: clamp(1.05rem, 2.2vw, 1.6rem) 0;
  border-bottom: 1px solid var(--rule-l2);
  transition: background-color var(--d-s) var(--e-out);
}
.rte__row:hover, .rte__row:focus-within { background: rgba(194,65,12,.045); }

/* The hairline that ignites — the site's one repeated gesture,
   applied to a row rather than to a card edge. */
.rte__row::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--molten-ink);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform var(--d-s) var(--e-out);
}
.rte__row:hover::after, .rte__row:focus-within::after { transform: scaleX(1); }

.rte__no {
  font-family: var(--f-mono); font-size: var(--fs-label); letter-spacing: .16em;
  color: var(--molten-ink);
}
.rte__row h3 {
  font-family: var(--f-display); font-weight: 600;
  font-size: clamp(1.1rem, 1rem + .5vw, 1.5rem);
  line-height: 1.16; letter-spacing: -.018em; color: var(--ink); margin: 0 0 .25rem;
}
.rte__row p { margin: 0; font-size: var(--fs-small); color: var(--slate); max-width: 44ch; }

.rte__meta { display: grid; gap: .3rem; justify-items: start; }
.rte__meta a {
  font-family: var(--f-mono); font-size: var(--fs-label); letter-spacing: .05em;
  color: var(--molten-ink); word-break: break-word;
  transition: color var(--d-xs) var(--e-quad);
}
.rte__meta a:hover { text-decoration: underline; }

@media (max-width: 880px) {
  .rte__row { grid-template-columns: 2.6rem minmax(0, 1fr); row-gap: .7rem; }
  .rte__meta { grid-column: 2; justify-items: start; }
}

/* ---------------------------------------------------------
   2 · THE FULL-BLEED SPLIT — #enquiry and #visit.

   The media is absolutely positioned against the viewport edge
   and the section clips it; the copy stays inside .wrap and
   simply starts in column two. That way the photo reaches the
   real edge of the screen at every width without the content
   column ever leaving the site's grid.
   --------------------------------------------------------- */

.fbs { position: relative; overflow: hidden; }

.fbs__media {
  position: absolute; top: 0; bottom: 0; left: 0;
  width: 48%; z-index: 0;
}
.fbs--right .fbs__media { left: auto; right: 0; }

.fbs__ph { position: absolute; inset: 0; background-position: 58% center; }

/* The inner edge dissolves into the band rather than butting
   against it — the same ramp the homepage hero uses on its pour. */
.fbs__fade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(6,21,41,.20) 0%, rgba(6,21,41,0) 26%,
                    rgba(6,21,41,.30) 56%, rgba(6,21,41,.74) 82%,
                    rgba(6,21,41,.96) 95%, var(--navy-900) 100%),
    linear-gradient(180deg, rgba(6,21,41,.5) 0%, rgba(6,21,41,0) 26%, rgba(6,21,41,0) 74%, rgba(6,21,41,.5) 100%);
}
.fbs--right .fbs__fade {
  background:
    linear-gradient(270deg, rgba(10,30,60,.20) 0%, rgba(10,30,60,0) 26%,
                    rgba(10,30,60,.30) 56%, rgba(10,30,60,.74) 82%,
                    rgba(10,30,60,.96) 95%, var(--navy-800) 100%),
    linear-gradient(180deg, rgba(10,30,60,.5) 0%, rgba(10,30,60,0) 26%, rgba(10,30,60,0) 74%, rgba(10,30,60,.5) 100%);
}

.fbs__body {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1.6rem, 4vw, 4rem);
}
.fbs__col { grid-column: 2; }
.fbs--right .fbs__col { grid-column: 1; }

.fbs .sechead--stack { margin-bottom: clamp(1.4rem, 3.4vh, 2.2rem); }

/* The real map panel (2026-08-08). The drawn schematic — crosshair, range
   rings, pulsing pin — was removed with its CSS when the client's address
   was confirmed; there is no point keeping a stand-in styled once the real
   thing is in. */
.fbs__media--panel { background: var(--navy-900); }

.vis__map { position: absolute; inset: 0; overflow: hidden; }

/* Google's own tile styling is a bright, warm grey that fights a navy page
   quite badly. Rather than pay for a styled Maps JS instance and an API key,
   the iframe is graded to sit in the palette: knocked back, cooled toward
   the navy, and lifted back to full colour on hover or keyboard focus so it
   is unambiguously live and not a screenshot. */
.vis__frame {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0; display: block;
  /* Order matters — filters apply left to right. invert() first turns the
     light tiles dark, then hue-rotate(180deg) puts the hues back the right
     way round; doing it the other way gives you a blue-negative mess. */
  filter: invert(.92) hue-rotate(180deg) saturate(.78) brightness(.94) contrast(1.04);
  transition: filter var(--d-m) var(--e-out);
}
.vis__map:hover .vis__frame,
.vis__frame:focus-within { filter: none; }

/* The escape hatch. The embed is fine for orientation, but anyone actually
   coming here wants it in their own maps app with directions — so the plate
   that used to be a caption is now the link that does that.

   TOP right, not bottom centre. On a desktop this panel is ~1130px tall
   against a ~900px viewport, so anything hung off its foot is below the fold
   at the moment the section arrives — measured. Top-right is also the one
   corner Google leaves alone: "View larger map" takes top-left, the logo
   bottom-left, zoom and terms bottom-right. */
.vis__plate {
  position: absolute; z-index: 2;
  top: clamp(1rem, 4vh, 2.2rem);
  right: clamp(1rem, 3vw, 2rem);
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .6rem .95rem;
  background: rgba(4,16,31,.92);
  border: 1px solid var(--rule-d2);
  font-family: var(--f-mono); font-size: var(--fs-label);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--chrome); white-space: nowrap; text-align: center;
  text-decoration: none;
  transition: border-color var(--d-s) var(--e-out), color var(--d-s) var(--e-out);
}
.vis__plate:hover, .vis__plate:focus-visible {
  border-color: var(--molten); color: var(--molten);
}
.vis__plate svg { flex: 0 0 auto; }

/* ---- #visit copy ---- */

.vis__lede {
  font-family: var(--f-display); font-weight: 300;
  font-size: clamp(1.02rem, .92rem + .5vw, 1.3rem);
  line-height: 1.34; letter-spacing: -.01em;
  color: var(--white); max-width: 34ch; margin: 0 0 clamp(1.2rem, 3vh, 1.8rem);
}

.vis__steps { list-style: none; margin: 0; padding: 0; }
.vis__step {
  display: grid; grid-template-columns: 3rem minmax(0, 1fr);
  gap: 0 1rem; align-items: baseline;
  padding: .78rem 0;
  border-top: 1px solid var(--rule-d);
}
.vis__step:last-child { border-bottom: 1px solid var(--rule-d); }
.vis__no {
  font-family: var(--f-mono); font-size: var(--fs-label); letter-spacing: .14em;
  color: var(--molten);
}
.vis__step h3 {
  font-family: var(--f-display); font-weight: 600; font-size: 1rem;
  letter-spacing: -.012em; color: var(--white); margin: 0 0 .1rem;
}
.vis__step p { margin: 0; font-size: var(--fs-small); color: var(--steel); }

.vis__cta { margin-top: clamp(1.4rem, 3.4vh, 2rem); }

.det {
  margin: clamp(1.8rem, 4.4vh, 2.8rem) 0 0;
  padding-top: clamp(1.2rem, 3vh, 1.8rem);
  border-top: 1px solid var(--rule-d2);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.6vw, 1.8rem);
}
.det__pair { min-width: 0; }
.det dt {
  font-family: var(--f-mono); font-size: var(--fs-label); letter-spacing: .12em;
  text-transform: uppercase; color: var(--steel-dim); margin-bottom: .45rem;
}
.det dd { margin: 0; font-size: var(--fs-small); color: var(--steel); line-height: 1.55; }
.det a {
  font-family: var(--f-mono); font-size: var(--fs-label); letter-spacing: .05em;
  color: var(--molten); word-break: break-word;
}
.det a:hover { text-decoration: underline; }
.det__note {
  margin: 1rem 0 0; font-family: var(--f-mono); font-size: var(--fs-label);
  letter-spacing: .08em; color: var(--steel-dim);
}

/* Stacked. The media becomes a normal block ABOVE the copy, which
   is why it comes first in the source — no order juggling, and the
   reading order is the same with or without CSS. */
@media (max-width: 980px) {
  .fbs__media {
    position: relative; width: 100%; left: auto; right: auto;
    aspect-ratio: 16 / 9;
    margin-bottom: clamp(1.8rem, 5vh, 3rem);
  }
  .fbs--right .fbs__media { right: auto; }
  /* The ramp has to land on the BAND's own navy, not on a shared one:
     #enquiry is navy-900 and #visit is navy-800, and a single gradient
     leaves a visible edge under one of them. */
  .fbs__fade {
    background: linear-gradient(180deg, rgba(6,21,41,.3) 0%, rgba(6,21,41,0) 40%,
                                rgba(6,21,41,.7) 88%, var(--navy-900) 100%);
  }
  .fbs--right .fbs__fade {
    background: linear-gradient(180deg, rgba(10,30,60,.3) 0%, rgba(10,30,60,0) 40%,
                                rgba(10,30,60,.7) 88%, var(--navy-800) 100%);
  }
  .fbs__body { grid-template-columns: 1fr; }
  .fbs__col, .fbs--right .fbs__col { grid-column: 1; }
}
@media (max-width: 560px) {
  .det { grid-template-columns: 1fr; }
  .vis__step { grid-template-columns: 2.4rem minmax(0, 1fr); }
}

/* The shared form rules in pages.css set `outline: none` on a focused
   field and rely on the border warming instead. A 1px border going from
   white-22% to molten is a real change but a thin one, and it is the only
   focus signal on the six most important controls on the site. Restored
   here, scoped to this page's form so no other page's styling moves:
   `:focus-visible` at 0,2,1 out-specifies the `:focus` rule it replaces,
   and the warmed border is kept on top of the ring rather than instead
   of it. */
#enquiry .field input:focus-visible,
#enquiry .field select:focus-visible,
#enquiry .field textarea:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-color: var(--molten);
}

/* ---------------------------------------------------------
   3 · COMMITMENT — the ledger.
   A description list on rules: the promise is the term, the
   substance is the definition. Index is a counter, not markup.
   --------------------------------------------------------- */

.ledger__lede {
  max-width: 66ch; color: var(--slate);
  margin: 0 0 clamp(1.6rem, 4vh, 2.4rem);
}

.ledger { counter-reset: ledger; margin: 0; border-top: 1px solid var(--rule-l2); }
.ledger__row {
  counter-increment: ledger;
  position: relative;
  display: grid;
  grid-template-columns: 3.4rem minmax(11ch, 20rem) minmax(0, 1fr);
  align-items: baseline;
  gap: clamp(.6rem, 2vw, 2rem);
  padding: clamp(1rem, 2.2vw, 1.5rem) 0;
  border-bottom: 1px solid var(--rule-l2);
}
.ledger__row::before {
  content: counter(ledger, decimal-leading-zero);
  font-family: var(--f-mono); font-size: var(--fs-label); letter-spacing: .16em;
  color: var(--molten-ink);
}
.ledger dt {
  font-family: var(--f-display); font-weight: 600;
  font-size: clamp(1.08rem, .98rem + .5vw, 1.45rem);
  line-height: 1.16; letter-spacing: -.018em; color: var(--ink);
}
.ledger dd { margin: 0; color: var(--slate); font-size: var(--fs-small); max-width: 52ch; }

@media (max-width: 780px) {
  .ledger__row { grid-template-columns: 2.6rem minmax(0, 1fr); row-gap: .5rem; }
  .ledger dd { grid-column: 2; }
}

/* ---------------------------------------------------------
   4 · CERTIFICATIONS — the seal rail.
   Deliberately unequal: three international standards lead at
   full size, three broader commitments sit under them at label
   scale. Divided by rules, never boxed.
   --------------------------------------------------------- */

.seals { border-top: 1px solid var(--rule-d2); }

.seals__lead { display: grid; grid-template-columns: repeat(3, 1fr); }
.seals__rest {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--rule-d);
}

.seal { padding: clamp(1.3rem, 2.8vw, 2rem) clamp(1rem, 2vw, 1.6rem) clamp(1.3rem, 2.8vw, 2rem) 0; }
.seal + .seal { border-left: 1px solid var(--rule-d); padding-left: clamp(1rem, 2vw, 1.6rem); }

.seal__kind {
  display: block; margin-bottom: .7rem;
  font-family: var(--f-mono); font-size: var(--fs-label); letter-spacing: .14em;
  text-transform: uppercase; color: var(--ember);
}
.seal h3 {
  font-family: var(--f-display); font-weight: 600;
  font-size: clamp(1.25rem, 1.05rem + .8vw, 1.85rem);
  line-height: 1.1; letter-spacing: -.022em; color: var(--white); margin: 0 0 .3rem;
}
.seal p { margin: 0; font-size: var(--fs-small); color: var(--steel); }

/* The --sm tier is GONE, 2026-08-27. It made the second row's label grey
   (--steel-dim) and its title ~1.15rem against the lead row's ~1.85rem, so
   five certifications at the SAME status read as two ranks. The client asked
   for every "In Progress" orange and one consistent size. The class is left
   off the markup rather than neutralised here. */

@media (max-width: 760px) {
  .seals__lead, .seals__rest { grid-template-columns: 1fr 1fr; }
  .seal:nth-child(2n+1) { border-left: 0; padding-left: 0; }
  .seal:nth-child(n+3) { border-top: 1px solid var(--rule-d); }
}
@media (max-width: 420px) {
  .seals__lead, .seals__rest { grid-template-columns: 1fr; }
  .seal { border-left: 0 !important; padding-left: 0 !important; }
  .seal + .seal { border-top: 1px solid var(--rule-d); }
}

/* ---------------------------------------------------------
   REDUCED MOTION — nothing left mid-flight.
   The JS branches too; these are the CSS-owned effects.
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  /* .vis__ring lived here — the locator pin's pulsing halo. Both the element
     and its keyframes went with the real map on 2026-08-08; the embed has no
     animation of its own, so this section has nothing left to switch off. */
}