/* ════════════════════════════════════════════════════════════════════
   LV8 TECH — the page that rides the film.

   THE CORRECTION THAT MATTERS: an earlier cut of this file styled the
   content half as opaque porcelain pages with scroll-triggered entrance
   animations. Entrance animations are not cinema — every website has
   them. The film half reads as cinema for exactly one reason: there is
   continuous moving footage behind it and scroll is the camera. So the
   footage now runs behind the ENTIRE page, to the footer, and every
   section here is glass floating over it. Nothing is opaque, nothing has
   its own ground, and the film shows through every gutter.

   Palette is work.css's, unchanged — the two halves are one film.
   ════════════════════════════════════════════════════════════════════ */

:root {
  /* glass: the one surface the whole content half is made of */
  --gl:      rgba(16, 12, 7, .62);
  --gl-hi:   rgba(22, 17, 10, .74);
  --gl-line: rgba(255, 255, 255, .09);
  --gl-gold: rgba(232, 181, 77, .28);

  --gold-08: rgba(232, 181, 77, .08);
  --gold-14: rgba(232, 181, 77, .14);
  --gold-30: rgba(232, 181, 77, .3);
  --gold-45: rgba(232, 181, 77, .45);
  --blur: blur(18px) saturate(1.15);
}

/* ── every scene is transparent: the film is the ground, always ── */
.sec { position: relative; z-index: 3; padding: clamp(104px, 15vh, 190px) 0;
  background: transparent; color: var(--w72); }
/* the theatre movement sits one tonal step deeper */
.sec.dark { background: rgba(6, 5, 3, .4); }
.sec.alt { background: rgba(9, 7, 4, .26); }

/* neutralise work.css's porcelain .panel — these are film scenes now */
.sec.panel, #film-end.panel, footer.panel {
  background: transparent; color: var(--w72);
  padding: clamp(104px, 15vh, 190px) 0; }
.sec.panel .t, #film-end .t, footer.panel .t { color: var(--w); }
.notch { clip-path: none; }

/* Copy sits directly on live footage that swings from near-black to
   near-white gold. One wide soft shadow — the same one the film's acts
   use — keeps every string legible on every frame without re-grading. */
.sec h2, .sec h3, .sec h5, .sec p, .sec li, .sec .eyebrow, .sec .sub,
#film-end h2, #film-end p, footer p, footer span, footer a {
  text-shadow: 0 1px 22px rgba(8, 6, 3, .72), 0 1px 3px rgba(8, 6, 3, .5); }
/* ...except inside glass, which carries its own ground */
.cd *, .clause *, .bill *, #plan *, #cfile *, .beatband *, .poster * {
  text-shadow: none; }

.sec .wrap { max-width: 1280px; }

/* ══════════ THE BREATHS ══════════
   The film half got its clear windows (see .scene .hold.clear in work.css) but
   the content half had no gaps at all, and it is the half with the most footage
   in it: movement II is four whole clips — the night floor, the build, the wall
   of work, dawn back on the desk — and not one frame of it was ever unobstructed.

   Every .sec is transparent, which sounds like the film shows through, but each
   one also carries .sec::before: a 100-degree wash that is 90% opaque under the
   copy column. Stack that under a six-card grid and the picture survives as a
   dim smudge at the left and right margins. The four .lite sections are worse
   and honestly so — solid porcelain, film completely gone.

   A breath is simply a section with nothing in it. No copy, no grade, no plate,
   no card: the film is already painting at z-index 0, so an empty band of scroll
   IS the picture, full-bleed, for about four fifths of a viewport.

   Placed after a film-ground section and before a porcelain one, so the rhythm
   reads picture -> editorial frame -> picture rather than one continuous wall of
   cards. They also stretch the content half by ~20%, which spreads movement II's
   32s of footage over more scroll — the same trade the acts took when they went
   to 340vh, and the same free reduction in decode demand. */
/* Over a viewport tall on purpose. At 82vh the incoming porcelain edge was
   always somewhere on screen — the picture got most of the frame but never all
   of it, and "most of the frame" is what it already had. The extra 28vh is the
   part that makes it a held shot rather than a wider gap. */
.breath { position: relative; z-index: 3; height: 110vh; pointer-events: none; }
/* A phone is holding the portrait cut, which is the most watchable the film ever
   is, but it is also a lot of thumb travel — a little shorter there. */
@media (max-width: 900px) { .breath { height: 90vh; } }
@media (prefers-reduced-motion: reduce) { .breath { height: 40vh; } }

/* ── THE LEGIBILITY GRADE ──
   Bare copy cannot survive footage that swings to near-white: over the
   dawn clip's lit wall the engagement headline vanished completely. So
   every scene carries the same 100-degree wash the plan console already
   uses — heavy under the copy column, clearing to almost nothing on the
   right, so the picture still breathes in a third of every frame and the
   camera move stays plainly visible. A flat overlay would have killed the
   film; this is a title-safe grade, which is how film titling does it. */
.sec::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(100deg,
    rgba(9, 7, 4, .9) 0%, rgba(9, 7, 4, .78) 40%,
    rgba(9, 7, 4, .24) 80%, rgba(9, 7, 4, .04) 100%); }
.sec > * { position: relative; z-index: 1; }
/* the pinned scenes grade inside the sticky holder, or the wash would
   scroll away from the shot it is supposed to be protecting */
#film-end::before, #process::before { content: none; }
.pinw .pinh::before, .pinw2 .pinh2::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.pinw .pinh::before { background: radial-gradient(115% 85% at 50% 48%,
  rgba(9, 7, 4, .88), rgba(9, 7, 4, .6) 68%, rgba(9, 7, 4, .28)); }
/* the ignition's four columns span the full width, unlike every other
   scene whose copy is left-only, so its wash stays dense all the way
   across rather than clearing on the right */
.lite .pinw2 .pinh2::before { content: none; }
.pinw2 .pinh2::before { background: linear-gradient(100deg,
  rgba(9, 7, 4, .9) 0%, rgba(9, 7, 4, .82) 45%,
  rgba(9, 7, 4, .7) 80%, rgba(9, 7, 4, .58) 100%); }
.pinw .pinh > *, .pinw2 .pinh2 > * { position: relative; z-index: 1; }
/* the two centred scenes need a symmetric wash, not a left-heavy one */
#fit::before { background: radial-gradient(120% 92% at 50% 45%,
  rgba(9, 7, 4, .86), rgba(9, 7, 4, .62) 70%, rgba(9, 7, 4, .34)); }

/* ── section furniture ── */
.eyebrow { display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: .3em; text-transform: uppercase; color: var(--gold); }
.eyebrow::before { content: ""; width: 18px; height: 1px;
  background: rgba(232, 181, 77, .45); }
.sech { display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 34px; margin: 26px 0 68px; }
.sech h2 { font-size: clamp(30px, 4.4vw, 60px); max-width: 13.5em;
  font-weight: 400; letter-spacing: -.028em; line-height: 1.07; color: var(--w); }
.sech h2 .gl { color: var(--gold); }
.sech .sub { max-width: 26em; font-size: 14.5px; line-height: 1.75;
  color: var(--w72); padding-bottom: 6px; }

/* ── the one surface: glass ── */
.cd { background: var(--gl); border: 1px solid rgba(255, 255, 255, .05);
  border-radius: 18px; -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur); color: var(--w72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045); }

/* before→after chip, the film's flip on a glass ground */
.ba { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 10px 15px; border-radius: 10px; border: 1px solid var(--gl-gold);
  background: rgba(232, 181, 77, .06); font-family: var(--mono);
  font-size: 9.5px; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; }
.ba .f { color: var(--w); transition: color .45s, opacity .45s; }
.ba svg { width: 20px; height: 8px; color: var(--w45); flex: none;
  transition: color .45s; }
.ba .o { color: var(--w45); font-weight: 600;
  transition: color .45s, text-shadow .45s; }
.ba.on .f { color: var(--w45); opacity: .7; }
.ba.on svg { color: var(--gold); }
.ba.on .o { color: var(--gold); text-shadow: 0 0 16px rgba(232, 181, 77, .55); }

.ck { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px;
  line-height: 1.6; color: var(--w); }
.ck svg { width: 14px; height: 14px; flex: none; margin-top: 3px;
  color: var(--w45); }

/* a numeral, not a badge: 28px discs with gold fills and gold borders were
   a third of the gold count on screen by themselves */
.nd { font-family: var(--mono); flex: none; width: 22px; font-size: 10px;
  font-weight: 600; color: var(--w45); padding-top: 2px; }

[data-grow] { transform-origin: left; transform: scaleX(0);
  transition: transform 1.1s cubic-bezier(.22,1,.36,1) .15s; }
[data-grow].go { transform: scaleX(1); }

/* ═══════ SC.01 · the held shot ═══════ */
#film-end .oneidea { font-size: clamp(30px, 4.6vw, 62px); font-weight: 400;
  letter-spacing: -.028em; line-height: 1.1; color: var(--w); }
#film-end .thesis { height: 3px; width: min(380px, 58%); margin: 30px auto 0;
  border-radius: 2px; background: linear-gradient(90deg, #E8B54D, #FFD34D);
  box-shadow: 0 2px 16px rgba(232, 181, 77, .5); }
#film-end #ideaPara { color: var(--w72); }
#film-end #ideaPara strong { color: var(--w); font-weight: 500; }
.pinw .dial { position: absolute; left: 50%; top: 50%; width: 135vmin;
  aspect-ratio: 1; transform: translate(-50%, -50%); opacity: .45;
  pointer-events: none; display: none; }
.pinw .dial svg { width: 100%; height: 100%; display: block; }
.pinw .mat { position: absolute; left: 0; right: 0; z-index: 3; height: 6.5svh;
  min-height: 44px; background: #0B0906; display: none; align-items: center;
  justify-content: space-between; padding: 0 clamp(20px, 3vw, 40px); }
.pinw .mat.mtop { top: 0; } .pinw .mat.mbot { bottom: 0; }
.pinw .mat span { font-family: var(--mono); font-size: 9px; font-weight: 600;
  letter-spacing: .42em; text-transform: uppercase; color: var(--w45);
  text-shadow: none; }
.pinw .mat span.gold { color: var(--gold); }
@media (min-width: 900px) {
  #film-end, #film-end.panel { padding: 0; }
  .pinw { height: 260vh; }
  .pinw .pinh { position: sticky; top: 0; height: 100svh; display: flex;
    flex-direction: column; justify-content: center; overflow: hidden; }
  .pinw .mat { display: flex; } .pinw .dial { display: block; }
}

/* ═══════ SC.02 · six moves ═══════ */
.moves { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 660px)  { .moves { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1020px) { .moves { grid-template-columns: repeat(3, 1fr); } }
.move { display: flex; flex-direction: column; overflow: hidden; }
/* the tiles lost their paragraphs, so the picture carries them: a 128px
   strip was a thumbnail, this is an image */
.move .ph { height: 210px; background-size: cover; background-position: center;
  position: relative; }
.move .ph::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(10, 8, 4, .55)); }
.move .in { display: flex; flex-direction: column; flex: 1; padding: 26px 28px 28px; }
.move .nrow { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.move .nrow i { flex: 1; height: 1px; background: var(--gl-line); }
.move h3 { font-size: clamp(19px, 1.8vw, 23px); font-weight: 400;
  letter-spacing: -.02em; margin-bottom: 10px; color: var(--w); }
.move .ba { margin-top: 14px; }

.band { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center;
  padding: clamp(28px, 4vw, 48px); margin-top: 26px; position: relative;
  overflow: hidden; }
@media (min-width: 960px) { .band { grid-template-columns: 7fr 5fr; } }
/* decorative glow removed: the footage is the light source */
.band h3 { font-size: clamp(24px, 3.2vw, 38px); font-weight: 400;
  letter-spacing: -.02em; color: var(--w); }
.band .bd { max-width: 30em; color: var(--w72); }
.gaugerow { display: flex; align-items: center; gap: 14px; padding: 13px 0;
  border-top: 1px solid rgba(255,255,255,.055); }
.gaugerow:first-child { border-top: 0; }
.gaugerow .ic { display: grid; place-items: center; width: 26px; height: 26px;
  color: var(--gold); flex: none; }
.gaugerow .k { font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--w); }
.gaugerow .n { font-family: var(--mono); font-size: 9.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold); margin-top: 3px; }

/* ═══════ SC.03 · the ignition ═══════ */
.spine { position: relative; }
.spine .rule { position: absolute; left: 30px; right: 30px; top: 30px; height: 1px;
  background: rgba(255, 255, 255, .14); display: none; }
@media (min-width: 1020px) { .spine .rule { display: block; } }
.spine .rule i { display: block; height: 100%;
  background: linear-gradient(90deg, #E8B54D, #FFD34D);
  box-shadow: 0 0 12px var(--gold-45); }
.steps4 { display: grid; grid-template-columns: 1fr; gap: 36px; position: relative; }
@media (min-width: 660px)  { .steps4 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1020px) { .steps4 { grid-template-columns: repeat(4, 1fr); } }
.step4 .disc { position: relative; display: grid; place-items: center;
  width: 60px; height: 60px; border-radius: 16px; background: var(--gl-hi);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid var(--gl-gold); transition: border-color .5s, box-shadow .5s; }
.step4.lit .disc { border-color: var(--gold);
  box-shadow: 0 0 26px rgba(232, 181, 77, .5); }
.step4 .disc svg { width: 28px; height: 28px; color: var(--w72);
  transition: color .5s; }
.step4.lit .disc svg { color: var(--gold); }
.step4 .disc .nn { position: absolute; top: -8px; right: -8px; display: grid;
  place-items: center; width: 22px; height: 22px; border-radius: 50%;
  font-family: var(--mono); font-size: 8.5px; font-weight: 700;
  background: linear-gradient(180deg, #FFD34D, #E8B54D); color: var(--on-gold); }
.step4 h3 { font-size: clamp(17px, 1.7vw, 21px); font-weight: 400;
  letter-spacing: -.015em; margin: 18px 0 9px; color: var(--w); }
.step4 p { max-width: 21em; font-size: 13px; line-height: 1.75; color: var(--w72); }
@media (min-width: 900px) {
  #process, #process.panel { padding: 0; }
  .pinw2 { height: 300vh; }
  .pinw2 .pinh2 { position: sticky; top: 0; height: 100svh; display: flex;
    flex-direction: column; justify-content: center; overflow: hidden; }
  .pinw2 .sech { margin-bottom: 40px; }
}

/* ═══════ SC.04 · why, and the beat ═══════ */
.pillars { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 900px) { .pillars { grid-template-columns: repeat(3, 1fr); } }
.pillar { padding: 32px; }
.pillar .dia { border: 1px solid var(--gl-line); background: rgba(232,181,77,.05);
  border-radius: 12px; padding: 14px; margin-bottom: 20px; }
.pillar .dia svg { width: 100%; height: 56px; display: block; }
.pillar .dia text { font-family: var(--mono); font-size: 6.5px; letter-spacing: .12em; }
.pillar h3 { font-size: clamp(18px, 1.9vw, 23px); font-weight: 400;
  letter-spacing: -.02em; margin-bottom: 12px; color: var(--w); }
.pillar p { font-size: 13.5px; line-height: 1.8; color: var(--w72); }

/* the beat: the film's interstitial grammar, full bleed ink */
.beatband { position: relative; margin-top: clamp(64px, 9vh, 110px);
  background: #0B0906; padding: clamp(72px, 12vh, 130px) 8vw;
  text-align: center; overflow: hidden; }
.beatband::before, .beatband::after { content: ""; position: absolute; left: 0;
  right: 0; height: 14px; background: #060503; }
.beatband::before { top: 0; } .beatband::after { bottom: 0; }
.beatband .bq2 { font-size: clamp(23px, 2.9vw, 40px); font-weight: 400;
  letter-spacing: -.02em; line-height: 1.3; color: var(--w); max-width: 22em;
  margin: 0 auto; text-wrap: balance; }
.beatband .bq2 em { font-style: normal; color: var(--gold); }

/* ═══════ SC.05 · services ═══════ */
.deck { display: grid; grid-template-columns: 1fr; gap: 26px; }
@media (min-width: 860px) { .deck { grid-template-columns: 1fr 1fr; } }
.svcard { display: flex; flex-direction: column; overflow: hidden;
  border-radius: 22px; }
.svcard.flag { border-color: var(--gold-45);
  background: linear-gradient(140deg, rgba(232,181,77,.1), var(--gl) 45%); }
.svcard .ph { position: relative; height: 260px; background-size: cover;
  background-position: center; }
.svcard .ph::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(10,8,4,.6)); }
.svcard .ph .ln, #managed-it .ph .ln { position: absolute; left: 16px;
  bottom: 13px; z-index: 1; font-family: var(--mono); font-size: 9px;
  font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: #FFD34D; background: rgba(12,10,4,.55);
  border: 1px solid rgba(255,184,0,.35); border-radius: 999px; padding: 6px 12px;
  text-shadow: none;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.svcard .in { display: flex; flex-direction: column; flex: 1; padding: 32px; }
.svcard .meta { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.svcard .meta .n { font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: .3em; color: var(--w45); }
/* only the flagship and the most-chosen tier get a filled badge; the rest
   are plain type, which is what a badge on every card amounts to anyway */
.badge { font-family: var(--mono); font-size: 8.5px; font-weight: 700;
  letter-spacing: .26em; text-transform: uppercase; border-radius: 999px;
  padding: 4px 0; color: var(--w45); text-shadow: none; }
.badge.fill { padding: 4px 11px; color: var(--gold);
  background: rgba(232, 181, 77, .12); }
.svcard h3 { font-size: clamp(22px, 2.3vw, 30px); font-weight: 400;
  letter-spacing: -.02em; margin-bottom: 10px; color: var(--w); }
.svcard .bd { font-size: 13.5px; line-height: 1.75; color: var(--w72);
  margin-bottom: 22px; flex: 1; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
/* chips lose their outline: on a glass card, a row of outlined pills is the
   busiest thing in the frame. A quiet tinted field reads as one object. */
.chips span { font-family: var(--mono); font-size: 9px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--w);
  background: rgba(255,255,255,.11); border-radius: 6px; padding: 6px 11px; }

#managed-it { margin-top: 22px; border-radius: 22px; overflow: hidden; }
#managed-it .head { display: grid; grid-template-columns: 1fr; }
@media (min-width: 860px) { #managed-it .head { grid-template-columns: minmax(0,34%) 1fr; } }
#managed-it .head .ph { position: relative; min-height: 260px;
  background-size: cover; background-position: center; }
#managed-it .serif { font-size: clamp(16px, 1.6vw, 19px); color: var(--gold);
  font-style: italic; margin-bottom: 12px; }
#managed-it h3 { color: var(--w); }
#managed-it .zone { border-top: 1px solid var(--gl-line);
  padding: clamp(22px, 3vw, 36px) clamp(20px, 3vw, 32px); }
.subhead { font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: .3em; text-transform: uppercase; color: var(--gold);
  margin-bottom: 20px; }
.cover { display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--gl-line); border: 1px solid var(--gl-line);
  border-radius: 14px; overflow: hidden; }
@media (min-width: 860px) { .cover { grid-template-columns: repeat(4, 1fr); } }
.cover .cell { background: rgba(20, 15, 9, .5); padding: 18px;
  transition: background .3s; }
.cover .cell:hover { background: rgba(232, 181, 77, .1); }
.cover .cell svg { width: 24px; height: 24px; color: var(--w45);
  margin-bottom: 12px; }
.cover .cell .k { font-family: var(--mono); font-size: 10px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--w);
  line-height: 1.45; }
.cover .cell .d { font-size: 11px; line-height: 1.45; color: var(--w45);
  margin-top: 6px; }
.tiers { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 860px) { .tiers { grid-template-columns: repeat(3, 1fr); } }
.tier { display: flex; flex-direction: column; padding: 30px; position: relative;
  overflow: hidden; }
.tier.chosen { border-color: var(--gold-45);
  background: linear-gradient(150deg, rgba(232,181,77,.12), var(--gl) 55%); }
.tier .trow { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 14px; }
.tier h5 { font-size: 22px; font-weight: 400; letter-spacing: -.02em;
  color: var(--w); }
.tier .bf { display: inline-flex; width: fit-content; align-items: center; gap: 7px;
  border: 1px solid var(--gl-line); background: rgba(255,255,255,.04);
  border-radius: 999px; padding: 6px 12px; margin-bottom: 16px;
  font-family: var(--mono); font-size: 9px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--w72); }
.tier .bf::before { content: ""; width: 4px; height: 4px; border-radius: 50%;
  background: var(--w45); }
.tier .bl { font-size: 13px; line-height: 1.7; color: var(--w72);
  margin-bottom: 20px; }
.tier ul { list-style: none; display: flex; flex-direction: column; gap: 9px;
  flex: 1; margin-bottom: 24px; }
.tier .b { width: 100%; }

/* ═══════ SC.06 · the theatre ═══════ */
.statstrip { display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--gl-line); border: 1px solid var(--gl-line);
  border-radius: 16px; overflow: hidden; margin-bottom: 22px;
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
@media (min-width: 860px) { .statstrip { grid-template-columns: repeat(4, 1fr); } }
.statstrip .st { background: rgba(18, 13, 8, .55); padding: 22px; }
.statstrip .v { font-size: clamp(28px, 3.2vw, 42px); font-weight: 400;
  letter-spacing: -.03em; line-height: 1; color: #FFF;
  text-shadow: 0 1px 20px rgba(8,6,3,.9); }
.statstrip .k { font-family: var(--mono); font-size: 9px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold); margin-top: 8px; line-height: 1.5; }

.wkey { display: flex; flex-direction: column; border-radius: 18px;
  overflow: hidden; margin-bottom: 40px; }
@media (min-width: 860px) { .wkey { flex-direction: row; align-items: stretch; } }
.wkey .lab { display: flex; align-items: center; gap: 10px; padding: 16px 20px;
  border-bottom: 1px solid var(--gl-line); }
@media (min-width: 860px) { .wkey .lab { flex-direction: column;
  align-items: flex-start; justify-content: center; width: 140px;
  border-bottom: 0; border-right: 1px solid var(--gl-line); } }
.wkey .lab .a { font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: .3em; text-transform: uppercase; color: var(--gold); }
.wkey .lab .b2 { font-family: var(--mono); font-size: 8.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--w45); }
.wkey .ent { display: flex; flex: 1; align-items: center; gap: 16px;
  padding: 18px 22px; }
.wkey .ent + .ent { border-top: 1px solid var(--gl-line); }
@media (min-width: 860px) { .wkey .ent + .ent { border-top: 0;
  border-left: 1px solid var(--gl-line); } }
.wkey .mkr { display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 50%; flex: none; }
.wkey .mkr.yes { background: rgba(232,181,77,.1); border: 1px solid var(--gold-45);
  color: var(--gold); }
.wkey .mkr.no { background: rgba(255,255,255,.04); border: 1px solid var(--gl-line); }
.wkey .mkr.no i { display: block; width: 22px; height: 22px; border-radius: 50%;
  border: 1.6px dashed var(--w45); }
.wkey .num { font-size: clamp(24px, 2.4vw, 30px); letter-spacing: -.02em;
  color: var(--w); }
.wkey .tag { font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; margin-left: 9px; }
.wkey .desc { font-size: 11.5px; line-height: 1.5; color: var(--w45);
  margin-top: 5px; max-width: 16em; }

.posters { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 660px)  { .posters { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1020px) { .posters { grid-template-columns: repeat(3, 1fr); } }
.poster { position: relative; aspect-ratio: 16 / 11; border-radius: 16px;
  overflow: hidden; border: 1px solid var(--gl-line); background: #0B0A06;
  cursor: pointer; text-align: left; padding: 0; display: block; width: 100%; }
.poster img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transition: transform .7s cubic-bezier(.22,1,.36,1); }
.poster:hover img { transform: scale(1.06); }
.poster .grade { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(9,8,3,.78) 0%, rgba(9,8,3,.3) 24%,
    rgba(9,8,3,.12) 38%, rgba(9,8,3,.62) 62%, rgba(9,8,3,.95) 100%); }
.poster .ring { position: absolute; inset: 0; border-radius: 16px; opacity: 0;
  transition: opacity .45s; pointer-events: none;
  box-shadow: inset 0 0 0 1.5px rgba(255,184,0,.65),
              0 30px 70px -34px rgba(255,184,0,.5); }
.poster:hover .ring { opacity: 1; }
.poster .hud { position: absolute; inset: 12px 14px auto; display: flex;
  align-items: center; justify-content: space-between; }
.poster .conf { display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 8px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: rgba(247,245,239,.9);
  background: rgba(12,10,4,.5); border: 1px solid rgba(255,184,0,.28);
  border-radius: 999px; padding: 5px 10px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.poster .conf i { width: 6px; height: 6px; border-radius: 50%; }
.poster .idx { font-family: var(--mono); font-size: 9px; font-weight: 600;
  letter-spacing: .26em; color: rgba(247,245,239,.9);
  text-shadow: 0 1px 10px rgba(9,8,3,.95); }
.poster .tblock { position: absolute; inset: auto 0 0; padding: 18px; }
/* gold on a bright poster still is the worst contrast pair on the page;
   the headline stat below keeps the accent, the label goes quiet */
.poster .cat { font-family: var(--mono); font-size: 9px; letter-spacing: .2em;
  text-transform: uppercase; color: #FFD9A3; margin-bottom: 6px;
  text-shadow: 0 1px 10px rgba(9,8,3,.95); }
.poster h3 { font-size: clamp(19px, 2vw, 25px); font-weight: 400;
  letter-spacing: -.02em; color: #FFF; line-height: 1.08;
  text-shadow: 0 2px 16px rgba(9,8,3,.95); }
.poster .hstat { display: flex; align-items: baseline; gap: 7px; margin-top: 9px;
  font-family: var(--mono); font-size: 9px; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(247,245,239,.95);
  text-shadow: 0 1px 10px rgba(9,8,3,.95); }
.poster .hstat b { font-family: var(--sans); font-size: 15px; font-weight: 400;
  color: #FFD34D; letter-spacing: -.01em; }
.poster .go { position: absolute; right: 16px; bottom: 18px; display: inline-flex;
  align-items: center; gap: 6px; font-family: var(--mono); font-size: 8.5px;
  font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: #FFD34D; opacity: 0; transform: translateX(4px);
  transition: opacity .35s, transform .35s; }
.poster:hover .go { opacity: 1; transform: translateX(0); }

/* the toolbox marquee fades into the footage, not into a colour */
.mq { position: relative; overflow: hidden; padding: 8px 0; }
.mq::before, .mq::after { content: ""; position: absolute; top: 0; bottom: 0;
  width: 72px; z-index: 1; pointer-events: none; }
.mq::before { left: 0;
  background: linear-gradient(90deg, rgba(10,8,4,.85), transparent); }
.mq::after { right: 0;
  background: linear-gradient(-90deg, rgba(10,8,4,.85), transparent); }
.mq .track { display: flex; align-items: center; gap: 12px; width: max-content;
  animation: mqslide 46s linear infinite; }
.mq .track > * { flex: none; }
@keyframes mqslide { to { transform: translateX(-50%); } }
.tk { font-family: var(--mono); font-size: 10px; font-weight: 500;
  letter-spacing: .04em; color: var(--w); border-radius: 6px;
  background: rgba(255, 255, 255, .11); padding: 8px 13px; white-space: nowrap; }
.mqhead { display: flex; align-items: center; gap: 12px; margin: 52px 0 14px; }
.mqhead i { flex: 1; height: 1px; background: var(--gl-line); }
.mqhead .r { font-family: var(--mono); font-size: 9.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--w45); }
.workcta { display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 20px; margin-top: 48px; }
.workcta p { max-width: 34em; font-size: 14.5px; line-height: 1.7; color: var(--w72); }

/* ═══════ case-file lightbox ═══════ */
#cfile { position: fixed; inset: 0; z-index: 200; display: grid;
  place-items: center; padding: 16px; }
#cfile[hidden] { display: none; }
#cfile .veil { position: absolute; inset: 0; background: rgba(6,5,2,.7);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
#cfile .box { position: relative; z-index: 1; display: flex;
  flex-direction: column; width: min(760px, 100%); max-height: 90vh;
  border-radius: 22px; overflow: hidden; background: rgba(16, 12, 7, .9);
  border: 1px solid var(--gl-gold);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: 0 50px 120px -40px rgba(0,0,0,.85);
  animation: cfin .4s cubic-bezier(.22,1,.36,1); color: var(--w72); }
@keyframes cfin { from { opacity: 0; transform: scale(.95) translateY(18px); } }
#cfile .cover { position: relative; aspect-ratio: 16 / 6; flex: none;
  background: #0B0A06; }
#cfile .cover img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; }
#cfile .cover::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(11,10,6,.8)); }
#cfile .ctag { position: absolute; left: 20px; top: 16px; z-index: 1;
  font-family: var(--mono); font-size: 9px; font-weight: 600;
  letter-spacing: .24em; text-transform: uppercase; color: #FFD34D;
  background: rgba(12,10,4,.5); border: 1px solid rgba(255,184,0,.35);
  border-radius: 999px; padding: 6px 12px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
#cfile .x { position: absolute; right: 16px; top: 14px; z-index: 1; display: grid;
  place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(12,10,4,.5); border: 1px solid rgba(255,184,0,.35);
  color: #FFD34D; cursor: pointer;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
#cfile .cover h3 { position: absolute; left: 20px; right: 20px; bottom: 14px;
  z-index: 1; font-size: clamp(22px, 3.2vw, 36px); font-weight: 400;
  letter-spacing: -.02em; color: #F7F5EF; line-height: 1.05; }
#cfile .body { flex: 1; overflow-y: auto; padding: clamp(20px, 3vw, 30px); }
#cfile .toprow { display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 16px; margin-bottom: 18px; }
#cfile .conf2 { display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 9px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--w45); }
#cfile .conf2 i { width: 6px; height: 6px; border-radius: 50%; }
#cfile .hv { font-size: 26px; letter-spacing: -.02em; color: var(--w); }
#cfile .hk { font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold); }
#cfile .tag2 { font-size: 14px; line-height: 1.8; color: var(--w72);
  margin-bottom: 22px; }
#cfile .pb { display: grid; grid-template-columns: 1fr; gap: 1px;
  background: var(--gl-line); border: 1px solid var(--gl-line);
  border-radius: 14px; overflow: hidden; margin-bottom: 22px; }
@media (min-width: 620px) { #cfile .pb { grid-template-columns: 1fr 1fr; } }
#cfile .pb > div { padding: 18px; background: rgba(255,255,255,.03); }
#cfile .pb > div.g { background: rgba(232,181,77,.08); }
#cfile .pb .h { font-family: var(--mono); font-size: 8.5px; font-weight: 600;
  letter-spacing: .24em; text-transform: uppercase; color: var(--w45);
  margin-bottom: 8px; }
#cfile .pb .g .h { color: var(--gold); }
#cfile .pb p { font-size: 12.5px; line-height: 1.65; color: var(--w72); }
#cfile .oh { font-family: var(--mono); font-size: 8.5px; font-weight: 600;
  letter-spacing: .24em; text-transform: uppercase; color: var(--w45);
  margin-bottom: 10px; }
#cfile .outs { list-style: none; display: flex; flex-direction: column;
  gap: 10px; margin-bottom: 22px; }
#cfile .outs li { display: flex; align-items: flex-start; gap: 10px;
  font-size: 13px; line-height: 1.65; color: var(--w); }
#cfile .outs .pj { color: var(--w45); }
#cfile .outs .pj .pjt { font-family: var(--mono); font-size: 8.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--w45);
  margin-left: 6px; }
#cfile .outs .dot { width: 10px; height: 10px; flex: none; margin-top: 4px;
  border-radius: 50%; border: 1.5px dashed var(--w45); }
#cfile .stk { display: flex; flex-wrap: wrap; gap: 6px; }
#cfile .stk span { font-family: var(--mono); font-size: 9.5px; font-weight: 500;
  background: rgba(232,181,77,.07); color: var(--w72);
  border: 1px solid var(--gl-line); border-radius: 7px; padding: 5px 9px; }
#cfile .foot { display: flex; align-items: center; justify-content: space-between;
  flex: none; padding: 14px 20px; border-top: 1px solid var(--gl-line);
  background: rgba(0,0,0,.28); }
#cfile .foot button { display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--w72);
  background: none; border: 0; cursor: pointer; padding: 6px; }
#cfile .foot button:hover { color: var(--gold); }
#cfile .foot .ct { font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .28em; text-transform: uppercase; color: var(--w45); }

.keyline { max-width: 44em; margin-bottom: 44px; font-size: 13.5px;
  line-height: 1.75; color: var(--w45); }
.keyline b { font-weight: 500; color: var(--w); }

/* ═══════ SC.07 · the ledger ═══════ */
.ledgerhead { display: none; grid-template-columns: 1fr 1fr; gap: 48px;
  padding-bottom: 18px; }
@media (min-width: 860px) { .ledgerhead { display: grid; } }
.ledgerhead .h { display: flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: .3em; text-transform: uppercase; }
.ledgerhead .h i { flex: 1; height: 1px; }
.ledgerhead .l { color: var(--w45); } .ledgerhead .l i { background: var(--gl-line); }
.ledgerhead .r { color: var(--gold); } .ledgerhead .r i { background: var(--gold-30); }
.ledger { list-style: none; position: relative; }
.ledger::before { content: ""; position: absolute; inset: 0 auto 0 50%;
  width: 1px; background: var(--gl-line); display: none; }
@media (min-width: 860px) { .ledger::before { display: block; } }
.lrow { display: grid; grid-template-columns: 1fr; gap: 22px; padding: 34px 0;
  border-top: 1px solid var(--gl-line); }
@media (min-width: 860px) { .lrow { grid-template-columns: 1fr 1fr; gap: 48px; } }
.lrow .mrk { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; }
.lrow .mrk .n { font-family: var(--mono); font-size: 9.5px; letter-spacing: .22em;
  color: var(--w45); }
.lrow .mrk .badge2 { display: grid; place-items: center; width: 22px;
  height: 22px; border-radius: 50%; border: 1px solid var(--gl-line);
  color: var(--w45); }
.lrow .mrk .badge2.g { border-color: var(--gold-45); background: var(--gold-14);
  color: var(--gold); }
.lrow h3 { font-size: clamp(18px, 2vw, 24px); font-weight: 400;
  letter-spacing: -.015em; line-height: 1.18; margin-bottom: 9px; color: var(--w); }
.lrow .bought h3 { color: var(--w72); }
.lrow p { max-width: 34em; font-size: 13px; line-height: 1.75; color: var(--w45); }
.lrow .instead p { color: var(--w72); font-size: 13.5px; }

.prove { position: relative; overflow: hidden; padding: clamp(26px, 4vw, 44px);
  margin-top: clamp(48px, 7vh, 84px); }
/* decorative glow removed: the footage is the light source */
.prove .grid2 { display: grid; grid-template-columns: 1fr; gap: 36px;
  position: relative; z-index: 1; }
@media (min-width: 960px) { .prove .grid2 { grid-template-columns: 1fr 1fr; gap: 52px; } }
.prove h3 { font-size: clamp(24px, 3.2vw, 40px); font-weight: 400;
  letter-spacing: -.02em; line-height: 1.1; margin: 16px 0 18px; color: var(--w); }
.prove h3 .gl { color: var(--gold); font-style: italic; }
.prove .bd { max-width: 32em; margin-bottom: 14px; color: var(--w72); }
.prove .fine { font-size: 12.5px; line-height: 1.75; color: var(--w45);
  max-width: 32em; }
.prove ol { list-style: none; display: flex; flex-direction: column; gap: 18px;
  margin-bottom: 28px; }
.prove ol li { display: flex; gap: 14px; }
.prove ol .k { font-size: 16.5px; font-weight: 400; letter-spacing: -.01em;
  margin-bottom: 4px; color: var(--w); }
.prove ol p { font-size: 13px; line-height: 1.7; color: var(--w72); }
.winhead { font-family: var(--mono); font-size: 8.5px; letter-spacing: .28em;
  text-transform: uppercase; color: var(--w45); margin-bottom: 10px; }
.wins { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.wins span { font-family: var(--mono); font-size: 9.5px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--w);
  background: rgba(255,255,255,.11); border-radius: 6px; padding: 6px 12px; }

/* ═══════ SC.08 · assurance ═══════ */
.assur { display: grid; grid-template-columns: 1fr; gap: 44px; }
@media (min-width: 1020px) { .assur { grid-template-columns: 7fr 5fr; gap: 56px; } }
.assur h2 { color: var(--w); font-weight: 400; letter-spacing: -.028em;
  line-height: 1.07; }
.assur ol { list-style: none; display: flex; flex-direction: column; gap: 22px;
  margin-top: 34px; }
.assur ol li { display: flex; gap: 15px; }
.assur ol h3 { font-size: clamp(17px, 1.8vw, 20px); font-weight: 400;
  letter-spacing: -.015em; margin-bottom: 6px; color: var(--w); }
.assur ol p { max-width: 30em; font-size: 13.5px; line-height: 1.75;
  color: var(--w72); }
.vault { position: relative; border-radius: 18px; overflow: hidden;
  aspect-ratio: 16 / 10; margin-bottom: 22px; border: 1px solid var(--gl-line); }
.vault img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; }
.vault .cap2 { position: absolute; left: 14px; bottom: 12px; z-index: 1;
  font-family: var(--mono); font-size: 8.5px; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(247,245,239,.9);
  background: rgba(12,10,4,.55); border-radius: 999px; padding: 6px 12px;
  text-shadow: none;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.seal { padding: 24px; position: relative; overflow: hidden; }
/* decorative glow removed: the footage is the light source */
.seal .srow { display: flex; align-items: center; gap: 13px; margin-bottom: 20px;
  position: relative; z-index: 1; }
.seal .sic { display: grid; place-items: center; width: 32px; height: 32px;
  color: var(--gold); flex: none; }
.seal .se { font-family: var(--mono); font-size: 9px; letter-spacing: .28em;
  text-transform: uppercase; color: var(--gold); }
.seal .sh { font-size: 18px; font-weight: 400; letter-spacing: -.015em;
  color: var(--w); }
.seal ul { list-style: none; display: flex; flex-direction: column; gap: 9px;
  position: relative; z-index: 1; }
/* five boxed, gold-ticked, gold-tinted rows was a stack of five objects;
   now it is one list */
.seal ul li { display: flex; align-items: center; gap: 12px; padding: 9px 0;
  border-top: 1px solid rgba(255,255,255,.055); font-family: var(--mono);
  font-size: 10.5px; font-weight: 500; letter-spacing: .08em;
  text-transform: uppercase; color: var(--w72); }
.seal ul li:first-child { border-top: 0; }
.seal ul svg { width: 13px; height: 13px; flex: none; color: var(--w45); }
.bfor { margin-top: 28px; }
.bfor .chips { margin-top: 14px; }

/* ═══════ SC.09 · the line ═══════ */
#fit h2 { color: var(--w); font-weight: 400; letter-spacing: -.028em;
  line-height: 1.07; }
.fit { position: relative; display: grid; grid-template-columns: 1fr; gap: 36px;
  max-width: 980px; margin: 0 auto; }
@media (min-width: 860px) { .fit { grid-template-columns: 1fr 1fr; gap: 0; } }
.fit .div { position: absolute; inset: 8px auto 8px 50%; width: 1px;
  background: var(--gl-line); display: none; }
@media (min-width: 860px) { .fit .div { display: block; } }
.fit .div span { position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%); white-space: nowrap;
  font-family: var(--mono); font-size: 8.5px; font-weight: 700;
  letter-spacing: .3em; text-transform: uppercase; color: var(--w45);
  background: rgba(14, 10, 6, .82); border: 1px solid var(--gl-line);
  border-radius: 999px; padding: 6px 12px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.fit .colh { display: flex; align-items: center; gap: 12px; margin-bottom: 18px;
  font-family: var(--mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: .3em; text-transform: uppercase; }
.fit .colh i { flex: 1; height: 1px; }
.fit .yes2 .colh { color: var(--gold); }
.fit .yes2 .colh i { background: var(--gold-30); }
.fit .no2 .colh { color: var(--w45); }
.fit .no2 .colh i { background: var(--gl-line); }
@media (min-width: 860px) { .fit .yes2 { padding-right: 44px; }
  .fit .no2 { padding-left: 44px; } }
.fit ul { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.fit ul li { display: flex; align-items: flex-start; gap: 13px;
  border-radius: 14px; padding: 13px 14px; font-size: 14px; line-height: 1.65;
  transition: background .3s; }
.fit .yes2 li { color: var(--w); }
.fit .yes2 li:hover { background: rgba(232,181,77,.08); }
.fit .no2 li { color: var(--w45); }
.fit .no2 li:hover { background: rgba(255,255,255,.04); }
.fit .sig { display: grid; place-items: center; width: 26px; height: 26px;
  border-radius: 50%; flex: none; margin-top: 1px; }
.fit .yes2 .sig { border: 1px solid var(--gold-45); background: var(--gold-14);
  color: var(--gold); }
.fit .no2 .sig { border: 1px solid var(--gl-line); color: var(--w45); }

/* ═══════ SC.10 · engagement ═══════ */
.engsteps { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 900px) { .engsteps { grid-template-columns: repeat(3, 1fr); } }
.estep { display: flex; flex-direction: column; padding: 32px; }
.estep.free { border-color: var(--gold-45);
  background: linear-gradient(150deg, rgba(232,181,77,.12), var(--gl) 55%); }
.estep .met { display: flex; flex-wrap: wrap; align-items: center; gap: 11px;
  margin-bottom: 18px; }
.estep .met .n { font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: .2em; color: var(--w45); }
.estep .ic { display: grid; place-items: center; width: 34px; height: 34px;
  color: var(--gold); margin-bottom: 20px; margin-left: -4px; }
.estep .ic svg { width: 22px; height: 22px; }
.estep h3 { font-size: clamp(19px, 2vw, 25px); font-weight: 400;
  letter-spacing: -.02em; margin-bottom: 10px; color: var(--w); }
.estep .bd2 { font-size: 13px; line-height: 1.75; color: var(--w72);
  margin-bottom: 22px; flex: 1; }
/* the payoff is now the card's body, not a footnote, so it gets the room the
   removed paragraph left behind */
.estep .walk { border-top: 1px solid var(--gl-line); padding-top: 18px;
  margin-top: auto; }
.estep .walk p { font-size: 15px; line-height: 1.55; }
.estep .walk .wk { font-family: var(--mono); font-size: 8.5px; font-weight: 700;
  letter-spacing: .24em; text-transform: uppercase; color: var(--w45);
  margin-bottom: 5px; }
.estep .walk p { font-size: 12.5px; line-height: 1.6; color: var(--w); }

.clause { position: relative; overflow: hidden; border-radius: 22px;
  border: 1px solid var(--gold-45); padding: clamp(26px, 4.5vw, 52px);
  margin: clamp(40px, 6vh, 70px) 0; color: var(--w72);
  background: linear-gradient(140deg, rgba(232,181,77,.12) 0%, rgba(16,12,7,.72) 55%);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
/* decorative glow removed: the footage is the light source */
.clause .grid2 { display: grid; grid-template-columns: 1fr; gap: 26px;
  align-items: center; position: relative; z-index: 1; }
@media (min-width: 960px) { .clause .grid2 { grid-template-columns: 7fr 5fr; gap: 52px; } }
.clause .big { font-size: clamp(21px, 3.2vw, 38px); font-weight: 400;
  letter-spacing: -.015em; line-height: 1.3; margin-top: 16px;
  font-style: italic; color: var(--w); }
.clause .r p { font-size: 13.5px; line-height: 1.8; color: var(--w72); }
.clause .r p + p { margin-top: 12px; color: var(--w); }

.engrid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 1020px) { .engrid { grid-template-columns: 7fr 5fr; } }
.bands { padding: clamp(22px, 3vw, 34px); }
.bands .bh { display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.bands h3, .bill h3 { font-size: clamp(19px, 2vw, 24px); font-weight: 400;
  letter-spacing: -.02em; color: var(--w); }
.bands .fc { font-family: var(--mono); font-size: 8.5px; font-weight: 700;
  letter-spacing: .24em; text-transform: uppercase; color: var(--w45); }
.bands .intro { max-width: 34em; font-size: 13px; line-height: 1.75;
  color: var(--w72); margin: 8px 0 18px; }
.bands ul { list-style: none; }
.bandrow { display: grid; grid-template-columns: 1fr; gap: 10px; padding: 16px 0;
  border-top: 1px solid var(--gl-line); }
.bandrow:first-child { border-top: 0; }
@media (min-width: 720px) { .bandrow { grid-template-columns: 3fr 6fr 3fr;
  gap: 18px; align-items: baseline; } }
/* the bar beside it already carries the gold; two accents on one row is one
   too many */
.bandrow .wk2 { font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--w); }
.bandrow .nm2 { font-size: 16px; letter-spacing: -.01em; margin-top: 3px;
  color: var(--w); }
.bandrow .sc2 { font-size: 12.5px; line-height: 1.7; color: var(--w72); }
.bandrow .bar { height: 6px; border-radius: 3px; background: rgba(255,255,255,.1);
  overflow: hidden; }
.bandrow .bar i { display: block; height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, var(--gold-45), #E8B54D);
  box-shadow: 0 0 10px rgba(232,181,77,.4); }
.bill { display: flex; flex-direction: column; border-radius: 20px;
  border: 1px solid var(--gold-45); padding: clamp(22px, 3vw, 34px);
  color: var(--w72);
  background: linear-gradient(150deg, rgba(232,181,77,.12), rgba(16,12,7,.72) 55%);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.bill ul.rows { list-style: none; margin: 18px 0 22px; }
.bill .rw { display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 8px 16px; padding: 14px 0;
  border-top: 1px solid var(--gl-line); }
.bill .rw:first-child { border-top: 0; }
.bill .rw .k2 { font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--w); }
.bill .rw .n2 { font-size: 12px; line-height: 1.6; color: var(--w45);
  margin-top: 4px; max-width: 22em; }
.bill .quote { display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 8.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--w45);
  border: 1px dashed var(--w45); border-radius: 999px; padding: 6px 12px; }
.bill .quote::before { content: ""; width: 4px; height: 4px; border-radius: 50%;
  background: var(--gold); }
.bill ul.terms { list-style: none; display: flex; flex-direction: column;
  gap: 9px; margin-bottom: 26px; }

/* the four build windows and the billing rule, as one line instead of a
   four-row table and a three-row card that said "quoted in your plan" thrice */
.windows { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  margin-top: clamp(30px, 5vh, 54px); }
.windows span { font-family: var(--mono); font-size: 9.5px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--w72);
  background: rgba(255, 255, 255, .05); border-radius: 6px; padding: 8px 13px; }
.windows .wlab { background: none; padding: 8px 0; color: var(--w45);
  letter-spacing: .24em; font-weight: 700; }
.windows .wr { margin-left: auto; color: var(--gold); }
.lite .windows span { color: rgba(23, 20, 14, .55);
  background: rgba(23, 20, 14, .045); }
.lite .windows .wlab { background: none; color: rgba(23, 20, 14, .58); }
.lite .windows .wr { color: #7A5D00; }

/* ═══════ SC.11 · proof ═══════ */
.dis { font-family: var(--mono); font-size: 9.5px; letter-spacing: .26em;
  text-transform: uppercase; color: var(--w45); margin: -34px 0 44px; }
.proofs { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 900px) { .proofs { grid-template-columns: repeat(3, 1fr); } }
.pf { display: flex; flex-direction: column; padding: 32px; }
.pf .gauge { display: flex; align-items: flex-end; justify-content: space-between;
  border-bottom: 1px solid var(--gl-line); padding-bottom: 20px;
  margin-bottom: 20px; }
.pf .gv { font-size: clamp(40px, 4.4vw, 58px); letter-spacing: -.03em;
  line-height: 1; color: var(--w); }
.pf .gk { font-family: var(--mono); font-size: 9px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--gold); margin-top: 8px; }
.pf blockquote { flex: 1; font-size: 14px; line-height: 1.8; color: var(--w72); }
.pf figcaption { display: flex; align-items: center; gap: 11px; margin-top: 22px; }
.pf .mk2 { display: grid; place-items: center; width: 30px; height: 30px;
  border-radius: 50%; font-family: var(--mono); font-size: 9px;
  font-weight: 700; background: rgba(255,255,255,.06); color: var(--w45); }
.pf .who { font-family: var(--mono); font-size: 9.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--w45); }

/* the ticker is a credits crawl, so it gets a credits band: the dawn clip
   peaks almost white right here and the italics vanished into it */
.doct { border-top: 1px solid var(--gl-line); margin-top: clamp(56px, 8vh, 100px);
  padding: 26px 0 2px; background: rgba(8, 6, 3, .74);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.doct .tk2 { display: flex; align-items: center; gap: 40px; }
.doct .q { white-space: nowrap; font-size: clamp(19px, 2vw, 25px);
  font-style: italic; color: var(--w45);
  text-shadow: 0 1px 22px rgba(8,6,3,.85); }
.doct svg { width: 13px; height: 13px; flex: none; }

/* ═══════ SC.12 · the plan, the one lit console ═══════ */
#plan { position: relative; z-index: 3; background: transparent;
  padding: clamp(20px, 3vw, 40px) clamp(12px, 2vw, 32px) clamp(56px, 7vh, 96px); }
#plan .night { position: relative; max-width: 1380px; margin: 0 auto;
  border-radius: 32px; overflow: hidden; background: rgba(11, 10, 6, .82);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid rgba(255,184,0,.28);
  box-shadow: 0 60px 140px -50px rgba(0,0,0,.85); color: #F2EEDF; }
#plan .bgm { position: absolute; inset: 0; pointer-events: none; }
#plan .bgm img, #plan .bgm video { position: absolute; inset: 0; width: 100%;
  height: 100%; object-fit: cover; }
#plan .bgm img { opacity: .5; }
#plan .bgm video { opacity: 0; transition: opacity 1.2s ease; }
#plan .bgm video.on { opacity: .55; }
#plan .bgm video.on ~ img { opacity: 0; }
#plan .bgm .grade { position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(11,10,6,.96) 0%, rgba(11,10,6,.82) 42%,
    rgba(11,10,6,.45) 100%); }
#plan .horizon { position: absolute; inset: 0 0 auto; height: 1px; z-index: 1;
  background: linear-gradient(90deg, transparent, rgba(255,184,0,.7), transparent); }
#plan .inner { position: relative; z-index: 1; display: grid;
  grid-template-columns: 1fr; gap: 40px; padding: clamp(28px, 5vw, 72px); }
@media (min-width: 1020px) { #plan .inner { grid-template-columns: 5fr 7fr; gap: 40px; } }
#plan .eyebrow { color: #FFC53D; }
#plan .eyebrow::before { background: #FFB800; }
#plan h2 { font-size: clamp(32px, 4.6vw, 58px); font-weight: 400;
  letter-spacing: -.025em; line-height: 1.08; margin: 20px 0; color: #F2EEDF; }
#plan h2 em { font-style: italic; color: #FFC53D; }
#plan .lead2 { max-width: 26em; font-size: 14.5px; line-height: 1.85;
  color: rgba(242,238,223,.8); }
#plan .standby { display: flex; align-items: center; gap: 10px; margin-top: 34px; }
#plan .standby i { width: 6px; height: 6px; border-radius: 50%;
  background: #FFB800; animation: pulse 2s ease-in-out infinite; }
#plan .standby span { font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .3em; text-transform: uppercase; color: rgba(242,238,223,.62); }
#plan form { border-radius: 22px; padding: clamp(20px, 3vw, 30px);
  background: rgba(24,20,10,.55); border: 1px solid rgba(242,238,223,.12);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07); }
#plan label, #plan .flab { display: block; font-family: var(--mono);
  font-size: 9.5px; font-weight: 600; letter-spacing: .3em;
  text-transform: uppercase; color: #FFC53D; margin-bottom: 10px; }
#plan .flab { color: rgba(242,238,223,.82); }
#plan label .opt { color: rgba(242,238,223,.62); }
#plan textarea, #plan input { width: 100%; border-radius: 12px; padding: 13px 15px;
  font-family: var(--sans); font-size: 14px; line-height: 1.5; color: #F2EEDF;
  background: rgba(0,0,0,.35); border: 1px solid rgba(242,238,223,.12);
  outline: none; transition: border-color .3s; resize: none; }
#plan textarea:focus, #plan input:focus { border-color: rgba(255,184,0,.6); }
#plan textarea::placeholder, #plan input::placeholder { color: rgba(242,238,223,.3); }
#plan .tmpl { display: flex; flex-wrap: wrap; gap: 9px; }
#plan .tmpl button { font-family: var(--mono); font-size: 9.5px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: rgba(242,238,223,.8);
  background: transparent; border: 1px solid rgba(242,238,223,.12);
  border-radius: 999px; padding: 9px 15px; cursor: pointer; transition: all .3s; }
#plan .tmpl button[aria-pressed="true"] { background: #FFB800; color: #221A00;
  border-color: #FFB800; box-shadow: 0 8px 24px -8px rgba(255,184,0,.6); }
#plan .err { display: none; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .04em; color: #FCA5A5; margin-top: 14px; }
#plan .err.on { display: block; }
#plan .frow { display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 16px; margin-top: 24px; }
#plan .privacy { font-family: var(--mono); font-size: 8.5px; line-height: 1.7;
  letter-spacing: .16em; text-transform: uppercase; color: rgba(242,238,223,.62); }
#plan .m22 { margin-top: 22px; }

/* ═══════ the credits ═══════ */
footer.panel { padding: 0; background: rgba(6, 5, 3, .6);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  position: relative; overflow: hidden; z-index: 3;
  border-top: 1px solid var(--gl-line); color: var(--w72); }
footer .fwrap { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto;
  padding: clamp(56px, 8vh, 84px) 26px clamp(120px, 16vh, 170px); }
@media (min-width: 900px) { footer .fwrap { padding-left: 56px; padding-right: 56px; } }
footer .cols { display: grid; grid-template-columns: 1fr; gap: 40px; }
@media (min-width: 860px) { footer .cols { grid-template-columns: 5fr 2fr 3fr 2fr; } }
/* The footer is the one place with room for the full lockup, tagline and all —
   the bar can only carry the mark, where "intelligent technology engineered for
   you" would be four pixels tall. The typed LV8 + TECH badge this replaces was
   an approximation of artwork we now actually have. */
footer .brand .wm { display: inline-block; text-decoration: none; }
footer .brand .wm img { display: block; width: 250px; max-width: 100%; height: auto; }
footer .brand p { max-width: 20em; font-size: 13.5px; line-height: 1.7;
  color: var(--w72); margin-top: 16px; }
footer .brand .run { display: flex; align-items: center; gap: 10px; margin-top: 20px; }
footer .brand .run i { width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold); animation: pulse 2.2s ease-in-out infinite; }
footer .brand .run span { font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .3em; text-transform: uppercase; color: var(--w45); }
footer .colh2 { font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: .3em; text-transform: uppercase; color: #F0C368;
  margin-bottom: 14px; text-shadow: 0 1px 10px rgba(8, 6, 3, .8); }
footer .lks a { display: block; width: fit-content; font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--w45); text-decoration: none; padding: 4px 0; transition: color .3s; }
footer .lks a:hover { color: var(--gold); }
footer .legal { display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 10px; border-top: 1px solid var(--gl-line);
  margin-top: 48px; padding-top: 22px; }
footer .legal p { font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .22em; text-transform: uppercase; color: var(--w45); }
footer .legal a { color: var(--gold); text-decoration: none; }
footer .legal .tail { color: var(--w45); }
footer .monument { position: absolute; inset: auto 0 -2vw; z-index: 0;
  text-align: center; line-height: 1; pointer-events: none; user-select: none;
  font-size: clamp(96px, 18vw, 280px); font-weight: 400; letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.11);
  white-space: nowrap; text-shadow: none; }

/* ════════════════ THE WHITE INTERLUDES ════════════════
   Measured against the reference: it swings Y=20..232 (range 212); this page
   measured 27..93 (range 66). The swing IS the rhythm — dark theatrical
   footage punctuated by brilliant editorial frames. These scenes are opaque
   on purpose: they cover the film, and the film re-emerges after, which is
   the reference's actual cut. Motion is kept inside them (the drafting
   schematic draws, the headline inks in word by word), because an opaque
   section with no motion is what made the first attempt read as a brochure. */

/* .sec.panel { background: transparent } from the dark rewrite is (0,2,0) and
   was silently outranking .lite (0,1,0), so two of the three interludes stayed
   see-through and measured 56 and 79 instead of ~217. */
.lite { position: relative; z-index: 4; background: #F6F4EE; color: #17140E; }
/* NOT overflow:hidden on a .sec.lite — it clips the sticky pin inside
   #process, which then scrolls off and leaves a blank white frame. */
.band-lite { overflow: hidden; }
.sec.lite, .sec.panel.lite { background: #F6F4EE; color: #17140E;
  padding: clamp(112px, 17vh, 210px) 0; }
/* no legibility grade here: there is no footage to protect copy from */
.sec.lite::before { content: none; }
.lite .eyebrow { color: #7A5D00; }
.lite .eyebrow::before { background: rgba(122, 93, 0, .5); }

/* THE CURTAIN. The interlude is a panel sliding over a running camera, not a
   section boundary: its leading corners are rounded and it casts a shadow back
   onto the footage above and below it. */
.sec.lite, .sec.panel.lite, .band-lite {
  border-radius: clamp(26px, 3vw, 48px);
  box-shadow: 0 -30px 70px -30px rgba(0, 0, 0, .75),
               0 30px 70px -30px rgba(0, 0, 0, .75); }
/* the grid must not spill past the rounded corner */
.sec.lite, .sec.panel.lite, .band-lite { overflow: hidden; }
/* ...except where a sticky pin lives inside, which overflow would clip.
   #process gets the radius on an inner mask instead. */
#process.sec.lite, #process.sec.panel.lite { overflow: visible;
  border-radius: 0; box-shadow: none; background: transparent; }
#process .pinw2 { border-radius: clamp(26px, 3vw, 48px); background: #F6F4EE;
  box-shadow: 0 -30px 70px -30px rgba(0, 0, 0, .75),
               0 30px 70px -30px rgba(0, 0, 0, .75); }
#process .pinw2 .pinh2 { border-radius: inherit; }

/* the drafting layer: faint technical grid, plus-ticks on the intersections,
   and two hairline schematics — the reference lays exactly this under its
   white frames, and it is what keeps them from reading as blank slides */
.pinw .pinh > .draft, .pinw2 .pinh2 > .draft, .lite .draft, .draft {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  color: rgba(23, 20, 14, .17);
  background-image:
    linear-gradient(to right, rgba(23,20,14,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(23,20,14,.055) 1px, transparent 1px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='216' height='216'%3E%3Cpath d='M108 103v10M103 108h10' stroke='rgba(23,20,14,0.22)' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 216px 216px, 216px 216px, 216px 216px;
  background-position: 0 0, 0 0, 108px 108px; }
.draft .dsch { position: absolute; inset: 0; width: 100%; height: 100%; }
.draft .dpath { stroke-dasharray: 1 1; stroke-dashoffset: 1;
  opacity: .85; }
.lite > *:not(.draft) { position: relative; z-index: 1; }

/* THE BIG STATEMENT. The reference's white-scene headline fills the frame:
   ~4 lines at roughly a tenth of viewport height each, centred, near-black,
   tightly tracked, with most of the frame left empty around it. Mine were
   60px left-aligned in a 13.5em box — a caption by comparison. */
.bighead { font-weight: 400; letter-spacing: -.032em; line-height: 1.04;
  text-wrap: balance; text-align: center; color: #17140E;
  font-size: clamp(34px, 6.1vw, 88px); max-width: 17em;
  margin-left: auto; margin-right: auto; }
.bighead.xl { font-size: clamp(36px, 6.8vw, 104px); max-width: 15em; }
/* the scroll-driven ink fill: each word starts as pale draft and darkens as
   the scene passes through. page.js drives it off the scrub. */
.bighead .wfree { color: rgba(23, 20, 14, .16); transition: none; }

.litehead { display: flex; flex-direction: column; align-items: center;
  gap: 26px; text-align: center; }
.litesub { max-width: 32em; font-size: 15px; line-height: 1.8;
  color: rgba(23, 20, 14, .74); }

/* the standalone statement frame: mostly air, which is the whole point */
.band-lite { display: grid; place-items: center; min-height: 92svh;
  padding: clamp(80px, 14vh, 170px) 6vw; }

/* SC.03 on white: the spine and discs invert to drafting ink */
.lite .spine .rule { background: rgba(23, 20, 14, .12); }
.lite .spine .rule i { background: linear-gradient(90deg, #C9930A, #E8B54D);
  box-shadow: none; }
.lite .step4 .disc { background: #FFFEF9; border: 1px solid rgba(23,20,14,.12);
  box-shadow: 0 12px 30px -18px rgba(23, 20, 14, .3);
  -webkit-backdrop-filter: none; backdrop-filter: none; }
.lite .step4 .disc svg { color: rgba(23, 20, 14, .58); }
.lite .step4.lit .disc { border-color: rgba(232, 181, 77, .8);
  box-shadow: 0 0 0 4px rgba(232, 181, 77, .12), 0 12px 30px -18px rgba(23,20,14,.3); }
.lite .step4.lit .disc svg { color: #7A5D00; }
.lite .step4 h3 { color: #17140E; }
.lite .step4 p { color: rgba(23, 20, 14, .74); }
.lite .step4 .disc .nn { color: #221A00; }

/* SC.09 on white */
.lite .fit .div { background: rgba(23, 20, 14, .12); }
.lite .fit .div span { color: rgba(23, 20, 14, .5);
  background: #F6F4EE; border-color: rgba(23, 20, 14, .12);
  -webkit-backdrop-filter: none; backdrop-filter: none; }
.lite .fit .yes2 .colh { color: #7A5D00; }
.lite .fit .yes2 .colh i { background: rgba(232, 181, 77, .55); }
.lite .fit .no2 .colh { color: rgba(23, 20, 14, .58); }
.lite .fit .no2 .colh i { background: rgba(23, 20, 14, .12); }
.lite .fit .yes2 li { color: #17140E; }
.lite .fit .yes2 li:hover { background: rgba(232, 181, 77, .1); }
.lite .fit .no2 li { color: rgba(23, 20, 14, .58); }
.lite .fit .no2 li:hover { background: rgba(23, 20, 14, .035); }
.lite .fit .yes2 .sig { border-color: rgba(232,181,77,.7);
  background: rgba(232,181,77,.14); color: #7A5D00; }
.lite .fit .no2 .sig { border-color: rgba(23,20,14,.14); color: rgba(23,20,14,.3); }

/* copy inside a white scene must not carry the film's dark text shadow */
.sec.lite h2, .sec.lite h3, .sec.lite p, .sec.lite li, .sec.lite .eyebrow,
.lite *, .band-lite * { text-shadow: none; }

/* the letterbox and the grain belong to the film; they lift off the white
   scenes so an editorial frame reads as a clean page, not a video still */
.lite { --litehide: 1; }

@media (max-width: 900px) {
  .draft { background-size: 120px 120px, 120px 120px, 120px 120px;
    background-position: 0 0, 0 0, 60px 60px; }
  .band-lite { min-height: auto; }
}

/* ─── THUMBS ───
   Measured on a 390px screen, folding in any ::after hit pad: the footer's
   link columns were 22px tall, the plan console's template chips 33px, and the
   footer wordmark 28px. A pointer can hit a 22px row; a thumb cannot. These
   only change on touch-sized viewports, so the desktop rhythm is untouched. */
@media (max-width: 900px) {
  footer .lks a { padding: 15px 0; }
  footer .brand .wm { padding: 8px 0; }
  #plan .tmpl button { font-size: 10.5px; padding: 14px 17px; }
  #plan .tmpl { gap: 10px; }
}

/* ═══════ LIGHT-GROUND COMPONENTS ═══════
   Everything below re-grades the shared components for a white scene. The
   dark glass reads as a hole punched in the page on porcelain, so on .lite
   a card becomes paper: white fill, hairline rule, one soft shadow. */

.lite .cd { background: #FFFEF9; border: 1px solid rgba(23, 20, 14, .085);
  box-shadow: 0 18px 44px -30px rgba(23, 20, 14, .28);
  -webkit-backdrop-filter: none; backdrop-filter: none; color: rgba(23,20,14,.74); }
.lite h2, .lite h3, .lite h5, .lite .t { color: #17140E; }
.lite p, .lite li, .lite .bd, .lite .bd2, .lite .bl { color: rgba(23, 20, 14, .74); }
.lite .gl { color: #7A5D00; }

.lite .chips span, .lite .wins span, .lite .tk {
  color: rgba(23, 20, 14, .55); background: rgba(23, 20, 14, .045); }
.lite .badge { color: rgba(23, 20, 14, .58); }
.lite .badge.fill { color: #7A5D00; background: rgba(232, 181, 77, .2); }
.lite .nd { color: rgba(23, 20, 14, .38); }
.lite .ck { color: #17140E; }
.lite .ck svg { color: rgba(23, 20, 14, .4); }

/* service cards on paper */
.lite .svcard .meta .n { color: rgba(23, 20, 14, .38); }
.lite .svcard.flag { border-color: rgba(232, 181, 77, .55);
  background: linear-gradient(140deg, rgba(232,181,77,.09), #FFFEF9 45%); }
.lite .svcard .ph::after { background: linear-gradient(180deg,
  transparent 62%, rgba(23, 20, 14, .18)); }

/* line 05 opened out */
.lite #managed-it { background: #FFFEF9; }
.lite #managed-it .serif { color: #7A5D00; }
.lite #managed-it .zone { border-top-color: rgba(23, 20, 14, .085); }
.lite .subhead { color: #7A5D00; }
.lite .cover { background: rgba(23,20,14,.085);
  border-color: rgba(23, 20, 14, .085); }
.lite .cover .cell { background: #F6F4EE; }
.lite .cover .cell:hover { background: rgba(232, 181, 77, .12); }
.lite .cover .cell svg { color: rgba(23, 20, 14, .4); }
.lite .cover .cell .k { color: #17140E; }
.lite .cover .cell .d { color: rgba(23, 20, 14, .58); }
.lite .tier.chosen { border-color: rgba(232, 181, 77, .55);
  background: linear-gradient(150deg, rgba(232,181,77,.11), #FFFEF9 55%); }
.lite .tier .bf { border-color: rgba(23,20,14,.09);
  background: #F6F4EE; color: rgba(23, 20, 14, .55); }
.lite .tier .bf::before { background: rgba(23, 20, 14, .3); }
.lite .b-ink { background: rgba(23, 20, 14, .04); color: #17140E;
  border: 1px solid rgba(23, 20, 14, .16);
  -webkit-backdrop-filter: none; backdrop-filter: none; }
.lite .b-ink:hover { border-color: #17140E; }

/* the ledger, set as print */
.lite .ledgerhead .l { color: rgba(23, 20, 14, .58); }
.lite .ledgerhead .l i { background: rgba(23, 20, 14, .085); }
.lite .ledgerhead .r { color: #7A5D00; }
.lite .ledgerhead .r i { background: rgba(232, 181, 77, .5); }
.lite .ledger::before { background: rgba(23, 20, 14, .085); }
.lite .lrow { border-top-color: rgba(23, 20, 14, .085); }
.lite .lrow .mrk .n { color: rgba(23, 20, 14, .3); }
.lite .lrow .mrk .badge2 { border-color: rgba(23, 20, 14, .14);
  color: rgba(23, 20, 14, .3); }
.lite .lrow .mrk .badge2.g { border-color: rgba(232, 181, 77, .6);
  background: rgba(232, 181, 77, .16); color: #7A5D00; }
.lite .lrow h3 { color: #17140E; }
.lite .lrow .bought h3 { color: rgba(23, 20, 14, .74); }
.lite .lrow p { color: rgba(23, 20, 14, .58); }
.lite .lrow .instead p { color: rgba(23, 20, 14, .74); }

/* the free-plan card */
.lite .prove h3 .gl { color: #7A5D00; }
.lite .prove .fine { color: rgba(23, 20, 14, .58); }
.lite .prove ol .k { color: #17140E; }
.lite .winhead { color: rgba(23, 20, 14, .58); }
.lite .mq::before { background: linear-gradient(90deg, #F6F4EE, transparent); }
.lite .mq::after { background: linear-gradient(-90deg, #F6F4EE, transparent); }

/* SC.09 needed height: at 731px it was shorter than a viewport, so an
   even-interval sample never landed inside it and it read as no break at all */
#fit.sec.lite, #fit.sec.panel.lite { padding: clamp(140px, 22vh, 260px) 0; }

/* the three former inline colours, now cascade-controlled so a white
   interlude can re-grade them */
.mgbd { font-size: 13.5px; line-height: 1.75; color: var(--w72);
  margin-bottom: 20px; }
.provebd { font-size: 14px; line-height: 1.8; color: var(--w72); }
.lite .mgbd, .lite .provebd { color: rgba(23, 20, 14, .74); }
.lite .prove ol p, .lite .prove .bd { color: rgba(23, 20, 14, .74); }

/* mechanical sweep: every light-text rule gets a .lite counterpart, so
   nothing can render white-on-white inside a white interlude. Two had
   already slipped through by hand (.prove .bd, #managed-it h3). */
.lite #managed-it h3 { color: #17140E; }
.lite .assur h2 { color: #17140E; }
.lite .assur ol p { color: rgba(23, 20, 14, .74); }
.lite .ba .f { color: #17140E; }
.lite .ba .o { color: rgba(23, 20, 14, .58); }
.lite .bandrow .sc2 { color: rgba(23, 20, 14, .74); }
.lite .bands .intro { color: rgba(23, 20, 14, .74); }
.lite .bands h3 { color: #17140E; }
.lite .bill .rw .n2 { color: rgba(23, 20, 14, .58); }
.lite .bill h3 { color: #17140E; }
.lite .ck { color: #17140E; }
.lite .clause .big { color: #17140E; }
.lite .clause .r p + p { color: #17140E; }
.lite .cover .cell .d { color: rgba(23, 20, 14, .58); }
.lite .cover .cell svg { color: rgba(23, 20, 14, .58); }
.lite .doct .q { color: rgba(23, 20, 14, .58); }
.lite .estep .walk p { color: #17140E; }
.lite .estep h3 { color: #17140E; }
.lite .fit .div span { color: rgba(23, 20, 14, .58); }
.lite .fit .no2 .sig { color: rgba(23, 20, 14, .58); }
.lite .fit .no2 li { color: rgba(23, 20, 14, .58); }
.lite .fit .yes2 li { color: #17140E; }
.lite .keyline b { color: #17140E; }
.lite .ledgerhead .l { color: rgba(23, 20, 14, .58); }
.lite .lrow .mrk .badge2 { color: rgba(23, 20, 14, .58); }
.lite .lrow h3 { color: #17140E; }
.lite .lrow p { color: rgba(23, 20, 14, .58); }
.lite .move h3 { color: #17140E; }
.lite .pf .gv { color: #17140E; }
.lite .pf .mk2 { color: rgba(23, 20, 14, .58); }
.lite .pf blockquote { color: rgba(23, 20, 14, .74); }
.lite .pillar h3 { color: #17140E; }
.lite .prove .bd { color: rgba(23, 20, 14, .74); }
.lite .prove h3 { color: #17140E; }
.lite .prove ol .k { color: #17140E; }
.lite .seal .sh { color: #17140E; }
.lite .seal ul svg { color: rgba(23, 20, 14, .58); }
.lite .step4 .disc svg { color: rgba(23, 20, 14, .74); }
.lite .step4 p { color: rgba(23, 20, 14, .74); }
.lite .svcard h3 { color: #17140E; }
.lite .tier .bf { color: rgba(23, 20, 14, .74); }
.lite .tier .bl { color: rgba(23, 20, 14, .74); }
.lite .tk { color: rgba(23, 20, 14, .58); }
.lite .winhead { color: rgba(23, 20, 14, .58); }
.lite .wins span { color: rgba(23, 20, 14, .58); }
.lite .wkey .desc { color: rgba(23, 20, 14, .58); }
.lite .wkey .num { color: #17140E; }
/* Hand-written replacement for 13 rules the mechanical sweep mangled: its
   selector capture swallowed preceding comment text, and the resulting
   unclosed `/*` ate the `.lite ` prefix off the next rule — which left
   `.band h3` and `.bandrow .wk2` applying GLOBALLY, painting near-black
   type onto dark glass. Prefixes restored, comments out of the way. */
.lite .nd { color: rgba(23, 20, 14, .58); }
.lite .badge { color: rgba(23, 20, 14, .58); }
.lite .cd { color: rgba(23, 20, 14, .74); }
.lite .dis { color: rgba(23, 20, 14, .58); }
.lite .sec, .sec.lite { color: rgba(23, 20, 14, .74); }
.lite .band h3 { color: #17140E; }
.lite .bandrow .wk2 { color: #17140E; }
.lite .seal ul li { color: rgba(23, 20, 14, .74); }
.lite .seal ul svg { color: rgba(23, 20, 14, .4); }
.lite .estep .bd2 { color: rgba(23, 20, 14, .74); }
.lite .tier .bl { color: rgba(23, 20, 14, .74); }

/* Small type on the white interludes measured ~3.6:1 — the declutter left it
   at .58 alpha of the ink colour with almost no field behind it, which is fine
   for 15px prose and far too light for 9px uppercase mono. Raised to near-solid
   ink; the hierarchy is kept by SIZE and weight rather than by fading it out. */
/* measured 3.92-5.20:1 live at .82 alpha; the lowest sat under the 4.5:1 AA
   threshold and this is the smallest type on the page, so it goes near-solid */
.lite .chips span, .lite .wins span, .lite .tk {
  color: rgba(23, 20, 14, .95); background: rgba(23, 20, 14, .085); }
.lite .badge { color: rgba(23, 20, 14, .72); }
.lite .badge.fill { color: #6B5100; background: rgba(232, 181, 77, .3); }
.lite .svcard .meta .n, .lite .estep .met .n, .lite .lrow .mrk .n {
  color: rgba(23, 20, 14, .52); }
.lite .tier .bf, .lite .bands .fc, .lite .winhead, .lite .estep .walk .wk,
.lite .wkey .lab .b2, .lite .keyline { color: rgba(23, 20, 14, .68); }
.lite .cover .cell .d, .lite .lrow p { color: rgba(23, 20, 14, .66); }

.mgn { font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: .3em; color: var(--gold); }
.lite .mgn { color: rgba(23, 20, 14, .52); }
/* the ledger's column headers sit on paper at small size */
.lite .ledgerhead .l { color: rgba(23, 20, 14, .62); }

/* ═══════ THE ENGINE SCENE ═══════
   A blueprint held over the film: near-black drafting space, the real
   lead-to-cash pipeline drawn in hairlines that fill on the scrub, and a
   packet travelling the spine. This is the beat the reference places between
   its hero footage and its first white frame, and it is the only place on the
   page that shows the software working rather than the office it runs. */
.eng { background: rgba(6, 5, 3, .9); z-index: 4; padding: 0; }
.eng::before { content: none; }
.engpin { height: 260vh; }
.enghold { position: sticky; top: 0; height: 100svh; display: flex;
  flex-direction: column; justify-content: center; overflow: hidden; }
.eng .wrap { text-align: center; }
.eng .eyebrow { justify-content: center; }
.eng .eh { color: var(--w); max-width: 20em;
  margin: 24px auto clamp(44px, 8vh, 96px); }

.engdia { position: relative; width: 100%; max-width: 1200px; margin: 0 auto; }
.engsvg { display: block; width: 100%; height: auto; }
/* the measured register: two fine rules framing the drawing */
.engsvg .erule path { stroke: rgba(255, 255, 255, .09); stroke-width: 1; fill: none; }
/* a dim track with the gold fill drawn over it on the scrub */
.engsvg .espine { stroke: rgba(255, 255, 255, .13); stroke-width: 1.5; fill: none; }
.engsvg .eflow { stroke: var(--gold); stroke-width: 1.5; fill: none;
  filter: drop-shadow(0 0 6px rgba(232, 181, 77, .45)); }
.engsvg .enode rect { fill: rgba(11, 9, 6, .92); stroke: rgba(255, 255, 255, .18);
  stroke-width: 1; transition: stroke .45s, fill .45s; }
.engsvg .enode .etick { stroke: rgba(255, 255, 255, .26); stroke-width: 1;
  fill: none; transition: stroke .45s; }
.engsvg .enode.lit rect { stroke: var(--gold); fill: rgba(232, 181, 77, .13); }
.engsvg .enode.lit .etick { stroke: var(--gold); }
.engsvg .epacket { fill: #FFD34D;
  filter: drop-shadow(0 0 9px rgba(255, 211, 77, .85)); }

/* station captions, tied to their node by position */
.engdia .est { position: absolute; top: 57%; transform: translateX(-50%);
  width: 14em; display: flex; flex-direction: column; align-items: center;
  gap: 7px; opacity: .28; transition: opacity .5s ease; }
.engdia .est.lit { opacity: 1; }
.engdia .enum { font-family: var(--mono); font-size: 8.5px; font-weight: 700;
  letter-spacing: .26em; color: var(--gold); }
.engdia .ename { font-size: 15px; letter-spacing: -.01em; color: var(--w); }
.engdia .erec { font-family: var(--mono); font-size: 8.5px; line-height: 1.65;
  letter-spacing: .1em; text-transform: uppercase; color: var(--w45);
  max-width: 13em; }

.engfoot { display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: 10px 26px; margin-top: clamp(40px, 7vh, 86px); }
.engfoot .efa { color: var(--w72); transition: opacity .5s; }
.engfoot .efb { color: var(--gold); opacity: 0; transition: opacity .5s; }
.engfoot.done .efa { opacity: .3; }
.engfoot.done .efb { opacity: 1; }

@media (max-width: 900px) {
  .engpin { height: auto; }
  .enghold { position: static; height: auto;
    padding: clamp(88px, 12vh, 150px) 0; overflow: visible; }
  .engsvg { display: none; }
  .engdia .est { position: static; transform: none; width: auto; opacity: 1;
    margin-top: 22px; }
}

/* ── the rolling slate ── */
#slate2 { position: fixed; left: 26px; bottom: 24px; z-index: 60;
  display: flex; align-items: center; gap: 10px; pointer-events: none;
  opacity: 0; transition: opacity .4s ease; }
#slate2.on { opacity: 1; }
#slate2.on { padding: 5px 12px 5px 6px; border-radius: 999px;
  background: rgba(10, 8, 4, .66); border: 1px solid var(--gl-line);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
#slate2 .pill2 { font-family: var(--mono); font-size: 9px; font-weight: 600;
  letter-spacing: .1em; color: var(--on-gold); padding: 4px 8px;
  border-radius: 999px; background: linear-gradient(180deg, #FFD34D, #E8B54D); }
#slate2 .mn2 { font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--w72);
  text-shadow: 0 1px 18px rgba(8,6,3,.9); }

/* The letterbox is the film's frame, and the film is now the whole page, so
   the mattes ride above the content scenes rather than being painted over by
   them. Below the nav (80); the slate (60) stays under. */
#mattes { z-index: 62; }

/* film furniture lifts off the white editorial frames */
:root.on-lite #mattes, :root.on-lite #grainpg, :root.on-lite #slate2 {
  opacity: 0; transition: opacity .45s ease; }
#mattes, #grainpg { transition: opacity .45s ease; }

/* one emulsion over the whole picture */
/* This one was the worse of the two: fixed at z-index 85, so its blend mode
   made the compositor read back the ENTIRE composited page every frame, not
   just the film. See the note on #film .grain in work.css for the numbers. */
#grainpg { position: fixed; inset: 0; z-index: 85; pointer-events: none;
  opacity: .025; }

/* word machinery */
.wclip { display: inline-block; overflow: hidden; vertical-align: bottom;
  padding-bottom: .2em; margin-bottom: -.2em; }
.wclip .wword { display: inline-block; will-change: transform; }
.wfree { display: inline-block; white-space: pre;
  will-change: transform, opacity, filter; }

/* buttons keep the film's grammar on glass: the porcelain ink button
   would have been an opaque slab in the middle of the picture.
   Glass, but not a BLUR — this one sits on the film, and a backdrop-filter over a
   texture that changes every frame forces the compositor to read the backdrop
   back and re-filter it every frame. See the note on #nav .pill in work.css.
   A brighter flat plate reads as the same glass against footage this dark. */
.b-ink { background: rgba(255,255,255,.13); color: var(--w);
  border: 1px solid var(--w22); }
.b-ink:hover { border-color: var(--w); }

@media (max-width: 1100px) { #slate2, #grainpg { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .mq .track { animation: none; }
  [data-grow] { transform: none; transition: none; }
  #grainpg, #slate2 { display: none; }
}

/* ─── THE MICRO-LABEL REGISTER, ON A PHONE ───
   The 8-9.5px mono caption voice is deliberate and it works at desk distance
   on a wide screen. At arm's length on a 390px screen it stops reading as
   quiet and starts reading as unreadable — and a lot of what it carries is not
   decoration: the honesty disclaimer, the privacy notice, the form labels, the
   case-card metadata, the footer legal, the outcome sentences. Raised to the
   same 10.5px floor as .cap, with the tracking eased so the extra size does
   not cost line length.

   Every selector written out by hand and scoped to its parent. A regex sweep
   over this stylesheet once captured comment text into selectors and applied
   two rules globally; the classes here are short enough (.f .o .n .k) that a
   loose match would do it again.

   Left alone on purpose: .mn ("Scroll"), the SVG diagram labels, and the
   wordmark's TECH badge. Those are one-word chrome with nothing to read. */
@media (max-width: 900px) {
  .engdia .erec,
  .eyebrow,
  .poster .cat, .poster .conf, .poster .idx, .poster .hstat, .poster .go,
  .badge,
  .vault .cap2,
  .seal .se,
  .estep .walk .wk,
  .pf .who, .pf .gk,
  .dis,
  .gaugerow .k, .gaugerow .n,
  .cover .cell .k,
  .fit .colh,
  .ba .f, .ba .o,
  footer .colh2, footer .legal p, footer .brand .run span,
  #plan .privacy, #plan label, #plan .flab, #plan label .opt,
  .statstrip .st .k,
  .ledgerhead .h,
  .fit .div span,
  /* #plan .standby span carries an id, so a bare .standby span loses to it */
  #plan .standby span,
  .chips span, .lite .chips span,
  #cfile .oh, #cfile .pb .h, #cfile .foot button,
  .scene .pin .mn em {
    font-size: 10.5px; letter-spacing: .1em;
  }
}

/* The pillar schematics are pinned to height:56px, so preserveAspectRatio
   scales them to 150x56 and their labels render at a literal 6.5px however
   wide the card is. In one column a phone gives these cards ~300px of width
   and nothing is using it. Let width drive the scale instead: the drawing
   grows, and the labels grow with it. */
@media (max-width: 899px) {
  .pillar .dia svg { height: auto; aspect-ratio: 150 / 56; }
}