/* Universal Energy — Phase 1 rebrand component styles.
   New, additive file: nothing here edits a selector already defined in style.css, and no
   class name here collides with one already used there (verified — see Task 3 ledger).
   Only loaded by the Phase 1 pages (index.html, business.html, how-we-work.html). Dark-theme
   diagram/panel surfaces deliberately stay light-background/dark-text even on .theme-business
   pages (never a dark fill behind label text) — see ledger Task 3 ruling. */

/* ---- Light/dark theme switch ----
   Scoped CSS custom property override: re-points the base tokens to the rebrand dark set
   only within elements carrying .theme-business (applied to <body> on business.html). A
   page without this class is completely unaffected — these are the same --color-* names
   the rest of style.css already reads, just overridden lower in the cascade. */
.theme-business {
  --color-bg: var(--rebrand-dark-bg);
  --color-secondary: var(--rebrand-dark-surface);
  --color-bg-primary-tint: var(--rebrand-dark-surface);
  --color-text: var(--rebrand-dark-text);
  --color-text-body: var(--rebrand-dark-text-muted);
  --color-text-muted: var(--rebrand-dark-text-muted);
  --color-border: var(--rebrand-dark-border);
  --color-border-soft: var(--rebrand-dark-border);
  --color-navy: var(--rebrand-dark-text);
}
.theme-business .navbar { background: var(--rebrand-dark-bg); }
.theme-business .mobile-menu-panel,
.theme-business .services-dropdown,
.theme-business .quote-menu-panel { background: #ffffff; color: #1e1e1c; }
.theme-business .mobile-menu-panel > a,
.theme-business .mobile-services-summary { color: #1e1e1c; }
/* Final review fix (Critical #2): .droplink and .mobile-services-sub a each set their own
   `color: var(--color-navy|--color-text-body)` in style.css, which overrides the container
   rules above (an element's own color always wins over an inherited one, regardless of the
   parent rule's specificity) — so without these, every link inside the light-surfaced
   dropdown/mobile-submenu popups was white-on-white or low-contrast. */
.theme-business .droplink,
.theme-business .mobile-services-sub a { color: #1e1e1c; }
/* .btn-secondary's own background is always a hardcoded #fff (not theme-aware), so once
   --color-text flips to white its text became invisible on that white background. */
.theme-business .btn-secondary { color: #1e1e1c; }
/* These three components reuse --color-text/--color-navy as a "dark neutral" BACKGROUND
   value (not a text color) in style.css — footer-v2's background, #back-to-top's
   background, and #chat-widget-header's background are each `var(--color-text)` or
   `var(--color-navy)` while their own text stays a hardcoded #fff. Flipping those tokens to
   white for the dark theme silently turned all three white-on-white. Restoring an explicit
   dark background keeps them visually identical to the light theme on every page. */
.theme-business #back-to-top,
.theme-business #chat-widget-header { background: var(--rebrand-dark-surface); }
/* footer-v2 specifically: the rule above used --rebrand-dark-surface (#132F3B, dark teal),
   which never actually matched the light theme's own footer color (#1e1e1c, --color-text's
   base value) despite the comment's stated goal — user feedback, 2026-11-12: the footer
   should be the exact same black on Business pages as on Home. */
.theme-business .footer-v2 { background: #1e1e1c; }

/* ---- Phase 2 Business-context service pages (business-ev-chargers.html, eicr.html,
   electrical-testing.html) — same class of bug as the Critical #2 fix above, found in
   whole-branch review. These pages reuse style.css sections with hardcoded light inline
   backgrounds (amber #faf3e0 / cyan #eafafc tints, or eicr's white .scenario-table) whose
   heading/body text relies on --color-navy/--color-text, now flipped to white by the theme
   switch above — invisible against a background that never changes. !important is required:
   these are inline styles on the page itself, which an external stylesheet can't otherwise
   out-specificity. Also covers the #6b6b66 body copy that sits directly on the dark page
   background outside these sections (too low contrast there), while leaving it untouched
   inside them, where gray-on-light is already fine. */
.theme-business [style*="background:#faf3e0"],
.theme-business [style*="background:#eafafc"],
.theme-business .scenario-table[style*="background:#fff"] { color: #1e1e1c !important; }
.theme-business .scenario-table[style*="background:#fff"] th { color: #1e1e1c !important; border-bottom-color: #eeeeec !important; }
.theme-business .scenario-table[style*="background:#fff"] td { border-bottom-color: #eeeeec !important; }
.theme-business [style*="color:#6b6b66"] { color: rgba(255,255,255,.65) !important; }
.theme-business [style*="background:#faf3e0"] [style*="color:#6b6b66"],
.theme-business [style*="background:#eafafc"] [style*="color:#6b6b66"],
.theme-business .scenario-table[style*="background:#fff"] [style*="color:#6b6b66"] { color: #4a4a46 !important; }

/* ---- Pin hero content to a fixed top offset on Home/Business (user feedback,
   2026-11-11) — style.css's base .hero-v2 vertically CENTERS its content block within the
   full-viewport-height hero (align-items:center), so two heroes with different amounts of
   trailing content (Home's shorter hero vs. Business's hero-actions buttons) place the
   toggle, their shared first element, at different Y offsets even though it's first in both.
   Switching to flex-start with .hero-v2-content's own fixed top padding (still inherited,
   unedited, from style.css) pins the toggle to the same offset on both pages regardless of
   what follows it. Scoped to these two pages' own body classes, not a base style.css edit. -->
.page-home .hero-v2, .page-business .hero-v2 { align-items: flex-start; height: 720px; min-height: 720px; }
/* Business's hero (no postcode form, no scroll cue) has noticeably less content than
   Home's, so even top-aligned at the SAME padding it can read as having more empty space
   above the toggle. Trim its top padding specifically (user feedback, 2026-11-11) — Home's
   padding is untouched, inherited from style.css's base .hero-v2-content rule. No browser is
   available in this session to measure this precisely; treat the px value below as a
   starting point to adjust from, not a verified-exact match. */
.page-business .hero-v2-content { padding-top: 64px; }

/* ---- Bigger logo on the rebrand pages (user feedback, 2026-11-11) — additive override of
   style.css's .logo-img (128px/140px); navbar-inner's height grows to match so the taller
   logo doesn't overflow the sticky nav bar. ---- */
.navbar-inner { height: 160px; }
.logo-img { height: 152px; }

/* ---- Audience toggle (Home / Business pill, in the shared header) ---- */
.audience-toggle { display: inline-flex; background: var(--color-bg-primary-tint); border-radius: 999px; padding: 4px; gap: 2px; }
.audience-toggle-pill { padding: 8px 18px; border-radius: 999px; font-size: 14px; font-weight: 700; color: var(--color-text-muted); }
.audience-toggle-pill:hover { color: var(--color-text); }
.audience-toggle-pill.active { background: var(--color-navy); color: #fff; }
.theme-business .audience-toggle-pill.active { background: var(--color-primary); color: #fff; }
.audience-toggle-mobile { width: 100%; justify-content: center; margin: 10px 0 4px; }

/* ---- Floating Home/Business toggle (Phase 2) ----
   Replaces #sticky-cta site-wide (see style.css's #sticky-cta rule) — reuses its exact
   position/z-index/breakpoint so nothing shifts on mobile where #back-to-top/#chat-widget
   already live. Its pills are <button>s, not <a>s (unlike the hero toggle), so they need
   the same button-chrome reset .property-explorer-toggle already uses elsewhere. */
#audience-toggle-float { position: fixed; left: 20px; bottom: 20px; z-index: 114; }
#audience-toggle-float .audience-toggle-pill:not(.active) { background: none; }
#audience-toggle-float .audience-toggle-pill { border: none; cursor: pointer; font-family: inherit; }
@media (max-width: 640px) {
  #audience-toggle-float { left: 12px; bottom: 12px; }
}
/* style.css hides #sticky-cta/#back-to-top while a charger photo or drawer overlay is
   open (they'd sit under/over it awkwardly) — the floating toggle took over #sticky-cta's
   job and needs the same treatment, which style.css can't know about since it predates
   this component; added here instead of editing style.css directly. */
body.charger-overlay-open #audience-toggle-float { opacity: 0; visibility: hidden; pointer-events: none; }

/* ---- Quote menu (header "Get a quote" disclosure) ---- */
.quote-menu { position: relative; }
.quote-menu-summary { list-style: none; }
.quote-menu-panel { position: absolute; top: calc(100% + 8px); right: 0; background: #fff; color: #1e1e1c; border: 1px solid var(--color-border-soft); border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: 14px; min-width: 220px; z-index: 40; display: flex; flex-direction: column; gap: 4px; }
.quote-menu-label { font-size: 12px; font-weight: 700; letter-spacing: .04em; color: #8f8f89; text-transform: uppercase; margin-bottom: 4px; }
.quote-menu-option { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); font-size: 15px; font-weight: 600; color: #1e1e1c; }
.quote-menu-option:hover { background: var(--color-bg-primary-tint); color: #1e1e1c; }

/* ---- Property explorer (building + labelled panels) ----
   Desktop: a two-column layout — the illustration on one side, panel toggles + one open
   panel on the other, matching "labelled building and one open panel at a time." Mobile:
   a stacked accordion list below the illustration. The illustration itself and every panel
   stay light-background/dark-text, even inside .theme-business, since they're carrying
   label text that must stay legible (see ledger ruling) — the surrounding section is what
   carries the theme color, not the diagram or its panels. */
/* Image column widened (3fr vs 2fr) and building box stripped of its padding/min-height/
   flex-centering (user feedback, 2026-11-11) -- the user-supplied infographic has its own
   callout text baked in, so it needs to render as large as the layout allows for that text
   to stay legible, especially on mobile; the old sizing was tuned for a small icon-style
   SVG, not a full annotated photo. */
.property-explorer { display: grid; grid-template-columns: minmax(0,3fr) minmax(0,2fr); gap: 24px; align-items: start; background: var(--color-bg-primary-tint); border-radius: var(--radius-lg); padding: 24px; }
.property-explorer-building { background: #fff; border-radius: var(--radius-md); overflow: hidden; }
.property-explorer-building svg { width: 100%; height: auto; max-width: 420px; display: block; margin: 24px auto; }
.property-explorer-building img { width: 100%; height: auto; display: block; }
.property-explorer-panels { display: flex; flex-direction: column; gap: 10px; }
.property-explorer-panel { background: #fff; border: 2px solid var(--color-border-soft); border-radius: var(--radius-md); overflow: hidden; }
.property-explorer-panel.is-open { border-color: var(--color-primary); }
.property-explorer-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; background: none; border: none; font-size: 16px; font-weight: 700; color: #1e1e1c; text-align: left; cursor: pointer; font-family: inherit; min-height: 44px; }
.property-explorer-toggle-icon { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--color-bg-primary-tint); color: var(--color-primary-deep); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 800; transition: transform var(--transition-fast); }
.property-explorer-panel.is-open .property-explorer-toggle-icon { transform: rotate(45deg); }
.property-explorer-panel-body { padding: 0 20px 20px; color: #4a4a46; font-size: 15px; line-height: 1.6; }
/* Final review fix (Important #3): hiding panel bodies unconditionally meant every panel's
   description, qualifier and link — including the only homepage heat-pump link — was
   unreachable without JS. Gating on the existing site-wide .js class (added by an inline
   script at the top of <body>, same convention as .js .reveal in style.css) means the
   content stays fully visible until JS is confirmed running, only then collapsing to the
   single-open-panel behavior; a failed/blocked script leaves every panel open and readable. */
.js .property-explorer-panel-body { display: none; }
.js .property-explorer-panel.is-open .property-explorer-panel-body { display: block; }
.property-explorer-panel-qualifier { font-size: 13px; font-weight: 700; color: var(--color-primary-deep); margin: 8px 0; }
.property-explorer-panel-link { font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; }
@media (max-width: 860px) {
  .property-explorer { grid-template-columns: 1fr; padding: 16px; }
}

/* ---- Service cards (image-led, price badge, expandable savings, CTA) ----
   Replaces the Home property-explorer's building-image-plus-accordion layout with stylised
   per-service cards (user feedback, 2026-11-11) — structural inspiration only from
   boxt.co.uk (image-led card, price badge, CTA button), no boxt.co.uk branding/assets
   reproduced; colors/type are this site's own tokens throughout. The price badge uses the
   existing amber/accent tokens (this brand's actual accent color, not a new one) as the
   "gold label" the brief asked for. "See savings" is a <details> disclosure rather than a
   CSS-only hover tooltip, since hover doesn't exist on touch devices. */
.service-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.service-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow var(--transition-fast), transform var(--transition-fast); }
.service-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
/* .service-card-media is the positioning context for the price badge and is NOT itself
   clipped, so the badge (deliberately hanging below the image) isn't cut off; the image crop
   lives one level down, in .service-card-media-crop, which is the only element with
   overflow:hidden. Fixes the badge being clipped by the old single-element overflow:hidden. */
.service-card-media { position: relative; }
/* 1:1 to match the source photos, each normalized to exactly 1000x1000 before use (padded
   to square on a white background, then resized -- see the processing note in the commit
   this change shipped in). */
.service-card-media-crop { aspect-ratio: 1 / 1; overflow: hidden; background: #fff; transition: box-shadow var(--transition-fast); }
.service-card-media-crop img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Shadow on the image frame itself on hover/keyboard-focus (in addition to the whole-card
   lift below), per user feedback. :focus-within covers keyboard users tabbing to the card's
   summary/button, not just mouse hover. */
.service-card:hover .service-card-media-crop,
.service-card:focus-within .service-card-media-crop { box-shadow: var(--shadow-lg); }
.service-card-price { position: absolute; left: 16px; bottom: -15px; z-index: 2; background: var(--color-accent); color: #fff; font-weight: 800; font-size: 14px; letter-spacing: .01em; padding: 9px 16px; border-radius: 999px; box-shadow: var(--shadow-sm); white-space: nowrap; }
.service-card-price-neutral { background: var(--color-navy); }
.service-card-body { padding: 30px 22px 22px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.service-card-body h3 { font-size: 19px; font-weight: 800; margin: 0; color: #1e1e1c; }
.service-card-savings summary { list-style: none; cursor: pointer; font-size: 14px; font-weight: 700; color: var(--color-primary-deep); display: inline-flex; align-items: center; gap: 4px; }
.service-card-savings summary::-webkit-details-marker { display: none; }
.service-card-savings[open] summary { margin-bottom: 6px; }
.service-card-savings p { margin: 0; font-size: 14px; color: #6b6b66; line-height: 1.55; }
.service-card-cta { justify-content: center; margin-top: auto; }
@media (max-width: 760px) {
  .service-cards { grid-template-columns: 1fr; gap: 20px; }
}

/* ---- "Why choose Universal Energy" icons, doubled (user feedback, 2026-11-11) --
   style.css's base .why-icon/.why-icon svg (56px/26px) is additive-overridden here rather
   than edited directly, since this class is only used on these two rebrand pages but the
   base rule itself lives in the shared stylesheet. ---- */
.why-icon { width: 112px; height: 112px; background: linear-gradient(150deg, var(--color-accent), var(--color-accent-deep)); box-shadow: 0 8px 20px rgba(122,92,0,.28); }
.why-icon svg { width: 52px; height: 52px; }

/* ---- Three-step process ---- */
.process-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.process-step { border-top: 2px solid var(--color-border); padding-top: 16px; }
.process-step-num { font-size: 28px; font-weight: 800; color: var(--color-accent-deep); margin-bottom: 10px; }
.process-step h3 { font-size: 18px; font-weight: 800; margin: 0 0 8px; }
.process-step p { font-size: 15px; color: var(--color-text-muted); line-height: 1.55; margin: 0; }
@media (max-width: 760px) {
  .process-steps { grid-template-columns: 1fr; gap: 24px; }
}

/* ---- Proof/reassurance strip ----
   Same visual language as the base .trust-strip/.trust-item (reused, not duplicated) —
   this class exists only to give the rebrand pages a theme-aware background, since
   .trust-strip's own background is a fixed light tint that wouldn't suit .theme-business. */
.proof-strip { padding: 22px 0; background: var(--color-bg-primary-tint); }
.theme-business .proof-strip { background: var(--rebrand-dark-surface); }

/* ---- Home-page-only gold tick icons (user feedback, 2026-11-12) ----
   Scoped to .page-home so Business's identical trust-strip keeps the base cyan tick. */
.page-home .trust-icon { background: var(--color-accent-deep); }

/* ---- Anchor scroll offset for the renamed property-explorer section (replaces the old
   #what-we-install anchor the base stylesheet's rule still targets, now unused/harmless) ---- */
#property-explorer, #what-we-install, #property-explorer-section { scroll-margin-top: 150px; }

/* ---- FAQ accordion ----
   Layout wrapper only — each item reuses style.css's existing .assumptions-panel
   (<details>/<summary>), not a new item class, so FAQ items look identical to the ones
   already shipping on home-ev-chargers.html and the other pages that use it. */
.faq-accordion { display: flex; flex-direction: column; gap: 12px; max-width: 760px; margin: 0 auto; }

/* ---- CTA band, gold on every Business-context page (user feedback, 2026-11-12,
   extended from the single-band 2026-11-12 fix) ----
   Every .cta-band on a .theme-business page (business.html, business-ev-chargers.html,
   eicr.html, electrical-testing.html) is gold instead of the base cyan — these are the
   "Get a quote" / "Book an inspection" / "Book a test" strips. Scoped to the theme class,
   not a per-band class, so any future business-context page's cta-band picks this up
   automatically; every other page's .cta-band is untouched. */
.theme-business .cta-band { background: var(--color-accent-deep); }
.theme-business .cta-band .cta-band-btn,
.theme-business .cta-band .cta-band-btn:hover { color: var(--color-accent-deep); }

/* ---- Footer link columns (user feedback, 2026-11-12) ----
   style.css's base .footer-v2-links is a single flat flex-wrap row (display:flex;
   flex-wrap:wrap) — fine for one list, not for three side-by-side columns. Additive
   override, scoped to .footer-v2-col so the flat-row behavior stays available anywhere
   else .footer-v2-links might be reused. */
.footer-v2-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 32px; }
.footer-v2-col-heading { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: rgba(255,255,255,.45); margin-bottom: 12px; }
.footer-v2-col .footer-v2-links { flex-direction: column; gap: 10px; }
@media (max-width: 640px) {
  .footer-v2-columns { grid-template-columns: 1fr; gap: 24px; }
}

/* ---- How we work — approved redesign (2026-11-13) ----
   New split-hero/tabs/payment-card composition for this one page, built from the
   approved concept at https://ue-how-we-work-concept.jfiji.chatgpt.site with its forest
   teal/sage/cream palette (#063b3e, #173c3b, #648271, #e8ecdf, #f7f7f0, #efc35b) replaced
   throughout by this site's real tokens (--color-primary/--color-accent families).
   Every new selector is prefixed .hww- and used only in how-we-work.html, so none of
   this can leak onto any other page; card chrome itself is reused from
   .service-card/.tile rather than redefined. */

/* Split hero */
.hww-hero { padding: 64px 0 56px; }
.hww-hero-inner { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 48px; align-items: center; }
.hww-hero-title { font-size: clamp(32px,5vw,48px); font-weight: 800; margin: 14px 0 16px; line-height: 1.12; }
.hww-hero-sub { font-size: 19px; color: var(--color-text-muted); margin: 0; max-width: 460px; line-height: 1.55; }
.hww-hero-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin-top: 8px; }
.hww-hero-links { display: flex; flex-wrap: wrap; gap: 20px; }
.hww-hero-links a { font-size: 14px; font-weight: 600; color: var(--color-primary-text); }
.hww-hero-links a:hover { color: var(--color-primary-deep); }
.hww-hero-visual { position: relative; width: 100%; }
/* Dark-navy "stage" behind the crew cutout — same backdrop color trade-portal.html
   already uses behind this same character art (its hero-v2-bg background-color),
   so the chroma-keyed PNG (transparent background, dark-navy uniforms) reads as a
   deliberate composition rather than a floating cutout on bare white. */
.hww-hero-stage { aspect-ratio: 4 / 3; background: linear-gradient(160deg, var(--color-navy-deep), #163646); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); display: flex; align-items: flex-end; justify-content: center; overflow: hidden; padding: 24px; }
.hww-hero-stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; }
.hww-hero-card { position: absolute; left: 20px; bottom: -22px; max-width: 260px; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: 16px 18px; }
.hww-hero-card-title { font-size: 14px; font-weight: 800; color: var(--color-text); margin: 0 0 2px; }
.hww-hero-card-sub { font-size: 13px; color: var(--color-text-muted); margin: 0; }
@media (max-width: 860px) {
  .hww-hero-inner { grid-template-columns: 1fr; gap: 36px; }
  .hww-hero-copy { align-items: center; text-align: center; }
  .hww-hero-sub { max-width: 540px; }
  .hww-hero-actions { align-items: center; }
  .hww-hero-card { position: static; margin-top: 16px; max-width: 100%; }
}

/* Home/Business journey tabs */
.hww-tablist { display: flex; justify-content: center; gap: 4px; background: #fff; border: 1px solid var(--color-border); border-radius: 999px; padding: 4px; max-width: fit-content; margin: 0 auto 32px; }
.hww-tab { font-family: inherit; font-size: 14px; font-weight: 700; color: var(--color-text-muted); background: none; border: none; border-radius: 999px; padding: 10px 22px; cursor: pointer; min-height: 40px; }
.hww-tab:hover { color: var(--color-text); }
.hww-tab.active { background: var(--color-primary); color: #fff; }
.js .hww-steps { display: none; }
.js .hww-steps.is-active { display: grid; }
.hww-step-num { font-size: 13px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: var(--color-accent-deep); }

/* Home EV payment panel — light gold tint, dark text, gold highlights */
.hww-payment { background: var(--color-accent-tint); }
.hww-payment-label { text-align: center; font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--color-accent-deep); margin: 0 0 10px; }
.hww-payment-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
/* Standalone styling, not .tile — style.css defines .tile twice (the second,
   further down for the homepage's photo-led tiles, resets padding to 0 and clips
   overflow), so reusing that class here silently stripped this card's padding. */
.hww-payment-card { background: #fff; border: 1px solid var(--color-border); border-radius: 14px; padding: 28px 24px; display: flex; flex-direction: column; gap: 14px; }
.hww-payment-amount { font-size: 32px; font-weight: 800; color: var(--color-accent-deep); }
.hww-payment-card h3 { font-size: 16px; font-weight: 700; margin: 0; color: var(--color-text); }
.hww-payment-card p { font-size: 14px; color: var(--color-text-body); line-height: 1.6; margin: 0; }
.hww-payment-note { font-size: 14px; color: var(--color-text-body); line-height: 1.6; text-align: center; max-width: 620px; margin: 28px auto 0; }
.hww-payment-fineprint { font-size: 13px; color: var(--color-text-faint); margin: 14px 0 0; text-align: center; }
@media (max-width: 760px) {
  .hww-payment-cards { grid-template-columns: 1fr; }
}

/* Closing action panel */
.hww-closing-inner { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.hww-closing-sub { font-size: 17px; color: var(--color-text-muted); margin: 0; }
.hww-closing-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 10px; }
@media (max-width: 480px) {
  .hww-closing-actions { flex-direction: column; align-items: stretch; width: 100%; }
}

/* ---- Homepage "reimagined" redesign (2026-11-13) ----
   New split-panel hero + reworked Why-us/FAQ/CTA sections, built from the approved
   concept at https://ue-home-reimagined.jfiji.chatgpt.site (written spec, since the
   preview itself is gated behind a ChatGPT login this session can't get through).
   Everything here is either a new .home-* class (where the section's DOM structure
   changed) or a .page-home-scoped override of a shared class (where only a color/
   background changed) — business.html, energy-insights.html and every other page that
   shares .hero-v2/.why-card/.post-card/.cta-band/.trust-strip is untouched. Per
   explicit instruction, the white-on-cyan button contrast issue flagged during this
   build (~2.46:1, fails WCAG even for large text) is left as-is everywhere, including
   the new hero button. */

/* Hero */
.home-hero { padding: 48px 0; }
.home-hero-inner { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 40px; align-items: stretch; background: var(--color-secondary); border-radius: 24px; padding: 48px; min-height: 620px; }
.home-hero-copy { display: flex; flex-direction: column; justify-content: center; gap: 14px; min-width: 0; }
.home-hero-title { font-size: clamp(32px, 4.5vw, 64px); font-weight: 800; line-height: 1.08; margin: 10px 0 0; color: var(--color-text); }
.home-hero-title-accent { color: var(--color-primary-text); }
.home-hero-sub { font-size: 18px; color: var(--color-text-muted); max-width: 460px; line-height: 1.55; margin: 0; }
.home-hero-form { width: 100%; max-width: 560px; margin-top: 10px; }
.home-hero-form-label { font-size: 13px; font-weight: 700; color: var(--color-text-muted); margin-bottom: 8px; }
.home-hero-submit { width: 100%; height: 58px; font-size: 16px; margin-top: 12px; }
.home-hero-explore-link { font-size: 14px; font-weight: 600; color: var(--color-primary-text); margin-top: 10px; display: inline-flex; align-items: center; gap: 4px; }
.home-hero-explore-link:hover { color: var(--color-primary-deep); }
.home-hero-visual { position: relative; border-radius: 16px; overflow: hidden; min-height: 320px; }
.home-hero-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The shared quote-form-row grid has 3 tracks (postcode / select / button) because the
   button normally sits inline at the end of the row; the new hero moves the button to
   its own full-width element below, so this page only needs 2 tracks above the mobile
   breakpoint. min-width here matters: style.css's own max-width:640px rule collapses
   this same selector to grid-template-columns:1fr for mobile stacking, and an
   unscoped override here would unconditionally beat that at every width, including
   mobile — the bug this media query exists to avoid. */
@media (min-width: 641px) {
  .page-home .quote-form-row { grid-template-columns: minmax(190px,1.15fr) minmax(220px,1fr); width: 100%; }
}
/* .hero-price-preview/-label/-value are styled for the dark .hero-v2 background (white
   text, translucent glass panel) business.html's hero still uses unchanged — scoped to
   .page-home only, so this page's new light hero gets a light-safe version. */
.page-home .hero-price-preview { background: var(--color-bg-primary-tint); border: 1px solid var(--color-border); backdrop-filter: none; }
.page-home .hero-price-preview-label { color: var(--color-text-muted); }
.page-home .hero-price-preview-value { color: var(--color-text); }
@media (max-width: 900px) {
  .home-hero-inner { grid-template-columns: 1fr; padding: 28px; border-radius: 20px; min-height: 0; }
  .home-hero-visual { order: 2; min-height: 220px; }
  .home-hero-title { font-size: clamp(30px, 9vw, 42px); }
}

/* Reassurance strip — white background (icons already gold via the existing
   .page-home .trust-icon rule above); border-bottom is already subtle in the base rule. */
.page-home .trust-strip { background: #fff; }

/* Service-cards intro — was a visually-hidden heading only */
.home-services-intro { text-align: center; max-width: 560px; margin: 0 auto 36px; }
.home-services-label { display: block; font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--color-accent-deep); margin-bottom: 10px; }
.home-services-intro h2 { font-size: clamp(24px,3vw,30px); font-weight: 800; margin: 0 0 10px; }
.home-services-intro p { font-size: 16px; color: var(--color-text-muted); margin: 0; }

/* Why choose — 2-column rows-with-dividers layout, replacing the centered 3-card grid */
.home-why { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.3fr); gap: 48px; align-items: center; }
.home-why-label { display: block; font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--color-accent-deep); margin-bottom: 10px; }
.home-why-copy h2 { font-size: clamp(26px,3.4vw,34px); font-weight: 800; margin: 0 0 12px; }
.home-why-copy p { font-size: 16px; color: var(--color-text-muted); margin: 0; max-width: 360px; }
.home-why-rows { display: flex; flex-direction: column; }
.home-why-row { display: flex; align-items: flex-start; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--color-border-soft); }
.home-why-row:last-child { border-bottom: none; }
.home-why-row-icon { width: 44px; height: 44px; border-radius: 50%; background: var(--color-accent-tint); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.home-why-row-icon svg { width: 22px; height: 22px; }
.home-why-row h3 { font-size: 16px; font-weight: 700; margin: 0 0 4px; }
.home-why-row p { font-size: 15px; color: var(--color-text-muted); margin: 0; line-height: 1.55; }
@media (max-width: 860px) {
  .home-why { grid-template-columns: 1fr; gap: 28px; }
}

/* FAQs — 2-column layout (label/heading/copy/link left, accordion right) */
.home-faq { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.3fr); gap: 48px; align-items: start; }
.home-faq-label { display: block; font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--color-accent-deep); margin-bottom: 10px; }
.home-faq-copy h2 { font-size: clamp(26px,3.4vw,34px); font-weight: 800; margin: 0 0 12px; }
.home-faq-copy p { font-size: 16px; color: var(--color-text-muted); margin: 0 0 16px; max-width: 340px; }
.home-faq-copy-link { font-size: 15px; font-weight: 600; }
.home-faq .faq-accordion { max-width: none; margin: 0; }
/* Plus/minus accordion indicator — .assumptions-panel's base rule has no marker at all,
   so this is additive, not an override; scoped to this section only, not every
   .assumptions-panel sitewide. */
.home-faq .assumptions-panel summary { position: relative; padding-right: 30px; list-style: none; }
.home-faq .assumptions-panel summary::-webkit-details-marker { display: none; }
.home-faq .assumptions-panel summary::after { content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 20px; font-weight: 400; color: var(--color-text-muted); }
.home-faq .assumptions-panel[open] summary::after { content: '\2212'; }
@media (max-width: 860px) {
  .home-faq { grid-template-columns: 1fr; gap: 24px; }
}

/* Energy insights — bordered, rounded cards (base .post-card has neither; energy-insights.html
   keeps the plain, borderless version since this override is scoped to .page-home) */
.page-home .post-card { border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 18px; background: #fff; transition: box-shadow var(--transition-fast); }
.page-home .post-card:hover { box-shadow: var(--shadow-md); }

/* Closing CTA — rounded, inset from the page edges; dark-navy button (same component
   business-context pages already recolor via .theme-business .cta-band, just a
   different scoping class for the homepage's own color) */
.page-home .cta-band { border-radius: 24px; max-width: 1160px; margin: 0 auto; padding: 48px; }
.page-home .cta-band-btn, .page-home .cta-band-btn:hover { background: var(--color-navy-deep); color: #fff; }

/* ---- Contact page "reimagined" redesign (2026-11-13) ----
   New compact split hero + restyled form/details, built from the approved homepage
   concept's visual language. All new .contact-split-*/.contact-form-*/.contact-card-*/
   .contact-coverage-* classes — nothing here overrides a shared class other pages use,
   so this is purely additive and page-contact-scoped by construction (unique names),
   not by selector prefix. */

/* Hero */
.contact-split-hero { padding: 40px 0; }
.contact-split-inner { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 36px; align-items: stretch; background: var(--color-secondary); border-radius: 24px; padding: 40px; min-height: 420px; }
.contact-split-copy { display: flex; flex-direction: column; justify-content: center; gap: 14px; min-width: 0; }
.contact-split-title { font-size: clamp(28px, 3.6vw, 42px); font-weight: 800; line-height: 1.12; margin: 10px 0 0; color: var(--color-text); }
.contact-split-title-accent { color: var(--color-primary-text); }
.contact-split-sub { font-size: 17px; color: var(--color-text-muted); max-width: 440px; line-height: 1.55; margin: 0; }
.contact-split-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; margin-top: 8px; }
.contact-split-phone { font-size: 15px; font-weight: 600; color: var(--color-primary-text); }
.contact-split-phone:hover { color: var(--color-primary-deep); }
.contact-split-visual { position: relative; border-radius: 16px; overflow: hidden; min-height: 260px; background: var(--color-navy-deep); }
.contact-split-visual > img:first-child { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Crew cutout, contained within this smaller box instead of a full-bleed hero —
   same bottom-anchored-centered composition as .hero-v2-character (style.css),
   just scoped to this column so faces clear the top comfortably at this size. */
.contact-split-crew { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 82%; max-width: 420px; height: auto; pointer-events: none; }
@media (max-width: 900px) {
  .contact-split-inner { grid-template-columns: 1fr; padding: 24px; border-radius: 20px; min-height: 0; }
  .contact-split-visual { order: 2; min-height: 200px; }
  .contact-split-title { font-size: clamp(26px, 7vw, 34px); }
}

/* Form card */
.contact-form-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 32px; display: flex; flex-direction: column; gap: 16px; }
.contact-form-intro { font-size: 15px; color: var(--color-text-muted); margin: 0; }
.contact-form-group-label { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-faint); margin-bottom: 12px; }
@media (max-width: 760px) {
  .contact-form-card { padding: 24px; }
}

/* Contact cards — gold line icons in pale gold circles (the previous .icon-tint-cyan
   squares had no icon inside at all) */
.contact-card-icon { width: 44px; height: 44px; border-radius: 50%; background: var(--color-accent-tint); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.contact-card-icon svg { width: 20px; height: 20px; }
.contact-card-title { font-weight: 700; font-size: 15px; margin-bottom: 4px; color: var(--color-text); }
.contact-card-link { display: block; font-size: 14px; color: var(--color-text-muted); }
.contact-card-link:hover { color: var(--color-primary-deep); }
.contact-card-meta { font-size: 13px; color: var(--color-text-faint); margin-top: 2px; }

/* Coverage map — enlarged (was max-width:170px), full original proportions kept via
   width:100%/height:auto (no cropping) */
.contact-coverage-card { background: var(--color-bg-primary-tint); border: 1px solid #D9EEF3; border-radius: var(--radius-lg); padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.contact-coverage-card h3 { font-size: 15px; font-weight: 700; color: var(--color-primary-deep); margin: 0; }
.contact-coverage-img { width: 100%; height: auto; border-radius: var(--radius-md); display: block; }
.contact-coverage-copy { font-size: 13px; color: var(--color-text-muted); margin: 0; line-height: 1.5; }
.contact-coverage-link { font-size: 13px; font-weight: 600; color: var(--color-primary-text); }
.contact-coverage-link:hover { color: var(--color-primary-deep); }

/* ---- About page "reimagined" redesign (2026-11-13) ----
   New split hero + restyled intro/quality/journey/company/service sections, built from
   the approved concept's visual language. All new .about-* classes — nothing here
   overrides a shared class other pages use, except the explicit .page-about-scoped
   recolors of .trust-strip/.trust-icon/.cta-band already used the same way for the
   homepage (.page-home) and contact page. */

/* Hero */
.about-split-hero { padding: 40px 0; }
.about-split-inner { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 36px; align-items: stretch; background: var(--color-secondary); border-radius: 24px; padding: 40px; min-height: 420px; }
.about-split-copy { display: flex; flex-direction: column; justify-content: center; gap: 14px; min-width: 0; }
.about-split-title { font-size: clamp(28px, 3.8vw, 46px); font-weight: 800; line-height: 1.12; margin: 10px 0 0; color: var(--color-text); }
.about-split-title-accent { color: var(--color-primary-text); }
.about-split-sub { font-size: 17px; color: var(--color-text-muted); max-width: 440px; line-height: 1.55; margin: 0; }
.about-split-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; margin-top: 8px; }
.about-split-link { font-size: 15px; font-weight: 600; color: var(--color-primary-text); }
.about-split-link:hover { color: var(--color-primary-deep); }
.about-split-visual { position: relative; border-radius: 16px; overflow: hidden; min-height: 280px; }
.about-split-visual > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-split-card { position: absolute; left: 20px; bottom: 20px; max-width: 260px; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: 16px 18px; }
.about-split-card-title { font-size: 14px; font-weight: 800; color: var(--color-text); margin: 0 0 2px; }
.about-split-card-sub { font-size: 13px; color: var(--color-text-muted); margin: 0; }
@media (max-width: 900px) {
  .about-split-inner { grid-template-columns: 1fr; padding: 24px; border-radius: 20px; min-height: 0; }
  .about-split-visual { order: 2; min-height: 220px; }
  .about-split-title { font-size: clamp(26px, 7vw, 36px); }
}

/* Reassurance strip — white background, gold check icons */
.page-about .trust-strip { background: #fff; }
.page-about .trust-icon { background: var(--color-accent-deep); }

/* Small gold eyebrow label, reused across this page's sections */
.about-eyebrow { display: block; font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--color-accent-deep); margin-bottom: 10px; }

/* Introduction — brief 2-column section */
.about-intro { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.4fr); gap: 40px; align-items: start; }
.about-intro h2 { font-size: clamp(24px,3vw,30px); font-weight: 800; margin: 0; }
.about-intro-copy { display: flex; flex-direction: column; gap: 14px; }
.about-intro-copy p { font-size: 18px; color: var(--color-text-body); line-height: 1.6; margin: 0; max-width: 520px; }
@media (max-width: 760px) {
  .about-intro { grid-template-columns: 1fr; gap: 20px; }
}

/* Centered label+heading intro, reused by the quality and service-links sections */
.about-section-intro { text-align: center; max-width: 560px; margin: 0 auto 36px; }
.about-section-intro h2 { font-size: clamp(24px,3vw,30px); font-weight: 800; margin: 0; }

/* Quality cards */
.about-quality-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.about-quality-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 28px 24px; display: flex; flex-direction: column; gap: 12px; }
.about-quality-icon { width: 48px; height: 48px; border-radius: 50%; background: var(--color-accent-tint); display: flex; align-items: center; justify-content: center; }
.about-quality-icon svg { width: 24px; height: 24px; }
.about-quality-card h3 { font-size: 17px; font-weight: 700; margin: 0; }
.about-quality-card p { font-size: 15px; color: var(--color-text-muted); line-height: 1.55; margin: 0; }
.about-disclosure-wrap { max-width: 640px; margin: 28px auto 0; }
@media (max-width: 760px) {
  .about-quality-cards { grid-template-columns: 1fr; }
}

/* Booking journey payment panel */
.about-payment-panel { max-width: 640px; margin: 28px auto 0; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 24px 28px; text-align: center; }
.about-payment-panel h3 { font-size: 16px; font-weight: 700; margin: 0 0 8px; color: var(--color-text); }
.about-payment-panel p { font-size: 15px; color: var(--color-text-muted); margin: 0 0 10px; line-height: 1.55; }
.about-payment-panel a { font-size: 14px; font-weight: 600; }

/* Company section */
.about-company { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 40px; align-items: center; }
.about-company-copy h2 { font-size: clamp(24px,3vw,30px); font-weight: 800; margin: 0 0 12px; }
.about-company-copy p { font-size: 16px; color: var(--color-text-muted); margin: 0 0 14px; max-width: 420px; line-height: 1.6; }
.about-company-link { font-size: 15px; font-weight: 600; }
.about-company-card { background: var(--color-navy-deep); border-radius: var(--radius-lg); padding: 32px; color: #fff; }
.about-company-card-label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: 10px; }
.about-company-card h3 { font-size: clamp(20px,2.4vw,26px); font-weight: 800; margin: 0 0 16px; line-height: 1.3; }
.about-company-detail { font-size: 14px; color: rgba(255,255,255,.78); padding-top: 10px; border-top: 1px solid rgba(255,255,255,.14); margin-top: 10px; }
@media (max-width: 760px) {
  .about-company { grid-template-columns: 1fr; gap: 24px; }
}

/* Service link tiles */
.about-service-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.about-service-tile { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 18px 20px; font-size: 15px; font-weight: 700; color: var(--color-text); text-align: center; transition: box-shadow var(--transition-fast), border-color var(--transition-fast); }
.about-service-tile:hover { box-shadow: var(--shadow-md); border-color: var(--color-primary); color: var(--color-text); }
@media (max-width: 760px) {
  .about-service-tiles { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .about-service-tiles { grid-template-columns: 1fr; }
}

/* Closing CTA — rounded, inset, dark-navy button (same recipe as the homepage's) */
.page-about .cta-band { border-radius: 24px; max-width: 1160px; margin: 0 auto; padding: 48px; }
.page-about .cta-band-btn, .page-about .cta-band-btn:hover { background: var(--color-navy-deep); color: #fff; }

/* ---- Energy tariffs "reimagined" redesign (2026-11-13) ----
   New split hero + dedicated two-column calculator + restyled supporting sections.
   The calculator's script (bottom of energy-tariffs.html) is untouched except for a
   Reset button hook — every #lab-total/#lab-breakdown/#lab-note id and .lab-toggle
   class/data-system attribute it queries keeps working unchanged. Reuses
   .about-eyebrow/.about-section-intro/.about-disclosure-wrap from the About page
   redesign (bare, non-page-scoped rules — safe to share) rather than duplicating
   near-identical rules under a new name. */

/* Hero */
.tariffs-hero { padding: 40px 0; }
.tariffs-hero-inner { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 36px; align-items: stretch; background: var(--color-secondary); border-radius: 24px; padding: 40px; min-height: 400px; }
.tariffs-hero-copy { display: flex; flex-direction: column; justify-content: center; gap: 14px; min-width: 0; }
.tariffs-hero-title { font-size: clamp(28px, 3.8vw, 46px); font-weight: 800; line-height: 1.12; margin: 10px 0 0; color: var(--color-text); }
.tariffs-hero-title-accent { color: var(--color-primary-deep); }
.tariffs-hero-sub { font-size: 17px; color: var(--color-text-muted); max-width: 440px; line-height: 1.55; margin: 0; }
.tariffs-hero-link { font-size: 15px; font-weight: 600; color: var(--color-primary-text); margin-top: 8px; }
.tariffs-hero-link:hover { color: var(--color-primary-deep); }
.tariffs-hero-visual { position: relative; border-radius: 16px; overflow: hidden; min-height: 260px; background: var(--color-bg-primary-tint); }
/* object-position keeps the smart meter + leaflet (the actual subject, left-of-centre
   and in the lower half of the source photo) in frame; the trimmed areas are blurry
   background and the plant pots on the right, neither load-bearing. Desktop and
   mobile get separate positions since the box's aspect ratio differs at each size. */
.tariffs-hero-visual img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 65%; display: block; }
@media (max-width: 900px) {
  .tariffs-hero-inner { grid-template-columns: 1fr; padding: 24px; border-radius: 20px; min-height: 0; }
  .tariffs-hero-visual { order: 2; min-height: 220px; }
  .tariffs-hero-visual img { object-position: 35% 60%; }
  .tariffs-hero-title { font-size: clamp(26px, 7vw, 36px); }
}

/* Calculator */
.lab-calc { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; margin-top: 32px; }
.lab-calc-controls { background: #fff; padding: 32px; display: flex; flex-direction: column; gap: 16px; }
.lab-calc-controls-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.lab-calc-controls-head h3 { font-size: 18px; font-weight: 800; margin: 0 0 4px; }
.lab-calc-controls-head p { font-size: 14px; color: var(--color-text-muted); margin: 0; }
.lab-calc-reset { font-family: inherit; font-size: 13px; font-weight: 700; color: var(--color-text-muted); background: #fff; border: 1px solid var(--color-border); border-radius: 999px; padding: 8px 16px; cursor: pointer; flex-shrink: 0; min-height: 36px; }
.lab-calc-reset:hover { border-color: var(--color-primary); color: var(--color-primary-deep); }

.lab-controls-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
/* Compound selector (.lab-control.lab-toggle) so this wins over style.css's own
   .lab-toggle rule (designed for the old dark-photo hero) regardless of cascade
   order — the buttons keep the .lab-toggle class and data-system attribute so the
   calculator script's querySelectorAll('.lab-toggle') still finds them. */
.lab-control.lab-toggle { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--color-text); background: #fff; border: 1.5px solid var(--color-border); border-radius: var(--radius-md); padding: 12px 36px 12px 12px; cursor: pointer; text-align: left; min-height: 48px; transition: background var(--transition-fast), border-color var(--transition-fast); }
.lab-control.lab-toggle:hover { border-color: var(--color-primary); }
.lab-control.lab-toggle.is-on { background: var(--color-bg-primary-tint); border-color: var(--color-primary); }
.lab-control-icon { width: 22px; height: 22px; flex-shrink: 0; color: var(--color-primary-deep); display: flex; }
.lab-control-icon svg { width: 100%; height: 100%; }
.lab-control-label { flex: 1; line-height: 1.3; }
.lab-control-check { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; border-radius: 50%; background: var(--color-primary); color: #fff; font-size: 11px; font-weight: 800; display: none; align-items: center; justify-content: center; }
.lab-control.lab-toggle.is-on .lab-control-check { display: flex; }
.lab-grid-note { font-size: 13px; color: var(--color-text-faint); margin: 0; line-height: 1.5; }
.lab-inline-disclosure { margin-top: 4px; }
@media (max-width: 640px) {
  .lab-controls-grid { grid-template-columns: 1fr; }
}

.lab-calc-result { background: var(--color-navy-deep); color: #fff; padding: 32px; display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.lab-result-label { font-size: 12.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.lab-result-amount { font-size: clamp(36px, 4vw, 48px); font-weight: 800; line-height: 1.1; margin-top: 6px; }
.lab-result-unit { font-size: 16px; font-weight: 600; color: rgba(255,255,255,.6); margin-left: 4px; }
.lab-result-model { font-size: 13px; color: rgba(255,255,255,.6); margin-top: 6px; }
.lab-result-breakdown { font-size: 14px; color: rgba(255,255,255,.82); margin-top: 14px; line-height: 1.6; }
.lab-result-note { font-size: 13px; color: #8FE9FA; margin-top: 8px; font-weight: 600; }
.lab-result-qualification { font-size: 12.5px; color: rgba(255,255,255,.55); margin: 0; line-height: 1.5; }
.lab-result-link { font-size: 14px; font-weight: 700; color: #8FE9FA; }
.lab-result-link:hover { color: #fff; }
@media (max-width: 860px) {
  .lab-calc { grid-template-columns: 1fr; }
}

/* Quick summary strip */
.tariffs-summary-strip { background: var(--color-bg-primary-tint); padding: 32px 0; }
.tariffs-summary-inner { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.tariffs-summary-title { font-size: 16px; font-weight: 800; color: var(--color-primary-deep); margin-bottom: 4px; }
.tariffs-summary-item p { font-size: 14px; color: var(--color-text-body); margin: 0; line-height: 1.5; }
@media (max-width: 760px) {
  .tariffs-summary-inner { grid-template-columns: 1fr; gap: 18px; }
}

/* Tariff cards */
.tariffs-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 8px; }
.tariffs-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; }
/* Square media area, object-fit:contain — these illustrations have meaningful
   content reaching close to every edge (cars, pylons, houses), so cropping with
   cover would clip them. Padding + a light background keeps consistent proportions
   without forcing the artwork to fill the box edge-to-edge. */
.tariffs-card-media { aspect-ratio: 1 / 1; background: var(--color-bg-primary-tint); padding: 20px; display: flex; align-items: center; justify-content: center; }
.tariffs-card-media img { width: 100%; height: 100%; object-fit: contain; display: block; }
.tariffs-card-body { padding: 22px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.tariffs-card-label { font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--color-accent-deep); }
.tariffs-card-body h3 { font-size: 17px; font-weight: 800; margin: 0; }
.tariffs-card-body p { font-size: 14.5px; color: var(--color-text-muted); line-height: 1.55; margin: 0 0 4px; }
.tariffs-card-body .assumptions-panel { margin-top: auto; padding: 2px 12px; }
.tariffs-card-body .assumptions-panel summary { font-size: 13.5px; min-height: 40px; }
@media (max-width: 1080px) {
  .tariffs-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .tariffs-cards { grid-template-columns: 1fr; }
}

/* Solar export */
.tariffs-export { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.2fr); gap: 40px; align-items: start; }
.tariffs-export-copy h2 { font-size: clamp(24px,3vw,30px); font-weight: 800; margin: 0 0 12px; }
.tariffs-export-copy p { font-size: 16px; color: var(--color-text-body); margin: 0 0 16px; max-width: 380px; line-height: 1.6; }
.tariffs-export-link { font-size: 15px; font-weight: 600; color: var(--color-primary-deep); }
.tariffs-export-link:hover { color: var(--color-text); }
.tariffs-export-faq { display: flex; flex-direction: column; gap: 10px; }
.tariffs-export-faq .assumptions-panel { background: #fff; }
.tariffs-export-ofgem { font-size: 13px; color: var(--color-text-muted); margin: 6px 0 0; }
@media (max-width: 860px) {
  .tariffs-export { grid-template-columns: 1fr; gap: 24px; }
}

/* Smart controls */
.tariffs-smart-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.tariffs-smart-card { background: var(--color-secondary); border-radius: var(--radius-md); padding: 22px 20px; }
.tariffs-smart-card h3 { font-size: 15px; font-weight: 800; margin: 0 0 6px; }
.tariffs-smart-card p { font-size: 13.5px; color: var(--color-text-muted); margin: 0; line-height: 1.55; }
@media (max-width: 860px) {
  .tariffs-smart-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .tariffs-smart-cards { grid-template-columns: 1fr; }
}

/* Closing CTA — rounded cyan panel, dark-navy button (same recipe as other pages) */
.tariffs-cta-sub { font-size: 15px; color: rgba(255,255,255,.85); margin: 6px 0 0; }
.page-tariffs .cta-band { border-radius: 24px; max-width: 1160px; margin: 0 auto; padding: 48px; }
.page-tariffs .cta-band-btn, .page-tariffs .cta-band-btn:hover { background: var(--color-navy-deep); color: #fff; }