/* ==========================================================================
   Reliable Heating — design tokens
   Industrial warm: ember on charcoal and bone.
   Ember is an accent only — never a full-bleed gradient.
   ========================================================================== */

:root {
  /* --- core palette ---------------------------------------------------- */
  --charcoal:     #1C1B1A;
  --charcoal-900: #131211;
  --charcoal-800: #232120;
  --charcoal-700: #2E2B29;
  --charcoal-600: #3D3936;

  --bone:         #F5F1EA;
  --bone-100:     #F0ECE3;
  --bone-200:     #EAE4D9;
  --bone-300:     #DBD3C4;

  --ember:        #D4541E;
  --ember-bright: #E86A33;
  --ember-deep:   #A63D12;
  --ember-glow:   rgba(212, 84, 30, 0.16);

  --steel:        #3E5C6B;
  --steel-light:  #5B7C8D;

  /* --- semantic -------------------------------------------------------- */
  --bg:           var(--bone);
  --bg-raised:    #FDFCFA;
  /* Two depths of recess rather than one. The old single --bg-sunken made
     every alternating section the same strong step, which reads as stripes;
     --bg-veil is a barely-there shift for sections that only need separating,
     leaving the stronger tone for sections that are genuinely a break. */
  --bg-veil:      var(--bone-100);
  --bg-sunken:    var(--bone-200);
  --bg-dark:      var(--charcoal);

  --ink:          var(--charcoal);
  --ink-soft:     #55504A;
  /* Clears WCAG AA (4.5:1) on every light surface we use, including the
     darkest (--bone-200). Anything lighter fails on sunken panels, which is
     exactly where hints and meta text tend to sit. */
  --ink-faint:    #6A635B;
  --ink-invert:   var(--bone);
  --ink-invert-soft: rgba(245, 241, 234, 0.72);

  --line:         rgba(28, 27, 26, 0.10);
  --line-soft:    rgba(28, 27, 26, 0.06);
  --line-strong:  rgba(28, 27, 26, 0.20);
  --line-invert:  rgba(245, 241, 234, 0.14);

  --accent:       var(--ember);
  --accent-hover: var(--ember-deep);

  /* --ember at body size is only 3.67:1 on bone — fine as a large-text or
     non-text accent, not for links. --ember-text is the same hue darkened
     until it clears AA on every light surface; use it for inline links and
     any ember-coloured copy below ~24px. */
  --ember-text:   #B04314;

  --ok-fg:        #1F5138;
  --ok-bg:        #E4F0E8;
  --warn-fg:      #8A5A11;
  --warn-bg:      #FBF0DC;
  --bad-fg:       #93301A;
  --bad-bg:       #FBE6E0;

  /* --- type ------------------------------------------------------------ */
  --font-display: "Barlow Condensed", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --step--1: clamp(0.82rem, 0.80rem + 0.10vw, 0.88rem);
  --step-0:  clamp(1.00rem, 0.97rem + 0.15vw, 1.08rem);
  --step-1:  clamp(1.20rem, 1.14rem + 0.30vw, 1.38rem);
  --step-2:  clamp(1.48rem, 1.36rem + 0.58vw, 1.86rem);
  --step-3:  clamp(1.85rem, 1.62rem + 1.10vw, 2.60rem);
  --step-4:  clamp(2.30rem, 1.88rem + 2.00vw, 3.75rem);
  --step-5:  clamp(2.85rem, 2.10rem + 3.40vw, 5.25rem);

  /* --- space ----------------------------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  /* --- geometry -------------------------------------------------------- */
  --wrap:        76rem;
  --wrap-narrow: 46rem;
  --radius:      3px;
  --radius-lg:   5px;

  /* Squared-off, industrial. Nothing pill-shaped. */
  --shadow-sm: 0 1px 2px rgba(28, 27, 26, 0.06);
  --shadow:    0 2px 8px rgba(28, 27, 26, 0.08);
  --shadow-lg: 0 12px 32px rgba(28, 27, 26, 0.13);

  /* --- motion ---------------------------------------------------------- */
  --ease:     cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 140ms;
  --dur:      240ms;
  --dur-slow: 460ms;
}

/* The palette is deliberately committed to a single warm light treatment,
   so no dark-mode override — but body background is painted explicitly. */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   Base elements & layout primitives
   ========================================================================== */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.015em;
  margin: 0 0 var(--sp-4);
  text-wrap: balance;
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p { margin: 0 0 var(--sp-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration-color: var(--line-strong); text-underline-offset: 0.18em; }
a:hover { text-decoration-color: var(--accent); }

img, svg, video { max-width: 100%; height: auto; display: block; }

ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.15rem; }
li { margin-bottom: var(--sp-2); }

hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-7) 0; }

strong { font-weight: 650; }

code, kbd, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-variant-numeric: tabular-nums;
}

:focus-visible {
  outline: 2.5px solid var(--ember);
  outline-offset: 2px;
  border-radius: 1px;
}

::selection { background: var(--ember); color: #fff; }

.skip {
  position: absolute;
  left: var(--sp-4);
  top: -100px;
  z-index: 200;
  background: var(--charcoal);
  color: var(--bone);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 600;
  transition: top var(--dur) var(--ease);
}
.skip:focus { top: var(--sp-4); }

/* --- layout ------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--sp-5);
}
.wrap--narrow { max-width: var(--wrap-narrow); }
.center { text-align: center; }

.section { padding-block: var(--sp-9); }
.section--tight { padding-block: var(--sp-7); }
/* The lighter veil, not the full sunken tone. Alternating sections only need
   to be distinguishable, not contrasty — a strong step every other section is
   what makes a page read as stripes. Reserve --bg-sunken for surfaces that
   sit inside a section (cards, callouts) where a real recess is the point. */
.section--sunken {
  background: var(--bg-veil);
  border-block: 1px solid var(--line-soft);
}
.section--dark {
  background: var(--charcoal);
  color: var(--ink-invert);
}
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--bone); }
.section--dark a { color: var(--bone); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin-bottom: var(--sp-3);
  font-weight: 500;
}
.section--dark .eyebrow,
.hero .eyebrow,
.proof-band .eyebrow { color: var(--ember-bright); }

.section-title { margin-bottom: var(--sp-4); }

.section-sub {
  font-size: var(--step-1);
  color: var(--ink-soft);
  max-width: 54ch;
  margin-bottom: var(--sp-6);
}
.section--dark .section-sub,
.hero .section-sub,
.proof-band .section-sub { color: var(--ink-invert-soft); }

.lede {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 60ch;
}
.section--dark .lede,
.hero .lede,
.proof-band .lede { color: var(--ink-invert-soft); }

.page-title { margin-bottom: var(--sp-4); }

.prose { max-width: 68ch; }
.prose h2 { margin-top: var(--sp-8); }
.prose h3 { margin-top: var(--sp-6); font-size: var(--step-1); }
.prose > *:first-child { margin-top: 0; }
.prose ul, .prose ol { margin-bottom: var(--sp-5); }
.prose li { line-height: 1.6; }

/* --- buttons ------------------------------------------------------------ */

.btn {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-line: var(--line-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0.82em 1.5em;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1.5px solid var(--btn-line);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  --btn-bg: var(--ember);
  --btn-fg: #fff;
  --btn-line: var(--ember);
}
.btn--primary:hover {
  --btn-bg: var(--ember-deep);
  --btn-line: var(--ember-deep);
}

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); }
.btn--ghost:hover { --btn-line: var(--ember); --btn-fg: var(--ember-deep); }

/* Any dark surface, not just .section--dark. The hero and the proof band are
   dark too, and scoping this to one class left ghost buttons rendering
   charcoal-on-charcoal — invisible until hover changed the colour. */
.section--dark .btn--ghost,
.hero .btn--ghost,
.proof-band .btn--ghost {
  --btn-fg: var(--bone);
  --btn-line: rgba(245, 241, 234, 0.32);
}
.section--dark .btn--ghost:hover,
.hero .btn--ghost:hover,
.proof-band .btn--ghost:hover {
  --btn-line: var(--ember-bright);
  --btn-fg: var(--ember-bright);
}

.btn--sm { padding: 0.6em 1.1em; font-size: var(--step--1); }
.btn--lg { padding: 0.95em 1.9em; font-size: var(--step-1); }
.btn--block { width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}
.btn-row.center { justify-content: center; }

/* --- breadcrumbs -------------------------------------------------------- */

.crumbs { padding-block: var(--sp-5) 0; }
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--step--1);
  color: var(--ink-faint);
}
.crumbs li { margin: 0; display: flex; align-items: center; gap: var(--sp-2); }
.crumbs li:not(:last-child)::after {
  content: "/";
  color: var(--line-strong);
}
.crumbs a { text-decoration: none; color: var(--ink-soft); }
.crumbs a:hover { color: var(--accent); text-decoration: underline; }
.crumbs [aria-current] { color: var(--ink); font-weight: 500; }

/* ==========================================================================
   Site chrome — header, nav, footer, sticky call bar
   ========================================================================== */

.site-head {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(245, 241, 234, 0.93);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--dur) var(--ease),
              padding var(--dur) var(--ease);
}
.site-head.is-stuck { box-shadow: var(--shadow); }

.head-inner {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  min-height: 72px;
  transition: min-height var(--dur) var(--ease);
}
.site-head.is-stuck .head-inner { min-height: 60px; }

/* --- logo --------------------------------------------------------------- */

.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  text-decoration: none;
  flex-shrink: 0;
}
.logo__text {
  font-family: var(--font-display);
  font-size: 1.32rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
}
.logo__text span { color: var(--accent); }

.logo--foot .logo__text { color: var(--bone); }
.logo--foot .logo__text span { color: var(--ember-bright); }

/* --- main nav ----------------------------------------------------------- */

.main-nav { margin-left: auto; }
.main-nav > ul {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  list-style: none;
  margin: 0;
  padding: 0;
}
.main-nav li { margin: 0; position: relative; }
.main-nav > ul > li > a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--step--1);
  font-weight: 550;
  text-decoration: none;
  border-radius: var(--radius);
  color: var(--ink);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}
.main-nav > ul > li > a:hover { color: var(--accent); background: var(--ember-glow); }

.chev { transition: transform var(--dur-fast) var(--ease); opacity: 0.55; }
.has-sub:hover .chev, .has-sub:focus-within .chev { transform: rotate(180deg); }

.sub {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 258px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-2);
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease),
              visibility var(--dur-fast);
}
.has-sub:hover .sub,
.has-sub:focus-within .sub {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.sub a {
  display: block;
  padding: var(--sp-3) var(--sp-3);
  font-size: var(--step--1);
  text-decoration: none;
  border-radius: var(--radius);
  border-left: 2px solid transparent;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              padding-left var(--dur-fast) var(--ease);
}
.sub a:hover {
  background: var(--bg-sunken);
  border-left-color: var(--ember);
  padding-left: var(--sp-4);
}

/* --- header actions ----------------------------------------------------- */

.head-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-shrink: 0;
}
.head-phone {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 500;
  text-decoration: none;
  color: var(--ink-soft);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease);
}
.head-phone:hover { color: var(--accent); }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0 9px;
  background: transparent;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius);
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 1.5px;
  background: var(--ink);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* --- mobile nav --------------------------------------------------------- */

.mobile-nav {
  display: none;
  border-top: 1px solid var(--line);
  background: var(--bg);
  max-height: calc(100dvh - 72px);
  overflow-y: auto;
  padding: var(--sp-5);
}
.mobile-nav[hidden] { display: none; }
.mobile-nav ul { list-style: none; margin: 0; padding: 0; }
.mobile-nav > nav > ul > li { border-bottom: 1px solid var(--line); }
.mobile-nav > nav > ul > li > a {
  display: block;
  padding: var(--sp-4) 0;
  font-family: var(--font-display);
  font-size: var(--step-2);
  text-decoration: none;
}
.mobile-nav .chev { display: none; }
.mobile-nav .sub {
  position: static;
  opacity: 1;
  visibility: visible;
  transform: none;
  box-shadow: none;
  border: 0;
  background: transparent;
  padding: 0 0 var(--sp-4) var(--sp-4);
  min-width: 0;
}
.mobile-nav .sub a { padding: var(--sp-2) 0; color: var(--ink-soft); }
.mobile-nav__foot {
  display: grid;
  gap: var(--sp-3);
  padding-top: var(--sp-6);
}

@media (max-width: 1020px) {
  .main-nav { display: none; }
  .head-phone { display: none; }
  .nav-toggle { display: flex; }
  .mobile-nav.is-open { display: block; }
}

@media (max-width: 460px) {
  .head-actions .btn { display: none; }
}

/* --- footer ------------------------------------------------------------- */

.site-foot {
  background: var(--charcoal);
  color: var(--ink-invert-soft);
  padding-block: var(--sp-8) var(--sp-6);
  margin-top: var(--sp-9);
}
.site-foot a { color: var(--ink-invert-soft); text-decoration: none; }
.site-foot a:hover { color: var(--ember-bright); text-decoration: underline; }

.foot-top {
  display: grid;
  grid-template-columns: 1.6fr repeat(4, 1fr);
  gap: var(--sp-7) var(--sp-5);
  padding-bottom: var(--sp-7);
  border-bottom: 1px solid var(--line-invert);
}
.foot-blurb {
  font-size: var(--step--1);
  line-height: 1.65;
  margin: var(--sp-4) 0 var(--sp-5);
  max-width: 34ch;
}
.foot-contact {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-2) var(--sp-4);
  font-size: var(--step--1);
  margin: 0;
}
.foot-contact dt { color: rgba(245, 241, 234, 0.45); }
.foot-contact dd { margin: 0; font-family: var(--font-mono); }

.foot-col h3 {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--bone);
  margin-bottom: var(--sp-4);
}
.foot-col ul { list-style: none; margin: 0; padding: 0; }
.foot-col li { margin-bottom: var(--sp-3); font-size: var(--step--1); }

.foot-areas {
  padding-block: var(--sp-6);
  border-bottom: 1px solid var(--line-invert);
}
.foot-areas h3 {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--bone);
  margin-bottom: var(--sp-3);
}
.foot-areas p {
  font-size: var(--step--1);
  color: rgba(245, 241, 234, 0.55);
  max-width: 76ch;
}

.foot-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-top: var(--sp-6);
  font-size: var(--step--1);
}
.foot-bottom p { margin: 0; color: rgba(245, 241, 234, 0.5); }
.foot-bottom ul { display: flex; gap: var(--sp-5); list-style: none; margin: 0; padding: 0; }
.foot-bottom li { margin: 0; }

@media (max-width: 900px) {
  .foot-top { grid-template-columns: repeat(2, 1fr); }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .foot-top { grid-template-columns: 1fr; gap: var(--sp-6); }
}

/* --- sticky mobile call bar --------------------------------------------- */

.call-bar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-4);
  background: var(--ember);
  color: #fff;
  font-weight: 650;
  text-decoration: none;
  box-shadow: 0 -2px 14px rgba(28, 27, 26, 0.18);
}
@media (max-width: 700px) {
  .call-bar { display: flex; }

  /* The bar is fixed to the bottom of the viewport, so the last thing on the
     page scrolls underneath it. The footer is what ends every page, so the
     clearance belongs there — plus the safe-area inset so the bar itself
     clears the home indicator on a notched phone. */
  .call-bar {
    padding-bottom: calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
  }
  .site-foot {
    padding-bottom: calc(var(--sp-6) + 64px + env(safe-area-inset-bottom, 0px));
  }
}

/* --- brand mark ---------------------------------------------------------
   The supplied logo is ember artwork on a dark ground. On the bone header a
   raw dark image would read as an unremoved background, so it sits on a
   deliberate charcoal chip instead — that reads as a badge, not a mistake.
   Remove .logo__mark--chip (see src/partials/logo.js) once a transparent
   export exists.

   Size floor is 30px: below that the coil turns and glow blur into mud.     */

.logo__mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: var(--radius);
  overflow: hidden;
}

.logo__mark--chip {
  background: var(--charcoal-900);
  border: 1px solid rgba(212, 84, 30, 0.28);
  box-shadow: inset 0 0 12px rgba(212, 84, 30, 0.16);
}

.logo__svg {
  width: 30px;
  height: 30px;
  display: block;
}

/* Footer already sits on charcoal, so the chip is redundant there —
   flatten it so the mark blends into the dark ground. */
.logo--foot .logo__mark--chip {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

/* The mark warms slightly on hover — one small sign of life, no bounce. */
.logo__svg { transition: filter var(--dur) var(--ease); }
.logo:hover .logo__svg { filter: brightness(1.14) saturate(1.06); }

@media (prefers-reduced-motion: reduce) {
  .logo__svg { transition: none; }
}

@media (max-width: 460px) {
  .logo__mark { width: 32px; height: 32px; }
  .logo__svg { width: 28px; height: 28px; }
}

/* --- touch targets ------------------------------------------------------- */
/* Footer, breadcrumb and inline links sit at 15-17px tall by default, which
   is well under the ~44px both Apple and Google ask for. Padding the anchor
   itself (rather than the li) grows the hit area without moving the text, so
   the layout is unchanged while the target becomes thumb-sized. */

@media (max-width: 900px) {
  .foot-col li { margin-bottom: 0; }
  .foot-col li a,
  .foot-bottom li a,
  .foot-contact dd a {
    display: inline-block;
    padding-block: var(--sp-3);
    min-height: 44px;
    line-height: 1.4;
  }
  .foot-contact dd a { padding-block: var(--sp-2); }

  .crumbs a,
  .crumbs li {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* The brand marquee: each name is its own link, so give them real height. */
  .wall__item {
    padding-block: var(--sp-2);
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Filter chips on the finder. */
  .chip { min-height: 44px; }

  /* Inline prose links get a slightly taller box without disturbing the
     line box around them. */
  .prose p > a { padding-block: 2px; }

  /* Logo is the "go home" target on every page. */
  .logo { min-height: 44px; display: inline-flex; align-items: center; }

  /* Small buttons are still buttons — a 34px-tall CTA is awkward under a
     thumb even when it looks fine. */
  .btn--sm { min-height: 44px; }

  /* Helper links inside form hints ("Not sure how?") are real navigation. */
  .hint a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Links inside numbered instructions and escape-hatch copy — these are the
     ones a potter actually follows mid-task. */
  .numbered a,
  .finder__escape a,
  .step__note a,
  .calc-note a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* ==========================================================================
   Components
   ========================================================================== */

/* --- hero --------------------------------------------------------------- */

.hero {
  position: relative;
  background: var(--charcoal);
  color: var(--ink-invert);
  overflow: hidden;
  padding-block: var(--sp-10) var(--sp-8);
}
/* Fine industrial grain — texture instead of gradient. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--line-invert) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-invert) 1px, transparent 1px);
  background-size: 72px 72px;
  opacity: 0.42;
  mask-image: radial-gradient(ellipse 90% 70% at 72% 42%, #000 0%, transparent 74%);
  pointer-events: none;
}
.hero > .wrap { position: relative; z-index: 1; }

.hero-grid {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: var(--sp-8);
  align-items: center;
}

.hero h1 {
  font-size: var(--step-5);
  color: var(--bone);
  margin-bottom: var(--sp-5);
}
.hero h1 em {
  font-style: normal;
  color: var(--ember-bright);
  position: relative;
}
.hero .lede { font-size: var(--step-1); max-width: 46ch; }

.hero-points {
  list-style: none;
  padding: 0;
  margin: var(--sp-6) 0 0;
  display: grid;
  gap: var(--sp-3);
}
.hero-points li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--step-0);
  color: var(--ink-invert-soft);
  margin: 0;
}
.hero-points svg { flex-shrink: 0; margin-top: 4px; color: var(--ember-bright); }

/* --- the coil: hero signature animation --------------------------------- */

.coil {
  position: relative;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
}
.coil svg { width: 100%; max-width: 400px; overflow: visible; }

.coil__wire {
  fill: none;
  stroke: var(--charcoal-600);
  stroke-width: 7;
  stroke-linecap: round;
}
.coil__heat {
  fill: none;
  stroke: url(#emberGrad);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: var(--coil-len, 1400);
  stroke-dashoffset: var(--coil-len, 1400);
  filter: drop-shadow(0 0 9px rgba(232, 106, 51, 0.55));
}
.is-lit .coil__heat {
  animation: coil-warm 1250ms var(--ease-out) forwards;
}
@keyframes coil-warm {
  to { stroke-dashoffset: 0; }
}

.coil__terminal { fill: var(--charcoal-600); }
.coil__spec {
  font-family: var(--font-mono);
  font-size: 12px;
  fill: rgba(245, 241, 234, 0.42);
  letter-spacing: 0.06em;
}

@media (prefers-reduced-motion: reduce) {
  .coil__heat { stroke-dashoffset: 0; animation: none; }
}

@media (max-width: 940px) {
  .hero { padding-block: var(--sp-8) var(--sp-7); }
  .hero-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .coil { order: -1; max-width: 260px; margin-inline: auto; }
}

/* --- hero-lite (interior pages) ----------------------------------------- */

.section--hero-lite {
  padding-block: var(--sp-6) var(--sp-7);
  border-bottom: 1px solid var(--line);
}

/* --- process steps ------------------------------------------------------ */

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  counter-reset: step;
  list-style: none;
  padding: 0;
  margin: 0;
}
.steps li {
  counter-increment: step;
  position: relative;
  padding-top: var(--sp-6);
  margin: 0;
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--accent);
  letter-spacing: 0.1em;
}
.steps li::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 34px;
  right: 0;
  height: 1px;
  background: var(--line);
}
.steps li:last-child::after { display: none; }
.steps h3 { font-size: var(--step-1); margin-bottom: var(--sp-2); }
.steps p { font-size: var(--step-0); color: var(--ink-soft); }

@media (max-width: 760px) {
  .steps { grid-template-columns: 1fr; gap: var(--sp-6); }
  .steps li::after { display: none; }
}

/* --- category cards ----------------------------------------------------- */

.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  gap: var(--sp-4);
}
.cat-card {
  display: flex;
  flex-direction: column;
  padding: var(--sp-5);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: transform var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.cat-card:hover {
  transform: translateY(-2px);
  border-color: var(--ember);
  box-shadow: var(--shadow);
}
.cat-card__icon {
  width: 34px;
  height: 34px;
  margin-bottom: var(--sp-4);
  color: var(--accent);
}
.cat-card h3 { font-size: var(--step-1); margin-bottom: var(--sp-2); }
.cat-card p {
  font-size: var(--step--1);
  color: var(--ink-soft);
  line-height: 1.55;
  flex-grow: 1;
  margin-bottom: var(--sp-4);
}
.cat-card__go {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.cat-card:hover .cat-card__go svg { transform: translateX(3px); }
.cat-card__go svg { transition: transform var(--dur-fast) var(--ease); }

/* --- spec strip --------------------------------------------------------- */

.spec-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-block: var(--sp-6);
}
.spec {
  background: var(--bg-raised);
  padding: var(--sp-4) var(--sp-5);
}
.spec__label {
  display: block;
  font-size: var(--step--1);
  color: var(--ink-faint);
  margin-bottom: var(--sp-1);
}
.spec__value {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--step-0);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.35;
}

/* --- symptom table ------------------------------------------------------ */

.symptoms { display: grid; gap: var(--sp-3); }
.symptom {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-left: 3px solid var(--ember);
  border-radius: var(--radius);
  padding: var(--sp-5);
}
.symptom h3 {
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 650;
  margin-bottom: var(--sp-2);
}
.symptom p { font-size: var(--step--1); color: var(--ink-soft); margin-bottom: var(--sp-3); }
.symptom__action {
  display: flex;
  gap: var(--sp-2);
  font-size: var(--step--1);
  font-weight: 550;
  color: var(--ink);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}
.symptom__action strong { color: var(--accent); flex-shrink: 0; }

/* --- brand cards -------------------------------------------------------- */

.brand-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: var(--sp-3);
}
.brand-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-4);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}
.brand-card:hover {
  border-color: var(--ember);
  background: var(--bg-raised);
  transform: translateY(-2px);
}
.brand-card__name { font-weight: 600; font-size: var(--step-0); }
.brand-card__cat {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

/* --- related cards ------------------------------------------------------ */

.rel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-4);
}
.rel-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.rel-card:hover { transform: translateY(-2px); border-color: var(--ember); }
.rel-card__kind {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--accent);
}
.rel-card__title { font-weight: 650; font-size: var(--step-0); line-height: 1.3; }
.rel-card__blurb { font-size: var(--step--1); color: var(--ink-soft); line-height: 1.5; }

/* --- FAQ ---------------------------------------------------------------- */

.faq-list { display: grid; gap: 0; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item:first-child { border-top: 1px solid var(--line); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.25;
  transition: color var(--dur-fast) var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--accent); }
.faq-item summary::after {
  content: "";
  flex-shrink: 0;
  width: 11px;
  height: 11px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg) translateY(-3px);
  transition: transform var(--dur) var(--ease);
}
.faq-item[open] summary::after { transform: rotate(225deg) translateY(-3px); }
.faq-answer { padding-bottom: var(--sp-5); max-width: 72ch; }
.faq-answer p { color: var(--ink-soft); }

/* --- callouts ----------------------------------------------------------- */

.callout {
  padding: var(--sp-5);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--bg-raised);
  margin-block: var(--sp-6);
}
.callout h3 {
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 650;
  margin-bottom: var(--sp-2);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.callout p { font-size: var(--step--1); color: var(--ink-soft); }
.callout--warn { background: var(--warn-bg); border-color: rgba(138, 90, 17, 0.22); }
.callout--warn h3 { color: var(--warn-fg); }
.callout--safety { background: var(--bad-bg); border-color: rgba(147, 48, 26, 0.22); }
.callout--safety h3 { color: var(--bad-fg); }

/* --- trust bar ---------------------------------------------------------- */

.trust-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--sp-5);
  padding-block: var(--sp-6);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.trust {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
}
.trust svg { flex-shrink: 0; color: var(--accent); margin-top: 2px; }
.trust strong { display: block; font-size: var(--step-0); margin-bottom: 2px; }
.trust span { font-size: var(--step--1); color: var(--ink-soft); line-height: 1.5; }

/* --- products hub -------------------------------------------------------
   Richer than the plain category card: photo, intent line, three key specs
   pulled from the category data, and an affordance. The specs are the point —
   they let someone rule a category in or out without another click.        */

.hub-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--sp-5);
  margin-top: var(--sp-6);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
}
.hub-stat { display: grid; gap: var(--sp-1); }
.hub-stat__n {
  font-size: var(--step-2);
  font-weight: 500;
  color: var(--accent);
  line-height: 1.1;
}
.hub-stat__l {
  font-size: var(--step--1);
  color: var(--ink-soft);
  line-height: 1.4;
}

.pcard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: var(--sp-5);
}

.pcard {
  display: flex;
  flex-direction: column;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  transition: transform var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.pcard:hover {
  transform: translateY(-3px);
  border-color: var(--ember);
  box-shadow: var(--shadow-lg);
}

.pcard__media {
  margin: 0;
  border-bottom: 1px solid var(--line);
}
.pcard__media img,
.pcard__media svg { display: block; width: 100%; }

.pcard__body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: var(--sp-5);
}
.pcard__body h3 {
  font-size: var(--step-1);
  margin-bottom: var(--sp-2);
  transition: color var(--dur-fast) var(--ease);
}
.pcard:hover .pcard__body h3 { color: var(--accent); }

.pcard__intent {
  font-size: var(--step--1);
  color: var(--ink-soft);
  line-height: 1.55;
  margin-bottom: var(--sp-4);
}

.pcard__specs {
  display: grid;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
  flex-grow: 1;
  align-content: start;
}
.pcard__spec {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  font-size: var(--step--1);
}
.pcard__spec dt { color: var(--ink-faint); flex-shrink: 0; }
.pcard__spec dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.92em;
  text-align: right;
  color: var(--ink);
}

.pcard__go {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--accent);
  margin-top: auto;
}
.pcard__go svg { transition: transform var(--dur-fast) var(--ease); }
.pcard:hover .pcard__go svg { transform: translateX(3px); }

/* --- brand chips --------------------------------------------------------- */

.bchip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
}
.bchip {
  display: inline-flex;
  align-items: center;
  padding: var(--sp-2) var(--sp-4);
  background: var(--bg-raised);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font-size: var(--step--1);
  font-weight: 550;
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.bchip:hover {
  border-color: var(--ember);
  color: var(--accent);
  transform: translateY(-1px);
}

@media (max-width: 600px) {
  .hub-stats { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
}

/* --- finder: search-first ------------------------------------------------ */

.finder__search { margin-bottom: var(--sp-5); }
.finder__label {
  display: block;
  font-weight: 600;
  margin-bottom: var(--sp-2);
}
.finder__search input[type="search"] {
  width: 100%;
  font-size: var(--step-1);
  padding: var(--sp-4);
}
.finder__escape {
  margin: var(--sp-3) 0 0;
  font-size: var(--step--1);
  color: var(--ink-soft);
}

.finder__table { margin-top: var(--sp-5); }
.finder__table > summary {
  cursor: pointer;
  font-weight: 600;
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  list-style: none;
}
.finder__table > summary::-webkit-details-marker { display: none; }
.finder__table > summary::before {
  content: '+';
  display: inline-block;
  width: 1.2em;
  font-family: var(--font-mono);
  color: var(--ember-text);
}
.finder__table[open] > summary::before { content: '–'; }
.finder__table .chips { margin: var(--sp-4) 0; }

/* --- finder: confirmation step ------------------------------------------ */

.confirm {
  padding: var(--sp-5);
  border: 1px solid var(--ember);
  border-radius: var(--radius-lg);
  background: var(--bg-raised);
}
.confirm__model {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 600;
  margin: 0 0 var(--sp-1);
}
.confirm__spec {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--ink-soft);
  margin: 0 0 var(--sp-4);
}
.confirm__ask { font-weight: 600; margin: 0 0 var(--sp-3); }
.confirm__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.confirm__note {
  margin: 0;
  font-size: 0.8rem;
  color: var(--ink-faint);
}

/* --- radio rows (calculators) -------------------------------------------- */

.radio-row { display: grid; gap: var(--sp-2); }
.radio-row label {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: var(--step--1);
  transition: border-color var(--dur) var(--ease);
}
.radio-row label:hover { border-color: var(--line-strong); }
.radio-row input { flex: 0 0 auto; accent-color: var(--ember); }
.radio-row input:checked + span { font-weight: 600; }
.radio-row label:has(input:checked) { border-color: var(--ember); }

/* --- result-triggered CTA ------------------------------------------------ */
/* Only shown when the verdict is warn or bad — see 05-result-cta.js. */

.result-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  border-radius: var(--radius);
  background: var(--ember-glow);
  border: 1px solid var(--ember);
}
.result-cta p { margin: 0; font-size: var(--step--1); max-width: 46ch; }

/* --- inline CTA (guides, posts) ------------------------------------------ */

.inline-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin: var(--sp-6) 0;
  padding: var(--sp-4) var(--sp-5);
  border-left: 3px solid var(--ember);
  border-radius: var(--radius);
  background: var(--bg-sunken);
}
.inline-cta__text {
  margin: 0;
  font-size: var(--step--1);
  max-width: 52ch;
}

.brand-finder {
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-sunken);
}
.brand-finder p { margin: var(--sp-2) 0 var(--sp-4); color: var(--ink-soft); }

/* --- finder: browse path ------------------------------------------------- */

.finder__pick {
  padding: var(--sp-4) 0 0;
  margin-bottom: var(--sp-5);
  border-top: 1px solid var(--line);
}
.finder__pick-lead {
  margin: 0 0 var(--sp-3);
  font-size: var(--step--1);
  color: var(--ink-faint);
}

/* ==========================================================================
   Forms, quote request, calculators
   ========================================================================== */

.section--quote {
  background: var(--bg-veil);
  border-top: 1px solid var(--line-soft);
}
.quote-head { margin-bottom: var(--sp-6); }

.quote-form {
  display: grid;
  gap: var(--sp-5);
  padding: var(--sp-6);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.quote-form--compact { padding: var(--sp-5); gap: var(--sp-4); }

.hp { position: absolute; left: -9999px; }

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}
@media (max-width: 620px) {
  .field-row { grid-template-columns: 1fr; }
}

.field { display: grid; gap: var(--sp-2); }
.field label {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink);
}
.req { color: var(--ember); }
.opt { font-weight: 400; color: var(--ink-faint); }

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="number"],
.field select,
.field textarea {
  width: 100%;
  padding: 0.72em 0.85em;
  font-family: var(--font-body);
  font-size: var(--step-0);
  color: var(--ink);
  background: var(--bg);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius);
  transition: border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.field textarea { resize: vertical; min-height: 5rem; font-family: var(--font-body); }
.field select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2357524D' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85em center;
  padding-right: 2.2em;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--ember);
  box-shadow: 0 0 0 3px var(--ember-glow);
}

.hint {
  font-size: var(--step--1);
  color: var(--ink-faint);
  line-height: 1.5;
  margin: 0;
}

.form-note {
  font-size: var(--step--1);
  color: var(--ink-faint);
  text-align: center;
  margin: 0;
}

/* --- file drop ---------------------------------------------------------- */

.file-drop {
  position: relative;
  display: grid;
  place-items: center;
  gap: var(--sp-2);
  padding: var(--sp-6) var(--sp-4);
  text-align: center;
  background: var(--bg);
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--radius);
  transition: border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}
.file-drop:hover,
.file-drop.is-over {
  border-color: var(--ember);
  background: var(--ember-glow);
}
.file-drop input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.file-drop__label { display: grid; gap: 2px; pointer-events: none; }
.file-drop__label strong { font-size: var(--step-0); color: var(--accent); }
.file-drop__label span { font-size: var(--step--1); color: var(--ink-faint); }
.file-drop__chosen {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--ink-soft);
  pointer-events: none;
}

/* --- calculators -------------------------------------------------------- */

.calc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
  align-items: start;
  padding: var(--sp-6);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
@media (max-width: 800px) {
  .calc { grid-template-columns: 1fr; }
}

.calc__inputs { display: grid; gap: var(--sp-4); }
.calc__inputs .field label { font-size: var(--step--1); }

.radio-set { display: grid; gap: var(--sp-2); }
.radio-set legend {
  font-size: var(--step--1);
  font-weight: 600;
  margin-bottom: var(--sp-2);
  padding: 0;
}
.radio-set fieldset { border: 0; padding: 0; margin: 0; }
.radio-opt {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: var(--step--1);
  transition: border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}
.radio-opt:hover { border-color: var(--ember); }
.radio-opt input { accent-color: var(--ember); }
.radio-opt:has(input:checked) {
  border-color: var(--ember);
  background: var(--ember-glow);
  font-weight: 600;
}

.calc__result {
  display: grid;
  gap: var(--sp-4);
  align-content: start;
  padding: var(--sp-5);
  background: var(--bg-sunken);
  border-radius: var(--radius-lg);
  min-height: 100%;
}
.calc__verdict {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius);
  font-weight: 650;
  font-size: var(--step--1);
  width: fit-content;
}
.calc__verdict--ok   { background: var(--ok-bg);   color: var(--ok-fg); }
.calc__verdict--warn { background: var(--warn-bg); color: var(--warn-fg); }
.calc__verdict--bad  { background: var(--bad-bg);  color: var(--bad-fg); }
.calc__verdict--idle { background: var(--bone-300); color: var(--ink-soft); }

.calc__figure {
  font-family: var(--font-mono);
  font-size: var(--step-4);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.calc__figure small {
  font-size: 0.4em;
  color: var(--ink-faint);
  margin-left: 0.3em;
  letter-spacing: 0;
}
.calc__explain { font-size: var(--step--1); color: var(--ink-soft); line-height: 1.6; }
.calc__explain p + p { margin-top: var(--sp-3); }

.calc__rows { display: grid; gap: var(--sp-2); }
.calc__row {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--step--1);
}
.calc__row:last-child { border-bottom: 0; }
.calc__row dt { color: var(--ink-faint); }
.calc__row dd {
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.calc-note {
  font-size: var(--step--1);
  color: var(--ink-faint);
  line-height: 1.6;
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}

/* --- tool + guide indexes ----------------------------------------------- */

.index-list { display: grid; gap: var(--sp-4); }
.index-item {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-5);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.index-item:hover { border-color: var(--ember); transform: translateY(-2px); }
.index-item h3 { font-size: var(--step-1); margin: 0; }
.index-item p { font-size: var(--step--1); color: var(--ink-soft); margin: 0; }
.index-item__meta {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-faint);
}

/* --- glossary ----------------------------------------------------------- */

.glossary { display: grid; gap: 0; }
.glossary div {
  padding: var(--sp-5) 0;
  border-bottom: 1px solid var(--line);
}
.glossary dt {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  margin-bottom: var(--sp-2);
}
.glossary dd {
  margin: 0;
  color: var(--ink-soft);
  max-width: 72ch;
}

/* --- camera shots ------------------------------------------------------- */
/* Three independent photo prompts. Sized so all three fit above the fold on
   a phone: the whole point is that sending a photo feels like less work than
   finding a part number. */

.shots {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  margin: 0 0 var(--sp-5);
  background: var(--bg-sunken);
}
.shots legend {
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 600;
  padding: 0 var(--sp-2);
  margin-left: calc(var(--sp-2) * -1);
}
.shots__grid { display: grid; gap: var(--sp-3); }
@media (min-width: 720px) {
  .shots__grid { grid-template-columns: repeat(3, 1fr); }
}

.shot__input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.shot__box {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  height: 100%;
  padding: var(--sp-3);
  background: var(--bg-raised);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
@media (min-width: 720px) {
  .shot__box { flex-direction: column; align-items: flex-start; text-align: left; }
}
.shot__box:hover { border-color: var(--ember); }
.shot__input:focus-visible + .shot__box {
  outline: 2px solid var(--ember);
  outline-offset: 2px;
}
.shot__thumb {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: var(--radius-sm);
  background: var(--bg-sunken);
  background-size: cover;
  background-position: center;
  color: var(--ink-faint);
}
.shot.is-set .shot__thumb { color: transparent; }
.shot.is-set .shot__box {
  border-style: solid;
  border-color: var(--ember);
  background: var(--bg-raised);
}
.shot__text { display: grid; gap: 2px; }
.shot__text strong { font-size: var(--step--1); font-weight: 600; }
.shot__hint { font-size: 0.78rem; color: var(--ink-faint); line-height: 1.35; }
.shot__state {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ember-text);
}
@media (min-width: 720px) { .shot__state { margin-left: 0; } }

.shots__note {
  margin: var(--sp-4) 0 0;
  font-size: var(--step--1);
  color: var(--ink-soft);
}
.shots__note strong { color: var(--ink); }
.shots .hint { margin-top: var(--sp-2); }

/* --- inline unit field --------------------------------------------------- */

.inline-field { display: flex; align-items: center; gap: var(--sp-2); }
.inline-field input { flex: 1 1 auto; min-width: 0; }
.inline-field__unit {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--ink-faint);
}

/* --- soft opt-in --------------------------------------------------------- */

.opt-in {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4);
  margin: 0 0 var(--sp-5);
  background: var(--bg-sunken);
  border-radius: var(--radius);
  font-size: var(--step--1);
  color: var(--ink-soft);
  cursor: pointer;
}
/* A default checkbox renders ~13px, well under a comfortable tap. The label
   wraps it so the whole row is clickable either way, but the box itself
   should still be findable with a thumb. */
.opt-in input {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 0;
  /* 16px minimum on every control, checkboxes included: iOS zooms the whole
     page on focus for anything smaller. */
  font-size: 16px;
  accent-color: var(--ember);
}
/* The whole row is the label, so tapping anywhere in it toggles the box. The
   pseudo-element extends the checkbox's own hit area to 44px without drawing
   an oversized control. */
.opt-in {
  position: relative;
  align-items: center;
  min-height: 44px;
}
.opt-in input::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 44px;
  height: 44px;
  transform: translateY(-50%);
}

.foot-address { font-style: normal; line-height: 1.5; }

/* ==========================================================================
   Motion — every animation here has to earn its place.
   No parallax, no scroll-jacking, no autoplay. Fully suppressed for
   prefers-reduced-motion (also handled globally in 01-tokens.css).
   ========================================================================== */

.reveal,
.reveal-group > * {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}

.reveal.is-in,
.reveal-group.is-in > * {
  opacity: 1;
  transform: none;
}

/* Stagger children ~60ms apart. Capped at 8 — beyond that the last
   item waits too long and the page reads as slow rather than crafted. */
.reveal-group.is-in > *:nth-child(1) { transition-delay: 0ms; }
.reveal-group.is-in > *:nth-child(2) { transition-delay: 60ms; }
.reveal-group.is-in > *:nth-child(3) { transition-delay: 120ms; }
.reveal-group.is-in > *:nth-child(4) { transition-delay: 180ms; }
.reveal-group.is-in > *:nth-child(5) { transition-delay: 240ms; }
.reveal-group.is-in > *:nth-child(6) { transition-delay: 300ms; }
.reveal-group.is-in > *:nth-child(7) { transition-delay: 360ms; }
.reveal-group.is-in > *:nth-child(n+8) { transition-delay: 420ms; }

/* Counting figures in calculators. */
.calc__figure { transition: color var(--dur) var(--ease); }
.calc__figure.is-counting { color: var(--accent); }

/* If JS never runs, content must still be visible. */
.no-js .reveal,
.no-js .reveal-group > * {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-group > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   The hero coil — scroll-driven winding.

   JS sets stroke-dashoffset directly in the fallback path. Where native
   scroll-timeline is available the .has-scroll-timeline class hands the
   stroke over to CSS, which runs it off the main thread.
   ========================================================================== */

.coil {
  position: relative;
  display: grid;
  gap: var(--sp-5);
  align-content: center;
}

.coil svg {
  width: 100%;
  max-width: 460px;
  overflow: visible;
  justify-self: center;
}

.coil__wire {
  fill: none;
  stroke: var(--charcoal-600);
  stroke-width: 5.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.coil__heat {
  fill: none;
  stroke: url(#emberGrad);
  stroke-width: 5.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.55;
  /* dasharray/offset are set by JS once the true path length is measured */
}

.coil__terminal {
  fill: var(--charcoal-600);
}

/* --- readout ------------------------------------------------------------ */

.coil__readout {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin: 0;
  background: var(--line-invert);
  border: 1px solid var(--line-invert);
  border-radius: var(--radius);
  overflow: hidden;
  max-width: 460px;
  width: 100%;
  justify-self: center;
}
.coil__readout > div {
  background: var(--charcoal);
  padding: var(--sp-3) var(--sp-3);
  text-align: center;
}
.coil__readout dt {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: rgba(245, 241, 234, 0.42);
  margin-bottom: 3px;
}
.coil__readout dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--step-0);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--bone);
  line-height: 1.2;
  transition: color var(--dur) var(--ease);
}
.coil.is-lit .coil__readout dd { color: var(--ember-bright); }
.coil__readout dd.is-fixed { color: rgba(245, 241, 234, 0.55); }
.coil.is-complete .coil__readout dd.is-fixed { color: var(--ember-bright); }

@media (max-width: 520px) {
  .coil__readout { grid-template-columns: repeat(2, 1fr); }
}

/* --- native scroll-timeline --------------------------------------------- */
/* Only applied when JS has confirmed support, so there is no risk of the
   coil sitting invisible in a browser that parses but does not run this. */

@supports (animation-timeline: view()) {
  .coil.has-scroll-timeline .coil__heat {
    animation: coil-wind linear both;
    animation-timeline: view();
    animation-range: entry 8% cover 46%;
  }
}

@keyframes coil-wind {
  from { stroke-dashoffset: var(--coil-len, 1400); opacity: 0.5; }
  to   { stroke-dashoffset: 0; opacity: 1; }
}

/* --- reduced motion ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .coil.has-scroll-timeline .coil__heat { animation: none; }
  .coil__heat { stroke-dashoffset: 0 !important; opacity: 1 !important; }
}

/* --- ambient life -------------------------------------------------------- */
/* The coil winds on scroll (above). These add the sense that it is actually
   energised once lit: a slow breathing glow and a current pulse travelling
   the wire. Both are decorative, so both stop under reduced-motion. */

.coil__pulse {
  fill: none;
  stroke: #FFD9B8;
  stroke-width: 3;
  stroke-linecap: round;
  opacity: 0;
  /* --coil-len is measured in JS; the dash is a short travelling segment
     followed by a gap the length of the whole path. */
  stroke-dasharray: 26 calc(var(--coil-len, 1200) * 1px);
}

.coil.is-lit .coil__pulse {
  animation: coil-pulse 3.4s linear infinite 0.9s;
}

@keyframes coil-pulse {
  0%       { stroke-dashoffset: calc(var(--coil-len, 1200) * 1px); opacity: 0; }
  8%       { opacity: 0.85; }
  70%      { opacity: 0.85; }
  85%, 100%{ stroke-dashoffset: 0; opacity: 0; }
}

/* Breathing heat — the glow rising and settling as an element holds temp. */
.coil.is-lit .coil__heat {
  animation: coil-breathe 4.6s var(--ease, ease-in-out) infinite;
}

@keyframes coil-breathe {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 0.78; }
}

/* Terminals pick up a faint ember once current is flowing. */
.coil.is-lit .coil__terminal {
  fill: var(--ember-deep);
  transition: fill 900ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .coil.is-lit .coil__pulse,
  .coil.is-lit .coil__heat { animation: none; }
  .coil__pulse { opacity: 0; }
}

/* ==========================================================================
   Home page components
   ========================================================================== */

.hero-copy { max-width: 34rem; }
.hero-aside {
  margin-top: var(--sp-5);
  font-size: var(--step--1);
  color: rgba(245, 241, 234, 0.5);
  max-width: 42ch;
}

/* --- proof band --------------------------------------------------------- */

/* Sits directly under the hero, so it reads as the foot of that dark block
   rather than a second slab. Same charcoal as the hero with a hairline above
   instead of a tonal jump, and it fades out into the page below. */
.proof-band {
  background: var(--charcoal);
  color: var(--ink-invert);
  padding-block: var(--sp-7);
}
.proof-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
}
.proof {
  display: grid;
  gap: 2px;
  padding-left: var(--sp-4);
  border-left: 2px solid var(--ember);
}
.proof__figure {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 700;
  line-height: 1;
  color: var(--bone);
  letter-spacing: -0.02em;
}
.proof__label {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ember-bright);
}
.proof__note {
  font-size: var(--step--1);
  color: rgba(245, 241, 234, 0.5);
  line-height: 1.5;
}

@media (max-width: 900px) { .proof-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5) var(--sp-4); } }
@media (max-width: 480px) { .proof-grid { grid-template-columns: 1fr; } }

/* --- split layout ------------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8);
  align-items: start;
}
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: var(--sp-6); } }

.check-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-4);
}
.check-list li {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
  margin: 0;
  padding: var(--sp-4) var(--sp-5);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.check-list svg { flex-shrink: 0; color: var(--ember); margin-top: 3px; }
.check-list strong { display: block; font-size: var(--step-0); margin-bottom: 2px; }
.check-list span { font-size: var(--step--1); color: var(--ink-soft); line-height: 1.55; }

/* --- category cards: price treatment ------------------------------------ */

.cat-card__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
}
.cat-card__top h3 { margin: 0; }
.cat-card__price {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--accent);
  white-space: nowrap;
}

/* --- demoted product lines ---------------------------------------------- */
/* The five lines that are not kilns. Kept for search traffic and for the
   occasional trade enquiry, deliberately quieter than the kiln section. */

.line-grid {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.line-card {
  display: grid;
  gap: var(--sp-1);
  padding: var(--sp-4);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  transition: border-color var(--dur) var(--ease);
}
.line-card:hover { border-color: var(--ember); }
.line-card__name { font-weight: 600; font-size: var(--step--1); }
.line-card__note {
  font-size: 0.8rem;
  color: var(--ink-faint);
  line-height: 1.4;
}

.section-title--sm { font-size: var(--step-1); }

.price-line {
  font-size: var(--step--1);
  color: var(--ink-soft);
  margin: var(--sp-3) 0 var(--sp-4);
}
.price-line strong { color: var(--ink); }

.hero--problem .hero-aside {
  border-left: 2px solid var(--ember);
  padding-left: var(--sp-4);
  max-width: 54ch;
}
.hero--problem .hero-aside strong { color: var(--ink); }

/* --- hero: problem-led --------------------------------------------------- */
/* The headline is the first thing read on a phone held next to a dead kiln,
   so it gets explicit control rather than inheriting the generic h1 scale. */

.hero-title {
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;
  margin-bottom: var(--sp-4);
}
.hero-title em {
  font-style: normal;
  /* On the dark hero the bright ember is the readable one — --ember-text is
     darkened for light grounds and would lose contrast here. */
  color: var(--ember-bright);
  display: block;
}
.hero--problem .hero-copy { max-width: 38rem; }
.hero-lede {
  max-width: 34ch;
  margin-bottom: var(--sp-5);
}

/* Overrides the base .hero-aside, which sets a low-contrast grey that renders
   as broken-looking text against the dark hero. */
.hero--problem .hero-aside {
  margin-top: var(--sp-6);
  padding-left: var(--sp-4);
  border-left: 2px solid var(--ember);
  color: var(--ink-invert-soft);
  max-width: 44ch;
  text-wrap: pretty;
}
.hero--problem .hero-aside strong {
  display: block;
  color: var(--bone);
  margin-bottom: 2px;
}

/* --- brand wall ---------------------------------------------------------- */
/* The old site's "Trusted by Industry Leaders" slot, reworded. These are
   brands we make replacement parts for, not endorsers, and each links to the
   finder filtered to that brand rather than being inert decoration.

   The names slide horizontally on a loop. The list is rendered twice into one
   track and translated by exactly -50%, so the second run arrives as the
   first leaves and there is no seam. Pauses on hover, and collapses to a
   static wrapped row under reduced-motion. */

.wall-band {
  background: var(--bg-veil);
  border-bottom: 1px solid var(--line-soft);
  padding-block: var(--sp-7);
  overflow: hidden;
}
.wall__title {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-faint);
  text-align: center;
  margin: 0 0 var(--sp-5);
}

.wall {
  position: relative;
  /* Break out of the page wrap so names run edge to edge — a marquee that
     stops short of the viewport edge looks like a mistake. */
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
  /* Feather both ends so names enter and leave rather than being cut. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
/* No `gap` here on purpose. With a gap, the track's width is
   (2 x run) + (2n-1 gaps), so translateX(-50%) lands half a gap off and the
   loop visibly jumps every cycle. Spacing goes on the items instead, which
   makes each run exactly half the track and -50% seamless. */
.wall__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: wall-scroll 42s linear infinite;
}
.wall:hover .wall__track { animation-play-state: paused; }

.wall__item {
  /* Symmetric padding is the spacing (see the note on .wall__track). */
  padding-inline: calc(var(--sp-8) / 2);
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
  opacity: 0.6;
  transition: color 200ms var(--ease), opacity 200ms var(--ease);
}
.wall__item:hover,
.wall__item:focus-visible {
  color: var(--ember-text);
  opacity: 1;
}

/* Track holds two identical runs; shifting by exactly half loops seamlessly. */
@keyframes wall-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .wall {
    width: auto;
    margin-left: 0;
    transform: none;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .wall__track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    width: auto;
    gap: var(--sp-3) var(--sp-5);
  }
  .wall__item {
    font-size: var(--step-1);
    opacity: 0.8;
    padding-inline: 0;
  }
  /* The duplicate run only exists to hide the loop seam. */
  .wall__track > [data-wall-clone] { display: none; }
}

/* --- section head with trailing action ----------------------------------- */

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.section-head .section-title { margin-bottom: 0; }
.section-foot {
  margin: var(--sp-4) 0 0;
  font-size: var(--step--1);
  color: var(--ink-faint);
}

/* --- product cards -------------------------------------------------------- */

.prod-card {
  display: block;
  padding: var(--sp-5);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.prod-card:hover { border-color: var(--ember); transform: translateY(-2px); }
.prod-card h3 { font-size: var(--step-1); margin: 0 0 var(--sp-2); }
.prod-card p { color: var(--ink-soft); font-size: var(--step--1); margin: 0 0 var(--sp-3); }
.prod-card__go {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ember-text);
}

/* Kilns lead: full width, two columns, more room than the rest. */
.prod-card--lead {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--sp-6);
  align-items: center;
  margin-bottom: var(--sp-4);
  border-color: var(--line-strong);
}
.prod-card--lead h3 { font-size: var(--step-2); }
.prod-card--lead .lede { color: var(--ink-soft); }
.prod-card__aside {
  display: grid;
  gap: var(--sp-3);
  padding-left: var(--sp-5);
  border-left: 2px solid var(--ember);
}
.prod-card__stat {
  margin: 0;
  font-size: 0.82rem;
  color: var(--ink-faint);
  line-height: 1.4;
}
.prod-card__stat span {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
}

.prod-grid {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.steps--compact li p { font-size: var(--step--1); }

@media (max-width: 780px) {
  .prod-card--lead { grid-template-columns: 1fr; gap: var(--sp-4); }
  .prod-card__aside {
    display: flex;
    gap: var(--sp-5);
    padding-left: var(--sp-4);
  }
}

/* ==========================================================================
   Content components — tables, formulas, verdict bands, process lists
   ========================================================================== */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- finder -------------------------------------------------------------- */

.finder__controls {
  display: grid;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.finder__controls .field { max-width: 26rem; }

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.42em 0.85em;
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 550;
  color: var(--ink-soft);
  background: var(--bg-raised);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}
.chip span {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-faint);
}
.chip:hover { border-color: var(--ember); color: var(--ink); }
.chip.is-on {
  background: var(--charcoal);
  border-color: var(--charcoal);
  color: var(--bone);
}
.chip.is-on span { color: var(--ember-bright); }

.finder__empty {
  padding: var(--sp-6);
  text-align: center;
  color: var(--ink-soft);
  font-size: var(--step--1);
  background: var(--bg-sunken);
  border-radius: var(--radius-lg);
  margin-top: var(--sp-4);
}

/* --- tables -------------------------------------------------------------- */

.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-raised);
}

.spec-table,
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step--1);
}
.spec-table th,
.compare-table th {
  text-align: left;
  font-weight: 650;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  padding: var(--sp-4) var(--sp-4);
  border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
  background: var(--bg-sunken);
}
.spec-table td,
.compare-table td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.spec-table tbody tr:last-child td,
.compare-table tbody tr:last-child td { border-bottom: 0; }
.spec-table tbody tr { transition: background var(--dur-fast) var(--ease); }
.spec-table tbody tr:hover { background: var(--ember-glow); }
.spec-table .num, .compare-table .num { text-align: right; font-family: var(--font-mono); }
.spec-table th.num { text-align: right; }
.row-cta { text-align: right; white-space: nowrap; }

.compare-table { border: 1px solid var(--line); border-radius: var(--radius-lg); }
.compare-table td:first-child { font-weight: 600; }

.matrix-brand { margin-bottom: var(--sp-7); }
.matrix-brand h2 {
  font-size: var(--step-2);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-2);
  border-bottom: 2px solid var(--ember);
  display: inline-block;
}

/* Stacked card layout on narrow screens — a 5-column table is unusable at
   375px, and horizontal scroll for 65 rows is worse. */
@media (max-width: 640px) {
  .spec-table, .spec-table thead, .spec-table tbody,
  .spec-table th, .spec-table td, .spec-table tr { display: block; }
  .spec-table thead { position: absolute; left: -9999px; }
  .spec-table tr {
    border-bottom: 1px solid var(--line);
    padding: var(--sp-3) var(--sp-4);
  }
  .spec-table td {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-4);
    border: 0;
    padding: var(--sp-1) 0;
    text-align: right;
  }
  .spec-table td::before {
    content: attr(data-label);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-faint);
    font-weight: 600;
  }
  .spec-table td.row-cta { justify-content: flex-end; padding-top: var(--sp-3); }
  .table-scroll { overflow-x: visible; }

  .compare-table, .compare-table tbody, .compare-table tr, .compare-table td { display: block; }
  .compare-table thead { position: absolute; left: -9999px; }
  .compare-table tr { border-bottom: 1px solid var(--line); padding: var(--sp-4); }
  .compare-table td { display: flex; justify-content: space-between; gap: var(--sp-4); border: 0; padding: var(--sp-1) 0; text-align: right; }
  .compare-table td::before {
    content: attr(data-label);
    font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--ink-faint); font-weight: 600; text-align: left;
  }
}

/* --- formula ------------------------------------------------------------- */

.formula {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-5) var(--sp-6);
  background: var(--charcoal);
  border-radius: var(--radius-lg);
  margin-block: var(--sp-5);
  text-align: center;
}
.formula__main {
  font-family: var(--font-mono);
  font-size: var(--step-2);
  font-weight: 500;
  color: var(--ember-bright);
  letter-spacing: 0.01em;
}
.formula__note {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: rgba(245, 241, 234, 0.55);
  line-height: 1.6;
}

/* --- verdict bands ------------------------------------------------------- */

.band-list { list-style: none; padding: 0; display: grid; gap: var(--sp-3); }
.band-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-3);
  margin: 0;
  padding: var(--sp-4);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: var(--step--1);
  color: var(--ink-soft);
}
.band {
  display: inline-block;
  padding: 0.24em 0.7em;
  border-radius: var(--radius);
  font-weight: 650;
  font-size: 0.8rem;
  white-space: nowrap;
  flex-shrink: 0;
}
.band--ok   { background: var(--ok-bg);   color: var(--ok-fg); }
.band--warn { background: var(--warn-bg); color: var(--warn-fg); }
.band--bad  { background: var(--bad-bg);  color: var(--bad-fg); }

/* --- process / numbered lists -------------------------------------------- */

.process, .numbered {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: n;
  display: grid;
  gap: var(--sp-5);
}
.process li, .numbered li {
  counter-increment: n;
  position: relative;
  padding-left: var(--sp-8);
  margin: 0;
}
.process li::before, .numbered li::before {
  content: counter(n, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-mono);
  font-size: var(--step-0);
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.04em;
}
.process li::after {
  content: "";
  position: absolute;
  left: 15px;
  top: 26px;
  bottom: calc(var(--sp-5) * -1 + 4px);
  width: 1px;
  background: var(--line);
}
.process li:last-child::after { display: none; }
.process h3 { font-size: var(--step-1); margin-bottom: var(--sp-2); }
.process p { color: var(--ink-soft); font-size: var(--step-0); }
.numbered li { line-height: 1.65; color: var(--ink-soft); }
.numbered strong { color: var(--ink); }

/* --- calculator figure sub ----------------------------------------------- */

.calc__figure-sub {
  display: block;
  font-size: var(--step--1);
  color: var(--ink-faint);
  margin-top: var(--sp-1);
}

/* ==========================================================================
   Media — images and the "photo needed" placeholders
   ========================================================================== */

.media {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--charcoal-800);
}
/* The frame owns the shape, not the photo.
   Source images arrive square, portrait and widescreen; letting each set its
   own height made a row of cards five different shapes. The figure fixes the
   ratio and the image crops to fill it, so the layout is identical whatever
   gets dropped into public/images/. */
.media {
  aspect-ratio: 4 / 3;
}
.media--app,
.media--proof {
  aspect-ratio: 16 / 9;
}
.media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

/* --- placeholder --------------------------------------------------------- */

.ph {
  position: relative;
  display: block;
  width: 100%;
  background: var(--charcoal-800);
  border: 1px dashed var(--charcoal-600);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.ph svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.ph__note {
  position: absolute;
  inset: auto var(--sp-4) var(--sp-4) var(--sp-4);
  display: grid;
  gap: 2px;
  font-size: var(--step--1);
  line-height: 1.45;
  color: rgba(245, 241, 234, 0.62);
  text-align: left;
}
.ph__note strong {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ember-bright);
  font-weight: 500;
}

/* --- media grid ---------------------------------------------------------- */

.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-4);
}

.media--wide { grid-column: 1 / -1; }

/* Figure captions where a photo needs explaining. */
.media figcaption {
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--step--1);
  color: var(--ink-soft);
  background: var(--bg-raised);
  border-top: 1px solid var(--line);
}

/* Proof image sitting under the "why buy direct" copy on the home page. */
.media--proof { margin-top: var(--sp-6); }

/* Application photo on category pages — sits under the spec strip. */
.media--app { margin-top: var(--sp-5); }

/* ==========================================================================
   Guided order flow (/order/)
   ========================================================================== */

.flow { max-width: 46rem; margin-inline: auto; }

/* --- progress ------------------------------------------------------------ */

.flow-progress {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  list-style: none;
  margin: 0 0 var(--sp-6);
  padding: 0 0 var(--sp-4);
  border-bottom: 1px solid var(--line);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-faint);
}
.flow-progress li { display: flex; align-items: center; gap: var(--sp-2); }
.flow-progress span {
  display: grid;
  place-items: center;
  width: 1.55em;
  height: 1.55em;
  border-radius: 50%;
  border: 1px solid currentColor;
  font-family: var(--font-mono);
  font-size: 0.82em;
}
.flow-progress .is-on { color: var(--ember-text); font-weight: 600; }
.flow-progress .is-on span {
  background: var(--ember);
  border-color: var(--ember);
  color: #fff;
}

/* --- steps --------------------------------------------------------------- */

.step {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  margin-bottom: var(--sp-4);
  background: var(--bg-raised);
}
.step.is-open { border-color: var(--line-strong); }

.step__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
}
.step__title {
  font-size: var(--step-1);
  margin: 0;
}
.step__change {
  flex: 0 0 auto;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: var(--step--1);
  color: var(--ember-text);
  text-decoration: underline;
  cursor: pointer;
}
.step__answer {
  margin: var(--sp-2) 0 0;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--ink-soft);
}
.step__body { margin-top: var(--sp-4); }

/* A collapsed step keeps its answer visible and hides the controls. */
.step:not(.is-open) .step__body { display: none; }
.step:not(.is-open) { background: var(--bg-sunken); }

.step__note {
  margin: var(--sp-4) 0 0;
  font-size: 0.82rem;
  color: var(--ink-faint);
  line-height: 1.5;
}

/* --- step 1: equipment cards --------------------------------------------- */

.pick-grid {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.pick-card {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  text-align: left;
  padding: var(--sp-4);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  font: inherit;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.pick-card:hover { border-color: var(--ember); transform: translateY(-2px); }
.pick-card.is-picked { border-color: var(--ember); background: var(--ember-glow); }

/* Kilns are the business, so the kiln card spans the row and reads first. */
.pick-card--lead {
  grid-column: 1 / -1;
  border-color: var(--line-strong);
}
.pick-card__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-sm);
  background: var(--ember-glow);
  color: var(--ember-text);
}
.pick-card__body { display: grid; gap: 3px; }
.pick-card__body strong { font-size: var(--step-0); }
.pick-card__body span {
  font-size: 0.82rem;
  color: var(--ink-faint);
  line-height: 1.4;
}

/* --- step 2: brand chips -------------------------------------------------- */

.chip-grid {
  display: grid;
  gap: var(--sp-2);
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.chip-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  font: inherit;
  font-size: var(--step--1);
  text-align: left;
  transition: border-color var(--dur) var(--ease);
}
.chip-card:hover { border-color: var(--ember); }
.chip-card.is-picked { border-color: var(--ember); background: var(--ember-glow); }
.chip-card span {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--ink-faint);
}
.chip-card--other {
  grid-column: 1 / -1;
  justify-content: center;
  border-style: dashed;
  color: var(--ink-soft);
}

/* --- step 3: model picker ------------------------------------------------- */
/* Cards rather than a table: the whole row is one hit target, the model name
   leads, and the spec reads as supporting detail instead of two more columns
   to scan. A table of three rows was also asking people to parse a header. */

.model-search {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: var(--sp-3);
}
.model-search__icon {
  position: absolute;
  left: var(--sp-3);
  color: var(--ink-faint);
  pointer-events: none;
}
.model-search input {
  width: 100%;
  padding-left: calc(var(--sp-3) * 2 + 16px);
  padding-right: var(--sp-6);
}
.model-search__clear {
  position: absolute;
  right: var(--sp-2);
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: var(--bg-sunken);
  color: var(--ink-soft);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.model-search__clear:hover { background: var(--line); color: var(--ink); }

.model-list {
  list-style: none;
  margin: 0 0 var(--sp-3);
  padding: 0;
  display: grid;
  gap: var(--sp-2);
  max-height: 26rem;
  overflow-y: auto;
}

.model-card__btn {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    'name go'
    'spec go';
  align-items: center;
  gap: 2px var(--sp-3);
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.model-card__btn:hover {
  border-color: var(--ember);
  background: var(--ember-glow);
}
.model-card__btn:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 2px;
}

.model-card__name {
  grid-area: name;
  font-family: var(--font-mono);
  font-size: var(--step-0);
  font-weight: 600;
  color: var(--ink);
}
.model-card__spec {
  grid-area: spec;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.model-card__tag {
  font-size: 0.76rem;
  color: var(--ink-faint);
}
.model-card__tag + .model-card__tag::before {
  content: '·';
  margin-right: var(--sp-2);
}
/* Both-voltage models need a question answered, so they are flagged at the
   point of choosing rather than silently later. */
.model-card__tag--both { color: var(--ember-text); }

.model-card__go {
  grid-area: go;
  color: var(--ink-faint);
  font-size: 1.1rem;
  transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
}
.model-card__btn:hover .model-card__go {
  color: var(--ember-text);
  transform: translateX(3px);
}

.model-empty {
  margin: 0 0 var(--sp-3);
  padding: var(--sp-4);
  border-radius: var(--radius);
  background: var(--bg-sunken);
  font-size: var(--step--1);
  color: var(--ink-soft);
}

.linkish {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--ember-text);
  text-decoration: underline;
  cursor: pointer;
}

/* --- step 4: summary ------------------------------------------------------ */

.summary {
  padding: var(--sp-4);
  margin-bottom: var(--sp-5);
  border-left: 3px solid var(--ember);
  border-radius: var(--radius);
  background: var(--bg-sunken);
}
.summary__label {
  margin: 0 0 var(--sp-2);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
}
.summary__list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-1) var(--sp-4);
  margin: 0;
  font-size: var(--step--1);
}
.summary__list dt { color: var(--ink-faint); }
.summary__list dd {
  margin: 0;
  font-family: var(--font-mono);
  color: var(--ink);
}

/* --- form readability ----------------------------------------------------- */
/* The flow form is long, so it gets more breathing room than the inline one
   and clearer separation between question groups. */

.page-order .quote-form .field,
.page-order .quote-form .field-row { margin-bottom: var(--sp-5); }
.page-order .quote-form label { font-weight: 600; }
.page-order .quote-form .hint { color: var(--ink-faint); }
.page-order .step .quote-form { max-width: none; }

@media (max-width: 560px) {
  .step { padding: var(--sp-4); }
  .flow-progress { font-size: 0.7rem; gap: var(--sp-1) var(--sp-3); }
}