/* ============================================================
   Pro-Fit Green Energy: design system
   Palette, typography and the logo device are taken straight from
   PF_Branding Guidelines. Two colours only, plus derived neutrals.
   Nothing here is invented.
   ============================================================ */

:root {
  /* The brand, exactly as specified */
  --pf-deep:      #004A51;   /* Web 004A51 */
  --pf-teal:      #18978D;   /* Web 18978D */
  --pf-teal-lift: #22B3A6;   /* lighter teal, dark grounds only */

  /* Derived neutrals */
  --paper:     #FFFFFF;
  --shell:     #F2F8F7;   /* pale teal-tinted page shell */
  --haze:      #E7F2F0;   /* section tint */
  --rule:      #D8E8E6;   /* hairline */
  --rule-soft: #E6F0EE;
  --muted:     #4B6E6C;   /* muted body text */

  /* On dark grounds */
  --on-dark:      #DCEEEC;
  --on-dark-soft: #9EC7C3;

  /* Legacy aliases so every existing class keeps working */
  --mist:      var(--shell);
  --ink:       var(--pf-deep);
  --ink-2:     var(--pf-deep);
  --teal:      var(--pf-teal);
  --slate:     var(--muted);
  --line:      var(--rule);
  --line-soft: var(--rule-soft);

  /* Flat and squared: 4px on buttons and cards, 6px on media */
  --radius:    4px;
  --radius-lg: 6px;

  --shadow-soft: 0 18px 40px -26px rgba(0, 74, 81, .38);
  --shadow-lift: 0 30px 60px -34px rgba(0, 74, 81, .55);

  --wrap: 1140px;
  --step: clamp(3rem, 6vw, 5rem);

  --display: "Montserrat", "Trebuchet MS", system-ui, sans-serif;
  --body:    "Carlito", "Calibri", system-ui, "Helvetica Neue", Arial, sans-serif;

  --ease: cubic-bezier(.16, 1, .3, 1);
}

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

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

body {
  margin: 0;
  background: var(--shell);
  color: var(--pf-deep);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  line-height: 1.12;
  letter-spacing: -.01em;
  margin: 0 0 .5em;
  font-weight: 600;
}

h1 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); font-weight: 700; }
h2 { font-size: clamp(1.6rem, 2.8vw, 2.3rem); }
h3 { font-size: clamp(1.15rem, 1.7vw, 1.4rem); }

p { margin: 0 0 1.05em; max-width: 62ch; }
a { color: var(--pf-deep); text-underline-offset: .18em; }
a:hover { color: var(--pf-teal); }

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

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

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.section { padding-block: var(--step); }
.tint { background: var(--haze); }
.ink-panel { background: var(--pf-deep); color: var(--on-dark); }
.ink-panel h2, .ink-panel h3 { color: #fff; }
.ink-panel p { color: var(--on-dark); }
.ink-panel a:not(.btn) { color: #fff; }

/* ---------- The bar rule ----------
   The logo mark is built from stepped bars, so the system opens
   sections with the same device. */
.barrule {
  height: 6px;
  width: 64px;
  background: var(--pf-teal);
  border-radius: 2px;
  margin: 0 0 1.15rem;
  box-shadow: 14px 0 0 0 var(--pf-teal-lift), 28px 0 0 0 rgba(24, 151, 141, .35);
}
.ink-panel .barrule,
.site-foot .barrule {
  background: var(--pf-teal-lift);
  box-shadow: 14px 0 0 0 #87C9C2, 28px 0 0 0 rgba(135, 201, 194, .4);
}

/* ---------- Eyebrow: carries the bar rule, so every section opens
   with the brand device ---------- */
.eyebrow {
  font-family: var(--display);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--pf-teal);
  margin: 0 0 1rem;
  max-width: none;
}
.eyebrow::before {
  content: "";
  display: block;
  width: 64px;
  height: 6px;
  border-radius: 2px;
  background: var(--pf-teal);
  box-shadow: 14px 0 0 0 var(--pf-teal-lift), 28px 0 0 0 rgba(24, 151, 141, .35);
  margin-bottom: 1.1rem;
}
.ink-panel .eyebrow { color: var(--pf-teal-lift); }
.ink-panel .eyebrow::before {
  background: var(--pf-teal-lift);
  box-shadow: 14px 0 0 0 #87C9C2, 28px 0 0 0 rgba(135, 201, 194, .4);
}

/* ---------- Buttons: flat, squared ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1rem;
  padding: .9rem 1.6rem;
  border-radius: 4px;
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform .18s var(--ease), background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
  min-height: 52px;
}
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--pf-deep); color: #fff; }
.btn-primary:hover { background: var(--pf-teal); color: #fff; }

/* The lead action. Teal on light grounds, lifted teal on dark ones. */
.btn-accent { background: var(--pf-teal); color: #fff; }
.btn-accent:hover { background: var(--pf-deep); color: #fff; }
.ink-panel .btn-accent { background: var(--pf-teal-lift); color: var(--pf-deep); }
.ink-panel .btn-accent:hover { background: #fff; color: var(--pf-deep); }

.btn-ghost { background: transparent; color: var(--pf-deep); border-color: var(--rule); }
.btn-ghost:hover { border-color: var(--pf-teal); color: var(--pf-teal); }
.ink-panel .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .35); }
.ink-panel .btn-ghost:hover { border-color: #fff; color: #fff; }

.btn-lg { font-size: 1.05rem; padding: 1.1rem 2rem; min-height: 58px; }

/* ---------- Header ---------- */
.site-head {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.site-head .wrap {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 76px;
}
/* 10mm clearspace in the guidelines: never crowd the mark */
.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  padding: .35rem .75rem .35rem 0;
  flex: none;
}
.brand img { height: 38px; width: auto; }

.site-nav { margin-left: auto; display: flex; gap: 1.5rem; align-items: center; }
.site-nav a:not(.btn) {
  color: var(--pf-deep);
  text-decoration: none;
  font-family: var(--display);
  font-size: .92rem;
  font-weight: 500;
}
.site-nav a:not(.btn):hover { color: var(--pf-teal); }
.site-nav a:not(.btn)[aria-current="page"] { color: var(--pf-teal); }
@media (max-width: 980px) { .site-nav { gap: 1.1rem; } }
@media (max-width: 900px) { .site-nav .hide-sm { display: none; } }

/* ---------- Hero: split, never centred ---------- */
.hero { padding-block: clamp(2.25rem, 5vw, 4rem) var(--step); }
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }

.hero h1 { margin-bottom: .35em; }
.hero .lede { font-size: 1.15rem; color: var(--muted); max-width: 46ch; }

.hero-media { position: relative; }
.hero-media img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* The signature element: a squared price panel */
.price-card {
  position: absolute;
  left: 0;
  bottom: 0;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--pf-teal);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.05rem 1.35rem;
  box-shadow: var(--shadow-lift);
  min-width: 232px;
}
@media (max-width: 900px) {
  .price-card { position: static; margin-top: 1.25rem; }
}
.price-card .label {
  font-family: var(--display);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 .35rem;
  max-width: none;
}
.price-card .figure {
  font-family: var(--display);
  font-size: 1.95rem;
  font-weight: 700;
  color: var(--pf-deep);
  letter-spacing: -.02em;
  line-height: 1.05;
}
.price-card .foot {
  font-size: .8rem;
  color: var(--muted);
  margin: .5rem 0 0;
  max-width: none;
}

/* ---------- Postcode inline start ---------- */
.pc-start {
  display: flex;
  gap: .6rem;
  margin: 1.75rem 0 1rem;
  max-width: 470px;
  flex-wrap: wrap;
}
.pc-start input {
  flex: 1 1 210px;
  font-family: var(--display);
  font-size: 1.02rem;
  text-transform: uppercase;
  padding: .9rem 1.1rem;
  border: 2px solid var(--rule);
  border-radius: 4px;
  background: var(--paper);
  color: var(--pf-deep);
  min-height: 52px;
}
.pc-start input::placeholder { color: #7F9C9A; text-transform: none; }
.pc-start input:focus-visible { border-color: var(--pf-teal); outline-offset: 1px; }

.micro {
  font-size: .86rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
}
.tick { color: var(--pf-teal); font-weight: 700; }

/* ---------- Proof strip ---------- */
.proof {
  border-block: 1px solid var(--rule);
  background: var(--paper);
  padding-block: 1.1rem;
}
.proof .wrap {
  display: flex;
  gap: clamp(1rem, 4vw, 2.5rem);
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
}
.proof-item {
  display: flex;
  align-items: baseline;
  gap: .55rem;
  font-size: .92rem;
  color: var(--muted);
}
.proof-item strong {
  font-family: var(--display);
  color: var(--pf-deep);
  font-size: 1rem;
  font-weight: 600;
}
.proof-note {
  font-size: .78rem;
  color: var(--muted);
  font-style: italic;
  margin: 0;
  max-width: none;
}

/* ---------- Zig-zag feature rows, not a 3-card row ---------- */
.zig {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.75rem, 5vw, 4rem);
  align-items: center;
  padding-block: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--rule);
}
.zig:first-of-type { border-top: 0; }
.zig.flip > *:first-child { order: 2; }
@media (max-width: 820px) {
  .zig { grid-template-columns: 1fr; }
  .zig.flip > *:first-child { order: 0; }
}
.zig-num {
  font-family: var(--display);
  font-size: .8rem;
  font-weight: 700;
  color: var(--pf-teal);
  letter-spacing: .14em;
  margin-bottom: .5rem;
}

/* ---------- Step rows: the flat list used for sequences ---------- */
.rows { border-top: 1px solid var(--rule); margin-top: 2rem; }
.row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 1.5rem;
  align-items: center;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--rule);
}
@media (max-width: 760px) { .row { grid-template-columns: 1fr; gap: .6rem; } }
.row .ix { font-family: var(--display); font-size: .8rem; color: var(--pf-teal); font-weight: 700; letter-spacing: .12em; }
.row h3 { margin: 0 0 .2rem; }
.row .sp { font-size: .92rem; color: var(--muted); margin: 0; }

/* ---------- Package list ---------- */
.pkg-list { display: grid; gap: 1rem; margin-top: 2rem; }
.pkg {
  display: grid;
  grid-template-columns: 1.4fr auto auto;
  gap: 1.25rem;
  align-items: center;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.35rem 1.5rem;
  transition: transform .2s var(--ease), border-color .2s var(--ease);
}
.pkg:hover { transform: translateY(-2px); border-color: var(--pf-teal); }
.pkg.featured {
  border-color: var(--pf-teal);
  border-left-width: 4px;
  background: linear-gradient(90deg, rgba(24, 151, 141, .06), var(--paper) 55%);
}
@media (max-width: 780px) {
  .pkg { grid-template-columns: 1fr; gap: .75rem; }
}
.pkg h3 { margin: 0 0 .25rem; font-size: 1.2rem; }
.pkg .spec { font-size: .9rem; color: var(--muted); margin: 0; }
.pkg .amount {
  font-family: var(--display);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.pkg .amount .from {
  display: block;
  font-family: var(--display);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.badge {
  display: inline-block;
  font-family: var(--display);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: var(--pf-deep);
  color: #fff;
  padding: .3rem .75rem;
  border-radius: 999px;   /* pills are the only full round */
  margin-bottom: .55rem;
}

/* ---------- Disclosure / small print ---------- */
.smallprint {
  font-size: .82rem;
  color: var(--muted);
  max-width: 78ch;
  line-height: 1.6;
}
.smallprint strong { color: var(--pf-deep); }

/* ---------- Footer ---------- */
.site-foot {
  background: var(--paper);
  border-top: 1px solid var(--rule);
  color: var(--muted);
  padding-block: 3rem 2.25rem;
  margin-top: var(--step);
  font-size: .9rem;
}
.site-foot a:not(.btn) { color: var(--pf-deep); text-decoration: none; }
.site-foot a:not(.btn):hover { color: var(--pf-teal); }
.site-foot .brand { padding-left: 0; }
.site-foot .brand img { height: 34px; width: auto; }
.foot-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2.5rem;
}
@media (max-width: 780px) { .foot-grid { grid-template-columns: 1fr; } }
.foot-grid h4 {
  font-size: .72rem;
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pf-teal);
  margin-bottom: .9rem;
}
.foot-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.foot-legal {
  border-top: 1px solid var(--rule);
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  font-size: .8rem;
  color: var(--muted);
}
.foot-legal p { max-width: 92ch; }

/* ============================================================
   FUNNEL
   ============================================================ */
.funnel-shell {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  background: var(--shell);
}

.f-head {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.f-head .wrap {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 68px;
}
.f-help { margin-left: auto; font-size: .88rem; color: var(--muted); margin-bottom: 0; }
.f-help a { font-family: var(--display); font-weight: 600; }

.progress-track {
  height: 4px;
  background: var(--rule-soft);
  position: relative;
}
.progress-bar {
  height: 100%;
  width: 0;
  background: var(--pf-teal);
  transition: width .45s var(--ease);
}
.progress-chip {
  position: absolute;
  top: 8px;
  left: 0;
  transform: translateX(-50%);
  font-family: var(--display);
  font-size: .68rem;
  font-weight: 600;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: .15rem .6rem;
  color: var(--muted);
  white-space: nowrap;
  transition: left .45s var(--ease);
}

.f-body { padding-block: clamp(2rem, 5vw, 3.25rem); }
.f-grid {
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}
@media (max-width: 940px) { .f-grid { grid-template-columns: 1fr; } }

.q-title { font-size: clamp(1.6rem, 3.2vw, 2.4rem); margin-bottom: .6rem; }
.q-sub { color: var(--muted); margin-bottom: 1.75rem; }

.opts { display: grid; gap: .75rem; max-width: 560px; }
.opt {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  text-align: left;
  background: var(--paper);
  border: 2px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.15rem 1.35rem;
  font-family: var(--body);
  font-size: 1.05rem;
  color: var(--pf-deep);
  cursor: pointer;
  min-height: 64px;
  transition: transform .16s var(--ease), border-color .16s var(--ease), background-color .16s var(--ease);
}
.opt:hover { border-color: var(--pf-teal); transform: translateX(3px); }
.opt:active { transform: translateX(3px) scale(.99); }
.opt[aria-pressed="true"] { border-color: var(--pf-teal); background: var(--haze); }
.opt .key {
  font-family: var(--display);
  font-size: .78rem;
  font-weight: 600;
  width: 26px; height: 26px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 4px;
  background: var(--haze);
  color: var(--muted);
}
.opt[aria-pressed="true"] .key { background: var(--pf-teal); color: #fff; }
.opt .opt-sub {
  display: block;
  font-size: .84rem;
  color: var(--muted);
  margin-top: .15rem;
}

.why {
  display: flex;
  gap: .7rem;
  background: var(--haze);
  border-left: 4px solid var(--pf-teal);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: .85rem 1.1rem;
  margin-top: 1.5rem;
  max-width: 560px;
  font-size: .9rem;
  color: var(--muted);
}
.why svg { flex: none; margin-top: .15rem; }

.f-input {
  font-family: var(--display);
  font-size: 1.12rem;
  padding: 1rem 1.2rem;
  border: 2px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--pf-deep);
  width: 100%;
  max-width: 420px;
  min-height: 58px;
}
.f-input:focus-visible { border-color: var(--pf-teal); }
.f-label {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  margin-bottom: .45rem;
  font-size: .95rem;
}
.f-hint { font-size: .84rem; color: var(--muted); margin: .5rem 0 0; }
.f-error {
  font-size: .86rem;
  color: #A3231C;
  margin: .5rem 0 0;
  min-height: 1.2em;
}

.f-actions { display: flex; gap: .75rem; align-items: center; margin-top: 1.75rem; flex-wrap: wrap; }
.f-back {
  background: none;
  border: 0;
  color: var(--muted);
  font-size: .92rem;
  cursor: pointer;
  padding: .6rem .2rem;
  font-family: var(--body);
}
.f-back:hover { color: var(--pf-deep); }

/* Live price rail */
.rail {
  position: sticky;
  top: 92px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--pf-teal);
  border-radius: 0 0 var(--radius) var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow-soft);
}
@media (max-width: 940px) { .rail { position: static; } }
.rail .label {
  font-family: var(--display);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 .5rem;
  max-width: none;
}
.rail .figure {
  font-family: var(--display);
  font-size: clamp(1.8rem, 3.4vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.05;
  color: var(--pf-deep);
  transition: opacity .3s var(--ease);
}
.rail .figure.settling { opacity: .5; }
.rail .narrowing {
  font-size: .84rem;
  color: var(--pf-teal);
  margin: .6rem 0 0;
  max-width: none;
}
.rail ul {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 0;
  display: grid;
  gap: .55rem;
  border-top: 1px solid var(--rule-soft);
  padding-top: 1.1rem;
}
.rail li {
  display: flex;
  gap: .6rem;
  font-size: .88rem;
  color: var(--muted);
  align-items: baseline;
}
.rail li .done { color: var(--pf-teal); font-weight: 700; flex: none; }
.rail li span.v { margin-left: auto; color: var(--pf-deep); font-family: var(--display); font-size: .82rem; text-align: right; }

/* Result screen */
.result-head { display: grid; gap: .4rem; margin-bottom: 1.5rem; }
.result-price {
  font-family: var(--display);
  font-size: clamp(2.4rem, 6.4vw, 3.6rem);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.05;
  color: var(--pf-deep);
}
.incl {
  display: grid;
  gap: .6rem;
  margin: 1.5rem 0;
  padding: 0;
  list-style: none;
  max-width: 560px;
}
.incl li { display: flex; gap: .65rem; font-size: .95rem; }
.incl .done { color: var(--pf-teal); font-weight: 700; flex: none; }

.assump {
  background: var(--haze);
  border-radius: var(--radius);
  padding: 1.1rem 1.3rem;
  font-size: .85rem;
  color: var(--muted);
  max-width: 620px;
  margin-top: 1.5rem;
}
.assump summary { cursor: pointer; font-family: var(--display); font-weight: 600; color: var(--pf-deep); }
.assump p { margin: .8rem 0 0; font-size: .85rem; }

.ac-offer {
  border: 1px solid var(--rule);
  border-left: 4px solid var(--pf-teal);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.35rem 1.5rem;
  margin-top: 2rem;
  max-width: 620px;
  background: var(--paper);
}
.ac-offer h3 { font-size: 1.15rem; margin-bottom: .35rem; }
.ac-offer p { font-size: .92rem; color: var(--muted); margin-bottom: 1rem; }

.f-foot {
  border-top: 1px solid var(--rule);
  background: var(--paper);
  padding-block: 1rem;
  font-size: .82rem;
  color: var(--muted);
}
.f-foot .wrap { display: flex; gap: 1.25rem; flex-wrap: wrap; align-items: center; }
.f-foot a:not(.btn) { color: var(--pf-deep); text-decoration: none; }
.f-foot a:not(.btn):hover { color: var(--pf-teal); }

/* Step entrance, transform and opacity only */
.step-in { animation: stepIn .34s var(--ease) both; }
@keyframes stepIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.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;
}

/* ============================================================
   SECONDARY PAGES
   ============================================================ */

/* Fuller "what's included" list inside a .pkg row */
.pkg-incl {
  list-style: none;
  padding: 0;
  margin: .9rem 0 0;
  display: grid;
  gap: .4rem;
  font-size: .9rem;
  color: var(--muted);
}
.pkg-incl li { display: flex; gap: .55rem; align-items: baseline; }
.pkg-incl .done { color: var(--pf-teal); font-weight: 700; flex: none; }

/* Exclusions: same rhythm, a teal bar instead of a tick */
.excl {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
  display: grid;
  gap: .9rem;
  max-width: 68ch;
}
.excl li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: .85rem;
  align-items: start;
}
.excl li::before {
  content: "";
  width: 22px;
  height: 4px;
  border-radius: 2px;
  background: var(--pf-teal);
  margin-top: .75rem;
}
.excl strong { display: block; font-family: var(--display); font-size: 1.05rem; color: var(--pf-deep); }
.excl span { font-size: .95rem; color: var(--muted); }

/* Small data table, scrolls inside itself on narrow screens */
.table-scroll { overflow-x: auto; margin-top: 2rem; }
.rate-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 520px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: .95rem;
}
.rate-table th, .rate-table td {
  text-align: left;
  padding: .95rem 1.1rem;
  border-bottom: 1px solid var(--rule-soft);
}
.rate-table thead th {
  font-family: var(--display);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  background: var(--haze);
}
.rate-table tbody tr:last-child td { border-bottom: 0; }
.rate-table td.num { font-family: var(--display); font-weight: 700; white-space: nowrap; }
.rate-table td.add { font-family: var(--display); font-weight: 700; color: var(--pf-deep); white-space: nowrap; }

/* FAQ disclosure group */
.faq { display: grid; gap: .75rem; margin-top: 2rem; max-width: 74ch; }
.faq details {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0;
}
.faq details[open] { border-color: var(--pf-teal); }
.faq summary {
  cursor: pointer;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.02rem;
  padding: 1.1rem 1.35rem;
  list-style: none;
  display: flex;
  gap: 1rem;
  align-items: baseline;
  justify-content: space-between;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--display);
  color: var(--pf-teal);
  flex: none;
  font-size: 1.2rem;
  line-height: 1;
}
.faq details[open] summary::after { content: "\2212"; }
.faq summary:focus-visible { outline-offset: -3px; }
.faq .faq-body { padding: 0 1.35rem 1.25rem; }
.faq .faq-body p { font-size: .95rem; color: var(--muted); margin-bottom: .8rem; }
.faq .faq-body p:last-child { margin-bottom: 0; }

/* Callout band for the two-up CTA repeats */
.cta-band { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; margin-top: 1.75rem; }

/* The price screen heading is the price itself, so reset h1 defaults. */
h1.result-price { margin: 0; letter-spacing: -.025em; }

/* Zig rows: one consistent media frame so mixed source ratios do not
   wreck the vertical rhythm. The portrait source was 1080x1920. */
.zig img, .zig video {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  display: block;
}

/* A price range is two numbers, so it sits smaller than a settled
   single figure or it wraps in the rail. */
.rail .figure.settling { font-size: clamp(1.3rem, 2.4vw, 1.7rem); line-height: 1.2; }

/* ---------- Definition rows, used by How it works and About ---------- */
.deflist {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--rule);
  max-width: 74ch;
}
.deflist > li {
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: 1.5rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--rule);
}
@media (max-width: 640px) {
  .deflist > li { grid-template-columns: 1fr; gap: .3rem; }
}
.deflist strong {
  font-family: var(--display);
  font-weight: 600;
  font-size: .95rem;
  color: var(--pf-deep);
}
.deflist span { font-size: .95rem; color: var(--muted); }

/* An empty section that is structurally present and honest about it */
.placeholder {
  border: 1px dashed var(--rule);
  border-left: 4px solid var(--pf-teal);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--paper);
  padding: 1.5rem 1.6rem;
  margin-top: 1.75rem;
  max-width: 68ch;
}
.placeholder h3 { font-size: 1.05rem; margin-bottom: .4rem; }
.placeholder p { font-size: .92rem; color: var(--muted); margin-bottom: 0; }
.placeholder p + p { margin-top: .7rem; }

/* ============================================================
   Critique pass, 29 Aug. Three faults found at 1:1 review:
   the eyebrow rule read as a broken progress bar, the ink panel
   abandoned its right half, and section rhythm was too loose.
   ============================================================ */

/* The stepped-bar device. The offsets must clear the bar itself,
   or the copies land inside it and it reads as a progress meter. */
.eyebrow::before,
.barrule {
  width: 20px;
  height: 5px;
  box-shadow: 26px 0 0 0 currentColor, 52px 0 0 0 currentColor;
  opacity: 1;
}
.eyebrow::before { background: var(--pf-teal); color: var(--pf-teal); }
.ink-panel .eyebrow::before { background: var(--pf-teal-lift); color: var(--pf-teal-lift); }
.eyebrow::before { box-shadow: 26px 0 0 0 rgba(24,151,141,.55), 52px 0 0 0 rgba(24,151,141,.25); }
.ink-panel .eyebrow::before { box-shadow: 26px 0 0 0 rgba(34,179,166,.55), 52px 0 0 0 rgba(34,179,166,.25); }

/* Two-column section that actually uses the page width. */
.split {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.split > div > p { max-width: 52ch; }

/* A ledger, not a decorative stat. Reads like the figure it is. */
.ledger {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono, inherit);
}
.ledger th, .ledger td {
  padding: .85rem 0;
  border-bottom: 1px solid rgba(255,255,255,.16);
  font-weight: 500;
  font-size: .95rem;
  text-align: left;
}
.ledger td { text-align: right; font-variant-numeric: tabular-nums; }
.ink-panel .ledger th { color: #B9DAD7; }
.ink-panel .ledger td { color: #fff; }
.ledger tr.total th, .ledger tr.total td {
  border-bottom: 0;
  padding-top: 1.1rem;
  font-size: 1.35rem;
  font-weight: 700;
}
.ink-panel .ledger tr.total td { color: var(--pf-teal-lift); }

/* Rhythm: the page was breathing too hard between blocks. */
.zig { padding-block: clamp(1.5rem, 3vw, 2.5rem); }

/* A card sitting in a grid column should fill it, not float in the middle. */
.price-card.is-inline {
  position: static;
  max-width: none;
  width: 100%;
}
.zig { align-items: center; }

/* ============================================================
   Contrast corrections, measured not guessed.
   #18978D is the brand teal and is correct for large display use,
   but it fails WCAG AA for small text on the pale shell (3.34:1)
   and behind white button text (3.59:1). A darkened step of the
   same hue is used wherever teal has to be READ.
   ============================================================ */
:root { --pf-teal-read: #12766E; }

.eyebrow,
.rail .narrowing,
.zig-num,
.proof-item strong { color: var(--pf-teal-read); }

.btn-accent { background: var(--pf-teal-read); color: #fff; }
.btn-accent:hover { background: var(--pf-deep); color: #fff; }

/* On the dark panel the light teal is already high contrast, leave it. */
.ink-panel .eyebrow { color: var(--pf-teal-lift); }
.ink-panel .btn-accent { background: var(--pf-teal-lift); color: var(--pf-deep); }

/* Deep teal on the light teal button measured 3.84:1. Darkening the
   label to #00312F takes it to 5.45:1 and keeps the brand hue. */
.ink-panel .btn-accent { background: var(--pf-teal-lift); color: #00312F; }
.site-foot h4, footer h4 { color: var(--pf-teal-read); }

/* Nav links and row indices were the brand teal on white, 3.59:1 and
   3.34:1. Both are small text, so both take the readable teal step. */
.site-nav a:not(.btn) { color: var(--pf-teal-read); }
.row .ix, .zig-num, .pkg .amount .from { color: var(--pf-teal-read); }

/* The current-page nav link is set by an attribute selector, which
   out-specifies the link rule above, so it kept the undarkened teal.
   Deep teal plus weight is both accessible and a clearer "you are here". */
.site-nav a:not(.btn)[aria-current="page"] { color: var(--pf-deep); font-weight: 700; }

/* ============================================================
   Full 1:1 design review, 29 Aug. Five faults, all visible only
   at real size.
   ============================================================ */

/* 1. The price card was pinned to left:0 bottom:0 at full natural
      width, so it ran across the middle of the photo and cut the
      installer in half on both the hero and the about page. Inset it
      into the image corner and cap its width so the subject survives. */
.hero-media { position: relative; }
.hero-media .price-card {
  left: 1rem;
  bottom: 1rem;
  max-width: 46%;
  min-width: 210px;
  border-radius: var(--radius);
  border-left-width: 4px;
}
@media (max-width: 900px) {
  .hero-media .price-card { position: static; max-width: none; margin-top: 1rem; }
}

/* 2. Headings were orphaning a single word onto the last line
      ("itself." / "name"). Balance them. */
h1, h2, h3, .q-title, .result-price { text-wrap: balance; }
p.lede, .hero .lede { text-wrap: pretty; }

/* 3. Prices did not share a vertical axis: the amount column was
      content-sized, so the FROM label shifted with the width of the
      number below it. On a site whose argument is published pricing,
      that is the worst possible detail to get wrong. */
.pkg .amount {
  min-width: 122px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.pkg .amount .from { text-align: right; }

/* 4. The proof strip was spread edge to edge by space-between, which
      read as sparse rather than composed. Even columns instead. */
.proof .wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem 2rem;
  justify-content: initial;
  align-items: baseline;
}
.proof .proof-note {
  grid-column: 1 / -1;
  font-style: normal;
  color: var(--pf-muted, #4B6E6C);
  font-size: .78rem;
  margin: 0;
  padding-top: .65rem;
  border-top: 1px solid var(--rule);
}
@media (max-width: 820px) {
  .proof .wrap { grid-template-columns: repeat(2, 1fr); }
}

/* 5. Zig rows centred short text against tall images, leaving voids
      above and below. Anchor the text to the top of the row instead. */
.zig { align-items: start; }
.zig > div:not(:has(img)):not(:has(video)) { padding-top: .5rem; }

/* 6. Mobile proof strip: two columns squeezed the label so hard that
      "In-house", "0% VAT" and "14 days" broke mid-term. Stack each item
      and stop the label wrapping. */
@media (max-width: 820px) {
  .proof .wrap { grid-template-columns: 1fr 1fr; gap: 1.1rem 1.25rem; }
  .proof-item { display: block; }
  .proof-item strong { display: block; white-space: nowrap; margin-bottom: .1rem; }
}
@media (max-width: 420px) {
  .proof .wrap { grid-template-columns: 1fr; }
}

/* 7. On mobile every nav link was display:none, so the only route to
      another page was the footer. Keep them, as a scrollable rail. */
@media (max-width: 900px) {
  .site-head .wrap { flex-wrap: wrap; padding-bottom: .4rem; }
  .site-nav { margin-left: auto; }
  .site-nav .hide-sm {
    display: inline-block;
    font-size: .88rem;
    white-space: nowrap;
  }
  .site-nav {
    order: 3;
    width: 100%;
    margin: 0;
    gap: 1.1rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: .35rem;
  }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav .btn { display: none; }          /* CTA already sits top-right */
  .site-head .wrap > .brand { margin-right: auto; }
}
@media (max-width: 900px) {
  .site-head .wrap { position: relative; }
  .site-head .wrap > .btn-primary,
  .site-head .site-nav + .btn-primary { display: inline-flex; }
}
.nav-cta { flex: none; }
@media (max-width: 900px) { .site-nav .btn { display: none; } .nav-cta { display: inline-flex; } }

/* 8. The air conditioning page illustrated reversible units with a solar
      roof photo, because only three photographs exist and they were
      being reused across unrelated products. A drawn diagram is honest
      where a borrowed photograph is not. */
.ac-diagram { margin: 0; }
.ac-diagram svg {
  width: 100%;
  height: auto;
  display: block;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.ac-diagram figcaption {
  font-size: .82rem;
  color: var(--pf-muted, #4B6E6C);
  margin-top: .7rem;
  max-width: 46ch;
}

/* ============================================================
   FIGURE SEQUENCE
   Ported from the survey direction and re-skinned to the brand:
   line work in deep teal, panels in brand teal, labels in
   Montserrat rather than a mono the brand does not own. Replaces
   the old four-step row, which reused the same three photographs
   a third time.
   ============================================================ */

.bseq { padding-block: var(--step); background: var(--shell, #F2F8F7); border-top: 1px solid var(--rule); }
.bseq-h { max-width: 24ch; text-wrap: balance; margin: .9rem 0 clamp(2rem, 4vw, 3rem); }

.bseq-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (max-width: 900px) { .bseq-grid { grid-template-columns: 1fr; } }

.bseq-stick { position: sticky; top: 96px; }
@media (max-width: 900px) {
  .bseq-stick { position: sticky; top: 0; padding-block: 1rem;
    background: var(--shell, #F2F8F7); z-index: 2; }
}
.bseq-svg { width: 100%; height: auto; display: block; }

.bseq-svg .lyr { opacity: 0; transform: translateY(-10px);
  transition: opacity .5s var(--ease), transform .5s var(--ease); }
.bseq-svg .lyr.is-on { opacity: 1; transform: translateY(0); }
.bseq-svg .lyr.is-base { opacity: 1; transform: none; }
.bseq-svg .lyr-lift.is-closed { opacity: 0; }
.bseq-svg .lyr-scaff.is-struck { opacity: 0; }

.bseq-svg .lyr-array use { opacity: 0; transition: opacity .34s ease-out;
  transition-delay: calc(var(--i, 0) * 55ms); }
.bseq-svg .lyr-array.is-on use { opacity: 1; }
.bseq-svg .lyr-lift rect, .bseq-svg .lyr-hooks rect { opacity: 0;
  transition: opacity .3s ease-out; transition-delay: calc(var(--i, 0) * 45ms); }
.bseq-svg .lyr-lift.is-on rect, .bseq-svg .lyr-hooks.is-on rect { opacity: 1; }
.bseq-svg .lyr-scaff { stroke-dasharray: 1400; stroke-dashoffset: 1400;
  transition: stroke-dashoffset .8s var(--ease), opacity .4s ease-out; }
.bseq-svg .lyr-scaff.is-on { stroke-dashoffset: 0; }
.bseq-svg .lyr-rails line { stroke-dasharray: 7; stroke-dashoffset: 7;
  transition: stroke-dashoffset .6s var(--ease); }
.bseq-svg .lyr-rails.is-on line { stroke-dashoffset: 0; }

.bseq-svg .anno { opacity: 0; transition: opacity .35s ease-out; pointer-events: none; }
.bseq-svg .anno.is-current { opacity: 1; transition-delay: .18s; }
.bseq-svg .anno path { stroke-dasharray: 620; stroke-dashoffset: 620;
  transition: stroke-dashoffset .55s var(--ease); }
.bseq-svg .anno.is-current path { stroke-dashoffset: 0; transition-delay: .18s; }

.bseq-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(2.5rem, 8vh, 6rem); }
.bseq-steps li { border-top: 1px solid var(--rule); padding-top: 1rem; opacity: .36;
  transition: opacity .35s ease-out, border-color .35s ease-out; }
.bseq-steps li:first-child { padding-top: 0; border-top: 0; }
.bseq-steps li.is-past { opacity: .52; }
.bseq-steps li.is-active { opacity: 1; border-color: var(--pf-teal-read, #12766E); }
.bseq-ix { display: block; font-family: var(--display); font-size: .74rem; font-weight: 700;
  letter-spacing: .14em; color: var(--pf-teal-read, #12766E); margin-bottom: .35rem; }
.bseq-steps h3 { margin: 0 0 .4rem; font-size: 1.15rem; }
.bseq-steps p { margin: 0; font-size: .93rem; color: var(--muted, #4B6E6C); max-width: 46ch; }

.bseq-spec { margin: .85rem 0 0; display: grid; gap: 0; border-top: 1px solid var(--rule);
  opacity: 0; transform: translateY(6px);
  transition: opacity .4s ease-out .12s, transform .4s var(--ease) .12s; }
.bseq-steps li.is-active .bseq-spec { opacity: 1; transform: none; }
.bseq-spec > div { display: flex; justify-content: space-between; gap: 1rem;
  padding: .42rem 0; border-bottom: 1px solid var(--line-soft, #E3EFEC); }
.bseq-spec dt { margin: 0; font-family: var(--display); font-size: .68rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted, #4B6E6C); }
.bseq-spec dd { margin: 0; font-size: .8rem; color: var(--pf-deep); text-align: right; }

.dgm { margin: 0; }
.dgm figcaption { font-size: .84rem; color: var(--muted, #4B6E6C); margin-top: .8rem;
  padding-top: .7rem; border-top: 1px solid var(--rule); }
.dgm .fig-ref { font-family: var(--display); font-weight: 700; color: var(--pf-deep); margin-right: .5rem; }

@media (prefers-reduced-motion: reduce) {
  .bseq-stick { position: static; }
  .bseq-svg .lyr, .bseq-svg .lyr-array use, .bseq-svg .lyr-lift rect,
  .bseq-svg .lyr-hooks rect, .bseq-svg .anno { opacity: 1; transform: none; transition: none; }
  .bseq-svg .lyr-scaff, .bseq-svg .lyr-rails line { stroke-dashoffset: 0; transition: none; }
  .bseq-svg .lyr-lift.is-closed, .bseq-svg .lyr-scaff.is-struck { opacity: 0; }
  .bseq-steps li, .bseq-spec { opacity: 1; transform: none; }
}

/* ============================================================
   RESIDENT HUB
   Written for residents of homes in a programme, not buyers.
   Existing tokens only: no new colours, no new type sizes that
   are not already in the system. Larger tap targets and longer
   line lengths than the sales pages, because the audience
   includes elderly and disabled readers.
   ============================================================ */

/* Section sub-navigation, sitting under the main header */
.res-nav {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.res-nav .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.75rem;
  padding-block: .35rem;
}
.res-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: .35rem 0;
  font-family: var(--display);
  font-size: .95rem;
  font-weight: 600;
  color: var(--pf-teal-read);
  text-decoration: none;
}
.res-nav a:hover { color: var(--pf-deep); text-decoration: underline; }
.res-nav a[aria-current="page"] {
  color: var(--pf-deep);
  box-shadow: inset 0 -3px 0 0 var(--pf-teal);
}

/* Opening block: plain statement plus a short "who this is for" list */
.res-open {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (max-width: 860px) { .res-open { grid-template-columns: 1fr; } }
.res-who {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--pf-teal);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.5rem 1.6rem;
}
.res-who h2 { font-size: 1.15rem; margin-bottom: .8rem; }
.res-who ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .65rem; }
.res-who li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: .8rem;
  font-size: .98rem;
  color: var(--muted);
}
.res-who li::before {
  content: "";
  width: 18px;
  height: 4px;
  border-radius: 2px;
  background: var(--pf-teal);
  margin-top: .68rem;
}

/* Four works cards */
.res-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}
@media (max-width: 780px) { .res-cards { grid-template-columns: 1fr; } }
.res-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--pf-teal);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.5rem 1.6rem;
}
.res-card h3 { margin-bottom: .45rem; }
.res-card p { font-size: .98rem; color: var(--muted); max-width: 46ch; }
.res-card .btn { align-self: flex-start; margin-top: auto; }

/* The eight stages, and the roomier step list used on the works pages */
.res-steps {
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
  border-top: 1px solid var(--rule);
}
.res-steps > li {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  gap: 1.5rem;
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--rule);
}
@media (max-width: 640px) {
  .res-steps > li { grid-template-columns: 1fr; gap: .45rem; }
}
.res-ix {
  font-family: var(--display);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--pf-teal-read);
  padding-top: .35rem;
}
/* Two columns inside a step: what happens on the left, what the
   resident has to do on the right, so the row uses the full column
   instead of trailing off into an empty right half. */
.res-steps > li > div {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  column-gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}
.res-steps > li > div > h3 { grid-column: 1 / -1; }
.res-steps > li > div > p { grid-column: 1; }
.res-steps > li > div > .res-do { grid-column: 2; grid-row: 2; }
@media (max-width: 860px) {
  .res-steps > li > div { grid-template-columns: 1fr; }
  .res-steps > li > div > p,
  .res-steps > li > div > .res-do { grid-column: 1; grid-row: auto; }
}
.res-steps h3 { margin: 0 0 .45rem; }
.res-steps p { font-size: 1rem; margin-bottom: .7rem; max-width: 62ch; }
.res-do {
  font-size: .95rem;
  color: var(--muted);
  margin: .15rem 0 .7rem;
  max-width: 52ch;
  border-left: 3px solid var(--pf-teal);
  padding-left: 1rem;
}
.res-do strong { font-family: var(--display); color: var(--pf-deep); }

/* Contact panels */
.res-contact {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}
@media (max-width: 780px) { .res-contact { grid-template-columns: 1fr; } }
.res-panel {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.5rem 1.6rem;
}
.res-panel h3 { font-size: 1.1rem; margin-bottom: .5rem; }
.res-panel p { font-size: .98rem; color: var(--muted); }
.res-phone {
  display: inline-block;
  font-family: var(--display);
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--pf-deep);
  text-decoration: none;
  padding: .35rem 0;
  min-height: 48px;
}
.res-phone:hover { color: var(--pf-teal-read); text-decoration: underline; }

/* The resident FAQ is long, so it runs in two columns on wide screens
   rather than as a thin strip down the left of the page. */
.faq.res-faq { max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
@media (max-width: 820px) { .faq.res-faq { grid-template-columns: 1fr; } }

/* Long resident lists run in two columns on wide screens so a page of
   plain guidance does not trail down the left edge. */
.excl.res-cols {
  max-width: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(2rem, 4vw, 3.5rem);
  row-gap: 1.4rem;
}
@media (max-width: 820px) { .excl.res-cols { grid-template-columns: 1fr; } }

/* Same treatment for the definition rows on the resident pages. */
.deflist.res-def {
  max-width: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(2rem, 4vw, 3.5rem);
}
.deflist.res-def > li { border-top: 0; }
@media (max-width: 820px) { .deflist.res-def { grid-template-columns: 1fr; } }

/* ============================================================
   AUDIT FIX, 1 September 2026
   Hardware naming, warranty blocks, finance line, legal footer.
   ============================================================ */

/* Build cards: the over-delivered label, and the kit line */
.pkg h3 .kwp {
  display: inline-block;
  font-family: var(--display);
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pf-teal-read);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: .1rem .5rem;
  margin-left: .5rem;
  vertical-align: middle;
  white-space: nowrap;
}
.pkg-kit {
  font-size: .88rem;
  color: var(--muted);
  margin: .7rem 0 0;
  padding-left: .85rem;
  border-left: 2px solid var(--pf-teal);
  max-width: 62ch;
}
.pkg-kit > span {
  display: block;
  font-family: var(--display);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pf-teal-read);
  margin-bottom: .2rem;
}

/* Finance, visible earlier. One sentence, no figures. */
.fin-line {
  margin-top: 1.25rem;
  padding: .9rem 1.1rem;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--pf-teal);
  border-radius: var(--radius);
  background: var(--shell);
  font-size: .95rem;
  color: var(--muted);
  max-width: 78ch;
}
.fin-line a { color: var(--pf-deep); font-weight: 700; }

/* Warranty */
.wty-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}
@media (max-width: 980px) { .wty-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .wty-grid { grid-template-columns: 1fr; } }
.wty-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--pf-teal);
  border-radius: var(--radius);
  padding: 1.2rem 1.25rem;
}
.wty-label {
  font-family: var(--display);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pf-teal-read);
  margin: 0;
}
.wty-term {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--pf-deep);
  margin: .35rem 0 .1rem;
}
.wty-by {
  font-family: var(--display);
  font-size: .8rem;
  font-weight: 500;
  color: var(--pf-deep);
  margin: 0 0 .6rem;
}
.wty-note { font-size: .88rem; color: var(--muted); margin: 0; }
.excl.wty li strong { display: block; }

/* Footer: a fourth column, the legal links and the registration line */
.foot-grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; }
@media (max-width: 980px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 780px) { .foot-grid { grid-template-columns: 1fr; } }
.foot-note {
  font-size: .85rem;
  margin: 0 0 .75rem;
  max-width: 40ch;
}
.foot-links {
  margin-top: .75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}
.foot-links a {
  font-family: var(--display);
  font-size: .78rem;
  font-weight: 600;
  color: var(--pf-deep);
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.foot-links a:hover { color: var(--pf-teal-read); text-decoration: underline; }
.f-foot-reg { flex-basis: 100%; }

/* The funnel chip used to count down an invented "about 80s left". The
   countdown is gone from funnel.js and the chip now reads percentage only,
   so it stays visible alongside the fixed hint line under the bar. */
/* The shell gained a row for the hint line under the bar. */
.funnel-shell { grid-template-rows: auto auto auto 1fr auto; }
.progress-hint {
  font-family: var(--display);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
  padding: .55rem 0 0;
}
.progress-hint span { text-transform: none; letter-spacing: 0; font-weight: 500; }