/* ==========================================================================
   Triforce Electrical & Air — Design System
   Source of truth: Triforce Colour and Branding Guide (supplied)
   ========================================================================== */

:root {
  /* Brand colours — exact values from the branding guide */
  --colour-ink: #0B1830;
  --colour-navy: #0F294A;
  --colour-blue: #0877B9;
  --colour-blue-dark: #06618f;
  --colour-green: #69B52D;
  --colour-sky: #DFF3FB;
  --colour-stone: #F4F2EC;
  --colour-text: #303B47;
  --colour-muted: #5D6876;
  --colour-border: #DBE2E8;
  --colour-white: #FFFFFF;

  /* Semantic aliases used through this file */
  --color-bg: var(--colour-white);
  --color-bg-alt: var(--colour-stone);
  --color-text: var(--colour-text);
  --color-text-muted: var(--colour-muted);
  --color-heading: var(--colour-ink);
  --color-primary: var(--colour-blue);
  --color-accent: var(--colour-green);
  --color-border: var(--colour-border);

  /* Type */
  --font-heading: 'Manrope', Arial, Helvetica, sans-serif;
  --font-body: 'Inter', Arial, Helvetica, sans-serif;

  --h1-size: clamp(2.75rem, 2.2rem + 2.6vw, 5.25rem);
  --h1-internal-size: clamp(2.5rem, 2.1rem + 1.9vw, 4.25rem);
  --h2-size: clamp(2rem, 1.7rem + 1.4vw, 3.5rem);
  --h3-size: clamp(1.3125rem, 1.24rem + 0.35vw, 1.75rem);
  --lede-size: clamp(1.125rem, 1.06rem + 0.3vw, 1.4375rem);
  --body-size: 1rem;
  --eyebrow-size: 0.75rem;

  /* Layout */
  --container-max: 1180px;
  --side-pad: clamp(20px, 4vw, 40px);
  --section-pad: clamp(60px, 5vw + 30px, 110px);
  --gap-standard: 24px;
  --gap-large: clamp(40px, 6vw, 80px);

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --shadow-sm: 0 1px 3px rgba(11, 24, 48, 0.08);
  --shadow-md: 0 8px 24px rgba(11, 24, 48, 0.12);
  --header-height: 84px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-height); }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: 1.65;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--color-primary); text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 {
  margin: 0 0 0.5em;
  color: var(--color-heading);
  font-family: var(--font-heading);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.01em;
}
p { margin: 0 0 1em; }
button { font-family: inherit; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible, summary:focus-visible {
  outline: 3px solid var(--colour-blue);
  outline-offset: 2px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--colour-ink); color: var(--colour-white);
  padding: 0.75em 1.25em; z-index: 1000; border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

/* ---------- Layout helpers ---------- */
.container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--side-pad); }
.section { padding-block: var(--section-pad); }
.section-alt { background: var(--color-bg-alt); }
.section-sky { background: var(--colour-sky); }
.section-navy { background: var(--colour-ink); color: #C9D3DE; }
.section-navy h1, .section-navy h2, .section-navy h3 { color: var(--colour-white); }
.section-head { max-width: 700px; margin-bottom: clamp(2rem, 1.6rem + 1.6vw, 3rem); }
.section-head.center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.55em;
  font-size: var(--eyebrow-size); font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--colour-blue); margin-bottom: 1em;
}
.section-navy .eyebrow { color: #6fc1f0; }
.eyebrow::before { content: ""; width: 20px; height: 2px; background: var(--colour-green); display: inline-block; }

h1 { font-size: var(--h1-size); }
h1.h1-internal { font-size: var(--h1-internal-size); }
h2 { font-size: var(--h2-size); }
h3 { font-size: var(--h3-size); font-weight: 700; }
.lede { font-size: var(--lede-size); color: var(--color-text-muted); line-height: 1.55; }
.section-navy .lede { color: #A9B6C4; }

/* ---------- Buttons & links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  padding: 0.95em 1.7em; border-radius: 12px; font-weight: 700; font-size: 1rem;
  border: 1.5px solid transparent; cursor: pointer; min-height: 48px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  font-family: var(--font-heading);
}
.btn-primary { background: var(--colour-blue); color: var(--colour-white); }
.btn-primary:hover { background: var(--colour-blue-dark); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.btn-secondary { background: transparent; color: var(--colour-white); border-color: rgba(255,255,255,0.5); }
.btn-secondary:hover { background: rgba(255,255,255,0.1); border-color: var(--colour-white); }
.btn-outline { background: transparent; color: var(--colour-blue); border-color: var(--colour-blue); }
.btn-outline:hover { background: var(--colour-sky); }
.btn-block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.9rem; }

.text-link { color: var(--colour-blue); font-weight: 700; }
.text-link:hover, .text-link:focus-visible { text-decoration: underline; }

/* ---------- Header ---------- */
#site-header { position: sticky; top: 0; z-index: 200; }
.header-bar { background: var(--colour-white); border-bottom: 1px solid var(--colour-border); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: var(--header-height); }
/* flex-shrink:0 keeps the logo at its true size at every width — without it, once the row
   runs out of room the flex layout compresses the logo's box and (combined with the global
   `img { max-width:100% }` reset) squashes it horizontally while its height stays fixed. */
.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand img { height: 42px; width: auto; max-width: none; flex-shrink: 0; display: block; }

.main-nav { display: flex; align-items: center; gap: 1.75rem; }
.mega-nav { display: flex; align-items: center; gap: 1.6rem; }
.main-nav a:not(.btn) {
  color: var(--colour-ink); font-weight: 600; font-size: 0.9375rem; font-family: var(--font-heading);
  padding: 0.5rem 0.1rem; border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.main-nav a:not(.btn):hover { color: var(--colour-blue); }
.header-cta { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; }
.header-call { display: inline-flex; align-items: center; gap: 0.5em; font-weight: 700; color: var(--colour-ink); font-family: var(--font-heading); white-space: nowrap; }
.header-call svg { color: var(--colour-blue); flex-shrink: 0; }

.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 0.5rem; color: var(--colour-ink); min-height: 44px; min-width: 44px; }

/* Header bar spans the full page width (not capped to the 1180px content container) */
.header-bar .header-inner {
  max-width: none;
  margin-inline: 0;
  padding-inline: var(--side-pad);
  width: 100%;
}

/* Hero content sits toward the true left of the page instead of being centred inside
   the 1180px container (which pushed it toward the middle on wide screens). Note:
   max-width is intentionally NOT set here — .hero-inner's own 700px max-width
   (below) still applies and keeps the hero copy at a readable line length; this
   rule only removes the auto-centering. The left inset is larger than the header's
   thin --side-pad on purpose — flush against --side-pad alone read as too tight for
   a large display heading, so the hero gets its own more generous breathing room. */
.hero .container {
  margin-inline: 0;
  padding-inline-start: clamp(24px, 6vw, 96px);
  padding-inline-end: var(--side-pad);
}

/* ---------- Mega menu (desktop) ---------- */
.mega-item { position: relative; flex-shrink: 0; }
.mega-trigger {
  display: inline-flex; align-items: center; gap: 0.4em; background: none; border: none; cursor: pointer;
  color: var(--colour-ink); font-weight: 600; font-size: 0.9375rem; font-family: var(--font-heading);
  padding: 0.5rem 0.1rem; min-height: 44px;
  white-space: nowrap;
}
.mega-trigger:hover, .mega-trigger[aria-expanded="true"] { color: var(--colour-blue); }
.mega-caret { transition: transform 0.15s ease; flex-shrink: 0; }
.mega-trigger[aria-expanded="true"] .mega-caret { transform: rotate(180deg); }
.mega-panel {
  display: none; position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%);
  background: var(--colour-white); border: 1px solid var(--colour-border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md); padding: 0.85rem; min-width: 320px; z-index: 50;
  /* Without an explicit column track, an auto-sized grid column sizes to its
     content's max-content width — i.e. as if the longest link's text never
     wrapped. Harmless on desktop (the panel just floats wider), but on mobile
     the panel is laid in-flow at page width, so that unwrapped-width column
     forces the whole box wider than the screen and the text runs off the
     right edge instead of wrapping. minmax(0, 1fr) caps the column at the
     container's actual width so text wraps normally everywhere. */
  grid-template-columns: minmax(0, 1fr);
}
.mega-item.mega-open .mega-panel { display: grid; gap: 0.15rem; }
/* .main-nav a:not(.btn) sets white-space: nowrap for the top-level nav labels
   (so "Air Conditioning" etc. don't wrap awkwardly in the inline row) — but
   white-space inherits, and nothing here reset it back for the mega-panel's
   own links, so the muted description spans inherited nowrap too and ran off
   the edge instead of wrapping. `:not(.btn)` counts as a class for specificity,
   so `.main-nav a:not(.btn)` (0,2,1) already outranks a plain `.mega-panel a`
   (0,1,1) — a bare white-space: normal here loses the cascade silently. Needs
   !important to actually win, same as border-bottom just below already does
   for this identical ancestor-rule-clobbers-panel-links problem. */
.mega-panel a { display: block; padding: 0.75rem 0.9rem; border-radius: var(--radius-sm); border-bottom: none !important; white-space: normal !important; }
.mega-panel a:hover, .mega-panel a:focus-visible { background: var(--colour-sky); }
.mega-panel a strong { display: block; color: var(--colour-ink); font-family: var(--font-heading); font-size: 0.9375rem; margin-bottom: 0.15rem; }
.mega-panel a span { display: block; color: var(--color-text-muted); font-size: 0.8125rem; line-height: 1.4; }

/* "More" summary item: hidden at full desktop width (its contents are shown as
   individual top-level items instead — see .mega-item-secondary below) and hidden
   again below NAV_BREAK_NARROW (see that media query) where the full hamburger
   drawer already lists those items individually. It only shows in the mid-tier
   band between the two breakpoints. */
.mega-item-more { display: none; }

/* ---------- Header nav: three-tier responsive behaviour ----------
   Full desktop (> 1480px): every item shown inline, no "More", no hamburger.
   Mid tier (1081px–1480px): Electrical / Air Conditioning / EV Charging + phone +
     CTA stay inline at full size; Service Areas / Information & Advice / About /
     Contact collapse into a single "More" dropdown (reusing the same hover/click
     mega-menu component) so the row keeps fitting without shrinking or wrapping.
   Narrow / mobile (<= 1080px): everything collapses into the full hamburger drawer,
     same as before — "More" is hidden here since the drawer already lists every
     item individually. */

/* Mid tier: 1081px–1480px. Measured (via Playwright, checking for row overflow) that
   logo + Electrical + Air Conditioning + EV Charging + "More" + phone + CTA need
   ~1040px of natural width — 1080px keeps a safety margin, same approach as the
   1480px breakpoint below. */
@media (max-width: 1480px) and (min-width: 1081px) {
  .mega-item-secondary { display: none; }
  .mega-item-more { display: block; }
}

/* Narrow / mobile: full hamburger drawer — see the mid-tier comment above for how
   1080px was measured. */
@media (max-width: 1080px) {
  .main-nav { position: fixed; inset: var(--header-height) 0 0 0; background: var(--colour-white); flex-direction: column; align-items: stretch; padding: 1.5rem 1.25rem; gap: 0; overflow-y: auto; transform: translateX(100%); transition: transform 0.25s ease; }
  .main-nav[data-open="true"] { transform: translateX(0); }
  .mega-nav { flex-direction: column; align-items: stretch; gap: 0; }
  .mega-item { border-bottom: 1px solid var(--colour-border); }
  .mega-item-secondary { display: block; }
  .mega-item-more { display: none; }
  .main-nav a:not(.btn) { display: block; padding: 0.95rem 0.1rem; min-height: 44px; }
  .header-cta { flex-direction: column; align-items: stretch; margin-top: 1.25rem; }
  .header-call { justify-content: center; padding: 0.9rem; background: var(--colour-stone); border-radius: var(--radius-sm); }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }

  /* Mobile: mega menu becomes an inline accordion, not a floating panel */
  .mega-trigger { display: flex; width: 100%; justify-content: space-between; padding: 0.95rem 0.1rem; }
  .mega-panel {
    display: none; position: static; transform: none; border: none; box-shadow: none;
    padding: 0 0 0.75rem 0.75rem; min-width: 0; background: var(--colour-stone); border-radius: var(--radius-sm); margin-bottom: 0.5rem;
  }
  .mega-item.mega-open .mega-panel { display: grid; }
  .mega-panel a { padding: 0.65rem 0.6rem; }
}

/* ---------- Hero ---------- */
.hero { position: relative; color: var(--colour-white); overflow: hidden; background-color: var(--colour-ink); }
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.hero-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(11,24,48,0.94) 0%, rgba(11,24,48,0.86) 32%, rgba(11,24,48,0.55) 60%, rgba(11,24,48,0.32) 100%);
}
.hero-inner { position: relative; padding-block: clamp(3.5rem, 3rem + 5vw, 7rem); max-width: 700px; }
.hero h1 { color: var(--colour-white); text-wrap: balance; }
.hero-heading {
  margin: 0 0 0.5em; color: var(--colour-white); font-family: var(--font-heading);
  font-weight: 800; line-height: 1.05; letter-spacing: -0.01em; font-size: var(--h1-size);
  text-wrap: balance;
}
/* Forces the specific 3-line break requested for desktop ("Your local electrical, /
   air conditioning and / EV charger team"). Each segment is also kept on a single
   line (white-space: nowrap) so it can't break further mid-phrase at in-between
   window widths — it's fine for the line to run over the hero photo, but not to
   fragment into single words. Both rules are hidden below 640px so mobile falls
   back to natural wrapping instead of a forced break/overflow on a narrow column. */
.hero-heading-seg { white-space: nowrap; }
@media (max-width: 640px) {
  .hero-heading-break { display: none; }
  .hero-heading-seg { white-space: normal; }
}
.hero .lede { color: #E4EAF0; margin-top: 1rem; }
.hero-body { color: #D3DCE4; max-width: 560px; }

.trust-bar { background: var(--colour-sky); border-top: 1px solid rgba(11,24,48,0.06); }
.trust-bar .container { display: flex; flex-wrap: wrap; gap: 1.75rem 2.5rem; padding-block: 1.1rem; }
.trust-bar-item { display: flex; align-items: center; gap: 0.6em; font-weight: 700; font-family: var(--font-heading); color: var(--colour-ink); font-size: 0.9375rem; }
.trust-bar-item svg { color: var(--colour-green); flex-shrink: 0; }

/* ---------- Editorial two-column ---------- */
.two-col { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--gap-large); align-items: start; }
.two-col.reverse { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
.two-col.reverse .two-col-media { order: 2; }
@media (max-width: 860px) {
  .two-col, .two-col.reverse { grid-template-columns: 1fr; }
  .two-col.reverse .two-col-media { order: -1; }
}
.two-col-media img, .media-frame img { border-radius: var(--radius-md); width: 100%; height: 100%; object-fit: cover; }
.media-frame { border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); }
.two-col-media.tall .media-frame { aspect-ratio: 4/5; }
.two-col-media.wide .media-frame { aspect-ratio: 4/3; }

/* ---------- Services ---------- */
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.75rem; }
.service-card {
  background: var(--colour-white); border: 1px solid var(--colour-border);
  border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; height: 100%;
}
.service-card-media { aspect-ratio: 4/3; overflow: hidden; }
.service-card-media img { width: 100%; height: 100%; object-fit: cover; }
.service-card-body { padding: 1.75rem; display: flex; flex-direction: column; flex: 1; }
.service-card .service-list { display: grid; gap: 0.55rem; margin: 1.1rem 0 1.5rem; }
.service-card .service-list li { display: flex; gap: 0.6em; align-items: flex-start; font-size: 0.9375rem; color: var(--color-text-muted); }
.service-card .service-list svg { color: var(--colour-green); flex-shrink: 0; margin-top: 0.2em; }
.service-card .btn { margin-top: auto; align-self: flex-start; }

/* ---------- Why choose — editorial checklist, not a card grid ---------- */
.check-list { display: grid; gap: 1.4rem; }
.check-item { display: flex; gap: 1rem; align-items: flex-start; }
.check-item .check-mark {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  background: rgba(105, 181, 45, 0.16); color: var(--colour-green);
  display: flex; align-items: center; justify-content: center; margin-top: 0.15rem;
}
.check-item h3 { font-size: 1.1rem; margin-bottom: 0.2rem; }
.check-item p { margin: 0; color: #A9B6C4; font-size: 0.9375rem; }
.section-navy .check-item p { color: #A9B6C4; }
.section:not(.section-navy) .check-item p { color: var(--color-text-muted); }
.section:not(.section-navy) .check-item h3 { color: var(--colour-ink); }

/* ---------- Local / CTA band ---------- */
.cta-band {
  background: var(--colour-navy); color: var(--colour-white);
  border-radius: var(--radius-lg); padding: clamp(2rem, 3vw, 3.5rem);
  display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); gap: 2rem; align-items: center;
}
.cta-band h2, .cta-band h3 { color: var(--colour-white); }
.cta-band p { color: #C3D0DC; }
@media (max-width: 860px) { .cta-band { grid-template-columns: 1fr; text-align: left; } }

/* ---------- Reviews ---------- */
.reviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }
.review-card { background: var(--colour-white); border: 1px solid var(--colour-border); border-radius: var(--radius-md); padding: 1.75rem; }
.review-card .stars { color: var(--colour-blue); letter-spacing: 2px; margin-bottom: 0.75rem; display: block; }
.review-card p { color: var(--color-text); }
.review-card footer { font-weight: 700; color: var(--colour-ink); font-family: var(--font-heading); }
.review-placeholder {
  border: 1.5px dashed var(--colour-border); border-radius: var(--radius-md);
  padding: 2rem; text-align: center; color: var(--color-text-muted); background: var(--colour-stone);
}

/* ---------- Process — restrained, no numbered badges ---------- */
.process-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2rem; }
.process-item { border-top: 3px solid var(--colour-green); padding-top: 1.1rem; }
.process-item .process-index {
  display: block; font-family: var(--font-heading); font-weight: 800; font-size: 0.75rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--colour-muted); margin-bottom: 0.6rem;
}

/* ---------- Service areas ---------- */
.area-tags { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 1.6rem 0; }
.area-tag { background: var(--colour-white); border: 1px solid var(--colour-border); border-radius: 999px; padding: 0.55em 1.1em; font-weight: 700; font-family: var(--font-heading); color: var(--colour-ink); font-size: 0.9rem; }

/* ---------- FAQ ---------- */
.faq-list { display: grid; gap: 0.75rem; max-width: 860px; }
.faq-item { background: var(--colour-white); border: 1px solid var(--colour-border); border-radius: var(--radius-sm); padding: 0.15rem 1.25rem; }
.faq-item summary { cursor: pointer; font-weight: 700; font-family: var(--font-heading); color: var(--colour-ink); padding: 1.1rem 0; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 44px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 1.4rem; color: var(--colour-blue); flex-shrink: 0; line-height: 1; }
.faq-item[open] summary::after { content: "\2212"; }
.faq-item p { padding-bottom: 1.1rem; color: var(--color-text-muted); margin: 0; }

/* ---------- Forms ---------- */
.form-panel { background: var(--colour-stone); border-radius: var(--radius-md); padding: clamp(1.5rem, 2vw, 2.25rem); }
.form-grid { display: grid; gap: 1.1rem; }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 640px) { .form-row-2 { grid-template-columns: 1fr; } }
label { display: block; font-weight: 700; margin-bottom: 0.4rem; color: var(--colour-ink); font-size: 0.9375rem; font-family: var(--font-heading); }
input, textarea, select {
  width: 100%; padding: 0.85em 1em; border: 1.5px solid var(--colour-border); border-radius: var(--radius-sm);
  font-size: 1rem; font-family: inherit; background: var(--colour-white); color: var(--color-text); min-height: 48px;
}
textarea { min-height: auto; }
input:focus, textarea:focus, select:focus { border-color: var(--colour-blue); }
.form-note { font-size: 0.8125rem; color: var(--color-text-muted); }
.form-status { margin-top: 1rem; padding: 0.9rem 1.1rem; border-radius: var(--radius-sm); font-weight: 600; display: none; }
.form-status.success { display: block; background: #eaf6e2; color: #3f7a17; border: 1px solid #cbe6b3; }
.form-status.error { display: block; background: #fdeaea; color: #b31f1f; border: 1px solid #f3bcbc; }

/* ---------- Footer ---------- */
#site-footer { background: var(--colour-ink); color: #AEB9C4; }
.footer-logo-chip { display: inline-flex; background: rgba(255,255,255,0.94); padding: 0.7rem 1.1rem; border-radius: var(--radius-sm); }
.footer-logo-chip img { height: 34px; width: auto; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2.5rem; padding-block: 3.5rem; }
@media (max-width: 860px) { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-top { grid-template-columns: 1fr; } }
.footer-brand p { color: #8D99A6; font-size: 0.9375rem; margin-top: 1rem; }
.footer-col h4 { color: var(--colour-white); font-family: var(--font-heading); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 1rem; }
.footer-col ul { display: grid; gap: 0.65rem; }
.footer-col a { color: #AEB9C4; font-size: 0.9375rem; }
.footer-col a:hover { color: var(--colour-white); }
.footer-social { display: flex; gap: 0.75rem; margin-top: 1.25rem; }
.footer-social a { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; color: var(--colour-white); }
.footer-social a:hover { background: var(--colour-blue); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-block: 1.5rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font-size: 0.8125rem; color: #7C8794; }
.footer-bottom a { color: #AEB9C4; }
.footer-credit a { color: #AEB9C4; text-decoration: underline; }

/* ---------- Team grid (About page) ---------- */
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.75rem; }
.team-card { background: var(--colour-white); border: 1px solid var(--colour-border); border-radius: var(--radius-md); padding: 1.75rem; text-align: center; box-shadow: var(--shadow-sm); }
.team-card img { width: 130px; height: 130px; border-radius: 50%; object-fit: cover; margin: 0 auto 1.1rem; }
.team-card h3 { margin-bottom: 0.15rem; font-size: 1.05rem; }
.team-card .team-role { display: inline-block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--colour-blue); background: var(--colour-sky); padding: 0.3em 0.8em; border-radius: 999px; margin-bottom: 0.9rem; }
.team-card p { font-size: 0.875rem; color: var(--color-text-muted); text-align: left; }

/* ---------- Simple question list (no fabricated answers) ---------- */
.question-list { display: grid; gap: 0.6rem; max-width: 760px; }
.question-list li { padding: 0.9rem 1.1rem; background: var(--colour-white); border: 1px solid var(--colour-border); border-radius: var(--radius-sm); font-weight: 700; font-family: var(--font-heading); color: var(--colour-ink); font-size: 0.9375rem; }

/* ---------- Brand list (Air Conditioning Brands page) ---------- */
.brand-tier { display: grid; gap: 0.4rem; margin-bottom: 0.5rem; }
.brand-tier-title { font-family: var(--font-heading); font-weight: 800; color: var(--colour-ink); font-size: 1.05rem; }
.brand-chip-row { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.brand-chip { background: var(--colour-white); border: 1px solid var(--colour-border); border-radius: 999px; padding: 0.5em 1.1em; font-weight: 600; font-size: 0.9rem; color: var(--colour-ink); }

/* ---------- Simple article/resource card (Information hub) ---------- */
.resource-card { display: block; background: var(--colour-white); border: 1px solid var(--colour-border); border-radius: var(--radius-md); padding: 1.75rem; box-shadow: var(--shadow-sm); }
.resource-card h3 { margin-bottom: 0.5rem; }
.resource-card p { color: var(--color-text-muted); margin-bottom: 1rem; }

.icon-badge {
  width: 52px; height: 52px; border-radius: var(--radius-sm);
  background: var(--colour-sky); color: var(--colour-blue);
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1rem;
}

/* ---------- Misc ---------- */
.breadcrumbs { font-size: 0.875rem; color: var(--color-text-muted); margin-bottom: 1.5rem; }
.breadcrumbs a { color: var(--color-text-muted); }
.breadcrumbs a:hover { color: var(--colour-blue); }
.stub-notice { background: var(--colour-sky); border: 1px dashed var(--colour-blue); border-radius: var(--radius-sm); padding: 1.25rem 1.5rem; margin-bottom: 2rem; font-size: 0.9375rem; color: var(--colour-ink); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Restrained entrance animation */
@media (prefers-reduced-motion: no-preference) {
  .reveal { animation: rise 0.5s ease both; }
  @keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
}