/* IT Renewables: layout and component layer.
   Colour and type come from tokens.css. Nothing in this file
   invents a new colour or a new font size. */

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

:root {
  --sp-xs: 0.5rem;
  --sp-sm: 0.875rem;
  --sp-md: 1.5rem;
  --sp-lg: 2.5rem;
  --sp-xl: 4rem;
  --sp-section: clamp(4rem, 9vw, 6.5rem);
  --wrap: 1120px;
  --radius: 14px;
  --radius-sm: 8px;
  --edge: clamp(1.25rem, 5vw, 2.5rem);
}

html { scroll-behavior: smooth; }
body { margin: 0; background: var(--it-bg); -webkit-font-smoothing: antialiased; overflow-x: hidden; }

/* tokens.css caps paragraphs at 34rem. Keep it, but let specific
   contexts opt out rather than overriding it globally. */
img { max-width: 100%; height: auto; display: block; }
a { color: var(--it-link); }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--edge); }
.wrap--narrow { max-width: 46rem; }
.section { padding-block: var(--sp-section); }
.section--tight { padding-block: clamp(2.5rem, 6vw, 4rem); }

.band-cold { background: var(--it-cold); color: var(--it-limewash); }
.band-cold h1, .band-cold h2, .band-cold h3 { color: var(--it-limewash); }
.band-cold a { color: var(--it-flame); }
.band-mist { background: var(--it-panel); }

h1, h2, h3 { margin: 0 0 var(--sp-md); }
h3 {
  font-size: var(--it-size-sub); font-weight: 600;
  font-variation-settings: 'wdth' 110; line-height: 1.25;
  color: var(--it-heading); margin-bottom: var(--sp-xs);
}
p { margin: 0 0 var(--sp-md); }
p:last-child { margin-bottom: 0; }
.prose p + h2, .prose p + h3 { margin-top: var(--sp-lg); }
.prose p, .prose li { max-width: 38rem; }
.prose ul { padding-left: 1.2rem; }
.prose li { margin-bottom: 0.6rem; }

.eyebrow {
  font-size: var(--it-size-label); font-weight: 600; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--it-ember);
  margin: 0 0 var(--sp-sm); display: block;
}
.band-cold .eyebrow { color: var(--it-flame); }
.lede { font-size: var(--it-size-sub); line-height: 1.55; }
.intro { margin-bottom: var(--sp-lg); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  font: inherit; font-size: var(--it-size-body); font-weight: 600;
  font-variation-settings: 'wdth' 108; line-height: 1.1;
  padding: 1.0625rem 1.75rem; min-height: 56px;
  border: 2px solid transparent; border-radius: var(--radius-sm);
  cursor: pointer; text-decoration: none;
  transition: background-color .18s ease, transform .18s ease, border-color .18s ease;
}
.btn--primary { background: var(--it-cta-bg); color: var(--it-cta-text); }
.btn--primary:hover { background: var(--it-cta-bg-hover); transform: translateY(-1px); }
/* On cold bands the grant figure wears the flame, so the button steps
   back to limewash. One flame element per screenful. */
.btn--light { background: var(--it-limewash); color: var(--it-cold); }
.btn--light:hover { background: #fff; transform: translateY(-1px); }
.btn--outline { background: transparent; color: var(--it-cold); border-color: var(--it-cold); }
.btn--outline:hover { background: var(--it-cold); color: var(--it-limewash); }
.btn--full { width: 100%; }
.btn-row { margin-top: var(--sp-lg); }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 3px solid var(--it-focus); outline-offset: 3px;
}
.band-cold a:focus-visible, .band-cold button:focus-visible,
.band-cold input:focus-visible, .band-cold select:focus-visible { outline-color: var(--it-flame); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--it-cold); color: var(--it-limewash); padding: 1rem 1.25rem;
}
.skip:focus { left: 0; }

/* ---------- Header ---------- */
.masthead {
  background: var(--it-limewash); border-bottom: 1px solid rgba(22,50,60,.12);
}
.masthead__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-md); padding-block: 0.75rem; }
.masthead__logo img { width: 168px; }
.masthead .btn { padding: 0.75rem 1.25rem; min-height: 48px; font-size: var(--it-size-note); }
@media (max-width: 560px) { .masthead .btn { display: none; } .masthead__logo img { width: 150px; } }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; }
.hero__grid {
  display: grid; gap: clamp(2rem, 5vw, 3.5rem); grid-template-columns: 1fr;
  align-items: center; padding-block: clamp(2.75rem, 7vw, 4.5rem) clamp(3rem, 7vw, 4.5rem);
}
@media (min-width: 900px) { .hero__grid { grid-template-columns: 1.08fr 0.92fr; } }
.hero h1 { max-width: 16ch; }

/* ---------- Signature: the grant differential ---------- */
.differential { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 0 var(--sp-md); margin: var(--sp-lg) 0 var(--sp-md); }
.differential__big { color: var(--it-flame); display: block; }
.differential__against { display: flex; flex-direction: column; gap: 0.2rem; padding-bottom: 0.5rem; }
.differential__old {
  position: relative; font-size: var(--it-size-sub); font-weight: 500;
  font-feature-settings: 'tnum'; color: var(--it-mist); align-self: flex-start;
}
.differential__old::after {
  content: ""; position: absolute; left: -2px; right: -2px; top: 52%; height: 2px;
  background: var(--it-flame); transform: scaleX(0); transform-origin: left center;
  animation: strike .55s cubic-bezier(.6,0,.3,1) 1.1s forwards;
}
@keyframes strike { to { transform: scaleX(1); } }
.differential__label { font-size: var(--it-size-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--it-mist); opacity: .75; }
.differential__caption { font-size: var(--it-size-note); color: var(--it-mist); max-width: 42ch; }

/* ---------- Postcode capture (CTA pattern 1) ---------- */
.capture { margin-top: var(--sp-lg); max-width: 30rem; }
.capture__row { display: flex; gap: 0.625rem; flex-wrap: wrap; }
.capture__field {
  flex: 1 1 11rem; font: inherit; font-size: var(--it-size-body);
  padding: 1rem 1.0625rem; min-height: 56px;
  border: 2px solid var(--it-cold-mid); border-radius: var(--radius-sm);
  background: var(--it-limewash); color: var(--it-ink); text-transform: uppercase;
}
.capture__field::placeholder { color: #6a7b81; text-transform: none; }
.capture__note { font-size: var(--it-size-note); margin-top: 0.75rem; color: var(--it-mist); }

/* ---------- Google reviews ----------
   Every figure here is fetched live. If the fetch fails the block
   stays hidden. Nothing is ever hardcoded or approximated. */
.stars { display: inline-flex; gap: 2px; vertical-align: -2px; }
.hero-rating {
  display: none; align-items: center; flex-wrap: wrap; gap: 0.5rem 0.75rem;
  margin-top: var(--sp-md); font-size: var(--it-size-note); color: var(--it-mist);
}
.hero-rating.is-ready { display: flex; }
.hero-rating .stars svg { fill: var(--it-limewash); }
.hero-rating__score { font-weight: 700; font-feature-settings: 'tnum'; color: var(--it-limewash); }
.hero-rating a { color: var(--it-mist); text-decoration: underline; text-underline-offset: 3px; }

/* Static figures render by default, so there is no empty-band failure
   mode. reviews.js only ever adds to this, never blanks it. */
.reviews { display: none; }
.reviews.is-ready { display: block; }
.reviews__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem 1rem; margin-bottom: var(--sp-lg); }
.reviews__score { font-size: 2.25rem; font-weight: 700; font-variation-settings: 'wdth' var(--it-wdth-figure); font-feature-settings: 'tnum'; line-height: 1; color: var(--it-cold); }
.reviews__count { font-size: var(--it-size-note); }
.reviews .stars svg { fill: var(--it-flame); }
.reviews__grid { display: grid; gap: var(--sp-md); grid-template-columns: 1fr; }
@media (min-width: 720px) { .reviews__grid { grid-template-columns: repeat(3, 1fr); } }
.review {
  background: var(--it-limewash); border: 1px solid rgba(22,50,60,.14);
  border-radius: var(--radius); padding: var(--sp-md);
  display: flex; flex-direction: column; gap: var(--sp-sm);
}
.review__text { font-size: var(--it-size-note); margin: 0; max-width: none; }
.review__meta { margin-top: auto; font-size: var(--it-size-label); color: var(--it-ink); opacity: .75; }
.review__author { font-weight: 600; opacity: 1; display: block; font-size: var(--it-size-note); }
.reviews__attrib { margin-top: var(--sp-md); font-size: var(--it-size-note); }

/* ---------- Eligibility strip ---------- */
.qualify { display: grid; gap: var(--sp-md); grid-template-columns: 1fr; }
@media (min-width: 720px) { .qualify { grid-template-columns: repeat(3, 1fr); } }
.qualify__item { background: var(--it-limewash); border-radius: var(--radius); padding: var(--sp-md); display: flex; gap: var(--sp-md); align-items: flex-start; }
.qualify__item svg { flex: 0 0 auto; }
.qualify__item p { font-size: var(--it-size-note); margin: 0; max-width: none; }

/* ---------- Timeline ---------- */

/* ---------- Steps ---------- */
.steps { display: grid; gap: var(--sp-md); grid-template-columns: 1fr; }
@media (min-width: 640px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step { background: var(--it-panel); border-radius: var(--radius); padding: var(--sp-md); display: flex; flex-direction: column; gap: var(--sp-sm); }
.step__n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--it-cold); color: var(--it-limewash);
  font-weight: 700; font-size: var(--it-size-body); font-feature-settings: 'tnum';
}
.step p { font-size: var(--it-size-note); margin: 0; max-width: none; }

/* ---------- Objections ---------- */
.objections { display: grid; gap: var(--sp-md); grid-template-columns: 1fr; }
@media (min-width: 780px) { .objections { grid-template-columns: repeat(2, 1fr); } }
.objection { border: 1px solid var(--it-cold-mid); border-radius: var(--radius); padding: var(--sp-md); display: flex; gap: var(--sp-md); align-items: flex-start; }
.objection h3 { color: var(--it-limewash); }
.objection p { font-size: var(--it-size-note); color: var(--it-mist); margin: 0; max-width: none; }
.objection svg { flex: 0 0 auto; }

/* ---------- Local proof ---------- */
.proof { display: grid; gap: clamp(2rem, 5vw, 3.5rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .proof { grid-template-columns: 1.05fr 0.95fr; } }
.counties { list-style: none; margin: var(--sp-md) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.counties li { font-size: var(--it-size-note); background: var(--it-panel); color: var(--it-cold); padding: 0.4rem 0.8rem; border-radius: 999px; }
.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-md); }
.facts li { display: flex; gap: var(--sp-md); align-items: flex-start; }
.facts p { font-size: var(--it-size-note); margin: 0; max-width: none; }
.facts svg { flex: 0 0 auto; }

/* ---------- FAQ ---------- */
.faq details { border-bottom: 1px solid rgba(22,50,60,.18); }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.25rem 2.5rem 1.25rem 0;
  font-size: var(--it-size-sub); font-weight: 600; font-variation-settings: 'wdth' 108;
  color: var(--it-heading); position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 0.5rem; top: 50%;
  width: 11px; height: 11px; margin-top: -7px;
  border-right: 2.5px solid var(--it-ember); border-bottom: 2.5px solid var(--it-ember);
  transform: rotate(45deg); transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.faq details p { padding-bottom: 1.25rem; font-size: var(--it-size-note); max-width: 38rem; }

/* ---------- Lead form (CTA pattern 3) ---------- */
.leadform { max-width: 38rem; }
.field { margin-bottom: var(--sp-md); }
.field label { display: block; font-size: var(--it-size-note); font-weight: 600; margin-bottom: 0.4rem; color: var(--it-cold); }
.field input, .field select {
  width: 100%; font: inherit; font-size: var(--it-size-body);
  padding: 0.9375rem 1rem; min-height: 54px;
  border: 2px solid rgba(22,50,60,.28); border-radius: var(--radius-sm);
  background: var(--it-limewash); color: var(--it-ink);
}
.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 49%, var(--it-cold) 50%), linear-gradient(-45deg, transparent 49%, var(--it-cold) 50%);
  background-size: 8px 8px; background-position: right 1.15rem center, right 0.7rem center; background-repeat: no-repeat;
}
.field--hp { position: absolute; left: -9999px; }
.formnote { font-size: var(--it-size-note); margin-top: var(--sp-md); max-width: 38rem; }

/* ---------- Footer ---------- */
.foot { font-size: var(--it-size-note); }
.foot__grid { display: grid; gap: var(--sp-lg); grid-template-columns: 1fr; }
@media (min-width: 760px) { .foot__grid { grid-template-columns: 1.2fr 1fr; } }
.foot img { width: 180px; }
.foot p { color: var(--it-mist); max-width: 40ch; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }

/* ---------- Sticky mobile CTA ---------- */
.stickybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--it-cold);
  padding: 0.625rem var(--edge) calc(0.625rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--it-cold-mid);
  transform: translateY(110%); transition: transform .25s ease;
}
.stickybar.is-visible { transform: translateY(0); }
.stickybar .btn { width: 100%; min-height: 52px; }
@media (min-width: 780px) { .stickybar { display: none; } }

/* ---------- Motion ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-in { opacity: 1; transform: none; }
.fan { transform-origin: 200px 148px; animation: spin 9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fan { animation: none; }
  .differential__old::after { animation: none; transform: scaleX(1); }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn { transition: none; }
}

/* ---------- Work reel ----------
   Horizontal scroll-snap strip of real job photos. Frames are fixed at
   4:5 and images are cropped to match, so nothing shifts as they load. */
.reel__track {
  display: flex; gap: var(--sp-md);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  margin-inline: calc(var(--edge) * -1);
  padding: 0 var(--edge) 0.75rem;
  scroll-padding-inline: var(--edge);
  scrollbar-width: thin; scrollbar-color: var(--it-mist) transparent;
}
.reel__item { flex: 0 0 clamp(220px, 68vw, 288px); scroll-snap-align: start; }
.reel__frame {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: var(--radius); background: var(--it-panel);
}
.reel__frame img, .reel__frame svg { width: 100%; height: 100%; display: block; object-fit: cover; }
.reel__cap { font-size: var(--it-size-note); margin: 0.875rem 0 0; max-width: none; font-weight: 600; color: var(--it-cold); }
.reel__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-md); }
.reel__nav { display: none; gap: 0.5rem; flex: 0 0 auto; padding-bottom: 0.25rem; }
@media (min-width: 900px) { .reel__nav { display: flex; } }
.reel__btn {
  width: 48px; height: 48px; border-radius: 50%;
  border: 2px solid var(--it-cold); background: transparent; color: var(--it-cold);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: background-color .18s ease, color .18s ease;
}
.reel__btn:hover { background: var(--it-cold); color: var(--it-limewash); }
.reel__btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Tariff dial ---------- */
.dial { width: 100%; max-width: 340px; height: auto; margin-inline: auto; display: block; }
.dial-legend { list-style: none; margin: var(--sp-md) auto 0; padding: 0; max-width: 340px; display: grid; gap: 0.5rem; }
.dial-legend li { display: flex; align-items: center; gap: 0.6rem; font-size: var(--it-size-note); }
.dial-legend i { width: 18px; height: 6px; border-radius: 3px; flex: 0 0 auto; }
.dial-legend .k-cheap { background: var(--it-flame); }
.dial-legend .k-std { background: var(--it-mist); }

/* Work reel on the cold band: photos read better against dark, and it
   separates the reel from the local proof section above it. */
.band-cold .reel__frame { background: var(--it-cold-mid); }
.band-cold .reel__cap { color: var(--it-limewash); }
.band-cold .band-cold .reel__btn { border-color: var(--it-limewash); color: var(--it-limewash); }
.band-cold .reel__btn:hover { background: var(--it-limewash); color: var(--it-cold); }
.band-cold .reel__track { scrollbar-color: var(--it-cold-mid) transparent; }

/* ---------- Timeline ----------
   Built in HTML rather than SVG: SVG <text> scales with the viewBox, so
   14px labels ended up around 7px on a phone. This stays legible. */
.tl { max-width: 34rem; margin-block: var(--sp-md) var(--sp-lg); }
.tl__bar { height: 10px; border-radius: 5px; background: var(--it-mist); position: relative; }
.tl__fill { position: absolute; inset: 0 33% 0 0; border-radius: 5px; background: var(--it-flame); }
.tl__marks { display: flex; justify-content: space-between; gap: 1rem; list-style: none; margin: 0.75rem 0 0; padding: 0; }
.tl__marks li { font-size: var(--it-size-note); }
.tl__marks li:last-child { text-align: right; }
.tl__marks strong { display: block; font-feature-settings: 'tnum'; color: var(--it-cold); }
.tl__marks span { color: var(--it-ember); }

/* ---------- Mobile ---------- */
/* Small breathing room on anchor jumps. The header no longer sticks,
   so this is aesthetic rather than a fix for content hiding under it. */
#estimate, #reviews { scroll-margin-top: 1.5rem; }

@media (max-width: 779px) {
  /* Keep the sticky CTA from covering the last of the footer. */
  .foot { padding-bottom: calc(var(--sp-xl) + 3.5rem); }
  /* Hero art is decorative; give the words the room on a phone. */
  .hero__grid > div:last-child { max-width: 320px; margin-inline: auto; }
  .reel__head { display: block; }
  .differential { gap: 0 var(--sp-sm); }
}

@media (max-width: 400px) {
  .capture__row { display: grid; }
  .capture__row .btn { width: 100%; }
}

/* ============================================================
   TOOL MODAL
   Restyle only. Class names below are the ones the tool's JS
   injects at runtime (.home, .stat, .ready, .note, .confirmrow,
   .btn, .fine). Renaming any of them breaks the tool. Their
   original stylesheet is deleted; this replaces it in brand tokens.
   ============================================================ */

.modal {
  display: none; position: fixed; inset: 0; z-index: 100;
  background: rgba(22, 50, 60, .62);
  overflow-y: auto; padding: clamp(0.75rem, 4vw, 2.5rem) clamp(0.75rem, 3vw, 1.5rem);
  -webkit-overflow-scrolling: touch;
}
.modal.open { display: block; }
.sheet {
  background: var(--it-limewash); border-radius: var(--radius);
  max-width: 34rem; margin-inline: auto; position: relative;
  padding: clamp(1.5rem, 5vw, 2.25rem) clamp(1.25rem, 4vw, 2rem) clamp(1.75rem, 5vw, 2.25rem);
  box-shadow: 0 24px 60px rgba(22, 50, 60, .28);
}
.close {
  position: absolute; top: 0.6rem; right: 0.6rem;
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: none; color: var(--it-cold);
  font-size: 1.75rem; line-height: 1; cursor: pointer;
}
.close:hover { background: var(--it-panel); }

.sheet h2 { font-size: var(--it-size-section); margin-bottom: var(--sp-xs); }
.sheet p { font-size: var(--it-size-note); max-width: none; }
.stepno {
  font-size: var(--it-size-label); font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--it-ember); margin-bottom: 0.4rem;
}
.panel, .spanel { display: none; }
.panel.on, .spanel.on { display: block; }

.sheet .field { margin: var(--sp-md) 0; }
.sheet .field label { display: block; font-weight: 600; font-size: var(--it-size-note); margin-bottom: 0.35rem; color: var(--it-cold); }
.sheet .field input, .sheet .field textarea, .sheet .field select {
  width: 100%; font: inherit; font-size: var(--it-size-body);
  padding: 0.875rem 1rem; min-height: 52px;
  border: 2px solid rgba(22,50,60,.28); border-radius: var(--radius-sm);
  background: #fff; color: var(--it-ink);
}
.sheet .field textarea { min-height: 7rem; }
.row { display: flex; gap: 0.5rem; }
.row input { flex: 1; min-width: 0; }

.sheet .btn {
  font: inherit; font-size: var(--it-size-body); font-weight: 600;
  font-variation-settings: 'wdth' 108;
  background: var(--it-cta-bg); color: var(--it-cta-text);
  border: 2px solid transparent; border-radius: var(--radius-sm);
  padding: 0.875rem 1.375rem; min-height: 52px; cursor: pointer;
  transition: background-color .18s ease;
}
.sheet .btn:hover { background: var(--it-cta-bg-hover); }
.sheet .btn.ghost { background: transparent; color: var(--it-cold); border-color: var(--it-cold); }
.sheet .btn.ghost:hover { background: var(--it-cold); color: var(--it-limewash); }
.sheet .btn[disabled] { opacity: .45; cursor: default; }
.sheet .btn[disabled]:hover { background: var(--it-cta-bg); }

.status { margin: 0.625rem 0; font-size: var(--it-size-note); min-height: 1.3em; color: var(--it-ink); }
.counter { font-size: var(--it-size-label); color: var(--it-ink); opacity: .7; margin-top: 0.35rem; }
.counter.ok { color: var(--it-ember); opacity: 1; font-weight: 600; }

.addr { max-height: 18rem; overflow-y: auto; border: 2px solid rgba(22,50,60,.2); border-radius: var(--radius-sm); margin: 0.5rem 0 var(--sp-md); background: #fff; }
.addr label { display: block; padding: 0.8rem 0.9rem; border-bottom: 1px solid rgba(22,50,60,.14); cursor: pointer; font-size: var(--it-size-note); }
.addr label:last-child { border-bottom: 0; }
.addr label:hover { background: var(--it-panel); }
.addr input { margin-right: 0.6rem; }

.opts label {
  display: block; background: var(--it-panel); border: 2px solid transparent;
  border-radius: var(--radius-sm); padding: 0.8rem 0.9rem; margin-bottom: 0.5rem;
  cursor: pointer; font-size: var(--it-size-note); min-height: 52px;
}
.opts label:hover { border-color: var(--it-cold-mid); }
.opts input { margin-right: 0.6rem; }
.sheet legend { font-weight: 600; font-size: var(--it-size-note); margin-bottom: 0.5rem; color: var(--it-cold); }
.sheet fieldset { border: 0; padding: 0; margin: 0 0 var(--sp-md); }
.sheet fieldset.hidden { display: none; }

.nav { display: flex; justify-content: space-between; gap: 0.625rem; margin-top: var(--sp-md); }
.fine { font-size: var(--it-size-label); color: var(--it-ink); opacity: .8; margin-top: 0.75rem; }
.note { background: var(--it-panel); border-radius: var(--radius-sm); padding: 0.7rem 0.85rem; font-size: var(--it-size-note); margin: 0.5rem 0 var(--sp-md); }

/* The authority moment: the certificate card and the pulled-from-EPC grid. */
.home { border: 2px solid var(--it-mist); border-radius: var(--radius-sm); padding: var(--sp-md); margin-bottom: var(--sp-md); background: #fff; }
.home dt { font-size: var(--it-size-label); text-transform: uppercase; letter-spacing: .05em; color: var(--it-ember); }
.home dd { margin: 0 0 0.6rem; font-weight: 600; font-size: var(--it-size-note); }
.confirmrow { display: flex; gap: 0.625rem; margin: 0.25rem 0 var(--sp-md); }
.confirmrow .btn { flex: 1; }
.ready { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.ready li { padding: 0.25rem 0 0.25rem 1.6rem; position: relative; font-size: var(--it-size-note); }
.ready li:before { content: "\2713"; position: absolute; left: 0; color: var(--it-ember); font-weight: 700; }
.ready li em { font-style: normal; opacity: .7; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.4rem, 1fr)); gap: 0.5rem; margin: 0.4rem 0; }
.stat { background: var(--it-panel); border-radius: var(--radius-sm); padding: 0.6rem 0.7rem; }
.stat b { display: block; font-size: var(--it-size-note); font-feature-settings: 'tnum'; color: var(--it-cold); }
.stat span { display: block; font-size: var(--it-size-label); text-transform: uppercase; letter-spacing: .04em; opacity: .7; margin-top: 0.1rem; }
.pulled { font-size: var(--it-size-label); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--it-ember); margin: 0.75rem 0 0.2rem; }

@media (prefers-reduced-motion: reduce) { .sheet .btn, .close { transition: none; } }

/* ---------- The three doors ---------- */
.doors { display: grid; gap: var(--sp-md); grid-template-columns: 1fr; }
@media (min-width: 780px) { .doors { grid-template-columns: repeat(3, 1fr); } }
.door {
  background: var(--it-limewash); border: 2px solid var(--it-mist);
  border-radius: var(--radius); padding: var(--sp-md);
  display: flex; flex-direction: column; gap: var(--sp-sm);
}
.door p { font-size: var(--it-size-note); margin: 0; max-width: none; flex: 1; }
.door .btn-door { margin-top: var(--sp-xs); }

/* Outline button for use on the cold band, where limewash is already
   taken by the primary. */
.btn--ghost-light { background: transparent; color: var(--it-limewash); border-color: var(--it-limewash); }
.btn--ghost-light:hover { background: var(--it-limewash); color: var(--it-cold); }

/* Thank-you page: the tool's script writes result HTML into #result. */
.ty #result h2 { font-size: var(--it-size-section); margin-top: var(--sp-lg); }
.ty #result p { font-size: var(--it-size-body); }
.ty .stats { margin-block: var(--sp-md); }