/* 047 v5, Services: the two-minute pitch. Built ON theme.css, chrome.css and dyn.css (the page head, the close, the labels and the
   snap are dyn.css's, shared with Our Process and the Case Study).
   Seven beats, one argument. Beat 1 and the close take the hero's own light with the headline landing line by line; beats 2 and 3
   share one drawing (three steel columns), which is joined at the peak; beats 4, 5 and 6 each land once as they arrive.

   THE MOTION MODEL (HANDOFF). Nothing is driven by the scroll. Under html.motion each beat is armed in its start state; when it
   reaches the reading zone, motion.js adds one class, and a TIME-BASED CSS animation plays to its end and holds (fill-mode both),
   whatever the reader does next. Left upward (the beat wholly below the screen) the class comes off and the beat stands armed
   again; it replays when the reader comes back down (motion.js). The peak carries scroll-snap-align: center under the page's
   proximity snap. The peak's timeline is written on registered custom properties (@property), so one set of keyframes on .peak
   drives every part of the drawing. Transform and opacity only, no layout. No .motion: every beat stands in its settled state.

   ROUND_FINAL2 (2026-10-12): no screen mostly black. The opening's right half is the steel (three columns standing apart, rising
   into the light on load); beat 4 carries three lit places under its heading; beat 5 carries the frame's joint, its rivets driven as
   the lines stamp. Every beat re-timed to start the moment it is in view and read at a confident pace (the peak: 2.35 s). */

/* ------------------------------------------------------------------ the snap: the peak's screen settles under the header's bar (motion only; the close is dyn.css's) */
.motion .peak { scroll-snap-align: start; }

/* ------------------------------------------------------------------ the opening: words on the left, the steel on the right, both under the hero's light */
.phead--pitch .hero__stage { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--gap); }
.phead--pitch .hero__words { max-width: 760px; }
.phead__fig { align-self: center; justify-self: stretch; margin: 0; max-width: 600px; width: 100%; }
.phead__fig svg { display: block; width: 100%; height: auto; overflow: visible; }
.phead__fig .col, .phead__fig .csh { transform-box: fill-box; transform-origin: center bottom; }
.phead__fig .rake { transform: translateX(var(--rakew)); }         /* crossed: off the far side (the finished frame) */
.phead__fig .lift { opacity: .07; }
.phead__fig .pool { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  /* on load, with the headline: each column rises into the light (near to far), its shadow arriving with it; the pool comes up;
     one rake of light crosses the three as the sweep crosses the words; the lift that stays comes up under it */
  .light .phead__fig .col--1, .light .phead__fig .csh--1 { animation: col-rise 1s var(--ease-light) .25s both; }
  .light .phead__fig .col--2, .light .phead__fig .csh--2 { animation: col-rise 1s var(--ease-light) .4s both; }
  .light .phead__fig .col--3, .light .phead__fig .csh--3 { animation: col-rise 1s var(--ease-light) .55s both; }
  .light .phead__fig .pool { animation: gx-on 1.4s var(--ease-light) .3s both; }
  .light .phead__fig .rake { animation: rake-cross .9s cubic-bezier(.45, 0, .2, 1) 1s both; }
  .light .phead__fig .lift { animation: lift-up .6s var(--ease-light) 1.1s both; }
  @keyframes col-rise { from { opacity: 0; transform: translateY(28px); } 40% { opacity: 1; } to { opacity: 1; transform: none; } }
  @keyframes rake-cross { from { transform: translateX(0); } to { transform: translateX(var(--rakew)); } }
  @keyframes lift-up { from { opacity: 0; } to { opacity: .07; } }
}

/* ------------------------------------------------------------------ the beats between: a label at the margin, the line under the lamp */
.beat { position: relative; isolation: isolate; padding: 80px 0; }
.beat__in { display: grid; gap: 26px; justify-items: start; }
.beat__in--ed, .peak__words { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--gap); align-items: start; }

/* ------------------------------------------------------------------ the drawing: three steel columns, one girder (shared by the still and the live scene)
   Registered, so keyframes interpolate them. Start values = the frame apart, the trouble dark. */
@property --words { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --glow { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --rise { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --flare { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --beam { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --drop { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --gap1 { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --gap2 { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --r1 { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --r2 { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --r3 { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --h1 { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --h2 { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --h3 { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --rake { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --ink { syntax: "<number>"; inherits: true; initial-value: 0; }

.still, .peak { --words: 0; --glow: 1; --rise: 1; --flare: 0; --beam: 0; --drop: 0; --gap1: 1; --gap2: 1; --r1: 0; --r2: 0; --r3: 0; --h1: 0; --h2: 0; --h3: 0; --rake: 0; --ink: 0; }
.motion .peak { --glow: 0; --rise: 0; }             /* with motion the trouble is dark and flat on the ground until the frame comes into view */
html:not(.motion) .peak { --words: 1; --glow: 1; --rise: 1; --beam: 1; --drop: 1; --gap1: 0; --gap2: 0; --r1: 1; --r2: 1; --r3: 1; --rake: 1; --ink: 1; }
.still, .peak__fig { margin: 0; width: 100%; }
.still { grid-column: 1 / -1; margin-top: 40px; }
.problem { display: grid; gap: 26px; justify-items: start; width: 100%; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--gap); align-items: start; }
.motion .still { display: none; }                   /* with motion, the live scene stands apart first and is joined at the peak */
.fig { display: block; width: 100%; height: auto; overflow: visible; }
.fig--m { display: none; }
.fig .gap, .fig .flare { transform-box: fill-box; transform-origin: center; }
/* beat 2: the trouble rises out of the ground in each gap (--rise 0 to 1: flat at the floor, then up to its full height); at the peak --flare swells it */
.fig .gap--1 { opacity: calc(var(--glow) * var(--gap1)); transform: translateY(calc((1 - var(--rise)) * 60px)) scale(calc(1 + .2 * var(--flare)), calc(var(--rise) * (1 + .2 * var(--flare)))); }
.fig .gap--2 { opacity: calc(var(--glow) * var(--gap2)); transform: translateY(calc((1 - var(--rise)) * 60px)) scale(calc(1 + .2 * var(--flare)), calc(var(--rise) * (1 + .2 * var(--flare)))); }
.fig .flare--1 { opacity: calc(var(--glow) * var(--gap1) * var(--flare)); transform: scale(calc(1 + .3 * var(--flare))); }   /* the one surge */
.fig .flare--2 { opacity: calc(var(--glow) * var(--gap2) * var(--flare)); transform: scale(calc(1 + .3 * var(--flare))); }
.fig .rv { transform: translateX(calc((1 - var(--beam)) * var(--girdw))); }      /* the girder's reveal, from the far end */
.fig .gird, .fig .gl { transform: translateY(calc((var(--drop) - 1) * var(--dropy))); }   /* held above its seat, then it lands */
.fig .gsh { opacity: calc(var(--beam) * var(--drop)); }                             /* its shadow on the ground: contact */
.fig .jt--1 .head { opacity: var(--r1); } .fig .jt--1 .hot, .fig .jt--1 .heat { opacity: var(--h1); }
.fig .jt--2 .head { opacity: var(--r2); } .fig .jt--2 .hot, .fig .jt--2 .heat { opacity: var(--h2); }
.fig .jt--3 .head { opacity: var(--r3); } .fig .jt--3 .hot, .fig .jt--3 .heat { opacity: var(--h3); }
.fig .rake { transform: translateX(calc(var(--rake) * var(--rakew))); }
.fig .lift { opacity: calc(var(--ink) * .07); }
/* the names under the columns: each centred under its column's projected foot, just below it (the row is lifted from under the
   frame by --nb, each name by its own --nf: margins in percent resolve against the frame's width, as the feet were measured;
   steel.feet()). They hung 100 to 130 px under the drawing, on one line, off centre. */
.peak__names { position: relative; height: 1.4em; margin-top: calc(14px - var(--nb)); }
.peak__names li { position: absolute; top: 0; white-space: nowrap; transform: translateX(-50%); }
.peak__names li:nth-child(1) { left: var(--n1); margin-top: calc(-1 * var(--nf1)); }
.peak__names li:nth-child(2) { left: var(--n2); margin-top: calc(-1 * var(--nf2)); }
.peak__names li:nth-child(3) { left: var(--n3); margin-top: calc(-1 * var(--nf3)); }

/* ------------------------------------------------------------------ beat 3: the peak (centred by the snap; plays once, in time, then holds) */
.peak { position: relative; isolation: isolate; padding-block: 40px; }
/* one screen: the gap's line, the frame, the words. The section snaps to its start under the bar; the frame's max-width keeps the whole
   inside the snapport on a short screen (at 720 px the frame is 280 px tall; at 900, 460), so nothing of it hides below the fold and the
   snap never fights a reader scrolling to its foot */
.peak__in { display: grid; gap: 34px; justify-items: start; }
.peak__fig { justify-self: center; max-width: min(100%, calc((100svh - 440px) * 2.5)); }
.peak__words { display: grid; row-gap: 26px; width: 100%; opacity: calc(.14 + .86 * var(--words)); transform: translateY(calc((1 - var(--words)) * 12px)); }

@media (prefers-reduced-motion: no-preference) {
  /* beat 2's motion: the trouble rises in the gaps and glows up as the frame comes into view (.is-near on the figure, .8 s) */
  .peak__fig.is-near { animation: glow-up .8s cubic-bezier(.2, .6, .25, 1) both; }
  .peak.is-on .peak__fig { --glow: 1; --rise: 1; }   /* the peak never plays over dark gaps */
  @keyframes glow-up { from { --glow: 0; --rise: 0; } 55% { --glow: 1; } to { --glow: 1; --rise: 1; } }

  /* THE PEAK, 2.35 s from the trigger (.is-on), re-timed 2026-10-12 (it ran 3.2 s with the words last at 2.5 s):
       0.00  the oxblood flares once (up by .14 s, gone by .45 s): the trouble
       0.20  the girder sweeps in across the tops from the lamp's side, a confident ease-out, held a flange above its seat
       1.00  it drops onto the cap plates in .14 s, accelerating, a hard stop; its ground shadow arrives with the contact
       1.20  the rivets, joint by joint every .12 s: red-hot at once, held, cooling to steel over .5 s
       0.65  the red goes out of each gap as it is spanned (the right gap first, the way the girder came)
       1.35  the words rise as the girder lands, so the reader reads while the rivets are driven
       1.55  one rake of light crosses the locked frame; the lift that stays comes up under it. Then it holds. */
  .peak.is-on { animation:
    pk-flare .45s cubic-bezier(.3, .6, .3, 1) 0s both,
    pk-beam .85s cubic-bezier(.2, .7, .15, 1) .2s both,
    pk-drop .14s cubic-bezier(.5, 0, 1, 1) 1s both,
    pk-gap2 .6s var(--ease-light) .65s both,
    pk-gap1 .6s var(--ease-light) .9s both,
    pk-j1 .7s linear 1.2s both,
    pk-j2 .7s linear 1.32s both,
    pk-j3 .7s linear 1.44s both,
    pk-rake .8s cubic-bezier(.45, 0, .2, 1) 1.55s both,
    pk-ink .5s var(--ease-light) 1.6s both,
    pk-words .6s var(--ease-light) 1.35s both; }
  @keyframes pk-flare { 0% { --flare: 0; } 30% { --flare: 1; } 100% { --flare: 0; } }
  @keyframes pk-beam { from { --beam: 0; } to { --beam: 1; } }
  @keyframes pk-drop { from { --drop: 0; } to { --drop: 1; } }
  @keyframes pk-gap2 { from { --gap2: 1; } to { --gap2: 0; } }
  @keyframes pk-gap1 { from { --gap1: 1; } to { --gap1: 0; } }
  @keyframes pk-j1 { 0% { --r1: 0; --h1: 0; } 6% { --r1: 1; --h1: 1; } 25% { --h1: 1; animation-timing-function: cubic-bezier(.2, .6, .3, 1); } 100% { --r1: 1; --h1: 0; } }
  @keyframes pk-j2 { 0% { --r2: 0; --h2: 0; } 6% { --r2: 1; --h2: 1; } 25% { --h2: 1; animation-timing-function: cubic-bezier(.2, .6, .3, 1); } 100% { --r2: 1; --h2: 0; } }
  @keyframes pk-j3 { 0% { --r3: 0; --h3: 0; } 6% { --r3: 1; --h3: 1; } 25% { --h3: 1; animation-timing-function: cubic-bezier(.2, .6, .3, 1); } 100% { --r3: 1; --h3: 0; } }
  @keyframes pk-rake { from { --rake: 0; } to { --rake: 1; } }
  @keyframes pk-ink { from { --ink: 0; } to { --ink: 1; } }
  @keyframes pk-words { from { --words: 0; } to { --words: 1; } }
}

/* ------------------------------------------------------------------ beat 4: boots on the ground. The three places drop in and land, left to right, and under
   them three places light in turn: the door (the light falls through it onto the ground), the phone (the line rings, the call runs
   down it, the team lights), the field (the route is walked, the crew's point is marked). 1.5 s in all. */
.boots { max-width: none; width: 100%; }
.ln--r { text-align: right; margin-top: .12em; }
.place { display: inline-block; }
.boots__fig { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); width: 100%; margin: 22px 0 0; }
.boots__fig svg { display: block; width: 100%; height: auto; overflow: visible; }
.bt-post { fill: var(--bw-silver); }
.bt-leaf-line { fill: none; stroke: var(--bw-union-line); stroke-width: 1; }
.bt-frame, .bt-beam, .bt-pool, .bp-core, .bf-point, .bf-ring { transform-box: fill-box; transform-origin: center; }
.bt-beam { transform-origin: center top; }
.bp .gx-ring { opacity: 0; }                                   /* the line rings while the call is live; at rest it has been answered */
.bp .gx-team { fill: var(--bw-union-raised); }
.bf-contour { stroke: url(#bf-terrain); }
.bf-ring { fill: none; stroke: var(--bw-white); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 0; }
.bf-point { fill: var(--bw-white); }
.motion .beat--boots:not(.is-on) .place { opacity: 0; transform: translateY(-28px); }
.motion .beat--boots:not(.is-on) .bt-frame { opacity: .3; }
.motion .beat--boots:not(.is-on) .bt-beam { opacity: 0; transform: scaleY(.3); }
.motion .beat--boots:not(.is-on) .bt-pool { opacity: 0; }
.motion .beat--boots:not(.is-on) .bt-sill, .motion .beat--boots:not(.is-on) .bp-line, .motion .beat--boots:not(.is-on) .bf-route,
.motion .beat--boots:not(.is-on) .bf-ring { stroke-dashoffset: 1; }
.motion .beat--boots:not(.is-on) .bp-team { fill: #111213; }
.motion .beat--boots:not(.is-on) .bp-team-line { stroke: var(--bw-gun-400); }
.motion .beat--boots:not(.is-on) .bp-core, .motion .beat--boots:not(.is-on) .bf-point, .motion .beat--boots:not(.is-on) .boots__fig .gx-edge { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .beat--boots.is-on .place { animation: place-land .5s cubic-bezier(.2, .7, .2, 1) both; }
  .beat--boots.is-on .place:nth-child(2) { animation-delay: .18s; }
  .beat--boots.is-on .place:nth-child(3) { animation-delay: .36s; }
  @keyframes place-land { from { opacity: 0; transform: translateY(-28px); } to { opacity: 1; transform: none; } }
  /* the door, with "At the door" */
  .beat--boots.is-on .bt-frame { animation: gx-on-30 .4s var(--ease-light) .05s both; }
  .beat--boots.is-on .bt-beam { animation: beam-fall .6s var(--ease-light) .2s both; }
  .beat--boots.is-on .bt-pool { animation: gx-on .5s var(--ease-light) .4s both; }
  .beat--boots.is-on .bt-sill { animation: gx-draw .4s var(--ease-light) .35s both; }
  .beat--boots.is-on .bt .gx-edge { animation: gx-on .4s var(--ease-light) .5s both; }
  /* the phone, with "on the phones": it rings, the call runs down the line, the team takes it */
  .beat--boots.is-on .bp .gx-ring { animation: ring-pulse .8s linear .22s both; }
  .beat--boots.is-on .bp-line { animation: gx-draw .4s cubic-bezier(.45, 0, .2, 1) .6s both; }
  .beat--boots.is-on .bp-team { animation: team-lit .3s var(--ease-light) .95s both; }
  .beat--boots.is-on .bp-team-line { animation: team-line .3s var(--ease-light) .95s both; }
  .beat--boots.is-on .bp .gx-edge { animation: gx-on .4s var(--ease-light) 1s both; }
  .beat--boots.is-on .bp-core { animation: gx-pop .3s var(--ease-light) 1s both; }
  /* the field, with "in the field": the route is walked, the point is marked and ringed, the light catches it */
  .beat--boots.is-on .bf-route { animation: gx-draw .6s cubic-bezier(.45, 0, .2, 1) .42s both; }
  .beat--boots.is-on .bf-point { animation: gx-pop .3s var(--ease-light) .98s both; }
  .beat--boots.is-on .bf-ring { animation: gx-draw .5s var(--ease-light) 1s both; }
  .beat--boots.is-on .bf .gx-edge { animation: gx-on .4s var(--ease-light) 1.1s both; }
  @keyframes gx-on-30 { from { opacity: .3; } to { opacity: 1; } }
  @keyframes beam-fall { from { opacity: 0; transform: scaleY(.3); } to { opacity: 1; transform: none; } }
  @keyframes ring-pulse { 0% { opacity: 0; } 12% { opacity: 1; } 30% { opacity: .25; } 48% { opacity: 1; } 66% { opacity: .25; } 84% { opacity: 1; } 100% { opacity: 0; } }
  @keyframes team-lit { from { fill: #111213; } to { fill: var(--bw-union-raised); } }
  @keyframes team-line { from { stroke: var(--bw-gun-400); } to { stroke: var(--bw-silver); } }
}

/* ------------------------------------------------------------------ beat 5: the standard (three lines stamp in; one rule draws itself under them from the lamp's side)
   and beat 6: the proof slides in at the rule's end, its arrow drawing. Beside the lines: close on one joint of the frame, a
   rivet driven red-hot for each line and cooling to steel, then one rake of light across the joint. 2.0 s in all. */
.standard__row { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--gap); align-items: center; width: 100%; }
.standard__wrap { display: grid; justify-items: start; width: fit-content; max-width: 100%; }
.standard { position: relative; max-width: 100%; width: fit-content; padding-bottom: 22px; }
.standard .ln { transform-origin: left center; }
.standard::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; transform-origin: right center;
  background: linear-gradient(90deg, var(--bw-oxblood-deep) 0%, var(--bw-oxblood) 28%, var(--bw-oxblood-lit) 46%, var(--bw-silver) 76%, var(--bw-white) 100%); }
.joint { margin: 0; width: 100%; max-width: 520px; justify-self: end; }
.joint svg { display: block; width: 100%; height: auto; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 62%, transparent 100%), linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(180deg, #000 0, #000 62%, transparent 100%), linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
  mask-composite: intersect; }   /* the girder runs on past the frame and the column down out of it: both dissolve, nothing is chopped */
.joint .rv, .joint .gird, .joint .gl { transform: none; }      /* the joint is the locked frame's: no reveal, no drop */
.joint .jt .head { opacity: 1; }
.joint .jt .hot, .joint .jt .heat { opacity: 0; }
.joint .rake { transform: translateX(var(--rakew)); }
.joint .lift { opacity: .07; }
.motion .beat--standard:not(.is-on) .standard .ln { opacity: 0; transform: scale(1.08); }
.motion .beat--standard:not(.is-on) .standard::after { transform: scaleX(0); }
.motion .beat--standard:not(.is-on) .proof { opacity: 0; transform: translateX(28px); }
.motion .beat--standard:not(.is-on) .proof svg path { stroke-dashoffset: 1; }
.motion .beat--standard:not(.is-on) .joint .jt .head { opacity: 0; }
.motion .beat--standard:not(.is-on) .joint .rake { transform: translateX(0); }
.motion .beat--standard:not(.is-on) .joint .lift { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .beat--standard.is-on .standard .ln { animation: stamp .36s cubic-bezier(.2, .7, .2, 1) .05s both; }
  .beat--standard.is-on .standard .ln:nth-child(2) { animation-delay: .25s; }
  .beat--standard.is-on .standard .ln:nth-child(3) { animation-delay: .45s; }
  .beat--standard.is-on .standard::after { animation: rule-draw .7s var(--ease-light) .6s both; }
  .beat--standard.is-on .proof { animation: proof-in .5s var(--ease-light) 1s both; }
  .beat--standard.is-on .proof svg path { animation: arrow-draw .4s var(--ease-light) 1.2s both; }
  /* the rivets, one per line, as each stamps: red-hot at once, held, cooling to steel over .5 s */
  .beat--standard.is-on .joint .jt .head.rv1 { animation: riv-head .05s linear .2s both; }
  .beat--standard.is-on .joint .jt .hot.rv1, .beat--standard.is-on .joint .jt .heat.rv1 { animation: riv-heat .65s linear .2s both; }
  .beat--standard.is-on .joint .jt .head.rv2 { animation: riv-head .05s linear .4s both; }
  .beat--standard.is-on .joint .jt .hot.rv2, .beat--standard.is-on .joint .jt .heat.rv2 { animation: riv-heat .65s linear .4s both; }
  .beat--standard.is-on .joint .jt .head.rv3 { animation: riv-head .05s linear .6s both; }
  .beat--standard.is-on .joint .jt .hot.rv3, .beat--standard.is-on .joint .jt .heat.rv3 { animation: riv-heat .65s linear .6s both; }
  .beat--standard.is-on .joint .rake { animation: rake-cross .8s cubic-bezier(.45, 0, .2, 1) 1.2s both; }
  .beat--standard.is-on .joint .lift { animation: lift-up .5s var(--ease-light) 1.3s both; }
  @keyframes stamp { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: none; } }
  @keyframes rule-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes proof-in { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
  @keyframes arrow-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  @keyframes riv-head { from { opacity: 0; } to { opacity: 1; } }
  @keyframes riv-heat { 0% { opacity: 0; } 8% { opacity: 1; } 30% { opacity: 1; animation-timing-function: cubic-bezier(.2, .6, .3, 1); } 100% { opacity: 0; } }
}
.proof { position: relative; display: inline-flex; align-items: center; gap: 14px; min-height: 44px; justify-self: end; margin-top: 10px; padding-top: 12px;
  font: 500 .75rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; color: var(--bw-gun-300); transition: color .25s; }
.proof svg { width: 16px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.25; }
.proof svg path { stroke-dasharray: 1; stroke-dashoffset: 0; }
/* the lit edge: a hairline above the link catches the light under the pointer */
.proof::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; opacity: 0; transition: opacity .25s;
  background: linear-gradient(90deg, var(--light-2), var(--light-4)); }
.proof:hover, .proof:focus-visible { color: var(--bw-white); }
.proof:hover::before, .proof:focus-visible::before { opacity: 1; }

/* ------------------------------------------------------------------ the close: tighter than the hero's own sequence (the reader has arrived; 1.6 s) */
@media (prefers-reduced-motion: no-preference) {
  .close.light .hero__words .ln.sweep { animation: ln-land .7s var(--ease-light) var(--ln-d, 0s) both, sweep-text 1.2s var(--ease-light) .35s both; }
  .close.light .hero__words .ln:nth-child(2) { --ln-d: .12s; }
  .close.light .hero__words > .actions { animation: act-land .7s var(--ease-light) .7s both; }
  .close.light .hero__light { animation-duration: 1.2s; }
  .close.light .cloth { animation: cloth-up 1.1s var(--ease-light) .1s both; }
  .close.light .hero__words > :not(h2) { animation-duration: .8s; }
  .close.light .hero__words > .lead { animation-delay: .5s; }
  .close.light .seam::after { animation-delay: .6s; }
}

/* ------------------------------------------------------------------ phones and narrow windows */
@media (max-width: 899.98px) {
  .beat { padding: 64px 0; }
  .beat__in--ed, .peak__words, .problem { grid-template-columns: minmax(0, 1fr); }
  .phead--pitch .hero__stage { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .phead__fig { order: -1; align-self: end; justify-self: center; max-width: 340px; margin-top: 12px; }   /* the steel stands over the words, in the cloth's light */
  .still { margin-top: 28px; }
  .fig--d { display: none; }
  .fig--m { display: block; }
  .peak { padding-block: 40px; }
  .peak__in { gap: 28px; }
  .motion .peak { scroll-snap-align: none; }   /* on a phone the screen holds the frame, not the whole; the reader scrolls through it freely */
  .still, .peak__fig { justify-self: stretch; width: auto; max-width: none; margin-inline: calc(-1 * var(--gutter)); }   /* the frame runs to the screen's edges */
  .motion .peak { min-height: 0; }          /* on a phone the frame is width-bound: a full-screen stop left 300 px voids round it */
  .peak__names { margin-top: calc(10px - var(--mb)); }
  .peak__names .label { font-size: .625rem; letter-spacing: .12em; }
  .peak__names li:nth-child(1) { left: max(var(--m1), 3em); margin-top: calc(-1 * var(--mf1)); }            /* centred, never past the screen's edge */
  .peak__names li:nth-child(2) { left: var(--m2); margin-top: calc(-1 * var(--mf2)); }
  .peak__names li:nth-child(3) { left: min(var(--m3), calc(100% - 4.6em)); margin-top: calc(-1 * var(--mf3)); }
  .ln--r { text-align: left; margin-top: 0; }
  .boots__fig { column-gap: 0; margin: 14px calc(-1 * var(--gutter)) 0; width: auto; }   /* three panels edge to edge */
  .standard__row { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .standard .ln { display: block; text-wrap: balance; }
  .standard .nw { white-space: nowrap; }       /* each phrase whole: NO HAND-OFFS. / NO HOMEWORK. · WE BUILD IT. / WE RUN IT. · THE BUCK STOPS / WITH US. */
  .standard { padding-bottom: 16px; }
  .standard__wrap { width: 100%; }
  .proof { justify-self: end; }               /* at the rule's end, as on a desktop */
  .joint { justify-self: stretch; max-width: none; }
}