/* ============================================================
   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;
}