/* ==========================================================================
   Stove Fit - Clonmel, Co. Tipperary
   "The Heat Line" - one temperature axis runs the whole site, ember to ice.
   Static CSS, no build step. Mobile first.
   ========================================================================== */

/* --- 1. Tokens ---------------------------------------------------------- */

:root {
  /* surfaces */
  --soot:      #12100E;
  --iron:      #1B1815;
  --iron-2:    #26221E;
  --hairline:  #302A25;

  /* text */
  --bone:      #F5F2ED;
  --ash:       #B4ACA1;

  /* the temperature axis */
  --ember:     #F0703A;
  --amber:     #E9A13B;
  --brass:     #D2A868;
  --glacier:   #7CC6E8;

  /* placeholder flag */
  --flag:      #FFC46B;
  --flag-bg:   rgba(255, 196, 107, .07);

  /* per page, overridden below */
  --accent:    var(--ember);
  --accent-2:  var(--amber);

  /* type */
  --display: "Big Shoulders Display", "Oswald", "Arial Narrow", sans-serif;
  --body:    "Instrument Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* rhythm */
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --measure: 62ch;
  --rail: 4px;
  --header-h: 64px;
  --radius: 2px;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

html[data-page="stoves"]   { --accent: var(--ember);   --accent-2: var(--amber); }
html[data-page="heating"]  { --accent: var(--amber);   --accent-2: var(--brass); }
html[data-page="sauna"]    { --accent: var(--brass);   --accent-2: var(--glacier); }
html[data-page="products"] { --accent: var(--ember);   --accent-2: var(--glacier); }
html[data-page="contact"]  { --accent: var(--ember);   --accent-2: var(--glacier); }

/* --- 2. Reset and base -------------------------------------------------- */

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

html {
  color-scheme: dark;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--soot);
  color: var(--bone);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: .92;
  letter-spacing: .005em;
  text-wrap: balance;
  margin: 0 0 .4em;
  text-transform: uppercase;
}
h1 { font-size: clamp(2.75rem, 11vw, 6rem); }
h2 { font-size: clamp(2rem, 6.5vw, 3.5rem); }
h3 { font-size: clamp(1.35rem, 4vw, 1.9rem); }

p { margin: 0 0 1.1em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { color: var(--bone); }

strong { color: var(--bone); font-weight: 600; }

:focus-visible {
  outline: 3px solid var(--glacier);
  outline-offset: 3px;
  border-radius: var(--radius);
}

::selection { background: var(--accent); color: var(--soot); }

.skip {
  position: absolute; left: var(--gutter); top: -100px; z-index: 999;
  background: var(--accent); color: var(--soot);
  padding: .7rem 1.1rem; font-weight: 700; font-family: var(--mono);
  font-size: .8rem; text-decoration: none; border-radius: var(--radius);
  transition: top .18s var(--ease);
}
.skip:focus-visible { top: calc(var(--header-h) + 8px); color: var(--soot); }

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

/* --- 3. Layout ---------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

section { position: relative; }

.band { padding-block: clamp(3.5rem, 11vw, 8rem); }
.band + .band { border-top: 1px solid var(--hairline); }
.band--iron { background: var(--iron); }

/* --- 4. The Heat Line (signature) --------------------------------------- */

/* Desktop: a fixed rail down the left edge, ember at the top, ice at the
   bottom, with a marker that tracks scroll position. */
.heatline {
  position: fixed;
  left: 0; top: 0; bottom: 0;
  width: var(--rail);
  z-index: 60;
  background: linear-gradient(
    to bottom,
    var(--ember) 0%,
    var(--amber) 26%,
    var(--brass) 52%,
    #8FA9BD 76%,
    var(--glacier) 100%
  );
  opacity: .45;
  display: none;
  pointer-events: none;
}
.heatline__marker {
  position: absolute;
  left: 50%;
  width: 14px; height: 14px;
  margin-left: -7px; margin-top: -7px;
  border-radius: 50%;
  background: var(--bone);
  box-shadow: 0 0 0 4px var(--soot), 0 0 16px 2px rgba(245, 242, 237, .5);
  top: 0;
  will-change: transform;
}

/* Mobile and tablet: the same gradient becomes a scroll-progress bar pinned
   under the header. One idea, two form factors. */
.heatbar {
  position: fixed;
  left: 0; right: 0; top: var(--header-h);
  height: 3px;
  z-index: 60;
  background: var(--hairline);
  overflow: hidden;
}
.heatbar__fill {
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(
    to right,
    var(--ember) 0%, var(--amber) 30%, var(--brass) 60%, var(--glacier) 100%
  );
  will-change: transform;
}

@media (min-width: 1080px) {
  .heatline { display: block; }
  .heatbar { display: none; }
  body { padding-left: var(--rail); }
}

/* --- 5. Header ---------------------------------------------------------- */

.header {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--header-h);
  z-index: 70;
  display: flex;
  align-items: center;
  background: rgba(18, 16, 14, .72);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--hairline);
}
@media (min-width: 1080px) { .header { left: var(--rail); } }

.header__in {
  width: 100%; max-width: 1240px; margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}

.brand {
  display: inline-flex; align-items: center; gap: .6rem;
  text-decoration: none; color: var(--bone);
  touch-action: manipulation;
}
.brand:hover { color: var(--bone); }
.brand__mark { width: 30px; height: 30px; flex: none; }
.brand__name {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: 1.35rem; letter-spacing: .04em; line-height: 1;
}

.nav { display: none; }
@media (min-width: 900px) {
  .nav { display: flex; align-items: center; gap: clamp(.9rem, 2vw, 1.7rem); }
}
.nav a {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ash);
  text-decoration: none;
  padding: .35rem 0;
  border-bottom: 2px solid transparent;
  transition: color .18s var(--ease), border-color .18s var(--ease);
  touch-action: manipulation;
}
.nav a:hover { color: var(--bone); }
.nav a[aria-current="page"] { color: var(--bone); border-bottom-color: var(--accent); }

.header__call {
  display: none;
  font-family: var(--mono); font-size: .78rem; font-weight: 700;
  background: var(--accent); color: var(--soot);
  padding: .55rem .9rem; border-radius: var(--radius);
  text-decoration: none; white-space: nowrap;
  touch-action: manipulation;
  transition: background-color .18s var(--ease), transform .18s var(--ease);
}
.header__call:hover { background: var(--bone); color: var(--soot); transform: translateY(-1px); }
@media (min-width: 900px) { .header__call { display: inline-block; } }

/* burger */
.burger {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 0 10px;
  background: none; border: 0; cursor: pointer;
  touch-action: manipulation;
}
@media (min-width: 900px) { .burger { display: none; } }
/* :not(.sr) matters - without it this rule also paints the visually hidden
   label as a fourth bar and blows the header width out at 320px */
.burger span:not(.sr) {
  display: block; height: 2px; width: 100%; background: var(--bone);
  transition: transform .22s var(--ease), opacity .18s var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- 6. Overlay menu ---------------------------------------------------- */

.menu {
  position: fixed; inset: 0; z-index: 65;
  background: var(--soot);
  padding: calc(var(--header-h) + 2rem) var(--gutter) 2rem;
  display: flex; flex-direction: column; justify-content: center;
  overscroll-behavior: contain;
  overflow-y: auto;
  opacity: 0; visibility: hidden;
  /* visibility is delayed until the fade-out finishes on close, but flips
     instantly on open. Without the 0s open delay the first link is still
     visibility:hidden when JS calls focus(), so focus silently stays on body. */
  transition: opacity .26s var(--ease), visibility 0s linear .26s;
}
.menu[data-open="true"] {
  opacity: 1; visibility: visible;
  transition: opacity .26s var(--ease), visibility 0s linear 0s;
}
.menu ol { list-style: none; margin: 0; padding: 0; }
.menu li { border-bottom: 1px solid var(--hairline); }
.menu a {
  display: flex; align-items: baseline; gap: 1rem;
  padding: 1.05rem 0;
  font-family: var(--display); font-size: clamp(2rem, 9vw, 3rem);
  text-transform: uppercase; text-decoration: none; color: var(--bone);
  line-height: 1;
  touch-action: manipulation;
}
.menu a:hover { color: var(--accent); }
.menu a[aria-current="page"] { color: var(--accent); }
.menu .menu__temp {
  font-family: var(--mono); font-size: .72rem; color: var(--ash);
  letter-spacing: .06em; flex: none; width: 4.5ch;
}
/* scoped with .menu so it beats the .menu a rule above it, otherwise the
   call button inherits the 3rem display type and the wrong colour */
.menu .menu__call {
  margin-top: 2rem;
  display: block; text-align: center;
  background: var(--ember); color: var(--soot);
  font-family: var(--mono); font-weight: 700; font-size: 1rem;
  line-height: 1.4;
  padding: 1rem; border-radius: var(--radius); text-decoration: none;
  text-transform: none; letter-spacing: 0;
  touch-action: manipulation;
}
.menu .menu__call:hover { background: var(--bone); color: var(--soot); }
body[data-menu="open"] { overflow: hidden; }

/* --- 7. Hero ------------------------------------------------------------ */

.hero {
  position: relative;
  height: 100vh;
  min-height: 520px;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
}
@supports (height: 100svh) { .hero { height: 100svh; } }

.hero__media {
  position: absolute; inset: 0; z-index: -2;
}
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
/* dark overlay so the name stays legible over any photo he sends */
/* Tuned against the real photograph, not the dark placeholder it replaced.
   Lightened 31 Aug so the room behind reads: measured against the actual hero
   image, the wordmark holds 7.4:1, still AAA. Going much further drops it
   under 7, and past that under AA, so this is close to the floor. Re-measure
   if the hero photo is ever swapped, because the safe level depends on it. */
.hero__media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(18,16,14,.70) 0%, rgba(18,16,14,.56) 42%, rgba(18,16,14,.87) 100%),
    radial-gradient(ellipse 90% 60% at 50% 45%, rgba(18,16,14,.20), rgba(18,16,14,.67));
}

.hero__in {
  position: relative;
  text-align: center;
  padding-inline: var(--gutter);
  width: 100%;
}

.hero__eyebrow {
  font-family: var(--mono);
  font-size: clamp(.62rem, 2.4vw, .8rem);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ash);
  margin: 0 0 1.1rem;
  max-width: none;
}

.hero__name {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: .84;
  margin: 0;
  color: var(--bone);
  /* sized off the longest line, "STOVE FIT" = 9 characters incl. space,
     so the divisor keeps it inside the gutters at every width */
  font-size: clamp(3.25rem, 17vw, 10rem);
  letter-spacing: .01em;
  text-shadow: 0 2px 40px rgba(0,0,0,.55);
}

.hero__sub {
  font-family: var(--mono);
  font-size: clamp(.68rem, 2.6vw, .85rem);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bone);
  margin: 1.2rem auto 0;
  max-width: 44ch;
}
.hero__sub .dot { color: var(--ember); padding-inline: .45em; }

.hero__cta {
  display: inline-flex; align-items: center; gap: .6rem;
  margin-top: 2rem;
  background: var(--ember); color: var(--soot);
  font-family: var(--mono); font-weight: 700; font-size: .95rem;
  padding: .95rem 1.5rem; border-radius: var(--radius);
  text-decoration: none;
  touch-action: manipulation;
  transition: transform .18s var(--ease), background-color .18s var(--ease);
}
.hero__cta:hover { transform: translateY(-2px); background: var(--bone); color: var(--soot); }
.hero__cta svg { width: 18px; height: 18px; flex: none; }

/* single scroll cue */
.hero__cue {
  position: absolute;
  left: 50%; bottom: clamp(1.25rem, 4vh, 2.5rem);
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  font-family: var(--mono); font-size: .6rem; letter-spacing: .24em;
  text-transform: uppercase; color: var(--ash);
  text-decoration: none;
}
.hero__cue:hover { color: var(--bone); }
.hero__cue svg { width: 14px; height: 24px; }
.hero__cue svg .cue-dot { animation: cue 2.4s var(--ease) infinite; }
@keyframes cue {
  0%, 100% { transform: translateY(0); opacity: .35; }
  50%      { transform: translateY(6px); opacity: 1; }
}

/* --- 8. Page head (inner pages) ---------------------------------------- */

.pagehead {
  padding-top: calc(var(--header-h) + clamp(3rem, 9vw, 6rem));
  padding-bottom: clamp(2rem, 6vw, 4rem);
  border-bottom: 1px solid var(--hairline);
  position: relative;
}

/* Photograph behind the heading on each product page. Deliberately shorter
   than the home hero so it reads as subordinate to it, and it sits on the
   same overlay recipe so the heading stays legible over any photo he sends. */
.pagehead--media {
  isolation: isolate;
  overflow: hidden;
  padding-top: calc(var(--header-h) + clamp(4rem, 12vw, 8rem));
  padding-bottom: clamp(3rem, 8vw, 5.5rem);
  border-bottom: 0;
}
.pagehead__media {
  position: absolute; inset: 0; z-index: -2;
}
.pagehead__media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.pagehead__media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(18,16,14,.86) 0%, rgba(18,16,14,.66) 45%, rgba(18,16,14,.94) 100%),
    linear-gradient(to right, rgba(18,16,14,.7) 0%, rgba(18,16,14,.25) 60%, rgba(18,16,14,.5) 100%);
}
/* over a photograph the watermark needs to be a touch stronger to read as
   deliberate rather than as a rendering fault */
.pagehead--media .pagehead__temp { opacity: .26; }
.pagehead--media .pagehead__lead { color: var(--bone); }
.pagehead__temp {
  font-family: var(--mono);
  font-size: clamp(3.5rem, 13vw, 7.5rem);
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
  opacity: .18;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
  margin: 0;
  max-width: none;
  pointer-events: none;
}
.pagehead h1 { margin-top: -.3em; position: relative; }
.pagehead__lead {
  font-size: clamp(1.05rem, 2.6vw, 1.3rem);
  color: var(--ash);
  max-width: 54ch;
  margin-top: 1.2rem;
}

/* --- 9. Editorial rows -------------------------------------------------- */

.rows { display: grid; gap: clamp(3rem, 9vw, 6.5rem); }

.row { display: grid; gap: clamp(1.25rem, 4vw, 2.5rem); align-items: start; }

@media (min-width: 900px) {
  .row { grid-template-columns: 1.15fr .85fr; }
  .row--flip > .row__media { order: 2; }
  .row--flip > .row__body  { order: 1; }
}

.row__label {
  display: flex; align-items: center; gap: .8rem;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ash);
  margin-bottom: 1rem;
  max-width: none;
}
.row__label b {
  color: var(--accent); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.row__label::after {
  content: ""; flex: 1; height: 1px; background: var(--hairline);
}

.row__body p { color: var(--ash); }
.row__body h2 { color: var(--bone); }

/* --- 10. Photo frames --------------------------------------------------- */

/* Until Francis's own photos arrive, every image slot renders as an obvious
   labelled frame. Nothing here is a stock photo and nothing is a supplier
   marketing graphic. */
.frame {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 2px dashed rgba(255, 196, 107, .38);
  border-radius: var(--radius);
  background:
    repeating-linear-gradient(45deg,
      rgba(255,196,107,.035) 0 10px,
      transparent 10px 20px),
    var(--iron);
  display: grid; place-items: center; text-align: center;
  padding: 1.5rem;
}
.frame--tall { aspect-ratio: 3 / 4; }
.frame--wide { aspect-ratio: 16 / 9; }
.frame__txt {
  font-family: var(--mono); font-size: .7rem; line-height: 1.7;
  letter-spacing: .06em; text-transform: uppercase; color: var(--flag);
  max-width: 30ch; margin: 0;
}
.frame__txt b { display: block; color: var(--bone); margin-bottom: .4rem; }

/* before / after pair -------------------------------------------------- */
.ba { margin: 0; display: grid; gap: .5rem; }
.ba img { width: 100%; height: auto; border-radius: var(--radius); }
.ba figcaption {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ash);
  margin: -.25rem 0 .5rem;
}
.ba figcaption:last-of-type { margin-bottom: 0; }

/* --- 11. Placeholder flag ----------------------------------------------- */

.ph {
  display: inline-block;
  font-family: var(--mono);
  font-size: .78em;
  line-height: 1.5;
  color: var(--flag);
  background: var(--flag-bg);
  border: 1px dashed rgba(255, 196, 107, .5);
  border-radius: var(--radius);
  padding: .12em .5em;
}
.ph--block { display: block; padding: .8rem 1rem; margin-block: 1rem; max-width: var(--measure); }

.notice {
  border: 1px dashed rgba(255, 196, 107, .5);
  background: var(--flag-bg);
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
  margin-bottom: clamp(2rem, 5vw, 3rem);
}
.notice p {
  font-family: var(--mono); font-size: .78rem; line-height: 1.7;
  color: var(--flag); margin: 0; max-width: none;
}
.notice p + p { margin-top: .5rem; }
.notice b { color: var(--bone); }

/* --- 12. Cards and lists ------------------------------------------------ */

.grid {
  display: grid;
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
}
@media (min-width: 700px)  { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 700px)  { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }

.cell {
  background: var(--soot);
  padding: clamp(1.4rem, 3.5vw, 2rem);
}
.band--iron .cell { background: var(--iron); }
.cell h3 { font-size: 1.25rem; margin-bottom: .5rem; }
.cell p { color: var(--ash); font-size: .95rem; }
.cell__ico { width: 30px; height: 30px; color: var(--accent); margin-bottom: 1rem; }

.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.ticks li {
  display: grid; grid-template-columns: 20px 1fr; gap: .75rem;
  align-items: start; color: var(--ash); font-size: .97rem; line-height: 1.55;
}
.ticks svg { width: 20px; height: 20px; color: var(--accent); margin-top: .28em; flex: none; }

/* a product line with no photograph yet. Rather than an empty box, the space
   carries the two or three things a customer actually wants to know, so the
   card is useful instead of just even. */
.product__facts {
  aspect-ratio: 16 / 10;
  display: grid; align-content: center;
  padding: 1.1rem 1.35rem;
  background:
    repeating-linear-gradient(45deg, rgba(240,112,58,.025) 0 14px, transparent 14px 28px),
    var(--iron-2);
  border-bottom: 1px solid var(--hairline);
}
.product__facts ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.product__facts li {
  font-family: var(--mono);
  font-size: .74rem;
  line-height: 1.45;
  color: var(--ash);
  padding-left: 1.1rem;
  position: relative;
}
.product__facts li::before {
  content: ""; position: absolute; left: 0; top: .5em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent); opacity: .75;
}

/* a row whose photo column was removed runs full width */
.row--solo { grid-template-columns: 1fr !important; }

/* --- 13. Products ------------------------------------------------------- */

.products { display: grid; gap: 1.25rem; }
@media (min-width: 720px)  { .products { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .products { grid-template-columns: repeat(3, 1fr); } }

.product {
  display: flex; flex-direction: column;
  background: var(--iron);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
}
.product .frame {
  aspect-ratio: 16 / 10; border: 0;
  border-bottom: 1px dashed rgba(255,196,107,.3);
  border-radius: 0; padding: 1rem;
}
.product > img {
  aspect-ratio: 16 / 10;
  width: 100%; height: auto;
  object-fit: cover; object-position: center;
  border-bottom: 1px solid var(--hairline);
}
.product__in { padding: 1.25rem 1.35rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.product__kind {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 .55rem; max-width: none;
}
.product h3 { font-size: 1.3rem; margin-bottom: .55rem; }
.product p { font-size: .92rem; color: var(--ash); }
.product__price {
  margin-top: auto; padding-top: 1.1rem;
  border-top: 1px solid var(--hairline);
  display: flex; align-items: baseline; justify-content: space-between; gap: .75rem;
  flex-wrap: wrap;
}
.product__from {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ash);
}
.product__fig {
  font-family: var(--mono); font-size: 1rem; font-weight: 700;
  color: var(--flag); font-variant-numeric: tabular-nums;
  background: var(--flag-bg); border: 1px dashed rgba(255,196,107,.5);
  border-radius: var(--radius); padding: .15em .5em;
  white-space: nowrap;
}
/* a price Francis has actually given: solid, not a dashed placeholder box */
.product__fig--real {
  color: var(--bone);
  background: transparent;
  border: 1px solid var(--hairline);
}
/* no published price for this line yet: reads as a deliberate "ask us",
   not as a broken field */
.product__fig--ask {
  color: var(--ash);
  background: transparent;
  border: 1px solid var(--hairline);
  font-size: .82rem;
  font-weight: 500;
}

/* --- 14. Readouts (sauna page) ------------------------------------------ */

.readouts {
  display: grid; gap: 1px; background: var(--hairline);
  border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 800px) { .readouts { grid-template-columns: repeat(4, 1fr); } }
.readouts--3 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 800px) { .readouts--3 { grid-template-columns: repeat(3, 1fr); } }
.readout { background: var(--soot); padding: 1.5rem 1.25rem; text-align: center; }
.readout__fig {
  font-family: var(--mono); font-weight: 700;
  font-size: clamp(1.7rem, 5vw, 2.4rem);
  font-variant-numeric: tabular-nums;
  line-height: 1; margin: 0 0 .45rem; max-width: none;
}
.readout--hot  .readout__fig { color: var(--ember); }
.readout--warm .readout__fig { color: var(--brass); }
.readout--cold .readout__fig { color: var(--glacier); }
.readout__cap {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ash); margin: 0; max-width: none;
}

/* --- 15. Buttons -------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  font-family: var(--mono); font-weight: 700; font-size: .92rem;
  padding: .95rem 1.5rem; border-radius: var(--radius);
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  touch-action: manipulation;
  transition: transform .18s var(--ease), background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn--fire { background: var(--ember); color: var(--soot); }
.btn--fire:hover { background: var(--bone); color: var(--soot); }
.btn--ghost { border-color: var(--hairline); color: var(--bone); background: transparent; }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn--wide { width: 100%; }
.btn svg { width: 18px; height: 18px; flex: none; }

.btnrow { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }

/* --- 16. Closing call block (every page ends in a call) ----------------- */

.close {
  background: var(--iron);
  border-top: 1px solid var(--hairline);
  padding-block: clamp(3rem, 9vw, 5.5rem);
  text-align: center;
}
.close h2 { margin-bottom: .5rem; }
.close p { margin-inline: auto; color: var(--ash); }
.close .btnrow { justify-content: center; }
.close__num {
  display: inline-block;
  font-family: var(--mono); font-weight: 700;
  font-size: clamp(1.5rem, 6vw, 2.2rem);
  color: var(--bone); text-decoration: none;
  margin-top: 1.4rem; letter-spacing: .02em;
}
.close__num:hover { color: var(--accent); }

/* --- 17. Form ----------------------------------------------------------- */

.form { display: grid; gap: 1.1rem; max-width: 34rem; }
.field { display: grid; gap: .4rem; }
.field label {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ash);
}
.field .req { color: var(--ember); }
.field input, .field select, .field textarea {
  font-family: var(--body); font-size: 1rem;
  background: var(--iron); color: var(--bone);
  border: 1px solid var(--hairline); border-radius: var(--radius);
  padding: .8rem .9rem; width: 100%;
  transition: border-color .18s var(--ease);
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--iron-2); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { border-color: var(--accent); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--ember); }
.field .err { font-family: var(--mono); font-size: .72rem; color: var(--ember); min-height: 1.2em; }

.consent {
  display: grid; grid-template-columns: 22px 1fr; gap: .7rem; align-items: start;
}
.consent input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--ember); }
.consent label {
  font-family: var(--body); font-size: .87rem; text-transform: none;
  letter-spacing: 0; color: var(--ash); line-height: 1.5;
}

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.formnote {
  font-family: var(--mono); font-size: .74rem; line-height: 1.7; color: var(--ash);
  max-width: none;
}
.formmsg {
  border-radius: var(--radius); padding: 1rem 1.1rem;
  font-family: var(--mono); font-size: .84rem; line-height: 1.7;
}
.formmsg[hidden] { display: none; }
.formmsg--ok  { background: rgba(124,198,232,.1); border: 1px solid var(--glacier); color: var(--bone); }
.formmsg--bad { background: rgba(240,112,58,.1);  border: 1px solid var(--ember);   color: var(--bone); }
.formmsg a { color: var(--glacier); }

/* --- 18. Accordion ------------------------------------------------------ */

.acc { border-top: 1px solid var(--hairline); }
.acc__item { border-bottom: 1px solid var(--hairline); }
.acc h3 { margin: 0; }
.acc__btn {
  width: 100%; text-align: left; cursor: pointer;
  background: none; border: 0; color: var(--bone);
  font-family: var(--body); font-size: 1.02rem; font-weight: 600;
  line-height: 1.5;
  padding: 1.15rem 2.5rem 1.15rem 0;
  position: relative;
  text-transform: none; letter-spacing: 0;
  touch-action: manipulation;
}
.acc__btn::after,
.acc__btn::before {
  content: ""; position: absolute; right: .35rem; top: 50%;
  background: var(--accent); transition: transform .22s var(--ease), opacity .22s var(--ease);
}
.acc__btn::before { width: 14px; height: 2px; margin-top: -1px; }
.acc__btn::after  { width: 2px; height: 14px; margin-top: -7px; right: .7rem; }
.acc__btn[aria-expanded="true"]::after { transform: scaleY(0); opacity: 0; }
.acc__panel[hidden] { display: none; }
.acc__panel > div { padding: 0 0 1.3rem; color: var(--ash); font-size: .97rem; }

/* --- 19. Sticky mobile call bar ---------------------------------------- */

.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 68;
  padding: .6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom));
  background: rgba(18,16,14,.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--hairline);
  transform: translateY(115%);
  transition: transform .28s var(--ease);
}
.callbar[data-show="true"] { transform: translateY(0); }
@media (min-width: 900px) { .callbar { display: none; } }

/* --- 20. Footer --------------------------------------------------------- */

.footer {
  background: var(--soot);
  border-top: 1px solid var(--hairline);
  padding-block: clamp(2.5rem, 7vw, 4rem);
  padding-bottom: 6.5rem;
}
@media (min-width: 900px) { .footer { padding-bottom: clamp(2.5rem, 7vw, 4rem); } }

.footer__grid { display: grid; gap: 2.25rem; }
@media (min-width: 800px) { .footer__grid { grid-template-columns: 1.2fr 1fr 1fr; } }

.footer h4 {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ash); font-weight: 500;
  margin-bottom: .9rem;
}
.footer address {
  font-style: normal; color: var(--ash); font-size: .95rem; line-height: 1.75;
}
.footer a { color: var(--ash); text-decoration: none; }
.footer a:hover { color: var(--bone); text-decoration: underline; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; font-size: .95rem; }
.hours {
  border-collapse: collapse;
  font-size: .92rem;
  color: var(--ash);
  width: 100%;
  max-width: 15rem;
}
.hours th {
  font-weight: 500;
  text-align: left;
  padding: .18rem 1.2rem .18rem 0;
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ash);
}
.hours td { padding: .18rem 0; color: var(--bone); font-variant-numeric: tabular-nums; }

.footer__phone {
  display: inline-block; font-family: var(--mono); font-weight: 700;
  font-size: 1.15rem; color: var(--bone) !important; margin-top: .4rem;
}
.footer__social { display: flex; gap: 1rem; margin-top: 1rem; align-items: center; }
.footer__social a { display: inline-flex; padding: .25rem; }
.footer__social svg { width: 22px; height: 22px; color: var(--ash); }
.footer__social a:hover svg { color: var(--accent); }
.footer__base {
  margin-top: 2.5rem; padding-top: 1.4rem;
  border-top: 1px solid var(--hairline);
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; justify-content: space-between;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .06em;
  color: var(--ash); text-transform: uppercase;
}

/* --- 21. Reveal (JS-gated) --------------------------------------------- */

.js .rv { opacity: 0; transform: translateY(18px); }
.js .rv.is-in {
  opacity: 1; transform: none;
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  transition-delay: var(--d, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  .js .rv, .js .rv.is-in { opacity: 1; transform: none; transition: none; }
  .hero__cue svg .cue-dot { animation: none; }
  .btn:hover, .hero__cta:hover, .header__call:hover { transform: none; }
  .callbar, .menu, .burger span { transition: none; }
}