/* ==========================================================================
   NOI ENGINE · NIGHT WATCH · site.css
   The shared component layer. Depends entirely on /assets/tokens.css.

   RULES FOR BUILDERS
   1. Link this file. Never inline a private copy, never fork it per page.
   2. If a page needs a value, take it from tokens.css. No raw hex in a page.
   3. A page may add a <style> block ONLY for layout that exists on that one
      page and nowhere else. If two pages need it, it belongs here.
   4. Never add a second motion primitive. .rv is the only one.
   ========================================================================== */

/* ── RESET ─────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:clip}
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  scroll-padding-top:calc(var(--chrome-h) + var(--space-4));
  background:var(--field);
  color-scheme:dark;
}
body{
  background:var(--field);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:var(--w-body);
  font-size:var(--fs-body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-synthesis-weight:none;
}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
table{border-collapse:collapse;width:100%}
::selection{background:rgba(233,185,79,.26);color:var(--ink)}

/* ── FOCUS ─────────────────────────────────────────────────────────────
   Visible on every interactive element, at every width, always.        */
:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:var(--r-focus);
}
.skip:focus-visible{outline-color:var(--ink)}

/* ── SKIP LINK ─────────────────────────────────────────────────────────
   Required on every page. Target is the page's <main id="main">.        */
.skip{
  position:absolute;left:-9999px;top:0;z-index:var(--z-skip);
  background:var(--gold);color:var(--on-gold);
  padding:12px 18px;font-weight:var(--w-semi);font-size:14px;
  border-radius:var(--r-focus);
}
.skip:focus{left:12px;top:12px}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.nowrap{white-space:nowrap}
/* the only two visibility utilities on the site. 760px is the phone/tablet
   boundary and matches the chrome breakpoint block below. */
.hide-s{display:initial}
.show-s{display:none}

/* ==========================================================================
   1 · MICRO / TELEMETRY TYPE
   The cartographic register. Data as ornament that is also proof.
   ========================================================================== */
.micro{
  font-family:var(--font-micro);
  font-size:var(--fs-micro);
  font-weight:400;
  letter-spacing:var(--ls-micro);
  text-transform:uppercase;
  color:var(--ink-3);
  line-height:var(--lh-micro);
  font-variant-numeric:tabular-nums;
}
.micro b,.micro strong{color:var(--ink-2);font-weight:500}
.micro-gold{color:var(--gold)}

/* ==========================================================================
   2 · EDGE-ALIGNED CHROME
   There is no navigation bar on this site. There is a mark on the left
   edge behind a vertical rule, minimal links on the right edge, and one
   gradient-stroke CTA pill. Do not centre it. Do not add a container.
   ========================================================================== */
/* The chrome is EXACTLY --chrome-h tall, border included, at every width.
   That is what makes --chrome-h safe to use for .chrome-spacer, for the
   menu sheet's top padding and for scroll-padding-top. Never set vertical
   padding on .mark or .chrome-right: change --chrome-h instead. */
.chrome{
  position:fixed;inset:0 0 auto 0;z-index:var(--z-chrome);
  height:var(--chrome-h);
  display:flex;align-items:stretch;
  border-bottom:1px solid var(--line-soft);
}
/* The scrim and the blur live on a pseudo-element, NOT on .chrome itself.
   backdrop-filter on .chrome would make it the containing block for the
   fixed-position menu sheet and trap the sheet inside the header band.
   Do not move these two declarations back onto .chrome. */
.chrome::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:var(--scrim-chrome);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.mark{
  display:flex;align-items:center;gap:11px;
  padding:0 26px;border-right:1px solid var(--line-soft);
  flex:0 1 auto;min-width:0;
}
.mark svg{width:24px;height:24px;flex:none}
.mark-word{
  font-size:13px;font-weight:var(--w-semi);letter-spacing:var(--ls-mark);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.chrome-right{
  margin-left:auto;display:flex;align-items:center;gap:26px;
  padding:0 26px;flex:0 0 auto;min-width:0;
}
.chrome-link{
  font-size:12.5px;font-weight:var(--w-med);letter-spacing:.02em;
  color:var(--ink-2);white-space:nowrap;
  transition:color var(--dur-ui) var(--ease-out);
}
.chrome-link:hover{color:var(--ink)}
.chrome-link[aria-current="page"]{color:var(--ink)}
.chrome-link[aria-current="page"]::after{
  content:"";display:block;height:1px;margin-top:5px;background:var(--accent-grad);
}

/* the one gradient-stroke pill. border-box gradient, transparent centre. */
.chrome-cta{
  font-family:var(--font-micro);font-size:var(--fs-micro);
  letter-spacing:var(--ls-cta);text-transform:uppercase;
  color:var(--ink);white-space:nowrap;flex:none;
  padding:10px 18px;border-radius:var(--r-pill);
  border:1px solid transparent;
  background:
    linear-gradient(var(--field),var(--field)) padding-box,
    var(--accent-grad) border-box;
  transition:box-shadow var(--dur-ui) var(--ease-out);
}
.chrome-cta:hover{box-shadow:var(--glow-gold)}

/* ── the index. a <details>, so it works with JavaScript disabled.
   It is present at EVERY width, which is what lets the chrome carry only
   four quick links and still put all seven pages one click away. ────── */
.menu{position:relative;flex:none}
.menu-btn{
  font-family:var(--font-micro);font-size:var(--fs-micro);
  letter-spacing:var(--ls-cta);text-transform:uppercase;
  color:var(--ink-2);white-space:nowrap;list-style:none;
  padding:10px 2px;transition:color var(--dur-ui) var(--ease-out);
}
.menu-btn::-webkit-details-marker{display:none}
.menu-btn:hover{color:var(--ink)}
.menu-btn .lbl-close{display:none}
.menu[open] .menu-btn .lbl-open{display:none}
.menu[open] .menu-btn .lbl-close{display:inline}
.menu[open] .menu-btn{color:var(--ink)}

.menu-sheet{
  position:fixed;inset:0;z-index:var(--z-sheet);  /* -1. see tokens.css. */
  padding:calc(var(--chrome-h) + var(--space-5)) var(--gutter) var(--space-5);
  background:var(--field);
  display:flex;flex-direction:column;gap:var(--space-5);
  overflow-y:auto;overscroll-behavior:contain;
}
.menu[open] .menu-sheet{animation:sheet-in var(--dur-sheet) var(--ease-out) both}
@keyframes sheet-in{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}

.menu-list{display:flex;flex-direction:column}
.menu-item{
  display:grid;grid-template-columns:34px minmax(0,1fr);gap:14px;align-items:baseline;
  padding:14px 0;border-bottom:1px solid var(--line-soft);
}
.menu-item .idx{font-family:var(--font-micro);font-size:11px;letter-spacing:.1em;color:var(--ink-3)}
.menu-item .lbl{
  font-family:var(--font-display);font-weight:var(--w-display);
  font-size:clamp(21px,6.2vw,30px);line-height:1.1;letter-spacing:-.02em;
  color:var(--ink);
}
.menu-item[aria-current="page"] .lbl{
  background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.menu-foot{margin-top:auto;display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5)}
.menu-foot a{font-size:15px;color:var(--ink-2)}
.menu-foot a:hover{color:var(--gold)}

/* lock the page behind an open sheet, and make the chrome band opaque so
   the sheet does not show through it. Both are pure CSS: the menu works
   with JavaScript disabled. site.js only adds Escape-to-close,
   close-on-navigate and close-on-resize. */
html:has(.menu[open]){overflow:hidden}
html:has(.menu[open]) .chrome::before{
  background:var(--field);backdrop-filter:none;-webkit-backdrop-filter:none;
}

/* pushes interior-page content clear of the fixed chrome. Pages that open
   with .fold do NOT need this; .fold pads itself. */
.chrome-spacer{height:var(--chrome-h)}

/* ==========================================================================
   3 · LAYOUT PRIMITIVES
   ========================================================================== */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);width:100%}

.band{border-top:1px solid var(--line-soft);padding:var(--band-y) 0;position:relative}
.band--tight{padding:var(--band-y-tight) 0}
.band--flush{border-top:0}
.band--raised{background:var(--field-2)}

.band-head{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(20px,4vw,60px);align-items:end;margin-bottom:clamp(38px,5vw,72px);
}
.band-note{
  font-size:var(--fs-body-s);line-height:var(--lh-loose);
  color:var(--ink-2);max-width:var(--measure-note);
}
.band-note b,.band-note strong{color:var(--ink);font-weight:var(--w-med)}

/* two-column body, hard-left, nothing centred */
.split{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,4vw,64px);align-items:start;
}
.split--wide-left{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
.split--wide-right{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr)}

/* ==========================================================================
   4 · DISPLAY TYPE
   Archivo 200, very large, tight leading, hard-left. Never centred.
   ========================================================================== */
h1,.h1{
  font-family:var(--font-display);font-weight:var(--w-display);
  font-size:var(--fs-h1);line-height:var(--lh-h1);letter-spacing:var(--ls-display);
  max-width:var(--measure-head);overflow-wrap:anywhere;
}
.fold h1,.h-display{
  font-size:var(--fs-display);line-height:var(--lh-display);
}
h2,.h2{
  font-family:var(--font-display);font-weight:var(--w-display);
  font-size:var(--fs-h2);line-height:var(--lh-h2);letter-spacing:var(--ls-h2);
  max-width:var(--measure-head);overflow-wrap:anywhere;
}
h3,.h3{
  font-family:var(--font-body);font-weight:var(--w-body);
  font-size:var(--fs-h3);line-height:var(--lh-h3);letter-spacing:var(--ls-h3);
}
h4,.h4{
  font-family:var(--font-body);font-weight:var(--w-med);
  font-size:var(--fs-h4);line-height:1.35;letter-spacing:-.006em;
}

/* THE GRADIENT PHRASE. Exactly one per page. Never a whole heading. */
.lift{
  background:var(--accent-grad);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;font-weight:var(--w-lift);
}
@supports not ((background-clip:text) or (-webkit-background-clip:text)){
  .lift{color:var(--gold);background:none}
}

.eyebrow{display:flex;align-items:baseline;gap:14px;margin-bottom:clamp(20px,2.6vw,34px)}
.eyebrow .dot{
  width:6px;height:6px;border-radius:50%;background:var(--gold);
  flex:none;transform:translateY(-2px);
}
/* In a fold that carries a photograph, the eyebrow is the one micro run that
   crosses the masked frame. Measured against the real image it lands at
   4.56:1 in --ink-3 at 1440 and 4.57:1 at 1280, which clears 4.5:1 by about
   one percent. Lift it one step so the margin is real: --ink-2 measures 6.63
   and 6.65 at the same two points. Interior folds keep --ink-3. */
.photo--fold ~ .fold-inner .eyebrow{color:var(--ink-2)}

.lede{
  font-size:var(--fs-lede);line-height:var(--lh-loose);
  color:var(--ink-2);max-width:var(--measure);
}
.lede b,.lede strong{color:var(--ink);font-weight:var(--w-med)}

/* long-form body copy */
.prose{max-width:var(--measure-prose)}
.prose > * + *{margin-top:var(--space-3)}
.prose p,.prose li{font-size:var(--fs-body-s);line-height:var(--lh-loose);color:var(--ink-2)}
.prose b,.prose strong{color:var(--ink);font-weight:var(--w-med)}
.prose h2,.prose h3{color:var(--ink)}
.prose h2{margin-top:var(--space-6)}
.prose h3{margin-top:var(--space-5)}
.prose ul{display:flex;flex-direction:column;gap:var(--space-2)}
.prose ul li{padding-left:20px;position:relative}
.prose ul li::before{
  content:"";position:absolute;left:0;top:.72em;
  width:7px;height:1px;background:var(--gold);
}
.prose ol{counter-reset:n;display:flex;flex-direction:column;gap:var(--space-2)}
.prose ol li{counter-increment:n;padding-left:28px;position:relative}
.prose ol li::before{
  content:counter(n,decimal-leading-zero);position:absolute;left:0;top:.15em;
  font-family:var(--font-micro);font-size:11px;letter-spacing:.1em;color:var(--ink-3);
}

.link-inline{
  color:var(--ink);
  border-bottom:1px solid var(--line-strong);
  transition:border-color var(--dur-ui) var(--ease-out),color var(--dur-ui) var(--ease-out);
}
.link-inline:hover{color:var(--gold);border-bottom-color:var(--gold)}

/* ==========================================================================
   5 · THE FOLD
   Cinematic for exactly one fold, then the document.
   ========================================================================== */
.fold{
  position:relative;min-height:100svh;overflow:hidden;
  display:grid;grid-template-rows:1fr auto auto;
  padding-top:clamp(96px,11vh,132px);
  padding-bottom:clamp(18px,2.6vh,30px);
}
.fold--page{min-height:auto;padding-top:clamp(112px,15vh,180px);padding-bottom:clamp(30px,5vh,64px)}
.fold-inner{
  position:relative;z-index:var(--z-fold);
  width:100%;max-width:var(--maxw);margin:0 auto;
  padding:0 var(--gutter);align-self:center;
}
.fold-body{
  margin-top:clamp(26px,3.4vw,44px);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,clamp(280px,26vw,340px));
  gap:clamp(24px,4vw,56px);align-items:end;
}

/* ==========================================================================
   6 · MASKED PHOTOGRAPHY
   The photograph dissolves INTO the field. Two nested masks: the wrapper
   carries the horizontal dissolve, the <img> carries the vertical one.
   There is no scrim, no overlay rectangle, no ::after tint. Darkening
   happens on the image itself with filter, which is not a scrim.
   ========================================================================== */
.photo{
  position:relative;
  -webkit-mask-image:var(--mask-x-none);mask-image:var(--mask-x-none);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
.photo img{
  width:100%;height:100%;object-fit:cover;
  filter:var(--photo-filter);
  -webkit-mask-image:var(--mask-y-soft);mask-image:var(--mask-y-soft);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}

/* the fold photograph: absolutely placed against the right edge */
.photo--fold{
  position:absolute;top:0;right:0;bottom:0;width:62%;
  -webkit-mask-image:var(--mask-x-right);mask-image:var(--mask-x-right);
}
.photo--fold img{
  object-position:58% 50%;
  -webkit-mask-image:var(--mask-y-fold);mask-image:var(--mask-y-fold);
}

/* an in-flow photograph inside a band */
.photo--band{
  width:100%;aspect-ratio:16/7;
  -webkit-mask-image:var(--mask-x-soft);mask-image:var(--mask-x-soft);
}
.photo--band img{height:100%}

/* a flat graphic texture used as a rule or a divider */
.photo--strip{
  width:100%;aspect-ratio:1200/220;
  -webkit-mask-image:var(--mask-x-soft);mask-image:var(--mask-x-soft);
}
.photo--strip img{height:100%;filter:var(--photo-filter-flat)}

.photo-credit{
  margin-top:var(--space-2);
  font-family:var(--font-micro);font-size:var(--fs-micro-s);
  letter-spacing:var(--ls-micro);text-transform:uppercase;color:var(--ink-3);
}

/* ==========================================================================
   7 · THE CUT RULE
   A hairline that cuts across the fold carrying the trust facts.
   ========================================================================== */
.cut{
  position:relative;z-index:var(--z-rule);
  display:flex;align-items:center;justify-content:space-between;
  gap:6px clamp(16px,2.4vw,30px);flex-wrap:wrap;
  padding:9px var(--gutter);margin-top:clamp(26px,4vh,52px);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  /* OPAQUE on purpose. This bar carries the trust facts and it slices
     across the photograph. A translucent bar cannot guarantee AA over an
     arbitrary frame, and these two facts are the ones a CFO must read. */
  background:var(--field);
}
.cut .live{display:flex;align-items:center;gap:9px}
.cut .pulse{
  width:5px;height:5px;border-radius:50%;background:var(--gold);flex:none;
  animation:pulse 2.8s var(--ease-in-out) infinite;
}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.78)}}

/* a plain hairline for use inside a band */
.rule{height:1px;background:var(--line-soft);border:0;margin:var(--space-5) 0}

/* ==========================================================================
   8 · TELEMETRY
   Portfolio data in mono along the bottom edge. EVERY NUMBER IS TEXT IN
   THE HTML. Never animate a number. Never render one from JavaScript.
   ========================================================================== */
.telemetry{
  position:relative;z-index:var(--z-rule);
  padding:14px var(--gutter) 0;background:var(--field);
  display:flex;flex-wrap:wrap;gap:6px clamp(16px,2.4vw,30px);
}

/* the same idea as a block inside a band */
.stat-row{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(0,160px));
  gap:var(--space-4) clamp(24px,4vw,56px);
  border-top:1px solid var(--line);padding-top:var(--space-4);
}
.stat .n{
  display:block;font-family:var(--font-display);font-weight:var(--w-display);
  font-size:clamp(28px,3.2vw,44px);line-height:1;letter-spacing:-.02em;
  color:var(--ink);font-variant-numeric:tabular-nums;
}
.stat .k{display:block;margin-top:9px}

/* ==========================================================================
   9 · BUTTONS AND TEXT CTAs
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-micro);font-size:var(--fs-micro);
  letter-spacing:var(--ls-cta);text-transform:uppercase;
  padding:14px 24px;border-radius:var(--r-pill);
  white-space:nowrap;border:1px solid transparent;
  transition:box-shadow var(--dur-ui) var(--ease-out),
             border-color var(--dur-ui) var(--ease-out),
             color var(--dur-ui) var(--ease-out);
}
.btn--gold{
  color:var(--ink);
  background:
    linear-gradient(var(--field),var(--field)) padding-box,
    var(--accent-grad) border-box;
}
.btn--gold:hover{box-shadow:var(--glow-gold)}
.btn--ghost{color:var(--ink-2);border-color:var(--line)}
.btn--ghost:hover{color:var(--ink);border-color:var(--line-strong)}

/* the text CTA with the hairline arrow */
.go{display:inline-flex;flex-direction:column;gap:12px;margin-top:clamp(26px,3vw,38px)}
.go .lbl{font-size:15px;font-weight:var(--w-semi);letter-spacing:.005em}
.go .arw{
  width:46px;height:1px;background:var(--ink);position:relative;
  transition:width var(--dur-line) var(--ease-out);
}
.go .arw::after{
  content:"";position:absolute;right:0;top:50%;width:8px;height:8px;
  border-top:1px solid var(--ink);border-right:1px solid var(--ink);
  transform:translateY(-50%) rotate(45deg);
}
.go:hover .arw,.go:focus-visible .arw{width:74px}
.go .sub{
  font-family:var(--font-micro);font-size:10px;letter-spacing:var(--ls-micro);
  text-transform:uppercase;color:var(--ink-3);
}

/* a row of .btn pills. Wraps rather than overflowing, so two buttons never
   push the page sideways at 320px. Added for the homepage contact block;
   /demo/ and /pricing/ need the same pairing. */
.btn-row{
  display:flex;flex-wrap:wrap;
  gap:var(--space-3);
  margin-top:clamp(24px,3vw,38px);
}

/* ==========================================================================
   10 · THE LEDGER
   A ledger, not a card grid. Deliberately unequal columns. This is the
   default way to present a list of substantive items on this site.
   ========================================================================== */
.ledger{border-top:1px solid var(--line)}
.entry{
  display:grid;
  grid-template-columns:clamp(52px,5vw,84px) minmax(0,1fr) minmax(0,1.35fr) auto;
  gap:clamp(14px,2.6vw,40px);align-items:baseline;
  padding:clamp(22px,2.8vw,34px) 0;border-bottom:1px solid var(--line-soft);
  transition:background .35s var(--ease-out);
}
.entry:hover{background:var(--wash)}
.entry .idx{font-family:var(--font-micro);font-size:11px;color:var(--ink-3);letter-spacing:.1em}
.entry h3,.entry .h3{color:var(--ink)}
.entry p{font-size:var(--fs-body-s);line-height:var(--lh-body);color:var(--ink-2)}
.entry .cadence{
  font-family:var(--font-micro);font-size:10px;letter-spacing:var(--ls-micro);
  text-transform:uppercase;color:var(--gold);white-space:nowrap;
}
a.entry:hover{background:var(--wash-2)}

.ledger-foot{
  margin-top:clamp(26px,3.4vw,42px);
  padding-left:clamp(14px,1.6vw,22px);
  border-left:1px solid var(--brick-line);
  font-size:var(--fs-body-s);line-height:var(--lh-body);
  color:var(--ink-2);max-width:var(--measure-prose);
}
.ledger-foot b,.ledger-foot strong{color:var(--ink);font-weight:var(--w-med)}

/* the same treatment as a standalone callout */
.note{
  padding-left:clamp(14px,1.6vw,22px);border-left:1px solid var(--line-strong);
  font-size:var(--fs-body-s);line-height:var(--lh-body);color:var(--ink-2);
  max-width:var(--measure-prose);
}
.note--exclusion{border-left-color:var(--brick-line)}
.note b,.note strong{color:var(--ink);font-weight:var(--w-med)}

/* ==========================================================================
   11 · FACTS LIST
   Term / value rows. The default for pricing lines, security controls,
   scope statements, anything a reader will scan for one fact.
   ========================================================================== */
.facts{border-top:1px solid var(--line)}
.facts > div{
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);
  gap:clamp(12px,2.4vw,40px);align-items:baseline;
  padding:clamp(16px,2vw,24px) 0;border-bottom:1px solid var(--line-soft);
}
.facts dt{color:var(--ink);font-size:var(--fs-body-s);font-weight:var(--w-med)}
.facts dd{color:var(--ink-2);font-size:var(--fs-body-s);line-height:var(--lh-body)}

/* ==========================================================================
   12 · PANEL
   A hairline-bounded block. Use sparingly. This site is a document, not
   a card grid. Never more than three panels on a page.
   ========================================================================== */
.panel{
  border:1px solid var(--line);padding:clamp(22px,2.8vw,36px);
  background:var(--field-2);
}
.panel--accent{
  border-color:transparent;
  background:
    linear-gradient(var(--field-2),var(--field-2)) padding-box,
    var(--accent-grad) border-box;
}
.panel-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap}

/* ==========================================================================
   13 · TABLE
   Any table must sit inside .table-scroll. The page body never scrolls
   sideways, only the table does.
   ========================================================================== */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-scroll table{min-width:600px}
th,td{
  text-align:left;vertical-align:top;
  padding:clamp(12px,1.5vw,18px) clamp(12px,1.6vw,24px) clamp(12px,1.5vw,18px) 0;
  border-bottom:1px solid var(--line-soft);
  font-size:var(--fs-body-s);line-height:var(--lh-body);
}
th{
  font-family:var(--font-micro);font-size:var(--fs-micro);
  letter-spacing:var(--ls-micro);text-transform:uppercase;
  color:var(--ink-3);font-weight:400;border-bottom-color:var(--line);
}
td{color:var(--ink-2)}
td:first-child{color:var(--ink)}
caption{text-align:left;padding-bottom:var(--space-3);color:var(--ink-3)}

/* ==========================================================================
   14 · FAQ
   <details>/<summary>. Never a JavaScript accordion: that loses free
   keyboard accessibility and hides the answer text from crawlers.
   ========================================================================== */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line-soft)}
.faq summary{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4);
  padding:clamp(18px,2.2vw,26px) 0;cursor:pointer;list-style:none;
  font-size:var(--fs-h4);color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";flex:none;width:9px;height:9px;align-self:center;
  border-right:1px solid var(--ink-3);border-bottom:1px solid var(--ink-3);
  transform:rotate(45deg) translateY(-2px);
  transition:transform var(--dur-ui) var(--ease-out);
}
.faq details[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.faq summary:hover{color:var(--gold)}
.faq .answer{padding:0 0 clamp(18px,2.2vw,26px);max-width:var(--measure-prose)}
.faq .answer p{font-size:var(--fs-body-s);line-height:var(--lh-loose);color:var(--ink-2)}
.faq .answer > * + *{margin-top:var(--space-3)}

/* ==========================================================================
   15 · FOOTER
   Identical on every page. Carries the complete navigation, which is the
   no-JavaScript fallback for the menu.
   ========================================================================== */
.site-foot{
  border-top:1px solid var(--line-soft);
  padding:clamp(44px,5.5vw,72px) 0 clamp(30px,4vw,48px);
}
.foot-grid{
  display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,56px);
  align-items:flex-start;justify-content:space-between;
}
.foot-name{
  font-size:clamp(19px,1.7vw,25px);font-weight:var(--w-lift);
  letter-spacing:-.01em;line-height:1.25;
}
.foot-contact a{
  display:block;font-size:15px;color:var(--ink-2);
  transition:color var(--dur-ui) var(--ease-out);
}
.foot-contact a:hover{color:var(--gold)}
.foot-nav{display:flex;flex-direction:column;gap:9px}
.foot-nav a{font-size:14.5px;color:var(--ink-2);transition:color var(--dur-ui) var(--ease-out)}
.foot-nav a:hover{color:var(--ink)}
.foot-rule{
  margin-top:clamp(30px,4vw,48px);padding-top:20px;
  border-top:1px solid var(--line-soft);
  display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:space-between;
}

/* ==========================================================================
   16 · MOTION
   The one primitive. Add .rv to an element, optionally .d1 .. .d4.
   site.js adds .in when it enters the viewport. Under a reduced-motion
   preference site.js adds .in immediately and the transition collapses.
   ========================================================================== */
.rv{opacity:0;transform:translateY(var(--rv-shift))}
.rv.in{
  opacity:1;transform:none;
  transition:opacity var(--dur-reveal) var(--ease-out),
             transform var(--dur-reveal) var(--ease-out);
}
.rv.d1.in{transition-delay:var(--rv-d1)}
.rv.d2.in{transition-delay:var(--rv-d2)}
.rv.d3.in{transition-delay:var(--rv-d3)}
.rv.d4.in{transition-delay:var(--rv-d4)}
/* if JavaScript never runs, nothing may stay invisible */
.no-js .rv{opacity:1;transform:none}

/* ==========================================================================
   17 · RESPONSIVE
   Verified at 320, 375, 414 and 768. Every grid track is minmax(0,1fr)
   or narrower so nothing can push the page sideways.
   ========================================================================== */

/* 1080: the chrome loses its text links and gains the menu. */
/* 1080: the four quick links drop out. The Index control and the CTA pill
   stay. Nothing wraps and nothing becomes unreachable. */
@media (max-width:1079px){
  .chrome-link{display:none}
  .chrome-right{gap:18px}
}

/* 1280: THE FOLD OVERLAP ENDS. Below this width the photograph cannot clear
   the type column and the headline runs into the lit sky.

   MEASURED, do not lower this back to 1100. Sampling the actual JPEG through
   the real pipeline (object-fit cover, --photo-filter, --mask-x-right and
   --mask-y-fold composited over --field) under the exact glyph rects:

       width   h1 white   .lift gradient   eyebrow --ink-3
       1101      4.82        2.33  FAIL       3.10  FAIL
       1280      4.77        3.24  pass       4.57  pass
       1440      4.51        3.55  pass       4.56  pass
       1920     11.98        3.85  pass       5.33  pass

   Large text needs 3:1, micro needs 4.5:1. 1101px fails both. The overlap
   therefore starts at 1280, not 1100. Below it the photograph stacks
   full-bleed above the copy and nothing overlaps anything.
   Do not reintroduce a scrim here: the fix is the breakpoint. */
@media (max-width:1279px){
  .fold{min-height:auto;display:block;
        padding:calc(var(--chrome-h) + 20px) 0 40px}
  .fold--page{padding:calc(var(--chrome-h) + 34px) 0 32px}
  .photo--fold{
    position:relative;width:100%;height:clamp(230px,42vh,520px);
    margin:0 0 clamp(24px,4vh,40px);
    -webkit-mask-image:var(--mask-x-none);mask-image:var(--mask-x-none);
  }
  .photo--fold img{
    -webkit-mask-image:var(--mask-y-down);mask-image:var(--mask-y-down);
    object-position:58% 45%;
  }
  .cut{margin-top:30px}
  .telemetry{margin-top:14px}
  .fold-body{grid-template-columns:minmax(0,1fr);gap:22px}
}

/* 1100: the document layout goes single column. Separate from the fold
   breakpoint above on purpose: these bands carry no photograph, so they have
   no contrast constraint and no reason to reflow 180px earlier. */
@media (max-width:1100px){
  .band-head{grid-template-columns:minmax(0,1fr);gap:18px}
  .split,.split--wide-left,.split--wide-right{grid-template-columns:minmax(0,1fr);gap:var(--space-5)}
  .entry{grid-template-columns:clamp(44px,6vw,62px) minmax(0,1fr);gap:12px 20px}
  .entry p{grid-column:2}
  .entry .cadence{grid-column:2;margin-top:2px}
}

/* 768 and below: the tablet and phone chrome, and the stacked fold. */
@media (max-width:760px){
  .mark{padding:0 16px}
  .mark-word{font-size:11px;letter-spacing:.11em}
  .chrome-right{gap:14px;padding:0 16px}
  .chrome-cta{padding:9px 14px;font-size:9.5px;letter-spacing:.1em}
  .menu-btn{padding:9px 2px;font-size:9.5px;letter-spacing:.1em}

  .photo--band{aspect-ratio:4/3}
  .photo--strip{aspect-ratio:1200/300}
  .fold h1,.h-display{font-size:clamp(30px,7.8vw,46px);max-width:none;letter-spacing:-.02em}
  h1,.h1{max-width:none}
  h2,.h2{max-width:none}
  .lede{font-size:15px}
  .entry .cadence{white-space:normal}
  .facts > div{grid-template-columns:minmax(0,1fr);gap:6px}
  .stat-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4) var(--space-4)}
  .foot-rule{gap:6px}
  .hide-s{display:none !important}
  .show-s{display:initial}
}

/* 414 and below */
@media (max-width:440px){
  .chrome-right{gap:11px;padding:0 13px}
  .mark{padding:0 13px;gap:9px}
  .menu-item{grid-template-columns:26px minmax(0,1fr);gap:11px}
}

/* 375 and 320: the wordmark yields so the CTA never wraps. */
@media (max-width:390px){
  .mark-word{display:none}
  .mark{border-right:0;padding-right:0}
  .chrome-cta{padding:9px 12px;font-size:9px;letter-spacing:.08em}
}

/* ==========================================================================
   18 · REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .rv{opacity:1;transform:none}
  .go .arw{transition:none}
  .menu[open] .menu-sheet{animation:none}
}

/* ==========================================================================
   19 · FORCED COLORS
   ========================================================================== */
@media (forced-colors: active){
  .lift{color:LinkText;background:none;-webkit-text-fill-color:currentColor}
  .chrome-cta,.btn{border-color:ButtonBorder}
  .photo img{filter:none}
}

/* ==========================================================================
   20 · PRINT
   /trust/ and /pricing/ get forwarded into procurement folders and board
   packets. They must print as a clean document on white paper.
   ========================================================================== */
@media print{
  @page{margin:14mm}
  html,body{background:#fff;color:#000;font-size:10.5pt;overflow:visible}
  .chrome,.menu,.menu-sheet,.skip,.photo,.telemetry,.go,.btn,.chrome-cta{display:none !important}
  .chrome-spacer{display:none}
  .wrap{max-width:none;padding:0}
  .band{padding:12pt 0;border-top:.5pt solid #999;break-inside:auto}
  h1,.h1,h2,.h2{color:#000;font-weight:400;max-width:none}
  h1,.h1{font-size:20pt;line-height:1.15}
  h2,.h2{font-size:15pt;line-height:1.2;break-after:avoid}
  h3,.h3{font-size:11.5pt;color:#000;break-after:avoid}
  p,li,td,dd,.lede,.band-note,.entry p{color:#222}
  /* Ink levels are near-white by design. On paper every one of them has to
     be re-grounded or the emphasis disappears: --ink prints as white on
     white. This block is not optional. Verified against a real PDF. */
  b,strong,dt,caption{color:#000 !important}
  .prose p,.prose li,.faq .answer p,.entry p,.facts dd,.note,.ledger-foot,
  .band-note,.lede,td{color:#222 !important}
  td:first-child,.entry h3,.entry .cadence,.facts dt{color:#000}
  .prose ol li::before,.entry .idx{color:#555}
  .prose ul li::before{background:#666}
  .cut,.cut .micro,.telemetry .micro{color:#555}
  .lift{color:#000;background:none;-webkit-text-fill-color:#000}
  .micro{color:#555}
  .cut{border-color:#999;background:none;padding-left:0;padding-right:0}
  .entry,.facts > div,.faq details{break-inside:avoid;border-bottom:.5pt solid #ccc}
  .ledger,.facts,.faq{border-top:.5pt solid #999}
  .note,.ledger-foot{border-left:1pt solid #666}
  .panel{border:.5pt solid #999;background:none}
  .rv{opacity:1 !important;transform:none !important}
  /* site.js opens every <details> on beforeprint so no answer is lost. */
  .prose a[href^="http"]::after{content:" (" attr(href) ")";font-size:8.5pt;color:#666}
  .site-foot{border-top:.5pt solid #999}
  .foot-contact a{color:#000}
}