/* Mistfire v2 "After dark": mistfire.ca
   One stylesheet, no build step. Tokens first, then base, then components in page order.
   v1 was a pale kitchen in daylight; v2 is the same site at night. Ground is warm coal,
   ink is warm paper, and the ember colour is reserved for the fire, the key numbers and
   the one action on the page. All the renders were shot at dusk, so imagery now runs
   full-bleed behind the heroes instead of sitting in boxes on white.
   Type: Urbanist (display, self-hosted variable 300-700) + Source Sans 3 (body, 400-700). */

/* ---------- fonts ---------- */
@font-face {
  font-family: "Urbanist";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("assets/fonts/urbanist-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("assets/fonts/source-sans-3-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- tokens ---------- */
:root {
  /* coal ground (the room at night) */
  --coal:     #0d1013;
  --coal-2:   #13171c;
  --coal-3:   #1b2127;
  --hair:     rgba(244, 236, 224, 0.10);
  --hair-2:   rgba(244, 236, 224, 0.20);

  /* warm paper ink + mist neutrals */
  --ink:      #f2ede4;
  --ink-2:    #c9c3b8;
  --mist:     #9aa2aa;
  --mist-2:   #6e767f;

  /* the plan band: deeper than the page, with an ember aura */
  --night:    #08090b;
  --night-2:  #111417;
  --night-3:  #1a1f24;
  --on-night: #f2ede4;
  --on-night-2: #b3ac9f;
  --hair-n:   rgba(244, 236, 224, 0.14);

  /* ember: fire, key numbers, the primary action */
  --ember:    #ff8f2e;
  --ember-hi: #ffb05c;
  --ember-dp: #d96f14;
  --ember-ink: #1c0e02;
  --ember-glow: rgba(255, 143, 46, 0.25);
  --ember-line: rgba(255, 143, 46, 0.45);

  /* water, for the technical drawings only */
  --water:    #6ea8ff;

  --font-display: "Urbanist", "Avenir Next", "Segoe UI Variable Display", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Source Sans 3", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;

  --wrap: 73.75rem;
  --wrap-wide: 82.35rem;
  --gutter: clamp(1.1rem, 4vw, 2.5rem);
  --radius: 10px;
  --radius-s: 8px;
  --shadow-img: 0 24px 60px -24px rgba(0, 0, 0, 0.65);
}

/* ---------- reset-ish base ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* root type scales with the viewport: 16px on laptops, easing up to 21px on
   ultrawide, so the design fills a big screen instead of floating in the middle */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; font-size: clamp(16px, 0.4vw + 11.2px, 21px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--coal);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-feature-settings: "kern", "liga", "tnum" 0;
  -webkit-font-smoothing: antialiased;
}
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
p, ul, ol, figure, blockquote { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 500; letter-spacing: -0.015em; line-height: 1.1; text-wrap: balance; }
h1 { font-size: clamp(2.7rem, 6.8vw, 5.8rem); font-weight: 300; letter-spacing: -0.03em; line-height: 1.0; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); font-weight: 400; }
h3 { font-size: 1.28rem; font-weight: 600; letter-spacing: -0.005em; }
h4 { font-size: 1.05rem; font-weight: 600; }
strong, b { font-weight: 600; }
small { font-size: 0.875em; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--ember); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--ember); color: var(--ember-ink); }

.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.wrap-wide { width: min(100% - 2 * var(--gutter), var(--wrap-wide)); margin-inline: auto; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
section[id], [id].band, [id].spot { scroll-margin-top: 4.5rem; }

.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: 0.6rem 1rem; background: var(--ember); color: var(--ember-ink); border-radius: 999px; }
.skip-link:focus { top: 1rem; }

/* ---------- type helpers ---------- */
.eyebrow {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ember);
  margin-bottom: 1rem;
}
.lede { font-size: clamp(1.15rem, 1.7vw, 1.35rem); line-height: 1.5; color: var(--ink-2); max-width: 34em; text-wrap: pretty; }
.measure { max-width: 62ch; }
.muted { color: var(--mist); }
.num { font-family: var(--font-display); font-weight: 300; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); font-size: 0.92em; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.85rem 1.4rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-weight: 600; font-size: 1rem; line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-ember { background: var(--ember); color: var(--ember-ink); box-shadow: 0 0 0 0 var(--ember-glow); }
.btn-ember:hover { background: var(--ember-hi); box-shadow: 0 0 0 6px var(--ember-glow); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--hair-2); }
.btn-ghost:hover { border-color: var(--ember); box-shadow: 0 0 0 4px rgba(255, 143, 46, 0.10); }
.btn-lg { padding: 1.05rem 1.7rem; font-size: 1.05rem; }
.link-more { font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--hair-2); padding-bottom: 2px; }
.link-more:hover { border-bottom-color: var(--ember); }
.link-more .arrow { display: inline-block; transition: transform 160ms ease; }
.link-more:hover .arrow { transform: translateX(3px); }

/* ---------- masthead ---------- */
.masthead {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--coal) 82%, transparent);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease, background-color 200ms ease;
}
.masthead.scrolled { border-bottom-color: var(--hair); background: color-mix(in srgb, var(--coal) 92%, transparent); }
.masthead .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 4.25rem; gap: 1rem; }
.brand {
  display: inline-flex; align-items: baseline; gap: 0.35rem;
  font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; letter-spacing: -0.02em;
  text-decoration: none; color: var(--ink);
}
.brand .brand-mark { width: 0.55em; height: 0.55em; border-radius: 50%; background: var(--ember); box-shadow: 0 0 12px 2px var(--ember-glow); align-self: center; }
.brand .brand-tag { font-family: var(--font-body); font-weight: 400; font-size: 0.8rem; color: var(--mist); letter-spacing: 0.02em; margin-left: 0.5rem; }
.mainnav { display: flex; align-items: center; gap: 1.6rem; }
.mainnav a:not(.btn) { text-decoration: none; font-weight: 600; font-size: 0.98rem; color: var(--ink-2); }
.mainnav a:not(.btn):hover { color: var(--ink); }
.mainnav a:not(.btn)[aria-current="page"] { color: var(--ember-hi); }
.mainnav .btn { padding: 0.7rem 1.15rem; font-size: 0.95rem; }
.nav-toggle { display: none; }

@media (max-width: 820px) {
  .brand .brand-tag { display: none; }
  .nav-toggle {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 0 10px; margin-right: -10px;
    background: transparent; border: 0; cursor: pointer;
  }
  .nav-toggle span { display: block; height: 2px; background: var(--ink); border-radius: 2px; transition: transform 200ms ease, opacity 200ms ease; }
  .nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  .nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .mainnav {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--night); border-bottom: 1px solid var(--hair);
    padding: 0.5rem var(--gutter) 1.1rem;
    display: none;
  }
  .nav-open .mainnav { display: flex; }
  .mainnav a:not(.btn) { padding: 0.85rem 0; border-bottom: 1px solid var(--hair); font-size: 1.05rem; }
  .mainnav .btn { margin-top: 1rem; justify-content: center; }
}

/* ---------- section scaffolding ---------- */
.band { padding: clamp(3.75rem, 8.5vw, 7.5rem) 0; }
.band + .band { border-top: 1px solid var(--hair); }
.band-alt { background: var(--coal-2); }
.band-head { display: grid; grid-template-columns: 1fr; gap: 1.2rem 3rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.band-head .lede { margin-top: 0.9rem; }
@media (min-width: 900px) {
  .band-head { grid-template-columns: 200px 1fr; }
  .band-head .eyebrow { margin-bottom: 0; padding-top: 0.75rem; }
}
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: clamp(1.5rem, 3vw, 3rem); }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(1.5rem, 3vw, 3rem); }

/* ---------- cinematic hero (home + line pages) ----------
   One full-bleed render fills the hero; copy sits on a scrim at the bottom-left;
   the caption and the "Concept render" tag close the figure, still over the image. */
.hero-cine { position: relative; }
.hero-fig-cine {
  position: relative; margin: 0;
  display: grid; grid-template-rows: 1fr auto auto;
  min-height: clamp(520px, 84svh, 800px);
  overflow: hidden;
  isolation: isolate;
}
.hero-media { position: absolute; inset: 0; z-index: -1; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
.hero-fig-cine::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(to right, rgba(6, 7, 9, 0.82) 0%, rgba(6, 7, 9, 0.42) 46%, transparent 72%),
    linear-gradient(to top, rgba(6, 7, 9, 0.94) 0%, rgba(6, 7, 9, 0.60) 34%, rgba(6, 7, 9, 0.14) 60%, rgba(6, 7, 9, 0.34) 100%);
}
.hero-cine-copy { position: relative; z-index: 1; padding-bottom: clamp(1.6rem, 3.5vw, 2.8rem); }
.hero-cine-copy h1 { max-width: 13ch; }
.hero-cine-copy .lede { margin-top: 1.3rem; color: #ddd7cc; }
.hero-cine-copy .hero-cta { margin-top: 2rem; }
.hero-cine-copy .badge { margin-bottom: 1rem; background: rgba(8, 9, 11, 0.55); border-color: var(--hair-n); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hero-cine-copy .eyebrow { text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5); }
.hero-fig-cine figcaption {
  position: relative; z-index: 1;
  padding: 0 0 1.1rem;
  font-size: 0.88rem; color: #b9b2a6;
}
.hero-fig-cine figcaption .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.4rem; }
.hero-fig-cine figcaption p { max-width: 72ch; }
.hero-fig-cine .fig-tag { position: static; flex: none; order: -1; }

/* ---------- home hero: copy beside a framed flame ----------
   The flame render is square, so it gets a framed panel whose size is bounded by
   the wrap at every viewport; no full-bleed stretch, no viewport-relative seams. */
.hero-home { position: relative; padding: clamp(2.5rem, 6vw, 4.5rem) 0 0; overflow: hidden; }
.hero-home::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(40% 50% at 76% 28%, rgba(255, 143, 46, 0.11), transparent 70%);
}
.hero-home-grid { position: relative; display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 1024px) { .hero-home-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); } }
.hero-home-copy h1 { max-width: 12ch; }
.hero-home-copy .lede { margin-top: 1.3rem; }
.hero-home-copy .hero-cta { margin-top: 2rem; }
.hero-home-fig { width: 100%; max-width: 36.5rem; justify-self: center; margin: 0; }
.hero-home-fig img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; box-shadow: 0 0 90px -18px rgba(255, 143, 46, 0.30), var(--shadow-img); }
@media (min-width: 1024px) { .hero-home-fig img { aspect-ratio: 4 / 5; } }
.hero-home-fig figcaption { margin-top: 0.8rem; font-size: 0.88rem; color: var(--mist); }
.hero-home .hero-facts { margin-top: clamp(2.2rem, 4vw, 3.5rem); }

/* key-facts strip under the home/island hero */
.hero-facts { list-style: none; padding: 1.3rem 0 1.4rem; margin: 0; display: flex; flex-wrap: wrap; gap: 0.7rem 2.1rem; border-bottom: 1px solid var(--hair); }
.hero-facts li { display: flex; align-items: center; gap: 0.55rem; font-size: 0.95rem; color: var(--mist); }
.hero-facts li::before { content: ""; width: 5px; height: 5px; border-radius: 1px; background: var(--ember); flex: none; }
.hero-facts b { color: var(--ink); font-weight: 600; }

/* figure chips, frames and captions everywhere else */
.fig-wrap { position: relative; }
.fig-wrap img { border: 1px solid var(--hair); border-radius: var(--radius); }
.fig-tag {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.35rem 0.7rem; border-radius: 999px;
  background: rgba(8, 9, 11, 0.72); border: 1px solid var(--hair-n); color: var(--on-night);
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.fig-wrap .fig-tag { position: absolute; left: 0.9rem; bottom: 0.9rem; }
.fig-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 8px 1px var(--ember-glow); }

/* legacy hero hooks (no longer used after v2; kept so nothing unstyled slips through) */
.hero { padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3.5rem); }
.hero-copy { max-width: 900px; }
.hero-copy h1 { max-width: 12ch; }
.hero-copy .lede { margin-top: 1.4rem; }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 1.6rem; margin-top: 2rem; }
.hero-fig { margin-top: clamp(2.2rem, 5vw, 4rem); }
.hero-fig img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--coal-2); }
.hero-fig figcaption { margin-top: 0.8rem; font-size: 0.9rem; color: var(--mist); }

/* ---------- how it works ---------- */
.how-card { background: var(--coal-2); border: 1px solid var(--hair); border-radius: var(--radius); padding: clamp(1.4rem, 2.5vw, 2rem); }
.how-card .icon { width: 44px; height: 44px; color: var(--ember-hi); margin-bottom: 1.1rem; }
.how-card .icon svg { width: 100%; height: 100%; }
.how-card h3 { margin-bottom: 0.55rem; }
.how-card p { color: var(--ink-2); text-wrap: pretty; }
.how-note {
  margin-top: clamp(2rem, 4vw, 3.5rem); padding-top: 1.6rem; border-top: 1px solid var(--hair);
  display: grid; grid-template-columns: 1fr; gap: 1rem 3rem; align-items: start;
}
@media (min-width: 900px) { .how-note { grid-template-columns: 200px 1fr; } }
.how-note p { color: var(--ink-2); max-width: 62ch; }
.how-note a { color: var(--ink); }

/* ---------- section drawing (the "how it's built" figure) ---------- */
.drawing { margin-top: clamp(2.5rem, 5vw, 4rem); }
.drawing figure { background: var(--coal-2); border: 1px solid var(--hair); border-radius: var(--radius); padding: clamp(0.8rem, 2vw, 1.6rem); overflow: hidden; }
.drawing svg { width: 100%; height: auto; color: var(--ink); font-family: var(--font-body); }
/* the drawings were drawn for v1's light ground: lift the two hard-coded accents to v2 values */
.drawing svg [fill="#2f68b9"], .drawing svg [stroke="#2f68b9"] { stroke: var(--water); }
.drawing svg [fill="#2f68b9"] { fill: var(--water); }
.drawing svg [fill="#c86a12"] { fill: var(--ember-dp); }
.drawing figcaption { margin-top: 0.9rem; font-size: 0.92rem; color: var(--mist); max-width: 80ch; }
.drawing figcaption b { color: var(--ink-2); font-weight: 600; }

/* ---------- image cards (format-card: demo pair, gallery cards) ---------- */
.format-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--coal-2); box-shadow: var(--shadow-img); transition: transform 300ms ease, border-color 300ms ease, box-shadow 300ms ease; }
.format-card .fig-wrap { position: relative; margin-bottom: 1.2rem; }
.format-card .fig-tag { left: 0.7rem; bottom: 0.7rem; font-size: 0.72rem; padding: 0.3rem 0.6rem; }
.format-card:hover img { border-color: var(--ember-line); box-shadow: 0 0 44px -8px rgba(255, 143, 46, 0.18); }
.format-card .spec { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 0.4rem; }
.format-card .spec .num { font-size: 2rem; color: var(--ember-hi); }
.format-card .spec small { color: var(--mist); font-size: 0.85rem; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; margin-left: 0.5rem; }
.format-card h3 { margin-bottom: 0.5rem; }
.format-card p { color: var(--ink-2); text-wrap: pretty; }
.format-card .suits { margin-top: 0.7rem; font-size: 0.92rem; color: var(--mist); }
.format-card .suits b { color: var(--ink-2); font-weight: 600; }

/* ---------- included ---------- */
.included-grid { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 4vw, 4rem); align-items: start; }
@media (min-width: 960px) { .included-grid { grid-template-columns: 1.4fr 1fr; } }
.checklist { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 640px) { .checklist { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; } }
.checklist li { display: grid; grid-template-columns: 22px 1fr; gap: 0.8rem; padding: 0.95rem 0; border-top: 1px solid var(--hair); align-items: start; }
.checklist li svg { width: 22px; height: 22px; color: var(--ember-hi); margin-top: 0.15rem; }
.checklist li b { display: block; font-weight: 600; }
.checklist li span { color: var(--ink-2); font-size: 0.97rem; }
.price-card { border-top: 2px solid var(--ember); padding-top: 1.4rem; }
.price-card .eyebrow { margin-bottom: 0.6rem; }
.price-card .num { font-size: clamp(2.6rem, 4.6vw, 3.8rem); color: var(--ink); }
.price-card .num small { font-family: var(--font-body); font-weight: 400; font-size: 1rem; letter-spacing: 0; color: var(--mist); margin-left: 0.4rem; }
.price-card p { margin-top: 1rem; color: var(--ink-2); font-size: 0.98rem; }
.price-card .fine { font-size: 0.88rem; color: var(--mist); margin-top: 0.8rem; }

/* ---------- the honest part ---------- */
.honest-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; }
@media (min-width: 760px) { .honest-list { grid-template-columns: 1fr 1fr; column-gap: 3rem; } }
.honest-list li { padding: 1.1rem 0; border-top: 1px solid var(--hair); }
.honest-list b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; margin-bottom: 0.25rem; }
.honest-list p { color: var(--ink-2); font-size: 0.98rem; }

/* ---------- the plan form (the deepest section, with the ember aura) ---------- */
.night { background: var(--night); color: var(--on-night); position: relative; }
.night::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, transparent, var(--ember-line), transparent) top / 100% 1px no-repeat,
    radial-gradient(70% 45% at 68% 0%, rgba(255, 143, 46, 0.09), transparent 70%);
}
.night .eyebrow { color: var(--ember-hi); }
.night .lede { color: var(--on-night-2); }
.night .band-head { margin-bottom: 0; }
.plan-grid { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; position: relative; }
@media (min-width: 960px) { .plan-grid { grid-template-columns: 1fr 1.15fr; } }
.plan-copy .lede { margin-top: 1rem; }
.plan-copy .steps { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 0.9rem; }
.plan-copy .steps li { display: grid; grid-template-columns: 26px 1fr; gap: 0.9rem; align-items: start; color: var(--on-night-2); }
.plan-copy .steps svg { width: 26px; height: 26px; color: var(--ember-hi); }
.plan-copy .steps b { color: var(--on-night); font-weight: 600; }
.plan-copy .promise { margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid var(--hair-n); font-size: 0.95rem; color: var(--on-night-2); }
.plan-copy .promise a { color: var(--on-night); }

.form { display: grid; gap: 1.1rem; }
.field-row { display: grid; grid-template-columns: 1fr; gap: 1.1rem; }
@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } }
.field label { display: block; font-size: 0.86rem; font-weight: 600; letter-spacing: 0.02em; color: var(--on-night-2); margin-bottom: 0.4rem; }
.field label .opt { font-weight: 400; color: var(--on-night-2); }
.field input, .field select, .field textarea {
  width: 100%; padding: 0.85rem 0.95rem;
  background: var(--night-2); color: var(--on-night);
  border: 1px solid var(--hair-n); border-radius: var(--radius-s);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.field input::placeholder, .field textarea::placeholder { color: var(--mist-2); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ember); box-shadow: 0 0 0 3px var(--ember-glow); }
.field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23b3ac9f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.9rem center; padding-right: 2.6rem; }
.field textarea { min-height: 7rem; resize: vertical; }
.field-file .drop {
  display: flex; align-items: center; gap: 0.9rem;
  padding: 0.9rem 1rem; border: 1px dashed var(--hair-n); border-radius: var(--radius-s);
  background: var(--night-2); color: var(--on-night-2); cursor: pointer;
  transition: border-color 140ms ease;
}
.field-file .drop:hover { border-color: var(--ember-line); }
.field-file .drop svg { width: 26px; height: 26px; color: var(--ember-hi); flex: none; }
.field-file .drop b { color: var(--on-night); font-weight: 600; display: block; }
.field-file .drop small { display: block; font-size: 0.82rem; }
.field-file input[type="file"] { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.field-file { position: relative; }
.field-file:has(input:focus-visible) .drop { outline: 3px solid var(--ember); outline-offset: 3px; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; margin-top: 0.4rem; }
.form-actions .fine { font-size: 0.85rem; color: var(--on-night-2); }
.form-actions .fine a { color: var(--on-night); }
.field .hint { display: block; margin-top: 0.4rem; font-size: 0.82rem; color: var(--mist-2); }

/* ---------- trades teaser ---------- */
.teaser { display: grid; grid-template-columns: 1fr; gap: 1.2rem 3rem; align-items: start; }
.teaser .eyebrow { padding-top: 0.75rem; margin-bottom: 0; }
.teaser .btn { align-self: center; }
@media (min-width: 900px) { .teaser { grid-template-columns: 200px 1fr auto; } }
.teaser p { color: var(--ink-2); max-width: 60ch; }
.teaser h2 { margin-bottom: 0.5rem; }

/* ---------- FAQ ---------- */
.faq { max-width: 860px; }
.faq details { border-top: 1px solid var(--hair); }
.faq details:last-child { border-bottom: 1px solid var(--hair); }
.faq summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: 1fr 28px; gap: 1rem; align-items: center;
  padding: 1.1rem 0;
  font-family: var(--font-display); font-weight: 500; font-size: 1.18rem; letter-spacing: -0.005em;
  transition: color 140ms ease;
}
.faq summary:hover { color: var(--ember-hi); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--hair-2);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2ede4' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 14px no-repeat;
  transition: transform 200ms ease, border-color 200ms ease;
}
.faq summary:hover::after { border-color: var(--ember-line); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .answer { padding: 0 3rem 1.3rem 0; color: var(--ink-2); max-width: 66ch; }
.faq .answer p + p { margin-top: 0.6rem; }

/* ---------- footer ---------- */
.foot { background: var(--night); border-top: 1px solid var(--hair); padding: clamp(2.5rem, 5vw, 4rem) 0 2rem; font-size: 0.95rem; color: var(--ink-2); }
.foot-grid { display: grid; grid-template-columns: 1fr; gap: 2rem 3rem; }
@media (min-width: 760px) { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.foot h3 { font-family: var(--font-body); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mist); margin-bottom: 0.8rem; }
.foot a { color: var(--ink-2); }
.foot a:hover { color: var(--ember-hi); }
.foot .brand { margin-bottom: 0.8rem; }
.foot p { max-width: 44ch; }
.foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.4rem; }
.foot-bottom { margin-top: 2.5rem; padding-top: 1.2rem; border-top: 1px solid var(--hair); display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; font-size: 0.85rem; color: var(--mist); }
.foot-bottom p { max-width: none; }

/* ---------- inner pages (trades, privacy, thank-you, 404) ---------- */
.page-hero { padding: clamp(3rem, 7vw, 6rem) 0 clamp(1.5rem, 3vw, 2.5rem); position: relative; }
.page-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(55% 60% at 12% 0%, rgba(255, 143, 46, 0.07), transparent 70%); }
.page-hero .wrap { position: relative; }
.page-hero h1 { font-size: clamp(2.3rem, 5.2vw, 4.2rem); max-width: 16ch; }
.page-hero .lede { margin-top: 1.2rem; }
.prose { max-width: 66ch; color: var(--ink-2); }
.prose h2 { color: var(--ink); font-size: clamp(1.4rem, 2.4vw, 1.8rem); margin: 2.4rem 0 0.8rem; }
.prose h3 { color: var(--ink); margin: 1.8rem 0 0.5rem; }
.prose p + p, .prose ul + p, .prose p + ul { margin-top: 0.9rem; }
.prose ul { padding-left: 1.2rem; }
.prose li + li { margin-top: 0.35rem; }
.prose a { color: var(--ink); }
.prose a:hover { color: var(--ember-hi); }

/* rough-in sheet blocks on the trades page */
.sheet { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--hair); }
.sheet .row { display: grid; grid-template-columns: 1fr; gap: 0.5rem 3rem; padding: 1.3rem 0; border-bottom: 1px solid var(--hair); }
@media (min-width: 760px) { .sheet .row { grid-template-columns: 200px 1fr; } }
.sheet .row h3 { font-size: 1.05rem; color: var(--ink); }
.sheet .row p, .sheet .row li { color: var(--ink-2); font-size: 0.98rem; }
.sheet .row ul { margin: 0; padding-left: 1.1rem; }
.sheet .row li + li { margin-top: 0.3rem; }
.sheet .k { font-family: var(--font-mono); font-size: 0.9em; color: var(--ink); background: var(--coal-3); padding: 0.05em 0.35em; border-radius: 3px; }
.dl-card { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; padding: 1.4rem 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); margin: 2rem 0; }
.dl-card p { color: var(--ink-2); flex: 1 1 24ch; }

/* ---------- reveal (nav.js adds .in) ---------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 600ms ease, transform 600ms ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .link-more .arrow, .faq summary::after, .format-card img, .spot-fig img { transition: none; }
  .format-card:hover img, .spot-fig:hover img { transform: none; }
}

/* ---------- print ---------- */
@media print {
  .masthead, .hero-cta, .btn, .nav-toggle, .skip-link { display: none !important; }
  body, .band-alt, .night, .foot { background: #fff; color: #000; }
  .hero-fig-cine { min-height: 0; }
  .band { padding: 1.5rem 0; }
}

/* ---------- small helpers used by inner pages ---------- */
.drawing-first { margin-top: 0; }
.sheet-gap { margin-top: 2.5rem; }
.sources { margin-top: 1.4rem; font-size: 0.9rem; color: var(--mist); max-width: 80ch; }
.price-card .act { margin-top: 1.4rem; }
.band-tight { padding-top: 0.5rem; }

/* =====================================================================
   Mistfire additions: situation picker, unit cards, price stack,
   comparison table, badges, sheets. Same tokens; no new colours.
   ===================================================================== */

/* ---------- situations: intro band + one section per spot ---------- */
.band-head-only { margin-bottom: 0; }
.spot { padding: clamp(2.5rem, 6vw, 5rem) 0; }
.spot + .spot { border-top: 1px solid var(--hair); }
.spot-grid { display: grid; grid-template-columns: 1fr; gap: clamp(1.6rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 900px) {
  .spot-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
  .spot:nth-of-type(even) .spot-copy { order: 2; }
}
.spot-copy .eyebrow { margin-bottom: 1rem; }
.spot-num { color: var(--ember); font-weight: 700; }
.spot-say { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.7rem, 2.6vw, 2.4rem); letter-spacing: -0.015em; line-height: 1.15; max-width: 16ch; text-wrap: balance; }
.spot-say::before { content: "\201C"; color: var(--ember); margin-right: 0.05em; }
.spot-say::after { content: "\201D"; color: var(--ember); margin-left: 0.05em; }
.spot-ans { margin-top: 1.1rem; color: var(--ink-2); font-size: 1.05rem; max-width: 46ch; text-wrap: pretty; }
.spot-ans b { color: var(--ink); font-weight: 600; }
.spot-price { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--hair); font-size: 0.92rem; color: var(--mist); max-width: 46ch; font-variant-numeric: tabular-nums; }
.spot-copy .btn { margin-top: 1.4rem; }
.spot-fig { display: block; position: relative; text-decoration: none; }
.spot-fig img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--coal-2); transition: transform 300ms ease, border-color 300ms ease, box-shadow 300ms ease; }
.spot-fig:hover img { transform: scale(1.01); border-color: var(--ember-line); box-shadow: 0 0 54px -10px rgba(255, 143, 46, 0.22); }

/* ---------- badges (how a line is priced) ---------- */
.badge { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.28rem 0.7rem; border-radius: 999px; border: 1px solid var(--hair-2); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--mist-2); }
.badge-package::before { background: var(--ember); box-shadow: 0 0 6px 1px var(--ember-glow); }
.badge-project::before { background: var(--ink-2); }
.hero .badge, .page-hero .badge { margin-bottom: 1rem; }

/* ---------- unit cards ("what goes in") ---------- */
.units { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: 1.2rem; }
@media (min-width: 720px) { .units { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); } }
.unit { background: var(--coal-2); border: 1px solid var(--hair); border-top: 2px solid var(--ember-line); border-radius: var(--radius); padding: 1.2rem 1.2rem 1.3rem; display: grid; gap: 0.6rem; align-content: start; }
.unit .fam { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ember); }
.unit h3 { font-size: 1.22rem; }
.unit .model { font-family: var(--font-mono); font-size: 0.82rem; color: var(--mist); }
.unit dl { margin: 0.4rem 0 0; display: grid; grid-template-columns: 7.2em 1fr; gap: 0.35rem 0.8rem; font-size: 0.94rem; }
.unit dt { color: var(--mist); }
.unit dd { margin: 0; color: var(--ink-2); }
.unit dd b { color: var(--ink); font-weight: 600; }
.unit .msrp { margin-top: 0.4rem; padding-top: 0.7rem; border-top: 1px solid var(--hair); display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.unit .msrp .num { font-size: 1.6rem; }
.unit .msrp small { color: var(--mist); font-size: 0.82rem; }
.unit .warn { font-size: 0.86rem; color: var(--mist); }

/* ---------- price stack ---------- */
.stack { border-top: 2px solid var(--hair-2); }
.stack .row { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem 1.5rem; padding: 0.85rem 0; border-bottom: 1px solid var(--hair); align-items: baseline; }
.stack .row .what { color: var(--ink-2); }
.stack .row .what b { color: var(--ink); font-weight: 600; display: block; }
.stack .row .what small { display: block; color: var(--mist); font-size: 0.86rem; margin-top: 0.15rem; }
.stack .row .amt { font-family: var(--font-display); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stack .row.total { border-bottom: 0; padding-top: 1rem; }
.stack .row.total .amt { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 300; letter-spacing: -0.02em; color: var(--ember-hi); }
.stack .row.total .what b { font-family: var(--font-display); font-size: 1.1rem; }
.stack-note { margin-top: 0.9rem; font-size: 0.9rem; color: var(--mist); max-width: 60ch; }
.price-grid { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 4vw, 4rem); align-items: start; }
@media (min-width: 960px) { .price-grid { grid-template-columns: 1.15fr 1fr; } }

/* ---------- comparison table (which Optimyst goes where) ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-top: 2px solid var(--hair-2); }
.compare { width: 100%; min-width: 900px; border-collapse: collapse; font-size: 0.94rem; font-variant-numeric: tabular-nums; }
.compare th, .compare td { text-align: left; vertical-align: top; padding: 0.8rem 0.9rem 0.8rem 0; border-bottom: 1px solid var(--hair); }
.compare th { font-family: var(--font-body); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mist); white-space: nowrap; }
.compare td { color: var(--ink-2); }
.compare td:first-child { color: var(--ink); font-weight: 600; position: sticky; left: 0; background: var(--coal); padding-right: 1.2rem; }
.compare td:first-child small { display: block; font-family: var(--font-mono); font-weight: 400; font-size: 0.78rem; color: var(--mist); }
.compare .num { font-family: var(--font-body); font-weight: 600; letter-spacing: 0; color: var(--ink); }
.compare .heat-yes { color: var(--ember-hi); font-weight: 600; }
.compare .heat-no { color: var(--mist); }
.compare .goes a { color: var(--ink); }
.compare .goes a:hover { color: var(--ember-hi); }
.table-note { margin-top: 1rem; font-size: 0.9rem; color: var(--mist); max-width: 80ch; }

/* ---------- key/value list and small notice ---------- */
.kv { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; }
@media (min-width: 720px) { .kv { grid-template-columns: 1fr 1fr; column-gap: 3rem; } }
.kv li { display: grid; grid-template-columns: 8.5em 1fr; gap: 0.6rem; padding: 0.7rem 0; border-top: 1px solid var(--hair); font-size: 0.97rem; }
.kv li b { color: var(--mist); font-weight: 600; font-size: 0.86rem; letter-spacing: 0.02em; padding-top: 0.15rem; }
.kv li span { color: var(--ink-2); }
.notice { display: grid; grid-template-columns: 22px 1fr; gap: 0.8rem; align-items: start; padding: 1rem 1.1rem; border: 1px solid var(--hair-2); border-left: 3px solid var(--ember); border-radius: var(--radius-s); background: var(--coal-2); font-size: 0.95rem; color: var(--ink-2); max-width: 70ch; }
.notice svg { width: 22px; height: 22px; color: var(--ember); }
.notice b { color: var(--ink); }

/* ---------- misc layout hooks ---------- */
.two-col { display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 3vw, 3rem); align-items: start; }
@media (min-width: 900px) { .two-col { grid-template-columns: 1fr 1fr; } }
.two-col .prose { max-width: none; }

/* ---------- trades hub: sheet list ---------- */
.sheet-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--hair); }
.sheet-list li { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem 1.5rem; align-items: center; padding: 0.95rem 0; border-bottom: 1px solid var(--hair); }
.sheet-list li b { display: block; font-weight: 600; }
.sheet-list li span { color: var(--ink-2); font-size: 0.94rem; }
.sheet-list li .acts { display: flex; gap: 1rem; white-space: nowrap; font-size: 0.94rem; }
.sheet-list li .acts a { color: var(--ink); }
.sheet-list li .acts a:hover { color: var(--ember-hi); }
@media (max-width: 560px) { .sheet-list li { grid-template-columns: 1fr; } }

/* ---------- home: how the price works strip ---------- */
.policy { display: grid; grid-template-columns: 1fr; gap: 1.2rem 3rem; }
@media (min-width: 760px) { .policy { grid-template-columns: repeat(3, 1fr); } }
.policy div { border-top: 1px solid var(--hair); padding-top: 1rem; }
.policy .num { font-size: 2rem; display: block; margin-bottom: 0.4rem; color: var(--ember-hi); }
.policy p { color: var(--ink-2); font-size: 0.97rem; }
.policy b { color: var(--ink); font-weight: 600; }

/* ---------- honest list can be single column on short pages ---------- */
.honest-list.one { grid-template-columns: 1fr; }

/* ---------- masthead: six nav items need more room ---------- */
@media (max-width: 1100px) { .brand .brand-tag { display: none; } }
@media (min-width: 821px) and (max-width: 1000px) { .mainnav { gap: 1.05rem; } .mainnav a:not(.btn) { font-size: 0.92rem; } .mainnav .btn { padding: 0.65rem 0.95rem; font-size: 0.9rem; } }
.compare td.dim { white-space: nowrap; }
.units:has(> li:only-child) .unit { max-width: 760px; }

/* ---------- spacing utilities (no inline styles) ---------- */
.mt-1 { margin-top: 0.8rem; } .mt-2 { margin-top: 1.4rem; } .mt-3 { margin-top: 2rem; } .mt-4 { margin-top: 2.5rem; }
.suits { margin-top: 0.7rem; font-size: 0.92rem; color: var(--mist); }
.suits b { color: var(--ink-2); font-weight: 600; }
.grid-2-fixed { display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 3vw, 3rem); }
@media (min-width: 720px) { .grid-2-fixed { grid-template-columns: 1fr 1fr; } }