/* ==========================================================================
   REPRESENTING — "THE LOCKUP"   (.strip, index.html § 02)

   Sits directly under the hero: the highest-value 200px on the page.
   History: a centred logo row, a centred two-liner with the credential in
   a gold pill, a ruled ledger row with numbered blanks, and a band fenced
   by two full-width borders (css/register-ledger.css, unlinked, kept on
   disk). The rounded-plate build between that one and this lived for a
   single revision and was overwritten rather than parked — it is in git
   and nowhere else.

   BUILT TO A REFERENCE IMAGE THE CLIENT SUPPLIED, and it is a
   simplification of everything above it. Read off the image rather than
   approximated:

     - NO PLATE AND NO BORDER. The lockup stands on the page's own ground,
       with nothing behind it but a faint warm glow. The plate before this
       gave the marks something to stand on and cost the section its
       lightness; the band under a hero should read as a line of type, not
       as a component.
     - TWO CENTRED LINES, both centred as a group rather than ranged to
       the container. Line 1: the label, then the three marks, evenly
       spaced. Line 2: the credential in a gold pill, then the categories.
     - THE LABEL IS PLAIN TRACKED TEXT, not a pill. Only the credential
       gets a pill, which is what makes it read as the one claim on the
       line rather than as a second label.
     - THE CREDENTIAL PILL CARRIES A LIT DOT before it, and the categories
       are SET UPPERCASE AND TRACKED to match it — in every build before
       this they were sentence-case body copy, which put two different
       voices on one line.

   WHAT THE GRID WAS FOR, AND WHY IT IS GONE. Every previous build ran one
   grid across both lines so the credential registered exactly under the
   label and the categories under the first mark. That was a real idea and
   it is not what the reference does: both lines are simply centred, and
   line 2 is wider than line 1. Two centred lines do not need a shared
   track system, and imposing one on them would put the pill somewhere the
   reference does not.

   WHAT IS UNCHANGED, AND MUST STAY THAT WAY:

     --pk IS THE CAP-HEIGHT CORRECTION AND IT IS NOT DECORATION. The three
     source files carry different amounts of internal whitespace, so equal
     CSS heights set the marks at three different optical sizes. Values
     are css/parity.css's, unchanged, and shared with the charter and the
     rep — if a logo file is ever re-cut, correct it in parity.css first.

     max-height AND max-width ARE OWNED HERE, NOT INHERITED.
     css/sections.css:792 still carries a `.strip__logo { max-height:
     100%; max-width: clamp(6rem, 11vw, 9rem) }` from the first strip —
     same specificity, earlier in the cascade. Both are restated below so
     this file decides them outright; the inherited max-width would cap
     the widest mark at 141px and cancel its cap-height correction at any
     viewport over about 1180. A mark that reaches max-width has silently
     lost its correction and is rendering at whatever size its file
     happens to imply, which is why the unit comes DOWN on phones rather
     than letting the cap bite.

     THE FILE-DROP SLOTS. An <img> appears the moment a file exists at
     that path, :has() retires the wordmark behind it, and onerror stands
     the word back up if the file 404s.

   THE ONE THING TO KNOW BEFORE EDITING THE COPY: the credential reads
   "Fortune 500 clients". knowledge-base.md § 2 says AT&T is on that list,
   LeafFilter and Primo Water are not, and that it is "a claim people
   check". The wording is the client's, has now been flagged four times
   and is deliberately unchanged; the singular would settle it in one
   word.

   THE GROUND IS STILL. It used to carry five moving lights: two orbs
   drifting at the edges and a breathing glow under each mark. The glows
   were centred on the band's top edge, so each one straddled the seam with
   the hero — half on the hero's black, half on the stone — and the marble
   veins cut them into what read as lit columns behind the logos. Five
   uneven lights behind three logos read as stains, not light. Now there
   is one light and one fade (see THE GROUND below), and the only motion
   left in the band is the credential's dot (9s, on brightness) and the
   gold under the hand.

   NAME CHECK: `.strip__lockup`, `.strip__fine`, `.strip__orb`,
   `.strip__glow`, `.strip__tag`, `--stpi` and `--stpu` were grepped
   across css/, js/ and every *.html before a line was written. Zero hits.
   There is no clock in js/ for this band — initStrip is a stub kept so
   the step() call has something to call, and the hover is pure :has(), so
   the whole section answers with the engine dead.
   ========================================================================== */

.strip {
  position: relative;
  padding-block: clamp(1.7rem, 1.35rem + 1.4vw, 2.75rem);
  overflow-x: clip;
  /* its own stacking context, so the two ground layers below sit behind
     the lockup and in front of the page's stone */
  isolation: isolate;
  /* the hero's last row. skyhero.js paints its sky down to #060608 and the
     sampled bottom edge runs #060607-#0A0807 across desktop, phone and the
     reduced-motion still; this is the middle of that. It is the colour
     UNDER the site grain — .grain::after lays the same noise over both
     sides, so matching the on-screen value instead would leave a step. */
  --strip-seam: 7 7 8;
  /* how far the fade reaches UP into the hero's last rows. The hero's
     bottom is not one colour on every device (a phone's sits ~3 levels
     darker), so instead of trusting a colour match the band blends the
     hero's final rows into --strip-seam: any mismatch is spread over this
     distance and can never form a line. */
  --strip-feather: 72px;
}

/* --------------------------------------------------------------------------
   THE GROUND: ONE FADE AND ONE LIGHT, BOTH STILL, BOTH INSIDE THE BAND.

   THE FADE takes the hard seam out. The hero ends in near-black and the
   page ground here is warm stone, so the band used to begin with a
   one-pixel jump from rgb(10,10,12) to rgb(26,24,18) — a ledge that made
   the band read as a slab bolted under the hero. The band now opens in
   the hero's own black and warms into the stone over its height, on an
   eased curve so there is no line where the fade stops. It also puts the
   white marks on a darker field, which is where they read best.

   THE LIGHT is a single soft pool centred on the lockup, the way a
   designer would light a row of client marks: one source, still, low. The
   ellipse touches the band's edges at zero, so nothing is cut by the hero
   above or bleeds into the section below.
   -------------------------------------------------------------------------- */
.strip::before,
.strip::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* two layers: the feather above the band's top edge (eased 0 -> 1 over
   --strip-feather, lying over the hero's last rows), then the fade down
   through the band itself. overflow-x: clip leaves the vertical overflow
   visible, so the feather is not cut. */
.strip::before {
  top: calc(var(--strip-feather) * -1);
  background:
    linear-gradient(180deg,
      rgb(var(--strip-seam) / 0) 0%,
      rgb(var(--strip-seam) / 0.12) 30%,
      rgb(var(--strip-seam) / 0.45) 60%,
      rgb(var(--strip-seam) / 0.82) 85%,
      rgb(var(--strip-seam)) 100%)
      0 0 / 100% var(--strip-feather) no-repeat,
    linear-gradient(180deg,
      rgb(var(--strip-seam)) 0%,
      rgb(var(--strip-seam) / 0.9) 12%,
      rgb(var(--strip-seam) / 0.72) 26%,
      rgb(var(--strip-seam) / 0.48) 42%,
      rgb(var(--strip-seam) / 0.26) 58%,
      rgb(var(--strip-seam) / 0.1) 76%,
      rgb(var(--strip-seam) / 0.02) 90%,
      rgb(var(--strip-seam) / 0) 100%)
      0 var(--strip-feather) / 100% calc(100% - var(--strip-feather)) no-repeat;
}

.strip::after {
  background: radial-gradient(ellipse 44% 50% at 50% 50%,
    rgb(192 156 96 / 0.09) 0%,
    rgb(192 156 96 / 0.06) 30%,
    rgb(192 156 96 / 0.03) 55%,
    rgb(192 156 96 / 0.01) 78%,
    rgb(192 156 96 / 0) 100%);
}

/* --------------------------------------------------------------------------
   TWO CENTRED LINES
   -------------------------------------------------------------------------- */
.strip__inner {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  row-gap: clamp(1.1rem, 0.85rem + 1vw, 1.75rem);
}

/* LINE 1: the label, then the three marks, evenly spaced and centred as a
   group. flex and not a grid, because the reference spaces the four
   elements by one gap rather than laying them on tracks — the marks are
   different widths and are meant to be. */
.strip__lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 0.7rem + 2.8vw, 3.5rem);
  max-width: 100%;
}

/* the label. Plain tracked text — only the credential below gets a pill,
   which is what makes the credential read as the one claim on the line. */
.strip__tag {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--vein);
  white-space: nowrap;
}

.strip__row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 0.7rem + 2.8vw, 3.5rem);
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.strip__bay {
  position: relative;
  min-width: 0;
  display: flex;
  align-items: center;
}

/* --pk IS SIZE. --po IS POSITION. THEY ARE DIFFERENT PROBLEMS AND THE
   SECOND ONE WAS NEVER SOLVED.

   --pk equalises how much INK each mark puts on the page, and it has
   always worked. What it cannot do is say where that ink sits inside the
   file, and these three marks are composed very differently. Measured as
   the centre of the densest band holding 60% of each file's ink — its
   optical centre — as a fraction of the file's own height:

       att.png           47.7%   the globe and the wordmark share a centre
       leaffilter.png    36.0%   the leaf swash fills the lower two-thirds
       primo-water.png   34.9%   "PRIMO" rides high over a small "WATER"

   All three files are trimmed to their ink on every side (checked: zero
   transparent padding), so there is no slack to take up. Aligning their
   BOXES — feet, tops or centres — therefore puts their wordmarks on three
   different lines, which is what the ragged rank showed.

   --po is the correction, in percent of each mark's own height, applied
   as a translate so it costs no layout. The values are deviations from
   the set's mean, so the rank's optical axis does not move:

       AT&T  -7.5%      LeafFilter  +5.2%      Primo  +2.6%

   Because every shift is a percentage of a height that is itself
   --stpu * --pk, all three scale together and the alignment holds at
   every viewport. Verified: all three optical centres land 3.9px above
   the row's centre, within 0.05px of each other.

   IF A LOGO FILE IS EVER RE-CUT, BOTH NUMBERS HAVE TO BE REDONE: --pk in
   css/parity.css first, then --po here. */
.strip__bay--a { --pk: 1;    --po: -7.5; --mk: url("../assets/logos/att.png"); }
.strip__bay--b { --pk: 1.1;  --po: 5.2;  --mk: url("../assets/logos/leaffilter.png"); }
.strip__bay--c { --pk: 0.78; --po: 2.6;  --mk: url("../assets/logos/primo-water.png"); }

/* one optical size for three unequal files: shared unit, per-mark --pk.
   Marks align flex-end so all three stand on one baseline whatever their
   internal padding. */
/* THE MARK BOX IS NOW THE LOGO BOX, with no padded height of its own.
   The old box was --stpu * 1.18 and clipped the logo through max-height,
   a guard against a re-cut file overflowing; the logo's height is set
   explicitly below, so there is nothing to guard — and a box that matches
   the image exactly is what lets the gold overlay sit on it.

   2.5rem, NOT 2.9. "Medium": the marks rendered 113/151/162px wide
   against a 123px label and read as the loudest thing in the band. At
   2.5rem they come to about 98/131/140 and the label holds its own. */
.strip__mark {
  position: relative;
  z-index: 1;
  display: block;
  min-width: 0;
  line-height: 0;
  --stpu: clamp(1.7rem, 1.2rem + 1.6vw, 2.5rem);
}

.strip__logo {
  display: block;
  height: calc(var(--stpu) * var(--pk, 1));
  width: auto;
  /* OWNED HERE, NOT INHERITED — see the header. */
  max-width: 100%;
  object-fit: contain;
  /* the optical correction. A translate, so it costs no layout and the
     rank's height is still set by the tallest mark. */
  transform: translateY(calc(var(--po, 0) * 1%));
  /* reversed to flat white: two of the three source marks are dark ink,
     invisible on obsidian. 0.9 rather than the 0.82 the bordered band
     used — with no plate behind them the marks carry the line on their
     own and 0.82 reads as switched off. */
  filter: brightness(0) invert(1);
  opacity: 0.9;
  transition: opacity 0.45s var(--ease-out), filter 0.45s var(--ease-out);
}

/* THE MARK STRUCK IN GOLD, WHICH IS THE HOVER THAT WAS ASKED FOR. The
   logo files are flat art, so the white version is `brightness(0)
   invert(1)`, and a filter chain CANNOT be tinted to an exact colour —
   landing on #C09C60 takes a stack of six guessed percentages that nobody
   can maintain or re-derive. This is the honest way: a gold-filled box
   MASKED BY THE LOGO'S OWN ALPHA, so the shape is the mark exactly and
   the colour is the palette's rather than an approximation of it.

   `mask-size: 100% 100%` works because the mark box is now the image box
   — see the note there. It rides the same --po translate as the logo
   under it, or the gold would sit where the white one used to.

   GUARDED ON THE FILE EXISTING. With no logo file the wordmark fallback
   stands up instead, and a mask whose url 404s is no mask at all — which
   would paint a solid gold rectangle over the word. */
.strip__gold {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(140deg,
    var(--gold-light) 0%,
    var(--gold) 52%,
    var(--gold-shadow) 100%);
  -webkit-mask-image: var(--mk);
  mask-image: var(--mk);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transform: translateY(calc(var(--po, 0) * 1%));
  transition: opacity 0.45s var(--ease-out);
}
.strip__mark:not(:has(.strip__logo)) .strip__gold { display: none; }

/* the typeset fallback, sized against the mark unit so a missing file
   does not leave a word half the height of the marks beside it */
.strip__word {
  font-size: clamp(1.15rem, 0.95rem + 0.7vw, 1.6rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
  opacity: 0.9;
  transition: opacity 0.45s var(--ease-out);
}
.strip__mark:has(.strip__logo) .strip__word { display: none; }

/* THE HAND, AND NOTHING ELSE IN THE BAND. Pure :has() — it answers with
   the engine dead, under reduced motion and with JS off, which is the
   whole reason the clock could be deleted without losing a state. */
@media (hover: hover) and (pointer: fine) {
  .strip__row:has(.strip__bay:hover) .strip__logo,
  .strip__row:has(.strip__bay:hover) .strip__word { opacity: 0.4; }
  .strip__bay:hover .strip__logo { opacity: 1; }
  /* the mark goes gold under the hand, and takes a soft bloom with it */
  .strip__bay:hover .strip__gold {
    opacity: 1;
    filter: drop-shadow(0 0 16px rgb(184 145 88 / 0.5));
  }
  .strip__bay:hover .strip__word { opacity: 1; color: var(--gold-light); }
}

/* --------------------------------------------------------------------------
   LINE 2: the credential and the categories, centred as a group.
   -------------------------------------------------------------------------- */
.strip__fine {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(0.8rem, 0.6rem + 0.8vw, 1.5rem);
  max-width: 100%;
}

/* THE ONE PILL ON THE PAGE'S QUIETEST BAND, and it earns it: this is the
   only claim in the section. Gradient hairline rather than a flat gold
   border, and a lit dot in front of it, which is what the reference
   draws. */
.strip__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background:
    linear-gradient(rgb(30 27 21 / 0.72), rgb(23 21 15 / 0.72)) padding-box,
    linear-gradient(110deg, rgb(184 145 88 / 0.62), rgb(184 145 88 / 0.18) 72%, rgb(214 206 196 / 0.08)) border-box;
  backdrop-filter: blur(8px);
  /* 12px, not 11. Measured against the reference: there line 2 is the
     WIDER of the two lines and line 1 sits inside it; at 11px this line
     came out 635px against line 1's 689 and the balance inverted, which
     reads as a caption under a logo row rather than as the second half of
     a lockup. */
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-light);
  white-space: nowrap;
}

.strip__badge::before {
  content: "";
  flex: none;
  width: 0.42rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--gold-light);
  box-shadow: 0 0 10px -1px rgb(184 145 88 / 0.9);
  animation: stp-dot 9s ease-in-out infinite alternate;
}

@keyframes stp-dot {
  from { opacity: 0.6; }
  to   { opacity: 1; }
}

/* SET UPPERCASE AND TRACKED TO MATCH THE PILL BESIDE IT. In every build
   before this one these were sentence-case body copy at 13px, which put
   two different voices on one line — a tracked gold credential and a
   paragraph. The reference sets them as one line of the same voice, and
   it is right. */
.strip__cats {
  margin: 0;
  min-width: 0;
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vein);
  text-wrap: pretty;
  /* centred like everything else in the lockup: on a phone this wraps to
     two lines under the pill and used to hang ranged-left */
  text-align: center;
}

/* --------------------------------------------------------------------------
   NARROW. Nothing has to turn: both lines are centred flex rows that wrap
   on their own. The only thing that has to move is the mark unit, and it
   moves for a measured reason.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .strip__lockup { gap: clamp(1.1rem, 0.5rem + 2.4vw, 2.2rem); }
  .strip__row { gap: clamp(1.1rem, 0.5rem + 2.4vw, 2.2rem); }
}

@media (max-width: 620px) {
  /* THE UNIT COMES DOWN RATHER THAN LETTING max-width BITE. A mark that
     reaches max-width has silently lost its cap-height correction and is
     rendering at whatever size its file happens to imply. Primo is the
     binding mark, not the widest-looking one: 480x106 at --pk 0.78 is
     3.53 units wide, against LeafFilter's 3.28 and AT&T's 2.46. At 375
     the three marks and their two gaps have to fit 335px of container,
     so 9.27 units + 2 gaps <= 335; at a 17.6px gap that is unit <= 32.3,
     and the ramp below lands on 24px with the label wrapping to its own
     line above. */
  .strip__mark { --stpu: clamp(1.25rem, 0.85rem + 2.1vw, 1.85rem); }
  .strip__lockup { gap: clamp(0.9rem, 0.5rem + 2vw, 1.6rem); }
  .strip__row { gap: clamp(0.9rem, 0.5rem + 2vw, 1.6rem); }
  .strip__tag { padding-bottom: 0; }
  .strip__cats { letter-spacing: 0.12em; }
}

/* --------------------------------------------------------------------------
   REDUCED MOTION. Every clock stops; the lockup is finished without them,
   and the hover ramps are stilled with it.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .strip__badge::before { animation: none; }
  .strip__logo,
  .strip__gold,
  .strip__word { transition: none; }
}