/* ==========================================================================
   The Uniq Collective — 01A Instrument, October 2026 dark direction.

   Tokens are taken verbatim from docs/01a-production-pack.html. Two rules
   carry the whole identity and are enforced here rather than trusted:

   1. The logo is two colours — ink (or paper reversed) and the water-blue
      pip. The four utility colours belong to DATA: charts, legends, status
      dots, the orange on a numbered list. Never to the mark.
   2. Ink or paper per section, never both inside one panel.

   Flat square panels, hairline rules. No rounded corners, no shadows, no
   gradients outside the dial faces. One idea per block.
   ========================================================================== */

:root{
  --ink:#14171A;   --ink-2:#4A5157;  --ink-3:#838C93;
  --panel:#1B1E20; --panel-2:#24282A;
  --paper:#F2EFE9; --paper-2:#FAF8F4; --screen:#FFFFFF;
  --rule-soft:#DCD6CC; --rule-dark:#3A4144;

  /* utility system — data only */
  --elec:#E0A32E; --gas:#C0563C; --water:#2C7B9E; --renew:#4F7A4A;
  --fault:#B3282D; --clear:#2F6B4F;

  /* water blue stepped up for small text on ink (contrast only) */
  --water-lift:#7FB2C9;
  /* water blue darkened for small text on paper */
  --water-deep:#215E79;

  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --disp:"Archivo","Arial Narrow",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;

  --wrap:1200px;
  --pad:clamp(20px,5vw,56px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--ink);color:#C8CFD1;
  font-family:var(--sans);font-size:16.5px;line-height:1.62;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--water);outline-offset:3px}

/* ---------- type ----------------------------------------------------- */
h1,h2,h3{
  font-family:var(--disp);font-weight:850;
  font-variation-settings:'wdth' 68,'wght' 850;
  text-transform:uppercase;letter-spacing:-.012em;margin:0;line-height:1.02;
  color:var(--paper-2);
}
h1{font-size:clamp(2.3rem,6vw,4.4rem)}
h2{font-size:clamp(1.75rem,3.8vw,2.9rem)}
h3{font-size:clamp(1.05rem,1.6vw,1.3rem);font-variation-settings:'wdth' 76,'wght' 800;
   letter-spacing:.003em}
/* the key phrase inside a headline, in water blue. The ONE accent. */
h1 em,h2 em,h3 em{font-style:normal;color:var(--water-lift)}
.on-paper h1 em,.on-paper h2 em,.on-paper h3 em{color:var(--water)}

p{margin:0 0 1.05em}
.lede{font-size:clamp(1.02rem,1.45vw,1.22rem);line-height:1.58;color:#B0B8BA;max-width:62ch}
.narrow{max-width:66ch}
strong,b{color:var(--paper-2);font-weight:600}

/* the mono label is the workhorse of this identity */
.lbl{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.17em;text-transform:uppercase;
  color:#7E8A8D;display:block;margin:0 0 1rem;font-weight:500;
}
.lbl-w{color:var(--water-lift)}

/* ---------- grounds --------------------------------------------------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.wrap-n{max-width:860px;margin:0 auto;padding:0 var(--pad)}
section{padding:clamp(52px,7vw,104px) 0;position:relative}

.on-paper{background:var(--paper);color:var(--ink-2)}
.on-paper h1,.on-paper h2,.on-paper h3{color:var(--ink)}
.on-paper .lede{color:var(--ink-2)}
.on-paper .lbl{color:var(--ink-3)}
.on-paper strong,.on-paper b{color:var(--ink)}
.on-paper-2{background:var(--paper-2);color:var(--ink-2)}
.on-paper-2 h1,.on-paper-2 h2,.on-paper-2 h3{color:var(--ink)}
.on-paper-2 .lede{color:var(--ink-2)}
.on-paper-2 .lbl{color:var(--ink-3)}
.on-panel{background:var(--panel)}

.rule{height:1px;background:var(--rule-dark);border:0;margin:0}
.on-paper .rule,.on-paper-2 .rule{background:var(--rule-soft)}

/* ---------- the lockup ------------------------------------------------ */
.lk{display:inline-flex;align-items:center;gap:11px;text-decoration:none}
.lk-mark{display:block;flex:0 0 auto}
.lk-type{display:flex;flex-direction:column;justify-content:center;gap:3px}
.lk-word{
  font-family:var(--disp);font-weight:850;
  font-variation-settings:'wdth' 68,'wght' 850;
  font-size:1.38rem;letter-spacing:-.03em;line-height:1;text-transform:uppercase;
}
.lk-strap{
  font-family:var(--mono);font-size:.53rem;letter-spacing:.31em;line-height:1;
  text-transform:uppercase;opacity:.72;font-weight:500;
}
@media (max-width:540px){ .lk-strap{display:none} }   /* pack: none under 120px lockup */

/* ---------- nav: the dark instrument bar ----------------------------- */
.nav{background:var(--ink);position:sticky;top:0;z-index:60;
     border-bottom:1px solid var(--rule-dark)}
.nav-in{
  max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);
  display:flex;align-items:center;gap:24px;min-height:68px;
}
.nav-mod{
  font-family:var(--mono);font-size:.74rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--water-lift);white-space:nowrap;font-weight:500;
}
.nav-mod::before{content:"· ";color:#555E62}
.nav-links{display:flex;gap:21px;margin-left:auto;align-items:center}
.nav-links a{
  font-family:var(--mono);font-size:.78rem;color:#A9B2B5;text-decoration:none;
  padding:23px 0 22px;border-bottom:2px solid transparent;white-space:nowrap;
  letter-spacing:.04em;transition:color .18s ease,border-color .18s ease;
}
.nav-links a:hover{color:var(--paper-2)}
.nav-links a[aria-current="page"]{color:var(--paper-2);border-bottom-color:var(--water)}
.nav-cta{
  font-family:var(--mono);font-size:.72rem!important;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--water)!important;color:var(--water-lift)!important;
  padding:9px 15px!important;transition:background .2s ease,color .2s ease;
}
.nav-cta:hover{background:var(--water);color:#fff!important}
.nav-toggle{
  display:none;margin-left:auto;background:none;border:1px solid var(--rule-dark);
  color:#A9B2B5;font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;padding:9px 13px;cursor:pointer;
}
@media (max-width:1120px){ .nav-links{gap:16px} .nav-links a{font-size:.73rem} }
@media (max-width:980px){
  .nav-links{
    display:none;position:absolute;top:100%;left:0;right:0;background:var(--ink);
    flex-direction:column;align-items:stretch;gap:0;padding:4px var(--pad) 18px;
    border-bottom:1px solid var(--rule-dark);
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:14px 0;border-bottom:1px solid var(--rule-dark);font-size:.92rem}
  .nav-links a[aria-current="page"]{border-bottom-color:var(--rule-dark);color:var(--water-lift)}
  .nav-cta{margin-top:15px;text-align:center}
  .nav-toggle{display:block}
}

/* ---------- hero with the ghost dial --------------------------------- */
.hero{background:var(--ink);padding:clamp(56px,8vw,118px) 0 clamp(44px,6vw,86px);
      position:relative;overflow:hidden}
/* the dial sits behind the words, large, barely there. Pack: ghost dial. */
.ghost{
  position:absolute;pointer-events:none;user-select:none;
  right:-12%;top:50%;transform:translateY(-50%);
  width:min(760px,78vw);opacity:.045;z-index:0;
}
.ghost svg{width:100%;height:auto;display:block}
@media (max-width:900px){ .ghost{right:-28%;opacity:.035} }
.hero .wrap{position:relative;z-index:1}
.hero h1{max-width:17ch}
.hero .lede{margin-top:1.5rem;max-width:58ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:2.2rem}

.hero-split{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:clamp(30px,4.4vw,78px);align-items:start}
@media (max-width:980px){.hero-split{grid-template-columns:1fr;gap:38px}}
.hero-aside{border-left:1px solid var(--rule-dark);padding-left:clamp(20px,2.4vw,32px)}
@media (max-width:980px){.hero-aside{border-left:0;border-top:1px solid var(--rule-dark);
  padding-left:0;padding-top:28px}}

/* ---------- buttons --------------------------------------------------- */
.btn{
  display:inline-block;text-decoration:none;font-family:var(--mono);
  font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;font-weight:500;
  padding:14px 24px;border:1px solid var(--water);background:var(--water);color:#fff;
  transition:filter .18s ease;
}
.btn:hover{filter:brightness(1.14)}
.btn-ghost{background:transparent;color:var(--water-lift)}
.btn-ghost:hover{background:rgba(44,123,158,.14);filter:none}
.on-paper .btn-ghost,.on-paper-2 .btn-ghost{color:var(--water-deep);border-color:var(--water-deep)}

/* ---------- numbers-first stat tiles ---------------------------------- */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule-dark)}
@media (max-width:860px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.tiles{grid-template-columns:1fr}}
.on-paper .tiles,.on-paper-2 .tiles{background:var(--rule-soft)}
.tile{background:var(--panel);padding:22px 22px 20px}
.on-paper .tile,.on-paper-2 .tile{background:var(--paper-2)}
.tile b{
  display:block;font-family:var(--disp);font-weight:850;
  font-variation-settings:'wdth' 72,'wght' 850;
  letter-spacing:-.03em;font-size:clamp(2rem,3.8vw,3rem);line-height:.98;
  color:var(--paper-2);font-variant-numeric:tabular-nums;
}
.on-paper .tile b,.on-paper-2 .tile b{color:var(--ink)}
.tile .cap{
  display:block;margin-top:.7rem;font-family:var(--mono);font-size:.64rem;
  letter-spacing:.15em;text-transform:uppercase;color:var(--water-lift);font-weight:500;
}
.on-paper .tile .cap,.on-paper-2 .tile .cap{color:var(--water-deep)}
.tile .sub{display:block;margin-top:.45rem;font-size:.84rem;color:#8B9497;line-height:1.45}
.on-paper .tile .sub,.on-paper-2 .tile .sub{color:var(--ink-2)}

/* figures as a definition list in the hero rail */
.figs{margin:0;display:grid;gap:0}
.figs dt{font-family:var(--mono);font-size:.64rem;letter-spacing:.15em;text-transform:uppercase;
  color:#7E8A8D;padding-top:15px;font-weight:500}
.figs dd{margin:0 0 2px;font-family:var(--disp);font-weight:850;
  font-variation-settings:'wdth' 74,'wght' 850;
  font-size:clamp(1.6rem,2.5vw,2.1rem);line-height:1.04;color:var(--paper-2);
  letter-spacing:-.028em;font-variant-numeric:tabular-nums;padding-bottom:13px;
  border-bottom:1px solid var(--rule-dark)}
.figs dd:last-of-type{border-bottom:0}
.fig-note{margin:17px 0 0;font-size:.79rem;line-height:1.55;color:#7E8A8D}
.fig-note a{color:var(--water-lift)}

/* ---------- orange-numbered lists ------------------------------------- */
.onum{list-style:none;counter-reset:o;margin:1.4rem 0 0;padding:0;display:grid;gap:15px}
.onum li{counter-increment:o;padding-left:40px;position:relative;color:#B0B8BA;font-size:.97rem}
.onum li::before{
  content:counter(o,decimal-leading-zero);position:absolute;left:0;top:.08em;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;color:var(--elec);font-weight:500;
}
.onum li b{display:block;color:var(--paper-2);font-weight:600;margin-bottom:.14rem;
  font-size:1.01rem}
.on-paper .onum li,.on-paper-2 .onum li{color:var(--ink-2)}
.on-paper .onum li b,.on-paper-2 .onum li b{color:var(--ink)}
/* The pack's orange is a DATA colour chosen against ink. On the paper ground
   #E0A32E measures about 2:1, which fails AA for text this size, and an
   ordinal is content rather than decoration. Darkened to ~4.9:1 on paper
   only; the ink grounds keep the pack value. */
.on-paper .onum li::before,.on-paper-2 .onum li::before,
.on-paper .loop-step .n,.on-paper-2 .loop-step .n,
.on-paper .step::before,.on-paper-2 .step::before{color:#9A6B1F}

/* plain tick list */
.ticks{list-style:none;margin:1.2rem 0 0;padding:0}
.ticks li{position:relative;padding-left:19px;margin-bottom:.55rem;font-size:.95rem;color:#B0B8BA}
.ticks li::before{content:"";position:absolute;left:0;top:.68em;width:9px;height:1.5px;
  background:var(--water)}
.on-paper .ticks li,.on-paper-2 .ticks li{color:var(--ink-2)}

/* ---------- panels, pillars, cards ------------------------------------ */
.grid{display:grid;gap:clamp(18px,2.4vw,30px)}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.g-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.g-2,.g-3{grid-template-columns:1fr}}

.two-up{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3.2vw,52px)}
@media (max-width:860px){.two-up{grid-template-columns:1fr}}

.card{background:var(--panel);border:1px solid var(--rule-dark);
  padding:clamp(22px,2.6vw,32px);display:flex;flex-direction:column}
.card h3{margin-bottom:.6rem}
.card p{color:#A9B2B5;font-size:.95rem;margin-bottom:.9rem}
.card .more{margin-top:auto;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--water-lift);text-decoration:none;font-weight:500}
.card .more:hover{text-decoration:underline}
.on-paper .card,.on-paper-2 .card{background:var(--paper-2);border-color:var(--rule-soft)}
.on-paper .card p,.on-paper-2 .card p{color:var(--ink-2)}
.on-paper .card .more,.on-paper-2 .card .more{color:var(--water-deep)}

.pillar{background:var(--panel);border:1px solid var(--rule-dark);
  border-top:3px solid var(--water);padding:clamp(24px,2.8vw,36px)}
.pillar.alt{border-top-color:var(--elec)}
.on-paper .pillar,.on-paper-2 .pillar{background:var(--paper-2);border-color:var(--rule-soft);
  border-top-color:var(--water)}

/* water-blue callout panel (client pack) */
.callout{
  background:rgba(44,123,158,.1);border-left:3px solid var(--water);
  padding:20px 24px;margin:1.6rem 0;
}
.callout p{margin:0;color:#B6C4C9;font-size:.95rem}
.callout p + p{margin-top:.7rem}
.on-paper .callout,.on-paper-2 .callout{background:rgba(44,123,158,.08)}
.on-paper .callout p,.on-paper-2 .callout p{color:var(--ink-2)}

/* ---------- the service block: hanging number + wide column ----------- */
.svc{display:grid;grid-template-columns:104px minmax(0,1fr);gap:clamp(14px,2.6vw,38px);
  padding:clamp(28px,3.6vw,50px) 0;border-top:1px solid var(--rule-dark)}
.svc:last-of-type{border-bottom:1px solid var(--rule-dark)}
.on-paper .svc,.on-paper-2 .svc{border-color:var(--rule-soft)}
.svc-num{margin:0;padding-top:.42em;color:var(--water-lift);font-family:var(--disp);
  font-variation-settings:'wdth' 68,'wght' 850;font-size:clamp(1.5rem,2.4vw,2rem)}
.on-paper .svc-num,.on-paper-2 .svc-num{color:var(--water)}
.svc-body{max-width:70ch}
.svc-body h2{margin-bottom:.6rem}
.svc-body .lede{margin-bottom:1rem}
.svc-body p{color:#A9B2B5;font-size:.97rem}
.on-paper .svc-body p,.on-paper-2 .svc-body p{color:var(--ink-2)}
@media (max-width:640px){.svc{grid-template-columns:1fr;gap:8px}.svc-num{padding-top:0}}

/* feature row: one dominant column plus a light list */
.feature{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);
  gap:clamp(26px,4vw,66px);align-items:start}
@media (max-width:940px){.feature{grid-template-columns:1fr}}
.feature-main p{color:#A9B2B5}
.on-paper .feature-main p,.on-paper-2 .feature-main p{color:var(--ink-2)}
.feature-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule-dark)}
.feature-list li{padding:16px 0;border-bottom:1px solid var(--rule-dark)}
.on-paper .feature-list,.on-paper .feature-list li,
.on-paper-2 .feature-list,.on-paper-2 .feature-list li{border-color:var(--rule-soft)}
.feature-list b{display:block;font-family:var(--sans);font-weight:600;font-size:.95rem;
  margin-bottom:.22rem;color:var(--paper-2)}
.on-paper .feature-list b,.on-paper-2 .feature-list b{color:var(--ink)}
.feature-list span{display:block;font-size:.88rem;color:#8B9497;line-height:1.5}
.on-paper .feature-list span,.on-paper-2 .feature-list span{color:var(--ink-2)}

/* ---------- the operating loop --------------------------------------- */
.loop{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule-dark);
  margin-top:clamp(26px,3.4vw,44px)}
@media (max-width:760px){.loop{grid-template-columns:repeat(2,1fr)}}
.loop-step{background:var(--panel);padding:24px 22px 22px}
.on-paper .loop,.on-paper-2 .loop{background:var(--rule-soft)}
.on-paper .loop-step,.on-paper-2 .loop-step{background:var(--paper-2)}
.loop-step .n{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;color:var(--elec);
  display:block;margin-bottom:.8rem;font-weight:500}
.loop-step h3{margin-bottom:.4rem}
.loop-step p{margin:0;font-size:.89rem;color:#8B9497;line-height:1.5}
.on-paper .loop-step p,.on-paper-2 .loop-step p{color:var(--ink-2)}

/* ---------- data table ------------------------------------------------ */
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.t{border-collapse:collapse;width:100%;min-width:660px;font-size:.92rem}
table.t th{
  font-family:var(--mono);font-size:.64rem;letter-spacing:.15em;text-transform:uppercase;
  color:#7E8A8D;font-weight:500;text-align:left;padding:11px 14px 10px;
  border-bottom:1.5px solid var(--rule-dark);
}
table.t td{padding:14px;border-bottom:1px solid var(--rule-dark);vertical-align:top;color:#B0B8BA}
table.t td.m{font-family:var(--mono);font-size:.85rem;white-space:nowrap}
table.t td.n{font-family:var(--mono);font-size:.86rem;font-variant-numeric:tabular-nums;
  white-space:nowrap}
.on-paper table.t th,.on-paper-2 table.t th{color:var(--ink-3);border-bottom-color:var(--ink)}
.on-paper table.t td,.on-paper-2 table.t td{border-bottom-color:var(--rule-soft);color:var(--ink-2)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:9px;vertical-align:1px}
.dot-e{background:var(--elec)} .dot-g{background:var(--gas)}
.dot-w{background:var(--water)} .dot-r{background:var(--renew)}
.dot-f{background:var(--fault)} .dot-c{background:var(--clear)}

/* ---------- the price bar (what is inside a kWh) ---------------------- */
.pricebar{display:flex;width:100%;height:46px;margin:1.6rem 0 1rem;
  border:1px solid var(--rule-dark)}
.pricebar span{display:block;height:100%}
.price-key{display:flex;flex-wrap:wrap;gap:9px 22px;margin:0;padding:0;list-style:none}
.price-key li{font-family:var(--mono);font-size:.68rem;letter-spacing:.09em;color:#8B9497;
  display:flex;align-items:center;gap:8px}
.price-key i{width:11px;height:11px;display:block;flex:0 0 auto}
.on-paper .price-key li,.on-paper-2 .price-key li{color:var(--ink-2)}

/* ---------- steps ----------------------------------------------------- */
.steps{counter-reset:s;margin-top:clamp(24px,3vw,40px)}
.step{counter-increment:s;display:grid;grid-template-columns:56px 1fr;gap:clamp(14px,2vw,30px);
  padding:clamp(22px,2.8vw,32px) 0;border-top:1px solid var(--rule-dark);align-items:start}
.step:last-child{border-bottom:1px solid var(--rule-dark)}
.on-paper .step,.on-paper-2 .step{border-color:var(--rule-soft)}
.step::before{content:"0" counter(s);font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;
  color:var(--elec);padding-top:.45em;font-weight:500}
.step h3{margin-bottom:.42rem}
.step p{color:#A9B2B5;margin:0;font-size:.95rem;max-width:66ch}
.on-paper .step p,.on-paper-2 .step p{color:var(--ink-2)}

/* ---------- cases ----------------------------------------------------- */
.cases{display:grid;gap:0}
.case{padding:clamp(24px,3vw,40px) 0;border-top:1px solid var(--rule-dark);max-width:80ch}
.case:last-child{border-bottom:1px solid var(--rule-dark)}
.on-paper .case,.on-paper-2 .case{border-color:var(--rule-soft)}
.case h3{font-size:clamp(1.1rem,1.9vw,1.42rem);margin:.35rem 0 .75rem}
.case p{color:#A9B2B5;font-size:.96rem}
.on-paper .case p,.on-paper-2 .case p{color:var(--ink-2)}
.case-fig{font-family:var(--disp);font-variation-settings:'wdth' 72,'wght' 850;
  font-size:clamp(1.8rem,3.2vw,2.5rem);color:var(--paper-2);letter-spacing:-.03em;
  display:block;margin-bottom:.3rem;font-variant-numeric:tabular-nums}
.on-paper .case-fig,.on-paper-2 .case-fig{color:var(--ink)}

/* definition list for audiences */
.defs{margin:0;max-width:76ch}
.defs dt{font-family:var(--disp);font-weight:850;font-variation-settings:'wdth' 76,'wght' 800;
  text-transform:uppercase;font-size:1.02rem;letter-spacing:.004em;padding-top:19px;
  border-top:1px solid var(--rule-dark);color:var(--paper-2)}
.defs dd{margin:.4rem 0 19px;color:#A9B2B5;font-size:.95rem}
.on-paper .defs dt,.on-paper-2 .defs dt{border-color:var(--rule-soft);color:var(--ink)}
.on-paper .defs dd,.on-paper-2 .defs dd{color:var(--ink-2)}
.defs dd a{color:var(--water-lift);text-decoration:none;white-space:nowrap}
.on-paper .defs dd a,.on-paper-2 .defs dd a{color:var(--water-deep)}
.defs dd a:hover{text-decoration:underline}

/* FAQ */
.faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(20px,2.6vw,38px) clamp(26px,4vw,64px);margin-top:clamp(24px,3vw,40px)}
@media (max-width:780px){.faq{grid-template-columns:1fr}}
.faq h3{font-size:1rem;margin-bottom:.38rem}
.faq p{color:#A9B2B5;font-size:.92rem;margin:0}
.on-paper .faq p,.on-paper-2 .faq p{color:var(--ink-2)}

/* ---------- contact --------------------------------------------------- */
.person{border-top:2px solid var(--water);padding-top:22px}
.person h3{font-size:1.25rem}
.person-role{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:#7E8A8D;margin:.35rem 0 1.2rem;font-weight:500}
.on-paper .person-role,.on-paper-2 .person-role{color:var(--ink-3)}
.contact-dl{display:grid;grid-template-columns:80px 1fr;gap:9px 16px;margin:0 0 1.4rem}
.contact-dl dt{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:#7E8A8D;padding-top:4px;font-weight:500}
.contact-dl dd{margin:0;font-size:1.01rem;color:#C8CFD1}
.contact-dl a{color:var(--water-lift);text-decoration:none}
.on-paper .contact-dl dd,.on-paper-2 .contact-dl dd{color:var(--ink-2)}
.on-paper .contact-dl a,.on-paper-2 .contact-dl a{color:var(--water-deep)}
.contact-dl a:hover{text-decoration:underline}
.addr{font-size:.92rem;color:#8B9497;line-height:1.6}
.on-paper .addr,.on-paper-2 .addr{color:var(--ink-2)}

.fld{display:block;margin-bottom:14px}
.fld .lbl{margin-bottom:.38rem}
.fld input,.fld textarea{width:100%;padding:12px 14px;border:1px solid var(--rule-dark);
  font:inherit;font-size:.95rem;background:var(--panel-2);color:var(--paper-2)}
.on-paper .fld input,.on-paper .fld textarea,
.on-paper-2 .fld input,.on-paper-2 .fld textarea{
  background:var(--screen);border-color:var(--rule-soft);color:var(--ink)}
.fld textarea{resize:vertical}
.fine{margin:1.2rem 0 0;font-size:.78rem;color:#7E8A8D;line-height:1.55}
.fine a{color:var(--water-lift)}
.on-paper .fine,.on-paper-2 .fine{color:var(--ink-3)}
.on-paper .fine a,.on-paper-2 .fine a{color:var(--water-deep)}

/* ---------- notice (needs sign-off) ---------------------------------- */
.notice{border:1px dashed var(--fault);background:rgba(179,40,45,.08);padding:16px 20px;
  font-size:.87rem;color:#E8989B;margin:1.4rem 0}
.on-paper .notice,.on-paper-2 .notice{background:rgba(179,40,45,.05);color:#8C2226}
.notice code{font-family:var(--mono);font-size:.85em}

/* ---------- CTA band + footer ---------------------------------------- */
.cta-band{background:var(--panel);border-top:1px solid var(--rule-dark)}
.cta-band h2{max-width:24ch;margin-bottom:1.1rem}
.cta-band .lede{margin-bottom:1.9rem}

footer{background:var(--ink);color:#8B9497;padding:clamp(44px,5.4vw,72px) 0 30px;
  font-size:.9rem;border-top:1px solid var(--rule-dark)}
.f-grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:clamp(20px,2.6vw,38px)}
@media (max-width:860px){.f-grid{grid-template-columns:1fr 1fr}}
@media (max-width:540px){.f-grid{grid-template-columns:1fr}}
footer h4{font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--water-lift);margin:0 0 1rem;font-weight:500}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin-bottom:.6rem}
footer a{color:#A9B2B5;text-decoration:none}
footer a:hover{color:var(--paper-2)}
.f-bot{margin-top:clamp(30px,3.6vw,48px);padding-top:22px;border-top:1px solid var(--rule-dark);
  display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.11em;text-transform:uppercase;color:#6A7679}
.f-bot a{color:#6A7679}
.f-bot .sp{margin-left:auto}
.f-legal{margin-top:16px;font-size:.76rem;line-height:1.6;color:#6A7679;max-width:92ch;
  text-transform:none;letter-spacing:0;font-family:var(--sans)}

/* ---------- utility --------------------------------------------------- */
.mt-l{margin-top:clamp(26px,3.4vw,48px)}
.mt-m{margin-top:clamp(18px,2.2vw,28px)}
.center{text-align:center}
.skip{position:absolute;left:-9999px;background:var(--water);color:#fff;padding:10px 16px;z-index:100}
.skip:focus{left:12px;top:12px}
.rv{opacity:0;transform:translateY(10px);transition:opacity .55s ease,transform .55s ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}
.no-js .rv{opacity:1;transform:none}

/* ---------- long-form prose (legal, insights) ------------------------- */
.prose{max-width:72ch}
.prose h2{font-size:clamp(1.3rem,2.2vw,1.7rem);margin:2.2rem 0 .8rem}
.prose h3{margin:1.7rem 0 .5rem}
.prose p{color:#A9B2B5;font-size:.97rem}
.prose ul{margin:0 0 1.1em;padding-left:1.2em;color:#A9B2B5}
.prose li{margin-bottom:.45em}
.prose a{color:var(--water-lift)}
.on-paper .prose p,.on-paper .prose ul,.on-paper-2 .prose p,.on-paper-2 .prose ul{color:var(--ink-2)}
.on-paper .prose a,.on-paper-2 .prose a{color:var(--water-deep)}

/* ---------- meter dials ----------------------------------------------- */
.odo{display:inline-flex;align-items:baseline;gap:.34em;white-space:nowrap}
.odo-reels{display:inline-flex;align-items:stretch;gap:2px}
.odo-w{
  --odo-h:1.12em;
  display:block;height:var(--odo-h);overflow:hidden;position:relative;
  background:#0E1113;border:1px solid #000;border-radius:1px;padding:0 .1em;
}
.odo-w::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.12) 26%,
             rgba(255,255,255,.05) 50%,rgba(0,0,0,.12) 74%,rgba(0,0,0,.72) 100%);
}
.odo-r{display:block;transform:translateY(calc(var(--n) * var(--odo-h) * -1));will-change:transform}
.odo-d{
  display:block;height:var(--odo-h);line-height:var(--odo-h);
  font-family:var(--disp);font-weight:850;font-variation-settings:'wdth' 74,'wght' 850;
  font-variant-numeric:tabular-nums;text-align:center;color:var(--paper-2);min-width:.66em;
}
.odo-tenths .odo-d{color:var(--elec)}
.odo-s{font-family:var(--disp);font-weight:850;font-variation-settings:'wdth' 74,'wght' 850;
  color:var(--paper-2);align-self:flex-end;line-height:1.12em;padding:0 .02em}
.odo-u{font-family:var(--mono);font-size:.42em;font-weight:500;letter-spacing:.09em;
  color:var(--water-lift);text-transform:none}
.figs dd.dial{font-size:clamp(1.45rem,2.2vw,1.9rem);letter-spacing:0;padding-bottom:14px}
@media (prefers-reduced-motion:reduce){.odo-r{transition:none!important}}

/* ---------- charts ---------------------------------------------------- */
/* Charts scale to their column. The square-ish diagrams have small viewBoxes,
   so without a cap they blow up to banner size on a wide screen and their type
   goes with them. Cap those at roughly their drawn size. */
.chart{display:block;width:100%;height:auto}
.chart-sq{max-width:620px;margin:0 auto}
/* A 920-wide chart squeezed into a 375px phone is unreadable. Let the wide
   ones keep their drawn size and scroll inside the panel instead; the square
   and half-width diagrams are legible as-is and are left alone. */
@media (max-width:620px){
  .figure{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .figure .chart:not(.chart-sq):not(.chart-tall):not(.chart-half){min-width:560px}
}
.chart-tall{max-width:440px;margin:0 auto}
.chart-half{max-width:460px;margin:0 auto}
.figure{background:var(--panel);border:1px solid var(--rule-dark);padding:clamp(16px,2vw,26px);
  margin-top:clamp(22px,2.8vw,38px)}
.on-paper .figure,.on-paper-2 .figure{background:var(--paper-2);border-color:var(--rule-soft)}
/* charts are drawn for the dark panel; on a paper section the panel stays dark
   so the marks keep the contrast they were validated against */
.on-paper .figure.dark,.on-paper-2 .figure.dark{background:var(--panel);border-color:var(--rule-dark)}
.figure figcaption{margin:14px 0 0;font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;
  text-transform:uppercase;color:#7E8A8D;font-weight:500}
.on-paper .figure:not(.dark) figcaption,.on-paper-2 .figure:not(.dark) figcaption{color:var(--ink-3)}
.figure-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,24px);
  margin-top:clamp(22px,2.8vw,38px)}
@media (max-width:860px){.figure-split{grid-template-columns:1fr}}
.figure-split .figure{margin-top:0}
.map-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,380px);
  gap:clamp(24px,3.4vw,56px);align-items:center}
@media (max-width:900px){.map-split{grid-template-columns:1fr}}

/* ---------- product mockup -------------------------------------------- */
.desk{background:var(--paper-2);border:1px solid var(--rule-soft);display:grid;
  grid-template-columns:168px minmax(0,1fr);overflow:hidden;
  margin-top:clamp(22px,2.8vw,38px);color:var(--ink-2)}
@media (max-width:720px){.desk{grid-template-columns:1fr}}
.desk-rail{background:var(--ink);padding:18px 0 22px}
@media (max-width:720px){.desk-rail{display:none}}
.desk-rail .brand{padding:0 16px 16px;display:block}
.desk-rail ul{list-style:none;margin:0;padding:0}
.desk-rail li{padding:9px 16px;font-size:.84rem;color:#9AA4A7}
.desk-rail li.on{background:var(--panel-2);color:var(--paper-2);
  box-shadow:inset 2px 0 0 var(--water)}
.desk-rail .cap{font-family:var(--mono);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;
  color:#6A7679;padding:0 16px 10px}
.desk-main{padding:clamp(14px,2vw,22px);min-width:0}
.desk-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;
  border-bottom:1px solid var(--rule-soft);padding-bottom:12px;margin-bottom:16px}
.desk-head h3{color:var(--ink);font-size:1.1rem}
.desk-head span{font-size:.85rem;color:var(--ink-3)}
.desk-head .r{margin-left:auto;font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3)}
.desk-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}
@media (max-width:860px){.desk-kpis{grid-template-columns:repeat(2,1fr)}}
.desk-kpi{border:1px solid var(--rule-soft);padding:11px 13px 12px;background:#fff}
.desk-kpi .k{font-family:var(--mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);display:block;margin-bottom:5px}
.desk-kpi b{font-family:var(--disp);font-variation-settings:'wdth' 74,'wght' 850;font-weight:850;
  font-size:1.5rem;color:var(--ink);letter-spacing:-.025em;display:block;line-height:1}
.desk-kpi .s{display:block;margin-top:6px;font-size:.72rem;color:var(--ink-2)}
.desk-rows{border:1px solid var(--rule-soft);background:#fff}
.desk-row{display:flex;align-items:center;gap:12px;padding:10px 13px;
  border-bottom:1px solid var(--rule-soft);font-size:.84rem}
.desk-row:last-child{border-bottom:0}
.desk-row .act{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--rule-soft);padding:4px 7px;color:var(--ink-2);flex:0 0 auto}
.desk-row .txt{min-width:0;flex:1}
.desk-row .txt b{display:block;color:var(--ink);font-weight:600;font-size:.86rem}
.desk-row .txt span{display:block;color:var(--ink-3);font-size:.76rem}
.pill{font-family:var(--mono);font-size:.58rem;letter-spacing:.09em;text-transform:uppercase;
  padding:4px 9px;color:#fff;flex:0 0 auto;white-space:nowrap}
.pill.ex{background:#B3282D} .pill.ok{background:#2F6B4F}
.pill.due{background:#9A6B1F} .pill.new{background:#215E79}
.desk-note{margin-top:14px;border-left:3px solid var(--water);padding:11px 15px;
  background:rgba(44,123,158,.07);font-size:.82rem;color:var(--ink-2)}
.desk-note b{color:var(--ink)}

/* ---------- print ----------------------------------------------------- */
@media print{
  body{background:#fff;color:#000}
  .nav,.hero-cta,.cta-band,footer,.ghost{display:none}
  h1,h2,h3{color:#000}
  section{padding:18px 0}
}