/* ==========================================================================
   BUSINESS TO BUSINESS — "THE ROOM"   (.b2b, index.html § 03)

   Second pass. The first built the method as one panel with the
   photograph bleeding to its left edge and three bays of type beside it,
   and the verdict was that it still read as text next to a picture. It
   did, and the reason is worth writing down rather than restyling around:
   TWO THINGS SIDE BY SIDE IN ONE RECTANGLE IS A COLUMN LAYOUT, however
   the rectangle is finished. Rounding it, lighting it and giving it a
   gradient does not change the relationship between its two halves.

   WHAT CHANGES A RELATIONSHIP IS OVERLAP. The picture is now a full-width
   letterbox band and the three capabilities are three glass cards PULLED
   UP INTO IT — inset from the container, standing on the band's lower
   third, casting onto it. Nothing is beside anything: there is a
   photograph, and there are three objects sitting on the photograph. That
   is a composition rather than an arrangement, and it is the shape this
   page does not have anywhere else.

   THE REGISTER IS THE CLIENT'S TWO REFERENCES, read off the live pages
   and translated to gold on stone:

     flowstatecreative.org — radial accent orbs at 6-14% alpha; the
     numbered step badge that punches through what it sits on with a ring
     of the page's own ground as a box-shadow; the cursor-following glow
     inside a panel (`tc-cursor-glow`, a 280px radial that tracks the
     pointer); pill CTAs and gradient-filled marks.

     credenceinnovations.org — rounded photo plates at 18px radius with a
     1px light border, and small translucent pill labels sitting ON the
     photograph rather than under it.

   THREE THINGS HERE ARE NEW TO THIS SITE and are what make the section
   read as built rather than laid out:

     1. GRADIENT HAIRLINE BORDERS. The cards take their border from a
        gradient rather than a flat colour — `padding-box` for the fill,
        `border-box` for the gradient — so the edge is bright gold where
        the light falls on it and neutral where it does not. A flat 1px
        border at 14% is what every generated card on the web has.
     2. THE CURSOR GLOW. A gold radial inside the band that follows the
        pointer, driven by --b2mx/--b2my from js/motion.js. It is the only
        pointer handler in this section and the only thing on the page
        that answers to where the reader's hand is rather than what it is
        over.
     3. THE CARDS ARE GLASS. backdrop-filter over a photograph, which is
        the one place on this site where glass is honest: there is
        something real behind it to blur.

   THE PHOTOGRAPH IS meeting.jpg, THE ONLY UNUSED BOARDROOM FILE ON DISK.
   boardroom.jpg is in the fold immediately above this section and
   handshake.jpg is in the resolve below it; repeating either inside one
   screen of scroll reads as a stock library running out. READ OFF THE
   FILE, not assumed: 1376x768 (1.79), three figures at x 27-72% backlit
   by an arched window at x 32-65%, heads on the 43-50% line and the table
   filling 65-90%. The band is 3.6:1, so `cover` crops the HEIGHT and
   keeps 1.79/3.6 = 49.7% of it; centred at the 44% the object-position
   holds, that is y 19.2-68.8% — the window arch, all three heads, and the
   near edge of the table. Anyone swapping the file has to redo that
   arithmetic.

   AND THE EXPOSURE IS 0.96, NOT THE 0.84 THE OTHER PLATES ON THIS PAGE
   USE. Those hold down bright daylight photographs so the hand has
   somewhere to lift them to. This frame is already a backlit silhouette —
   its subjects ARE shadow — and 0.84 under a scrim took it to a black
   rectangle.

   "HUMAN-SIZE, NOT AN AI-GENERATED VIBE" is the standing note, and what
   makes a page read as generated is symmetry plus decoration. So: the two
   head columns are deliberately unequal (0.86fr / 1fr — a four-word
   display line should sit at the width it wants, not be stretched to
   match the paragraph beside it); the cards are inset from the container
   rather than flush with it; the sign-off has no container at all; and
   there is not one icon in the section.

   THE SECTION IS ALIVE AT REST. Eight clocks, all long, all out of phase,
   not one of them travelling toward a full state:

     orb A     24s   drifts and swells behind the address
     orb B     32s   the same, out of phase, under the band
     photo     20s   the picture breathes
     aura      17s   the glow the band sits in rises and falls
     card x3   13s   a soft light inside each card, staggered 4.3s
     sheen      9s   the metallic word in the heading, on brightness

   AND THE SECTION IS BUILT ON SCROLL, ON TWO NUMBERS OF DIFFERENT KINDS:

     --b2p  the ENTRANCE, and it arrives. The address and the band rise,
            the three cards LAND one after another (see the card for the
            physics), the badges seat themselves, the room comes out of
            its scrim and the chip arrives last at 0.7.

     --b2s  the PASSAGE, -1 to +1 over the whole time the section is on
            screen, never arriving. The band drifts down, the rank drifts
            up, and the overlap between them — the entire idea of the
            composition — opens about 48px wider as the reader goes past.
            The two orbs separate behind it and the aura lags the band it
            lights.

   ONE OWNER PER PROPERTY, AND THE CARDS BROKE TWO WAYS WITHOUT IT.

   The scrub and the hand both wrote `transform`. The hand's rule was
   `transform: translate3d(0, -6px, 0)`, a whole-value override, so
   hovering a card while the section was still entering DISCARDED its
   scrub position and snapped it to its final place — and dropped it back
   on mouse-out. Half an entrance is not recoverable from a hover.

   And `transition: transform 0.5s` sat over a transform the scrub was
   feeding. A scrub writes a new value every frame; a transition answers
   each one by starting a fresh half-second ease toward it. The card can
   then only ever trail the scroll, and the file's own rule — no property
   owned by both a tween and a transition — exists to stop precisely that.

   So the scrub owns `transform`, `box-shadow` and `opacity`, none of them
   transitioned; the hand owns `translate` and the inner light on ::after,
   both carrying literal values at both ends, both transitioned. They
   compose, they never overwrite each other, and either can run mid-way
   through the other. Swapping them puts both faults back.

   NOTHING SWEEPS, FILLS, COUNTS OR RUNS OUT. Standing constraint on this
   page — three times a scrubbed element that travelled toward a full
   state has been read as a loading bar. The cursor glow is exempt because
   it goes where the reader puts it; it is not going anywhere on its own.

   REST IS THE FINISHED SECTION. --b2p initial-value 1 and --b2s 0, so
   with no JS, a dead CDN or reduced motion everything is at full key with
   the cards landed and the depth field settled; only the cursor glow is
   missing.

   NAME CHECK: `.b2b*`, `--b2*`, `data-btb` and `initBTB` were grepped
   across css/, js/ and every *.html before a line was written. Zero hits.
   (`initRoom` was NOT free — it is the page-lamp module near the foot of
   js/motion.js — which is why this one is initBTB.)
   ========================================================================== */

/* the section's scrub clock. 1 = everything at full key. */
@property --b2p { syntax: "<number>"; inherits: true; initial-value: 1; }
/* the photograph's breath */
@property --b2b { syntax: "<number>"; inherits: true; initial-value: 0; }
/* the pointer, in px within the band. Registered so it interpolates
   rather than jumping when the pointer re-enters somewhere else. */
@property --b2mx { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --b2my { syntax: "<length>"; inherits: true; initial-value: 0px; }
/* THE PASSAGE. -1 with the section's top still at the foot of the window,
   0 as it crosses the middle, +1 as it leaves over the top. It is not an
   entrance and it never arrives — it is only ever passing through 0.

   IT IS THE SECTION'S OWN ARGUMENT, MOVING. The whole composition is one
   claim: there is a photograph, and there are three objects STANDING ON
   IT. At rest that is stated by a negative margin, which is a fact about
   the layout. On the passage the band drifts down while the rank drifts
   up, so the overlap DEEPENS by about 48px as the section crosses the
   screen — the cards visibly settle onto the room rather than being
   found already sitting there. Nothing else in the section moves far
   enough to notice; this is the one relationship that changes. */
@property --b2s { syntax: "<number>"; inherits: true; initial-value: 0; }

.b2b {
  position: relative;
  padding-block: clamp(2.4rem, 1.7rem + 2.8vw, 4.2rem);
  /* the orbs hang off both edges; nothing may push the document sideways.
     Vertical is left alone so the band's shadow can fall into the
     section's own padding. */
  overflow-x: clip;

  /* the local rounding, declared once and equal in value to --asyr
     (css/assay.css), --trpr (css/triptych.css) and --insr
     (css/inscription.css) so the sections in this register agree.
     --radius-md is 3px and is the site's editorial scale; not used here. */
  --b2r: clamp(0.9rem, 0.6rem + 0.9vw, 1.4rem);

  /* how far the depth field travels — one multiplier on every parallax in
     the file. Cut once the rank stops lapping the band at 720, where
     there is no overlap left for the passage to deepen. */
  --b2d: 1;
}

/* --------------------------------------------------------------------------
   THE GROUND
   -------------------------------------------------------------------------- */
.b2b__orb {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform, opacity;
}

.b2b__orb--a {
  width: clamp(19rem, 33vw, 37rem);
  aspect-ratio: 1;
  top: -14%;
  right: -12%;
  background: radial-gradient(circle, rgb(184 145 88 / 0.13) 0%, rgb(184 145 88 / 0) 68%);
  animation: b2b-drift-a 24s ease-in-out infinite alternate;
  /* the passage, on `translate` rather than `transform`: the drift clock
     owns `transform`, and the individual transform properties COMPOSE
     with it instead of overwriting it. */
  translate: 0 calc(var(--b2s) * var(--b2d) * -2.4rem);
}

.b2b__orb--b {
  width: clamp(16rem, 27vw, 30rem);
  aspect-ratio: 1;
  left: -12%;
  bottom: -12%;
  background: radial-gradient(circle, rgb(143 109 56 / 0.13) 0%, rgb(143 109 56 / 0) 70%);
  animation: b2b-drift-b 32s ease-in-out infinite alternate;
  /* the far orb goes the other way. Two grounds separating as the section
     crosses the screen is the depth. */
  translate: 0 calc(var(--b2s) * var(--b2d) * 3.2rem);
}

@keyframes b2b-drift-a {
  from { transform: translate3d(0, 0, 0) scale(1); opacity: 0.72; }
  to   { transform: translate3d(-4%, 5%, 0) scale(1.11); opacity: 1; }
}
@keyframes b2b-drift-b {
  from { transform: translate3d(0, 0, 0) scale(1.09); opacity: 1; }
  to   { transform: translate3d(4%, -4%, 0) scale(1); opacity: 0.68; }
}

/* --------------------------------------------------------------------------
   THE ADDRESS. Claim left, argument and promise right, at 0.86fr / 1fr.
   -------------------------------------------------------------------------- */
.b2b__address {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1fr);
  column-gap: clamp(2rem, 1.2rem + 3vw, 4.5rem);
  align-items: start;
  margin-bottom: clamp(1.6rem, 1.2rem + 2vw, 2.8rem);
  transform: translate3d(0, calc((1 - var(--b2p)) * 14px), 0);
  opacity: calc(0.16 + var(--b2p) * 0.84);
}

.b2b__claim { min-width: 0; }
.b2b__arg { min-width: 0; }

/* THE TWO COLUMNS HAVE TO START ON THE SAME LINE, AND THEY DID NOT.
   Measured at 1280: the right column's first paragraph box began at the
   address's own top (42.4) and the eyebrow began at 50 — 7.6px lower — so
   the label read as sagging against the paragraph beside it.

   The cause is not a margin. `.eyebrow` is `display: inline-flex`
   site-wide, so inside a block it is an INLINE-LEVEL box: the browser
   wraps it in an anonymous line box, gives that box a strut from the
   parent's own font and line-height, and sits the eyebrow on the strut's
   BASELINE. The gap above it is the strut's ascent, and it is invisible
   in the markup.

   Making it block-level here removes the line box and the strut with it,
   so the eyebrow's own top is the column's top. `width: fit-content`
   keeps it shrink-wrapped, exactly as inline-flex had it. Scoped to this
   section: `.eyebrow` is used on every section of the site and several of
   them sit it in a line box on purpose. */
.b2b__claim .eyebrow {
  display: flex;
  width: fit-content;
  /* AND 3px BACK DOWN, which is the residual half-leading. Two lines of
     different size never share a cap-line just because their boxes share
     a top: the space above the glyphs is (line-height - font-size)/2 plus
     the font's own ascender-to-cap gap, and both terms scale with the
     font. For Inter at these sizes:

       eyebrow  (20.4 - 12)/2   + 0.242*12   = 7.10px above the caps
       body     (28.5 - 17.6)/2 + 0.242*17.6 = 9.72px above the caps

     a 2.6px difference, measured at 3.0. It is a constant rather than a
     calc because --text-xs is a FIXED 12px site-wide and the body size
     only travels 15.7-17.6px, which moves this by about 0.3px across the
     whole range — checked at 1280, 1040 and 900. */
  margin-top: 3px;
}

.b2b__h {
  margin: 0;
  font-size: clamp(1.95rem, 1.4rem + 2.5vw, 3.4rem);
  font-weight: 600;
  letter-spacing: -0.038em;
  line-height: 1.05;
  text-wrap: balance;
  max-width: 13ch;
}

/* the metallic word. Static gradient, breath on brightness — a gradient
   that slides its own background-position is a highlight travelling
   across a word, and travelling highlights are what this page has
   repeatedly been told to stop doing. */
.b2b__h em {
  font-style: italic;
  font-weight: 500;
  background: linear-gradient(104deg,
    var(--gold-light) 0%,
    var(--gold) 46%,
    var(--gold-shadow) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: b2b-sheen 9s ease-in-out infinite alternate;
}

@keyframes b2b-sheen {
  from { filter: brightness(0.94); }
  to   { filter: brightness(1.12); }
}

.b2b__p {
  margin: 0;
  max-width: 56ch;
  font-size: clamp(0.98rem, 0.92rem + 0.3vw, 1.1rem);
  line-height: 1.62;
  color: var(--vein);
  text-wrap: pretty;
}
.b2b__p + .b2b__p { margin-top: clamp(0.65rem, 0.52rem + 0.45vw, 0.95rem); }

/* THE PROMISE. The one line in the address that is a commitment rather
   than a description, so it is the one line that gets an object of its
   own: a glass chip with a gradient hairline and the closing two words in
   gold. It was plain ink on a rule in the first pass and it disappeared
   into the paragraph above it. */
.b2b__promise {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin: clamp(1rem, 0.8rem + 0.8vw, 1.5rem) 0 0;
  padding: 0.6rem 1.1rem;
  border-radius: 50px;
  border: 1px solid transparent;
  background:
    linear-gradient(rgb(30 27 21 / 0.9), rgb(23 21 15 / 0.9)) padding-box,
    linear-gradient(104deg, rgb(184 145 88 / 0.55), rgb(184 145 88 / 0.12) 62%, rgb(214 206 196 / 0.1)) border-box;
  font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.15rem);
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.3;
  color: var(--ink);
}

.b2b__promise::before {
  content: "";
  flex: none;
  width: 0.5rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-light), var(--gold-shadow));
  box-shadow: 0 0 12px -2px rgb(184 145 88 / 0.8);
}

/* The sentence is one inline run inside the pill (index.html wraps it in a
   span), so on a phone it wraps as a sentence instead of splitting into two
   flex columns - and the gold clause moves down whole rather than breaking
   in the middle. Where the pill holds one line, the beat the old flex gap
   gave before the gold clause is kept as a margin: the space plus this is
   the same 12px it was. On a phone it would indent the second line. */
@media (min-width: 481px) {
  .b2b__promise em { margin-left: 0.45rem; }
}
.b2b__promise em {
  white-space: nowrap;
  font-style: normal;
  background: linear-gradient(120deg, var(--gold-light), var(--gold-shadow));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* --------------------------------------------------------------------------
   THE BAND. A full-width letterbox of the room, with the section's aura
   under it and the pointer's own light inside it.
   -------------------------------------------------------------------------- */
.b2b__stage {
  position: relative;
  z-index: 1;
}

.b2b__aura {
  position: absolute;
  z-index: 0;
  inset: -16% -8%;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(48% 58% at 26% 36%, rgb(184 145 88 / 0.26), rgb(184 145 88 / 0) 70%),
    radial-gradient(46% 56% at 78% 70%, rgb(143 109 56 / 0.22), rgb(143 109 56 / 0) 72%);
  animation: b2b-glow 17s ease-in-out infinite alternate;
  /* the glow lags the band it lights — a light source that is not stuck
     to the thing in front of it */
  translate: 0 calc(var(--b2s) * var(--b2d) * 2.6rem);
}

@keyframes b2b-glow {
  from { opacity: 0.5; transform: scale(0.96); }
  to   { opacity: 1;   transform: scale(1.04); }
}

.b2b__band {
  position: relative;
  z-index: 1;
  margin: 0;
  /* 3.6:1. The crop arithmetic in the header is written for 3.4; at 3.6
     `cover` keeps 1.79/3.6 = 49.7% of the height, which centred at 44%
     is y 19.2-68.8% — still the arch, all three heads and the near edge
     of the table, with about 2% less table. */
  aspect-ratio: 36 / 10;
  border-radius: var(--b2r);
  overflow: hidden;
  background: var(--surface);
  box-shadow:
    0 34px 78px -34px rgb(0 0 0 / 0.7),
    0 0 0 1px rgb(184 145 88 / 0.16),
    inset 0 1px 0 rgb(255 255 255 / 0.05);
  transform: translate3d(0, calc((1 - var(--b2p)) * 20px), 0);
  opacity: calc(0.1 + var(--b2p) * 0.9);
  /* the room falls BEHIND the page on the passage; the rank rises against
     it. `transform` is the entrance's, `translate` is the passage's — one
     owner per property, which is the rule this file now keeps
     everywhere. */
  translate: 0 calc(var(--b2s) * var(--b2d) * 1.6rem);
}

.b2b__band img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 44%;
  filter: brightness(0.96) saturate(0.98);
  transform: scale(calc(1.03 + var(--b2b) * 0.028));
  animation: b2b-breathe 20s ease-in-out infinite alternate;
  transition: filter 0.55s var(--ease-out);
}

@keyframes b2b-breathe {
  from { --b2b: 0; }
  to   { --b2b: 1; }
}

/* the scrim. Weighted to the bottom, where the cards stand, and to the
   left, where the chip sits. */
.b2b__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* THE ROOM COMES OUT OF THE SCRIM AS IT LANDS. Fully weighted while the
     band is still rising, easing back by a sixth once it has settled, so
     the photograph resolves rather than simply appearing. The scrub owns
     it, so it carries no transition. */
  opacity: calc(0.84 + (1 - var(--b2p)) * 0.16);
  background:
    linear-gradient(0deg,
      rgb(var(--scrim-rgb) / 0.72) 0%,
      rgb(var(--scrim-rgb) / 0.28) 34%,
      rgb(var(--scrim-rgb) / 0) 62%),
    linear-gradient(96deg,
      rgb(var(--scrim-rgb) / 0.42) 0%,
      rgb(var(--scrim-rgb) / 0) 44%);
}

/* THE POINTER'S OWN LIGHT. Flowstate's move. --b2mx/--b2my are written by
   js/motion.js on pointermove and are registered as <length>, so a
   pointer that leaves one edge and re-enters at another EASES across
   instead of teleporting. With no script it never gets a position and
   never becomes visible, which is why its opacity is gated on a class the
   script adds rather than on hover alone. */
.b2b__cursor {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: clamp(14rem, 22vw, 24rem);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle,
    rgb(214 180 120 / 0.22) 0%,
    rgb(184 145 88 / 0.1) 38%,
    rgb(184 145 88 / 0) 70%);
  transform: translate3d(calc(var(--b2mx) - 50%), calc(var(--b2my) - 50%), 0);

  transition: opacity 0.5s var(--ease-out), --b2mx 0.28s linear, --b2my 0.28s linear;
}

.b2b__stage.is-tracking .b2b__cursor { opacity: 1; }

/* THE CHIP. Credence's move: a small translucent label sitting ON the
   photograph rather than under it. It carries the copy's own sub-head. */
.b2b__chip {
  /* THE CHIP IS THE LAST THING IN, on its own window at the end of the
     entrance: it is a label ON the photograph, and a label cannot arrive
     before the thing it labels has settled. In from the band's left edge,
     which is the edge it sits against. */
  --b2c: clamp(0, calc((var(--b2p) - 0.7) / 0.26), 1);

  position: absolute;
  z-index: 3;
  top: clamp(0.9rem, 0.7rem + 0.8vw, 1.4rem);
  left: clamp(0.9rem, 0.7rem + 0.8vw, 1.4rem);
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0;
  padding: 0.42rem 0.9rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background:
    linear-gradient(rgb(23 21 15 / 0.72), rgb(23 21 15 / 0.72)) padding-box,
    linear-gradient(120deg, rgb(184 145 88 / 0.5), rgb(184 145 88 / 0.12)) border-box;
  backdrop-filter: blur(8px);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--gold-light);
  opacity: var(--b2c);
  translate: calc((1 - var(--b2c)) * -18px) 0;
}

.b2b__chip::before {
  content: "";
  flex: none;
  width: 1.6rem;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gold-light), var(--gold-shadow));
}

/* --------------------------------------------------------------------------
   THE RANK. Three glass cards standing on the band's lower third. The
   negative margin is the whole idea — see the header.
   -------------------------------------------------------------------------- */
.b2b__rank {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* two shared rows: the head line (badge + title) and the sentence, so
     the three sentences start on one line however the titles above them
     wrap */
  grid-template-rows: auto auto;
  gap: clamp(0.7rem, 0.5rem + 0.9vw, 1.25rem);
  /* THE OVERLAP IS THE IDEA, SO IT HAS TO BE DEEP ENOUGH TO READ AS ONE.
     At -61px the cards looked like they had slipped rather than been
     placed; at -101 (1280) roughly half of a 195px card stands on the
     photograph and the rest hangs below it, which is unmistakably
     deliberate. It also takes 40px off a section that was measuring
     1008px — the tallest on the page, in third position. */
  margin: calc(-1 * clamp(3.2rem, 2rem + 5.4vw, 8rem))
          clamp(0.5rem, 0.2rem + 2.4vw, 3rem) 0;
  padding: 0;
  list-style: none;
  /* AND THE RANK RISES AGAINST IT. Band down 1.6rem, rank up 1.4rem: the
     overlap opens about 48px wider across the passage, so the three cards
     sink into the photograph as the reader goes past. This is the only
     number in the section chosen to change a RELATIONSHIP rather than a
     position. */
  translate: 0 calc(var(--b2s) * var(--b2d) * -1.4rem);
}

.b2b__card {
  --b2q: clamp(0, calc((var(--b2p) - 0.16 - var(--b2i) * 0.11) / 0.3), 1);
  position: relative;
  grid-row: span 2;
  display: grid;
  grid-template-rows: subgrid;
  min-width: 0;
  padding: clamp(1rem, 0.8rem + 0.9vw, 1.5rem);
  border-radius: calc(var(--b2r) * 0.86);
  overflow: hidden;
  /* GLASS, AND IT IS HONEST HERE: there is a photograph behind it to
     blur. The border is a gradient rather than a flat colour — bright
     gold where the light falls on the card, neutral where it does not. */
  border: 1px solid transparent;
  background:
    linear-gradient(168deg, rgb(31 28 22 / 0.86), rgb(21 19 14 / 0.9)) padding-box,
    linear-gradient(148deg,
      rgb(184 145 88 / 0.52) 0%,
      rgb(184 145 88 / 0.1) 44%,
      rgb(214 206 196 / 0.08) 100%) border-box;
  backdrop-filter: blur(14px) saturate(1.1);

  /* THE LANDING, AND IT IS THE SECTION'S ONE PIECE OF PHYSICS.

     An object far from a surface throws a big, soft, faint shadow; an
     object touching it throws a small, tight, dark one. In flight the
     card's shadow is 52px down, 82px wide and 38% black. Landed it is
     22px down, 48px wide and 72% black. Nothing about the card's
     appearance says "arriving" except this — it is what makes three
     panels reaching their final position read as three objects BEING SET
     DOWN ON A PHOTOGRAPH, which is the only claim the composition makes.

     The rise is 26px and the card comes in a hair under size. Both close
     with --b2q, so the settled state is the drawn one. */
  box-shadow:
    0 calc(22px + (1 - var(--b2q)) * 30px)
      calc(48px + (1 - var(--b2q)) * 34px)
      calc(-26px + (1 - var(--b2q)) * 10px)
      rgb(0 0 0 / calc(0.72 - (1 - var(--b2q)) * 0.34));
  transform:
    translate3d(0, calc((1 - var(--b2q)) * 26px), 0)
    scale(calc(0.972 + var(--b2q) * 0.028));
  opacity: calc(0.1 + var(--b2q) * 0.9);

  /* ONE OWNER PER PROPERTY. `transform` and `box-shadow` above are the
     SCRUB'S and carry no transition; `translate` below is THE HAND'S,
     carries literal values at both ends, and does. See the head of this
     file for the two faults that sharing `transform` caused — a hover
     that discarded the entrance, and a half-second ease restarted on
     every scrubbed frame. */
  transition: translate 0.5s var(--ease-out);
  translate: 0 0;
}
.b2b__card:nth-child(1) { --b2i: 0; }
.b2b__card:nth-child(2) { --b2i: 1; }
.b2b__card:nth-child(3) { --b2i: 2; }

/* a soft light inside each card, on its own clock. The delay comes from
   the card's index so the three are never in step — three lights pulsing
   together would read as a mechanism rather than as light. */
.b2b__card::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -34%;
  left: -14%;
  width: 62%;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgb(184 145 88 / 0.2) 0%, rgb(184 145 88 / 0) 68%);
  animation: b2b-card 13s ease-in-out infinite alternate;
  animation-delay: calc(var(--b2i) * -4.3s);
}

@keyframes b2b-card {
  from { transform: scale(0.86); opacity: 0.5; }
  to   { transform: scale(1.16); opacity: 1; }
}

/* THE HAND'S LIGHT, and it is INSIDE the glass rather than around it.
   The card is overflow: hidden, so this is clipped to its own shape — a
   sheet of light coming up through the panel from its lower edge, which
   is what a piece of glass being picked up off a lit surface does. An
   outer glow would have needed box-shadow, and box-shadow is the scrub's
   (see the card). */
.b2b__card::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(340deg,
    rgb(184 145 88 / 0.2) 0%,
    rgb(184 145 88 / 0.06) 38%,
    rgb(184 145 88 / 0) 68%);
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
}

/* the head line: the badge and the title on one baseline */
.b2b__line {
  position: relative;
  z-index: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: clamp(0.7rem, 0.55rem + 0.5vw, 1rem);
}

/* THE BADGE. Flowstate's step mark: a gradient-filled disc with a ring of
   the page's own ground around it, so it reads as punched through the
   card rather than printed on it. */
.b2b__badge {
  flex: none;
  display: grid;
  place-items: center;
  width: clamp(2.2rem, 1.8rem + 1vw, 2.75rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-light), var(--gold-shadow));
  /* THE RING OF GROUND CONTRACTS AS THE CARD LANDS. The badge's whole
     trick is that it reads as PUNCHED THROUGH the card rather than
     printed on it, and the ring of the page's own colour around it is
     what does that. Wide while the card is in flight, closing to 4px as
     it settles: the badge seats itself into the card at the moment the
     card seats itself onto the photograph. No transition — the scrub
     owns it. */
  box-shadow:
    0 0 0 calc(4px + (1 - var(--b2q)) * 7px) rgb(23 21 15 / 0.6),
    0 0 20px -6px rgb(184 145 88 / 0.7);
  font-size: clamp(0.7rem, 0.62rem + 0.24vw, 0.82rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
  font-style: normal;
  color: var(--obsidian);
}

.b2b__t {
  margin: 0;
  min-width: 0;
  font-size: clamp(1rem, 0.9rem + 0.42vw, 1.22rem);
  font-weight: 600;
  letter-spacing: -0.024em;
  line-height: 1.22;
  color: var(--ink);
  text-wrap: balance;
  transition: color 0.45s var(--ease-out);
}

.b2b__s {
  position: relative;
  z-index: 1;
  grid-row: 2;
  margin: clamp(0.6rem, 0.5rem + 0.4vw, 0.9rem) 0 0;
  font-size: clamp(0.875rem, 0.845rem + 0.14vw, 0.95rem);
  line-height: 1.55;
  color: var(--vein);
  text-wrap: pretty;
  transition: color 0.45s var(--ease-out);
}

/* --------------------------------------------------------------------------
   THE SIGN-OFF. No panel, no border, no rule. Every other block in this
   section is inside something; this one is not, which is what makes it
   read as the section speaking rather than as one more item.
   -------------------------------------------------------------------------- */
.b2b__signoff {
  position: relative;
  z-index: 1;
  margin: clamp(1.6rem, 1.2rem + 1.8vw, 2.6rem) 0 0;
  max-width: 46ch;
  font-size: clamp(1.1rem, 0.98rem + 0.6vw, 1.55rem);
  font-weight: 500;
  letter-spacing: -0.026em;
  line-height: 1.42;
  color: var(--ink);
  text-wrap: pretty;
  opacity: clamp(0.22, calc((var(--b2p) - 0.5) * 2.6), 1);
}

.b2b__signoff em {
  font-style: normal;
  background: linear-gradient(104deg, var(--gold-light), var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* --------------------------------------------------------------------------
   THE HAND
   -------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  /* THE HAND OWNS `translate` AND THE INNER LIGHT. It used to set
     `transform` outright, so hovering a card mid-entrance discarded its
     scrub position and snapped it to its final place. The lift is the
     same 6px it always was, just written on a property the scrub does not
     touch, so the two compose instead of fighting. */
  /* THE LIFT IS `translate` AND THE ANSWER IS INSIDE THE GLASS. A deeper
     drop under the lifted card would have to be box-shadow, which the
     scrub owns, or `filter` — and `filter` on this card is the one thing
     that could disturb its backdrop-filter, which is the section's whole
     "the cards are glass" move. Not worth spending the glass on a shadow:
     the panel rises and lights from within instead. */
  .b2b__card:hover { translate: 0 -6px; }
  .b2b__card:hover::after { opacity: 1; }
  .b2b__card:hover .b2b__t { color: var(--white); }
  .b2b__card:hover .b2b__s { color: var(--ink); }

  /* the room comes up with whichever capability is being read */
  .b2b__stage:has(.b2b__card:hover) .b2b__band img { filter: brightness(1.1) saturate(1.04); }
}

/* --------------------------------------------------------------------------
   NARROW. The address stacks at 900. The rank drops to one column at 720
   and stops overlapping the band, because three cards standing on a band
   that is itself only 200px tall is not an overlap, it is a collision.
   -------------------------------------------------------------------------- */
@media (max-width: 1040px) {
  .b2b__address { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr); }
  .b2b__band { aspect-ratio: 3 / 1; }
}

@media (max-width: 900px) {
  .b2b { --b2d: 0.6; }
  .b2b__address {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(1.1rem, 0.9rem + 1vw, 1.7rem);
  }
  .b2b__h { max-width: 20ch; }
  .b2b__p { max-width: 64ch; }
  .b2b__band { aspect-ratio: 5 / 2; }
  .b2b__rank { margin-inline: clamp(0.35rem, 0.1rem + 1.6vw, 1.4rem); }
}

@media (max-width: 720px) {
  /* THE PASSAGE GOES WITH THE OVERLAP. Below this the rank no longer laps
     the band, so band-down/rank-up has no relationship left to deepen —
     it is just two blocks sliding apart, which reads as a gap opening.
     The ground keeps a little of it; the composition keeps none. */
  .b2b { --b2d: 0; }
  .b2b__orb--a { translate: 0 calc(var(--b2s) * -1.1rem); }
  .b2b__orb--b { translate: 0 calc(var(--b2s) * 1.4rem); }

  .b2b__band { aspect-ratio: 16 / 9; }
  .b2b__rank {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    /* the overlap goes: three stacked cards cannot all stand on one band,
       and a single card lapping it would read as a mistake rather than a
       composition */
    margin: clamp(0.8rem, 0.6rem + 0.8vw, 1.2rem) 0 0;
  }
  /* one column has nothing beside it to line up with, so the shared rows
     go too. Leaning on implicit rows for a correct result is how a layout
     breaks two browser versions from now. */
  .b2b__card {
    grid-row: auto;
    grid-template-rows: auto auto;
  }
  .b2b__cursor { display: none; }
}

@media (max-width: 480px) {
  .b2b__band { aspect-ratio: 4 / 3; }
  .b2b__chip { letter-spacing: 0.14em; padding: 0.36rem 0.7rem; }
  .b2b__chip::before { width: 1rem; }
}

/* --------------------------------------------------------------------------
   REDUCED MOTION. Every clock stops and the pointer light goes with them.
   The section is a finished composition without any of it.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  /* --b2p rests at 1 and --b2s at 0, so the landing, the chip's arrival
     and the whole depth field are already at their finished values and
     nothing needs unwinding. What is written out is the six standing
     clocks, the pointer light, and the two narrow-screen orb offsets
     that name --b2s directly. */
  .b2b { --b2d: 0; }
  .b2b__orb,
  .b2b__aura,
  .b2b__h em,
  .b2b__card::before { animation: none; }
  .b2b__orb,
  .b2b__aura,
  .b2b__band,
  .b2b__rank,
  .b2b__chip { translate: none; }
  .b2b__card::after { transition: none; }
  .b2b__cursor { display: none; }
  .b2b__band img {
    animation: none;
    transform: scale(1.03);
    transition: none;
  }
  .b2b__card,
  .b2b__t,
  .b2b__s { transition: none; }
}