/* ==========================================================================
   Gas Fire Heat — concept site stylesheet

   THIS IS NOT A TIER DEMO. It is a Standard-tier build made for a real
   business, Gas Fire Heat of St. George, Ontario, to be shown to them.

   This branch is an ORPHAN. It shares no history with `main`, where the three
   fictional tier demos live, and it is meant to stay that way — a spec build
   carrying a real company's name should not be tangled up with the portfolio
   pieces. Nothing here imports from there and nothing there imports from here.

   Structurally this is the Standard base from those demos, re-skinned. The
   layout primitives, the reveal behaviour and the tour layer are the same, so
   anything learned fixing one applies to the other. The palette is not: green
   and paper reads as landscaping, and this business sells fire.

   CONTRAST (measured against --paper #F7F3EE):
     --ink        #221E1B   15.0:1   body text
     --ink-soft   #57504A    7.2:1   muted text
     --ink-faint  #6E655E    5.2:1   small meta text
     --ember-ink  #B03A10    5.5:1   links, accent text, placeholder marks
     white on --ember-ink    6.1:1   primary button
     white on --coal        16.1:1   footer text
   --ember #E4571B is 3.4:1 and FAILS AA for normal text. Decorative only:
   rules, icon strokes, borders, the flame mark. Never put words in it.

   Against --paper-alt #EFE9E1 the same colours measure 6.6 / 4.7 / 5.0, so
   every one of them still clears AA on the alternating section ground.

   PLACEHOLDERS ARE A FEATURE, NOT AN OVERSIGHT. Nothing about this business
   was invented. Where a real site would carry a price, an hour, a licence
   number or a customer's words, this one carries a .tbc mark instead,
   because the only honest options were to leave it out or to make it up.
   See the note in the footer of every page. Do not "finish" these by
   guessing; they get filled in from Derek's own answers or not at all.

   PHOTOGRAPHY IS STOCK AND SAYS SO. Every photograph on this site is a
   licensed stock image carrying a visible "Stock photo" chip (.figure__tag),
   because an untagged photo of somebody else's fireplace on a page branded
   Gas Fire Heat would imply Derek installed it. That is the same lie the
   .tbc marks exist to avoid, so the same rule applies: the chip stays while
   this is reachable on any URL, and the alt text never claims the work is
   his. His own photos replace these, one slot at a time.

   Only gas-specific images were used. Free stock for this trade is mostly
   wrong — drain plumbing sold as "furnace repair", air-conditioner
   condensers, wood fires, industrial pipework in other countries — and a
   gas fitter spots all of it instantly. Three slots therefore have NO photo
   and keep a .photo placeholder panel instead: furnaces, heaters, and Derek
   himself. Do not fill those with stock. A stranger's face beside a real
   man's name is the single worst thing this site could do.
   ========================================================================== */

:root {
  --coal:        #1A1715;
  --coal-deep:   #120F0E;
  --coal-mid:    #332C28;
  --paper:       #F7F3EE;
  --paper-alt:   #EFE9E1;
  --surface:     #FFFFFF;
  --ink:         #221E1B;
  --ink-soft:    #57504A;
  --ink-faint:   #6E655E;
  --ember:       #E4571B;
  --ember-ink:   #B03A10;
  --ember-tint:  #FAE7DC;
  --ember-light: #F0834A;
  --border:      rgba(34, 30, 27, 0.13);
  --border-strong: rgba(34, 30, 27, 0.26);

  --font-head: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Karla", "Segoe UI", system-ui, -apple-system, sans-serif;

  --container: 1120px;
  --radius:    4px;
  --shadow-sm: 0 2px 10px -4px rgba(34, 30, 27, 0.16);
  --shadow:    0 16px 36px -20px rgba(34, 30, 27, 0.34);
  --header-h:  76px;
  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--ember-ink); text-decoration: none; transition: color 0.2s var(--ease); }
a:hover { color: var(--coal); }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; }
:focus-visible { outline: 3px solid var(--ember-ink); outline-offset: 3px; border-radius: 3px; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(20px, 5vw, 40px); }
.section { padding-block: clamp(56px, 8vw, 100px); }
.section--tight { padding-block: clamp(40px, 6vw, 68px); }
.section--alt { background: var(--paper-alt); }
/* Same 2% hatch as the CTA band, so every flat dark ground on the site has some
   tooth to it instead of reading as a filled rectangle. */
.section--coal {
  background:
    repeating-linear-gradient(45deg, rgba(247, 243, 238, 0.022) 0 2px, transparent 2px 5px),
    var(--coal);
  color: var(--paper);
}
.section--coal h2 { color: var(--paper); }
.section--coal p { color: #C4B8AE; }
.page-hero + .section { padding-top: clamp(26px, 3.5vw, 44px); }
.center { text-align: center; }
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--coal); color: #fff; padding: 10px 18px; border-radius: 3px; font-weight: 700;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 12px; color: #fff; }

/* ---------- Type helpers ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-weight: 700; font-size: 0.75rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ember-ink);
  margin-bottom: 14px;
}
.eyebrow::before { content: ""; width: 24px; height: 2px; background: var(--ember); }
.section--coal .eyebrow { color: var(--ember-light); }
.section--coal .eyebrow::before { background: var(--ember-light); }
.section-head { max-width: 700px; margin-bottom: clamp(30px, 5vw, 48px); }
.section-head.center { margin-inline: auto; }
.section-head h2 { font-size: clamp(1.8rem, 1.1rem + 2.8vw, 2.8rem); letter-spacing: -0.022em; }
.section-head p { color: var(--ink-soft); margin-top: 14px; font-size: 1.05rem; }
.lede { color: var(--ink-soft); font-size: 1.08rem; max-width: 62ch; }

/* ---------- Placeholders ----------
   Everything this site does not actually know. A dashed ember underline and
   a tinted ground, loud enough that Derek spots every one on a first read and
   quiet enough that the page still looks like a finished site to him. */
.tbc {
  background: var(--ember-tint);
  border-bottom: 2px dashed var(--ember);
  color: var(--ember-ink);
  padding: 0 3px; font-style: italic;
}
.tbc-block {
  border: 2px dashed var(--ember);
  background: var(--ember-tint);
  border-radius: var(--radius);
  padding: clamp(20px, 3vw, 30px);
}
.tbc-block__tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 0.72rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ember-ink); margin-bottom: 12px;
}
.tbc-block__tag svg { width: 15px; height: 15px; }
.tbc-block h3 { font-size: 1.1rem; margin-bottom: 8px; }
.tbc-block p { color: var(--ink-soft); font-size: 0.96rem; }
.tbc-block p + p { margin-top: 10px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-body); font-weight: 700; font-size: 0.97rem; line-height: 1;
  padding: 15px 26px; border-radius: 3px; border: 2px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: transform 0.16s var(--ease), background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.btn svg { width: 18px; height: 18px; }
.btn--primary { background: var(--ember-ink); color: #fff; }
.btn--primary:hover { background: #98320D; color: #fff; transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--border-strong); }
.btn--ghost:hover { color: var(--ink); border-color: var(--coal); transform: translateY(-2px); }
.btn--light { background: var(--paper); color: var(--coal); }
.btn--light:hover { background: #fff; color: var(--coal); transform: translateY(-2px); }
.btn--outline-light { background: transparent; color: var(--paper); border-color: rgba(247, 243, 238, 0.42); }
.btn--outline-light:hover { color: #fff; border-color: var(--paper); transform: translateY(-2px); }
.btn--lg { padding: 17px 32px; font-size: 1.04rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(247, 243, 238, 0.94);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--border);
}
.nav { display: flex; align-items: center; height: var(--header-h); gap: 18px; }
.nav__brand { display: inline-flex; align-items: center; gap: 11px; margin-right: auto; flex: none; color: var(--ink); }
.nav__brand:hover { color: var(--ink); }
.nav__brand svg { width: 34px; height: 34px; flex: none; color: var(--ember); }
.nav__brand .wordmark { font-family: var(--font-head); font-weight: 600; font-size: 1.14rem; line-height: 1.1; letter-spacing: -0.01em; }
.nav__brand .wordmark small { display: block; font-family: var(--font-body); font-weight: 600; font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); margin-top: 3px; }
.nav__menu { display: flex; align-items: center; gap: 6px; }
.nav__links { display: flex; align-items: center; gap: 2px; }
.nav__links a {
  position: relative; white-space: nowrap;
  font-weight: 600; font-size: 0.94rem; color: var(--ink-soft);
  padding: 9px 13px; transition: color 0.2s var(--ease);
}
.nav__links a::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 3px; height: 2px;
  background: var(--ember); transform: scaleX(0); transition: transform 0.22s var(--ease);
}
.nav__links a:hover { color: var(--ink); }
.nav__links a:hover::after, .nav__links a[aria-current="page"]::after { transform: scaleX(1); }
.nav__links a[aria-current="page"] { color: var(--ink); }
.nav__cta { margin-left: 8px; }
.nav__toggle {
  display: none; background: transparent; border: 1px solid var(--border-strong);
  width: 44px; height: 44px; border-radius: 3px; cursor: pointer; padding: 0;
  color: var(--ink); align-items: center; justify-content: center;
}
.nav__toggle svg { width: 22px; height: 22px; }
.nav__toggle .icon-close { display: none; }
.nav[data-open="true"] .nav__toggle .icon-open { display: none; }
.nav[data-open="true"] .nav__toggle .icon-close { display: block; }

@media (max-width: 900px) {
  .nav__toggle { display: inline-flex; }
  .nav__menu {
    position: fixed; inset: var(--header-h) 0 auto 0;
    background: var(--paper); border-bottom: 1px solid var(--border);
    flex-direction: column; align-items: stretch; gap: 4px;
    padding: 18px clamp(20px, 5vw, 40px) 26px;
    max-height: calc(100dvh - var(--header-h)); overflow-y: auto;
    transform: translateY(-10px); opacity: 0; pointer-events: none;
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
    box-shadow: var(--shadow);
  }
  .nav[data-open="true"] .nav__menu { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .nav__links { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__links a { padding: 14px 4px; font-size: 1.05rem; border-bottom: 1px solid var(--border); }
  .nav__links a::after { display: none; }
  .nav__cta { margin: 14px 0 0; }
  .nav__cta .btn { width: 100%; }
}

/* ---------- Hero ----------
   Dark, unlike the tier demos. A fireplace company selling warmth in a
   Canadian winter reads better against a dark ground with a glow in it. */
.hero {
  position: relative; overflow: hidden; background: var(--coal); color: var(--paper);
  padding-block: clamp(72px, 11vw, 140px);
  display: flex; align-items: center; min-height: min(72vh, 660px);
}
/* Three background layers, painted front to back: an ember glow, a scrim that
   keeps the copy legible, and the photograph underneath.

   The crop is deliberate and it is the whole trick. In that photograph the
   flame sits dead centre, which is exactly where the copy goes — scrimmed
   hard enough to fix the contrast it went black, and left alone the lead
   paragraph measured 3.8:1 against open flame. So the image is zoomed past
   cover and pulled left, which puts the flame at roughly 69% across, just
   clear of where the text column ends (~67%). The scrim can then stay heavy
   under the words and fall away over the fire.

   Text contrast was sampled from the composited pixels, not estimated. If you
   change the size, the position or the stops, re-measure — the numbers move
   together. */
.hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(680px 360px at 86% 14%, rgba(228, 87, 27, 0.24), transparent 68%),
    linear-gradient(96deg, rgba(18, 15, 14, 0.96) 0%, rgba(18, 15, 14, 0.95) 46%, rgba(18, 15, 14, 0.92) 66%, rgba(18, 15, 14, 0.42) 86%, rgba(18, 15, 14, 0.30) 100%),
    url("/assets/hero-fire.jpg") 8% 50% / 145% auto no-repeat;
}
.hero > * { position: relative; }
/* On a phone the copy spans the full width, so the scrim has to go vertical
   or the lower half of the text lands on open flame. */
@media (max-width: 860px) {
  .hero { min-height: 0; }
  .hero::before {
    background:
      radial-gradient(600px 300px at 70% 6%, rgba(228, 87, 27, 0.22), transparent 68%),
      linear-gradient(184deg, rgba(18, 15, 14, 0.72) 0%, rgba(18, 15, 14, 0.90) 34%, rgba(18, 15, 14, 0.96) 100%),
      url("/assets/hero-fire.jpg") 50% 22% / cover no-repeat;
  }
}
.hero__inner { max-width: 760px; }
.hero .eyebrow { color: var(--ember-light); }
.hero .eyebrow::before { background: var(--ember-light); }
.hero h1 { font-size: clamp(2.2rem, 1.3rem + 3.8vw, 3.5rem); letter-spacing: -0.02em; color: var(--paper); }
.hero h1 .accent { color: var(--ember-light); }
.hero__lead { color: #C4B8AE; font-size: clamp(1.06rem, 1rem + 0.5vw, 1.22rem); margin-top: 20px; max-width: 56ch; }
.hero .btn-row { margin-top: 32px; }
.hero__meta { display: flex; flex-wrap: wrap; gap: 12px 26px; margin-top: 36px; color: #C4B8AE; font-size: 0.92rem; }
.hero__meta span { display: inline-flex; align-items: center; gap: 8px; }
.hero__meta svg { width: 17px; height: 17px; color: var(--ember-light); flex: none; }
.hero .tbc { background: rgba(228, 87, 27, 0.18); color: var(--ember-light); border-bottom-color: var(--ember-light); }

/* ---------- Page hero (inner pages) ---------- */
.page-hero { position: relative; padding-block: clamp(42px, 6vw, 76px); background: linear-gradient(168deg, #FBF8F3, var(--paper)); border-bottom: 1px solid var(--border); }
.page-hero h1 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.8rem); }
.page-hero p { color: var(--ink-soft); margin-top: 14px; font-size: 1.08rem; max-width: 60ch; }

/* Dark variant for the service pages, so the four of them do not all open on
   the same pale wash. Pass a photograph in with --hero-img where there is an
   honest one; where there is not, the ember glow carries it alone and the page
   still reads as part of the same set. */
.page-hero--dark {
  background: var(--coal); color: var(--paper); border-bottom: none; overflow: hidden;
  padding-block: clamp(52px, 7vw, 92px);
}
/* The scrim here is heavier than the home hero's and near-uniform, because
   these photographs are bright edge to edge — fireplace-detail.jpg is open
   flame in every corner, with no dark quarter to tuck the copy into. At 0.80
   the image still comes through about three times brighter than the scrim
   floor, which at this height is the right job for it: a warm glow behind the
   title rather than a picture competing with it.
   Loosen these stops and the breadcrumb fails first — it measured 2.1:1 before
   this, being the one line that runs the full width of the hero. */
.page-hero--dark::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(620px 300px at 84% 6%, rgba(228, 87, 27, 0.22), transparent 68%),
    linear-gradient(96deg, rgba(18, 15, 14, 0.95) 0%, rgba(18, 15, 14, 0.92) 46%, rgba(18, 15, 14, 0.86) 78%, rgba(18, 15, 14, 0.80) 100%),
    var(--hero-img, linear-gradient(168deg, #241F1C, var(--coal-deep))) 60% 50% / cover no-repeat;
}
.page-hero--dark > * { position: relative; }
.page-hero--dark h1 { color: var(--paper); }
.page-hero--dark p { color: #C4B8AE; }
/* Lighter than the muted grey used on flat coal: this line crosses the whole
   width of a lit photograph, so it needs the extra headroom. */
.page-hero--dark .breadcrumb { color: #CFC2B8; }
.page-hero--dark .breadcrumb a { color: var(--ember-light); }
.page-hero--dark .breadcrumb a:hover { color: #fff; }
.page-hero--dark .breadcrumb li + li::before { color: #7E7168; }
.page-hero--dark .tbc { background: rgba(228, 87, 27, 0.18); color: var(--ember-light); border-bottom-color: var(--ember-light); }
@media (max-width: 860px) {
  .page-hero--dark::before {
    background:
      radial-gradient(520px 260px at 74% 4%, rgba(228, 87, 27, 0.2), transparent 70%),
      linear-gradient(184deg, rgba(18, 15, 14, 0.78) 0%, rgba(18, 15, 14, 0.92) 40%, rgba(18, 15, 14, 0.97) 100%),
      var(--hero-img, linear-gradient(168deg, #241F1C, var(--coal-deep))) 50% 30% / cover no-repeat;
  }
}
.breadcrumb { font-size: 0.85rem; color: var(--ink-faint); margin-bottom: 14px; }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.breadcrumb li { display: inline-flex; align-items: center; gap: 9px; }
.breadcrumb li + li::before { content: "/"; color: var(--ink-faint); }

/* ---------- Grids & cards ---------- */
.grid { display: grid; gap: 20px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

/* Squared top edge and a rule that lights up, rather than a rounded drop-shadow
   box. The shadowed card is the single most template-looking module on the web
   and this business does not need to look like software. */
.card {
  position: relative; overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border); border-top: 2px solid var(--border-strong);
  border-radius: 0 0 var(--radius) var(--radius);
  padding: 27px 26px 26px; height: 100%;
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.card::before {
  content: ""; position: absolute; top: -2px; left: 0; right: 0; height: 2px;
  background: var(--ember); transform: scaleX(0); transform-origin: left;
  transition: transform 0.28s var(--ease);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.card:hover::before { transform: scaleX(1); }
.card h3 { font-size: 1.16rem; margin-bottom: 8px; }
.card p { color: var(--ink-soft); font-size: 0.96rem; }
a.card { color: inherit; display: block; }
a.card:hover { color: inherit; }
.card__more { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; font-weight: 700; font-size: 0.9rem; color: var(--ember-ink); }
.card__more svg { width: 15px; height: 15px; transition: transform 0.2s var(--ease); }
a.card:hover .card__more svg { transform: translateX(3px); }

.icon-badge {
  width: 46px; height: 46px; border-radius: 3px; display: grid; place-items: center;
  background: var(--ember-tint); border: 1px solid rgba(228, 87, 27, 0.26);
  color: var(--ember-ink); margin-bottom: 16px;
}
.icon-badge svg { width: 23px; height: 23px; }

/* ---------- Checklist ---------- */
.ticks { display: grid; gap: 10px; margin-top: 16px; }
.ticks li { display: grid; grid-template-columns: 18px 1fr; gap: 11px; align-items: start; color: var(--ink-soft); font-size: 0.95rem; }
.ticks svg { width: 16px; height: 16px; color: var(--ember-ink); margin-top: 5px; }
.section--coal .ticks li { color: #C4B8AE; }
.section--coal .ticks svg { color: var(--ember-light); }

/* ---------- Split ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 60px); align-items: center; }
/* Asymmetric variants. Two equal columns on every section is most of what made
   this site feel stamped out of a template; giving the text or the image the
   upper hand, and alternating which, is what a designed page does. */
.split--wide   { grid-template-columns: 1.2fr 0.8fr; }
.split--narrow { grid-template-columns: 0.8fr 1.2fr; }
@media (min-width: 861px) {
  .split--flip > :first-child { order: 2; }
}
@media (max-width: 860px) {
  .split, .split--wide, .split--narrow { grid-template-columns: 1fr; }
}
.split__body p + p { margin-top: 16px; }
.split__body p { color: var(--ink-soft); }

/* ---------- Photographs ----------
   Real images, all of them stock, all of them tagged. See the note at the top
   of this file: the .figure__tag chip is load-bearing, not decoration. */
.figure { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--coal); }
.figure img { width: 100%; height: 100%; object-fit: cover; }
.figure--tall { aspect-ratio: 3 / 4; }
.figure--wide { aspect-ratio: 16 / 9; }
.figure--squat { aspect-ratio: 4 / 3; }
/* Dark chip, white text — 13:1 on its own ground, so it stays legible over a
   bright frame of fire as well as a dim one. */
.figure__tag {
  position: absolute; top: 12px; left: 12px; z-index: 1;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(18, 15, 14, 0.86); color: #fff;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 6px 10px; border-radius: 2px; border: 1px solid rgba(247, 243, 238, 0.22);
}
.figure__tag svg { width: 13px; height: 13px; color: var(--ember-light); flex: none; }
/* Caption sits under the frame, in the same italic ember voice as .tbc, so a
   reader joins the dots: this is a blank too, just a prettier one. */
.figure__cap {
  margin-top: 10px; font-size: 0.86rem; font-style: italic;
  color: var(--ember-ink); line-height: 1.5;
}

/* Panel standing in for a photograph that does not exist yet, on the three
   slots where no honest stock image was available. Dashed ember, matching the
   .tbc vocabulary — this is a marked blank, and it should look like one. */
.photo {
  aspect-ratio: 4 / 3; border-radius: var(--radius);
  border: 2px dashed var(--ember);
  display: grid; place-items: center; align-content: center; gap: 14px;
  padding: clamp(20px, 3vw, 32px); text-align: center; color: var(--ember-ink);
  background:
    repeating-linear-gradient(45deg, rgba(228, 87, 27, 0.06) 0 12px, transparent 12px 24px),
    var(--ember-tint);
}
.photo svg { width: 44px; height: 44px; opacity: 0.7; }
.photo__label { font-size: 0.9rem; font-style: italic; max-width: 34ch; line-height: 1.55; }
.photo--tall { aspect-ratio: 3 / 4; }
.photo--wide { aspect-ratio: 16 / 9; }

/* ---------- Chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--surface); border: 1px solid var(--border-strong);
  color: var(--ink); padding: 8px 14px; border-radius: 999px; font-size: 0.88rem; font-weight: 600;
}
.chip svg { width: 14px; height: 14px; color: var(--ember-ink); }
.chip--tbc { background: var(--ember-tint); border-style: dashed; border-color: var(--ember); color: var(--ember-ink); font-style: italic; }

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; counter-reset: step; }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }
/* The numeral carries this module. At 0.92rem it was a footnote; at this size it
   reads as a deliberate piece of typesetting, which is most of the difference
   between "designed" and "assembled from a kit". */
.steps li { position: relative; padding-top: 14px; border-top: 2px solid var(--ember); }
.steps li::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  display: block; margin-bottom: 6px;
  font-family: var(--font-head); font-weight: 700; font-size: 2.1rem; line-height: 1;
  color: var(--ember-ink); opacity: 0.9; letter-spacing: -0.02em;
}
.steps h3 { font-size: 1.05rem; margin-bottom: 6px; }
.steps p { color: var(--ink-soft); font-size: 0.94rem; }

/* ---------- Price list ---------- */
.pricelist { display: grid; gap: 0; max-width: 720px; }
.pricelist div { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 18px; padding: 16px 0; border-bottom: 1px solid var(--border); }
.pricelist dt { font-weight: 700; }
.pricelist dd { margin: 0; color: var(--ember-ink); font-weight: 700; }
.pricelist .note { color: var(--ink-faint); font-size: 0.88rem; width: 100%; }

/* ---------- Spec table ---------- */
.spec { display: grid; gap: 0; max-width: 760px; }
.spec div { display: grid; grid-template-columns: 210px 1fr; gap: 6px 24px; padding: 15px 0; border-bottom: 1px solid var(--border); }
@media (max-width: 620px) { .spec div { grid-template-columns: 1fr; } }
.spec dt { font-weight: 700; font-size: 0.95rem; }
.spec dd { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }

/* ---------- Quote / testimonial ---------- */
.quote { border-left: 3px solid var(--ember); padding-left: 22px; }
.quote p { font-family: var(--font-head); font-size: clamp(1.15rem, 1rem + 0.8vw, 1.5rem); line-height: 1.45; }
.quote footer { color: var(--ink-faint); font-size: 0.92rem; margin-top: 14px; }

/* ---------- CTA band ---------- */
.cta-band {
  background: var(--coal); border-radius: var(--radius); padding: clamp(34px, 5vw, 58px);
  text-align: center; color: var(--paper); position: relative; overflow: hidden;
  border-top: 3px solid var(--ember);
}
.cta-band::before {
  content: ""; position: absolute; inset: 0;
  background:
    /* A fine hatch over the flat coal. Two per cent, purely tactile — enough to
       stop the panel reading as a plain filled rectangle. */
    repeating-linear-gradient(45deg, rgba(247, 243, 238, 0.022) 0 2px, transparent 2px 5px),
    radial-gradient(560px 260px at 50% 0%, rgba(228, 87, 27, 0.26), transparent 66%);
}
.cta-band > * { position: relative; }
.cta-band h2 { font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.1rem); color: var(--paper); }
.cta-band p { color: #C4B8AE; max-width: 52ch; margin: 14px auto 26px; }
.cta-band .btn-row { justify-content: center; }

/* ---------- Footer ---------- */
.site-footer {
  background:
    repeating-linear-gradient(45deg, rgba(247, 243, 238, 0.022) 0 2px, transparent 2px 5px),
    var(--coal-deep);
  color: var(--paper); padding-block: 52px 26px;
  border-top: 3px solid var(--ember);
}
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 34px; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; gap: 26px; } }
.footer-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; color: var(--paper); }
.footer-brand svg { width: 32px; height: 32px; color: var(--ember-light); flex: none; }
.footer-brand .wordmark { font-family: var(--font-head); font-weight: 600; font-size: 1.1rem; }
.site-footer .blurb { color: #B5A79C; font-size: 0.93rem; max-width: 34ch; }
.footer-col h4 { font-size: 0.76rem; letter-spacing: 0.15em; text-transform: uppercase; color: #9C8D82; margin-bottom: 10px; font-family: var(--font-body); font-weight: 700; }
.footer-col ul { display: grid; gap: 1px; }
.footer-col a, .footer-col span { display: inline-block; padding-block: 8px; color: var(--paper); font-size: 0.94rem; }
.footer-col a:hover { color: var(--ember-light); }
.site-footer .tbc { background: rgba(228, 87, 27, 0.2); color: var(--ember-light); border-bottom-color: var(--ember-light); }
.footer-bottom {
  margin-top: 36px; padding-top: 20px; border-top: 1px solid rgba(247, 243, 238, 0.14);
  display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; align-items: center;
  color: #9C8D82; font-size: 0.85rem;
}

/* The unaffiliated notice. This site carries a real company's name, address
   and phone number, none of which were given to us. It must say plainly, on
   every page, that Gas Fire Heat did not make it and has not endorsed it.
   Do not remove this while the site is reachable. */
.demo-note {
  background: #100D0C; color: #B5A79C; font-size: 0.82rem; text-align: center;
  padding: 13px 20px; border-top: 1px solid rgba(247, 243, 238, 0.1);
}
.demo-note strong { color: var(--ember-light); }
.demo-note a { color: var(--ember-light); text-decoration: underline; }
.demo-note p { max-width: 78ch; margin-inline: auto; }
.demo-note p + p { margin-top: 7px; }
.demo-note .tbc { background: rgba(228, 87, 27, 0.2); color: var(--ember-light); border-bottom-color: var(--ember-light); }

/* ---------- Reveal ---------- */
.js-reveal .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.55s var(--ease), transform 0.55s var(--ease); }
.js-reveal .reveal.is-visible { opacity: 1; transform: none; }
.js-reveal .reveal[data-delay="1"] { transition-delay: 0.07s; }
.js-reveal .reveal[data-delay="2"] { transition-delay: 0.14s; }
.js-reveal .reveal[data-delay="3"] { transition-delay: 0.21s; }

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

/* SAFETY NET. An inline SVG with no width from CSS or markup falls back to the
   browser default of 300x150. :where() gives this zero specificity, so every
   real rule still wins; it only catches anything that would otherwise be
   unsized. */
svg:where(:not([width])) { width: 1.15em; height: 1.15em; }