/* ==========================================================================
   Fourteen Mile Heating & Cooling — concept demo (built 2026-08-05)
   System:  Season-Band. The year is the spine, and the destination is the
            twice-yearly plan. Entered at the current month.
   Palette: the data. Cool neutral ground, with heat and cold carried by the
            temperature curve itself rather than by decoration. Deliberately
            light and horizontal, against Metro Drain's dark vertical descent.
   Type:    Chivo 900 display + Literata body. Two families, two foundries,
            paired across the sans/serif contrast axis.
   ========================================================================== */

@font-face {
  font-family: 'Chivo';
  src: url('assets/fonts/chivo-latin-wght-normal.woff2') format('woff2');
  font-weight: 300 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Literata';
  src: url('assets/fonts/literata-latin-wght-normal.woff2') format('woff2');
  font-weight: 300 700; font-style: normal; font-display: swap;
}

:root {
  --paper:    oklch(0.968 0.004 250);
  --paper-2:  oklch(0.930 0.006 252);
  --paper-3:  oklch(0.895 0.008 252);
  --line:     oklch(0.855 0.008 255);

  --ink:      oklch(0.205 0.014 255);
  --ink-2:    oklch(0.415 0.013 255);
  --ink-3:    oklch(0.515 0.012 255);

  --cold:     oklch(0.495 0.155 252);
  --cold-air: oklch(0.945 0.020 252);
  --heat:     oklch(0.500 0.180 30);
  --heat-air: oklch(0.948 0.022 28);

  --s--1: clamp(0.82rem, 0.80rem + 0.10vw, 0.88rem);
  --s-0:  clamp(1.02rem, 0.99rem + 0.16vw, 1.10rem);
  --s-1:  clamp(1.28rem, 1.20rem + 0.36vw, 1.48rem);
  --s-2:  clamp(1.60rem, 1.44rem + 0.74vw, 2.00rem);
  --s-3:  clamp(2.05rem, 1.75rem + 1.45vw, 2.80rem);
  --s-4:  clamp(2.70rem, 2.05rem + 3.10vw, 4.30rem);

  --wrap: 1200px;
  --gut: clamp(1.25rem, 4vw, 3rem);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Literata', Georgia, serif;
  font-size: var(--s-0);
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
}
svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 {
  font-family: 'Chivo', system-ui, sans-serif;
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.028em;
  text-wrap: balance;
}
p { text-wrap: pretty; }

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

.skip { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--ink); color: var(--paper); padding: 0.75rem 1.25rem; }
.skip:focus { left: 0; }
:where(a, button):focus-visible { outline: 3px solid var(--cold); outline-offset: 3px; }

/* ---------- head ---------- */
.head {
  position: sticky; top: 0; z-index: 60;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.head-in { display: flex; align-items: center; gap: 1.5rem; min-height: 70px; }
.mark { margin-right: auto; display: grid; text-decoration: none; padding: 0.5rem 0; }
.mark-n { font-family: 'Chivo', sans-serif; font-weight: 900; font-size: 1.22rem; letter-spacing: -0.03em; line-height: 1; }
.mark-s { font-family: 'Chivo', sans-serif; font-size: 0.72rem; font-weight: 500; color: var(--ink-3); margin-top: 0.3rem; letter-spacing: 0.01em; }
.nav { display: none; gap: 1.75rem; }
.nav a { font-family: 'Chivo', sans-serif; font-size: 0.88rem; font-weight: 600; color: var(--ink-2); text-decoration: none; padding: 0.6rem 0; }
.nav a:hover { color: var(--cold); }
.head-call {
  display: none;
  font-family: 'Chivo', sans-serif; font-weight: 700; font-size: 0.98rem;
  background: var(--ink); color: var(--paper);
  padding: 0.6rem 1.1rem; text-decoration: none;
  border-radius: 2px;
}
/* Hover darkens the base. It never swaps hue.
   This used to go to var(--cold), which meant hovering the call button on a
   no-heat emergency page turned it blue — the wrong signal on the one action
   the page exists to get, on a business whose whole product is heat. */
.head-call:hover { background: oklch(0.14 0.014 255); }
@media (min-width: 900px) { .nav, .head-call { display: flex; } }

/* ---------- hero ---------- */
.hero { padding-block: clamp(3rem, 8vw, 6rem) clamp(3rem, 7vw, 5rem); }
h1 { font-size: var(--s-4); max-width: 17ch; }
.hero-sub {
  margin-top: clamp(1.5rem, 3vw, 2rem);
  max-width: 62ch; font-size: clamp(1.06rem, 1rem + 0.3vw, 1.24rem);
  color: var(--ink-2);
}

/* ---------- the chart ---------- */
.chart-fig { margin-top: clamp(2.5rem, 6vw, 4.5rem); }
.chart {
  width: 100%; height: auto;
  border: 1px solid var(--line);
  background: var(--paper);
}
.zone-cool-air { fill: var(--heat-air); }
.zone-heat-air { fill: var(--cold-air); }
.ref { stroke-width: 1.5; }
.ref-set { stroke: var(--heat); stroke-dasharray: 7 6; }
.ref-freeze { stroke: var(--cold); stroke-dasharray: 3 6; }
.ref-lab { font-family: 'Chivo', sans-serif; font-size: 15px; font-weight: 600; }
.ref-lab-set { fill: var(--heat); }
.ref-lab-freeze { fill: var(--cold); }
.curve { fill: none; stroke: var(--ink); stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; }
.dots circle { fill: var(--ink); }
.months text { font-family: 'Chivo', sans-serif; font-size: 17px; font-weight: 600; fill: var(--ink-2); text-anchor: middle; }
.now line { stroke: var(--heat); stroke-width: 2; }
.now circle { fill: var(--heat); stroke: var(--paper); stroke-width: 3; }
/* The chart scales with the viewport, so its type has to scale against it.
   At 375px the 1200-unit viewBox renders at roughly 0.29x, which puts a 17px
   label under 5px on the device. These are the sizes that keep it legible on
   a phone, which is where a furnace emergency actually gets looked up. */
@media (max-width: 700px) {
  .months text { font-size: 42px; }
  .ref-lab { font-size: 36px; }
  .curve { stroke-width: 8; }
  .now line { stroke-width: 5; }
}

.chart-fig figcaption {
  margin-top: 0.9rem; font-family: 'Chivo', sans-serif;
  font-size: var(--s--1); color: var(--ink-3);
}
.now-cap { color: var(--heat); font-weight: 700; }

.hero-do { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: clamp(2rem, 4vw, 2.75rem); }
.btn {
  display: inline-block; font-family: 'Chivo', sans-serif; font-weight: 700;
  background: var(--ink); color: var(--paper);
  padding: 0.95rem 1.6rem; text-decoration: none; border-radius: 2px;
  font-size: 1.02rem;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}
.btn:hover { background: oklch(0.14 0.014 255); transform: translateY(-2px); }
.btn-block { display: block; text-align: center; margin-top: 1.75rem; }
.btn-2 {
  display: inline-block; font-family: 'Chivo', sans-serif; font-weight: 700;
  border: 1.5px solid var(--ink); color: var(--ink);
  padding: 0.95rem 1.6rem; text-decoration: none; border-radius: 2px;
  font-size: 1.02rem;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.btn-2:hover { border-color: oklch(0.14 0.014 255); color: oklch(0.14 0.014 255); }

/* ---------- the year ---------- */
.year { padding-block: clamp(3rem, 7vw, 5rem) 0; border-top: 1px solid var(--line); }
.year h2 { font-size: var(--s-3); }
.lede { margin-top: 1.25rem; max-width: 60ch; color: var(--ink-2); }

.seasons { list-style: none; padding: 0; margin-top: clamp(2.5rem, 6vw, 4rem); }
.season { border-top: 1px solid var(--line); }
.season:last-child { border-bottom: 1px solid var(--line); }
.season-in { display: grid; gap: clamp(1rem, 3vw, 3rem); padding-block: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 900px) { .season-in { grid-template-columns: 14rem minmax(0, 1fr); } }

/* The season colour is carried by the name and by a horizontal temperature
   bar under it. Not a left stripe: a vertical accent rule beside a list item
   is decoration wearing the costume of structure. */
.season-key { --accent: var(--ink-3); }
.s-winter .season-key { --accent: var(--cold); }
.s-spring .season-key { --accent: oklch(0.48 0.110 200); }
.s-summer .season-key { --accent: var(--heat); }
.s-fall   .season-key { --accent: oklch(0.47 0.125 60); }

.season-name {
  font-family: 'Chivo', sans-serif; font-weight: 900; font-size: 1.5rem;
  letter-spacing: -0.03em; line-height: 1.1;
  color: var(--accent);
}
.season-key::after {
  content: ""; display: block; height: 4px; width: 3.5rem;
  background: var(--accent); margin: 0.95rem 0 0;
}
.season-range, .season-temp { font-family: 'Chivo', sans-serif; font-size: 0.88rem; color: var(--ink-3); line-height: 1.5; }

.season-body { max-width: 64ch; }
.season-body h3 { font-size: var(--s-2); }
.season-body p { margin-top: 1rem; color: var(--ink-2); }
.season-fail {
  margin-top: 1.5rem !important; padding-top: 1rem;
  border-top: 1px solid var(--line);
  color: var(--ink) !important;
}
.season-fail span {
  display: block; font-family: 'Chivo', sans-serif; font-weight: 700;
  font-size: 0.72rem; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 0.35rem;
}

/* ---------- the plan ---------- */
.plan { padding-block: clamp(3.5rem, 8vw, 6rem); }
.plan-in { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; }
@media (min-width: 950px) { .plan-in { grid-template-columns: 1.05fr 0.95fr; } }
.plan-copy h2 { font-size: var(--s-3); }
.plan-copy p { margin-top: 1.25rem; max-width: 56ch; color: var(--ink-2); }

.plan-card { background: var(--ink); color: var(--paper); padding: clamp(1.75rem, 4vw, 2.75rem); border-radius: 3px; }
.plan-label { font-family: 'Chivo', sans-serif; font-weight: 700; font-size: 0.75rem; letter-spacing: 0.09em; text-transform: uppercase; color: oklch(0.78 0.02 255); }
.plan-price { margin-top: 0.75rem; display: flex; align-items: baseline; gap: 0.6rem; }
.plan-amt { font-family: 'Chivo', sans-serif; font-weight: 900; font-size: clamp(3rem, 6vw, 4rem); line-height: 1; letter-spacing: -0.04em; }
.plan-per { font-family: 'Chivo', sans-serif; font-size: 1rem; color: oklch(0.80 0.02 255); }
.plan-list { list-style: none; padding: 0; margin-top: 1.75rem; }
.plan-list li { padding: 0.7rem 0 0.7rem 1.75rem; border-top: 1px solid oklch(0.35 0.014 255); position: relative; font-size: 0.98rem; }
.plan-list li::before { content: ""; position: absolute; left: 0; top: 1.35em; width: 0.75rem; height: 2px; background: oklch(0.80 0.06 200); }
.plan-card .btn { background: var(--paper); color: var(--ink); }
/* Inverted button on the dark plan card: paper ground, ink text. Same rule,
   applied the only way it can be here — the base darkens rather than tinting. */
.plan-card .btn:hover { background: oklch(0.86 0.004 250); }
.plan-fine { margin-top: 1rem; font-family: 'Chivo', sans-serif; font-size: 0.8rem; color: oklch(0.78 0.02 255); text-align: center; }

/* ---------- emergency ---------- */
.emergency { background: var(--paper-2); border-block: 1px solid var(--line); padding-block: clamp(3.5rem, 8vw, 6rem); }
.em-in { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (min-width: 950px) { .em-in { grid-template-columns: 1.15fr 0.85fr; } }
.emergency h2 { font-size: var(--s-3); max-width: 18ch; }
.emergency > .wrap > div > p { margin-top: 1.25rem; max-width: 56ch; color: var(--ink-2); }
.em-list { list-style: none; padding: 0; margin-top: 1.75rem; max-width: 56ch; }
.em-list li { display: grid; grid-template-columns: 2rem 1fr; gap: 0.75rem; padding: 0.85rem 0; border-top: 1px solid var(--line); }
.em-list span { font-family: 'Chivo', sans-serif; font-weight: 900; color: var(--heat); }
.em-note { margin-top: 1.5rem; color: var(--ink-2); max-width: 56ch; }

.em-call {
  display: grid; gap: 0.35rem; text-decoration: none;
  background: var(--heat); color: oklch(0.99 0 0);
  padding: clamp(1.5rem, 4vw, 2.25rem); border-radius: 3px;
  transition: background 0.25s var(--ease);
}
.em-call:hover { background: oklch(0.42 0.165 30); }
.em-call-l { font-family: 'Chivo', sans-serif; font-weight: 700; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; }
.em-call-n { font-family: 'Chivo', sans-serif; font-weight: 900; font-size: clamp(1.6rem, 3.5vw, 2.2rem); letter-spacing: -0.03em; line-height: 1.1; }
.em-call-h { font-family: 'Chivo', sans-serif; font-size: 0.85rem; margin-top: 0.5rem; line-height: 1.5; }

/* ---------- proof ---------- */
.proof { padding-block: clamp(3.5rem, 8vw, 6rem); }
.proof h2 { font-size: var(--s-3); margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.quotes { display: grid; gap: 2.5rem; }
@media (min-width: 850px) { .quotes { grid-template-columns: repeat(3, 1fr); gap: 3rem; } }
.quotes blockquote p { color: var(--ink); }

/* ---------- Google reviews block ----------
   Shaped like the real thing on purpose. The demo's job here is to show the
   prospect that their ACTUAL Google reviews can render on their own site, so it
   has to read as a live feed rather than as hand-typed testimonials.
   Stars are aria-hidden SVG with sr-only text beside them: a ★ glyph is text,
   and gold text on paper cannot reach 4.5:1 — that exact pairing is what failed
   royal-oak-plumbing's audit. Drawn, not typed, so contrast never applies. */
.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;
}
.gr-head {
  display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap;
  margin-top: -1.5rem; margin-bottom: clamp(2rem, 4vw, 2.75rem);
  padding-bottom: 1.25rem; border-bottom: 1px solid var(--line);
}
.gr-logo { flex: none; }
.gr-score { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin: 0; }
.gr-score strong {
  font-family: 'Chivo', sans-serif; font-weight: 900; font-size: 1.35rem;
  color: var(--ink); line-height: 1;
}
.gr-stars { display: inline-flex; gap: 1px; line-height: 0; }
.gr-stars svg { fill: #E8A317; }          /* darker than Google's #FBBC04 — this one sits on paper */
.gr-count { font-family: 'Chivo', sans-serif; font-size: 0.85rem; color: var(--ink-2); }

.gr-card {
  border: 1px solid var(--line); border-radius: 6px;
  padding: clamp(1.15rem, 2.5vw, 1.5rem);
  background: var(--paper); display: grid; gap: 0.9rem; align-content: start;
}
.gr-who { display: flex; align-items: center; gap: 0.7rem; }
.gr-av {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: 'Chivo', sans-serif; font-weight: 700; font-size: 1.05rem;
  color: oklch(0.99 0 0);
}
/* Deliberately dark enough for white at 4.5:1. Google's own avatar palette is
   lighter and would fail, so these are its hues at a compliant lightness. */
.gr-av-1 { background: oklch(0.50 0.14 25); }
.gr-av-2 { background: oklch(0.48 0.12 265); }
.gr-av-3 { background: oklch(0.47 0.10 160); }
.gr-meta { display: grid; gap: 0.15rem; min-width: 0; }
.gr-meta b { font-family: 'Chivo', sans-serif; font-weight: 700; font-size: 0.92rem; color: var(--ink); }
.gr-when { font-family: 'Chivo', sans-serif; font-size: 0.78rem; color: var(--ink-2); }
.gr-card blockquote { margin: 0; }
.gr-card blockquote p { font-size: 0.97rem; line-height: 1.6; }

/* ---------- foot ---------- */
.foot { background: var(--paper-3); padding-block: clamp(3rem, 6vw, 4.5rem) 7rem; }
.foot-in { display: grid; gap: 2.5rem; }
@media (min-width: 850px) { .foot-in { grid-template-columns: 20rem 1fr; gap: 4rem; } }
.foot-name { font-family: 'Chivo', sans-serif; font-weight: 900; font-size: 1.3rem; letter-spacing: -0.03em; }
.foot address { font-style: normal; margin-top: 0.85rem; font-family: 'Chivo', sans-serif; font-size: 0.92rem; line-height: 1.85; color: var(--ink-2); }
/* The footer ground is --paper-3, darker than the page. --cold and --ink-3
   both clear 4.5:1 on --paper and both miss it here (4.50 and 4.12). These
   two are the footer's own values, not the page's. */
.foot address a { color: oklch(0.425 0.150 252); }
.foot-meta p { color: var(--ink-2); max-width: 62ch; font-size: 0.95rem; }
.foot-fine { margin-top: 1.25rem; color: oklch(0.435 0.012 255) !important; font-size: 0.86rem !important; }

/* sticky call, phones only */
.call-rail {
  position: fixed; z-index: 70; left: 0; right: 0; bottom: 0;
  background: var(--ink); color: var(--paper);
  font-family: 'Chivo', sans-serif; font-weight: 700; font-size: 1.05rem;
  text-align: center; padding: 1rem; text-decoration: none;
}
.call-rail span { font-weight: 500; font-size: 0.78rem; letter-spacing: 0.09em; text-transform: uppercase; margin-right: 0.5rem; }
@media (min-width: 900px) { .call-rail { display: none; } }

/* ==========================================================================
   MOTION — the seasons settle in as they arrive. Transform only, text never
   drops below opacity 1, and the untransformed state is the readable one, so
   a headless render or a script-blocked browser sees the finished page.
   ========================================================================== */
@media (min-width: 900px) {
  .js .season-body, .js .season-key { transition: transform 0.65s var(--ease); }
  .js .season:not(.is-in) .season-body { transform: translateY(12px); }
  .js .season:not(.is-in) .season-key { transform: translateY(18px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .js .season:not(.is-in) .season-body,
  .js .season:not(.is-in) .season-key { transform: none; }
}