/* =========================================================
   Ridgeline Design System — Colors & Typography
   Source: Ridgeline Brand Guidelines 2026 Edition
   ========================================================= */

/* Google Fonts substitutes -------------------------------------------------
   The brand spec calls for "Founders Grotesk" (display) and "DIN Pro" (body).
   Neither is on Google Fonts. The brand book explicitly names Inter as the
   digital-first fallback, and nominates Space Grotesk as a recommended
   future display face. We use those as substitutes; see README.md > Caveats.
   -------------------------------------------------------------------------- */
/* Substitutes chosen for closer metrics to Founders Grotesk and DIN Pro:
   - Wix Madefor Display: neo-grotesque, warm, architectural  — closer to Founders than Space Grotesk.
   - IBM Plex Sans: geometric, industrial, disciplined — closer to DIN Pro than Inter.
   - Inter retained for social/ad display (brand book's own approved fallback). */
@import url('https://fonts.googleapis.com/css2?family=Wix+Madefor+Display:wght@400;500;600;700;800&family=IBM+Plex+Sans:wght@300;400;500;600;700&family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
  /* ---------- Brand colors ---------- */
  --rl-teal:        #008DA2;   /* Ridgeline Teal — logo accent, CTAs, active states */
  --rl-teal-hover:  #007A8C;   /* Darker hover state */
  --rl-teal-press:  #006675;   /* Deeper press state */
  --rl-teal-tint:   #E6F4F6;   /* 10% tint for quiet backgrounds */
  --rl-black:       #0A0A0A;   /* Ridgeline Black — body, headlines on white */
  --rl-white:       #FFFFFF;   /* Ridgeline White — page, card, negative space */

  /* ---------- Neutrals (derived, for UI surfaces only) ---------- */
  --rl-ink-900: #0A0A0A;       /* Primary text on light bg */
  --rl-ink-700: #2A2A2A;       /* Strong text, secondary headings */
  --rl-ink-500: #555555;       /* Body support, captions */
  --rl-ink-300: #9A9A9A;       /* Disabled, meta */
  --rl-line-200: #E5E5E5;      /* Borders, dividers */
  --rl-line-100: #F2F2F2;      /* Card borders on white */
  --rl-surface-50: #FAFAFA;    /* Subtle alt surface */

  /* ---------- Foreground / background semantic ---------- */
  --fg-primary:    var(--rl-ink-900);
  --fg-secondary:  var(--rl-ink-500);
  --fg-muted:      var(--rl-ink-300);
  --fg-accent:     var(--rl-teal);
  --fg-on-dark:    var(--rl-white);
  --fg-on-teal:    var(--rl-white);

  --bg-base:       var(--rl-white);
  --bg-alt:        var(--rl-surface-50);
  --bg-dark:       var(--rl-black);
  --bg-accent:     var(--rl-teal);

  --border-strong: var(--rl-ink-900);
  --border-default: var(--rl-line-200);
  --border-subtle: var(--rl-line-100);

  /* ---------- Typography families ---------- */
  /* Display: substitute for Founders Grotesk */
  --font-display: 'Wix Madefor Display', 'Founders Grotesk', 'Helvetica Neue', Arial, sans-serif;
  /* Body: substitute for DIN Pro (geometric-industrial, closer to DIN than Inter) */
  --font-body:    'IBM Plex Sans', 'DIN Pro', 'Helvetica Neue', Arial, sans-serif;
  /* Social/advertising display — brand book approves Inter Black for ad heroes */
  --font-impact:  'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---------- Type scale (from brand book, page 05) ---------- */
  --fs-h1: 38px;        --lh-h1: 1.1;   --lt-h1: 1.2px;   --fw-h1: 800;
  --fs-h2: 26px;        --lh-h2: 1.2;   --lt-h2: 0.5px;   --fw-h2: 700;
  --fs-h3: 18px;        --lh-h3: 1.35;  --lt-h3: 0px;     --fw-h3: 600;
  --fs-body: 14px;      --lh-body: 1.6; --lt-body: 0px;   --fw-body: 400;
  --fs-caption: 11px;   --lh-caption: 1.45; --lt-caption: 0.2px; --fw-caption: 400;

  /* Display / hero (social & advertising, page 05b) */
  --fs-display-hero: 72px;  --lt-display-hero: 3px;   --fw-display-hero: 900;
  --fs-display-soc:  48px;  --lt-display-soc:  2px;   --fw-display-soc:  800;

  /* ---------- Spacing (8-pt grid) ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ---------- Radii ---------- */
  /* Ridgeline leans premium/architectural — radii are restrained. */
  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-pill: 999px;

  /* ---------- Elevation / shadows ---------- */
  --shadow-sm: 0 1px 2px rgba(10,10,10,0.06);
  --shadow-md: 0 4px 12px rgba(10,10,10,0.08);
  --shadow-lg: 0 12px 32px rgba(10,10,10,0.10);
  --shadow-focus: 0 0 0 3px rgba(0,141,162,0.28);

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(.2,.7,.2,1);
  --ease-emphasis: cubic-bezier(.2,.9,.1,1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   360ms;
}

/* =========================================================
   Base element styles — use with .rl-type scope or globally
   ========================================================= */
html { -webkit-text-size-adjust: 100%; }
body {
  color: var(--fg-primary);
  background: var(--bg-base);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-feature-settings: 'ss01','cv11';
}

h1, .rl-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--lt-h1);
  color: inherit;
  margin: 0;
}
h2, .rl-h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--lt-h2);
  color: inherit;
  margin: 0;
}
h3, .rl-h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-h3);
  line-height: var(--lh-h3);
  color: inherit;
  margin: 0;
}
p, .rl-body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: inherit;
  margin: 0;
}
small, .rl-caption {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  letter-spacing: var(--lt-caption);
  color: var(--fg-secondary);
}

/* Display treatments — ALL CAPS, tight tracking, per brand guidance */
.rl-display-hero {
  font-family: var(--font-impact);
  font-size: var(--fs-display-hero);
  font-weight: var(--fw-display-hero);
  letter-spacing: var(--lt-display-hero);
  line-height: 0.95;
  text-transform: uppercase;
}
.rl-display-social {
  font-family: var(--font-impact);
  font-size: var(--fs-display-soc);
  font-weight: var(--fw-display-soc);
  letter-spacing: var(--lt-display-soc);
  line-height: 1.05;
}

/* Eyebrow / section label — observed usage in brand book: tracked caps */
.rl-eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--fg-accent);
}

/* Utility color helpers */
.rl-text-teal { color: var(--rl-teal); }
.rl-text-muted { color: var(--fg-secondary); }
.rl-bg-teal { background: var(--rl-teal); color: var(--fg-on-teal); }
.rl-bg-black { background: var(--rl-black); color: var(--fg-on-dark); }

/* =========================================================
   Focus ring — teal, accessible
   ========================================================= */
:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
:root {
  --ink: #0b1012;
  --muted: #5d666a;
  --line: #d8e1e3;
  --soft: #f5f7f7;
  --teal: #087f91;
  --teal-2: #0a96a9;
  --max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  font-family: Inter, Arial, Helvetica, sans-serif;
  line-height: 1.42;
  background: #fff;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
h1,h2,h3,p { margin-top: 0; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: 250px minmax(520px, 1fr) 190px;
  align-items: center;
  min-height: 72px;
  padding: 0 40px;
  border-bottom: 1px solid rgba(11,16,18,.12);
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(16px);
}
.brand img { width: 174px; }
.primary-nav {
  display: flex;
  justify-content: center;
  gap: 42px;
  font-size: 15px;
}
.primary-nav a { text-decoration: none; }
.primary-nav a:nth-child(1)::after,
.primary-nav a:nth-child(2)::after,
.primary-nav a:nth-child(3)::after {
  content: " v";
  font-size: 12px;
}
.menu-toggle { display: none; }
.header-cta,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  border-radius: 4px;
  padding: 0 24px;
  font-size: 15px;
  font-weight: 850;
  text-decoration: none;
}
.header-cta,
.button-primary {
  background: linear-gradient(135deg, var(--teal), var(--teal-2));
  color: #fff;
  box-shadow: 0 16px 34px rgba(8,127,145,.14);
}
.button-secondary {
  border: 1px solid var(--teal);
  background: rgba(255,255,255,.8);
  color: var(--teal);
}

.hero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto;
  min-height: calc(100vh - 72px);
  max-height: 760px;
  padding: 0;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  background: #fff;
}
.hero-copy {
  position: relative;
  z-index: 3;
  align-self: center;
  width: min(520px, 43vw);
  max-width: 520px;
  margin-left: 64px;
  padding-top: 18px;
}
.hero-tabs {
  display: flex;
  gap: 18px;
  margin-bottom: 32px;
}
.hero-tab {
  min-width: 0;
  border: 0;
  border-bottom: 2px solid transparent;
  border-left: 1px solid #c7d2d5;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  text-align: left;
  padding: 0 0 10px 18px;
}
.hero-tab:focus { outline: 0; }
.hero-tab:first-child {
  border-left: 0;
  padding-left: 0;
}
.hero-tab.is-active {
  color: var(--ink);
  border-bottom-color: var(--teal);
}
.hero-tab:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 4px;
}
.eyebrow,
.pathway-kicker { display: none; }
h1 {
  margin: 0 0 24px;
  font-size: clamp(76px, 6.5vw, 112px);
  font-weight: 900;
  line-height: .92;
  letter-spacing: 0;
}
.teal-dot,
.teal-text { color: var(--teal); }
.hero-lede,
.hero-note {
  max-width: 520px;
  color: #121719;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.42;
}
.hero-lede { margin-bottom: 18px; }
.hero-note { margin-bottom: 30px; }
.hero-actions {
  display: flex;
  gap: 18px;
}
.hero-actions .button { min-width: 190px; }
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.hero-image-wrap {
  position: absolute;
  inset: 0;
  display: grid;
  align-items: center;
  margin: 0;
  transition: opacity .28s ease, transform .28s ease;
}
.hero-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-image-wrap[data-slide-image="speed"] img {
  transform: none;
  object-position: center center;
}
.hero-image-wrap[data-slide-image="system"] {
  padding: 0;
  background: #fff;
}
.hero-image-wrap[data-slide-image="system"] img {
  object-fit: contain;
  object-position: 82% center;
  padding: 26px 38px 78px 460px;
}
.hero-image-wrap[data-slide-image="heatpump"] {
  padding: 0;
  background: #f7f7f4;
}
.hero-image-wrap[data-slide-image="heatpump"] img {
  object-fit: cover;
  object-position: center center;
}
.hero-image-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.94) 27%, rgba(255,255,255,.36) 48%, rgba(255,255,255,0) 70%);
}
.hero-image-wrap[data-slide-image="system"]::after {
  background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.96) 31%, rgba(255,255,255,.2) 50%, rgba(255,255,255,0) 72%);
}
.hero-image-wrap[data-slide-image="heatpump"]::after {
  background: linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.94) 31%, rgba(255,255,255,.46) 48%, rgba(255,255,255,0) 66%);
}
.is-hidden {
  pointer-events: none;
  position: absolute;
  visibility: hidden;
  opacity: 0;
  transform: translateX(14px);
}
.hero-panel { position: relative; }
.hero-panel.is-hidden { position: absolute; }
.spec-rail {
  grid-column: 1 / -1;
  z-index: 4;
  display: flex;
  align-items: center;
  min-height: 64px;
  border-top: 1px solid #ccd6d9;
  border-bottom: 1px solid #ccd6d9;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(12px);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.spec-rail span {
  position: relative;
  flex: 1;
  padding: 20px 18px;
  text-align: center;
}
.spec-rail span:not(:last-child)::after {
  content: "/";
  position: absolute;
  right: -3px;
  top: 50%;
  color: var(--teal);
  font-size: 20px;
  font-weight: 300;
  transform: translateY(-50%);
}

.section { padding: 38px 42px; }
.section-heading,
.pathway-list,
.application-layout,
.proof-grid,
.support-list,
.technical-copy,
.sample-copy { max-width: var(--max); margin: 0 auto; }
.section-heading { margin-bottom: 24px; }
.section-heading h2,
.technical-copy h2,
.heat-pump-copy h2,
.sample-copy h2 {
  margin-bottom: 18px;
  font-size: clamp(34px, 3vw, 48px);
  line-height: 1.02;
  letter-spacing: 0;
}
.section-heading p:not(.eyebrow),
.heat-pump-copy p,
.sample-copy p {
  max-width: 720px;
  color: var(--muted);
  font-size: 17px;
}

.systems {
  display: grid;
  grid-template-columns: minmax(250px,.45fr) minmax(820px,1.55fr);
  gap: 36px;
  align-items: start;
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.systems .section-heading,
.systems .pathway-list {
  max-width: none;
  margin: 0;
}
.systems .section-heading h2 {
  max-width: 280px;
  margin-bottom: 22px;
}
.systems .section-heading h2::after,
.pathway h3::after {
  content: "";
  display: block;
  width: 54px;
  height: 2px;
  margin-top: 14px;
  background: var(--teal);
}
.systems .section-heading p {
  max-width: 250px;
  font-size: 15px;
}
.pathway-list {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 34px;
}
.pathway {
  display: grid;
  gap: 20px;
  align-items: start;
  padding-right: 28px;
  border-right: 1px solid var(--line);
}
.pathway:last-child {
  padding-right: 0;
  border-right: 0;
}
.pathway img {
  width: 100%;
  height: 178px;
  object-fit: cover;
  border-radius: 3px;
  background: var(--soft);
}
.pathway h3 {
  margin-bottom: 10px;
  font-size: 26px;
  line-height: 1;
}
.pathway p:not(.pathway-kicker) {
  max-width: 250px;
  margin-bottom: 12px;
  color: #30383b;
  font-size: 15px;
}
.pathway a {
  color: var(--teal);
  font-weight: 850;
  text-decoration: none;
}
.pathway a::after { content: " ->"; }

.applications {
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.applications .section-heading { display: none; }
.application-layout {
  display: grid;
  grid-template-columns: 250px minmax(820px,1fr);
  gap: 28px;
  max-width: 1450px;
  align-items: center;
}
.application-layout::before {
  content: "Where Ridgeline works.";
  max-width: 210px;
  align-self: start;
  padding-top: 26px;
  font-size: 44px;
  font-weight: 900;
  line-height: .98;
}
.house-diagram { margin: 0; }
.house-diagram img {
  width: 100%;
  max-height: 560px;
  object-fit: contain;
}
.house-diagram figcaption,
.application-list { display: none; }

.installer-proof {
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.installer-proof .section-heading p,
.support .section-heading p,
.technical-copy p { display: none; }
.installer-proof .section-heading h2,
.support .section-heading h2 { font-size: 34px; }
.proof-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 32px;
}
.proof-grid img {
  width: 100%;
  height: 172px;
  object-fit: cover;
  border-radius: 3px;
  background: var(--soft);
}
.proof-grid h3 {
  margin: 14px 0 8px;
  font-size: 20px;
  line-height: 1.1;
}
.proof-grid p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 14px;
}

.technical {
  padding-left: 0;
  padding-right: 0;
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.technical-copy h2 {
  max-width: 760px;
  font-size: 36px;
}
.spec-table {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.spec-table div {
  display: grid;
  gap: 12px;
  min-height: 132px;
  padding: 22px 28px;
  border-right: 1px solid var(--line);
}
.spec-table div:last-child { border-right: 0; }
.spec-table span {
  color: var(--teal);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.spec-table strong {
  font-size: 14px;
  line-height: 1.35;
}
.technical-image { display: none; }

.heat-pump {
  display: grid;
  grid-template-columns: minmax(340px,.44fr) minmax(700px,1.56fr);
  gap: 36px;
  align-items: center;
  padding-top: 0;
  padding-bottom: 0;
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.heat-pump-copy {
  order: 1;
  max-width: 520px;
  padding: 48px 0;
}
.heat-pump-copy h2 { font-size: 46px; }
.heat-pump-media {
  order: 2;
  justify-self: stretch;
}
.heat-pump-media img {
  width: 100%;
  max-height: 390px;
  object-fit: cover;
  object-position: 58% center;
}

.support {
  background: #fff;
}
.support-list {
  display: grid;
  gap: 0;
}
.support-list a {
  display: grid;
  grid-template-columns: 210px 1fr 140px;
  gap: 20px;
  min-height: 0;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  text-decoration: none;
}
.support-list span {
  color: var(--ink);
  font-weight: 850;
}
.support-list strong {
  justify-self: end;
  color: var(--teal);
  font-size: 15px;
}
.support-list strong::after { content: " ->"; }
.support-list a::before {
  color: var(--muted);
  font-weight: 400;
}
.support-list a:nth-child(1)::before { content: "Detailed product data and specifications."; }
.support-list a:nth-child(2)::before { content: "Step-by-step guidance for a perfect install."; }
.support-list a:nth-child(3)::before { content: "Information on connectors and compatibility."; }
.support-list a:nth-child(4)::before { content: "Speak to our team for project support."; }

.sample-request {
  max-width: none;
  display: block;
  text-align: center;
  border-top: 1px solid var(--line);
  background: #f3f3f1;
  padding: 34px 42px 42px;
}
.sample-copy p {
  margin-left: auto;
  margin-right: auto;
}
.sample-copy h2 {
  margin-bottom: 8px;
  font-size: 42px;
}
.final-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 22px;
}
.final-actions .button { min-width: 220px; }
.sticky-sample { display: none; }

@media (max-width: 1180px) {
  .site-header {
    grid-template-columns: 170px 1fr 170px;
    padding: 0 28px;
  }
  .brand img { width: 152px; }
  .primary-nav {
    gap: 18px;
    font-size: 14px;
  }
  .header-cta {
    padding: 0 16px;
  }
  .hero {
    grid-template-columns: 1fr;
    min-height: 620px;
    padding: 0;
  }
  .hero-copy {
    width: min(500px, 44vw);
    margin-left: 32px;
  }
  h1 { font-size: clamp(58px, 6vw, 82px); }
  .systems,
  .application-layout,
  .heat-pump { grid-template-columns: 1fr; }
  .systems .section-heading h2,
  .systems .section-heading p { max-width: 720px; }
}

@media (max-width: 900px) {
  .site-header {
    grid-template-columns: 124px 1fr auto;
    min-height: 70px;
    padding: 0 16px;
  }
  .brand img { width: 124px; }
  .primary-nav {
    position: absolute;
    right: 16px;
    top: 76px;
    display: none;
    width: min(280px, calc(100vw - 32px));
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(11,16,18,.12);
  }
  .primary-nav.is-open {
    display: grid;
    gap: 6px;
  }
  .primary-nav a { padding: 10px; font-weight: 850; }
  .primary-nav a::after { content: ""; }
  .menu-toggle {
    position: relative;
    display: block;
    justify-self: center;
    width: 44px;
    height: 44px;
    overflow: hidden;
    border: 0;
    background: transparent;
    color: transparent;
    cursor: pointer;
  }
  .menu-toggle::before,
  .menu-toggle::after {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    height: 2px;
    background: var(--ink);
  }
  .menu-toggle::before { top: 14px; box-shadow: 0 8px 0 var(--ink); }
  .menu-toggle::after { top: 30px; }
  .header-cta {
    min-height: 38px;
    padding: 0 12px;
    font-size: 13px;
  }
  .hero {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 20px 16px 0;
  }
  .hero-copy {
    width: auto;
    margin-left: 0;
    max-width: none;
    padding-top: 0;
  }
  .hero-tabs {
    gap: 18px;
    margin-bottom: 14px;
    overflow-x: auto;
  }
  .hero-tab {
    flex: 0 0 auto;
    min-width: 0;
    font-size: 12px;
    font-weight: 850;
    white-space: nowrap;
  }
  .eyebrow {
    display: block;
    margin: 0 0 12px;
    color: var(--teal);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .07em;
    text-transform: uppercase;
  }
  h1 { font-size: 44px; }
  .hero-lede {
    font-size: 20px;
    font-weight: 800;
  }
  .hero-note { font-size: 17px; }
  .hero-actions {
    display: grid;
    gap: 10px;
  }
  .hero-actions .button,
  .button { width: 100%; }
  .hero-media {
    position: relative;
    inset: auto;
    width: calc(100% + 32px);
    min-height: 280px;
    margin: 18px -16px 0;
  }
  .hero-image-wrap[data-slide-image="speed"] img {
    transform: none;
    object-position: center;
  }
  .hero-image-wrap[data-slide-image="system"] {
    padding: 0;
  }
  .hero-image-wrap[data-slide-image="system"] img {
    padding: 10px 16px;
    object-position: center;
  }
  .hero-image-wrap[data-slide-image="heatpump"] {
    padding-left: 0;
  }
  .hero-image-wrap::after {
    display: none;
  }
  .spec-rail {
    display: grid;
    width: calc(100% + 32px);
    min-height: 0;
    margin: 0 -16px;
    font-size: 12px;
    letter-spacing: 0;
  }
  .spec-rail span {
    padding: 11px 16px;
    text-align: left;
    border-bottom: 1px solid var(--line);
  }
  .spec-rail span::after { display: none; }
  .section { padding: 30px 16px; }
  .section-heading h2,
  .technical-copy h2,
  .heat-pump-copy h2,
  .sample-copy h2 { font-size: 32px; }
  .pathway-list,
  .proof-grid,
  .support-list,
  .spec-table {
    grid-template-columns: 1fr;
  }
  .pathway {
    grid-template-columns: 1fr;
    padding: 0 0 22px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .pathway img,
  .proof-grid img { height: 150px; }
  .application-layout {
    grid-template-columns: 1fr;
  }
  .application-layout::before {
    max-width: none;
    padding: 0;
    font-size: 36px;
  }
  .house-diagram img { max-height: none; }
  .proof-grid { gap: 22px; }
  .spec-table div {
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .heat-pump {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .heat-pump-copy {
    padding: 0;
  }
  .heat-pump-media {
    order: 1;
    margin-bottom: 20px;
  }
  .support-list a {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .support-list strong {
    justify-self: start;
  }
  .final-actions {
    display: grid;
    gap: 12px;
  }
  .final-actions .button { width: 100%; }
}

@media (min-width: 621px) and (max-width: 900px) {
  .hero {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
    min-height: 650px;
    padding: 0;
  }
  .hero-copy {
    position: relative;
    z-index: 3;
    align-self: center;
    width: min(470px, 58vw);
    max-width: 470px;
    margin-left: 32px;
    padding-top: 0;
  }
  .hero-tabs {
    gap: 14px;
    overflow: visible;
  }
  .hero-tab {
    padding-left: 14px;
  }
  .hero-tab:first-child {
    padding-left: 0;
  }
  h1 {
    font-size: clamp(54px, 8vw, 76px);
  }
  .hero-lede {
    font-size: 19px;
  }
  .hero-note {
    font-size: 17px;
  }
  .hero-actions {
    display: flex;
    gap: 14px;
  }
  .hero-actions .button {
    width: auto;
    min-width: 175px;
  }
  .hero-media {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: auto;
    min-height: 0;
    margin: 0;
  }
  .hero-image-wrap[data-slide-image="speed"] img,
  .hero-image-wrap[data-slide-image="heatpump"] img {
    object-fit: cover;
    object-position: center;
  }
  .hero-image-wrap[data-slide-image="system"] img {
    object-fit: contain;
    object-position: 104% center;
    padding: 26px 8px 78px 430px;
  }
  .hero-image-wrap::after {
    display: block;
    background: linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.96) 42%, rgba(255,255,255,.62) 62%, rgba(255,255,255,0) 86%);
  }
  .spec-rail {
    display: flex;
    width: auto;
    min-height: 64px;
    margin: 0;
    font-size: 11px;
    letter-spacing: .04em;
  }
  .spec-rail span {
    padding: 16px 10px;
    text-align: center;
    border-bottom: 0;
  }
}
/* =========================================================
   Ridgeline Brand Overrides
   Sits on top of styles.css. Brand tokens + scoped polish.
   ========================================================= */

/* Re-bind the prototype's local vars to the brand tokens. */
:root {
  --ink:    var(--rl-black);
  --muted:  var(--rl-ink-500);
  --line:   var(--rl-line-200);
  --soft:   var(--rl-surface-50);
  --teal:   var(--rl-teal);
  --teal-2: var(--rl-teal);

  /* Section pacing */
  --sec-compact:   var(--space-8);   /* 64 — tight rows */
  --sec-content:   var(--space-9);   /* 96 — content sections */
  --sec-editorial: var(--space-10);  /* 128 — editorial breaks */
}

/* ---------- Typography ----------------------------------- */
body {
  font-family: var(--font-body);
  font-feature-settings: 'ss01','cv11';
}
.site-header,
.primary-nav,
.spec-rail,
.spec-table span,
.support-list span,
.support-list strong,
.eyebrow,
.pathway-kicker {
  font-family: var(--font-body);
}
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0;
}
.hero-copy h1, .hero-copy h2 {
  font-family: var(--font-impact);
  font-weight: 900;
  letter-spacing: -0.5px;
}

/* ---------- Buttons -------------------------------------- */
.header-cta,
.button {
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: none;
  transition: background var(--dur-base) var(--ease-standard),
              color var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard);
}
.header-cta,
.button-primary {
  background: var(--rl-teal);
  background-image: none;
  box-shadow: none;
  color: var(--rl-white);
}
.header-cta:hover,
.button-primary:hover { background: var(--rl-teal-hover); }
.header-cta:active,
.button-primary:active { background: var(--rl-teal-press); }
.button-secondary {
  background: var(--rl-white);
  border: 1px solid var(--rl-teal);
  color: var(--rl-teal);
}
.button-secondary:hover { background: var(--rl-teal-tint); }

/* ---------- Header --------------------------------------- */
/* Solid white + no backdrop-filter so dark editorial sections scrolling under
   the sticky header don't bleed through behind the Ridgeline logo (v0.2.14). */
.site-header {
  border-bottom: 1px solid var(--border-default);
  background: var(--rl-white) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.primary-nav a { color: var(--rl-ink-700); font-weight: 500; }
.primary-nav a:hover { color: var(--rl-teal); }

/* =========================================================
   HERO — auto-advancing slideshow
   ========================================================= */

/* Progress indicator (replaces the tabs) */
.hero-progress {
  position: absolute;
  top: 24px;
  left: 64px;
  right: 64px;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  pointer-events: none;
}
.hero-progress-segment {
  position: relative;
  display: block;
  height: 2px;
  padding: 14px 0; /* expand hit target */
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}
.hero-progress-segment::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 2px;
  margin-top: -1px;
  background: rgba(10,10,10,0.18);
}
.hero-progress-fill {
  position: absolute;
  left: 0; top: 50%;
  height: 2px;
  margin-top: -1px;
  width: 0;
  background: var(--rl-teal);
  transition: width var(--dur-base) var(--ease-standard);
}
.hero-progress-segment.is-complete .hero-progress-fill {
  width: 100%;
}
.hero-progress-segment.is-active .hero-progress-fill {
  width: var(--progress, 0%);
  /* No transition while advancing — JS drives width directly via CSS var */
  transition: none;
}
.hero-progress-segment:focus-visible {
  outline: none;
}
.hero-progress-segment:focus-visible::before {
  box-shadow: var(--shadow-focus);
}

/* Tighter image gradient — let photography read on the right */
.hero-image-wrap::after {
  background: linear-gradient(90deg,
    rgba(255,255,255,1) 0%,
    rgba(255,255,255,0.96) 35%,
    rgba(255,255,255,0.55) 55%,
    rgba(255,255,255,0) 78%);
}
.hero-image-wrap[data-slide-image="system"]::after {
  background: linear-gradient(90deg,
    rgba(255,255,255,1) 0%,
    rgba(255,255,255,0.96) 35%,
    rgba(255,255,255,0.4) 56%,
    rgba(255,255,255,0) 78%);
}
.hero-image-wrap[data-slide-image="heatpump"]::after {
  background: linear-gradient(90deg,
    rgba(255,255,255,1) 0%,
    rgba(255,255,255,0.96) 35%,
    rgba(255,255,255,0.55) 55%,
    rgba(255,255,255,0) 78%);
}
.hero-image-wrap {
  transition: opacity 360ms var(--ease-standard), transform 360ms var(--ease-standard);
}

/* Crossfade — hidden hero panels don't shift the layout */
.hero-panel.is-hidden,
.hero-image-wrap.is-hidden {
  opacity: 0;
  visibility: hidden;
}
.hero-panel,
.hero-image-wrap {
  transition: opacity 360ms var(--ease-standard);
}

/* Pause hint on hover — subtle */
.hero[data-paused="true"] .hero-progress-segment.is-active .hero-progress-fill {
  opacity: 0.6;
}

/* Ridge mark watermark — bottom-right of hero, low opacity */
.hero-watermark {
  position: absolute;
  right: -40px;
  bottom: -40px;
  width: 320px;
  height: auto;
  opacity: 0.08;
  z-index: 2;
  pointer-events: none;
  user-select: none;
}

/* Hide the old tab strip if it ever re-appears */
.hero-tabs { display: none !important; }

.teal-dot,
.teal-text { color: var(--rl-teal); }

.hero-lede,
.hero-note {
  color: var(--rl-ink-700);
  font-family: var(--font-body);
}
.hero-lede { line-height: 1.3; }
.hero-note { line-height: 1.45; }

/* Ensure hero-copy clears the progress bar */
.hero-copy { padding-top: 56px; }

/* ---------- Spec rail ------------------------------------ */
.spec-rail {
  border-top: 1px solid var(--border-default);
  border-bottom: 1px solid var(--border-default);
  background: rgba(255,255,255,0.92);
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--rl-ink-700);
}
.spec-rail span:not(:last-child)::after {
  color: var(--rl-teal);
  font-weight: 400;
}

/* =========================================================
   TYPOGRAPHY HIERARCHY — 48 / 36 H2 split
   ========================================================= */

/* Top-of-section anchors — 48px / 1.0 */
.systems .section-heading h2,
.applications .application-layout::before,
.heat-pump-copy h2,
.editorial-stainless h2 {
  font-size: 48px;
  line-height: 1.0;
  letter-spacing: -0.5px;
  font-weight: 700;
}
.sample-copy h2 {
  font-size: 48px;
  line-height: 1.0;
  letter-spacing: -0.3px;
}

/* Supporting H2s — 36px / 1.05 */
.installer-proof .section-heading h2,
.support .section-heading h2,
.technical-copy h2 {
  font-size: 36px;
  line-height: 1.05;
  letter-spacing: -0.2px;
  font-weight: 700;
}

/* Body & lede leading */
body { line-height: var(--lh-body); /* 1.6 */ }
.section-heading p:not(.eyebrow),
.heat-pump-copy p,
.sample-copy p,
.pathway p:not(.pathway-kicker),
.proof-grid p,
.editorial-stainless p {
  line-height: 1.6;
}

/* v0.14.4 — subtle text CTA linking from the dark editorial moment into the
   new plumbing-material pillar guide. Teal accent, underline on hover. */
.editorial-stainless-link {
  display: inline-block;
  margin-top: 20px;
  color: var(--rl-teal);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: color var(--dur-fast) var(--ease-standard);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}
.editorial-stainless-link:hover {
  color: var(--rl-white);
  border-bottom-color: var(--rl-teal);
}
.section-heading p:not(.eyebrow):first-of-type:not(.eyebrow) {
  line-height: 1.45;
}
.heat-pump-copy p { line-height: 1.5; }

/* Un-hide the eyebrows on relevant sections */
.applications .section-heading p.eyebrow,
.installer-proof .section-heading p.eyebrow,
.technical-copy p.eyebrow,
.support .section-heading p.eyebrow,
.heat-pump-copy p.eyebrow,
.sample-copy p.eyebrow,
.editorial-stainless p.eyebrow {
  display: block;
  margin: 0 0 16px;
  color: var(--rl-teal);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* Applications: bring the heading & eyebrow back into the layout */
.applications .section-heading {
  display: block;
  max-width: 1450px;
  margin: 0 auto var(--space-7);
}
.applications .section-heading h2 {
  font-size: 48px;
  line-height: 1.0;
  letter-spacing: -0.5px;
}
/* The original CSS injects the H2 via ::before — kill that, the real H2 now shows */
.application-layout::before { content: none; }
.application-layout {
  grid-template-columns: 1fr;
  gap: 0;
}

/* Section heading paragraphs */
.section-heading p:not(.eyebrow),
.heat-pump-copy p,
.sample-copy p {
  color: var(--rl-ink-500);
  font-family: var(--font-body);
  font-size: 17px;
}

/* Systems heading retunes */
.systems .section-heading h2::after,
.pathway h3::after { background: var(--rl-teal); }
.systems .section-heading h2 { max-width: 360px; }
.systems .section-heading p { max-width: 280px; font-size: 15px; line-height: 1.55; }

/* Pathway content */
.pathway p:not(.pathway-kicker) {
  color: var(--rl-ink-700);
  font-family: var(--font-body);
}
.pathway a {
  color: var(--rl-teal);
  font-weight: 600;
  letter-spacing: 0.2px;
}
.pathway a:hover { color: var(--rl-teal-hover); }
.pathway img {
  background: var(--rl-surface-50);
  border-radius: var(--radius-sm);
}

/* Proof grid */
.proof-grid img {
  background: var(--rl-surface-50);
  border-radius: var(--radius-sm);
}
.proof-grid p { color: var(--rl-ink-500); font-family: var(--font-body); }

/* Spec table */
.spec-table {
  border-top: 1px solid var(--border-default);
  border-bottom: 1px solid var(--border-default);
}
.spec-table div { border-right-color: var(--border-default); }
.spec-table span {
  color: var(--rl-teal);
  font-weight: 600;
  letter-spacing: 0.16em;
}
.spec-table strong {
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--rl-black);
}

/* Support */
.support-list a { border-top-color: var(--border-default); }
.support-list span { font-weight: 600; color: var(--rl-black); }
.support-list strong { color: var(--rl-teal); font-weight: 600; }
.support-list a:hover strong { color: var(--rl-teal-hover); }
/* Bring back the support sub-text typography */
.support-list a::before {
  color: var(--rl-ink-500);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
}

/* Sample request close */
.sample-request {
  background: var(--rl-surface-50);
  border-top: 1px solid var(--border-default);
}

.heat-pump { background: var(--rl-white); }

.house-diagram figcaption {
  color: var(--rl-ink-300);
  font-family: var(--font-body);
}

/* =========================================================
   SECTION SPACING RHYTHM — 64 / 96 / 128
   ========================================================= */

/* Compact rows */
.support,
.technical {
  padding-top: var(--sec-compact);
  padding-bottom: var(--sec-compact);
}

/* Content-heavy sections */
.systems,
.applications,
.installer-proof {
  padding-top: var(--sec-content);
  padding-bottom: var(--sec-content);
}

/* Editorial breaks */
.editorial-stainless,
.heat-pump,
.sample-request {
  padding-top: var(--sec-editorial);
  padding-bottom: var(--sec-editorial);
}

/* Heat pump retains its inner padding behaviour — copy padding handled below */
.heat-pump-copy { padding: 0; }

/* Teal-tinted top-rule between sections — 1px hairline + 8px teal accent on left */
.section + .section,
.section.systems,
.section.applications,
.section.installer-proof,
.section.technical,
.section.editorial-stainless,
.section.heat-pump,
.section.support,
.section.sample-request {
  position: relative;
}
.section + .section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 64px;
  height: 2px;
  background: var(--rl-teal);
  z-index: 2;
}
/* Editorial break gets a darker rule (since the section is dark) */
.editorial-stainless + .section::before,
.section.editorial-stainless::before {
  background: var(--rl-teal);
}

/* Don't apply the rule to the dark editorial's own inner top — the section above ends, the dark begins */
/* Sample-request rule already exists in source — remove the duplicate border to avoid doubling */
.sample-request { border-top: 0; }

/* Spec rail sits flush to the hero — no spacing rhythm above */
.hero { padding-bottom: 0; }

/* Tighten gap between hero spec-rail and Systems section */
.hero + .section,
.section.systems { padding-top: var(--space-8); }

/* =========================================================
   DARK EDITORIAL SECTION — Stainless. Not plastic. (overridden by Pattern A v0.2.12 below)
   ========================================================= */
.editorial-stainless {
  background: var(--rl-black);
  color: var(--rl-white);
  border-bottom: 0;
  padding-left: 64px;
  padding-right: 64px;
}
.editorial-stainless-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-9);
  align-items: center;
}
.editorial-stainless-copy {
  max-width: 480px;
}
.editorial-stainless .eyebrow {
  color: var(--rl-teal);
  margin-bottom: 24px;
}
.editorial-stainless h2 {
  font-family: var(--font-display);
  color: var(--rl-white);
  margin: 0 0 32px;
  font-size: 64px;
  line-height: 0.98;
  letter-spacing: -1px;
  font-weight: 700;
}
.editorial-stainless p {
  color: rgba(255,255,255,0.72);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
  max-width: 460px;
  margin: 0;
}
.editorial-stainless-image {
  margin: 0;
  position: relative;
}
.editorial-stainless-image img {
  width: 100%;
  height: 520px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  filter: brightness(0.78) contrast(1.05);
}
/* Subtle vignette so the image sits inside the dark surround */
.editorial-stainless-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-sm);
  background: radial-gradient(ellipse at center, transparent 50%, rgba(10,10,10,0.45) 100%);
  pointer-events: none;
}

/* Override the universal section-divider rule for the dark editorial — use teal, on dark surface */
.editorial-stainless::before {
  background: var(--rl-teal) !important;
}

/* ---------- Focus ring ----------------------------------- */
:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* =========================================================
   Mobile / narrow viewport
   ========================================================= */
@media (max-width: 1180px) {
  .hero-progress {
    left: 32px;
    right: 32px;
  }
  .hero-watermark {
    width: 240px;
    right: -24px;
    bottom: -24px;
  }
}

@media (max-width: 900px) {
  .hero-progress {
    position: relative;
    top: auto;
    left: 0;
    right: 0;
    margin-bottom: 18px;
    padding: 0;
  }
  .hero-watermark { display: none; }
  .hero-copy { padding-top: 0; }

  .systems .section-heading h2,
  .applications .section-heading h2,
  .heat-pump-copy h2,
  .editorial-stainless h2,
  .sample-copy h2 {
    font-size: 36px;
    line-height: 1.05;
  }
  .installer-proof .section-heading h2,
  .support .section-heading h2,
  .technical-copy h2 {
    font-size: 28px;
  }

  .systems,
  .applications,
  .installer-proof { padding-top: var(--sec-compact); padding-bottom: var(--sec-compact); }
  .editorial-stainless,
  .heat-pump,
  .sample-request { padding-top: var(--sec-content); padding-bottom: var(--sec-content); }

  .editorial-stainless { padding-left: 16px; padding-right: 16px; }
  .editorial-stainless-inner {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .editorial-stainless-image img { height: 320px; }
  .editorial-stainless h2 { font-size: 44px; }
  .editorial-stainless p { font-size: 16px; }

  .section + .section::before { width: 48px; }
}

/* =========================================================
   FIXES + STRUCTURAL ADDITIONS  (applied after brand-v3)
   2026-04-29 — sizing fixes per Joel's review + footer +
   structural additions (scroll reveals, house diagram,
   distributor band, dark editorial Pattern A)
   ========================================================= */

/* ---------- FIX: Hero sizing recalibration (v0.2.6) ---------- */
.hero {
  min-height: clamp(580px, 70vh, 740px) !important;
  max-height: 740px !important;
  grid-template-rows: auto 1fr auto !important;
}
.hero-progress { position: absolute; }
.hero-copy {
  width: min(640px, 52vw) !important;
  max-width: 640px !important;
  padding-left: 64px !important;
  padding-right: 24px !important;
  padding-top: 84px !important;
  padding-bottom: 56px !important;
}
.hero-actions {
  margin-top: 4px !important;
}
/* Hero headline — per-slide sizing so each headline reads as 1-3 lines
   rather than every word taking its own line. The system headline is
   long (51 chars), the speed headline short (22 chars), heat pump
   medium (31 chars) — different fonts size each appropriately. Impact
   face stays Inter Black 900 across all. */
.hero-copy h1, .hero-copy h2 {
  line-height: 1.0 !important;
  margin: 0 0 24px !important;
}
/* Long system headline — smallest of the three */
.hero-panel[data-slide="system"] h1, .hero-panel[data-slide="system"] h2 {
  font-size: clamp(38px, 3.6vw, 56px) !important;
  line-height: 1.05 !important;
}
/* Short speed headline — biggest, most impactful */
.hero-panel[data-slide="speed"] h1, .hero-panel[data-slide="speed"] h2 {
  font-size: clamp(56px, 6vw, 88px) !important;
  line-height: 0.98 !important;
}
/* Medium heat pump headline */
.hero-panel[data-slide="heatpump"] h1, .hero-panel[data-slide="heatpump"] h2 {
  font-size: clamp(48px, 5vw, 72px) !important;
  line-height: 1.02 !important;
}
.hero-lede {
  font-size: clamp(16px, 1.3vw, 19px) !important;
}
.hero-note {
  font-size: clamp(14px, 1.15vw, 17px) !important;
}

/* ---------- HEAT PUMP — full-bleed dark editorial (v0.2.9) ---------- */
.heat-pump {
  position: relative !important;
  display: block !important;
  padding: 0 !important;
  grid-template-columns: none !important;
  gap: 0 !important;
  background: #0d0d0d url('./Ridgeline-heat-pump-night.png') 70% center / cover no-repeat !important;
  color: var(--rl-white) !important;
  min-height: clamp(440px, 58vh, 620px) !important;
  overflow: hidden !important;
}
.heat-pump::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(90deg,
    rgba(13,13,13,0.92) 0%,
    rgba(13,13,13,0.80) 32%,
    rgba(13,13,13,0.36) 58%,
    rgba(13,13,13,0) 78%) !important;
  pointer-events: none !important;
}
/* v0.2.14 — match Compatibility / Stainless layout so copy hugs viewport-left
   on wide screens instead of being centred in a 1280 max-width container. */
.heat-pump-inner {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  min-height: clamp(440px, 58vh, 620px) !important;
  padding: var(--space-8) clamp(32px, 6vw, 96px) !important;
}
.heat-pump-copy {
  max-width: 560px !important;
  padding: 0 !important;
  margin-left: clamp(0px, 4vw, 80px) !important;
}
.heat-pump-copy .eyebrow {
  color: var(--rl-teal) !important;
  margin: 0 0 18px !important;
  display: block !important;
}
.heat-pump-copy h2 {
  font-family: var(--font-display) !important;
  font-size: clamp(42px, 4.6vw, 68px) !important;
  font-weight: 700 !important;
  line-height: 0.98 !important;
  letter-spacing: -0.02em !important;
  color: var(--rl-white) !important;
  margin: 0 0 24px !important;
}
.heat-pump-copy h2 .teal-text { color: var(--rl-teal) !important; }
.heat-pump-copy p {
  font-size: clamp(15px, 1.3vw, 18px) !important;
  line-height: 1.55 !important;
  color: rgba(255,255,255,0.86) !important;
  max-width: 520px !important;
  margin: 0 0 32px !important;
}
/* Button on dark surface — outlined white */
.heat-pump-copy .button.button-on-dark,
.heat-pump-copy .button-secondary.button-on-dark {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.6) !important;
  color: var(--rl-white) !important;
}
.heat-pump-copy .button.button-on-dark:hover,
.heat-pump-copy .button-secondary.button-on-dark:hover {
  background: rgba(255,255,255,0.10) !important;
  border-color: var(--rl-white) !important;
}
@media (max-width: 768px) {
  .heat-pump {
    background-position: 75% center !important;
  }
  .heat-pump::after {
    background: linear-gradient(180deg,
      rgba(13,13,13,0.55) 0%,
      rgba(13,13,13,0.86) 55%,
      rgba(13,13,13,0.94) 100%) !important;
  }
  .heat-pump-copy h2 { font-size: 36px !important; }
  .heat-pump-inner { min-height: 480px !important; padding: var(--space-7) 24px !important; }
}
/* Old heat-pump-media markup is gone — but kill any orphan styles just in case */
.heat-pump-media { display: none !important; }

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.hero-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
/* Tighter gradient — let more of the image read on the right */
.hero-image-wrap::after {
  background: linear-gradient(90deg,
    rgba(255,255,255,1) 0%,
    rgba(255,255,255,0.92) 30%,
    rgba(255,255,255,0.4) 52%,
    rgba(255,255,255,0) 70%) !important;
}
.hero-image-wrap[data-slide-image="system"]::after {
  background: linear-gradient(90deg,
    rgba(255,255,255,1) 0%,
    rgba(255,255,255,0.95) 32%,
    rgba(255,255,255,0.3) 54%,
    rgba(255,255,255,0) 70%) !important;
}
.hero-image-wrap[data-slide-image="system"] img {
  object-fit: contain;
  object-position: 70% center;
  padding: 24px 24px 24px 380px;
}

/* ---------- HERO IMAGE BEHAVIOUR — unified across all 3 slides (v0.2.9) ----------
   All slides use object-fit: cover with a per-slide object-position that
   anchors the SUBJECT so resizing the window crops away from it, not toward
   it. Padding hacks removed. Higher specificity (body.page-id) so these win
   the cascade against earlier rules in this file. */
body .hero-image-wrap img,
.ridgeline-homepage-2026-body .hero-image-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  padding: 0 !important;
}
/* Speed slide — brass fitting at the bottom of the source. Anchor bottom.
   v0.2.28: 78% → 79% (+1 to match mobile). */
body .hero-image-wrap[data-slide-image="speed"] img,
.ridgeline-homepage-2026-body .hero-image-wrap[data-slide-image="speed"] img {
  object-fit: cover !important;
  object-position: 79% bottom !important;
  padding: 0 !important;
}
/* System slide — house cutaway right-of-centre. Cover with bottom anchor.
   v0.2.25: 92% → 94% (Joel: "another 2"). */
body .hero-image-wrap[data-slide-image="system"] img,
.ridgeline-homepage-2026-body .hero-image-wrap[data-slide-image="system"] img {
  object-fit: cover !important;
  object-position: 94% 100% !important;
  padding: 0 !important;
}
/* Pull hero-media up so the spec-rail isn't sitting on top of the image's
   bottom (the spec-rail has a white background and was hiding the bottom
   of the house). Spec-rail is 64px tall — leave 64px clear at the bottom. */
body .hero-media,
.ridgeline-homepage-2026-body .hero-media {
  bottom: 64px !important;
  inset: 0 0 64px 0 !important;
}
/* Spec-rail itself stays grid-positioned at the bottom, no change needed. */
.ridgeline-homepage-2026-body .hero-image-wrap[data-slide-image="system"] {
  background: #ffffff !important;
}
/* Heat pump hero — ASHP unit on right of source. v0.2.29: 79% → 82%
   (+3 to match mobile). */
body .hero-image-wrap[data-slide-image="heatpump"] img,
.ridgeline-homepage-2026-body .hero-image-wrap[data-slide-image="heatpump"] img {
  object-fit: cover !important;
  object-position: 82% center !important;
  padding: 0 !important;
}

/* =========================================================
   v0.3.0 — SAMPLE REQUEST PAGE
   Fork-at-the-door page at /request-a-sample/. Two stages:
   user picks "exploring" or "project", the right form appears.
   Stages controlled by URL hash + JS (.sr-* namespace).
   ========================================================= */

.ridgeline-sample-request-2026-body {
  background: var(--rl-white);
}

/* =========================================================
   Fork section (intro) — full-bleed hero with copy + cards
   ALL overlaid on the corrugated-tube image. The image is the
   section's background; copy sits top-left in the image's
   natural white-space, cards sit below as a 2-col grid (each
   card has an opaque white background + drop shadow so they
   pop off the photo).
   ========================================================= */
.sr-intro {
  position: relative;
  padding: clamp(56px, 9vh, 110px) clamp(20px, 6vw, 64px);
  min-height: clamp(680px, 88vh, 920px);
  background-image:
    linear-gradient(to right,
      rgba(255,255,255,0.97) 0%,
      rgba(255,255,255,0.86) 28%,
      rgba(255,255,255,0.55) 48%,
      rgba(255,255,255,0.18) 72%,
      rgba(255,255,255,0) 95%),
    url('./sample-request-hero.png?v=2');
  background-position: center, right center;
  background-size: cover, cover;
  background-repeat: no-repeat, no-repeat;
  background-color: var(--rl-white);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.sr-intro-inner {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  padding: 0;
}
/* Copy block — sits at the top of the hero, in the image's negative space */
.sr-intro-copy {
  max-width: 600px;
  margin-bottom: var(--space-7);
}
/* Small teal accent line above the eyebrow */
.sr-accent-line {
  display: block;
  width: 64px;
  height: 2px;
  background: var(--rl-teal);
  margin-bottom: var(--space-5);
}
.sr-intro-copy .eyebrow {
  margin-bottom: var(--space-3);
}
.sr-intro-copy h1 {
  font-family: var(--font-display);
  font-size: clamp(38px, 5.4vw, 64px);
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--rl-black);
  margin: 8px 0 18px;
}
.sr-intro-copy h1 .teal-text { color: var(--rl-teal); }
.sr-intro-copy .sr-intro-lede {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.5;
  color: var(--rl-ink-500);
  margin: 0;
  max-width: 480px;
}
/* Cards on hero image — bigger drop shadow so they lift off the photo */
.sr-intro .sr-card {
  box-shadow: 0 6px 20px rgba(10, 10, 10, 0.10);
}
.sr-intro .sr-card:hover,
.sr-intro .sr-card:focus-visible {
  box-shadow: 0 14px 38px rgba(10, 10, 10, 0.16);
}

/* Mobile — drop the image, simple white block (cards still readable) */
@media (max-width: 768px) {
  .sr-intro {
    background-image: none;
    background-color: var(--rl-white);
    min-height: 0;
    padding: var(--space-7) 20px var(--space-8);
  }
  .sr-intro-copy {
    max-width: none;
    margin-bottom: var(--space-6);
  }
}
@media (min-width: 769px) and (max-width: 1100px) {
  /* Tablet — lighten gradient so the image still reads while copy stays clear */
  .sr-intro {
    background-image:
      linear-gradient(to right,
        rgba(255,255,255,0.98) 0%,
        rgba(255,255,255,0.92) 32%,
        rgba(255,255,255,0.55) 56%,
        rgba(255,255,255,0.10) 78%),
      url('./sample-request-hero.png?v=2');
    min-height: clamp(620px, 78vh, 760px);
  }
}

/* =========================================================
   CRITICAL: [hidden] attribute must beat any layout `display`.
   Without this rule, the .sr-form-on-image's `display: flex`
   defeats <section hidden>, and the project form renders below
   the fork screen instead of staying off until clicked.
   ========================================================= */
.sr-intro[hidden],
.sr-form-section[hidden] {
  display: none !important;
}

/* =========================================================
   v0.4.0 — Products page (.pp-* namespace)
   Replaces the legacy theme template at /products/. Five sections:
   Tube · P1 fittings · Flexis · Underfloor · Accessories.
   Same brand tokens as homepage and sample-request — buttons,
   header, footer, fonts, teal, surface-50 alternation.
   ========================================================= */

.ridgeline-products-2026-body {
  background: var(--rl-white);
}

/* ---------- Hero ---------- */
.pp-hero {
  padding: clamp(56px, 9vh, 110px) clamp(20px, 6vw, 64px) clamp(48px, 7vh, 80px);
  background: var(--rl-white);
}
.pp-hero-inner {
  max-width: 980px;
  margin: 0 auto;
}
.pp-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(38px, 5.4vw, 64px);
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--rl-black);
  margin: 8px 0 18px;
}
.pp-hero h1 .teal-text { color: var(--rl-teal); }
.pp-hero-lede {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.5;
  color: var(--rl-ink-500);
  margin: 0;
  max-width: 720px;
}

/* ---------- Sticky anchor nav ---------- */
.pp-anchor-nav {
  position: sticky;
  top: 72px;            /* sit below the 72px site-header (was 80px which left an 8px gap) */
  z-index: 18;          /* below site-header z-index 20 */
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--rl-line-200);
  border-bottom: 1px solid var(--rl-line-200);
}
body.admin-bar .pp-anchor-nav { top: 104px; }    /* + 32px WP admin bar */
@media screen and (max-width: 782px) {
  body.admin-bar .pp-anchor-nav { top: 110px; }   /* mobile admin bar is 46px */
}
.pp-anchor-nav-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  gap: clamp(16px, 3vw, 36px);
  overflow-x: auto;
  padding: 14px clamp(16px, 4vw, 32px);
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.pp-anchor-nav-inner::-webkit-scrollbar { display: none; }
.pp-anchor-nav a {
  flex: 0 0 auto;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--rl-ink-700);
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  transition: color var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard);
}
.pp-anchor-nav a:hover {
  color: var(--rl-teal);
  border-bottom-color: var(--rl-teal);
}
@media (max-width: 900px) {
  .pp-anchor-nav { top: 64px; } /* mobile site-header is 64px */
}
@media (max-width: 900px) {
  body.admin-bar .pp-anchor-nav { top: 110px; }
}

/* ---------- Sections ---------- */
.pp-section {
  padding: clamp(64px, 10vh, 120px) clamp(20px, 6vw, 64px);
  background: var(--rl-white);
}
.pp-section-inner {
  max-width: 1180px;
  margin: 0 auto;
}
/* Alternating surface tone for visual rhythm. With v0.4.2's new Ridgelock
   section the order is: Tube (white), Ridgelock (surface), P1 (white),
   Flexis (surface), Underfloor (white), Accessories (surface). */
.pp-tube,
.pp-p1,
.pp-underfloor {
  background: var(--rl-white);
}
.pp-ridgelock,
.pp-flexis,
.pp-accessories {
  background: var(--rl-surface-50);
}

/* Ridgelock section grid — sealing-ring card + text card side-by-side */
.pp-rl-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}
@media (max-width: 900px) {
  .pp-rl-grid { grid-template-columns: 1fr; }
}
.pp-card-rl-text {
  justify-content: flex-start;
}
.pp-card-rl-text .pp-card-desc {
  margin-bottom: 14px;
}
.pp-card-image-rl {
  aspect-ratio: 4 / 3;
  background: var(--rl-white);
}
.pp-card-image-rl img {
  padding: 16px;
  object-fit: contain;
}
.pp-section-head {
  max-width: 760px;
  margin: 0 auto var(--space-7);
  text-align: center;
}
.pp-section-head .eyebrow {
  margin-bottom: var(--space-3);
}
.pp-section-head h2 {
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--rl-black);
  margin: 0 0 16px;
}
.pp-section-lede {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.55;
  color: var(--rl-ink-500);
  margin: 0;
}
.pp-section-foot {
  margin: var(--space-7) auto 0;
  max-width: 760px;
  text-align: center;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--rl-ink-500);
}
.pp-section-foot a,
.pp-section-link {
  color: var(--rl-teal);
  text-decoration: none;
  font-weight: 600;
}
.pp-section-foot a:hover,
.pp-section-link:hover { color: var(--rl-teal-hover); }

/* ---------- Card base ---------- */
.pp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--rl-white);
  border: 1px solid var(--rl-line-200);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  transition: border-color var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard);
}
.pp-card:hover {
  border-color: var(--rl-teal);
  box-shadow: var(--shadow-md);
}
/* On surface-50 sections, cards stay white so they pop */
.pp-p1 .pp-card,
.pp-underfloor .pp-card {
  background: var(--rl-white);
}
.pp-card-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  margin-bottom: var(--space-4);
  background: var(--rl-surface-50);
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pp-card-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 12px;
}
.pp-card-name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--rl-black);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.pp-card-code {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.0;
  color: var(--rl-black);
  letter-spacing: -0.02em;
  margin: 0 0 14px;
}
.pp-card-desc {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--rl-ink-500);
  margin: 0 0 12px;
  flex-grow: 1;
}
.pp-card-sizes {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.45;
  color: var(--rl-ink-700);
  margin: auto 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--rl-line-100);
}
.pp-card-sizes strong {
  color: var(--rl-black);
  font-weight: 600;
}

/* ---------- "Coming soon" badge for tube R-42 / R-54 ---------- */
.pp-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 4px 10px;
  background: var(--rl-teal);
  color: var(--rl-white);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
}

/* ---------- Spec list (used in tube cards) ---------- */
.pp-spec-list {
  margin: 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--rl-line-100);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
  font-family: var(--font-body);
  font-size: 12px;
}
.pp-spec-list > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pp-spec-list dt {
  color: var(--rl-ink-500);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pp-spec-list dd {
  margin: 0;
  color: var(--rl-black);
  font-size: 14px;
  font-weight: 600;
}

/* ---------- Per-section grids ---------- */
.pp-tube-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
.pp-p1-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
.pp-flexis-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
.pp-uf-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
.pp-acc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}
@media (max-width: 900px) {
  .pp-tube-grid,
  .pp-p1-grid,
  .pp-flexis-grid,
  .pp-uf-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .pp-acc-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 600px) {
  .pp-tube-grid,
  .pp-p1-grid,
  .pp-flexis-grid,
  .pp-uf-grid {
    grid-template-columns: 1fr;
  }
}

/* Tube card image — landscape, transparent background, padded */
.pp-card-image-tube {
  aspect-ratio: 3 / 1;
  background: var(--rl-surface-50);
}
.pp-card-image-tube img {
  padding: 16px;
  object-fit: contain;
}

/* P1 card image — square-ish, transparent product render */
.pp-card-image-fitting {
  aspect-ratio: 4 / 3;
  background: var(--rl-white);
}
.pp-card-image-fitting img {
  padding: 16px;
  object-fit: contain;
}

/* Flexis card image — wider aspect for the U-curve products */
.pp-card-image-flexis {
  aspect-ratio: 4 / 3;
  background: var(--rl-surface-50);
}
.pp-card-image-flexis img {
  padding: 12px;
  object-fit: contain;
}

/* Underfloor card image */
.pp-card-image-uf {
  aspect-ratio: 5 / 2;
  background: var(--rl-surface-50);
}
.pp-card-image-uf img {
  padding: 12px;
  object-fit: contain;
}

/* Accessories card */
.pp-card-acc {
  padding: var(--space-6);
}
.pp-card-image-acc {
  aspect-ratio: 4 / 3;
  background: var(--rl-surface-50);
}

/* ---------- CTA band ---------- */
.pp-cta {
  padding: clamp(56px, 8vh, 96px) clamp(20px, 6vw, 64px);
  background: var(--rl-black);
  color: var(--rl-white);
  text-align: center;
}
.pp-cta-inner {
  max-width: 760px;
  margin: 0 auto;
}
.pp-cta h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 700;
  line-height: 1.1;
  color: var(--rl-white);
  margin: 0 0 12px;
  letter-spacing: -0.015em;
}
.pp-cta-lede {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 var(--space-6);
}
.pp-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}
.pp-cta-actions .button-secondary {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--rl-white);
}
.pp-cta-actions .button-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--rl-white);
}

/* The two fork cards */
.sr-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-6);
}
.sr-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-7) var(--space-6);
  background: var(--rl-white);
  border: 1px solid var(--rl-line-200);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard),
              transform var(--dur-base) var(--ease-standard);
}
.sr-card:hover,
.sr-card:focus-visible {
  border-color: var(--rl-teal);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  outline: none;
}
/* Card icon — circular teal-outlined badge with the SVG icon centred.
   Reverted from photo thumbnails (v0.3.2) because the half-bleed hero
   image already handles visual mood; the cards work better text-led. */
.sr-card-icon {
  width: 56px;
  height: 56px;
  margin-bottom: var(--space-5);
  border: 1.5px solid var(--rl-teal);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--rl-teal);
  background: var(--rl-white);
  flex: 0 0 auto;
  transition: transform var(--dur-base) var(--ease-standard);
}
.sr-card-icon svg {
  width: 26px;
  height: 26px;
  display: block;
}
.sr-card:hover .sr-card-icon,
.sr-card:focus-visible .sr-card-icon {
  transform: scale(1.06);
}
.sr-card h2 {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
  color: var(--rl-black);
}
.sr-card-desc {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--rl-ink-500);
  margin: 0 0 var(--space-5);
}
.sr-card-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-6);
  border-top: 1px solid var(--rl-line-100);
}
.sr-card-list li {
  padding: 12px 0 12px 32px;
  border-bottom: 1px solid var(--rl-line-100);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.4;
  color: var(--rl-ink-700);
  position: relative;
}
/* Teal checkmark inside a circle outline (lucide-style "circle-check") */
.sr-card-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23008DA2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='m9 12 2 2 4-4'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.sr-card-cta {
  display: block;
  margin-top: auto;
  padding-top: var(--space-4);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.2px;
  color: var(--rl-teal);
}
.sr-card:hover .sr-card-cta { color: var(--rl-teal-hover); }

/* Form sections (hidden until fork chosen) */
.sr-form-section {
  padding: var(--space-9) clamp(20px, 6vw, 64px);
  background: var(--rl-white);
}
.sr-form-inner {
  max-width: 720px;
  margin: 0 auto;
}

/* Form-grid layout — side-panel image + form. Above 900px the image
   sits to the left and stretches to match the form's height; below
   900px it stacks above the form as a 16:10 hero band. */
.sr-form-inner.sr-form-grid {
  max-width: 1080px;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: stretch;
}
@media (min-width: 900px) {
  .sr-form-inner.sr-form-grid {
    grid-template-columns: minmax(280px, 5fr) minmax(0, 7fr);
    gap: var(--space-8);
  }
}
.sr-form-aside {
  margin: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--rl-surface-50);
  min-height: 240px;
}
.sr-form-aside img {
  width: 100%;
  height: 100%;
  min-height: 240px;
  object-fit: cover;
  display: block;
}
.sr-form-aside img[src*="truck-installer-sunset"] {
  object-position: 60% center;
}
.sr-form-aside img[src*="R22"] {
  object-position: center center;
}
@media (max-width: 899px) {
  .sr-form-aside {
    aspect-ratio: 16 / 10;
    min-height: 0;
  }
  .sr-form-aside img {
    min-height: 0;
  }
}
.sr-form-content {
  /* Right column — form sits here. Width handled by the grid. */
  min-width: 0; /* allow form inputs to shrink without overflowing */
}

/* =========================================================
   v0.3.4 — Form-on-image (project form treatment)
   The project form sits on top of a full-bleed lifestyle image
   (installer + Ridgeline truck at sunset). The image is the
   section background; the form lives in a white card anchored
   to the left, on top of the image's natural negative space.
   Below 768px the image drops away and the form becomes a
   normal single-column form on white background.
   ========================================================= */
.sr-form-section.sr-form-on-image {
  position: relative;
  padding: clamp(48px, 8vh, 96px) clamp(20px, 6vw, 80px);
  min-height: clamp(560px, 70vh, 760px);
  background-position: center right;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  /* Per-stage background-image set below — exploring uses the tube image
     (continuity with the fork section); project uses the truck/installer. */
}
.sr-form-section.sr-form-on-image[data-sr-stage="exploring"] {
  /* `?v=N` busts browser cache when the image bytes change but the filename
     stays the same (CSS-level cache-busting since CSS itself is filemtime-busted
     by the plugin's wp_enqueue_style call but referenced images are not). */
  background-image: url('./sample-request-hero.png?v=2');
  background-color: var(--rl-white);
}
.sr-form-section.sr-form-on-image[data-sr-stage="project"] {
  background-image: url('./project-form-hero.png?v=3');
  background-color: #1a1a1a;
}

/* The form card — white panel anchored to the left, max-width tight */
.sr-form-section.sr-form-on-image .sr-form-inner {
  position: relative;
  z-index: 2;
  max-width: 520px;
  width: 100%;
  margin: 0;
  padding: clamp(28px, 4vw, 44px);
  background: var(--rl-white);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 48px rgba(10, 10, 10, 0.18),
              0 4px 12px rgba(10, 10, 10, 0.06);
}

/* The card sits within a max-width constrained outer wrapper so we can
   centre it horizontally on very wide screens without it floating off
   into space. Achieved with a flex parent + inner padding. */
@media (min-width: 1500px) {
  .sr-form-section.sr-form-on-image {
    padding-left: max(80px, calc((100% - 1400px) / 2 + 64px));
  }
}

/* Mobile — drop the image, become a normal form on a soft surface */
@media (max-width: 768px) {
  .sr-form-section.sr-form-on-image {
    background-image: none;
    background-color: var(--rl-surface-50);
    min-height: 0;
    padding: var(--space-7) 16px;
    align-items: stretch;
  }
  .sr-form-section.sr-form-on-image .sr-form-inner {
    max-width: none;
    box-shadow: 0 4px 16px rgba(10, 10, 10, 0.06);
    padding: var(--space-6) var(--space-5);
  }
}

/* Tablet (768–1100px) — keep the image but scale the card */
@media (min-width: 769px) and (max-width: 1100px) {
  .sr-form-section.sr-form-on-image {
    padding: var(--space-8) clamp(20px, 4vw, 48px);
    min-height: 620px;
  }
  .sr-form-section.sr-form-on-image .sr-form-inner {
    max-width: 460px;
    padding: var(--space-6);
  }
}
.sr-back {
  display: inline-block;
  margin-bottom: var(--space-5);
  color: var(--rl-ink-500);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  transition: color var(--dur-base) var(--ease-standard);
}
.sr-back:hover { color: var(--rl-teal); }
.sr-form-section h1, .sr-form-section h2 {
  font-family: var(--font-display);
  font-size: clamp(34px, 4vw, 48px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 8px 0 16px;
  color: var(--rl-black);
}
.sr-form-embed {
  margin-top: var(--space-6);
  padding: var(--space-6);
  background: var(--rl-surface-50);
  border: 1px solid var(--rl-line-100);
  border-radius: var(--radius-md);
  min-height: 200px;
}
.sr-form-stub {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--rl-ink-500);
}
.sr-form-stub strong {
  color: var(--rl-black);
  display: block;
  margin-bottom: 6px;
  font-weight: 700;
}

/* Trust band */
.sr-trust {
  border-top: 1px solid var(--rl-line-200);
  background: var(--rl-surface-50);
  padding: var(--space-6) clamp(20px, 6vw, 64px);
}
.sr-trust-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-7);
  justify-content: center;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rl-ink-500);
  text-align: center;
}

/* Mobile sample-request layout */
@media (max-width: 900px) {
  .sr-intro { padding: var(--space-7) 20px; }
  .sr-form-section { padding: var(--space-7) 20px; }
  .sr-card { padding: var(--space-6) var(--space-5); }
}
@media (max-width: 768px) {
  .sr-cards { grid-template-columns: 1fr; gap: var(--space-4); }
  .sr-trust-inner {
    gap: var(--space-3) var(--space-5);
    font-size: 10px;
    letter-spacing: 0.08em;
  }
}

/* =========================================================
   HubSpot form theming — scoped to .sr-form-embed so it only
   styles the forms on /request-a-sample/. Targets HubSpot's
   stable class hierarchy (.hs-form, .hs-form-field, .hs-input,
   .hs-button etc.). Without this block the embedded forms
   render as generic HubSpot styling — borders, font, button
   colour all wrong. !important throughout because HubSpot
   ships its own inline CSS.
   ========================================================= */

/* Wipe HubSpot's default form font/spacing */
.sr-form-embed .hs-form,
.sr-form-embed form.hs-form {
  font-family: var(--font-body) !important;
  color: var(--rl-ink-700) !important;
}
.sr-form-embed .hs-form fieldset,
.sr-form-embed .hs-form fieldset.form-columns-1,
.sr-form-embed .hs-form fieldset.form-columns-2,
.sr-form-embed .hs-form fieldset.form-columns-3 {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.sr-form-embed .hs-form fieldset .hs-form-field {
  width: 100% !important;
  padding: 0 !important;
  margin: 0 0 16px !important;
  float: none !important;
}
/* 2-column layout for first/last name on tablet+ */
@media (min-width: 600px) {
  .sr-form-embed .hs-form fieldset.form-columns-2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
  }
  .sr-form-embed .hs-form fieldset.form-columns-2 .hs-form-field {
    margin-bottom: 0 !important;
  }
  .sr-form-embed .hs-form fieldset.form-columns-2 .input {
    margin-right: 0 !important;
  }
}

/* Labels */
.sr-form-embed .hs-form-field > label,
.sr-form-embed .hs-form-field > label span {
  display: inline-block !important;
  margin: 0 0 6px !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--rl-ink-700) !important;
  letter-spacing: 0.02em !important;
  line-height: 1.3 !important;
}
.sr-form-embed .hs-form-required {
  color: var(--rl-teal) !important;
  font-weight: 600 !important;
  margin-left: 2px !important;
}

/* The .input wrapper HubSpot wraps each input in */
.sr-form-embed .hs-form-field .input {
  margin: 0 !important;
}

/* Text-style inputs, selects, textareas */
.sr-form-embed .hs-form input.hs-input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.sr-form-embed .hs-form select.hs-input,
.sr-form-embed .hs-form textarea.hs-input {
  display: block !important;
  width: 100% !important;
  height: 44px !important;
  padding: 10px 14px !important;
  font-family: var(--font-body) !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
  color: var(--rl-black) !important;
  background: var(--rl-white) !important;
  border: 1px solid var(--rl-line-200) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: none !important;
  transition: border-color var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard) !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

/* Textarea — multi-line override */
.sr-form-embed .hs-form textarea.hs-input {
  height: auto !important;
  min-height: 110px !important;
  padding: 12px 14px !important;
  resize: vertical !important;
  font-family: var(--font-body) !important;
}

/* Select — custom chevron */
.sr-form-embed .hs-form select.hs-input {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 16px !important;
  padding-right: 40px !important;
  cursor: pointer !important;
}

/* Focus state — teal border + soft glow */
.sr-form-embed .hs-form input.hs-input:focus,
.sr-form-embed .hs-form select.hs-input:focus,
.sr-form-embed .hs-form textarea.hs-input:focus {
  outline: none !important;
  border-color: var(--rl-teal) !important;
  box-shadow: 0 0 0 3px rgba(0, 141, 162, 0.15) !important;
}

/* Placeholders */
.sr-form-embed .hs-form input.hs-input::placeholder,
.sr-form-embed .hs-form textarea.hs-input::placeholder {
  color: var(--rl-ink-300) !important;
  opacity: 1 !important;
}

/* Validation errors */
.sr-form-embed .hs-form .hs-error-msgs {
  list-style: none !important;
  padding: 0 !important;
  margin: 6px 0 0 !important;
}
.sr-form-embed .hs-form .hs-error-msgs li label,
.sr-form-embed .hs-form .hs-error-msgs li,
.sr-form-embed .hs-form .hs-error-msg {
  display: block !important;
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #c0392b !important;
  margin: 0 !important;
}
/* Error border on the offending input */
.sr-form-embed .hs-form .hs-form-field input.invalid,
.sr-form-embed .hs-form .hs-form-field input.error,
.sr-form-embed .hs-form .hs-form-field select.invalid,
.sr-form-embed .hs-form .hs-form-field select.error,
.sr-form-embed .hs-form .hs-form-field textarea.invalid,
.sr-form-embed .hs-form .hs-form-field textarea.error {
  border-color: #c0392b !important;
}
.sr-form-embed .hs-form .hs-form-field input.invalid:focus,
.sr-form-embed .hs-form .hs-form-field input.error:focus {
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.15) !important;
}

/* Checkbox / radio (in case GDPR consent uses them) */
.sr-form-embed .hs-form .hs-form-booleancheckbox-display,
.sr-form-embed .hs-form .hs-form-radio-display {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  color: var(--rl-ink-500) !important;
  margin-bottom: 6px !important;
}
.sr-form-embed .hs-form input[type="checkbox"].hs-input,
.sr-form-embed .hs-form input[type="radio"].hs-input {
  width: 16px !important;
  height: 16px !important;
  margin: 2px 0 0 !important;
  flex: 0 0 auto !important;
  accent-color: var(--rl-teal) !important;
}

/* Submit button — full-width on mobile, brand teal */
.sr-form-embed .hs-form .hs-submit {
  margin-top: 12px !important;
}
.sr-form-embed .hs-form .hs-submit .actions {
  padding: 0 !important;
  margin: 0 !important;
}
.sr-form-embed .hs-form input.hs-button,
.sr-form-embed .hs-form input[type="submit"].hs-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 48px !important;
  padding: 0 24px !important;
  font-family: var(--font-display) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px !important;
  color: var(--rl-white) !important;
  background: var(--rl-teal) !important;
  border: 0 !important;
  border-radius: var(--radius-md) !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: background var(--dur-base) var(--ease-standard) !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}
.sr-form-embed .hs-form input.hs-button:hover {
  background: var(--rl-teal-hover) !important;
}
.sr-form-embed .hs-form input.hs-button:active {
  background: var(--rl-teal-press) !important;
}
.sr-form-embed .hs-form input.hs-button:focus-visible {
  outline: none !important;
  box-shadow: var(--shadow-focus) !important;
}
@media (min-width: 600px) {
  .sr-form-embed .hs-form input.hs-button {
    width: auto !important;
    min-width: 220px !important;
  }
}

/* GDPR / consent / rich-text content */
.sr-form-embed .legal-consent-container,
.sr-form-embed .hs-richtext,
.sr-form-embed .hs-richtext p {
  margin: 12px 0 16px !important;
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
  color: var(--rl-ink-500) !important;
}
.sr-form-embed .legal-consent-container a,
.sr-form-embed .hs-richtext a {
  color: var(--rl-teal) !important;
  text-decoration: underline !important;
}

/* Post-submit thank-you state — replaces the form once submitted */
.sr-form-embed .submitted-message,
.sr-form-embed .hs-form-success,
.sr-form-embed .hbspt-form .submitted-message {
  font-family: var(--font-body) !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
  color: var(--rl-ink-700) !important;
  padding: 24px !important;
  background: var(--rl-white) !important;
  border: 1px solid var(--rl-line-200) !important;
  border-radius: var(--radius-md) !important;
}
.sr-form-embed .submitted-message strong,
.sr-form-embed .submitted-message h2 {
  color: var(--rl-black) !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
}

/* Mobile — bump input font-size to 16px so iOS doesn't auto-zoom on focus */
@media (max-width: 600px) {
  .sr-form-embed .hs-form .hs-form-field {
    margin-bottom: 14px !important;
  }
  .sr-form-embed .hs-form input.hs-input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
  .sr-form-embed .hs-form select.hs-input,
  .sr-form-embed .hs-form textarea.hs-input {
    font-size: 16px !important;
  }
}

/* ---------- FIX: Product card images — square boxes, fill consistently (v0.2.6) ---------- */
.pathway img {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  object-fit: cover !important;
  object-position: center center !important;
  background: var(--rl-surface-50) !important;
  padding: 0 !important;
  border: 1px solid var(--rl-line-100) !important;
  border-radius: var(--radius-sm) !important;
}
@media (max-width: 900px) {
  .pathway img { aspect-ratio: 4 / 3 !important; }
}

/* ---------- COMPATIBILITY SECTION — full-bleed dark editorial (v0.2.12) ---------- */
/* Full-width image of EN 1254 brass tee + Ridgeline tube on dark stone.
   Image anchored bottom-right so the products stay in view; gradient
   from solid dark on left → transparent right. Copy hugs viewport left
   on wide screens (no centred 1280 container). */
.compatibility {
  position: relative !important;
  display: block !important;
  padding: 0 !important;
  background: #1a1a1a url('./Ridgeline-EN1254-tee-compatibility.png') 75% bottom / cover no-repeat !important;
  color: var(--rl-white) !important;
  min-height: clamp(440px, 58vh, 620px) !important;
  overflow: hidden !important;
}
.compatibility::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(90deg,
    rgba(20,20,20,0.95) 0%,
    rgba(20,20,20,0.86) 28%,
    rgba(20,20,20,0.50) 50%,
    rgba(20,20,20,0.10) 72%,
    rgba(20,20,20,0) 88%) !important;
  pointer-events: none !important;
}
.compatibility-inner {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  min-height: clamp(440px, 58vh, 620px) !important;
  padding: var(--space-8) clamp(32px, 6vw, 96px) !important;
}
.compatibility-copy {
  max-width: 560px !important;
  margin-left: clamp(0px, 4vw, 80px) !important;
}
.compatibility .eyebrow {
  color: var(--rl-teal) !important;
  margin: 0 0 18px !important;
  display: block !important;
}
.compatibility h2 {
  font-family: var(--font-display) !important;
  font-size: clamp(42px, 4.6vw, 68px) !important;
  font-weight: 700 !important;
  line-height: 0.98 !important;
  letter-spacing: -0.02em !important;
  color: var(--rl-white) !important;
  margin: 0 0 24px !important;
}
.compatibility h2 .teal-text { color: var(--rl-teal) !important; }
.compatibility p {
  font-size: clamp(15px, 1.3vw, 18px) !important;
  line-height: 1.55 !important;
  color: rgba(255,255,255,0.86) !important;
  max-width: 540px !important;
  margin: 0 0 16px !important;
}
.compatibility p:last-child { margin-bottom: 0 !important; }
.compatibility::before {
  background: var(--rl-teal) !important;
}
@media (max-width: 768px) {
  .compatibility {
    background-position: 75% center !important;
  }
  .compatibility::after {
    background: linear-gradient(180deg,
      rgba(20,20,20,0.55) 0%,
      rgba(20,20,20,0.86) 55%,
      rgba(20,20,20,0.94) 100%) !important;
  }
  .compatibility h2 { font-size: 36px !important; }
  .compatibility-inner { min-height: 480px !important; padding: var(--space-7) 24px !important; }
}

/* Hide the old Applications-related content in case any leftover styling
   tries to render it. We've swapped it out at the markup level. */
.applications { display: none !important; }

/* ---------- TYPOGRAPHY POLISH (v0.2.7) ---------- */
/* Tighter letter-spacing on display headings for a more architectural feel */
.hero-copy h1, .hero-copy h2 {
  letter-spacing: -0.025em !important;
}
.systems .section-heading h2,
.heat-pump-copy h2,
.editorial-stainless h2,
.compatibility h2,
.sample-copy h2,
.installer-proof .section-heading h2,
.support .section-heading h2,
.technical-copy h2 {
  letter-spacing: -0.018em !important;
  font-feature-settings: 'ss01','kern' !important;
}
/* Eyebrow refinement */
.eyebrow {
  letter-spacing: 0.16em !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
}
/* Body type — feature settings + slight line-height refinement */
body,
.hero-lede,
.hero-note,
.pathway p:not(.pathway-kicker),
.proof-grid p,
.section-heading p:not(.eyebrow),
.heat-pump-copy p,
.sample-copy p,
.editorial-stainless p,
.compatibility p {
  font-feature-settings: 'ss01','kern','cv11' !important;
}
/* Pathway / product card heading refinement */
.pathway h3 {
  letter-spacing: -0.01em !important;
  font-feature-settings: 'ss01','kern' !important;
}
.proof-grid h3 {
  letter-spacing: -0.01em !important;
  font-feature-settings: 'ss01','kern' !important;
}

/* ---------- FIX: Applications section heading restored ---------- */
.applications .section-heading { display: block !important; }
.applications .section-heading {
  max-width: 800px;
  margin: 0 auto var(--space-7);
  text-align: center;
}
.applications .section-heading p:not(.eyebrow) { margin: 0 auto; }
.applications .application-layout::before { content: none !important; }
.application-layout {
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  max-width: 1280px;
  margin: 0 auto;
}
.applications .application-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-5);
  max-width: 1280px;
  margin: var(--space-7) auto 0;
}
.applications .application-list > div {
  padding: var(--space-4) 0;
  border-top: 1px solid var(--rl-line-200);
}
.applications .application-list strong {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--rl-black);
}
.applications .application-list span {
  font-size: 14px;
  color: var(--rl-ink-500);
  line-height: 1.5;
}

/* ---------- FIX: Dark Editorial — Pattern A (full-bleed image) ---------- */
/* Stainless. Not plastic. — full-bleed dark editorial (v0.2.12) */
.editorial-stainless {
  position: relative;
  display: block !important;
  padding: 0 !important;
  /* Image anchored 80% horizontally + bottom vertically so the gloved-hand
     subject stays in view and the bottom of the image isn't clipped. */
  background: var(--rl-black) url('./editorial-stainless.png') 80% bottom / cover no-repeat !important;
  color: var(--rl-white);
  min-height: clamp(440px, 56vh, 620px);
  overflow: hidden;
}
.editorial-stainless::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(10,10,10,0.95) 0%,
    rgba(10,10,10,0.86) 28%,
    rgba(10,10,10,0.50) 50%,
    rgba(10,10,10,0.10) 72%,
    rgba(10,10,10,0) 88%);
  pointer-events: none;
}
.editorial-stainless-inner {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  min-height: clamp(440px, 56vh, 620px) !important;
  padding: var(--space-8) clamp(32px, 6vw, 96px) !important;
}
.editorial-stainless-copy {
  max-width: 540px !important;
  margin-left: clamp(0px, 4vw, 80px) !important;
}
.editorial-stainless h2 {
  font-size: clamp(48px, 5vw, 72px) !important;
  line-height: 1.0 !important;
  letter-spacing: -1px !important;
  color: var(--rl-white) !important;
  margin: 0 0 24px !important;
}
.editorial-stainless p {
  font-size: clamp(16px, 1.4vw, 20px) !important;
  line-height: 1.55 !important;
  color: rgba(255,255,255,0.88) !important;
  max-width: 520px !important;
}
.editorial-stainless .eyebrow {
  color: var(--rl-teal) !important;
  margin-bottom: 18px !important;
}
/* Hide the figure that brand-v3 expects — Pattern A uses background-image */
.editorial-stainless-image { display: none !important; }
@media (max-width: 768px) {
  .editorial-stainless {
    background-position: 75% center !important;
  }
  .editorial-stainless::after {
    background: linear-gradient(180deg,
      rgba(10,10,10,0.55) 0%,
      rgba(10,10,10,0.85) 60%,
      rgba(10,10,10,0.95) 100%);
  }
  .editorial-stainless h2 { font-size: 38px !important; }
}

/* ---------- INTERACTIVE HOUSE-DIAGRAM HOTSPOTS ---------- */
.house-diagram-interactive {
  position: relative;
  margin: 0 auto;
  max-width: 1100px;
}
.house-diagram-interactive .house-image {
  display: block;
  width: 100%;
  height: auto;
}
.house-hotspot {
  position: absolute;
  width: 14px; height: 14px;
  border: 0;
  border-radius: 999px;
  background: var(--rl-teal);
  box-shadow: 0 0 0 4px rgba(0,141,162,0.22), var(--shadow-md);
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: transform var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard);
}
.house-hotspot::before {
  content: '';
  position: absolute; inset: -8px;
  border-radius: inherit;
  background: var(--rl-teal); opacity: 0.18;
  animation: rl-hotspot-pulse 2s ease-out infinite;
}
@keyframes rl-hotspot-pulse {
  0% { transform: scale(1); opacity: 0.25; }
  100% { transform: scale(1.7); opacity: 0; }
}
.house-hotspot::after {
  content: attr(data-label);
  position: absolute;
  left: 50%; bottom: calc(100% + 10px);
  transform: translateX(-50%);
  padding: 8px 12px;
  border-radius: var(--radius-md);
  background: var(--rl-black);
  color: var(--rl-white);
  font-family: var(--font-body); font-size: 12px; font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-standard);
  z-index: 5;
}
.house-hotspot:hover, .house-hotspot:focus-visible {
  transform: translate(-50%, -50%) scale(1.25);
  outline: none;
}
.house-hotspot:hover::after, .house-hotspot:focus-visible::after {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .house-hotspot::before { animation: none; }
}

/* ---------- TECHNICAL — icon + stat blocks (v0.2.10) ---------- */
/* Replaces the old spec-table 5-row data layout with 5 icon+label+value cards. */
.technical .spec-table { display: none !important; }  /* hide legacy table if any markup leaks */
.technical .tech-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-4);
  max-width: var(--max);
  margin: var(--space-7) auto 0;
}
.technical .tech-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--space-6) var(--space-5);
  background: var(--rl-white);
  border: 1px solid var(--rl-line-200);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard),
              transform var(--dur-base) var(--ease-standard);
}
.technical .tech-stat:hover {
  border-color: var(--rl-teal);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.technical .tech-stat-icon {
  width: 28px;
  height: 28px;
  color: var(--rl-teal);
  margin-bottom: var(--space-4);
  flex: 0 0 auto;
}
.technical .tech-stat-label {
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--rl-teal) !important;
  margin: 0 0 var(--space-2) !important;
}
.technical .tech-stat-value {
  font-family: var(--font-display) !important;
  font-size: clamp(15px, 1.2vw, 17px) !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  color: var(--rl-black) !important;
  margin: 0 !important;
}
@media (max-width: 1100px) {
  .technical .tech-stats { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
  .technical .tech-stats { grid-template-columns: 1fr 1fr; }
  .technical .tech-stat { padding: var(--space-5) var(--space-4); }
}
@media (max-width: 480px) {
  .technical .tech-stats { grid-template-columns: 1fr; }
}

/* ---------- SAMPLE REQUEST — full-bleed lifestyle band (v0.2.12) ---------- */
/* Truck + installer at sunset. Copy + CTAs anchored vertical-centre RIGHT
   so the truck stays visible on the left. Side-gradient (transparent left →
   dark right) keeps the truck well-lit and darkens the right for copy. */
.sample-request {
  position: relative !important;
  display: block !important;
  padding: 0 !important;
  background: #1a1a1a url('./Ridgeline-truck-installer-sunset.png') center center / cover no-repeat !important;
  color: var(--rl-white) !important;
  min-height: clamp(460px, 60vh, 600px) !important;
  overflow: hidden !important;
  border-top: 0 !important;
  text-align: left !important;
}
.sample-request::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(90deg,
    rgba(15,15,15,0) 0%,
    rgba(15,15,15,0.05) 30%,
    rgba(15,15,15,0.45) 60%,
    rgba(15,15,15,0.82) 90%,
    rgba(15,15,15,0.92) 100%) !important;
  pointer-events: none !important;
}
.sample-request-inner {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: var(--space-8) clamp(32px, 6vw, 96px) !important;
  min-height: clamp(460px, 60vh, 600px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
}
.sample-request .sample-copy {
  max-width: 540px !important;
  margin-right: clamp(0px, 4vw, 80px) !important;
  text-align: right !important;
}
.sample-request .sample-copy h2 {
  font-family: var(--font-display) !important;
  font-size: clamp(44px, 5vw, 72px) !important;
  font-weight: 700 !important;
  line-height: 0.95 !important;
  letter-spacing: -0.025em !important;
  color: var(--rl-white) !important;
  margin: 0 0 20px !important;
  text-align: right !important;
}
.sample-request .sample-copy h2 .teal-text { color: var(--rl-teal) !important; }
.sample-request .sample-copy p {
  font-size: clamp(16px, 1.4vw, 19px) !important;
  line-height: 1.5 !important;
  color: rgba(255,255,255,0.92) !important;
  max-width: 480px !important;
  margin: 0 0 32px auto !important;
  text-align: right !important;
}
.sample-request .final-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--space-3) !important;
  margin-top: 0 !important;
  justify-content: flex-end !important;
}
@media (max-width: 900px) {
  .sample-request::after {
    background: linear-gradient(180deg,
      rgba(15,15,15,0.35) 0%,
      rgba(15,15,15,0.65) 55%,
      rgba(15,15,15,0.92) 100%) !important;
  }
  .sample-request-inner {
    justify-content: flex-start !important;
    align-items: flex-end !important;
    padding: var(--space-7) 24px !important;
    min-height: 440px !important;
  }
  .sample-request .sample-copy { margin-right: 0 !important; text-align: left !important; max-width: none !important; }
  .sample-request .sample-copy h2 { font-size: 38px !important; text-align: left !important; }
  .sample-request .sample-copy p { text-align: left !important; margin-left: 0 !important; }
  .sample-request .final-actions { justify-content: flex-start !important; }
}

/* ---------- DISTRIBUTOR LOGOS BAND — auto-scrolling marquee (v0.2.8) ---------- */
.distributors {
  padding: var(--space-7) 0;
  border-top: 1px solid var(--border-default);
  text-align: center;
  background: var(--rl-white);
  overflow: hidden;
}
.distributors-eyebrow {
  display: block;
  margin: 0 0 var(--space-6);
  padding: 0 42px;
  color: var(--rl-ink-700);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.distributors-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* Edge fade — logos visually disappear into the page edges, more premium */
  -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
.distributors-marquee-track {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  width: max-content;
  /* 21 stockists × 2 copies = ~42 logos. Bumped from 50s → 110s so the
     scroll speed in pixels/second stays roughly the same as the original
     9-logo set (slow, premium, readable). */
  animation: rl-marquee 110s linear infinite;
}
.distributors-marquee:hover .distributors-marquee-track,
.distributors-marquee:focus-within .distributors-marquee-track {
  animation-play-state: paused;
}
@keyframes rl-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.distributor-logo {
  flex: 0 0 auto;
  height: 44px;
  width: auto;
  max-width: 200px;
  /* mix-blend-mode: multiply blends out the white backgrounds on no-alpha PNGs
     (UKPS, City Plumbing) so they stop rendering as solid rectangles. Logos
     with transparent backgrounds work the same way under multiply.
     filter: grayscale(1) desaturates content; brightness(0.5) deepens the
     remaining greys without going pure black (preserves logo legibility). */
  mix-blend-mode: multiply;
  filter: grayscale(1) brightness(0.5) contrast(1.05);
  opacity: 0.75;
  transition: filter var(--dur-base) var(--ease-standard),
              opacity var(--dur-base) var(--ease-standard);
  user-select: none;
}
.distributor-logo:hover {
  filter: none;
  opacity: 1;
}
/* IPG ships its logo white-on-transparent — invert so it reads on a white
   page. Multiply still blends correctly because the inverted result is dark. */
.distributor-logo[src*="ipg.svg"] {
  filter: invert(1) grayscale(1) brightness(0.5);
}
.distributor-logo[src*="ipg.svg"]:hover {
  filter: invert(1);
}
/* City Plumbing comes as a 600x600 PNG with internal padding — clip the box
   so it doesn't dominate the marquee with empty space. */
.distributor-logo[src*="city-plumbing.png"] {
  height: 56px;
  object-fit: contain;
}
@media (prefers-reduced-motion: reduce) {
  .distributors-marquee-track { animation: none; }
}
@media (max-width: 768px) {
  .distributors-marquee-track { gap: var(--space-6); animation-duration: 80s; }
  .distributor-logo { height: 30px; max-width: 140px; }
}

/* ---------- FOOTER ---------- */
.rl-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.site-footer {
  padding: var(--space-9) 42px var(--space-7);
  background: var(--rl-black);
  color: var(--rl-line-200);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
}
.footer-top {
  display: grid;
  grid-template-columns: 1.2fr 2fr 1fr;
  gap: var(--space-8);
  max-width: 1280px;
  margin: 0 auto var(--space-7);
}
.footer-brand .footer-logo {
  width: 152px;
  filter: brightness(0) invert(1);
}
.footer-tagline {
  margin-top: var(--space-4);
  max-width: 280px;
  color: var(--rl-line-200);
  font-size: 15px;
  line-height: 1.5;
}
.footer-social {
  display: flex; gap: var(--space-3);
  margin: var(--space-5) 0 0;
  padding: 0; list-style: none;
}
.footer-social a {
  color: var(--rl-line-200);
  text-decoration: none;
  font-size: 13px;
  transition: color var(--dur-base) var(--ease-standard);
}
.footer-social a:hover { color: var(--rl-teal); }
.footer-nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}
.footer-col h3 {
  margin: 0 0 var(--space-4);
  color: var(--rl-white);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.footer-col ul { margin: 0; padding: 0; list-style: none; }
.footer-col li { margin-bottom: var(--space-2); }
.footer-col a {
  color: var(--rl-line-200);
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-standard);
}
.footer-col a:hover { color: var(--rl-teal); }
.footer-newsletter h3 {
  margin: 0 0 var(--space-3);
  color: var(--rl-white);
  font-family: var(--font-display);
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.footer-newsletter p {
  margin: 0 0 var(--space-4);
  color: var(--rl-ink-300);
  font-size: 13px;
}
.newsletter-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2);
}
.newsletter-form input {
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.04);
  color: var(--rl-white);
  font-family: var(--font-body);
  font-size: 14px;
  transition: border-color var(--dur-base) var(--ease-standard);
}
.newsletter-form input::placeholder { color: var(--rl-ink-300); }
.newsletter-form input:focus {
  outline: none;
  border-color: var(--rl-teal);
  box-shadow: var(--shadow-focus);
}
.newsletter-form button {
  padding: 12px 20px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--rl-teal);
  color: var(--rl-white);
  font-family: var(--font-display);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-standard);
}
.newsletter-form button:hover { background: var(--rl-teal-hover); }
.footer-newsletter-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 18px;
  border-radius: var(--radius-md);
  background: var(--rl-teal);
  color: var(--rl-white);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: background var(--dur-base) var(--ease-standard);
}
.footer-newsletter-link:hover { background: var(--rl-teal-hover); }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  justify-content: space-between;
  max-width: 1280px;
  margin: 0 auto;
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255,255,255,0.10);
  color: var(--rl-ink-300);
  font-size: 12px;
}
.footer-bottom p { margin: 0; }

@media (max-width: 1100px) {
  .footer-top { grid-template-columns: 1fr; gap: var(--space-7); }
  .footer-nav { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 600px) {
  .site-footer { padding: var(--space-7) 16px var(--space-5); }
  .footer-nav { grid-template-columns: 1fr; gap: var(--space-5); }
  .footer-bottom { font-size: 11px; gap: var(--space-3); }
}

/* ---------- SCROLL-TRIGGERED REVEALS ---------- */
.rl-reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur-slow) var(--ease-standard),
              transform var(--dur-slow) var(--ease-standard);
}
.rl-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .rl-reveal { opacity: 1; transform: none; transition: none; }
}

/* =========================================================
   v0.2.17 — header alignment, per-logo filter tuning, footer logo
   ========================================================= */

/* ---------- HEADER v0.2.19: flex + admin-bar offset + smaller logo ----------
   v0.2.18 logo at 48px tall was too big (Joel feedback). Reduced to 40px.
   Header reduced from 80→72px to match. Plus: WordPress admin bar (32px
   tall on desktop, 46px on mobile) was overlapping the sticky header for
   logged-in users — that's the "moves up a bit on scroll" Joel was seeing
   while logged in. Added `body.admin-bar` rule to push the sticky header
   below the WP admin bar. Logged-out visitors won't have admin-bar class
   so the header sticks to top: 0 normally. */
.site-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 32px !important;
  height: 72px !important;
  min-height: 72px !important;
  max-height: 72px !important;
  padding: 0 40px !important;
  grid-template-columns: none !important;
}
/* Push the sticky header below the WP admin bar when logged in. WP adds
   `admin-bar` class to <body> when the bar is showing. Without this,
   `position: sticky; top: 0` puts the header BEHIND the admin bar. */
body.admin-bar .site-header {
  top: 32px !important;
}
@media screen and (max-width: 782px) {
  body.admin-bar .site-header {
    top: 46px !important;
  }
}
.brand {
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
}
.brand img {
  display: block !important;
  height: 40px !important;
  max-height: 40px !important;
  width: auto !important;
  max-width: 200px !important;
}
.primary-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 1 auto !important;
  gap: 42px !important;
}
.header-cta {
  flex: 0 0 auto !important;
  align-self: center !important;
}
.menu-toggle {
  flex: 0 0 auto !important;
  align-self: center !important;
}
@media (max-width: 1180px) {
  .site-header {
    padding: 0 28px !important;
    height: 68px !important;
    min-height: 68px !important;
    max-height: 68px !important;
    gap: 20px !important;
  }
  .brand img { height: 36px !important; max-height: 36px !important; max-width: 176px !important; }
  .primary-nav { gap: 20px !important; }
}
@media (max-width: 900px) {
  .site-header {
    padding: 0 16px !important;
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
  }
  .brand img { height: 32px !important; max-height: 32px !important; max-width: 152px !important; }
}

/* ---------- FOOTER NAV v0.2.18: 3 columns (was 4 — Legal column dropped) ---------- */
.footer-nav {
  grid-template-columns: repeat(3, 1fr) !important;
}
@media (max-width: 600px) {
  .footer-nav { grid-template-columns: 1fr !important; }
}

/* =========================================================
   v0.2.20 — CRITICAL MOBILE FIXES
   - Hero copy was rendering in a 52vw container (115px wide on iPhone)
     because the v0.2.6 desktop padding rules had !important and never
     got overridden for mobile. Each word in the headline was on its
     own line. Fixed by widening the copy container on mobile.
   - Dark editorial sections (Compatibility, Heat Pump, Stainless. Not
     plastic., Sample Request) had a vertical mobile gradient with 86%
     and 94% black opacity at the bottom — killing the product images.
     Lightened to 30/55/78 (top→bottom) so the image reads through.
   - Pathway images used object-fit: cover with aspect-ratio: 4/3 on
     mobile, which clipped the top of the Flexis U-curve. Switched to
     object-fit: contain so nothing is cropped.
   - Nav chevrons (" v") on items 1-3 had a higher-specificity desktop
     selector that beat the mobile `.primary-nav a::after` reset. Now
     using the same nth-child specificity to actually clear them.
   ========================================================= */

/* 1. Nav chevrons — remove from desktop AND mobile (we have no dropdowns) */
.primary-nav a:nth-child(1)::after,
.primary-nav a:nth-child(2)::after,
.primary-nav a:nth-child(3)::after,
.primary-nav a::after {
  content: "" !important;
}

/* 2. Hero copy mobile sizing — override v0.2.6 desktop padding */
@media (max-width: 900px) {
  .hero-copy {
    width: 100% !important;
    max-width: none !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
  /* Per-slide hero headline sizes — fit the headline in 2-4 lines, not 8+. */
  .hero-panel[data-slide="system"] h1, .hero-panel[data-slide="system"] h2 {
    font-size: clamp(28px, 7vw, 38px) !important;
    line-height: 1.05 !important;
  }
  .hero-panel[data-slide="speed"] h1, .hero-panel[data-slide="speed"] h2 {
    font-size: clamp(40px, 11vw, 56px) !important;
    line-height: 1.0 !important;
  }
  .hero-panel[data-slide="heatpump"] h1, .hero-panel[data-slide="heatpump"] h2 {
    font-size: clamp(32px, 9vw, 48px) !important;
    line-height: 1.05 !important;
  }
  .hero-lede {
    font-size: 16px !important;
    line-height: 1.4 !important;
  }
  .hero-note {
    font-size: 14px !important;
    line-height: 1.4 !important;
  }
}

/* 3. Pathway images — never clip product shots */
.pathway img {
  object-fit: contain !important;
  background: var(--rl-surface-50) !important;
  padding: 12px !important;
}
@media (max-width: 900px) {
  .pathway img {
    aspect-ratio: 4 / 3 !important;
    padding: 16px !important;
  }
}

/* 4. Dark editorial sections — lighter mobile gradients so the
   product imagery actually reads. Add a subtle text-shadow on the
   text content so legibility holds despite the lighter overlay. */
@media (max-width: 768px) {
  .compatibility::after {
    background: linear-gradient(180deg,
      rgba(20,20,20,0.30) 0%,
      rgba(20,20,20,0.55) 55%,
      rgba(20,20,20,0.78) 100%) !important;
  }
  .editorial-stainless::after {
    background: linear-gradient(180deg,
      rgba(10,10,10,0.25) 0%,
      rgba(10,10,10,0.55) 55%,
      rgba(10,10,10,0.78) 100%) !important;
  }
  .heat-pump::after {
    background: linear-gradient(180deg,
      rgba(13,13,13,0.25) 0%,
      rgba(13,13,13,0.55) 55%,
      rgba(13,13,13,0.78) 100%) !important;
  }
  .sample-request::after {
    background: linear-gradient(180deg,
      rgba(15,15,15,0.18) 0%,
      rgba(15,15,15,0.45) 50%,
      rgba(15,15,15,0.75) 100%) !important;
  }
  /* Text-shadow keeps copy legible against lighter overlay */
  .compatibility .eyebrow,
  .compatibility h2,
  .compatibility p,
  .editorial-stainless .eyebrow,
  .editorial-stainless h2,
  .editorial-stainless p,
  .heat-pump-copy .eyebrow,
  .heat-pump-copy h2,
  .heat-pump-copy p,
  .sample-request .eyebrow,
  .sample-request h2,
  .sample-request p {
    text-shadow: 0 2px 10px rgba(0,0,0,0.55) !important;
  }
}

/* 5. Mobile menu — proper drop shadow + slightly bigger touch targets
      so the menu pops visually instead of looking like a faint white box */
@media (max-width: 900px) {
  .primary-nav.is-open {
    box-shadow: 0 18px 44px rgba(11,16,18,0.18) !important;
    border: 1px solid var(--rl-line-200) !important;
    z-index: 25 !important;
  }
  .primary-nav.is-open a {
    padding: 14px 12px !important;
    font-weight: 600 !important;
    font-size: 15px !important;
  }
}

/* =========================================================
   v0.2.21 — CRITICAL MOBILE OVERHAUL #2
   Joel feedback round 2: nav strip leaking to mobile (the desktop
   `display: flex !important` on .primary-nav was overriding the
   mobile `display: none`). Hero copy still wrapping every word.
   Pathway images "too small for that box" (the v0.2.20 contain +
   padding made them tiny). Proof-grid images cropping out the
   subject. Joel: "make this look great" + "remove CTAs + sub-copy
   from hero on mobile".

   Strategy:
   - NAV: hard-block desktop flex from leaking to mobile.
   - HERO: full-bleed image, eyebrow + headline overlay only, no
     lede/note/buttons/spec-rail crowding.
   - PATHWAY: revert to cover + square 1:1 aspect on mobile. Source
     images were auto-cropped to subject bbox + padded to square,
     so cover-centre now fills the box with the actual product.
   - PROOF-GRID: taller mobile box (220px) + per-image object-
     position so subjects (tube bends, foreground tube, three pipes
     side-by-side) stay visible.
   ========================================================= */

/* 1. NAV LEAK FIX — hard-block desktop flex on mobile */
@media (max-width: 900px) {
  .primary-nav {
    display: none !important;
  }
  .primary-nav.is-open {
    display: grid !important;
    gap: 6px !important;
  }
}

/* 2. HERO MOBILE — STACKED layout (image above copy) ----------
   Research-validated 2026 pattern (Apple / Stripe / Notion / Vaillant /
   Wickes all use stacked on mobile). Full-bleed-with-overlay-text fails
   sub-400px because text + product + CTA can't all coexist legibly.
   - Image fills top half (50vh) — clean, no overlay, no gradient
   - Copy below image: eyebrow + headline only (Joel: drop sub-copy + CTAs)
   - Spec rail at the very bottom of the hero block
   - Per-slide image positioning so the subject stays in frame
   - Per-slide font sizes tuned to research's 32-40px sweet spot */
@media (max-width: 900px) {
  /* Hide everything except eyebrow + h1 (per Joel's brief + research's
     ≤6-word-headline / no-subcopy guidance for mobile). */
  .hero-lede,
  .hero-note,
  .hero-actions {
    display: none !important;
  }

  /* Reshape hero — block layout, image stacked above copy. NO overlay. */
  .hero {
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
  /* Image: top of stack, ~50vh, full width, clean (no gradient overlay) */
  .hero-media {
    position: relative !important;
    inset: auto !important;
    z-index: 1 !important;
    width: 100% !important;
    height: 50vh !important;
    min-height: 320px !important;
    max-height: 440px !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
  }
  .hero-image-wrap {
    position: absolute !important;
    inset: 0 !important;
    margin: 0 !important;
  }
  .hero-image-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    padding: 0 !important;
  }
  /* v0.2.29 — final pass:
     - system: 99% (locked)
     - speed: 74% (locked)
     - heatpump: 72 → 75 (Joel: "75") */
  .hero-image-wrap[data-slide-image="system"] img {
    object-position: 99% center !important;
  }
  .hero-image-wrap[data-slide-image="speed"] img {
    object-position: 74% center !important;
  }
  .hero-image-wrap[data-slide-image="heatpump"] img {
    object-position: 75% center !important;
  }
  /* Kill the desktop white-fade gradient — image stays clean. */
  .hero-image-wrap::after {
    display: none !important;
  }

  /* Copy: white card below image, eyebrow + headline only */
  .hero-copy {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 24px 20px 28px !important;
    background: var(--rl-white) !important;
    z-index: 2 !important;
    flex: 1 1 auto !important;
  }
  .hero-progress {
    position: absolute !important;
    top: 12px !important;
    left: 20px !important;
    right: 20px !important;
    z-index: 5 !important;
  }
  .hero-progress-segment::before {
    background: rgba(255,255,255,0.55) !important;
  }
  .hero-progress-fill {
    background: var(--rl-white) !important;
  }
  .hero-panel { position: relative !important; }
  .hero-panel.is-hidden { position: absolute !important; left: -9999px !important; }
  .hero-panel .eyebrow {
    display: block !important;
    margin-bottom: 10px !important;
    color: var(--rl-teal) !important;
  }
  .hero-copy h1, .hero-copy h2 {
    color: var(--rl-black) !important;
    margin: 0 !important;
  }
  /* Per-slide font sizes — research's 32-40px mobile sweet spot.
     System headline is the longest (9 words) so it goes a touch smaller. */
  .hero-panel[data-slide="system"] h1, .hero-panel[data-slide="system"] h2 {
    font-size: clamp(28px, 8vw, 36px) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.01em !important;
  }
  .hero-panel[data-slide="speed"] h1, .hero-panel[data-slide="speed"] h2 {
    font-size: clamp(40px, 12vw, 54px) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.02em !important;
  }
  .hero-panel[data-slide="heatpump"] h1, .hero-panel[data-slide="heatpump"] h2 {
    font-size: clamp(30px, 9vw, 40px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.01em !important;
  }
  .teal-text { color: var(--rl-teal) !important; }
  /* Spec rail — keep below the copy, compact two-column layout */
  .spec-rail {
    position: relative !important;
    inset: auto !important;
    z-index: 4 !important;
    grid-template-columns: repeat(2, 1fr) !important;
    display: grid !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 10px !important;
    letter-spacing: 0.06em !important;
    background: var(--rl-white) !important;
    border-top: 1px solid var(--rl-line-200) !important;
    flex: 0 0 auto !important;
  }
  .spec-rail span {
    padding: 9px 12px !important;
    text-align: left !important;
    border-bottom: 1px solid var(--rl-line-100) !important;
    border-right: 1px solid var(--rl-line-100) !important;
  }
  .spec-rail span:nth-child(2n) {
    border-right: 0 !important;
  }
  .spec-rail span::after { display: none !important; }
}

/* 3. PATHWAY IMAGES — revert v0.2.20 contain, fill the box ----------
   Source images now auto-cropped to subject bbox + square-padded,
   so cover-centre fills the box with the actual product. */
.pathway img {
  object-fit: cover !important;
  object-position: center center !important;
  background: var(--rl-surface-50) !important;
  padding: 0 !important;
  border: 1px solid var(--rl-line-100) !important;
  border-radius: var(--radius-sm) !important;
}
@media (max-width: 900px) {
  .pathway img {
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
  }
}

/* 4. PROOF-GRID IMAGES — taller box + per-image positioning ----------
   At 150px tall on mobile, 1254×1500 source images were cropping
   out the subjects. Bumped to 240px and tuned object-position so:
   - "Long continuous runs" (floor joists): foreground tube + joist
     routing both visible — anchor 70% Y so foreground tube isn't
     chopped off the bottom.
   - "Fewer fittings behind the wall" (vs-elbows): the bends are
     near the top of the source — anchor 32% Y so we see the bends.
   - "Faster installs" (installer-hands): subject ~mid-frame.
   - "Fewer leak points" (curve-dark-stone): editorial centre. */
@media (max-width: 900px) {
  .proof-grid img {
    height: 240px !important;
    object-fit: cover !important;
  }
}
.proof-grid img[src*="floor-joists"] {
  object-position: center 72% !important;
}
.proof-grid img[src*="elbows-comparison"] {
  object-position: center 32% !important;
}
.proof-grid img[src*="installer-hands"] {
  object-position: center 42% !important;
}
.proof-grid img[src*="curve-dark-stone"] {
  object-position: center center !important;
}

/* ---------- DISTRIBUTOR LOGOS: per-brand filter tuning ----------
   The blanket `grayscale(1) brightness(0.5)` works on most logos but crushes
   UKPS (orange UK + blue text), TG Lynes (blue square + black text) and BBS
   (yellow on black roundel) into muddy near-black. Lift brightness on these
   specifically + bump contrast to keep the wordmarks legible. */
.distributor-logo[src*="ukps.png"],
.distributor-logo[src*="tg-lynes.png"] {
  filter: grayscale(1) brightness(0.7) contrast(1.25) !important;
  opacity: 0.9 !important;
}
.distributor-logo[src*="bbs.png"] {
  filter: grayscale(1) brightness(0.55) contrast(1.35) !important;
  opacity: 0.9 !important;
}
/* City Plumbing now ships as SVG (cleaner vector). Update the existing
   src*="city-plumbing.png" rule to match either extension and tune the
   filter so the yellow + light-blue brand mark holds up under grayscale. */
.distributor-logo[src*="city-plumbing"] {
  height: 56px;
  object-fit: contain;
  filter: grayscale(1) brightness(0.6) contrast(1.3) !important;
  opacity: 0.9 !important;
}
.distributor-logo[src*="ukps.png"]:hover,
.distributor-logo[src*="tg-lynes.png"]:hover,
.distributor-logo[src*="bbs.png"]:hover,
.distributor-logo[src*="city-plumbing"]:hover {
  filter: none !important;
  opacity: 1 !important;
}

/* ---------- FOOTER LOGO: bigger + preserve teal ridge mark ----------
   Old asset (ridgeline-logo.png) was the black-on-white logo, painted white
   by `filter: brightness(0) invert(1)` for the dark footer — which also
   killed the teal accent over the lowercase "i". New asset is an SVG with
   white wordmark + brand-teal ridge mark already baked in, so we drop the
   filter entirely and bump the size from 152px to 196px. */
.footer-brand .footer-logo {
  width: 196px !important;
  max-width: 196px !important;
  height: auto !important;
  filter: none !important;
}
@media (max-width: 1100px) {
  .footer-brand .footer-logo { width: 176px !important; }
}


/* ============================================================
   COMMON QUESTIONS / FAQ TEMPLATE — v0.5.0
   ============================================================
   Self-contained styles for /common-questions/. Reuses the same
   .eyebrow, .teal-text, .button, .sr-trust, .site-header and
   footer rules as the other plugin templates.
   ============================================================ */

.ridgeline-faq-2026-body {
  background: #ffffff;
  color: #0e1a23;
}

/* ---------- HERO ---------- */
.faq-hero {
  background: linear-gradient(180deg, #f4f7f8 0%, #ffffff 100%);
  padding: clamp(40px, 6vw, 72px) clamp(20px, 4vw, 48px) clamp(36px, 5vw, 60px);
  border-bottom: 1px solid #e8edee;
}
.faq-hero-inner {
  max-width: 880px;
  margin: 0 auto;
  text-align: left;
}
.faq-hero h1 {
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  line-height: 1.1;
  margin: 0.4rem 0 0.8rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.faq-hero-lede {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.55;
  color: #4a5862;
  margin: 0 0 clamp(20px, 2.5vw, 28px);
  max-width: 720px;
}

/* ---------- SEARCH ---------- */
.faq-search {
  margin-top: clamp(20px, 3vw, 32px);
  position: relative;
}
.faq-search input[type="search"] {
  width: 100%;
  max-width: 720px;
  padding: 14px 18px;
  font-size: 1.05rem;
  font-family: inherit;
  border: 1px solid #cad3d6;
  border-radius: 6px;
  background: #ffffff;
  color: #0e1a23;
  box-shadow: 0 1px 2px rgba(14, 26, 35, 0.04);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.faq-search input[type="search"]:focus {
  outline: none;
  border-color: #008DA2;
  box-shadow: 0 0 0 3px rgba(0, 141, 162, 0.18);
}
.faq-search input[type="search"]::-webkit-search-cancel-button {
  cursor: pointer;
}
.faq-search-empty {
  margin: 14px 0 0;
  padding: 14px 18px;
  font-size: 0.95rem;
  color: #4a5862;
  background: #fff7e6;
  border: 1px solid #f0d8a8;
  border-radius: 6px;
  max-width: 720px;
}

/* ---------- STICKY ANCHOR NAV ---------- */
.faq-anchor-nav {
  position: sticky;
  top: 72px;            /* sit below the 72px site-header */
  z-index: 18;          /* below site-header z-index 20 */
  background: #ffffff;
  border-bottom: 1px solid #e8edee;
  box-shadow: 0 2px 6px rgba(14, 26, 35, 0.04);
}
@media (max-width: 900px) {
  .faq-anchor-nav { top: 64px; }   /* mobile site-header is 64px */
}
body.admin-bar .faq-anchor-nav { top: 104px; }   /* + 32px WP admin bar */
@media screen and (max-width: 782px) {
  body.admin-bar .faq-anchor-nav { top: 110px; }  /* mobile admin bar is 46px */
}
.faq-anchor-nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  gap: 4px;
  padding: 10px clamp(12px, 3vw, 32px);
  scrollbar-width: thin;
}
.faq-anchor-nav-inner a {
  flex: 0 0 auto;
  padding: 8px 14px;
  font-size: 0.92rem;
  font-weight: 600;
  color: #4a5862;
  background: #f4f7f8;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.faq-anchor-nav-inner a:hover,
.faq-anchor-nav-inner a:focus {
  background: #e6f4f7;
  color: #008DA2;
}

/* ---------- SECTIONS ---------- */
.faq-section {
  padding: clamp(48px, 6vw, 80px) clamp(20px, 4vw, 48px);
  border-bottom: 1px solid #f1f4f5;
  scroll-margin-top: 70px; /* anchor offset for sticky nav */
}
.faq-section:nth-of-type(even) {
  background: #fafbfb;
}
.faq-section-inner {
  max-width: 880px;
  margin: 0 auto;
}
.faq-section-head {
  margin-bottom: clamp(28px, 3.5vw, 40px);
}
.faq-section-head h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.15;
  margin: 0.4rem 0 0.6rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #0e1a23;
}
.faq-section-lede {
  font-size: clamp(1rem, 1.4vw, 1.1rem);
  line-height: 1.55;
  color: #4a5862;
  margin: 0;
  max-width: 720px;
}

/* ---------- ACCORDION ITEM ---------- */
.faq-list-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.faq-item {
  background: #ffffff;
  border: 1px solid #e8edee;
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.faq-item:hover {
  border-color: #cad3d6;
}
.faq-item[hidden] { display: none; }

.faq-q-wrap {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}
.faq-q {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 22px;
  background: transparent;
  border: 0;
  text-align: left;
  font-family: inherit;
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  font-weight: 600;
  line-height: 1.4;
  color: #0e1a23;
  cursor: pointer;
  transition: background 0.15s ease;
}
.faq-q:hover { background: #f4f7f8; }
.faq-q:focus { outline: 2px solid #008DA2; outline-offset: -2px; }
.faq-q-text { flex: 1 1 auto; }
.faq-q-icon {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  position: relative;
  margin-top: 2px;
}
.faq-q-icon::before,
.faq-q-icon::after {
  content: "";
  position: absolute;
  background: #008DA2;
  border-radius: 1px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.faq-q-icon::before {
  /* horizontal bar */
  left: 3px; right: 3px; top: 50%;
  height: 2px; transform: translateY(-50%);
}
.faq-q-icon::after {
  /* vertical bar — flips to disappear when expanded */
  left: 50%; top: 3px; bottom: 3px;
  width: 2px; transform: translateX(-50%);
}
.faq-q[aria-expanded="true"] .faq-q-icon::after {
  transform: translateX(-50%) rotate(90deg);
  opacity: 0;
}

.faq-a {
  border-top: 1px solid #e8edee;
  background: #fafbfb;
}
.faq-a[hidden] { display: none; }
.faq-a-inner {
  padding: 20px 22px 24px;
  font-size: clamp(0.97rem, 1.25vw, 1.04rem);
  line-height: 1.65;
  color: #2a3942;
}
.faq-a-inner > * + * { margin-top: 0.9rem; }
.faq-a-inner p { margin: 0; }
.faq-a-inner h4 {
  font-size: 1.02rem;
  font-weight: 700;
  color: #0e1a23;
  margin: 1.1rem 0 0.4rem;
}
.faq-a-inner strong { color: #0e1a23; }
.faq-a-inner em { color: inherit; }
.faq-a-inner code {
  background: #eef2f3;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 0.92em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
}
.faq-a-inner a {
  color: #008DA2;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.faq-a-inner a:hover { text-decoration-thickness: 2px; }

/* Lists inside answers */
.faq-list {
  margin: 0;
  padding-left: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.faq-list li { margin: 0; }
.faq-list li::marker { color: #008DA2; font-weight: 600; }

/* Tables inside answers */
.faq-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #e8edee;
  border-radius: 6px;
  margin: 0.4rem 0;
}
.faq-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  line-height: 1.4;
}
.faq-table th,
.faq-table td {
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid #eef1f2;
}
.faq-table th {
  background: #f4f7f8;
  color: #0e1a23;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  border-bottom: 2px solid #cad3d6;
}
.faq-table tbody tr:last-child td { border-bottom: 0; }
.faq-table tbody tr:nth-child(even) { background: #ffffff; }

/* Source / citation line */
.faq-source {
  margin-top: 1.2rem !important;
  padding-top: 0.8rem;
  border-top: 1px dashed #d8dee0;
  font-size: 0.85rem;
  font-style: italic;
  color: #6a7882;
  line-height: 1.5;
}
.faq-source strong {
  font-style: normal;
  color: #4a5862;
  margin-right: 4px;
}
.faq-source a { color: #4a5862; }

/* Hidden state when search filters out a section / item */
.faq-section[hidden] { display: none; }

/* ---------- CTA BAND (matches products page) ---------- */
.faq-cta {
  background: #0e1a23;
  color: #ffffff;
  padding: clamp(48px, 6vw, 80px) clamp(20px, 4vw, 48px);
  text-align: center;
}
.faq-cta-inner {
  max-width: 760px;
  margin: 0 auto;
}
.faq-cta h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin: 0 0 0.6rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #ffffff;
}
.faq-cta-lede {
  font-size: clamp(1rem, 1.4vw, 1.1rem);
  margin: 0 0 clamp(24px, 3vw, 36px);
  color: #a8b3ba;
  line-height: 1.55;
}
.faq-cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

/* ---------- MOBILE TWEAKS ---------- */
@media (max-width: 720px) {
  .faq-hero { padding-top: 32px; padding-bottom: 28px; }
  .faq-section-inner { padding: 0 4px; }
  .faq-q { padding: 16px 18px; gap: 12px; }
  .faq-q-text { font-size: 0.98rem; line-height: 1.35; }
  .faq-a-inner { padding: 16px 18px 20px; }
  .faq-anchor-nav-inner { padding: 8px 12px; }
  .faq-anchor-nav-inner a { padding: 7px 12px; font-size: 0.85rem; }
}

/* ============================================================
   CONTACT TEMPLATE — v0.5.4
   ============================================================
   /contact/ page. Same brand framework as products + sample-
   request + common-questions. Two-column hero, two-column main
   (form left + direct contact / map right), quick-links band.
   ============================================================ */

.ridgeline-contact-2026-body {
  background: #ffffff;
  color: #0e1a23;
}

/* ---------- HERO (two-column on desktop, stacked on mobile) ---------- */
.cp-hero {
  background: linear-gradient(180deg, #f4f7f8 0%, #ffffff 100%);
  padding: clamp(40px, 6vw, 72px) clamp(20px, 4vw, 48px) clamp(36px, 5vw, 60px);
  border-bottom: 1px solid #e8edee;
}
.cp-hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
@media (max-width: 880px) {
  .cp-hero-inner { grid-template-columns: 1fr; }
}
.cp-hero-text h1 {
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  line-height: 1.1;
  margin: 0.4rem 0 0.8rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.cp-hero-lede {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.55;
  color: #4a5862;
  margin: 0;
  max-width: 560px;
}
.cp-hero-image {
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: 0 12px 32px rgba(14, 26, 35, 0.12);
}
.cp-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 880px) {
  .cp-hero-image { aspect-ratio: 16 / 10; max-height: 320px; }
}

/* ---------- MAIN GRID: form + direct contact ---------- */
.cp-main {
  padding: clamp(48px, 6vw, 80px) clamp(20px, 4vw, 48px);
  background: #ffffff;
}
.cp-main-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(32px, 4vw, 56px);
  align-items: start;
}
@media (max-width: 960px) {
  .cp-main-inner { grid-template-columns: 1fr; }
}

/* Form column */
.cp-section-head {
  margin-bottom: clamp(20px, 2.5vw, 28px);
}
.cp-section-head h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.15;
  margin: 0.4rem 0 0.6rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #0e1a23;
}
.cp-section-lede {
  font-size: clamp(1rem, 1.4vw, 1.1rem);
  line-height: 1.55;
  color: #4a5862;
  margin: 0;
  max-width: 580px;
}

.cp-form-embed,
.cp-form-placeholder {
  background: #fafbfb;
  border: 1px solid #e8edee;
  border-radius: 10px;
  padding: clamp(20px, 3vw, 32px);
}
.cp-form-placeholder {
  background: #fff8e6;
  border-color: #f0d8a8;
  color: #4a5862;
  line-height: 1.55;
}
.cp-form-placeholder p {
  margin: 0 0 0.8rem;
}
.cp-form-placeholder code {
  background: #fff;
  padding: 1px 6px;
  border-radius: 3px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
  font-size: 0.92em;
  color: #0e1a23;
}
.cp-form-spec {
  margin: 0.4rem 0 0;
  padding-left: 1.4rem;
  font-size: 0.95rem;
}
.cp-form-spec li { margin: 0.4rem 0; }

/* Direct contact column */
.cp-direct-col {
  position: sticky;
  top: 24px;
}
@media (max-width: 960px) {
  .cp-direct-col { position: static; }
}
.cp-direct-head {
  margin-bottom: clamp(18px, 2.5vw, 24px);
}
.cp-direct-head h2 {
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  line-height: 1.2;
  margin: 0.4rem 0 0;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #0e1a23;
}

.cp-direct-list {
  list-style: none;
  margin: 0 0 clamp(20px, 2.8vw, 28px);
  padding: 0;
  display: grid;
  gap: clamp(14px, 2vw, 20px);
}
.cp-direct-item {
  background: #f4f7f8;
  border-radius: 8px;
  padding: 16px 18px;
  display: grid;
  gap: 4px;
}
.cp-direct-label {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6a7882;
}
.cp-direct-value {
  font-size: 1.08rem;
  font-weight: 600;
  color: #0e1a23;
  text-decoration: none;
  line-height: 1.4;
}
.cp-direct-value:hover { color: #008DA2; }
.cp-direct-address {
  font-style: normal;
  font-weight: 600;
  color: #0e1a23;
  line-height: 1.5;
}
.cp-direct-note {
  font-size: 0.88rem;
  color: #6a7882;
  margin-top: 2px;
}
.cp-direct-link {
  color: #008DA2;
  text-decoration: none;
  font-weight: 600;
}
.cp-direct-link:hover { text-decoration: underline; }

/* Embedded map */
.cp-map-wrap {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #e8edee;
  box-shadow: 0 4px 12px rgba(14, 26, 35, 0.06);
  background: #f4f7f8;
}
.cp-map {
  display: block;
  width: 100%;
}

/* ---------- QUICK LINKS BAND ---------- */
.cp-quick {
  background: #f4f7f8;
  padding: clamp(48px, 6vw, 80px) clamp(20px, 4vw, 48px);
  border-top: 1px solid #e8edee;
}
.cp-quick-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.cp-quick-title {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.15;
  margin: 0 0 clamp(24px, 3vw, 36px);
  font-weight: 700;
  letter-spacing: -0.015em;
  text-align: center;
  color: #0e1a23;
}
.cp-quick-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 24px);
}
@media (max-width: 880px) { .cp-quick-grid { grid-template-columns: 1fr; } }

.cp-quick-card {
  display: block;
  background: #ffffff;
  border: 1px solid #e8edee;
  border-radius: 10px;
  padding: clamp(20px, 2.5vw, 28px);
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.cp-quick-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(14, 26, 35, 0.08);
  border-color: #cad3d6;
}
.cp-quick-card .eyebrow {
  margin-bottom: 0.4rem;
}
.cp-quick-card h3 {
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height: 1.25;
  margin: 0 0 0.5rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #0e1a23;
}
.cp-quick-card-lede {
  font-size: 0.95rem;
  line-height: 1.5;
  color: #4a5862;
  margin: 0 0 0.9rem;
}
.cp-quick-cta {
  display: inline-block;
  font-weight: 600;
  font-size: 0.92rem;
  color: #008DA2;
}
.cp-quick-card:hover .cp-quick-cta { text-decoration: underline; }

/* ---------- HUBSPOT FORM POLISH (when embedded) ---------- */
.cp-form-embed .hs-form-field { margin-bottom: 14px; }
.cp-form-embed .hs-form-field > label {
  font-weight: 600;
  font-size: 0.92rem;
  color: #0e1a23;
  margin-bottom: 4px;
  display: block;
}
.cp-form-embed .hs-input {
  width: 100% !important;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 1rem;
  border: 1px solid #cad3d6;
  border-radius: 6px;
  background: #ffffff;
  color: #0e1a23;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cp-form-embed textarea.hs-input { min-height: 120px; resize: vertical; }
.cp-form-embed .hs-input:focus {
  outline: none;
  border-color: #008DA2;
  box-shadow: 0 0 0 3px rgba(0, 141, 162, 0.18);
}
.cp-form-embed .hs-button {
  background: #008DA2;
  color: #ffffff;
  border: 0;
  padding: 12px 24px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.cp-form-embed .hs-button:hover { background: #006d80; }
.cp-form-embed .hs-error-msgs,
.cp-form-embed .hs_error_rollup {
  color: #b8351a;
  font-size: 0.88rem;
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
}

/* ---------- QUICK LINKS BAND v0.5.5 ----------
   Sub-lede under the section heading + numbered card prefix.
   Replaces the eyebrow-on-each-card pattern with a single
   numbered visual hook per card. ---------- */
.cp-quick-lede {
  font-size: clamp(1rem, 1.4vw, 1.1rem);
  line-height: 1.55;
  color: #4a5862;
  text-align: center;
  margin: 0 auto clamp(28px, 3.5vw, 40px);
  max-width: 580px;
}
.cp-quick-card-num {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #008DA2;
  background: rgba(0, 141, 162, 0.08);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 0.9rem;
}

/* ============================================================
   TECHNICAL DOWNLOADS TEMPLATE — v0.5.7
   ============================================================ */

.ridgeline-tdp-2026-body {
  background: #ffffff;
  color: #0e1a23;
}

/* ---------- HERO ---------- */
.tdp-hero {
  background: linear-gradient(180deg, #f4f7f8 0%, #ffffff 100%);
  padding: clamp(40px, 6vw, 72px) clamp(20px, 4vw, 48px) clamp(36px, 5vw, 60px);
  border-bottom: 1px solid #e8edee;
}
.tdp-hero-inner {
  max-width: 880px;
  margin: 0 auto;
}
.tdp-hero h1 {
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  line-height: 1.1;
  margin: 0.4rem 0 0.8rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.tdp-hero-lede {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.55;
  color: #4a5862;
  margin: 0;
  max-width: 720px;
}

/* ---------- STICKY ANCHOR NAV ---------- */
.tdp-anchor-nav {
  position: sticky;
  top: 72px;            /* sit below the 72px site-header */
  z-index: 18;          /* below site-header z-index 20 */
  background: #ffffff;
  border-bottom: 1px solid #e8edee;
  box-shadow: 0 2px 6px rgba(14, 26, 35, 0.04);
}
@media (max-width: 900px) {
  .tdp-anchor-nav { top: 64px; }   /* mobile site-header is 64px */
}
body.admin-bar .tdp-anchor-nav { top: 104px; }   /* + 32px WP admin bar */
@media screen and (max-width: 782px) {
  body.admin-bar .tdp-anchor-nav { top: 110px; }  /* mobile admin bar is 46px */
}
.tdp-anchor-nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  gap: 4px;
  padding: 10px clamp(12px, 3vw, 32px);
  scrollbar-width: thin;
}
.tdp-anchor-nav-inner a {
  flex: 0 0 auto;
  padding: 8px 14px;
  font-size: 0.92rem;
  font-weight: 600;
  color: #4a5862;
  background: #f4f7f8;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.tdp-anchor-nav-inner a:hover,
.tdp-anchor-nav-inner a:focus {
  background: #e6f4f7;
  color: #008DA2;
}

/* ---------- DOWNLOAD SECTIONS ---------- */
.tdp-section {
  padding: clamp(48px, 6vw, 80px) clamp(20px, 4vw, 48px);
  border-bottom: 1px solid #f1f4f5;
  scroll-margin-top: 70px;
}
.tdp-section:nth-of-type(even) {
  background: #fafbfb;
}
.tdp-section-inner {
  max-width: 1080px;
  margin: 0 auto;
}
.tdp-section-head {
  margin-bottom: clamp(28px, 3.5vw, 40px);
  max-width: 720px;
}
.tdp-section-head h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.15;
  margin: 0.4rem 0 0.6rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #0e1a23;
}
.tdp-section-lede {
  font-size: clamp(1rem, 1.4vw, 1.1rem);
  line-height: 1.55;
  color: #4a5862;
  margin: 0;
}

/* ---------- DOWNLOAD CARDS ---------- */
.tdp-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(12px, 1.5vw, 16px);
}
.tdp-card {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: clamp(14px, 2vw, 20px);
  align-items: center;
  background: #ffffff;
  border: 1px solid #e8edee;
  border-radius: 10px;
  padding: clamp(16px, 2.2vw, 22px);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.tdp-card:hover {
  border-color: #cad3d6;
  box-shadow: 0 6px 18px rgba(14, 26, 35, 0.06);
  transform: translateY(-1px);
}
.tdp-card-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 141, 162, 0.08);
  border-radius: 8px;
  color: #008DA2;
  flex-shrink: 0;
}
.tdp-card-body {
  min-width: 0;
}
.tdp-card-title {
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  line-height: 1.3;
  margin: 0 0 0.4rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #0e1a23;
}
.tdp-card-desc {
  font-size: 0.95rem;
  line-height: 1.5;
  color: #4a5862;
  margin: 0 0 0.7rem;
}
.tdp-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  font-size: 0.82rem;
}
.tdp-card-tag {
  background: rgba(0, 141, 162, 0.1);
  color: #006d80;
  padding: 2px 9px;
  border-radius: 4px;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-size: 0.72rem;
}
.tdp-card-date {
  color: #6a7882;
}
.tdp-card-action {
  flex-shrink: 0;
}
.tdp-card-btn {
  display: inline-block;
  background: #0e1a23;
  color: #ffffff;
  padding: 10px 18px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  transition: background 0.15s ease;
}
.tdp-card-btn:hover {
  background: #008DA2;
}
@media (max-width: 720px) {
  .tdp-card {
    grid-template-columns: 56px 1fr;
    grid-template-rows: auto auto;
  }
  .tdp-card-action {
    grid-column: 1 / -1;
    justify-self: stretch;
    margin-top: 4px;
  }
  .tdp-card-btn {
    display: block;
    text-align: center;
  }
}

/* ---------- CPD GATED SECTION ---------- */
.tdp-cpd {
  background: linear-gradient(180deg, #0e1a23 0%, #16242f 100%);
  color: #ffffff;
  padding: clamp(56px, 7vw, 96px) clamp(20px, 4vw, 48px);
  scroll-margin-top: 70px;
}
.tdp-cpd-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(32px, 4vw, 56px);
  align-items: start;
}
@media (max-width: 880px) {
  .tdp-cpd-inner { grid-template-columns: 1fr; }
}
.tdp-cpd-text .eyebrow {
  color: #6dd0dd;
}
.tdp-cpd-text h2 {
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  line-height: 1.15;
  margin: 0.4rem 0 0.8rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #ffffff;
}
.tdp-cpd-lede {
  font-size: clamp(1rem, 1.4vw, 1.1rem);
  line-height: 1.6;
  color: #b6c2cb;
  margin: 0 0 clamp(20px, 2.5vw, 28px);
}
.tdp-cpd-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.tdp-cpd-points li {
  position: relative;
  padding-left: 24px;
  color: #d0d8de;
  line-height: 1.5;
  font-size: 0.97rem;
}
.tdp-cpd-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 14px;
  height: 2px;
  background: #6dd0dd;
}

.tdp-cpd-form {
  background: #ffffff;
  color: #0e1a23;
  border-radius: 12px;
  padding: clamp(22px, 3vw, 32px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}
.tdp-cpd-form-head h3 {
  font-size: clamp(1.2rem, 1.8vw, 1.4rem);
  line-height: 1.2;
  margin: 0 0 0.4rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #0e1a23;
}
.tdp-cpd-form-head p {
  font-size: 0.95rem;
  line-height: 1.5;
  color: #4a5862;
  margin: 0 0 clamp(18px, 2vw, 22px);
}

/* HubSpot embedded form polish (CPD) */
.tdp-cpd-hs-embed .hs-form-field { margin-bottom: 14px; }
.tdp-cpd-hs-embed .hs-form-field > label {
  font-weight: 600;
  font-size: 0.92rem;
  color: #0e1a23;
  margin-bottom: 4px;
  display: block;
}
.tdp-cpd-hs-embed .hs-input {
  width: 100% !important;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 1rem;
  border: 1px solid #cad3d6;
  border-radius: 6px;
  background: #ffffff;
  color: #0e1a23;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.tdp-cpd-hs-embed .hs-input:focus {
  outline: none;
  border-color: #008DA2;
  box-shadow: 0 0 0 3px rgba(0, 141, 162, 0.18);
}
.tdp-cpd-hs-embed .hs-button {
  background: #008DA2;
  color: #ffffff;
  border: 0;
  padding: 12px 24px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease;
  width: 100%;
  margin-top: 4px;
}
.tdp-cpd-hs-embed .hs-button:hover { background: #006d80; }
.tdp-cpd-hs-embed .submitted-message {
  text-align: left;
  color: #0e1a23;
  font-size: 1rem;
  line-height: 1.55;
}
.tdp-cpd-hs-embed .hs-error-msgs,
.tdp-cpd-hs-embed .hs_error_rollup {
  color: #b8351a;
  font-size: 0.88rem;
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
}

/* ---------- "CAN'T FIND" CTA BAND ---------- */
.tdp-cta {
  background: #f4f7f8;
  padding: clamp(48px, 6vw, 80px) clamp(20px, 4vw, 48px);
  text-align: center;
}
.tdp-cta-inner {
  max-width: 760px;
  margin: 0 auto;
}
.tdp-cta h2 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  margin: 0 0 0.6rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #0e1a23;
}
.tdp-cta-lede {
  font-size: clamp(1rem, 1.4vw, 1.1rem);
  margin: 0 0 clamp(24px, 3vw, 36px);
  color: #4a5862;
  line-height: 1.55;
}
.tdp-cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

/* ============================================================
   v0.5.8 — Hero background imagery, centered anchor nav, PDF thumbnails
   ============================================================ */

/* ---------- HERO BACKGROUND IMAGE (products + common-questions + technical-downloads) ----------
   Pale opaque pipe/stone shot used as a faint background behind hero text.
   Sits behind a soft white-to-fade overlay so headline text stays legible.
   The contact page intentionally keeps its two-column "Ridgeline truck"
   hero layout from earlier (not in this rule). ---------- */
.pp-hero,
.faq-hero,
.tdp-hero {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.88) 0%, rgba(255,255,255,0.82) 60%, rgba(255,255,255,0.95) 100%),
    url('./sample-request-hero.png?v=2') center right / cover no-repeat,
    linear-gradient(180deg, #f4f7f8 0%, #ffffff 100%);
}
.pp-hero-inner,
.faq-hero-inner,
.tdp-hero-inner {
  position: relative;
  z-index: 1;
}

/* ---------- CENTER ANCHOR NAV CHIPS (products, FAQ, technical-downloads) ---------- */
.pp-anchor-nav-inner,
.faq-anchor-nav-inner,
.tdp-anchor-nav-inner {
  justify-content: center;
}
@media (max-width: 720px) {
  .pp-anchor-nav-inner,
  .faq-anchor-nav-inner,
  .tdp-anchor-nav-inner {
    justify-content: flex-start;     /* allow flex-start when scrolling on mobile */
  }
}

/* ---------- DOWNLOAD CARD: replace SVG icon with PDF thumbnail ---------- */
.tdp-card {
  grid-template-columns: 96px 1fr auto;   /* slightly wider for thumb */
  align-items: stretch;
}
.tdp-card-thumb {
  width: 96px;
  height: 124px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f4f7f8;
  border: 1px solid #e8edee;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(14, 26, 35, 0.06);
}
.tdp-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
/* Fallback when no thumb image (SVG inside) */
.tdp-card-thumb svg {
  color: #008DA2;
}
.tdp-card-thumb:not(:has(img)) {
  background: rgba(0, 141, 162, 0.08);
}
@media (max-width: 720px) {
  .tdp-card {
    grid-template-columns: 78px 1fr;
  }
  .tdp-card-thumb {
    width: 78px;
    height: 100px;
  }
}

/* =========================================================
   TECHNICAL GUIDES — .tg-*
   Editorial article template for /technical-guides/<slug>/.
   Hub + article share the same design language as the FAQ /
   Common Questions pages: white surface, teal accent, precise
   grid, restrained type. No marketing-card overload.
   ========================================================= */

.ridgeline-tg-2026-body {
  background: var(--bg-base);
  color: var(--fg-primary);
  font-family: var(--font-body);
}

.tg-main {
  display: block;
}

/* ---------- Hero ---------- */
.tg-hero {
  padding: 96px 24px 40px;
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-base);
}
.tg-hero-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.tg-breadcrumbs {
  margin: 0 0 28px;
  font-size: 13px;
  color: var(--fg-secondary);
}
.tg-breadcrumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tg-breadcrumbs li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tg-breadcrumbs li + li::before {
  content: "/";
  color: var(--fg-muted);
  margin-right: 8px;
}
.tg-breadcrumbs a {
  color: var(--fg-secondary);
  text-decoration: none;
}
.tg-breadcrumbs a:hover {
  color: var(--rl-teal);
}
.tg-breadcrumbs li[aria-current="page"] {
  color: var(--fg-primary);
}

.tg-hero .eyebrow {
  margin-bottom: 12px;
}
.tg-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--fg-primary);
  margin: 0 0 24px;
  max-width: 880px;
}
.tg-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--fg-secondary);
  margin: 0;
}
.tg-meta time {
  color: var(--fg-secondary);
}
.tg-meta-sep {
  color: var(--fg-muted);
}

/* ---------- Hero image band (v0.14.2, per-guide cropping v0.14.4) ----------
   Sits between the text-only hero and the quick-answer block when the
   guide's frontmatter sets a hero_image. Full-bleed, premium-editorial,
   no decorative chrome. Crop is overridable per guide via CSS custom
   properties set inline on the <img> from frontmatter (fit/position/ratio). */
.tg-hero-image-band {
  width: 100%;
  background: var(--bg-base);
  border-bottom: 1px solid var(--border-default);
}
.tg-hero-image {
  display: block;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  aspect-ratio: var(--tg-hero-ratio, 16 / 7);
  object-fit: var(--tg-hero-fit, cover);
  object-position: var(--tg-hero-position, center center);
  background: var(--rl-surface-50);
}
@media (max-width: 760px) {
  .tg-hero-image {
    aspect-ratio: var(--tg-hero-mobile-ratio, 4 / 3);
  }
}

/* ---------- Quick Answer ---------- */
.tg-quick {
  padding: 40px 24px;
  background: var(--rl-teal-tint);
  border-bottom: 1px solid var(--border-default);
}
.tg-quick-inner {
  max-width: 880px;
  margin: 0 auto;
}
.tg-quick .eyebrow {
  margin-bottom: 16px;
  color: var(--rl-teal);
}
.tg-quick-body p {
  margin: 0 0 12px;
  font-size: 18px;
  line-height: 1.55;
  color: var(--fg-primary);
}
.tg-quick-body p:last-child { margin-bottom: 0; }
.tg-quick-body strong { color: var(--rl-ink-900); }

/* v0.14.5 — "Best when / Not best when" two-column panel inside Quick Answer.
   Markdown convention: end the Quick Answer section with two H3 + UL pairs
   ("### Best when" / "### Not best when"). Paragraphs above remain full-width;
   the H3+UL pairs lay out as side-by-side cards on desktop, stacked on mobile. */
.tg-quick-body .tg-h3 {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rl-teal);
  font-weight: 700;
  margin: 32px 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rl-line-200);
}
.tg-quick-body .tg-h3 + .tg-ul {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0;
}
.tg-quick-body .tg-h3 + .tg-ul li {
  font-size: 15px;
  line-height: 1.55;
  color: var(--rl-ink-700);
  padding-left: 22px;
  margin-bottom: 8px;
}
.tg-quick-body .tg-h3 + .tg-ul li::before {
  top: 11px;
}
@media (min-width: 760px) {
  /* On desktop, lay out H3 + UL pairs in 2 columns. CSS Grid with explicit
     positioning: H3s and ULs follow each other in DOM order; we want the
     pattern [H3-A] [H3-B] / [UL-A] [UL-B]. Use grid with auto-flow column,
     2 rows. Paragraphs above stay full-width via :nth-child / grid-column. */
  .tg-quick-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 56px;
    row-gap: 0;
  }
  .tg-quick-body > p {
    grid-column: 1 / -1;
  }
  /* Grid auto-places H3+UL pairs into the 2 columns naturally because they
     are in DOM order: H3-A, UL-A, H3-B, UL-B. We use grid-auto-flow: row,
     so H3-A goes to col 1 row N, UL-A col 2 row N, H3-B col 1 row N+1,
     UL-B col 2 row N+1 — which is WRONG. Override with explicit column. */
  .tg-quick-body > .tg-h3:nth-of-type(1),
  .tg-quick-body > .tg-h3:nth-of-type(1) + .tg-ul {
    grid-column: 1;
  }
  .tg-quick-body > .tg-h3:nth-of-type(2),
  .tg-quick-body > .tg-h3:nth-of-type(2) + .tg-ul {
    grid-column: 2;
  }
  .tg-quick-body > .tg-h3 { margin-top: 32px; }
}

/* ---------- Article grid (TOC + body) ---------- */
.tg-article {
  padding: 64px 24px 24px;
}
.tg-article-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 64px;
  align-items: start;
}

/* ---------- Table of contents ---------- */
.tg-toc {
  position: sticky;
  top: 32px;
  align-self: start;
  border-left: 2px solid var(--border-default);
  padding: 4px 0 4px 16px;
  font-size: 13px;
}
.tg-toc-label {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rl-teal);
  margin: 0 0 16px;
  font-weight: 600;
}
.tg-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tg-toc-list li {
  margin: 0;
}
.tg-toc-list a {
  color: var(--fg-secondary);
  text-decoration: none;
  line-height: 1.4;
  display: block;
  transition: color var(--dur-fast) var(--ease-standard);
}
.tg-toc-list a:hover {
  color: var(--rl-teal);
}

/* ---------- Body ---------- */
.tg-article-body {
  max-width: 720px;
}
.tg-section {
  margin-bottom: 48px;
}
.tg-section:last-child { margin-bottom: 0; }
.tg-section .tg-h2 {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 700;
  color: var(--fg-primary);
  margin: 0 0 20px;
  scroll-margin-top: 24px;
}
.tg-h4 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--fg-primary);
  margin: 28px 0 8px;
}
.tg-section p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--rl-ink-700);
  margin: 0 0 16px;
}
.tg-section strong {
  color: var(--rl-ink-900);
  font-weight: 600;
}
.tg-section em {
  font-style: italic;
}
.tg-section code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  padding: 2px 6px;
  background: var(--rl-line-100);
  border-radius: var(--radius-sm);
}
.tg-inline-link {
  color: var(--rl-teal);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-standard);
}
.tg-inline-link:hover {
  color: var(--rl-teal-press);
}

/* ---------- Body lists ---------- */
.tg-section .tg-ul,
.tg-section .tg-ol {
  margin: 0 0 24px;
  padding-left: 24px;
}
.tg-section .tg-ul li,
.tg-section .tg-ol li {
  font-size: 16px;
  line-height: 1.65;
  color: var(--rl-ink-700);
  margin-bottom: 8px;
}
.tg-section .tg-ul {
  list-style-type: none;
  padding-left: 4px;
}
.tg-section .tg-ul li {
  position: relative;
  padding-left: 22px;
}
.tg-section .tg-ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 10px;
  height: 1px;
  background: var(--rl-teal);
}
.tg-section .tg-ol {
  padding-left: 28px;
}

/* ---------- Inline figures (v0.14.2) ----------
   Block-level image rendered from ![alt](file.png "Caption") markdown.
   Sits within the article body column (max-width: 720px), with an optional
   caption rendered beneath. Premium-editorial, no border on the image,
   subtle metadata-style caption. */
.tg-section .tg-figure {
  margin: 28px 0 32px;
}
.tg-section .tg-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  background: var(--rl-surface-50);
}
.tg-section .tg-figure figcaption {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg-secondary);
  font-style: italic;
}

/* ---------- Mid-article CTA card (v0.14.5) ----------
   Inline directive [[CTA:label|/url/|body]] inside guide markdown renders as
   this card. Used to drop sample-request / data-sheet / contact CTAs into the
   body without breaking reading rhythm. Dark editorial moment that reverses
   the surrounding light article body. */
.tg-section .tg-cta-card {
  margin: 32px 0 36px;
  padding: 28px 32px;
  background: linear-gradient(135deg, var(--rl-ink-900) 0%, var(--rl-ink-700) 100%);
  border-radius: var(--radius-md);
  color: var(--rl-white);
  display: block;
}
.tg-section .tg-cta-card-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
.tg-section .tg-cta-card-body {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
  margin: 0;
  flex: 1 1 320px;
}
.tg-section .tg-cta-card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  background: var(--rl-teal);
  color: var(--rl-white);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: var(--radius-sm);
  transition: background-color var(--dur-fast) var(--ease-standard);
  white-space: nowrap;
  flex-shrink: 0;
}
.tg-section .tg-cta-card-link:hover {
  background: var(--rl-teal-press);
  color: var(--rl-white);
}
.tg-section .tg-cta-card-link span {
  font-size: 16px;
  transition: transform var(--dur-fast) var(--ease-standard);
}
.tg-section .tg-cta-card-link:hover span {
  transform: translateX(3px);
}
@media (max-width: 600px) {
  .tg-section .tg-cta-card { padding: 22px 24px; }
  .tg-section .tg-cta-card-inner { flex-direction: column; align-items: flex-start; gap: 18px; }
  .tg-section .tg-cta-card-link { width: 100%; justify-content: center; }
}

/* ---------- Callout blockquotes (v0.14.2) ----------
   Block markdown `> text` renders as a teal-tint callout — used for
   suggested-specification wording, key claims, and pull-out quotes.
   Restrained chrome, no decorative iconography. */
.tg-section .tg-callout {
  margin: 28px 0 32px;
  padding: 22px 26px;
  background: var(--rl-teal-tint);
  border-left: 3px solid var(--rl-teal);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.tg-section .tg-callout p {
  margin: 0;
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.55;
  color: var(--fg-primary);
  font-weight: 500;
}
.tg-section .tg-callout p strong {
  color: var(--rl-ink-900);
}

@media (max-width: 760px) {
  .tg-section .tg-figure { margin: 20px 0 28px; }
  .tg-section .tg-figure figcaption { font-size: 13px; }
  .tg-section .tg-callout { padding: 18px 20px; }
  .tg-section .tg-callout p { font-size: 16px; }
}

/* ---------- Comparison tables ---------- */
.tg-table-wrap {
  margin: 24px 0 32px;
  overflow-x: auto;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}
.tg-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.5;
}
.tg-table thead th {
  text-align: left;
  background: var(--rl-line-100);
  color: var(--fg-primary);
  font-weight: 600;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-default);
  white-space: nowrap;
}
.tg-table tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--rl-ink-700);
  vertical-align: top;
}
.tg-table tbody tr:last-child td {
  border-bottom: 0;
}
.tg-table tbody tr:nth-child(even) td {
  background: var(--rl-surface-50);
}
/* v0.14.5 — highlight the Ridgeline / 316L stainless steel row in comparison
   tables. On the pillar, drinking-water, and fewer-fittings tables the
   Ridgeline row is always the last row, so :last-child is a stable target.
   Overrides the even-row tint above. */
.tg-table tbody tr:last-child td {
  background: var(--rl-teal-tint) !important;
  color: var(--rl-ink-900);
  font-weight: 500;
}
.tg-table tbody tr:last-child td:first-child {
  font-weight: 700;
}

/* ---------- FAQs ---------- */
.tg-faqs {
  margin-top: 56px;
}
.tg-faq-list {
  border-top: 1px solid var(--border-default);
}
.tg-faq-item {
  border-bottom: 1px solid var(--border-default);
}
.tg-faq-q-wrap {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}
.tg-faq-q {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--fg-primary);
  line-height: 1.4;
  transition: color var(--dur-fast) var(--ease-standard);
}
.tg-faq-q:hover {
  color: var(--rl-teal);
}
.tg-faq-q:focus-visible {
  outline: 0;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-sm);
}
.tg-faq-q-text {
  flex: 1 1 auto;
}
.tg-faq-q-icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  position: relative;
}
.tg-faq-q-icon::before,
.tg-faq-q-icon::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: transform var(--dur-base) var(--ease-standard);
}
.tg-faq-q-icon::before {
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  transform: translateY(-50%);
}
.tg-faq-q-icon::after {
  left: 50%;
  top: 0;
  width: 2px;
  height: 100%;
  transform: translateX(-50%);
}
.tg-faq-q[aria-expanded="true"] .tg-faq-q-icon::after {
  transform: translateX(-50%) scaleY(0);
}
.tg-faq-a {
  padding: 0 0 24px;
}
.tg-faq-a-inner p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--rl-ink-700);
  margin: 0 0 12px;
}
.tg-faq-a-inner p:last-child {
  margin-bottom: 0;
}
.tg-faq-a-inner ul,
.tg-faq-a-inner ol {
  margin: 12px 0;
  padding-left: 24px;
}
.tg-faq-a-inner li {
  font-size: 16px;
  line-height: 1.6;
  color: var(--rl-ink-700);
}

/* ---------- Sources ---------- */
.tg-sources {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--border-default);
}
.tg-sources .tg-h2 {
  font-size: 22px;
}
.tg-sources-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tg-sources-list li {
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg-secondary);
}
.tg-sources-list a {
  color: var(--rl-teal);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.tg-sources-list a:hover {
  color: var(--rl-teal-press);
}

/* ---------- Related guides ---------- */
.tg-related {
  padding: 64px 24px;
  background: var(--bg-alt);
  border-top: 1px solid var(--border-default);
}
.tg-related-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.tg-related .eyebrow {
  margin-bottom: 12px;
}
.tg-related-title {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-weight: 700;
  color: var(--fg-primary);
  margin: 0 0 32px;
}
.tg-related-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.tg-related-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  background: var(--rl-white);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--fg-primary);
  height: 100%;
  transition: border-color var(--dur-base) var(--ease-standard),
              transform var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard);
}
.tg-related-card:hover {
  border-color: var(--rl-teal);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.tg-related-cat {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rl-teal);
  font-weight: 600;
}
.tg-related-h {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.25;
  font-weight: 600;
  color: var(--fg-primary);
}
.tg-related-short {
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg-secondary);
  flex: 1 1 auto;
}
.tg-related-arrow {
  font-size: 18px;
  color: var(--rl-teal);
  margin-top: 8px;
}

/* ---------- CTA band ---------- */
.tg-cta {
  padding: 80px 24px;
  background: var(--rl-black);
  color: var(--rl-white);
}
.tg-cta-inner {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}
.tg-cta h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-weight: 700;
  margin: 0 0 16px;
  color: var(--rl-white);
}
.tg-cta-lede {
  font-size: 17px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.75);
  max-width: 640px;
  margin: 0 auto 32px;
}
.tg-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.tg-cta-actions .button-secondary {
  background: transparent;
  color: var(--rl-white);
  border-color: rgba(255, 255, 255, 0.4);
}
.tg-cta-actions .button-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--rl-white);
}

/* ---------- Mobile breakpoint ---------- */
@media (max-width: 900px) {
  .tg-hero {
    padding: 64px 24px 32px;
  }
  .tg-quick {
    padding: 32px 24px;
  }
  .tg-quick-body p {
    font-size: 16px;
  }
  .tg-article {
    padding: 40px 24px 16px;
  }
  .tg-article-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .tg-toc {
    position: static;
    border-left: 0;
    border-top: 1px solid var(--border-default);
    padding: 16px 0 0;
  }
  .tg-toc-list {
    flex-direction: column;
    gap: 8px;
  }
  .tg-section .tg-h2 {
    font-size: 24px;
  }
  .tg-related {
    padding: 48px 24px;
  }
  .tg-related-list {
    grid-template-columns: 1fr;
  }
  .tg-related-title {
    font-size: 26px;
  }
  .tg-cta {
    padding: 56px 24px;
  }
}

@media (max-width: 600px) {
  .tg-hero h1 {
    font-size: 28px;
  }
}

/* =========================================================
   TECHNICAL GUIDES HUB — .tgh-*
   /technical-guides/ index page. Editorial library look:
   featured pillar card + 4 category groups + CTA band.
   Reuses .tg-cta and .tg-breadcrumbs from the article styles.
   ========================================================= */

.ridgeline-tg-hub-2026-body {
  background: var(--bg-base);
  color: var(--fg-primary);
  font-family: var(--font-body);
}

.tgh-main { display: block; }

/* ---------- Hero ---------- */
.tgh-hero {
  padding: 96px 24px 48px;
  background: var(--bg-base);
  border-bottom: 1px solid var(--border-default);
}
.tgh-hero-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.tgh-hero .eyebrow {
  margin: 28px 0 16px;
  color: var(--rl-teal);
}
.tgh-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(44px, 6.5vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--fg-primary);
  margin: 0 0 16px;
}
.tgh-hero-lede {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.35;
  color: var(--rl-teal);
  margin: 0 0 24px;
  font-weight: 500;
  max-width: 820px;
}
.tgh-hero-intro {
  font-size: 17px;
  line-height: 1.65;
  color: var(--rl-ink-700);
  margin: 0;
  max-width: 720px;
}

/* ---------- Featured pillar card ---------- */
.tgh-feature {
  padding: 48px 24px;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border-default);
}
.tgh-feature-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.tgh-feature-card {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 48px;
  align-items: stretch;
  padding: 40px;
  background: var(--rl-white);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--fg-primary);
  transition: border-color var(--dur-base) var(--ease-standard),
              transform var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard);
  position: relative;
  overflow: hidden;
}
.tgh-feature-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--rl-teal);
}
.tgh-feature-card:hover {
  border-color: var(--rl-teal);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.tgh-feature-text { padding-left: 8px; }
.tgh-feature-text .eyebrow {
  margin: 0 0 16px;
  color: var(--rl-teal);
}
.tgh-feature-h {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-weight: 700;
  color: var(--fg-primary);
  margin: 0 0 16px;
}
.tgh-feature-short {
  font-size: 17px;
  line-height: 1.55;
  color: var(--rl-ink-700);
  margin: 0 0 24px;
}
.tgh-feature-cta {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--rl-teal);
  letter-spacing: 0.02em;
}
.tgh-feature-mark {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  text-align: right;
  border-left: 1px solid var(--border-subtle);
  padding-left: 32px;
}
.tgh-feature-num {
  font-family: var(--font-display);
  font-size: 88px;
  line-height: 1;
  font-weight: 800;
  color: var(--rl-teal);
  letter-spacing: -0.02em;
}
.tgh-feature-label {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-secondary);
  margin-top: 12px;
  font-weight: 600;
}

/* ---------- Groups ---------- */
.tgh-groups {
  padding: 80px 24px;
}
.tgh-groups-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.tgh-group {
  margin-bottom: 80px;
}
.tgh-group:last-child { margin-bottom: 0; }
.tgh-group-head {
  margin-bottom: 32px;
  border-top: 1px solid var(--border-default);
  padding-top: 24px;
}
.tgh-group-head .eyebrow {
  margin: 0 0 12px;
  color: var(--rl-teal);
}
.tgh-group-title {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-weight: 700;
  color: var(--fg-primary);
  margin: 0;
}
.tgh-card-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.tgh-card-list li { margin: 0; }
.tgh-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  height: 100%;
  background: var(--rl-white);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--fg-primary);
  transition: border-color var(--dur-base) var(--ease-standard),
              transform var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard);
}
.tgh-card:hover {
  border-color: var(--rl-teal);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.tgh-card-h {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.25;
  font-weight: 600;
  color: var(--fg-primary);
}
.tgh-card-short {
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg-secondary);
  flex: 1 1 auto;
}
.tgh-card-cta {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--rl-teal);
  letter-spacing: 0.02em;
  margin-top: 8px;
}

/* ---------- Mobile ---------- */
@media (max-width: 900px) {
  .tgh-hero {
    padding: 64px 24px 32px;
  }
  .tgh-feature {
    padding: 32px 24px;
  }
  .tgh-feature-card {
    grid-template-columns: 1fr;
    padding: 28px;
    gap: 24px;
  }
  .tgh-feature-mark {
    border-left: 0;
    border-top: 1px solid var(--border-subtle);
    padding-left: 0;
    padding-top: 20px;
    align-items: flex-start;
    text-align: left;
    flex-direction: row;
    align-items: baseline;
    gap: 16px;
  }
  .tgh-feature-num { font-size: 56px; }
  .tgh-feature-label { margin-top: 0; }
  .tgh-groups {
    padding: 48px 24px;
  }
  .tgh-group { margin-bottom: 56px; }
  .tgh-card-list {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

@media (max-width: 600px) {
  .tgh-hero h1 { font-size: 36px; }
  .tgh-hero-lede { font-size: 18px; }
}

/* =========================================================
   FLEXIS PAGE — .fp-*
   /flexis/ dedicated product page. Same brand spine as the
   article + hub: white surface, teal accent, precise grid.
   Hero is text-only on a teal/black gradient until a Flexis
   widescreen hero image is dropped in (set via PHP var +
   --fp-hero-image custom property).
   ========================================================= */

.ridgeline-flexis-2026-body {
  background: var(--bg-base);
  color: var(--fg-primary);
  font-family: var(--font-body);
}

.fp-main { display: block; }

/* ---------- Shared section heads ---------- */
.fp-section-head {
  margin-bottom: 40px;
  max-width: 760px;
}
.fp-section-head-tight {
  margin-bottom: 28px;
}
.fp-section-head .eyebrow {
  margin: 0 0 16px;
  color: var(--rl-teal);
}
.fp-section-head h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 38px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-weight: 700;
  color: var(--fg-primary);
  margin: 0 0 18px;
}
.fp-section-head-tight h2 {
  font-size: clamp(24px, 2.8vw, 30px);
  margin-bottom: 0;
}
.fp-section-lede {
  font-size: 17px;
  line-height: 1.6;
  color: var(--rl-ink-700);
  margin: 0;
}

.fp-inline-link {
  color: var(--rl-teal);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.fp-inline-link:hover {
  color: var(--rl-teal-press);
}

/* ---------- Hero ---------- */
.fp-hero {
  position: relative;
  padding: 120px 24px 96px;
  background: linear-gradient(135deg, #003843 0%, var(--rl-black) 70%);
  color: var(--rl-white);
  overflow: hidden;
}
.fp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 75% 30%, rgba(0, 141, 162, 0.35), transparent 55%);
  pointer-events: none;
}
.fp-hero.has-image {
  background-color: var(--rl-black);
  background-image: linear-gradient(110deg, rgba(10,10,10,0.78) 0%, rgba(10,10,10,0.45) 55%, rgba(10,10,10,0.20) 100%), var(--fp-hero-image);
  background-size: cover;
  background-position: center;
}
.fp-hero.has-image::before { display: none; }

.fp-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
}
.fp-hero-copy {
  max-width: 640px;
}
.fp-hero .eyebrow {
  color: var(--rl-teal);
  margin: 0 0 16px;
}
.fp-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(48px, 8vw, 96px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  font-weight: 800;
  color: var(--rl-white);
  margin: 0 0 24px;
}
.fp-hero h1 .teal-text {
  color: var(--rl-teal);
}
.fp-hero-lede {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.35;
  color: var(--rl-white);
  margin: 0 0 20px;
  font-weight: 500;
  max-width: 560px;
}
.fp-hero-note {
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
  margin: 0 0 32px;
  max-width: 540px;
}
.fp-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.fp-hero-actions .button-secondary {
  background: transparent;
  color: var(--rl-white);
  border-color: rgba(255, 255, 255, 0.4);
}
.fp-hero-actions .button-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--rl-white);
}

/* ---------- Why Flexis ---------- */
.fp-why {
  padding: 96px 24px;
  background: var(--bg-base);
}
.fp-why-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.fp-pillar-list {
  list-style: none;
  margin: 48px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px 48px;
}
.fp-pillar {
  position: relative;
  padding-top: 16px;
  border-top: 1px solid var(--border-default);
}
.fp-pillar-num {
  display: block;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--rl-teal);
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}
.fp-pillar-h {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--fg-primary);
  margin: 0 0 10px;
}
.fp-pillar-desc {
  font-size: 15px;
  line-height: 1.6;
  color: var(--rl-ink-700);
  margin: 0;
}

/* ---------- Anatomy ---------- */
.fp-anatomy {
  padding: 96px 24px;
  background: var(--bg-alt);
  border-top: 1px solid var(--border-default);
}
.fp-anatomy-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.fp-anatomy-image {
  background: var(--rl-white);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fp-anatomy-image img {
  display: block;
  max-width: 100%;
  height: auto;
}
.fp-anatomy-text .eyebrow {
  margin: 0 0 16px;
  color: var(--rl-teal);
}
.fp-anatomy-text h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 38px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-weight: 700;
  color: var(--fg-primary);
  margin: 0 0 18px;
}
.fp-anatomy-lede {
  font-size: 17px;
  line-height: 1.6;
  color: var(--rl-ink-700);
  margin: 0 0 20px;
}
.fp-anatomy-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fp-anatomy-list li {
  position: relative;
  padding-left: 24px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--rl-ink-700);
}
.fp-anatomy-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 12px;
  height: 1px;
  background: var(--rl-teal);
}
.fp-anatomy-list strong {
  color: var(--rl-ink-900);
  font-weight: 600;
}

/* ---------- Range ---------- */
.fp-range {
  padding: 96px 24px;
  background: var(--bg-base);
  border-top: 1px solid var(--border-default);
}
.fp-range-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.fp-range-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.fp-range-list li:nth-child(4),
.fp-range-list li:nth-child(5) {
  /* Last two cards span more width on the second row */
}
.fp-range-card {
  background: var(--rl-white);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  transition: border-color var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard);
}
.fp-range-card:hover {
  border-color: var(--rl-teal);
  box-shadow: var(--shadow-md);
}
.fp-range-card-image {
  background: var(--rl-surface-50);
  padding: 32px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--border-subtle);
  min-height: 180px;
}
.fp-range-card-image img {
  max-width: 100%;
  max-height: 140px;
  height: auto;
  width: auto;
  object-fit: contain;
}
.fp-range-card-text {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 auto;
}
.fp-range-card-eyebrow {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rl-teal);
  margin: 0;
  font-weight: 600;
}
.fp-range-card-h {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.25;
  font-weight: 600;
  color: var(--fg-primary);
  margin: 0;
}
.fp-range-card-desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--rl-ink-700);
  margin: 0;
  flex: 1 1 auto;
}
.fp-range-card-sizes {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-secondary);
  margin: 0;
  padding-top: 8px;
  border-top: 1px solid var(--border-subtle);
}
.fp-range-foot {
  margin-top: 32px;
  text-align: center;
  font-size: 14px;
  color: var(--fg-secondary);
}

/* ---------- Specs ---------- */
.fp-specs {
  padding: 80px 24px;
  background: var(--bg-alt);
  border-top: 1px solid var(--border-default);
}
.fp-specs-inner {
  max-width: 880px;
  margin: 0 auto;
}
.fp-specs-grid {
  margin: 32px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
}
.fp-specs-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  padding: 18px 0;
  border-top: 1px solid var(--border-default);
}
.fp-specs-row:last-child {
  border-bottom: 1px solid var(--border-default);
}
.fp-specs-row dt {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-secondary);
  font-weight: 600;
  padding-top: 2px;
}
.fp-specs-row dd {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--fg-primary);
}
.fp-specs-foot {
  margin: 24px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--fg-secondary);
}

/* ---------- Applications ---------- */
.fp-apps {
  padding: 96px 24px;
  background: var(--bg-base);
  border-top: 1px solid var(--border-default);
}
.fp-apps-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.fp-apps-grid {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.fp-apps-card {
  background: var(--rl-white);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color var(--dur-base) var(--ease-standard);
}
.fp-apps-card:hover {
  border-color: var(--rl-teal);
}
.fp-apps-h {
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1.25;
  font-weight: 600;
  color: var(--fg-primary);
  margin: 0;
}
.fp-apps-desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg-secondary);
  margin: 0;
}

/* ---------- Installation ---------- */
.fp-install {
  padding: 80px 24px;
  background: var(--bg-alt);
  border-top: 1px solid var(--border-default);
}
.fp-install-inner {
  max-width: 880px;
  margin: 0 auto;
}
.fp-install-steps {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  counter-reset: install-step;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fp-install-steps li {
  counter-increment: install-step;
  position: relative;
  padding: 14px 16px 14px 56px;
  background: var(--rl-white);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  font-size: 15px;
  line-height: 1.55;
  color: var(--fg-primary);
}
.fp-install-steps li::before {
  content: counter(install-step, decimal-leading-zero);
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--rl-teal);
  letter-spacing: 0.04em;
}
.fp-install-foot {
  margin: 24px 0 0;
  font-size: 13px;
  color: var(--fg-secondary);
}

/* ---------- Mobile ---------- */
@media (max-width: 900px) {
  .fp-hero {
    padding: 80px 24px 64px;
  }
  .fp-why,
  .fp-anatomy,
  .fp-range,
  .fp-apps {
    padding: 64px 24px;
  }
  .fp-specs,
  .fp-install {
    padding: 56px 24px;
  }
  .fp-pillar-list {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .fp-anatomy-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .fp-range-list {
    grid-template-columns: 1fr;
  }
  .fp-apps-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .fp-specs-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

@media (max-width: 600px) {
  .fp-hero h1 { font-size: 44px; }
  .fp-apps-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   HEAT PUMPS PAGE — .hp-*
   /heat-pumps/ application page. Same brand spine as Flexis:
   white surface, teal accent, restrained editorial. Hero is
   full-bleed with the dark dusk heat-pump photo + gradient
   overlay. Reuses .tg-cta, .tg-breadcrumbs, .sr-trust.
   ========================================================= */

.ridgeline-heat-pumps-2026-body {
  background: var(--bg-base);
  color: var(--fg-primary);
  font-family: var(--font-body);
}

.hp-main { display: block; }

/* ---------- Shared section heads ---------- */
.hp-section-head {
  margin-bottom: 40px;
  max-width: 760px;
}
.hp-section-head-tight { margin-bottom: 28px; }
.hp-section-head .eyebrow {
  margin: 0 0 16px;
  color: var(--rl-teal);
}
.hp-section-head h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 38px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-weight: 700;
  color: var(--fg-primary);
  margin: 0 0 18px;
}
.hp-section-head-tight h2 {
  font-size: clamp(24px, 2.8vw, 30px);
  margin-bottom: 0;
}
.hp-section-lede {
  font-size: 17px;
  line-height: 1.6;
  color: var(--rl-ink-700);
  margin: 0;
}

.hp-inline-link {
  color: var(--rl-teal);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
}
.hp-inline-link:hover { color: var(--rl-teal-press); }

/* ---------- Hero ---------- */
.hp-hero {
  position: relative;
  padding: 120px 24px 96px;
  background-color: var(--rl-black);
  background-image:
    linear-gradient(110deg, rgba(10,10,10,0.78) 0%, rgba(10,10,10,0.45) 55%, rgba(10,10,10,0.20) 100%),
    var(--hp-hero-image);
  background-size: cover;
  background-position: center;
  color: var(--rl-white);
  overflow: hidden;
}
.hp-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
}
.hp-hero .tg-breadcrumbs {
  margin-bottom: 28px;
}
.hp-hero .tg-breadcrumbs a,
.hp-hero .tg-breadcrumbs li[aria-current="page"] {
  color: rgba(255, 255, 255, 0.85);
}
.hp-hero .tg-breadcrumbs li + li::before { color: rgba(255, 255, 255, 0.45); }
.hp-hero-copy { max-width: 640px; }
.hp-hero .eyebrow {
  color: var(--rl-teal);
  margin: 0 0 16px;
}
.hp-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--rl-white);
  margin: 0 0 24px;
}
.hp-hero h1 .teal-text { color: var(--rl-teal); }
.hp-hero-lede {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.35;
  color: var(--rl-white);
  margin: 0 0 20px;
  font-weight: 500;
  max-width: 560px;
}
.hp-hero-note {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
  margin: 0 0 32px;
  max-width: 540px;
}
.hp-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.hp-hero-actions .button-secondary {
  background: transparent;
  color: var(--rl-white);
  border-color: rgba(255, 255, 255, 0.4);
}
.hp-hero-actions .button-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--rl-white);
}

/* ---------- Why heat-pump pipework is different ---------- */
.hp-why {
  padding: 96px 24px;
  background: var(--bg-base);
}
.hp-why-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.hp-pillar-list {
  list-style: none;
  margin: 48px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px 48px;
}
.hp-pillar {
  position: relative;
  padding-top: 16px;
  border-top: 1px solid var(--border-default);
}
.hp-pillar-num {
  display: block;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--rl-teal);
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}
.hp-pillar-h {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--fg-primary);
  margin: 0 0 10px;
}
.hp-pillar-desc {
  font-size: 15px;
  line-height: 1.6;
  color: var(--rl-ink-700);
  margin: 0;
}

/* ---------- Application zones ---------- */
.hp-zones {
  padding: 96px 24px;
  background: var(--bg-alt);
  border-top: 1px solid var(--border-default);
}
.hp-zones-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.hp-zones-list {
  list-style: none;
  margin: 48px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.hp-zone-card {
  background: var(--rl-white);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard);
}
.hp-zone-card:hover {
  border-color: var(--rl-teal);
  box-shadow: var(--shadow-md);
}
.hp-zone-eyebrow {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rl-teal);
  margin: 0;
  font-weight: 600;
}
.hp-zone-h {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--fg-primary);
  margin: 0;
}
.hp-zone-desc {
  font-size: 15px;
  line-height: 1.55;
  color: var(--rl-ink-700);
  margin: 0;
  flex: 1 1 auto;
}
.hp-zone-detail {
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg-secondary);
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
}

/* ---------- R-32 HP ---------- */
.hp-r32 {
  padding: 96px 24px;
  background: var(--bg-base);
  border-top: 1px solid var(--border-default);
}
.hp-r32-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.hp-r32-image {
  background: var(--bg-alt);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hp-r32-image img {
  display: block;
  max-width: 100%;
  height: auto;
}
.hp-r32-text .eyebrow {
  margin: 0 0 16px;
  color: var(--rl-teal);
}
.hp-r32-text h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 38px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-weight: 700;
  color: var(--fg-primary);
  margin: 0 0 18px;
}
.hp-r32-lede {
  font-size: 16px;
  line-height: 1.6;
  color: var(--rl-ink-700);
  margin: 0 0 28px;
}
.hp-r32-specs {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--border-default);
}
.hp-r32-specs-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-default);
}
.hp-r32-specs-row dt {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-secondary);
  font-weight: 600;
  padding-top: 2px;
}
.hp-r32-specs-row dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  color: var(--fg-primary);
}
.hp-r32-foot {
  margin: 24px 0 0;
}

/* ---------- Daylight image band ---------- */
.hp-image-band {
  padding: 0;
  background: var(--rl-black);
  border-top: 1px solid var(--border-default);
}
.hp-image-band-figure {
  margin: 0;
  position: relative;
  display: block;
}
.hp-image-band-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 540px;
  object-fit: cover;
}
.hp-image-band-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px clamp(24px, 6vw, 80px);
  background: linear-gradient(180deg, rgba(10,10,10,0) 0%, rgba(10,10,10,0.78) 60%, rgba(10,10,10,0.92) 100%);
  color: var(--rl-white);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hp-image-band-caption .eyebrow {
  color: var(--rl-teal);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  font-family: var(--font-display);
  margin: 0;
}
.hp-image-band-caption span:last-child {
  font-family: var(--font-display);
  font-size: clamp(18px, 2.2vw, 24px);
  line-height: 1.3;
  font-weight: 500;
  max-width: 720px;
}

/* ---------- Specifier checklist ---------- */
.hp-checklist {
  padding: 96px 24px;
  background: var(--bg-base);
  border-top: 1px solid var(--border-default);
}
.hp-checklist-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.hp-checklist-list {
  list-style: none;
  margin: 48px 0 0;
  padding: 0;
  counter-reset: hp-checklist-step;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px 32px;
}
.hp-checklist-step {
  counter-increment: hp-checklist-step;
  position: relative;
  padding: 24px 24px 24px 72px;
  background: var(--rl-white);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}
.hp-checklist-step::before {
  content: counter(hp-checklist-step, decimal-leading-zero);
  position: absolute;
  left: 24px;
  top: 22px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--rl-teal);
  letter-spacing: 0.02em;
}
.hp-checklist-h {
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--fg-primary);
  margin: 0 0 8px;
}
.hp-checklist-desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--rl-ink-700);
  margin: 0;
}
.hp-checklist-foot {
  margin: 32px 0 0;
  font-size: 13px;
  color: var(--fg-secondary);
}

/* ---------- Suggested specification wording ---------- */
.hp-spec {
  padding: 80px 24px;
  background: var(--bg-alt);
  border-top: 1px solid var(--border-default);
}
.hp-spec-inner {
  max-width: 880px;
  margin: 0 auto;
}
.hp-spec-callout {
  margin-top: 28px;
  padding: 32px 36px;
  background: var(--rl-teal-tint);
  border: 1px solid var(--rl-teal);
  border-radius: var(--radius-md);
  position: relative;
}
.hp-spec-callout::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--rl-teal);
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}
.hp-spec-callout p {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.55;
  color: var(--rl-ink-900);
  margin: 0;
  font-weight: 500;
  font-style: italic;
}
.hp-spec-foot {
  margin: 18px 0 0;
  font-size: 13px;
  color: var(--fg-secondary);
}

/* ---------- Insulation notes ---------- */
.hp-insulation {
  padding: 96px 24px;
  background: var(--bg-base);
  border-top: 1px solid var(--border-default);
}
.hp-insulation-inner {
  max-width: 880px;
  margin: 0 auto;
}
.hp-insulation-list {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hp-insulation-list li {
  position: relative;
  padding: 14px 16px 14px 40px;
  background: var(--rl-white);
  border: 1px solid var(--border-default);
  border-left: 3px solid var(--rl-teal);
  border-radius: var(--radius-md);
  font-size: 15px;
  line-height: 1.55;
  color: var(--fg-primary);
}
.hp-insulation-list li::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  background: var(--rl-teal);
  border-radius: 50%;
}

/* ---------- Mobile ---------- */
@media (max-width: 900px) {
  .hp-hero { padding: 80px 24px 64px; }
  .hp-why,
  .hp-zones,
  .hp-r32,
  .hp-checklist,
  .hp-insulation {
    padding: 64px 24px;
  }
  .hp-spec { padding: 56px 24px; }
  .hp-pillar-list,
  .hp-checklist-list {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .hp-zones-list { grid-template-columns: 1fr; }
  .hp-r32-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .hp-r32-specs-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .hp-image-band-caption {
    padding: 18px 24px;
  }
}

@media (max-width: 600px) {
  .hp-hero h1 { font-size: 36px; }
  .hp-hero-lede { font-size: 18px; }
}

/* ---------- Heat Pumps — R-32 HP fittings sub-section ---------- */
.hp-fittings {
  padding: 96px 24px;
  background: var(--bg-base);
  border-top: 1px solid var(--border-default);
}
.hp-fittings-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.hp-fittings-list {
  list-style: none;
  margin: 48px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.hp-fittings-card {
  background: var(--rl-white);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  transition: border-color var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard);
}
.hp-fittings-card:hover {
  border-color: var(--rl-teal);
  box-shadow: var(--shadow-md);
}
.hp-fittings-card-image {
  background: var(--rl-surface-50);
  padding: 28px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--border-subtle);
  min-height: 160px;
}
.hp-fittings-card-image img {
  display: block;
  max-width: 100%;
  max-height: 110px;
  height: auto;
  width: auto;
  object-fit: contain;
}
.hp-fittings-card-text {
  padding: 18px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 auto;
}
.hp-fittings-card-code {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--rl-teal);
  margin: 0;
  font-weight: 600;
}
.hp-fittings-card-h {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.25;
  font-weight: 600;
  color: var(--fg-primary);
  margin: 0;
}
.hp-fittings-card-desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--rl-ink-700);
  margin: 0;
  flex: 1 1 auto;
}
.hp-fittings-foot {
  margin: 32px 0 0;
  text-align: center;
  font-size: 14px;
  color: var(--fg-secondary);
}

@media (max-width: 900px) {
  .hp-fittings { padding: 64px 24px; }
  .hp-fittings-list { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 600px) {
  .hp-fittings-list { grid-template-columns: 1fr; }
}

/* =========================================================
   HEAT PUMPS — mobile + image-band fixes (v0.10.3)
   The two wide heat-pump banners both have the heat pump
   subject on the right side of the frame. On narrow viewports
   "background-position: center" + cover crops the right side
   off entirely. Push focus right on smaller widths and use
   aspect-ratio (instead of max-height) on the daylight band
   so it scales the same way the homepage hero does.
   ========================================================= */

/* Hero — keep heat pump visible on mobile by shifting focus right */
.hp-hero {
  background-position: 75% center;
}
@media (max-width: 900px) {
  .hp-hero {
    background-position: 80% center;
    padding: 64px 20px 48px;
  }
}
@media (max-width: 600px) {
  .hp-hero {
    background-position: 82% center;
    padding: 48px 18px 36px;
    min-height: 480px;
  }
}

/* Daylight image band — drop max-height, use aspect-ratio instead.
   Wide on desktop, taller on mobile so the heat pump subject stays
   visible. object-position favours the right where the heat pump is. */
.hp-image-band-img {
  aspect-ratio: 16 / 7;
  max-height: none;
  object-position: 70% center;
}
@media (max-width: 900px) {
  .hp-image-band-img {
    aspect-ratio: 3 / 2;
    object-position: 75% center;
  }
}
@media (max-width: 600px) {
  .hp-image-band-img {
    aspect-ratio: 4 / 3;
    object-position: 78% center;
  }
}

/* Caption — tighten on small screens so it doesn't dominate the photo */
@media (max-width: 600px) {
  .hp-image-band-caption {
    padding: 14px 18px;
  }
  .hp-image-band-caption span:last-child {
    font-size: 16px;
    line-height: 1.3;
  }
}

/* =========================================================
   HOMEPAGE — Audience rail (v0.14.1)
   Replaces the previous 3-card .audience-selector treatment
   per Joel's brief 2026-05-08 ("more subtle, beautiful, the
   homepage is so nice now we cannot mess this up"). A quiet
   horizontal rail with eyebrow + 3 inline audience names,
   sat between the hero spec-rail and the Systems block.
   Premium type, animated underline on hover, restrained.
   ========================================================= */

.audience-rail {
  padding: 36px 24px 40px;
  background: var(--bg-base);
  text-align: center;
  border-bottom: 1px solid var(--border-default);
}
.audience-rail-inner {
  max-width: 800px;
  margin: 0 auto;
}
.audience-rail-eyebrow {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rl-ink-700);
  font-weight: 600;
  margin: 0 0 18px;
}
.audience-rail-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(28px, 5vw, 64px);
}
.audience-rail-link {
  font-family: var(--font-display);
  font-size: clamp(15px, 1.2vw, 18px);
  font-weight: 600;
  color: var(--fg-primary);
  text-decoration: none;
  letter-spacing: -0.005em;
  position: relative;
  padding: 4px 0;
  transition: color var(--dur-base) var(--ease-standard);
}
.audience-rail-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--rl-teal);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--dur-base) var(--ease-standard);
}
.audience-rail-link:hover {
  color: var(--rl-teal);
}
.audience-rail-link:hover::after {
  transform: scaleX(1);
}
.audience-rail-link:focus-visible {
  outline: 2px solid var(--rl-teal);
  outline-offset: 6px;
  border-radius: 2px;
}

@media (max-width: 600px) {
  .audience-rail { padding: 28px 16px 32px; }
  .audience-rail-eyebrow { margin-bottom: 14px; }
  .audience-rail-list { gap: 24px; }
}

/* =========================================================
   UNDERFLOOR PAGE — .uf-*
   /underfloor/ application page. Same brand spine as Heat
   Pumps + Flexis. Hero text-only on teal/black gradient
   until Joel delivers a widescreen underfloor install image.
   ========================================================= */

.ridgeline-uf-2026-body {
  background: var(--bg-base);
  color: var(--fg-primary);
  font-family: var(--font-body);
}

.uf-main { display: block; }

.uf-section-head {
  margin-bottom: 40px;
  max-width: 760px;
}
.uf-section-head-tight { margin-bottom: 28px; }
.uf-section-head .eyebrow {
  margin: 0 0 16px;
  color: var(--rl-teal);
}
.uf-section-head h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 38px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-weight: 700;
  color: var(--fg-primary);
  margin: 0 0 18px;
}
.uf-section-head-tight h2 {
  font-size: clamp(24px, 2.8vw, 30px);
  margin-bottom: 0;
}
.uf-section-lede {
  font-size: 17px;
  line-height: 1.6;
  color: var(--rl-ink-700);
  margin: 0;
}
.uf-inline-link {
  color: var(--rl-teal);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  font-weight: 600;
}
.uf-inline-link:hover { color: var(--rl-teal-press); }

/* Hero — teal/black gradient + text overlay; switches to image when
   --uf-hero-image is set on the section element. */
.uf-hero {
  position: relative;
  padding: 80px 24px 56px;
  background: linear-gradient(135deg, #003843 0%, var(--rl-black) 70%);
  color: var(--rl-white);
  overflow: hidden;
}
.uf-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 75% 30%, rgba(0, 141, 162, 0.35), transparent 55%);
  pointer-events: none;
}
.uf-hero.has-image {
  background-color: var(--rl-black);
  background-image: linear-gradient(110deg, rgba(10,10,10,0.78) 0%, rgba(10,10,10,0.45) 55%, rgba(10,10,10,0.20) 100%), var(--uf-hero-image);
  background-size: cover;
  background-position: 75% center;
}
.uf-hero.has-image::before { display: none; }
.uf-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
}
.uf-hero-copy { max-width: 640px; }
.uf-hero .eyebrow {
  color: var(--rl-teal);
  margin: 0 0 16px;
}
.uf-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--rl-white);
  margin: 0 0 24px;
}
.uf-hero h1 .teal-text { color: var(--rl-teal); }
.uf-hero-lede {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.35;
  color: var(--rl-white);
  margin: 0 0 20px;
  font-weight: 500;
  max-width: 560px;
}
.uf-hero-note {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
  margin: 0 0 32px;
  max-width: 540px;
}
.uf-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.uf-hero-actions .button-secondary {
  background: transparent;
  color: var(--rl-white);
  border-color: rgba(255, 255, 255, 0.4);
}
.uf-hero-actions .button-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--rl-white);
}

/* Why-stainless pillars (mirrors hp-pillar) */
.uf-why { padding: 96px 24px; background: var(--bg-base); }
.uf-why-inner { max-width: 1100px; margin: 0 auto; }
.uf-pillar-list {
  list-style: none;
  margin: 48px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px 48px;
}
.uf-pillar { padding-top: 16px; border-top: 1px solid var(--border-default); }
.uf-pillar-num {
  display: block;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--rl-teal);
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}
.uf-pillar-h {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--fg-primary);
  margin: 0 0 10px;
}
.uf-pillar-desc {
  font-size: 15px;
  line-height: 1.6;
  color: var(--rl-ink-700);
  margin: 0;
}

/* Products section — uses .pp-card-uf classes from products page CSS */
.uf-products { padding: 96px 24px; background: var(--bg-alt); border-top: 1px solid var(--border-default); }
.uf-products-inner { max-width: 1100px; margin: 0 auto; }
.uf-products .pp-uf-grid { margin-top: 48px; }
.uf-products-foot {
  margin-top: 32px;
  text-align: center;
  font-size: 14px;
  color: var(--fg-secondary);
}

/* Heat pump synergy — 2-col with image right */
.uf-heatpump { padding: 96px 24px; background: var(--bg-base); border-top: 1px solid var(--border-default); }
.uf-heatpump-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 64px;
  align-items: center;
}
.uf-heatpump-text .eyebrow { margin: 0 0 16px; color: var(--rl-teal); }
.uf-heatpump-text h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 38px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-weight: 700;
  color: var(--fg-primary);
  margin: 0 0 20px;
}
.uf-heatpump-lede {
  font-size: 17px;
  line-height: 1.6;
  color: var(--rl-ink-700);
  margin: 0 0 16px;
}
.uf-heatpump-detail {
  font-size: 15px;
  line-height: 1.6;
  color: var(--rl-ink-700);
  margin: 0 0 24px;
}
.uf-heatpump-link { margin: 0; }
.uf-heatpump-image {
  background: var(--bg-alt);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.uf-heatpump-image img { max-width: 100%; height: auto; }

/* Integration — 2x2 grid */
.uf-integration { padding: 96px 24px; background: var(--bg-alt); border-top: 1px solid var(--border-default); }
.uf-integration-inner { max-width: 1100px; margin: 0 auto; }
.uf-integration-list {
  list-style: none;
  margin: 48px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.uf-integration-list li {
  background: var(--rl-white);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 24px 28px;
}
.uf-integration-h {
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--fg-primary);
  margin: 0 0 8px;
}
.uf-integration-desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--rl-ink-700);
  margin: 0;
}

/* Spec wording callout (mirrors hp-spec-callout) */
.uf-spec { padding: 80px 24px; background: var(--bg-base); border-top: 1px solid var(--border-default); }
.uf-spec-inner { max-width: 880px; margin: 0 auto; }
.uf-spec-callout {
  margin-top: 28px;
  padding: 32px 36px;
  background: var(--rl-teal-tint);
  border: 1px solid var(--rl-teal);
  border-radius: var(--radius-md);
  position: relative;
}
.uf-spec-callout::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--rl-teal);
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}
.uf-spec-callout p {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.55;
  color: var(--rl-ink-900);
  margin: 0;
  font-weight: 500;
  font-style: italic;
}
.uf-spec-foot {
  margin: 18px 0 0;
  font-size: 13px;
  color: var(--fg-secondary);
}

@media (max-width: 900px) {
  .uf-hero { padding: 80px 24px 64px; }
  .uf-why,
  .uf-products,
  .uf-heatpump,
  .uf-integration { padding: 64px 24px; }
  .uf-spec { padding: 56px 24px; }
  .uf-pillar-list,
  .uf-integration-list { grid-template-columns: 1fr; gap: 20px; }
  .uf-heatpump-inner { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 600px) {
  .uf-hero h1 { font-size: 36px; }
  .uf-hero-lede { font-size: 18px; }
}

/* =========================================================
   HOT & COLD WATER PAGE — .hc-*
   /hot-and-cold-water/ whole-home application page. Hero
   uses Ridgeline-whole-home-cutaway-garden.png (same image
   as homepage hero + Specification Pack PDF cover).
   ========================================================= */

.ridgeline-hc-2026-body {
  background: var(--bg-base);
  color: var(--fg-primary);
  font-family: var(--font-body);
}

.hc-main { display: block; }

.hc-section-head { margin-bottom: 40px; max-width: 760px; }
.hc-section-head-tight { margin-bottom: 28px; }
.hc-section-head .eyebrow { margin: 0 0 16px; color: var(--rl-teal); }
.hc-section-head h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 38px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-weight: 700;
  color: var(--fg-primary);
  margin: 0 0 18px;
}
.hc-section-head-tight h2 { font-size: clamp(24px, 2.8vw, 30px); margin-bottom: 0; }
.hc-section-lede {
  font-size: 17px;
  line-height: 1.6;
  color: var(--rl-ink-700);
  margin: 0;
}
.hc-inline-link {
  color: var(--rl-teal);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.hc-inline-link:hover { color: var(--rl-teal-press); }

/* Hero — refined editorial treatment over the bright marble banner image.
   Stronger left-side white gradient (cleaner copy zone), oversized H1
   (clamp 60–104px, weight 800, tight tracking) so the typography commands
   the photo. 4 elements only: eyebrow / H1 / lede / buttons (no redundant
   note — credentials live in the trust band immediately below). */
.hc-hero {
  position: relative;
  padding: 128px 24px 104px;
  background-color: var(--bg-base);
  background-image:
    linear-gradient(90deg,
      rgba(255,255,255,1) 0%,
      rgba(255,255,255,0.97) 32%,
      rgba(255,255,255,0.55) 50%,
      rgba(255,255,255,0.10) 68%,
      rgba(255,255,255,0) 80%),
    var(--hc-hero-image);
  background-size: cover;
  background-position: 79% bottom;
  color: var(--fg-primary);
  overflow: hidden;
}
.hc-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
}
.hc-hero-copy { max-width: 640px; }
.hc-hero .eyebrow {
  color: var(--rl-teal);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  margin: 0 0 24px;
}
.hc-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(48px, 6.2vw, 84px);
  line-height: 1.0;
  letter-spacing: -0.03em;
  font-weight: 800;
  color: var(--fg-primary);
  margin: 0 0 28px;
}
.hc-hero h1 .teal-text { color: var(--rl-teal); }
.hc-hero-lede {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.35;
  color: var(--rl-ink-700);
  margin: 0 0 36px;
  font-weight: 500;
  max-width: 540px;
}
.hc-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
/* Note element no longer rendered. Keep the rule as a no-op for safety in case
   we ever re-introduce it; uses default-light-bg styling automatically. */

/* Pillars */
.hc-why { padding: 96px 24px; background: var(--bg-base); }
.hc-why-inner { max-width: 1100px; margin: 0 auto; }
.hc-pillar-list {
  list-style: none;
  margin: 48px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px 48px;
}
.hc-pillar { padding-top: 16px; border-top: 1px solid var(--border-default); }
.hc-pillar-num {
  display: block;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--rl-teal);
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}
.hc-pillar-h {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--fg-primary);
  margin: 0 0 10px;
}
.hc-pillar-desc {
  font-size: 15px;
  line-height: 1.6;
  color: var(--rl-ink-700);
  margin: 0;
}

/* System cards */
.hc-system { padding: 96px 24px; background: var(--bg-alt); border-top: 1px solid var(--border-default); }
.hc-system-inner { max-width: 1100px; margin: 0 auto; }
.hc-system-list {
  list-style: none;
  margin: 48px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.hc-system-card {
  background: var(--rl-white);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard);
}
.hc-system-card:hover { border-color: var(--rl-teal); box-shadow: var(--shadow-md); }
.hc-system-eyebrow {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rl-teal);
  margin: 0;
  font-weight: 600;
}
.hc-system-h {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--fg-primary);
  margin: 0;
}
.hc-system-desc {
  font-size: 15px;
  line-height: 1.55;
  color: var(--rl-ink-700);
  margin: 0;
  flex: 1 1 auto;
}

/* Two-fitting routes (P1 vs RidgeLock) */
.hc-fittings { padding: 96px 24px; background: var(--bg-base); border-top: 1px solid var(--border-default); }
.hc-fittings-inner { max-width: 1100px; margin: 0 auto; }
.hc-fittings-grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.hc-fittings-card {
  background: var(--rl-white);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hc-fittings-eyebrow {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rl-teal);
  margin: 0;
  font-weight: 600;
}
.hc-fittings-h {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--fg-primary);
  margin: 0 0 4px;
}
.hc-fittings-desc {
  font-size: 15px;
  line-height: 1.6;
  color: var(--rl-ink-700);
  margin: 0;
  flex: 1 1 auto;
}
.hc-fittings-specs {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--fg-secondary);
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
}
.hc-fittings-foot {
  margin-top: 32px;
  text-align: center;
  font-size: 14px;
  color: var(--fg-secondary);
}

/* Spec wording callout */
.hc-spec { padding: 80px 24px; background: var(--bg-alt); border-top: 1px solid var(--border-default); }
.hc-spec-inner { max-width: 880px; margin: 0 auto; }
.hc-spec-callout {
  margin-top: 28px;
  padding: 32px 36px;
  background: var(--rl-teal-tint);
  border: 1px solid var(--rl-teal);
  border-radius: var(--radius-md);
  position: relative;
}
.hc-spec-callout::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--rl-teal);
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}
.hc-spec-callout p {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.55;
  color: var(--rl-ink-900);
  margin: 0 0 12px;
  font-weight: 500;
  font-style: italic;
}
.hc-spec-callout p:last-child { margin-bottom: 0; }
.hc-spec-foot {
  margin: 18px 0 0;
  font-size: 13px;
  color: var(--fg-secondary);
}

/* Further reading list */
.hc-further { padding: 96px 24px; background: var(--bg-base); border-top: 1px solid var(--border-default); }
.hc-further-inner { max-width: 880px; margin: 0 auto; }
.hc-further-list {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hc-further-list li {
  position: relative;
  padding: 16px 20px 16px 40px;
  background: var(--rl-white);
  border: 1px solid var(--border-default);
  border-left: 3px solid var(--rl-teal);
  border-radius: var(--radius-md);
  font-size: 15px;
  line-height: 1.55;
  color: var(--fg-primary);
}
.hc-further-list li::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  background: var(--rl-teal);
  border-radius: 50%;
}

@media (max-width: 900px) {
  .hc-hero { padding: 80px 24px 64px; background-position: 74% center; }
  .hc-why,
  .hc-system,
  .hc-fittings,
  .hc-further { padding: 64px 24px; }
  .hc-spec { padding: 56px 24px; }
  .hc-pillar-list { grid-template-columns: 1fr; gap: 20px; }
  .hc-system-list { grid-template-columns: 1fr; }
  .hc-fittings-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .hc-hero { background-position: 74% center; padding: 56px 18px 40px; min-height: 440px; }
  .hc-hero h1 { font-size: 42px; line-height: 1.0; }
  .hc-hero-lede { font-size: 17px; }
}

/* ---------- Underfloor — editorial image band (caption left over natural dark area) ---------- */
.uf-image-band {
  padding: 0;
  background: var(--rl-black);
  border-top: 1px solid var(--border-default);
}
.uf-image-band-figure {
  position: relative;
  margin: 0;
  display: block;
}
.uf-image-band-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  object-position: 65% center;
}
/* Left-side horizontal dark gradient — sits IN the natural shadow of the image
   so copy reads cleanly on the left without dominating the photo on the right. */
.uf-image-band-figure::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(10,10,10,0.85) 0%, rgba(10,10,10,0.55) 28%, rgba(10,10,10,0.10) 55%, rgba(10,10,10,0) 70%);
  pointer-events: none;
}
.uf-image-band-caption {
  position: absolute;
  top: 50%;
  left: clamp(24px, 7vw, 96px);
  transform: translateY(-50%);
  margin: 0;
  padding: 0;
  max-width: clamp(300px, 42%, 520px);
  color: var(--rl-white);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.uf-image-band-eyebrow {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rl-teal);
  font-weight: 600;
  margin: 0;
}
.uf-image-band-h {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.6vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-weight: 700;
  color: var(--rl-white);
  margin: 0;
}
.uf-image-band-detail {
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
  max-width: 460px;
}

@media (max-width: 900px) {
  /* Stack: image on top, copy at bottom on a vertical gradient.
     Caption-overlay-on-the-left does not work on narrow viewports. */
  .uf-image-band-img { aspect-ratio: 3 / 2; object-position: 70% center; }
  .uf-image-band-figure::before {
    background: linear-gradient(180deg, rgba(10,10,10,0) 50%, rgba(10,10,10,0.88) 100%);
  }
  .uf-image-band-caption {
    top: auto;
    bottom: 24px;
    left: 24px;
    right: 24px;
    transform: none;
    max-width: none;
    gap: 10px;
  }
  .uf-image-band-h { font-size: 24px; }
  .uf-image-band-detail { font-size: 14px; }
}
@media (max-width: 600px) {
  .uf-image-band-img { aspect-ratio: 4 / 3; }
  .uf-image-band-caption { bottom: 16px; left: 18px; right: 18px; gap: 8px; }
  .uf-image-band-h { font-size: 20px; }
}

/* =========================================================
   HOT & COLD WATER — light editorial image band
   Joel's widescreen Ridgelock-on-stone image. Subjects on
   the right of the frame, warm-cream stone on the left for
   copy overlay. White-fade horizontal gradient for copy
   readability + dark editorial typography.
   ========================================================= */
.hc-image-band {
  padding: 0;
  background: var(--bg-base);
  border-top: 1px solid var(--border-default);
  border-bottom: 1px solid var(--border-default);
}
.hc-image-band-figure {
  position: relative;
  margin: 0;
  display: block;
}
.hc-image-band-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 2;
  object-fit: cover;
  object-position: 75% bottom;
}
/* White-fade gradient on the left so the cream stone area reads cleanly
   under dark editorial copy; fades to transparent on the right where the
   brass + tube subjects live. */
.hc-image-band-figure::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.78) 28%, rgba(255,255,255,0.32) 50%, rgba(255,255,255,0) 68%);
  pointer-events: none;
}
.hc-image-band-caption {
  position: absolute;
  top: 50%;
  left: clamp(24px, 7vw, 96px);
  transform: translateY(-50%);
  margin: 0;
  padding: 0;
  max-width: clamp(320px, 44%, 540px);
  color: var(--fg-primary);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hc-image-band-eyebrow {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rl-teal);
  font-weight: 600;
  margin: 0;
}
.hc-image-band-h {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.6vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-weight: 700;
  color: var(--fg-primary);
  margin: 0;
}
.hc-image-band-detail {
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.55;
  color: var(--rl-ink-700);
  margin: 0;
  max-width: 480px;
}

@media (max-width: 900px) {
  .hc-image-band-img { aspect-ratio: 3 / 2; object-position: 75% center; }
  .hc-image-band-figure::before {
    background: linear-gradient(180deg, rgba(255,255,255,0) 45%, rgba(255,255,255,0.92) 100%);
  }
  .hc-image-band-caption {
    top: auto;
    bottom: 24px;
    left: 24px;
    right: 24px;
    transform: none;
    max-width: none;
    gap: 10px;
  }
  .hc-image-band-h { font-size: 24px; }
  .hc-image-band-detail { font-size: 14px; }
}
@media (max-width: 600px) {
  .hc-image-band-img { aspect-ratio: 4 / 3; }
  .hc-image-band-caption { bottom: 16px; left: 18px; right: 18px; gap: 8px; }
  .hc-image-band-h { font-size: 20px; }
}

/* HOT & COLD WATER — light CTA band override removed in v0.12.12
   when the tg-cta band was replaced with the homepage's full-bleed
   .sample-request lifestyle band (truck + installer at sunset). The
   transition into the footer is now image → dark gradient → footer,
   handled by .sample-request CSS, no body-scoped overrides needed. */

/* =========================================================
   HOT & COLD WATER — fittings cards now have product images
   Image area at top (4:3, surface-50 background, contained or
   covered depending on subject), text below with padding.
   Restructure preserves the existing card border + hover.
   ========================================================= */
.hc-fittings-card {
  padding: 0;
  overflow: hidden;
}
.hc-fittings-card-image {
  background: var(--rl-surface-50);
  aspect-ratio: 3 / 2;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--border-subtle);
  overflow: hidden;
}
.hc-fittings-card-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  padding: 24px;
}
.hc-fittings-card-text {
  padding: 28px 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 auto;
}

@media (max-width: 600px) {
  .hc-fittings-card-image { aspect-ratio: 3 / 2; }
  .hc-fittings-card-text { padding: 22px 22px 26px; }
}

/* =========================================================
   v0.13.0 — SOLUTIONS NAV DROPDOWN
   The four application pages (Flexis, Heat Pumps, Underfloor,
   Hot & Cold Water) move out of the flat top nav into a single
   "Solutions" dropdown.

   Desktop  → CSS-only hover/focus-within reveals the panel.
              Click toggles via JS for touch + keyboard parity.
   Mobile   → Inside the burger menu. Tap toggles accordion;
              hover/focus-within disabled (no hover on touch).
   ========================================================= */

/* DESKTOP — dropdown trigger sits as a flex sibling of the
   plain <a> nav links, so spacing/alignment stays identical. */
.nav-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.nav-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  letter-spacing: inherit;
  line-height: inherit;
}
.nav-dropdown-trigger:hover { color: var(--rl-teal); }
.nav-dropdown-trigger:focus-visible {
  outline: 2px solid var(--rl-teal);
  outline-offset: 4px;
  border-radius: 2px;
}
.nav-dropdown-trigger .nav-caret {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  transition: transform 0.18s ease;
}
.nav-dropdown[data-open="true"] .nav-caret { transform: rotate(180deg); }

/* When the active page is one of the four Solutions children,
   the trigger picks up a teal hue so the user can see they're
   inside that branch even when the panel is closed. */
.nav-dropdown-current .nav-dropdown-trigger { color: var(--rl-teal); }

/* PANEL — absolutely positioned so it can overflow the header */
.nav-dropdown-panel {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 320px;
  padding: 10px;
  background: var(--rl-white);
  border: 1px solid var(--rl-line-200);
  border-radius: 8px;
  box-shadow: 0 18px 44px rgba(11, 16, 18, 0.14);
  display: none;
  z-index: 30;
}
/* A small invisible bridge so the cursor can travel from the
   trigger down into the panel without the panel collapsing. */
.nav-dropdown-panel::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 14px;
}
@media (hover: hover) {
  .nav-dropdown:hover .nav-dropdown-panel,
  .nav-dropdown:focus-within .nav-dropdown-panel { display: block; }
  .nav-dropdown:hover .nav-caret,
  .nav-dropdown:focus-within .nav-caret { transform: rotate(180deg); }
}
.nav-dropdown[data-open="true"] .nav-dropdown-panel { display: block; }

.nav-dropdown-item {
  display: block;
  padding: 10px 14px;
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  transition: background-color 0.15s ease;
}
.nav-dropdown-item:hover { background: var(--rl-teal-tint); }
.nav-dropdown-item[aria-current="page"] {
  background: var(--rl-teal-tint);
}
.nav-dropdown-item[aria-current="page"] .nav-dropdown-h { color: var(--rl-teal); }
.nav-dropdown-h {
  display: block;
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1.2;
  font-weight: 600;
  color: var(--fg-primary);
}
.nav-dropdown-desc {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--rl-ink-700);
  letter-spacing: 0;
  text-transform: none;
}
.nav-dropdown-foot {
  display: block;
  padding: 12px 14px 6px;
  margin-top: 6px;
  border-top: 1px solid var(--rl-line-200);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--rl-teal);
  letter-spacing: 0.02em;
}
.nav-dropdown-foot:hover { color: var(--rl-teal-press); }

/* MOBILE — accordion inside the burger panel */
@media (max-width: 900px) {
  .nav-dropdown {
    display: block;
    width: 100%;
  }
  .nav-dropdown-trigger {
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: 10px 12px !important;
    font-weight: 850 !important;
  }
  .nav-dropdown-panel {
    position: static;
    transform: none;
    min-width: 0;
    width: 100%;
    margin: 4px 0 8px;
    padding: 6px;
    border: 1px solid var(--rl-line-200);
    border-radius: 6px;
    box-shadow: none;
    background: var(--rl-surface-50);
  }
  /* On touch, hover doesn't apply — only tap-toggle reveals */
  @media (hover: none) {
    .nav-dropdown:hover .nav-dropdown-panel,
    .nav-dropdown:focus-within .nav-dropdown-panel { display: none; }
    .nav-dropdown[data-open="true"] .nav-dropdown-panel { display: block; }
  }
  .nav-dropdown-item { padding: 10px 12px; }
  .nav-dropdown-h { font-size: 14px; }
  .nav-dropdown-desc { font-size: 12px; }
  .nav-dropdown-foot { padding: 10px 12px 4px; font-size: 12px; }
}

/* =========================================================
   v0.14.0 — AUDIENCE PAGES (.audpg-)
   /installers/, /merchants/, /specifiers/ — three dedicated
   role-specific landing pages. Linked from the homepage
   audience selector. Replaces the old /who-its-for/#anchor
   architecture with three indexable, dedicated pages.
   ========================================================= */

.ridgeline-audpg-2026-body {
  background: var(--bg-base);
  color: var(--fg-primary);
  font-family: var(--font-body);
}

.audpg-main { display: block; }

/* HERO — full-bleed background image with copy panel left ---------------- */
.audpg-hero {
  position: relative;
  min-height: clamp(440px, 60vh, 620px);
  background: linear-gradient(135deg, var(--rl-ink-900) 0%, var(--rl-ink-700) 100%);
  color: var(--rl-white);
  overflow: hidden;
}
.audpg-hero.has-image {
  background:
    linear-gradient(90deg, rgba(11,16,18,0.85) 0%, rgba(11,16,18,0.55) 50%, rgba(11,16,18,0.25) 100%),
    var(--audpg-hero-image, none) center center / cover no-repeat,
    var(--rl-ink-900);
}
.audpg-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(56px, 7vw, 96px) clamp(24px, 5vw, 64px);
  min-height: clamp(440px, 60vh, 620px);
  display: flex;
  align-items: center;
}
.audpg-hero-copy {
  max-width: 640px;
}
.audpg-hero-copy .eyebrow {
  margin: 0 0 16px;
  color: var(--rl-teal);
}
.audpg-hero-copy h1 {
  font-family: var(--font-display);
  font-size: clamp(40px, 5.4vw, 72px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  font-weight: 800;
  color: var(--rl-white);
  margin: 0 0 20px;
}
.audpg-hero-copy h1 .teal-text { color: var(--rl-teal); }
.audpg-hero-lede {
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.5;
  color: rgba(255,255,255,0.92);
  max-width: 560px;
  margin: 0 0 28px;
}
.audpg-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* SECTION HEADS (shared across why + role CTA) --------------------------- */
.audpg-section-head {
  margin-bottom: 48px;
  max-width: 820px;
}
.audpg-section-head .eyebrow {
  margin: 0 0 16px;
  color: var(--rl-teal);
}
.audpg-section-head h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-weight: 700;
  color: var(--fg-primary);
  margin: 0 0 16px;
}
.audpg-section-lede {
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.55;
  color: var(--fg-secondary);
  max-width: 720px;
  margin: 0;
}

/* WHY — bullet grid (numbered pillars) ---------------------------------- */
.audpg-why {
  padding: clamp(64px, 8vw, 112px) clamp(24px, 5vw, 64px);
  background: var(--rl-white);
}
.audpg-why-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.audpg-bullet-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px 48px;
}
.audpg-bullet {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 18px;
  row-gap: 6px;
  align-items: start;
}
.audpg-bullet-num {
  grid-row: 1 / span 2;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--rl-teal);
  padding-top: 4px;
}
.audpg-bullet-h {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.6vw, 21px);
  line-height: 1.25;
  font-weight: 700;
  color: var(--fg-primary);
  margin: 0;
}
.audpg-bullet-desc {
  font-size: 15px;
  line-height: 1.55;
  color: var(--fg-secondary);
  margin: 0;
}

/* ROLE-SPECIFIC CTA BAND — light, sits between why and sample-request -- */
.audpg-role-cta {
  padding: clamp(64px, 8vw, 96px) clamp(24px, 5vw, 64px);
  background: var(--rl-teal-tint);
  border-top: 1px solid var(--border-default);
}
.audpg-role-cta-inner {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}
.audpg-role-cta-inner .eyebrow {
  margin: 0 0 14px;
  color: var(--rl-teal);
}
.audpg-role-cta-inner h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-weight: 700;
  color: var(--fg-primary);
  margin: 0 0 14px;
}
.audpg-role-cta-lede {
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.55;
  color: var(--rl-ink-700);
  max-width: 620px;
  margin: 0 auto 28px;
}
.audpg-role-cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}

/* MOBILE — single-column bullet grid, tighter spacing ------------------ */
@media (max-width: 760px) {
  .audpg-hero-inner {
    padding: 56px 20px;
    min-height: 0;
  }
  .audpg-hero {
    min-height: 0;
  }
  .audpg-hero.has-image {
    background:
      linear-gradient(180deg, rgba(11,16,18,0.55) 0%, rgba(11,16,18,0.85) 100%),
      var(--audpg-hero-image, none) center center / cover no-repeat,
      var(--rl-ink-900);
  }
  .audpg-bullet-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .audpg-section-head { margin-bottom: 36px; }
  .audpg-role-cta-actions { flex-direction: column; }
  .audpg-role-cta-actions .button { width: 100%; max-width: 320px; margin: 0 auto; }
}