/* ============================================================================
   ServiceAi tap — site stylesheet
   Grounds, type and the static are taken from the approved section-rhythm
   artifact (4e845251). Seven grounds carry the arc; the atmosphere sits at
   z-index 0 and shows through --base only.
   ========================================================================= */
:root{
  /* Grounds — the whole vocabulary. Nothing else may be a section background. */
  --base:#0C0C0C;      /* brand ground — a WINDOW onto the static */
  --warm:#131110;      /* the open */
  --deep:#070707;      /* the recess */
  --up:#181818;        /* comes forward */
  --cool:#0A0D11;      /* the close */
  --light:#E9E5DD;     /* the statement. One per page, never beside the pivot */
  --acc:#F57A2B;       /* the pivot. Exactly one per page */
  --acc2:#E55A1A;

  --ink:#FFFFFF; --ink-2:#E6E6E3; --ink-3:#8E8E8E;
  --rule:#2E2E2E; --rule-soft:rgba(237,237,237,.07);
  --card:#131211;

  --display:'Inter Tight','Helvetica Neue',Helvetica,Arial,sans-serif;
  --body:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;
  --mono:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;
  --col:1280px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{background:var(--base)}
body{font-family:var(--body);color:var(--ink-3);line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--ink-2);text-decoration:none}
a:hover{color:var(--acc)}

/* ── the static ────────────────────────────────────────────────────────────
   Fixed, so its gradients scale to the VIEWPORT, not the document. It sits
   between the body ground and the content, which is why --base sections are
   transparent rather than painted: painting them seals the glow off. */
#atm{position:fixed;inset:0;z-index:0;pointer-events:none;transition:opacity .3s}
#vig{position:absolute;inset:0}
/* opacity and blend are set from STATIC in static.js — see the lab knobs there */
#grain{position:absolute;inset:0;width:100%;height:100%}
body.no-static #atm{opacity:0}
main,footer,nav.top,.navbar{position:relative;z-index:1}

/* ── grounds ── */
section{border-bottom:1px solid var(--rule);position:relative}
.g-base{background:transparent}
body.no-static .g-base{background:var(--base)}
.g-warm{background:var(--warm)} .g-deep{background:var(--deep)}
.g-up{background:var(--up)}     .g-cool{background:var(--cool)}
.g-light{background:var(--light);color:#3A3733}
.g-amber{background:var(--acc);color:#0C0C0C}

.wrap{width:100%;max-width:var(--col);margin:0 auto;
  padding:clamp(48px,5vw,72px) clamp(22px,5vw,64px)}
.wrap.tall{padding:clamp(64px,7vw,104px) clamp(22px,5vw,64px)}

/* ── type ── */
h1,h2,h3{margin:0;font-family:var(--display);font-weight:600;line-height:1.05;
  letter-spacing:-.03em;color:var(--ink);text-wrap:balance}
h1{font-size:clamp(44px,6.2vw,72px);font-weight:700;letter-spacing:-.035em;max-width:16ch}
h2{font-size:clamp(36px,4.4vw,48px);max-width:24ch}
h3{font-size:22px;letter-spacing:-.02em;line-height:1.2;font-weight:500}
.st{display:flex;flex-direction:column;gap:14px;align-items:flex-start;margin-bottom:22px}
.st .n{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--acc)}
.lede{max-width:58ch;font-size:17px;line-height:1.5;color:var(--ink-3);margin:0 0 56px}
.lede.tight{margin-bottom:0}
p{max-width:66ch}
.g-light h1,.g-light h2,.g-light h3{color:#14120F}
.g-light .lede,.g-light p{color:#4A453E}
.g-light .st .n{color:var(--acc2)}
.g-amber h1,.g-amber h2,.g-amber h3{color:#0C0C0C}
.g-amber .lede,.g-amber p{color:rgba(12,12,12,.75)}
.g-amber .st .n{color:rgba(12,12,12,.75)}

/* ── buttons ── */
.btn{display:inline-block;font-family:var(--body);font-weight:600;font-size:15px;
  color:#0C0C0C;background:var(--acc);padding:14px 30px;border-radius:999px;
  transition:background 180ms ease,transform 180ms ease}
.btn:hover{background:var(--acc2);color:#0C0C0C;transform:translateY(-2px)}
.btn.ghost{background:transparent;color:var(--ink-2);border:1px solid var(--rule)}
.btn.ghost:hover{border-color:var(--acc);color:var(--acc);background:transparent}
.g-amber .btn,.g-light .btn{background:#0C0C0C;color:var(--acc)}
.g-amber .btn:hover,.g-light .btn:hover{background:#000}
.btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}

/* ── hairline rows: the main list device. Rules, never boxes. ── */
.rows{border-top:1px solid var(--rule)}
.row{display:flex;gap:22px 56px;padding:22px 0;border-bottom:1px solid var(--rule);
  align-items:baseline;flex-wrap:wrap;
  transition:background 160ms ease,padding-left 160ms ease}
.row:hover{background:rgba(255,255,255,.03);padding-left:14px}
.g-light .row:hover{background:rgba(10,10,10,.04)}
.row .k{flex:0 0 auto;min-width:min(100%,280px);font-family:var(--display);font-weight:500;
  font-size:22px;line-height:1.2;letter-spacing:-.02em;color:var(--ink)}
.g-light .row .k{color:#14120F}
.row .v{flex:1 1 320px;font-size:15px;line-height:1.55;color:var(--ink-3)}
.g-light .row .v{color:#4A453E}
.row .k .t{font-family:var(--mono);font-size:13px;letter-spacing:.08em;color:var(--acc);
  display:block;margin-bottom:6px}

/* ── two-up cells ── */
.two{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--rule);
  border-left:1px solid var(--rule)}
.three{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--rule);
  border-left:1px solid var(--rule)}
@media(max-width:860px){.two,.three{grid-template-columns:1fr}}
.cell{padding:30px 32px 34px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.cell.on{background:rgba(245,122,43,.055)}
.cell .who{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.cell.on .who{color:var(--acc)}
.cell .amt{font-family:var(--display);font-weight:600;font-size:clamp(38px,5vw,56px);
  letter-spacing:-.04em;line-height:1;color:var(--ink);margin-top:16px}
.cell.on .amt{color:var(--acc)}
.cell .amt small{font-size:19px;font-weight:500;color:var(--ink-3);letter-spacing:-.02em}
.cell .sub{font-size:15px;line-height:1.5;color:var(--ink-3);margin-top:12px;min-height:46px}
.cell ul{list-style:none;margin-top:20px;border-top:1px solid var(--rule)}
.cell li{font-size:15px;line-height:1.5;padding:11px 0;border-bottom:1px solid var(--rule-soft);
  color:var(--ink-3);display:flex;gap:11px}
.cell li i{font-style:normal;color:var(--ink-3);flex:none}
.cell.on li{color:var(--ink-2)} .cell.on li i{color:var(--acc)}
.cell .n{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--acc);margin-bottom:14px}
.cell h3+p{margin-top:12px;font-size:15px;color:var(--ink-3)}

/* ── media band — counts as a ground change ── */
.band{padding:0;background:var(--deep)}
.band img{display:block;width:100%;height:clamp(240px,34vw,420px);object-fit:cover}
.band .cap{max-width:var(--col);margin:0 auto;padding:16px clamp(22px,5vw,64px);
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--ink-3)}

/* ── spec table ── */
table{width:100%;border-collapse:collapse;margin-top:8px}
td{padding:16px 0;border-bottom:1px solid var(--rule);font-size:15.5px;line-height:1.5;
  color:var(--ink-2);vertical-align:top}
td:first-child{width:170px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);padding-top:19px}
.g-light td{color:#4A453E;border-color:rgba(10,10,10,.14)}
.g-light td:first-child{color:#867E76}

/* ── nav + footer ── */
.navbar{border-bottom:1px solid var(--rule);background:rgba(12,12,12,.86);
  backdrop-filter:blur(10px);position:sticky;top:0;z-index:20}
nav.top{display:flex;align-items:center;justify-content:space-between;gap:20px;
  max-width:var(--col);margin:0 auto;padding:16px clamp(22px,5vw,64px)}
nav.top .mark{display:flex;align-items:center;gap:10px;font-family:var(--display);
  font-weight:600;font-size:16px;letter-spacing:-.02em;color:var(--ink)}
nav.top .mark i{width:14px;height:14px;background:var(--acc);font-style:normal}
nav.top .lk{display:flex;gap:24px;font-size:14px;color:var(--ink-3)}
nav.top .lk a[aria-current="page"]{color:var(--acc)}
@media(max-width:860px){nav.top .lk{display:none}}
footer{background:var(--deep);border-top:1px solid var(--rule)}
footer .wrap{padding-top:44px;padding-bottom:56px}
.fgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
@media(max-width:860px){.fgrid{grid-template-columns:1fr 1fr}}
.fgrid h4{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);font-weight:500;margin-bottom:14px}
.fgrid a{display:block;font-size:14.5px;padding:5px 0;color:var(--ink-2)}
.fine{margin-top:40px;padding-top:22px;border-top:1px solid var(--rule);
  font-family:var(--mono);font-size:12.5px;letter-spacing:.03em;color:var(--ink-3)}

/* ── static toggle ── */
#stat{position:fixed;right:16px;bottom:16px;z-index:40;font-family:var(--mono);
  font-size:12px;letter-spacing:.06em;padding:10px 14px;border:1px solid var(--rule);
  background:rgba(12,12,12,.88);color:var(--ink-2);backdrop-filter:blur(8px);cursor:pointer;
  border-radius:999px}
#stat:hover{border-color:var(--acc);color:var(--acc)}

[data-reveal]{will-change:opacity,transform}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}