/* ============================================================
   FRONTLINE WEB DESIGNS - v8 "Instrument"
   Demo stylesheet, phase 1 of 5. Parallel to styles.css and styles-v7.css,
   nothing here is live.

   The register: the page as a live instrument panel. A crosshair field, readouts
   pinned to the corners, controls that advertise their own keyboard shortcut, and
   one refractive object doing the heavy visual lifting behind real type.

   WHAT IS DELIBERATELY NOT CARRIED OVER from the reference: it has zero h1/h2/h3
   and sets overflow:hidden on both html and body, so its document is exactly one
   viewport tall and cannot be scrolled, paged, or reached with End. That is a
   WCAG 2.1.1 failure and it is invisible to Google. The look survives without it.

   Type is v7's two families at a completely different scale relationship: the
   display face runs 4x larger and much tighter, and the mono carries every readout.
   New voice out of scale, not out of new fonts.
   ============================================================ */

:root{
  --mark:  "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --ease:  cubic-bezier(.22,1,.36,1);
  --gut:   clamp(18px,3vw,44px);
}

/* ---------- Themes ----------
   Three grounds, cycled by THEME[T]. The control is only worth having if the
   themes mean something, so these are the three grounds the brand actually owns:
   the paper v7 established, night, and ember. Every value below is a token, so
   the cycle is one attribute swap and nothing else in the sheet knows about it. */
:root,
[data-theme="dawn"]{
  --bg:      #E8E9E4;
  --bg-2:    #DDDED7;
  --ink:     #12151A;      /* 15.6:1 on --bg */
  --ink-2:   #454B52;      /* 7.3:1 */
  /* MEASURED against the rendered ground, not against --bg: #5C6268 is 5.2:1 on the
     flat paper but only 4.33:1 on the brightest part of the refraction environment,
     which is what the readouts actually sit on. Darkened until it clears there. */
  --ink-3:   #565C62;      /* 4.74:1 on the brightest sampled ground pixel */
  --accent:  #B32F0D;      /* 5.5:1 */
  --hair:    rgba(18,21,26,.16);
  --hair-2:  rgba(18,21,26,.34);
  --env-a:   #BBD7EE;      /* the refraction environment, low */
  --env-b:   #F3EFE6;      /* high */
  --env-bg-i: 1;           /* how brightly that environment paints the GROUND */
  --card:    #F6F5F1;
  --on-accent: #FFFFFF;    /* white on --accent #B32F0D is 5.4:1 */
}
[data-theme="night"]{
  --bg:      #0B0E11;
  --bg-2:    #14181D;
  --ink:     #F2F0EA;      /* 16.1:1 on --bg */
  --ink-2:   #C4C8CC;      /* 10.6:1 */
  --ink-3:   #9AA1A8;      /* 6.6:1 */
  --accent:  #FF6A3D;      /* 7.4:1 on --bg. Never used as a fill under white. */
  --hair:    rgba(242,240,234,.15);
  --hair-2:  rgba(242,240,234,.32);
  --env-a:   #16202B;
  --env-b:   #4E6275;
  --env-bg-i: .30;
  --card:    #131820;
  --on-accent: #16100D;   /* DARK on --accent: white on #FF6A3D is 2.9:1 and fails */
}
[data-theme="ember"]{
  --bg:      #16100D;
  --bg-2:    #1F1611;
  --ink:     #FBF1E9;      /* 15.2:1 */
  --ink-2:   #D8C6BA;      /* 9.6:1 */
  --ink-3:   #AD988B;      /* 5.6:1 */
  --accent:  #FF7A2F;      /* 8.2:1 */
  --hair:    rgba(251,241,233,.15);
  --hair-2:  rgba(251,241,233,.32);
  --env-a:   #2A1408;
  --env-b:   #C4551C;
  --env-bg-i: .34;
  --card:    #1E1611;
  --on-accent: #16100D;   /* same reason */
}

*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:2rem;
  /* NOT overflow:hidden. See the header comment. */
}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink-2);
  font-family:var(--mono);
  font-size:13px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
  transition:background .45s var(--ease),color .45s var(--ease);
}
p{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit;padding:0}
svg{display:block}
/* Was missing from this reset, and the run-sheet and sample images hid it because they
   sit in overflow:hidden frames with object-fit. The station photo does not, so its
   intrinsic 1080px width pushed the whole band to 1114px on a 390 viewport. */
img{max-width:100%;height:auto;display:block}

/* Two rings, not one. A single accent outline can land on a refraction highlight close
   to it in value; the outer ring in the page ground guarantees a separating edge no
   matter what the canvas is doing behind the control. */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;
  box-shadow:0 0 0 4px var(--bg)}

/* visually hidden, still announced */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* A control that cannot work without JS should not be offered. Without it the theme
   cycle and the sound toggle are dead buttons, and the clock and coordinates would sit
   frozen at their placeholders, which reads as a broken instrument rather than an absent
   one. The page loses nothing: every word on it is real text either way. */
html:not(.js) .hd--nav button,
html:not(.js) .hd--clock,
html:not(.js) .hd--coord{display:none}

.skip{position:absolute;left:-9999px;top:8px;z-index:300;background:var(--accent);color:#fff;
  padding:12px 18px;font-family:var(--mono);font-size:12px;letter-spacing:.06em}
.skip:focus{left:16px}

/* ---------- Hero shell ---------- */
.hero{
  position:relative;
  min-height:100svh;              /* svh, so mobile browser chrome cannot clip the claim */
  display:flex;
  overflow:hidden;
  isolation:isolate;
}
.hero__canvas{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:-1;
  opacity:0;
  transition:opacity 1.2s var(--ease);
}
.hero__canvas.on{opacity:1}
/* Before the canvas exists, and forever if it never loads, the environment is a
   plain CSS gradient built from the same two tokens the 3D scene uses. So the hero
   is never an empty box: the refraction is an upgrade to a background that already
   looks deliberate. */
.hero::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(120% 90% at 72% 18%, var(--env-b) 0%, transparent 62%),
    radial-gradient(100% 80% at 22% 88%, var(--env-a) 0%, transparent 58%),
    var(--bg);
  transition:background .45s var(--ease);
}

/* ---------- The crosshair field ---------- */
.grid{position:absolute;inset:0;z-index:-1;pointer-events:none}
.grid svg{width:100%;height:100%}
.grid__l line{stroke:var(--hair);stroke-width:.12;vector-effect:non-scaling-stroke}
.tick{position:absolute;width:11px;height:11px;transform:translate(-50%,-50%)}
.tick::before,.tick::after{content:"";position:absolute;background:var(--hair-2)}
.tick::before{left:0;right:0;top:50%;height:1px}
.tick::after{top:0;bottom:0;left:50%;width:1px}

/* ---------- Readout layout ----------
   A 3-column x 3-row frame pinned to the viewport edges. Everything sits in a real
   grid rather than absolute coordinates, so it reflows instead of colliding. */
.hero__in{
  position:relative;width:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.15fr);
  /* Four real rows: nav, then the prose, then the spacer, then the baseline. The first
     version faked the second row with padding-top on two blocks, which left their boxes
     sitting inside the nav's row. It looked right and measured as an overlap, and a
     padding-faked row is exactly the thing that collapses at the next breakpoint. */
  grid-template-rows:auto auto 1fr auto;
  gap:1.4rem var(--gut);
  padding:calc(var(--gut) * .8) var(--gut);
}
.hd{font-family:var(--mono);font-size:12.5px;letter-spacing:.02em;color:var(--ink-2)}
.hd--brand{grid-column:1;grid-row:1/span 2}
.mark{font-size:12px;font-weight:500;letter-spacing:.1em;color:var(--ink)}
.hd__big{margin-top:2.2rem;font-family:var(--mark);font-weight:700;font-size:clamp(1.5rem,2.4vw,2rem);
  line-height:1.02;letter-spacing:-.03em;color:var(--ink)}
.hd--creed{grid-column:2;grid-row:2}
.hd--bio{grid-column:3;grid-row:2;max-width:44ch}
.hd--nav{grid-column:3;grid-row:1;display:flex;gap:1.6rem;justify-content:flex-end;align-self:start}
.hd--nav a,.hd--nav button{font-size:12px;letter-spacing:.1em;color:var(--ink);
  transition:color .2s var(--ease)}
.hd--nav button{display:inline-flex;align-items:baseline;gap:.45rem}
/* the current value, in words. Colour is reinforcement here, never the only signal. */
.st{color:var(--ink-3);font-size:11px;letter-spacing:.08em}
.hd--nav button[aria-pressed="true"] .st{color:var(--accent)}

/* the claim: huge, tight, and the only display type on the screen */
.claim{
  grid-column:1/3;grid-row:4;align-self:end;margin:0 0 1.6rem;
  font-family:var(--mark);font-weight:800;
  font-size:clamp(2.6rem,7.4vw,7.2rem);
  line-height:.9;letter-spacing:-.045em;color:var(--ink);
}
/* one mask per line, self-measuring at every breakpoint. The negative margin with
   matching padding is what keeps the mask off the descenders. */
.claim__l{display:block;overflow:hidden;margin-bottom:-.1em;padding-bottom:.1em}
.claim__l > span{display:block;animation:cl-up 1s var(--ease) both}
.claim__l:nth-child(2) > span{animation-delay:.09s}
.claim__l:nth-child(3) > span{animation-delay:.18s}
@keyframes cl-up{ 0%{transform:translateY(100%)} }

.hd--clock{grid-column:1;grid-row:4;align-self:end;color:var(--ink-3)}
.hd--coord{grid-column:2;grid-row:4;align-self:end;color:var(--ink-3);text-align:center}
.hd--loc{grid-column:3;grid-row:4;align-self:end;color:var(--ink-3);text-align:right;letter-spacing:.1em}
/* no pointer, no coordinates: a frozen readout is worse than none */
@media (hover:none),(pointer:coarse){ .hd--coord{visibility:hidden} }

/* a grid item, hidden on desktop where the fold is obvious and the readouts sit low */
.scrollcue{display:none;align-items:center;gap:.5rem;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--ink-3)}
.scrollcue svg{width:14px;height:14px;animation:cue 2.4s var(--ease) infinite}
@keyframes cue{ 0%,100%{transform:translateY(0);opacity:.5} 50%{transform:translateY(4px);opacity:1} }

/* the other 0%-only entry animations, so a cancelled animation leaves the readout
   at its natural visible state rather than at opacity 0 */
.hd{animation:hd-in .8s var(--ease) both}
.hd--creed{animation-delay:.1s}
.hd--bio{animation-delay:.16s}
.hd--nav{animation-delay:.06s}
.hd--clock,.hd--coord,.hd--loc{animation-delay:.34s}
@keyframes hd-in{ 0%{opacity:0;transform:translateY(10px)} }

/* Every readout gets its OWN row here. The first version reused the desktop rows and
   stacked four blocks into two cells, so the brand lockup printed straight through the
   nav and the clock printed through the location line. Nothing overflowed, which is
   why an overflow check passed it: overlap is a different question and needs its own
   assertion. */
@media (max-width:900px){
  .hero__in{
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto auto auto auto 1fr auto auto;
    gap:1rem var(--gut);
  }
  .hd--brand{grid-column:1/-1;grid-row:1}
  .hd__big{margin-top:1.1rem}
  .hd--nav{grid-column:1/-1;grid-row:2;justify-content:flex-start;gap:1.1rem;flex-wrap:wrap;padding-top:0}
  .hd--creed{grid-column:1/-1;grid-row:3;padding-top:0}
  .hd--bio{grid-column:1/-1;grid-row:4;padding-top:0;max-width:none}
  .claim{grid-column:1/-1;grid-row:5;align-self:end;margin-bottom:1.8rem}
  .hd--clock{grid-column:1;grid-row:6;align-self:end}
  .hd--loc{grid-column:2;grid-row:6;align-self:end;text-align:right}
  .hd--coord{display:none}          /* no mouse, so it would never leave 0000 */
  /* its own row under the readouts, so it cannot land on top of them */
  .scrollcue{grid-column:1/-1;grid-row:7;display:flex;justify-content:center;margin-top:.4rem}
}

/* ============================================================
   PHASE 2 - THE SYSTEM
   Everything below is what phase 4 builds the real page out of. Nothing here is
   specific to one section, and nothing is decoration for its own sake.

   THE ONE PLACE THE REFERENCE STOPS BEING BORROWABLE: it sets every block in mono
   because it has no long-form content anywhere. This page has rate descriptions,
   findings lists and FAQ answers, so mono is scoped to LABELS, META AND READOUTS,
   and body copy runs in the display family at 400. Still two families.
   ============================================================ */

/* ---------- Shell ---------- */
.wrap{width:100%;max-width:1400px;margin-inline:auto;padding-inline:var(--gut)}
.sec{padding:clamp(3.4rem,7vw,6.5rem) 0;border-top:1px solid var(--hair-2)}

/* ---------- Type scale ----------
   Four sizes and no more. The hero claim is the fifth and it is deliberately far
   above the rest: the gap between it and h2 is what makes the hero read as the
   masthead rather than as the first section. */
.t-label{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent)}
.t-h2{font-family:var(--mark);font-weight:800;font-size:clamp(1.7rem,3.9vw,3.4rem);
  line-height:.98;letter-spacing:-.038em;color:var(--ink);margin:0}
.t-h3{font-family:var(--mark);font-weight:700;font-size:clamp(1.05rem,1.5vw,1.3rem);
  line-height:1.15;letter-spacing:-.02em;color:var(--ink);margin:0}
/* body is the DISPLAY family at 400, not the mono. 66ch cap because a full-width
   line at this size is unreadable regardless of how good the face is. */
.t-body{font-family:var(--mark);font-weight:400;font-size:clamp(14px,1.02vw,16px);
  line-height:1.65;color:var(--ink-2);max-width:66ch}
.t-meta{font-family:var(--mono);font-size:12px;letter-spacing:.02em;color:var(--ink-3)}
code{font-family:var(--mono);font-size:.92em;color:var(--accent)}

/* ---------- Section head ----------
   The label sits in its own narrow column so the heading has a hard left edge to
   hang from, which is the one structural idea carried straight over from v7. */
.head{display:grid;grid-template-columns:minmax(0,140px) minmax(0,1fr);
  gap:clamp(.8rem,2vw,2.4rem);align-items:start}
.head__b{display:grid;gap:1rem}
@media (max-width:820px){ .head{grid-template-columns:1fr;gap:.9rem} }

/* ---------- Rules and surfaces ---------- */
.card{background:var(--card);border:1px solid var(--hair-2);padding:clamp(1.1rem,2vw,1.6rem)}
.rule{height:1px;background:var(--hair-2);border:0;margin:0}

/* ---------- Controls ----------
   Carried from the v7 motion research and not re-derived: hover is fenced on
   capability so a full inversion cannot stick to a thumb-tapped button, the bare
   variant's underline wipes in from the left with the origin flip, and every hover
   rule has a :focus-visible partner so the keyboard is never second class. */
.btn{display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  padding:.9rem 1.3rem;min-height:44px;border:1px solid var(--hair-2);color:var(--ink);
  background:transparent;transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.btn--go{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn--bare{border:0;padding:.6rem 0;min-height:44px;position:relative}
.btn--bare::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--hair-2)}
.btn--bare::before{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accent);
  transform:scaleX(0);transform-origin:100% 50%;transition:transform .45s var(--ease);z-index:1}
.btn--bare:hover::before,.btn--bare:focus-visible::before{transform:scaleX(1);transform-origin:0 50%}
.btn--bare:hover,.btn--bare:focus-visible{color:var(--accent)}
@media (hover:hover) and (pointer:fine){
  .btn:hover{background:var(--ink);border-color:var(--ink);color:var(--bg)}
  .btn--go:hover{background:var(--ink);border-color:var(--ink);color:var(--bg)}
  .btn--bare:hover{background:none}
}

/* ---------- Inline link ---------- */
.lnk{color:var(--accent);border-bottom:1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  transition:border-color .2s var(--ease)}
.lnk:hover,.lnk:focus-visible{border-bottom-color:var(--accent)}

/* ---------- Field ----------
   150ms on the focus underline, and :user-invalid rather than :invalid so a required
   field is never red before it has been touched. */
.field{display:grid;gap:.35rem}
.field label{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.field input,.field textarea{font-family:var(--mark);font-size:15px;color:var(--ink);background:transparent;
  border:0;border-bottom:1px solid var(--hair-2);padding:.65rem 0;min-height:44px;
  transition:border-bottom-color 150ms var(--ease)}
.field textarea{resize:vertical;min-height:88px}
.field input:focus,.field textarea:focus{outline:none;border-bottom-color:var(--accent)}
.field input:focus-visible,.field textarea:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.field input:user-invalid,.field textarea:user-invalid{border-bottom-color:var(--accent)}

/* ============================================================
   PHASE 4 - THE PAGE
   Built entirely from the phase-2 primitives. Every structural decision below is
   carried from the measured flow pass, not re-invented: label strips at about a
   sixth of a screen, proof bracketing the offer, the ask at ~0.8 depth, an FAQ as
   the last thing before the footer, and a footer under ten links.
   ============================================================ */

/* ---------- Label strip ---------- */
.band{border-block:1px solid var(--hair-2);background:var(--bg-2);padding:2.4rem 0}
.band__in{display:flex;align-items:baseline;gap:1.1rem;flex-wrap:wrap}
.band__k{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent)}
.band__n{font-family:var(--mark);font-weight:800;letter-spacing:-.03em;color:var(--ink);
  font-size:clamp(1.15rem,2vw,1.7rem)}

/* the RESERVED ground. Two sections wear it and no others, so it reads as a label
   rather than as decoration: the client statement and the closing form. */
.sec--mark{background:var(--bg-2)}

.go{display:flex;flex-wrap:wrap;gap:1.4rem;margin-top:2rem;align-items:center}
.note{margin-top:2rem;font-family:var(--mono);font-size:11.5px;line-height:1.8;
  color:var(--ink-3);max-width:74ch}

/* ---------- Pinned section heading ----------
   One declaration, no JS: the heading stays visible for as long as its content is on
   screen, so a long list never loses the label explaining what it belongs to.
   align-items:start is what gives the sticky item somewhere to travel. */
@media (min-width:1081px){
  .pinwrap{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);
    gap:clamp(1.5rem,3vw,3.5rem);align-items:start}
  .pinwrap > .head{grid-column:1;grid-template-columns:1fr;gap:.9rem;
    position:sticky;top:2rem}
  .pinwrap > .runs{grid-column:2}
  .pinwrap > .go{grid-column:2;margin-top:1.6rem}
}

/* ---------- Run sheet ---------- */
.runs{display:grid;gap:2.2rem}
.run{border:1px solid var(--hair-2);background:var(--card)}
.run__bar{display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;align-items:baseline;
  padding:.7rem 1.1rem;border-bottom:1px solid var(--hair-2);background:var(--bg-2)}
.run__no{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.run__loc{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);margin-right:auto}
.run__st{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  padding:.2rem .55rem;border:1px solid currentColor}
.run__st--live{color:var(--ink)}
.run__st--soon{color:var(--accent)}

.run__id{padding:1.3rem 1.1rem 1rem;border-bottom:1px solid var(--hair)}
.run__id .t-meta{margin-top:.4rem}
.run__body{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr)}
.run__view{padding:1.1rem;border-right:1px solid var(--hair)}
.run__notes{padding:1.1rem}
@media (max-width:900px){
  .run__body{grid-template-columns:1fr}
  .run__view{border-right:0;border-bottom:1px solid var(--hair)}
}

/* THE CONTROL AND ITS CONSEQUENCE RUN AT DIFFERENT SPEEDS. 200ms on the button,
   400ms on the image crossfade it causes. The control answers instantly and the world
   catches up; one duration for both is the tell of a merely functional toggle. Nothing
   here touches layout, so the row cannot reflow. */
.tog{display:inline-flex;border:1px solid var(--hair-2);margin-bottom:.85rem}
.tog button{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  padding:.5rem .9rem;min-height:38px;color:var(--ink-2);
  transition:background 200ms var(--ease),color 200ms var(--ease)}
.tog button + button{border-left:1px solid var(--hair-2)}
.tog button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
@media (hover:hover) and (pointer:fine){
  .tog button:hover[aria-pressed="false"]{color:var(--accent)}
}
@media (pointer:coarse){ .tog button{min-height:44px;padding-inline:1.15rem} }

.shot{position:relative;border:1px solid var(--hair);aspect-ratio:16/10;overflow:hidden;background:var(--bg-2)}
.shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;
  opacity:0;transition:opacity .4s var(--ease)}
.shot img.is-on{opacity:1}
html:not(.js) .shot img:first-of-type{opacity:1}   /* no JS: show a frame, not an empty box */
.shot__cap{margin-top:.65rem;line-height:1.55}

.rec__h{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  padding-bottom:.5rem;border-bottom:1px solid var(--hair-2);margin:0 0 .2rem}
.rec__h--f{color:var(--accent)}
.rec__h--s{color:var(--ink)}
.rec ol{margin:0;padding:0;list-style:none}
.rec li{display:grid;grid-template-columns:2rem 1fr;gap:.6rem;padding:.6rem 0;
  border-bottom:1px solid var(--hair);font-family:var(--mark);font-size:14px;
  line-height:1.5;color:var(--ink-2)}
.rec li:last-child{border-bottom:0}
.rec li b{font-family:var(--mono);font-size:11px;font-weight:400;color:var(--ink-3);padding-top:.15rem}

.run__say{padding:1rem 1.1rem;border-top:1px solid var(--hair);
  font-family:var(--mark);font-weight:700;font-size:clamp(1rem,1.35vw,1.2rem);
  line-height:1.3;letter-spacing:-.02em;color:var(--ink)}
.run__say .em{color:var(--accent)}

/* ---------- Rate schedule ---------- */
.rate{margin-top:2.4rem;border-top:1px solid var(--hair-2)}
.rate__row{display:grid;grid-template-columns:2.2rem minmax(0,1fr) auto;gap:.5rem 1.5rem;
  padding:1.4rem 0;border-bottom:1px solid var(--hair);align-items:baseline}
.rate__no{font-family:var(--mono);font-size:11px;color:var(--ink-3)}
/* wraps below 820: nowrap here set the column's min-content to 440px, which on a phone
   pushed the row past the viewport and clipped the last tier off the end */
.rate__p{font-family:var(--mono);font-size:12px;letter-spacing:.02em;color:var(--accent);
  text-align:right;white-space:nowrap}
.rate__row p{grid-column:2/-1;margin-top:.35rem}
.rate__go{grid-column:2/-1;display:flex;flex-wrap:wrap;gap:1.2rem;margin-top:1rem;align-items:center}
a.rate__row{transition:background .2s var(--ease)}
a.rate__row:focus-visible h3{color:var(--accent)}
a.rate__row h3::after{content:" \2197";color:var(--accent);font-size:.8em}
@media (hover:hover) and (pointer:fine){
  a.rate__row:hover{background:var(--bg-2)}
  a.rate__row:hover h3{color:var(--accent)}
}
@media (max-width:820px){
  .rate__row{grid-template-columns:2.2rem 1fr}
  .rate__p{grid-column:2/-1;text-align:left;margin-top:.2rem;white-space:normal}
  .rate__row p,.rate__go{grid-column:1/-1}
}

/* ---------- Client statement ---------- */
.quote{margin:2.4rem 0 0;font-family:var(--mark);font-weight:800;
  font-size:clamp(1.4rem,3vw,2.5rem);line-height:1.14;letter-spacing:-.035em;
  color:var(--ink);max-width:26ch}
.quote__by{margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--hair-2);
  font-family:var(--mono);font-size:12px;color:var(--ink-3)}

/* ---------- Samples ---------- */
.samples{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem;margin-top:2.6rem}
.sample__shot{border:1px solid var(--hair);overflow:hidden;background:var(--card)}
.sample img{width:100%;transition:transform .6s var(--ease)}
.sample h3{margin-top:.85rem}
.sample h3::after{content:" \2197";color:var(--accent);font-size:.8em}
.sample p{margin-top:.3rem;max-width:36ch}
/* the scale lives inside an overflow:hidden frame, so the hit target's own box never
   changes: a hover that resizes what you are pointing at oscillates */
@media (hover:hover) and (pointer:fine){
  .sample:hover img,.sample:focus-visible img{transform:scale(1.03)}
}
@media (max-width:900px){ .samples{grid-template-columns:1fr;gap:2.2rem} }

/* ---------- Station ---------- */
.about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(1.6rem,4vw,3.6rem);align-items:center;margin-top:2.6rem}
.about figure{margin:0}
.fr{border:1px solid var(--hair-2);padding:7px;background:var(--card)}
.about figcaption{margin-top:.7rem}
.vals{margin:0;padding:0;list-style:none;border-top:1px solid var(--hair-2)}
.vals li{display:grid;grid-template-columns:2rem 1fr;gap:.6rem;padding:.9rem 0;
  border-bottom:1px solid var(--hair);font-family:var(--mark);font-size:14.5px;color:var(--ink-2)}
.vals li b{font-family:var(--mono);font-size:11px;font-weight:400;color:var(--ink-3);padding-top:.1rem}
.vals li i{font-style:normal;color:var(--ink);font-weight:700}
@media (max-width:900px){ .about{grid-template-columns:1fr} }

/* ---------- Standards ---------- */
.std{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:2.6rem;
  border-top:1px solid var(--hair-2)}
.std__c{padding:1.6rem 1.5rem 0 0;border-right:1px solid var(--hair)}
.std__c:last-child{border-right:0;padding-right:0}
.std__c .t-label{display:block;margin-bottom:.55rem}
.std__c h3{margin-bottom:.6rem}
@media (max-width:900px){
  .std{grid-template-columns:1fr;border-top:0}
  .std__c{padding:1.4rem 0 0;border-right:0;border-top:1px solid var(--hair)}
}

/* ---------- The ask ---------- */
.close{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(1.8rem,4vw,4rem);align-items:start;margin-top:2.4rem}
.close__alt{margin-top:1.5rem;line-height:1.8}
.ask{display:grid;gap:1.1rem;max-width:34rem;align-content:start}
.ask button{margin-top:.3rem;justify-content:center}
@media (max-width:900px){ .close{grid-template-columns:1fr} }

/* ---------- FAQ ----------
   The box is never animated. The good reference sites left the panel's own transition
   at `all 0s` and moved only what is inside it, which is also the only thing that
   survives display:none. The marker runs 200ms against the panel's 300ms, so the panel
   reads as following the chevron rather than racing it. */
.faq{margin-top:2.4rem;border-top:1px solid var(--hair-2)}
.faq__i{border-bottom:1px solid var(--hair)}
.faq__i summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  justify-content:space-between;gap:1.5rem;padding:1.1rem 0;min-height:44px;
  font-family:var(--mark);font-weight:700;letter-spacing:-.02em;color:var(--ink);
  font-size:clamp(1rem,1.35vw,1.18rem);line-height:1.3}
.faq__i summary::-webkit-details-marker{display:none}
.faq__m{position:relative;flex:0 0 14px;height:14px}
.faq__m::before,.faq__m::after{content:"";position:absolute;inset:50% 0 auto 0;height:1.5px;
  background:var(--accent);transition:transform 200ms var(--ease)}
.faq__m::after{transform:rotate(90deg)}
.faq__i[open] .faq__m::after{transform:rotate(0deg)}
.faq__a{padding:0 0 1.2rem;animation:faq-in .3s var(--ease) both}
@keyframes faq-in{ 0%{opacity:0;transform:translateY(-6px)} }
@media (hover:hover) and (pointer:fine){ .faq__i summary:hover{color:var(--accent)} }

/* ---------- Footer ---------- */
.foot{border-top:1px solid var(--hair-2);background:var(--bg-2);padding-top:clamp(2.4rem,5vw,4rem)}
.foot__top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:2.4rem;
  padding-bottom:clamp(2.4rem,5vw,4rem)}
.foot__reg{font-style:normal;line-height:2}
.foot__co{color:var(--ink)}
.foot__soc{display:flex;gap:.6rem;margin-top:1.2rem}
.foot__soc a{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--hair-2);color:var(--ink-2)}
.foot__soc svg{width:17px;height:17px}
.foot__nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 2rem;align-content:start}
.foot__nav a{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-2);padding:.5rem 0;min-height:44px;display:flex;align-items:center;
  border-bottom:1px solid var(--hair)}
@media (hover:hover) and (pointer:fine){
  .foot__nav a:hover,.foot__soc a:hover{color:var(--accent)}
  .foot__soc a:hover{border-color:var(--accent)}
}
.foot__end{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
  padding:1.3rem 0 0;border-top:1px solid var(--hair-2);text-transform:uppercase}
.foot__disc{padding:1.1rem 0 clamp(2.4rem,5vw,4rem);line-height:1.75;max-width:82ch}
@media (max-width:900px){
  .foot__top{grid-template-columns:1fr}
  .foot__nav{grid-template-columns:1fr}
}

/* ---------- Reveal ----------
   The measured reference numbers: 24px not 100px, 0.6s, a decelerating curve, a 90ms
   ladder that resets per section, and it fires once. A reveal that replays on scroll-up
   is the loudest slop tell there is. `.js` gates the hidden state, so a page whose
   script never runs renders as ordinary visible content. */
.js .rv{opacity:0;transform:translateY(24px)}
.js .rv.on{opacity:1;transform:none;
  transition:opacity .6s var(--ease),transform .6s var(--ease);
  transition-delay:calc(var(--i,0) * 90ms)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.001ms!important}
  /* every keyframe above defines 0% only, so cancelling them lands on the natural
     visible state and nothing needs an explicit reset here */
}