/* ForgeLabs AI — shared design system.
   One stylesheet for every page so the landing page, /ai-receptionist/ and
   /report/ cannot drift apart. Page-specific rules stay inline on the page that
   owns them; there should be very little of that.

   Design brief: this site is the portfolio piece for the website-build offer, so
   a prospect judges whether we can build theirs by looking at this one. It is
   deliberately light, warm and typographic — the previous dark/cyan/HUD
   treatment read as an AI product demo rather than as a contractor you would
   hire. The accent is ember, because the company is called ForgeLabs. */

:root{
  /* ── surfaces ───────────────────────────────────────────
     The site runs dark end to end so the hero's space continues the whole way
     down: there is no light section for the scroll to fall out of. Warm
     near-blacks, not neutral greys — a grey page under an ember accent goes
     cold and the hero would stop matching the page below it. */
  --paper:#0C0806;        /* page */
  --paper-2:#120C08;      /* alternating sections — deliberately a near-miss
                             against --paper, so the rhythm reads without a seam */
  --card:#17100A;         /* raised surfaces */

  /* ── text ───────────────────────────────────────────────
     Measured against --paper with the WCAG 2.1 relative-luminance formula:
       --ink    18.67:1   AAA
       --body   11.71:1   AAA
       --muted   6.36:1   AA
       --steel   8.01:1   AAA
     Dark gives far more headroom than the light palette did, which is why
     --ember no longer needs a separate darker value for body-size text: it
     measures 7.67:1 here against 3.85:1 before. */
  --ink:#FBF7F0;
  --body:#CFC5B8;
  --muted:#9A9084;
  --steel:#9BA5B4;        /* data labels, secondary numerals */

  /* ── ember ──────────────────────────────────────────────
       --ember     #FF7A2E  7.67:1 on paper — safe at any size now.
       --ember-tx  #FF8A3D  8.50:1 — the slightly lighter one, for text.
       --ember-lb  #1A0D05  the label on an ember fill: 7.32:1 on --ember.
     On dark the button inverts — dark label on a bright ember fill — which is
     the opposite of the light build and measures better than it did. */
  --ember:#FF7A2E;
  --ember-tx:#FF8A3D;
  --ember-lb:#1A0D05;
  --ember-wash:rgba(255,122,46,.10);
  --ember-line:rgba(255,122,46,.32);

  --line:rgba(233,226,215,.12);
  --line-2:rgba(233,226,215,.06);
  /* Drop shadows do not read on near-black. Depth comes from a lifted surface
     and a hairline instead, with an ember bloom standing in for a cast shadow
     on hover. */
  --shadow:0 1px 2px rgba(0,0,0,.45), 0 10px 28px -16px rgba(0,0,0,.7);
  --shadow-up:0 2px 6px rgba(0,0,0,.5), 0 22px 46px -20px rgba(255,122,46,.22);

  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --max:1180px;
}
*{box-sizing:border-box}
/* color-scheme tells the browser the page is dark, which turns the scrollbars,
   form controls, caret and the overscroll area dark with it. Without it those
   stay light and flash white at the top and bottom of the scroll — the one
   place a dark page still leaks white. */
html{
  scroll-behavior:smooth;
  color-scheme:dark;
  background:var(--paper);
}
body{
  margin:0; background:var(--paper); color:var(--body);
  font:400 16.5px/1.68 Inter,system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}

/* Archivo carries a width axis. Set wide, it reads like stamped metal signage —
   which is the whole reason it was chosen over another neutral grotesque.
   Headlines stay sentence case: the hero depends on <em> for its emphasis and
   the voice across this site is plain spoken, so shouting would fight both. */
h1,h2,h3{
  font-family:Archivo,Inter,sans-serif;
  font-variation-settings:"wdth" 110;
  color:var(--ink); letter-spacing:-.022em; margin:0; font-weight:700;
}
p{margin:0}
a{color:inherit}
strong{color:var(--ink); font-weight:600}
.wrap{max-width:var(--max); margin:0 auto; padding:0 24px; position:relative; z-index:1}
section{padding:112px 0; position:relative; z-index:1}
.section-alt{background:var(--paper-2)}
@media(max-width:720px){section{padding:76px 0}}

/* ── eyebrow label ──────────────────────────────────────── */
/* Was a mono "HUD" label. Archivo uppercase plus tracking does the same
   structural job without the terminal costume. */
.tag{
  font-family:Archivo,Inter,sans-serif; font-weight:600;
  font-size:11.5px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--ember-tx); display:inline-flex; align-items:center; gap:10px;
}
.tag::before{content:""; width:20px; height:2px; background:var(--ember); flex:none}
.tag.plain::before{display:none}
.tag.steel{color:var(--steel)}
.tag.steel::before{background:var(--steel); opacity:.5}

/* ── nav ────────────────────────────────────────────────── */
nav{
  position:fixed; top:0; left:0; right:0; z-index:60;
  backdrop-filter:blur(14px) saturate(1.4);
  background:rgba(12,8,6,.78);
  border-bottom:1px solid transparent; transition:border-color .3s,box-shadow .3s;
}
nav.on{border-bottom-color:var(--line); box-shadow:0 1px 18px -6px rgba(0,0,0,.6)}
.nav-in{max-width:var(--max); margin:0 auto; padding:13px 24px; display:flex; align-items:center; gap:30px}
.brand{
  font-family:Archivo,Inter,sans-serif; font-variation-settings:"wdth" 112;
  font-weight:700; font-size:16.5px; color:var(--ink); text-decoration:none;
  letter-spacing:-.02em; display:flex; align-items:center; gap:10px;
}
.brand i{
  width:10px; height:10px; display:block; flex:none; border-radius:50%;
  background:var(--ember); box-shadow:0 0 0 3px rgba(255,122,46,.24);
}
.nav-links{margin-left:auto; display:flex; align-items:center; gap:28px}
.nav-links a{font-size:14px; font-weight:500; color:var(--body); text-decoration:none; transition:color .2s}
.nav-links a:hover{color:var(--ember-tx)}
.nav-links a[aria-current="page"]{color:var(--ember-tx)}
/* The nav CTA is a real button, not a sixth link. Four choices, not six. */
.nav-links .btn{padding:10px 18px; font-size:13.5px}

/* hamburger — the old stylesheet hid .nav-links below 820px and put nothing in
   its place, so the site had no navigation at all on a phone. */
.burger{
  margin-left:auto; display:none; width:42px; height:42px; padding:0;
  background:none; border:1px solid var(--line); border-radius:3px;
  cursor:pointer; position:relative; color:var(--ink);
}
.burger span{
  position:absolute; left:11px; right:11px; height:2px; background:currentColor;
  transition:transform .26s,opacity .18s;
}
.burger span:nth-child(1){top:14px}
.burger span:nth-child(2){top:20px}
.burger span:nth-child(3){top:26px}
body.menu-open .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.menu{
  position:fixed; inset:0; z-index:55; background:var(--paper);
  display:none; flex-direction:column; justify-content:center; gap:2px;
  padding:88px 28px 40px;
}
body.menu-open{overflow:hidden}
body.menu-open .menu{display:flex}
.menu a{
  font-family:Archivo,Inter,sans-serif; font-variation-settings:"wdth" 108;
  font-weight:700; font-size:clamp(26px,7vw,34px); letter-spacing:-.025em;
  color:var(--ink); text-decoration:none; padding:14px 0;
  border-bottom:1px solid var(--line-2);
}
.menu a:last-of-type{border-bottom:0}
.menu .btn{margin-top:26px; justify-content:center; font-size:16px; padding:17px 26px}
@media(max-width:900px){
  .nav-links{display:none}
  .burger{display:block}
}
@media(min-width:901px){
  .menu{display:none!important}
}

/* ── buttons ────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:15px 26px; font:600 15px Inter,sans-serif; text-decoration:none;
  border:1px solid var(--line); color:var(--ink); background:var(--card);
  border-radius:3px; cursor:pointer;
  transition:background .2s,border-color .2s,color .2s,transform .14s,box-shadow .2s;
}
.btn:hover{border-color:var(--ink); transform:translateY(-1px); box-shadow:var(--shadow)}
.btn:active{transform:translateY(0)}
/* Primary uses --ember-tx, not --ember: the label needs 4.5:1 and only the
   deeper value gets there. See the token block. */
.btn.pri{
  background:var(--ember-tx); color:var(--ember-lb); border-color:var(--ember-tx);
  font-weight:600; box-shadow:0 1px 2px rgba(0,0,0,.4),0 10px 26px -12px rgba(255,122,46,.45);
}
.btn.pri:hover{background:#FF9450; border-color:#FF9450; color:var(--ember-lb)}
.btn.ghost{background:transparent; border-color:var(--line); color:var(--body)}
.btn.ghost:hover{border-color:var(--ember-tx); color:var(--ember-tx); background:var(--ember-wash)}
.btn[disabled]{opacity:.5; cursor:default; transform:none}

/* ── card ───────────────────────────────────────────────── */
/* Replaces the old .panel, which had HUD corner brackets and a scan-line sweep
   on hover. Those two details were the strongest sci-fi tell on the site. This
   reads as a printed spec sheet instead, which suits a page whose central asset
   is a research report. */
.panel{
  position:relative; background:var(--card); border:1px solid var(--line);
  border-radius:4px; padding:30px; box-shadow:var(--shadow);
  transition:box-shadow .3s,transform .3s,border-color .3s; overflow:hidden;
}
/* an ember rule that wipes in across the top edge on hover */
.panel::after{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--ember); transform:scaleX(0); transform-origin:left;
  transition:transform .4s cubic-bezier(.2,.7,.3,1);
}
.panel:hover{transform:translateY(-3px); box-shadow:var(--shadow-up); border-color:var(--ember-line)}
.panel:hover::after{transform:scaleX(1)}
.panel.flat,.panel.flat:hover{transform:none; box-shadow:var(--shadow)}
.panel.flat::after{display:none}
/* the "you are reading about this one" state on the receptionist page ladder */
.panel.hl{border-color:var(--ember-line); background:linear-gradient(var(--ember-wash),var(--ember-wash)),var(--card)}
.panel.hl::after{transform:scaleX(1)}
.panel.hl .idx{color:var(--ember); opacity:.85}

/* ── hero ───────────────────────────────────────────────── */
/* Two columns from 960px: copy left, the mechanism right. The old hero was one
   text column with a particle canvas behind it at min-height:92vh, which left
   the entire right half of a desktop viewport empty — that dead space is what
   made it feel like it did not fit the page. */
#hero{padding:150px 0 92px; position:relative; overflow:hidden}
#hero::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 70% 55% at 78% 30%,rgba(255,122,46,.14),transparent 70%),
    radial-gradient(ellipse 90% 60% at 10% 0%,rgba(155,165,180,.07),transparent 72%);
}
.hero-in{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.92fr); gap:62px; align-items:center}
.hero-copy{max-width:600px}
/* 19ch over 3 lines. At 64px/16ch this broke to five lines with "go?" orphaned
   on the last one, which made the headline shout and pushed the CTA down. */
h1{font-size:clamp(34px,4.4vw,56px); line-height:1.04; margin:20px 0 0; max-width:19ch}
h1 em{font-style:normal; color:var(--ember-tx)}
.lede{margin-top:22px; font-size:clamp(16.5px,1.6vw,18.5px); max-width:54ch; color:var(--body)}
.cta-row{margin-top:34px; display:flex; gap:13px; flex-wrap:wrap}
.hero-note{margin-top:19px; font-size:13.5px; color:var(--muted)}
.hero-fig{position:relative; min-height:430px; display:flex; align-items:center; justify-content:center}
@media(max-width:959px){
  #hero{padding:122px 0 70px}
  .hero-in{grid-template-columns:1fr; gap:40px}
  .hero-copy{max-width:none}
  h1{max-width:18ch}
  /* Height must stay auto here. A fixed height clipped nothing and simply let
     the diagram paint over the CTA above it at tablet widths, because the SVG
     scales with the column. Cap the figure's width instead and let it size to
     its own content. */
  .hero-fig{min-height:0; height:auto; order:2}
  .fig-path{max-width:440px; margin-inline:auto}
}

/* sub-page hero: same type, no mechanism */
.phero{padding:142px 0 70px; position:relative}
.phero h1{max-width:21ch}
.crumb{font-size:13px; color:var(--muted)}
.crumb a{color:var(--muted); text-decoration:none; border-bottom:1px solid var(--line); transition:color .2s,border-color .2s}
.crumb a:hover{color:var(--ember-tx); border-bottom-color:var(--ember-line)}
@media(max-width:720px){.phero{padding:112px 0 56px}}

/* ── stat readout ───────────────────────────────────────── */
.readout{
  display:grid; grid-template-columns:repeat(4,1fr);
  border:1px solid var(--line); border-radius:4px; overflow:hidden; background:var(--card);
}
.stat{padding:30px 24px; text-align:left; border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat .n{
  font-family:Archivo,Inter,sans-serif; font-variation-settings:"wdth" 112;
  font-size:clamp(36px,4.6vw,54px); font-weight:700; color:var(--ember);
  line-height:1; letter-spacing:-.035em;
}
/* the "0 businesses named" figure is a promise, not a finding — steel, so it
   does not read as another ember headline number */
.stat .n.alt{color:var(--steel)}
.stat .k{margin-top:12px; font-size:13.5px; line-height:1.5; color:var(--body)}
.stat .s{
  margin-top:8px; font-family:Archivo,Inter,sans-serif; font-weight:600;
  font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
}
@media(max-width:900px){
  .readout{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(2){border-right:0}
  .stat:nth-child(1),.stat:nth-child(2){border-bottom:1px solid var(--line)}
}
@media(max-width:460px){
  .readout{grid-template-columns:1fr}
  .stat{border-right:0; border-bottom:1px solid var(--line)}
  .stat:last-child{border-bottom:0}
}

/* ── the 73-tile scan ───────────────────────────────────── */
/* The one other thing on the site that moves. Same correctness rule as the
   counters: the true end state is in the HTML, so no-JS, reduced-motion and a
   stalled animation all leave a visitor reading 43 of 73 rather than 0. */
.scan73{margin-top:30px; border:1px solid var(--line); border-radius:4px; background:var(--card); padding:26px 26px 22px; box-shadow:var(--shadow)}
.scan73 .head{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:20px}
.scan73 .cnt{
  font-family:Archivo,Inter,sans-serif; font-variation-settings:"wdth" 112;
  font-weight:700; font-size:30px; line-height:1; color:var(--ember); letter-spacing:-.03em;
}
.scan73 .cap{font-size:14px; color:var(--body)}
.tiles{display:grid; grid-template-columns:repeat(auto-fill,minmax(26px,1fr)); gap:6px; position:relative}
.tiles i{
  display:block; aspect-ratio:1; border-radius:2px; background:var(--paper-2);
  border:1px solid var(--line-2); position:relative; transition:background .3s,border-color .3s;
}
.tiles i.f{background:var(--ember-wash); border-color:var(--ember-line)}
.tiles i.f::before,.tiles i.f::after{
  content:""; position:absolute; left:50%; top:50%; width:52%; height:2px;
  background:var(--ember); border-radius:1px;
}
.tiles i.f::before{transform:translate(-50%,-50%) rotate(45deg)}
.tiles i.f::after{transform:translate(-50%,-50%) rotate(-45deg)}
/* while the sweep is running, failed tiles are held neutral and released as the
   scan line passes over them */
.tiles.sweeping i.f{background:var(--paper-2); border-color:var(--line-2)}
.tiles.sweeping i.f::before,.tiles.sweeping i.f::after{opacity:0}
.tiles.sweeping i.f.lit{background:var(--ember-wash); border-color:var(--ember-line)}
.tiles.sweeping i.f.lit::before,.tiles.sweeping i.f.lit::after{opacity:1; transition:opacity .2s}
.scan73 .legend{margin-top:18px; display:flex; gap:20px; flex-wrap:wrap; font-size:12.5px; color:var(--muted)}
.scan73 .legend span{display:inline-flex; align-items:center; gap:8px}
.scan73 .legend b{width:14px; height:14px; border-radius:2px; display:block; flex:none; border:1px solid var(--line-2); background:var(--paper-2); position:relative}
/* the legend swatch carries the same cross as the tiles — the two fills alone
   are close enough that the key was doing no work */
.scan73 .legend b.f{background:var(--ember-wash); border-color:var(--ember-line)}
.scan73 .legend b.f::before,.scan73 .legend b.f::after{
  content:""; position:absolute; left:50%; top:50%; width:8px; height:2px;
  background:var(--ember); border-radius:1px;
}
.scan73 .legend b.f::before{transform:translate(-50%,-50%) rotate(45deg)}
.scan73 .legend b.f::after{transform:translate(-50%,-50%) rotate(-45deg)}

/* ── generic layout ─────────────────────────────────────── */
h2{font-size:clamp(29px,3.7vw,44px); line-height:1.1; margin:17px 0 0; max-width:22ch}
h2 em{font-style:normal; color:var(--ember-tx)}
.sub{margin-top:18px; max-width:62ch; font-size:17px}
.sub+.sub{margin-top:15px}
.grid{display:grid; gap:20px; margin-top:52px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.grid.tight{margin-top:34px}
@media(max-width:1020px){.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:880px){.g2,.g3{grid-template-columns:1fr}}
@media(max-width:620px){.g4{grid-template-columns:1fr}}
/* two-column prose plus sidecar, used by #why and the receptionist trust block */
.split{display:grid; grid-template-columns:1fr 1fr; gap:58px; align-items:center; margin-top:0}
.split.top{align-items:start}
@media(max-width:880px){.split{grid-template-columns:1fr; gap:38px}}
.center{text-align:center}
.center .tag{justify-content:center}
.center h2,.center .sub{margin-inline:auto}
.center .cta-row{justify-content:center}
.stack{margin-top:22px; display:grid; gap:20px}

/* card interiors — these replace the repeated inline font sizes */
.panel-sm h3{font-size:17.5px; font-weight:700}
.panel-sm p{margin-top:11px; font-size:14.5px}
.panel-sm .tag{margin-bottom:16px}
.mini h3{font-size:16px; font-weight:700}
.mini p{margin-top:7px; font-size:14.5px}

/* ── offer ladder ───────────────────────────────────────── */
.rung{display:grid; grid-template-columns:72px 1fr; gap:26px; align-items:start}
.rung .idx{
  font-family:Archivo,Inter,sans-serif; font-variation-settings:"wdth" 116;
  font-size:40px; font-weight:700; color:var(--steel); opacity:.3;
  line-height:.9; letter-spacing:-.05em;
}
.rung h3{font-size:22px}
.rung .role{
  font-family:Archivo,Inter,sans-serif; font-weight:600; font-size:10.5px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-top:8px;
}
.rung p{margin-top:14px; font-size:15.5px; max-width:64ch}
/* guarantee badge. Wording is fixed in guarantees.md — restyle it, never edit it. */
.gtee{
  margin-top:18px; display:inline-flex; align-items:flex-start; gap:10px;
  padding:10px 15px; border:1px solid var(--ember-line); border-left-width:3px;
  background:var(--ember-wash); color:var(--ember-tx); border-radius:3px;
  font:600 13.5px/1.45 Inter,sans-serif;
}
.gtee svg{flex:none; margin-top:2px}
.after{margin-top:15px; font-size:13.5px; color:var(--muted); font-style:italic; max-width:60ch}
.more{
  margin-top:17px; display:inline-flex; align-items:center; gap:8px;
  font:600 14.5px Inter,sans-serif; color:var(--ember-tx); text-decoration:none;
  border-bottom:1px solid var(--ember-line); padding-bottom:2px; transition:border-color .2s,gap .2s;
}
.more:hover{border-bottom-color:var(--ember-tx); gap:12px}
.here{
  display:inline-block; vertical-align:3px; margin-left:10px; padding:4px 9px;
  background:var(--ember-tx); color:var(--ember-lb); border-radius:3px;
  font:600 10.5px Archivo,Inter,sans-serif; letter-spacing:.11em; text-transform:uppercase;
}
@media(max-width:620px){.rung{grid-template-columns:1fr; gap:8px}.rung .idx{font-size:32px}}

/* ── steps band ─────────────────────────────────────────── */
/* One connected band rather than three detached cards: the steps are a
   sequence, and three equal boxes do not say sequence. */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:52px; border-top:2px solid var(--line)}
.steps.four{grid-template-columns:repeat(4,1fr)}
.step{padding:28px 30px 0 0; position:relative}
.step::before{
  content:""; position:absolute; top:-2px; left:0; width:34px; height:2px; background:var(--ember);
}
.step .num{
  font-family:Archivo,Inter,sans-serif; font-weight:600; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ember-tx);
}
.step h3{margin-top:13px; font-size:18.5px}
.step p{margin-top:11px; font-size:14.5px; max-width:40ch}
@media(max-width:880px){
  .steps,.steps.four{grid-template-columns:1fr; border-top:0}
  .step{padding:26px 0 0; border-top:2px solid var(--line)}
}

/* ── ticked list ────────────────────────────────────────── */
.ticks{list-style:none; margin:0; padding:0; display:grid; gap:17px}
.ticks li{display:grid; grid-template-columns:18px 1fr; gap:14px; align-items:start; font-size:15px}
.ticks svg{margin-top:5px; color:var(--ember)}
.ticks b{color:var(--ink); font-weight:600}

/* ── candour note ───────────────────────────────────────── */
/* Every page has one of these: the bit that says what we cannot prove or will
   not do. They are a trust device, so they get a deliberate treatment rather
   than being buried in small print. */
.note{
  border:1px solid var(--line); border-left:3px solid var(--ember);
  background:var(--card); border-radius:3px; padding:24px 28px; margin-top:46px;
  box-shadow:var(--shadow);
}
.note h3{font-size:17px; color:var(--ember-tx)}
.note p{margin-top:12px; font-size:14.5px; max-width:74ch}
.note p+p{margin-top:14px}

/* ── FAQ ────────────────────────────────────────────────── */
/* Native <details>: keyboard-operable with no JS, so a script error can never
   lock the answers away. */
.faq{margin-top:48px; border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer; list-style:none; padding:23px 46px 23px 0; position:relative;
  font:700 17.5px Archivo,Inter,sans-serif; font-variation-settings:"wdth" 106;
  color:var(--ink); letter-spacing:-.015em; transition:color .2s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+"; position:absolute; right:8px; top:50%; transform:translateY(-50%);
  font:400 24px/1 Inter,sans-serif; color:var(--ember);
}
.faq details[open] summary::after{content:"\2212"}
.faq summary:hover{color:var(--ember-tx)}
.faq .a{padding:0 46px 26px 0; font-size:15.5px; max-width:76ch}
.faq .a p+p{margin-top:13px}

/* ── closing CTA ────────────────────────────────────────── */
#contact .panel{padding:58px 38px; max-width:760px; margin-inline:auto}
#contact h2{max-width:20ch}

/* ── footer ─────────────────────────────────────────────── */
footer{border-top:1px solid var(--line); padding:40px 0; position:relative; z-index:1; background:var(--paper-2)}
.foot{display:flex; gap:24px; flex-wrap:wrap; align-items:center; font-size:14.5px}
.foot a{color:var(--body); text-decoration:none; transition:color .2s}
.foot a:hover{color:var(--ember-tx)}
.foot .sp{margin-left:auto; font-size:13px; color:var(--muted)}
@media(max-width:720px){.foot .sp{margin-left:0; width:100%}}

/* ── form ───────────────────────────────────────────────── */
.form{display:grid; gap:15px; margin-top:32px; text-align:left; max-width:520px; margin-inline:auto}
.form label{
  font-family:Archivo,Inter,sans-serif; font-weight:600; font-size:11px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
  display:block; margin-bottom:8px;
}
.form input,.form textarea{
  width:100%; padding:14px 15px; background:var(--card); color:var(--ink);
  border:1px solid rgba(233,226,215,.26); border-radius:3px; font:400 15.5px Inter,sans-serif;
  transition:border-color .2s,box-shadow .2s;
}
.form input:focus,.form textarea:focus{
  outline:none; border-color:var(--ember-tx); box-shadow:0 0 0 3px rgba(255,122,46,.22);
}
.form input::placeholder,.form textarea::placeholder{color:#6B6358}
.form textarea{min-height:92px; resize:vertical}
.form .req{color:var(--ember-tx)}
.form .opt{text-transform:none; letter-spacing:0}
/* honeypot: off-screen rather than display:none, which some bots detect */
.hp{position:absolute!important; left:-9999px!important; width:1px; height:1px; overflow:hidden}
.msg{margin-top:17px; padding:14px 16px; font-size:14.5px; display:none; text-align:left; border-radius:3px}
.msg.show{display:block}
.msg.ok{border:1px solid var(--ember-line); background:var(--ember-wash); color:var(--ink)}
.msg.err{border:1px solid var(--ember-line); border-left-width:3px; background:var(--ember-wash); color:var(--ember-tx)}

/* ── report page ────────────────────────────────────────── */
/* The one place mono earns its keep: a data table where figure alignment is the
   point. Everywhere else it was costume. */
.rpt{max-width:860px; margin-inline:auto}
.rpt .meta{margin-top:18px; font-size:13.5px; color:var(--muted)}
.rpt h2{margin-top:62px}
.rpt h3{margin-top:38px; font-size:19px}
.rpt p{margin-top:16px; font-size:16.5px; max-width:70ch}
.rpt ul{margin:18px 0 0; padding-left:22px; display:grid; gap:13px}
.rpt li{font-size:16px; max-width:70ch}
.rpt .pull{
  margin-top:28px; padding:24px 28px; background:var(--card);
  border:1px solid var(--line); border-left:3px solid var(--ember);
  border-radius:3px; font-family:Archivo,Inter,sans-serif;
  font-variation-settings:"wdth" 106; font-weight:700; font-size:clamp(19px,2.3vw,25px);
  line-height:1.3; color:var(--ink); letter-spacing:-.02em; box-shadow:var(--shadow);
}
.tbl{width:100%; border-collapse:collapse; margin-top:26px; font-size:15px; background:var(--card); border:1px solid var(--line); border-radius:4px}
.tbl caption{
  caption-side:top; text-align:left; padding-bottom:12px;
  font-family:Archivo,Inter,sans-serif; font-weight:600; font-size:11px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
}
.tbl th,.tbl td{padding:14px 16px; border-bottom:1px solid var(--line); text-align:left}
.tbl thead th{
  font-family:Archivo,Inter,sans-serif; font-weight:600; font-size:11px;
  letter-spacing:.11em; text-transform:uppercase; color:var(--muted); background:var(--paper-2);
}
.tbl td.num,.tbl th.num{text-align:right; font-family:var(--mono); font-size:14.5px; font-variant-numeric:tabular-nums}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tr.tot td{background:var(--ember-wash); color:var(--ink); font-weight:600}
.tbl tr.tot td.num{color:var(--ember-tx)}
@media(max-width:620px){
  .tbl,.tbl th,.tbl td{font-size:14px}
  .tbl th,.tbl td{padding:11px 12px}
}

/* ── reveal ─────────────────────────────────────────────── */
/* Scoped to .js: without scripting every .rv element must still be visible.
   Hiding by default and revealing via JS means one script error blanks the
   whole page below the fold. */
.js .rv{opacity:0; transform:translateY(18px); transition:opacity .6s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1)}
.js .rv.in{opacity:1; transform:none}

:focus-visible{outline:2px solid var(--ember-tx); outline-offset:3px}
::selection{background:rgba(255,122,46,.26); color:#FFF}

/* ── local-only hero variant switcher ───────────────────── */
/* Created by hero.js only on localhost, so it cannot reach the live site. It is
   also hidden here by default as a second line of defence. */
.heroswitch{display:none}
.heroswitch.on{
  display:flex; position:fixed; bottom:16px; left:16px; z-index:200; gap:6px;
  align-items:center; padding:7px; background:var(--card);
  border:1px solid var(--line); border-radius:4px; box-shadow:var(--shadow-up);
  font:600 12px Inter,sans-serif;
}
.heroswitch a{
  padding:7px 12px; border-radius:3px; text-decoration:none; color:var(--body);
  border:1px solid transparent;
}
.heroswitch a.sel{background:var(--ember-tx); color:var(--ember-lb)}
.heroswitch span{padding:7px 4px 7px 8px; color:var(--muted); font-weight:500}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important; transition:none!important}
  .rv{opacity:1!important; transform:none!important}
}