/* ==========================================================================
   Pristine Cooling — design system
   Palette derived from brand/colours.md (pixel-extracted from the logo file).
   --cyan-deep and --ink-deep are darkened shades of the brand primary and ink,
   introduced only to meet WCAG AA contrast. They are not new brand colours.
   ========================================================================== */

/* Google Sans Flex, the weight axis only, latin subset. Self hosted rather than
   fetched from Google's servers, so no visitor data leaves the site and the page
   does not depend on a third party being up. Released under the SIL Open Font
   Licence 1.1; the licence text sits beside the file in assets/fonts/.
   One 50kb file carries every weight from 1 to 1000. */
@font-face {
  font-family: 'Google Sans Flex';
  font-style: normal;
  font-display: swap;
  font-weight: 1 1000;
  src: url('../fonts/google-sans-flex-latin-wght.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Brand palette */
  --cyan: #51C8E9;
  --cyan-deep: #0F6E8C;
  --cyan-pale: #B4E3F4;
  --grey: #7C888E;

  /* Utility palette (already in production in Pristine Cooling proposals) */
  --ink: #2B2E30;
  --ink-soft: #54595C;
  --ink-deep: #1E2224;
  --light-grey: #A6ABAE;
  /* The section tint. Deepened from #F4FBFD on 03/09/2026: the old value sat
     1.05:1 against white, which is below the threshold most screens render as
     a visible difference, so alternating bands read as one flat expanse. This
     is 1.15:1 against white and keeps every foreground pair above AA. */
  --tint: #E4F2F7;
  --hairline: #DCE6E9;
  --white: #FFFFFF;

  /* Spacing */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 80px; --s10: 112px;

  /* Radius */
  --r-sm: 4px; --r-md: 10px; --r-lg: 18px; --r-full: 999px;
  /* Buttons are square-set, 4px, by the owner's decision of 07/09/2026.
     --r-full stays for the genuinely round things: tick bullets, step
     numbers, the footer badges. */
  --r-btn: 4px;

  /* Layout */
  --wrap: 1180px;
  --gutter: 20px;
  --header-h: 68px;

  /* Depth */
  --shadow-sm: 0 1px 2px rgba(43,46,48,.06), 0 2px 8px rgba(43,46,48,.05);
  --shadow-md: 0 2px 4px rgba(43,46,48,.05), 0 12px 28px rgba(43,46,48,.09);
  --shadow-lg: 0 4px 8px rgba(43,46,48,.05), 0 24px 56px rgba(43,46,48,.12);

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

@media (min-width: 900px) {
  :root { --gutter: 40px; --header-h: 80px; }
}

/* --------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: 'Google Sans Flex', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
svg { display: block; }

h1, h2, h3, h4 {
  margin: 0 0 var(--s4);
  line-height: 1.12;
  letter-spacing: -0.022em;
  font-weight: 700;
  color: var(--ink);
  text-wrap: balance;
}

h1 { font-size: clamp(1.9375rem, 1.32rem + 2.35vw, 3.125rem); }
h2 { font-size: clamp(1.625rem, 1.2rem + 2.05vw, 2.5rem); }
h3 { font-size: clamp(1.1875rem, 1.09rem + 0.45vw, 1.4375rem); letter-spacing: -0.015em; }
h4 { font-size: 1.0625rem; letter-spacing: -0.01em; }

p { margin: 0 0 var(--s4); }
p:last-child { margin-bottom: 0; }

a { color: var(--cyan-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }

:focus-visible {
  outline: 3px solid var(--cyan-deep);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* --------------------------------------------------------------- layout */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

.section { padding-block: clamp(52px, 7.5vw, 104px); }
.section--tint { background: var(--tint); }
.section--pale { background: linear-gradient(180deg, var(--tint) 0%, #E6F5FB 100%); }
.section--ink { background: var(--ink-deep); color: #E9EDEE; }
.section--ink h2, .section--ink h3 { color: var(--white); }

.section-head { max-width: 62ch; margin-bottom: clamp(32px, 4vw, 56px); }
.section-head p { color: var(--ink-soft); font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); margin-bottom: 0; }
.section--ink .section-head p { color: #B7C0C3; }

.lead { font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.3125rem); line-height: 1.55; color: var(--ink-soft); }

/* --------------------------------------------------------------- buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 52px;
  padding: 14px 26px;
  border-radius: var(--r-btn);
  font-size: 1.0625rem;
  font-weight: 650;
  letter-spacing: -0.008em;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease), color .18s var(--ease);
}
.btn svg { flex: none; }

/* Bright cyan fill + ink text = 7.02:1 contrast (AAA). */
.btn--primary { background: var(--cyan); color: var(--ink); box-shadow: 0 2px 10px rgba(81,200,233,.42); }
.btn--primary:hover { background: #6FD3EE; color: var(--ink); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(81,200,233,.5); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--hairline); }
.btn--ghost:hover { background: var(--tint); color: var(--ink); border-color: var(--grey); transform: translateY(-2px); }

.btn--onink { background: var(--cyan); color: var(--ink); }
.btn--onink:hover { background: #6FD3EE; color: var(--ink); transform: translateY(-2px); }

.btn--ghost-onink { background: transparent; color: var(--white); border-color: rgba(255,255,255,.32); }
.btn--ghost-onink:hover { background: rgba(255,255,255,.09); color: var(--white); border-color: rgba(255,255,255,.6); transform: translateY(-2px); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); }
@media (max-width: 559px) { .hero .btn-row .btn, .ctaband .btn-row .btn { flex: 1 1 100%; } }

/* --------------------------------------------------------------- header */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--white); padding: 12px 20px; border-radius: 0 0 var(--r-md) 0;
}
.skip:focus { left: 0; color: var(--white); }

.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--hairline);
}
.header__bar {
  height: var(--header-h);
  display: flex; align-items: center; gap: var(--s4);
}
.header__logo { flex: none; display: flex; align-items: center; min-height: 44px; }
.header__logo img { height: 38px; width: auto; }
@media (min-width: 900px) { .header__logo img { height: 50px; } }

.header__nav { display: none; margin-left: auto; }
.header__cta { margin-left: auto; display: flex; align-items: center; gap: var(--s3); }
/* The number and the Call 24/7 button sit side by side on desktop and do the
   same thing. Rather than drop one, the number is set as information: lighter
   ink, no hover colour shift, and more air between it and the button so the
   two stop reading as competing controls. Still a tel: link, still 7.09:1. */
.header__phone {
  display: none; align-items: center; min-height: 44px;
  font-weight: 600; color: var(--ink-soft); text-decoration: none;
  font-size: 1rem; white-space: nowrap;
}
.header__phone:hover { color: var(--ink); }

.header .btn { min-height: 44px; padding: 10px 16px; font-size: .9375rem; white-space: nowrap; }

.burger {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center;
  background: none; border: 1px solid var(--hairline); border-radius: var(--r-btn); cursor: pointer;
}
.burger span { display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; position: relative; transition: background .2s; }
.burger span::before, .burger span::after { content: ''; position: absolute; left: 0; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .25s var(--ease); }
.burger span::before { top: -6px; }
.burger span::after { top: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

.mobilenav {
  display: none;
  border-top: 1px solid var(--hairline);
  background: var(--white);
  padding: var(--s4) 0 var(--s6);
  max-height: calc(100vh - var(--header-h));
  overflow-y: auto;
}
.mobilenav.is-open { display: block; }
.mobilenav a {
  display: block; padding: 13px 0; min-height: 44px;
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: 1.0625rem;
  border-bottom: 1px solid var(--hairline);
}
.mobilenav a:hover { color: var(--cyan-deep); }
.mobilenav__label { font-size: .6875rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--grey); margin: var(--s5) 0 var(--s2); }

@media (min-width: 1024px) {
  .burger { display: none; }
  .mobilenav { display: none !important; }
  .header__nav { display: flex; align-items: center; gap: var(--s5); }
  .header__nav a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: .9375rem; padding: 6px 0; position: relative; }
  .header__nav a::after { content:''; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px; background: var(--cyan); transition: right .25s var(--ease); }
  .header__nav a:hover::after, .header__nav a[aria-current="page"]::after { right: 0; }
  .header__cta { margin-left: var(--s6); gap: var(--s5); }
  .header__phone { display: flex; }

  /* ------------------------------------------- Services drop-down (desktop)
     Opens three ways so it never depends on one of them:
       :hover        mouse
       :focus-within keyboard, and the whole fallback when JS is off
       .is-open      set by site.js on click, which also drives aria-expanded
     A hover-only menu is unusable by keyboard and by anyone using a switch
     or voice control, which is why the button is a real button. */
  .navdrop { position: relative; }
  .navdrop__btn {
    display: inline-flex; align-items: center; gap: 5px;
    background: none; border: 0; padding: 6px 0; margin: 0;
    font: inherit; font-weight: 600; font-size: .9375rem;
    color: var(--ink); cursor: pointer; position: relative;
  }
  .navdrop__btn svg { transition: transform .2s var(--ease); }
  .navdrop__btn::after {
    content: ''; position: absolute; left: 0; right: 100%; bottom: 0;
    height: 2px; background: var(--cyan); transition: right .25s var(--ease);
  }
  .navdrop__btn:hover::after,
  .navdrop__btn[data-current="true"]::after,
  .navdrop:hover .navdrop__btn::after,
  .navdrop:focus-within .navdrop__btn::after { right: 0; }

  .navdrop__menu {
    position: absolute; top: 100%; left: 50%; transform: translate(-50%, 6px);
    margin: 0; padding: var(--s2); list-style: none;
    min-width: 248px;
    background: var(--white);
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-md);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .16s var(--ease), transform .16s var(--ease), visibility .16s;
    z-index: 120;
  }
  /* a gap between button and panel would drop the hover; this bridges it */
  .navdrop::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 10px; }

  .navdrop:hover .navdrop__menu,
  .navdrop:focus-within .navdrop__menu,
  .navdrop.is-open .navdrop__menu {
    opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 4px);
  }
  .navdrop:hover .navdrop__btn svg,
  .navdrop:focus-within .navdrop__btn svg,
  .navdrop.is-open .navdrop__btn svg { transform: rotate(180deg); }

  /* Escape must close it even though focus stays on the button, which would
     otherwise keep :focus-within open. Cleared as soon as focus or the
     pointer leaves, so the menu behaves normally again next time. */
  .navdrop.is-shut .navdrop__menu,
  .navdrop.is-shut:hover .navdrop__menu,
  .navdrop.is-shut:focus-within .navdrop__menu {
    opacity: 0; visibility: hidden; pointer-events: none;
  }
  .navdrop.is-shut .navdrop__btn svg,
  .navdrop.is-shut:hover .navdrop__btn svg,
  .navdrop.is-shut:focus-within .navdrop__btn svg { transform: none; }

  .navdrop__menu li { margin: 0; }
  .header__nav .navdrop__menu a {
    display: block; padding: 11px 14px; min-height: 44px;
    border-radius: var(--r-sm); font-weight: 600; line-height: 1.35;
    color: var(--ink); white-space: nowrap;
  }
  .header__nav .navdrop__menu a::after { display: none; }
  .header__nav .navdrop__menu a:hover,
  .header__nav .navdrop__menu a:focus-visible { background: var(--tint); color: var(--cyan-deep); }
  .header__nav .navdrop__menu a[aria-current="page"] { background: var(--tint); color: var(--cyan-deep); }

  @media (prefers-reduced-motion: reduce) {
    .navdrop__menu, .navdrop__btn svg { transition: none; }
  }
}

/* --------------------------------------------------------------- hero */
.hero {
  position: relative;
  background:
    radial-gradient(1100px 520px at 82% -12%, rgba(180,227,244,.55) 0%, rgba(180,227,244,0) 62%),
    linear-gradient(180deg, var(--white) 0%, var(--tint) 100%);
  padding-block: clamp(44px, 6vw, 88px) clamp(52px, 7vw, 96px);
  overflow: hidden;
}
.hero::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 1px; background: var(--hairline);
}
.hero__grid { display: grid; gap: clamp(32px, 4vw, 56px); align-items: center; }
@media (min-width: 1024px) { .hero__grid { grid-template-columns: 1.08fr .92fr; gap: 64px; } }

.hero h1 { margin-bottom: var(--s5); max-width: 15ch; }
@media (min-width: 1024px) { .hero h1 { max-width: 17ch; } }
.hero .lead { margin-bottom: var(--s6); max-width: 44ch; }

/* Hero with no photograph: the headline and the lead sit side by side so the
   band fills its width instead of leaving a gap where a picture would be. */
.hero__grid--solo { gap: clamp(20px, 3vw, 32px); }
.hero__grid--solo h1 { margin-bottom: 0; max-width: 18ch; }
.hero__grid--solo .lead { margin-bottom: var(--s5); max-width: 52ch; }
@media (min-width: 900px) {
  .hero__grid--solo { grid-template-columns: 1fr 1fr; align-items: end; gap: clamp(40px, 5vw, 72px); }
  .hero__grid--solo h1 { max-width: 14ch; }
  .hero__grid--solo .hero__say { padding-bottom: 4px; }
  /* No picture setting the height, so the band doesn't need the deep footing. */
  .hero:has(.hero__grid--solo) { padding-bottom: clamp(40px, 4vw, 56px); }
}

.hero__figure {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--cyan-pale);
  aspect-ratio: 4 / 3;
}
.hero__figure img { width: 100%; height: 100%; object-fit: cover; }

/* trust strip */
.trust {
  margin-top: clamp(32px, 4vw, 52px);
  padding-top: var(--s5);
  border-top: 1px solid var(--hairline);
  display: grid; gap: var(--s4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* Four items of very different lengths on an equal four column grid left the
   whitespace between them ragged: 27px after the longest label and 124px
   after the shortest. Sizing each column to its own content and sharing the
   leftover space evenly makes every gap the same. */
@media (min-width: 760px) {
  .trust { grid-template-columns: repeat(4, max-content); justify-content: space-between; gap: var(--s5); }
}
/* Sub-lines removed 20/08/2026 at the owner's direction: headings only.
   The icon now centres against a single line rather than hanging off the top. */
.trust__item { display: flex; gap: var(--s3); align-items: center; }
.trust__item svg { flex: none; color: var(--cyan-deep); }
.trust__item b { display: block; font-size: .9375rem; font-weight: 700; line-height: 1.3; }
.trust__item span { display: block; font-size: .8125rem; color: var(--ink-soft); line-height: 1.4; }

/* --------------------------------------------------------------- cards */
.grid { display: grid; gap: var(--s5); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }
@media (min-width: 700px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.card {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: clamp(22px, 2.4vw, 32px);
  display: flex; flex-direction: column;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
/* A card heading is sized by its role in the card, not by its level in the
   document. On most pages the cards sit under a section h2 and are h3s. On the
   contact page they sit directly under the page h1, so they are h2s. Both must
   look identical. */
.card h2 { font-size: clamp(1.1875rem, 1.09rem + 0.45vw, 1.4375rem); letter-spacing: -0.015em; }

/* The contact page opens straight onto its heading and buttons with no hero
   band above them, so the section-head's full bottom margin would leave a hole
   between the paragraph and the buttons. Pull the buttons up to sit with the
   text they belong to, and keep the space below them instead. */
.contact-actions { margin-top: calc(clamp(32px, 4vw, 56px) * -1 + var(--s5)); margin-bottom: var(--s6); }
.card p { color: var(--ink-soft); font-size: 1rem; }
.card__icon {
  width: 46px; height: 46px; border-radius: var(--r-md);
  background: var(--cyan-pale); color: var(--cyan-deep);
  display: grid; place-items: center; margin-bottom: var(--s4);
}
.card__link {
  margin-top: auto; padding-top: var(--s4);
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 650; font-size: .9375rem; text-decoration: none; color: var(--cyan-deep);
  min-height: 46px;
}
.card__link svg { transition: transform .2s var(--ease); }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--cyan-pale); }
.card:hover .card__link svg { transform: translateX(4px); }
.card--flat:hover { transform: none; box-shadow: none; border-color: var(--hairline); }

/* stat / proof tiles */
.tiles { display: grid; gap: var(--s4); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .tiles { grid-template-columns: repeat(4, 1fr); } }
.tile { background: var(--white); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: var(--s5); }
.tile b { display: block; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); line-height: 1.1; letter-spacing: -0.03em; }
.tile span { display: block; font-size: .875rem; color: var(--ink-soft); margin-top: 6px; }

/* Tiles that carry a third-party logo. One per row on mobile so no mark is
   ever squeezed below its legible size or into its clearance zone. The tile
   background is white, which both Daikin's and ARC's guidelines require. */
.tiles--marks { grid-template-columns: 1fr; }
@media (min-width: 640px) { .tiles--marks { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .tiles--marks { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }
/* Everything in a mark tile is centred, horizontally and vertically. The four
   hold very different amounts: a figure and two lines, a logo and a number, a
   logo on its own. Left aligned and top aligned they read as a ragged row;
   centred they read as a set. */
.tiles--marks .tile {
  display: flex; flex-direction: column; gap: var(--s3);
  align-items: center; justify-content: center; text-align: center;
}
.tile__mark {
  display: flex; align-items: center; justify-content: center;
  min-height: 68px; background: var(--white); padding: 6px 0;
}
.tile__mark img {
  display: block; width: auto; height: auto;
  max-width: 180px; max-height: 66px;
  /* no filter, no shadow, no crop: the artwork is used exactly as supplied */
}
.tile--mark b { font-size: 1.375rem; letter-spacing: -0.01em; }
.tile--mark span { margin-top: 0; }
@media (min-width: 1200px) { .tile__mark img { max-width: 200px; max-height: 74px; } }

/* --------------------------------------------------------------- lists */
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.ticks li { position: relative; padding-left: 32px; color: var(--ink-soft); }
.ticks li::before {
  content: ''; position: absolute; left: 0; top: 7px; width: 20px; height: 20px;
  border-radius: var(--r-full); background: var(--cyan-pale);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%230F6E8C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 10.5l3 3 6-6.5'/%3E%3C/svg%3E");
  background-size: 20px 20px;
}
.section--ink .ticks li { color: #C6CFD2; }

/* --------------------------------------------------------------- split */
.split { display: grid; gap: clamp(32px, 4vw, 64px); align-items: center; }
@media (min-width: 1000px) { .split { grid-template-columns: 1fr 1fr; } }
.split__media { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-md); aspect-ratio: 4/3; background: var(--cyan-pale); }
.split__media img { width: 100%; height: 100%; object-fit: cover; }

/* --------------------------------------------------------------- process */
.steps { counter-reset: step; display: grid; gap: var(--s5); }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(4, 1fr); gap: var(--s4); } }
.step { position: relative; padding-top: var(--s6); }
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; top: 0; left: 0;
  width: 40px; height: 40px; border-radius: var(--r-full);
  background: var(--cyan); color: var(--ink);
  display: grid; place-items: center; font-weight: 700; font-size: 1.0625rem;
}
.step h3 { font-size: 1.125rem; margin-bottom: var(--s2); }
.step p { color: var(--ink-soft); font-size: .9375rem; margin: 0; }
.section--ink .step p { color: #B7C0C3; }

/* --------------------------------------------------------------- reviews */
.quote {
  background: var(--white); border: 1px solid var(--hairline); border-left: 4px solid var(--cyan);
  border-radius: var(--r-md); padding: clamp(22px, 2.4vw, 30px);
}
.quote p { font-size: 1.0625rem; color: var(--ink); margin-bottom: var(--s4); }
.quote cite { font-style: normal; font-size: .875rem; font-weight: 650; color: var(--ink-soft); }

.placeholder {
  border: 2px dashed #0C5D77;
  background: var(--tint);
  border-radius: var(--r-md);
  padding: clamp(20px, 2.4vw, 28px);
  color: var(--ink-soft);
}
.placeholder b { color: #0C5D77; display: block; margin-bottom: 6px; font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; }
.placeholder p { font-size: .9375rem; margin: 0; }

/* ------------------------------------------------------------ projects
   The client logo wall was removed 20/08/2026 and replaced by this. The
   index shows one card per project, frontage photo plus one line; the card
   opens the detail page with the install photos and the job facts.
   ---------------------------------------------------------------------- */
.projgrid { display: grid; gap: var(--s5); grid-template-columns: 1fr; }
@media (min-width: 680px) { .projgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .projgrid { grid-template-columns: repeat(3, 1fr); } }

.projcard {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: var(--white); border: 1px solid var(--hairline);
  border-radius: var(--r-md); overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.projcard:hover, .projcard:focus-visible {
  transform: translateY(-3px); border-color: var(--cyan-pale);
  box-shadow: 0 10px 28px rgba(30,34,36,.10);
}
.projcard__shot { aspect-ratio: 10/7; background: var(--tint); overflow: hidden; }
.projcard__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.projcard__body { padding: var(--s5); display: flex; flex-direction: column; gap: var(--s2); flex: 1; }
.projcard__body h3 { margin: 0; font-size: 1.125rem; }
.projcard__body p { margin: 0; color: var(--ink-soft); font-size: .9375rem; flex: 1; }
.projcard__more { color: var(--cyan-deep); font-weight: 650; font-size: .9375rem; display: inline-flex; align-items: center; gap: 6px; }
.projcard:hover .projcard__more { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .projcard { transition: none; } .projcard:hover { transform: none; } }

/* detail page */
.projshot { margin: 0; border-radius: var(--r-md); overflow: hidden; background: var(--tint); border: 1px solid var(--hairline); }
.projshot img { width: 100%; height: auto; display: block; }
.projshot--lead { aspect-ratio: 10/7; }
.projshot--lead img { height: 100%; object-fit: cover; }
/* Installation photos come off a phone in whatever ratio the job allowed, so
   the grid keeps each image's own shape and simply tops-aligns them rather
   than cropping a crane out of frame to make two boxes match. */
.projshots { display: grid; gap: var(--s4); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 680px) { .projshots { grid-template-columns: repeat(2, 1fr); } }
/* One photo only: a single cell of a two-column grid leaves a tall portrait
   shot stranded beside an empty half. Give it the one column and cap it so it
   sits at a sensible size rather than filling the page. */
.projshots--one { grid-template-columns: 1fr; }
@media (min-width: 680px) { .projshots--one { grid-template-columns: minmax(0, 560px); } }

.projmeta { display: grid; gap: 0; margin: var(--s5) 0 0; border-top: 1px solid var(--hairline); }
.projmeta > div { display: grid; grid-template-columns: 1fr; gap: 2px; padding: var(--s3) 0; border-bottom: 1px solid var(--hairline); }
@media (min-width: 480px) { .projmeta > div { grid-template-columns: 8.5rem 1fr; gap: var(--s3); align-items: baseline; } }
.projmeta dt { color: var(--ink); font-weight: 650; font-size: .875rem; margin: 0; }
.projmeta dd { margin: 0; color: var(--ink-soft); font-size: .9375rem; }

/* --------------------------------------------------------------- areas */
.arealist { display: grid; gap: var(--s3); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .arealist { grid-template-columns: repeat(4, 1fr); } }
.arealist a {
  display: flex; align-items: center; gap: var(--s2);
  min-height: 52px; padding: 12px 18px;
  background: var(--white); border: 1px solid var(--hairline); border-radius: var(--r-md);
  text-decoration: none; color: var(--ink); font-weight: 600; font-size: .9375rem;
  transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.arealist a:hover { border-color: var(--cyan); transform: translateY(-2px); box-shadow: var(--shadow-sm); color: var(--ink); }
.arealist svg { flex: none; color: var(--cyan-deep); }

/* --------------------------------------------------------------- cta band */
.ctaband {
  background:
    radial-gradient(760px 380px at 88% 0%, rgba(15,110,140,.55) 0%, rgba(15,110,140,0) 66%),
    var(--ink-deep);
  color: #E9EDEE;
  padding-block: clamp(52px, 7vw, 96px);
}
.ctaband h2 { color: var(--white); max-width: 20ch; }
.ctaband p { color: #B7C0C3; max-width: 52ch; font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem); }
.ctaband__inner { display: grid; gap: var(--s6); }
@media (min-width: 1000px) { .ctaband__inner { grid-template-columns: 1.1fr .9fr; align-items: center; gap: 64px; } }
.ctaband__panel {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 34px);
}
.ctaband__panel .num { display: flex; align-items: center; min-height: 46px; font-size: clamp(1.375rem, 1.15rem + 1vw, 1.75rem); font-weight: 700; letter-spacing: -0.02em; color: var(--white); text-decoration: none; }
.ctaband__panel .num:hover { color: var(--cyan); }
.ctaband__panel .lbl { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--cyan); margin-bottom: 4px; }
.ctaband__panel hr { border: 0; border-top: 1px solid rgba(255,255,255,.14); margin: var(--s5) 0; }

/* --------------------------------------------------------------- form */
.form { display: grid; gap: var(--s4); }
.field { display: grid; gap: 6px; }
.field label { font-size: .875rem; font-weight: 650; color: var(--ink); }
.field input, .field select, .field textarea {
  font: inherit; font-size: 1rem;
  min-height: 52px; padding: 13px 16px;
  border: 1px solid var(--hairline); border-radius: var(--r-md);
  background: var(--white); color: var(--ink);
  width: 100%;
}
.field textarea { min-height: 132px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--cyan-deep); outline: 2px solid var(--cyan-deep); outline-offset: 1px; }
.field .hint { font-size: .8125rem; color: var(--ink-soft); }

/* --------------------------------------------------------------- faq */
.faq { border-top: 1px solid var(--hairline); }
.faq details { border-bottom: 1px solid var(--hairline); }
.faq summary {
  list-style: none; cursor: pointer;
  padding: var(--s5) 44px var(--s5) 0; position: relative;
  font-weight: 650; font-size: 1.0625rem; color: var(--ink); min-height: 52px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; position: absolute; right: 8px; top: 50%; width: 12px; height: 12px;
  margin-top: -8px; border-right: 2px solid var(--cyan-deep); border-bottom: 2px solid var(--cyan-deep);
  transform: rotate(45deg); transition: transform .25s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -4px; }
.faq details p { padding-bottom: var(--s5); color: var(--ink-soft); max-width: 72ch; }

/* --------------------------------------------------------------- breadcrumb */
.crumb { font-size: .875rem; color: var(--ink-soft); padding-top: var(--s2); }
.crumb li { display: flex; align-items: center; }
.crumb a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
.crumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.crumb li::after { content: '/'; margin-left: 8px; color: var(--light-grey); }
.crumb li:last-child::after { content: ''; }
.crumb a { color: var(--ink-soft); }
.crumb a:hover { color: var(--cyan-deep); }

/* --------------------------------------------------------------- footer */
.footer { background: var(--ink-deep); color: #B7C0C3; padding-block: clamp(48px, 6vw, 80px) var(--s6); font-size: .9375rem; }
.footer a { color: #B7C0C3; text-decoration: none; }
.footer p a { display: inline-flex; align-items: center; min-height: 44px; }
.footer a:hover { color: var(--cyan); }
.footer__grid { display: grid; gap: var(--s7); }
@media (min-width: 760px) { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--s6); } }
.footer__brand { font-size: 1.25rem; font-weight: 700; color: var(--white); letter-spacing: -0.02em; margin-bottom: var(--s3); }
.footer h2 { color: var(--white); font-size: .75rem; letter-spacing: .11em; text-transform: uppercase; margin-bottom: var(--s4); }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer ul a { display: inline-flex; align-items: center; min-height: 44px; padding: 2px 0; }
.footer__meta {
  margin-top: var(--s7); padding-top: var(--s5);
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex; flex-wrap: wrap; gap: var(--s4) var(--s5);
  justify-content: space-between; font-size: .8125rem; color: #8E999D;
}
.footer__social { display: flex; gap: var(--s3); }
.footer__social a { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.16); border-radius: var(--r-full); }
.footer__social a:hover { border-color: var(--cyan); }
.footer__badge { display: inline-flex; align-items: center; gap: var(--s2); background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); border-radius: var(--r-full); padding: 8px 16px; font-size: .8125rem; font-weight: 600; color: var(--white); margin-top: var(--s4); }

/* Daikin Specialist Dealer badge in the dark footer.
   Owner's decision, 20/08/2026: use the official single-colour WHITE artwork
   from the Daikin portal directly on the dark footer. Daikin's published
   guidelines permit the white version for dark coloured CLOTHING and state
   that is the only permitted use, so this sits outside those guidelines and
   is recorded as such in brand/logo-rules.md. Written approval has been
   requested from Daikin.
   Everything the guidelines require of the artwork itself is respected here:
   the clearance zone is clear and free of any text or graphics, the file is
   the unaltered original, and there are no effects, no outline, no crop and
   no distortion. Aspect ratio is locked to the source. */
.footer__mark {
  display: inline-block; margin-top: var(--s4);
  padding: 14px 0; line-height: 0;
}
.footer__mark img { display: block; width: 200px; height: auto; }

/* --------------------------------------------------------------- sticky mobile call bar */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid var(--hairline);
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  display: flex; gap: var(--s2);
}
.callbar .btn { flex: 1; min-height: 48px; font-size: .9375rem; padding: 12px 12px; white-space: nowrap; }
@media (min-width: 1024px) { .callbar { display: none; } }
body { padding-bottom: 74px; }
@media (min-width: 1024px) { body { padding-bottom: 0; } }

/* --------------------------------------------------------------- motion */
/* Reveal is opt-in: only hidden once the inline head script confirms JS is alive.
   If script loading fails for any reason, every section renders normally. */
.reveal { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .62s var(--ease), transform .62s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* --------------------------------------------------------------- utils */
.mb-5 { margin-bottom: var(--s5); }
.mb-6 { margin-bottom: var(--s6); }
.mt-6 { margin-top: var(--s6); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.measure { max-width: 68ch; }

/* When .measure sits on the same element as .wrap it would otherwise override the
   container width and centre the whole block off the layout grid. Keep the wrap at
   full width and constrain the children instead, so text stays on the left gutter. */
.wrap.measure { max-width: var(--wrap); }
.wrap.measure > * { max-width: 68ch; }
.wrap.measure > h1 { max-width: 20ch; }
.wrap.measure > .btn-row { max-width: none; }

/* Text-only heroes do not need the two-column vertical rhythm. */
.hero:has(> .wrap.measure) { padding-block: clamp(24px, 3vw, 48px) clamp(40px, 5vw, 72px); }

/* --------------------------------------------------------------- fill flags
   Uses Pristine Cooling's own documented internal "needs confirmation"
   colours (brand/colours.md). Anything wrapped in .fill is a placeholder
   waiting on a real value from Rachel. Delete the wrapper once filled.
   ------------------------------------------------------------------------ */
.fill {
  background: #FFF6E0;
  color: #8A6500;
  border: 1px dashed #8A6500;
  border-radius: var(--r-sm);
  padding: 0 5px;
  font-weight: 700;
  white-space: nowrap;
}
/* nowrap protects a short value like a rating from breaking mid-number.
   A placeholder that is a whole instruction has to wrap or it blows the
   layout out sideways on a phone. */
.fill--long { white-space: normal; }
.section--ink .fill, .ctaband .fill, .footer .fill { background: rgba(255,246,224,.14); color: #F0C24A; border-color: #F0C24A; }


/* ------------------------------------------------- Daikin Specialist Dealer
   Built to Daikin's published logo guidelines:
   - clearance zone must be WHITE and free of any text or graphics
   - never add effects (no shadow, no gradient), never stretch or warp
   - the single-colour white version is permitted on dark clothing only,
     so this badge never goes in the dark footer
   ------------------------------------------------------------------------- */
.accred {
  display: grid;
  gap: var(--s5);
  align-items: center;
  background: #FFFFFF;
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: clamp(26px, 3.2vw, 40px);
}
@media (min-width: 820px) { .accred { grid-template-columns: minmax(0,300px) 1fr; gap: var(--s7); } }

/* White box with generous padding = the required clearance zone. No border,
   no background tint, no shadow inside this element. */
.accred__mark {
  background: #FFFFFF;
  padding: 22px;
  display: grid;
  place-items: center;
}
.accred__mark img {
  width: 100%;
  max-width: 290px;
  height: auto;
  object-fit: contain;   /* never stretch or compress */
}
.accred__body h3 { margin-bottom: var(--s3); }
.accred__body p { color: var(--ink-soft); }
.accred__body p:last-child { margin-bottom: 0; }
.accred__note {
  font-size: .8125rem;
  color: var(--grey);
  margin-top: var(--s4);
}


/* --------------------------------------------- third-party certification marks
   Australian Made and Sensitive Choice both require: white/clear space free of
   text or graphics, no effects, no distortion, qualifying text always attached,
   components never used in isolation. Clearance is baked into the image files
   (20% for Australian Made, being 3x the height of the "AUSTRALIAN MADE" text;
   14% for Sensitive Choice, being the height of the "SENSITIVE CHOICE" text).
   ---------------------------------------------------------------------------- */
.certmark {
  background: #FFFFFF;
  display: grid;
  place-items: center;
  margin-bottom: var(--s4);
}
.certmark img {
  height: 186px;
  width: auto;
  max-width: 100%;
  object-fit: contain;   /* never stretch, compress or warp */
}
@media (min-width: 700px) { .certmark img { height: 240px; } }

/* ------------------------------------------------------- job application form
   Role-adaptive: the technician and apprentice question sets are separate
   fieldsets. Without JavaScript every fieldset is visible and no role-specific
   field is required, so the form still submits. JS narrows it to one role and
   applies the required flags. Nothing is ever hidden-but-required.
   ------------------------------------------------------------------------- */
.jobform { display: grid; gap: var(--s5); max-width: 760px; }
.jobform fieldset { border: 0; margin: 0; padding: 0; }
.jobform legend {
  font-size: .75rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
  color: var(--cyan-deep); padding: 0; margin-bottom: var(--s4);
}
.jobform .grid2 { display: grid; gap: var(--s4); }
@media (min-width: 600px) { .jobform .grid2 { grid-template-columns: 1fr 1fr; } }

.rolepick { display: grid; gap: var(--s3); }
@media (min-width: 600px) { .rolepick { grid-template-columns: 1fr 1fr; } }
.rolepick label {
  display: flex; align-items: flex-start; gap: var(--s3);
  border: 1px solid var(--hairline); border-radius: var(--r-md);
  padding: var(--s4); cursor: pointer; min-height: 52px;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.rolepick label:hover { border-color: var(--cyan); background: var(--tint); }
.rolepick input { margin: 3px 0 0; width: 20px; height: 20px; flex: none; accent-color: var(--cyan-deep); }
.rolepick b { display: block; font-size: 1rem; }
.rolepick span { display: block; font-size: .875rem; color: var(--ink-soft); margin-top: 2px; }
.rolepick input:focus-visible + div { outline: 3px solid var(--cyan-deep); outline-offset: 4px; }

.checkrow {
  display: flex; align-items: center; gap: var(--s3);
  padding: 10px 0; min-height: 44px;
}
/* 24px is the WCAG 2.2 SC 2.5.8 minimum target size. The box itself is the
   only clickable part here, because the label is a sibling rather than a
   wrapper, so the box has to carry the whole target on its own. */
.checkrow input { margin: 0; width: 24px; height: 24px; flex: none; accent-color: var(--cyan-deep); }
/* The label is part of the target: clicking it toggles the box. Giving it a
   44px minimum height makes the whole row a comfortable target on a phone,
   which is what SC 2.5.8 is actually protecting. */
.checkrow label { font-size: 1rem; color: var(--ink); line-height: 1.5;
  flex: 1; display: flex; align-items: center; min-height: 44px; }

.filefield input[type="file"] {
  font: inherit; font-size: .9375rem; width: 100%;
  padding: 13px 16px; min-height: 52px;
  border: 1px dashed var(--grey); border-radius: var(--r-md); background: var(--tint);
}
.filefield input[type="file"]::file-selector-button {
  font: inherit; font-weight: 650; font-size: .875rem;
  margin-right: 14px; padding: 8px 16px;
  border: 0; border-radius: var(--r-btn);
  background: var(--cyan); color: var(--ink); cursor: pointer;
}
.fileerr {
  display: none; margin-top: 8px; font-size: .875rem; font-weight: 600; color: #8A6500;
  background: #FFF6E0; border: 1px solid #8A6500; border-radius: var(--r-sm); padding: 10px 12px;
}
.fileerr.is-on { display: block; }
.req { color: var(--cyan-deep); font-weight: 700; }
[hidden] { display: none !important; }

/* --------------------------------------------- footer: stacked label / value
   The office hours used a fixed-width inline label, which in a narrow footer
   column pushed the time onto a second line and broke it mid-value
   ("Monday to Thursday8:00am to / 4:30pm"). The phone link had the same class
   of bug: an inline-flex ignored its <br>, so the label and the number
   overlapped. Both now stack, so neither can collide or break.
   ------------------------------------------------------------------------- */
.footer__stack { display: grid; gap: var(--s4); }
.footer__stack li { display: grid; gap: 1px; }
.footer__stack .k {
  color: var(--white); font-weight: 650; font-size: .875rem; line-height: 1.35;
}
.footer__stack .v {
  color: #B7C0C3; font-size: .9375rem; line-height: 1.4; text-wrap: nowrap;
}
/* beats .footer ul a, which is inline-flex for the plain link lists */
.footer .footer__stack a {
  display: grid; gap: 1px; align-content: center;
  min-height: 44px; padding: 2px 0;
}
.footer .footer__stack a:hover .k,
.footer .footer__stack a:hover .v { color: var(--cyan); }


/* ------------------------------------------------------- hiring page bits */
.ticks--onink li { color: #B7C0C3; }
.ticks--onink li::before { background: rgba(81,200,233,.22); }

.privacy-note {
  margin-top: var(--s6);
  padding: var(--s5);
  background: var(--tint);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
}
.privacy-note h3 { font-size: 1.0625rem; margin-bottom: var(--s3); }
.privacy-note p { font-size: .9375rem; color: var(--ink-soft); margin-bottom: var(--s3); }
.privacy-note p:last-child { margin-bottom: 0; }

/* File input. Native control kept, because a custom one is the classic way to
   break an upload on a phone. Only the box around it is styled. */
.jobform input[type="file"] {
  width: 100%; padding: 12px; min-height: 48px;
  background: var(--white);
  border: 1px dashed var(--grey);
  border-radius: var(--r-sm);
  font: inherit; font-size: .9375rem; color: var(--ink);
}
.jobform input[type="file"]::file-selector-button {
  margin-right: 12px; padding: 9px 14px; min-height: 40px;
  border: 1px solid var(--hairline); border-radius: var(--r-btn);
  background: var(--tint); color: var(--ink);
  font: inherit; font-weight: 650; font-size: .875rem; cursor: pointer;
}
.jobform input[type="file"]:focus-visible { outline: 3px solid var(--cyan-deep); outline-offset: 2px; }


/* --------------------------------------------------------- review stamp
   Shows when this copy of the site was built, so an old extracted folder is
   obvious immediately rather than after someone reports a change that was
   made days ago. Not interactive, never focusable, removed before launch by
   setting REVIEW_STAMP = False in rebuild.py. */
.buildstamp {
  position: fixed; left: 10px; bottom: 10px; z-index: 60;
  pointer-events: none; user-select: none;
  background: #FFF6E0; color: #8A6500; border: 1px dashed #8A6500;
  border-radius: var(--r-full); padding: 5px 12px;
  font-size: .6875rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; line-height: 1.2;
  box-shadow: 0 2px 8px rgba(43,46,48,.10);
}
/* the sticky call bar owns the bottom of the screen on a phone */
@media (max-width: 899px) { .buildstamp { bottom: 76px; } }
@media print { .buildstamp { display: none; } }


/* ------------------------------------------------- charged separately list
   Same list shape as the ticks, different mark and colour, so it reads as the
   other half of the same honest answer rather than as small print. A tick
   would be wrong here: these are not things you get. */
.ticks--out li::before {
  background: #FFF6E0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%238A6500' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 10h8'/%3E%3C/svg%3E");
}


/* ------------------------------------------------------------- reviews
   Customers' words, styled deliberately unlike the .quote cards, which are
   the business's own words. Nobody should have to work out which is which. */
.reviews h3 { font-size: 1.0625rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.review {
  margin: 0; padding: var(--s5);
  background: var(--white); border: 1px solid var(--hairline); border-radius: var(--r-md);
  display: flex; flex-direction: column; gap: var(--s4);
}
.review blockquote { margin: 0; font-size: 1.0625rem; line-height: 1.55; color: var(--ink); }
.review figcaption { font-weight: 650; color: var(--ink); font-size: .9375rem; }
/* the profile link is a standalone action, so it carries a 44px target */
.reviews > p > a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }

/* A single feature quote, used where one voice carries the section on its own. */
.review--lead { padding: clamp(24px, 3vw, 36px); }
.review--lead blockquote { font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem); line-height: 1.5; }

.review figcaption span {
  display: block; font-weight: 600; font-size: .75rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-soft); margin-top: 2px;
}