/* ==========================================================================
   FIXMATE APPLIANCE CARE — stylesheet
   ==========================================================================
   Plain CSS. No build step, no preprocessor. Edit and upload.

   HOW THIS FILE IS ORGANISED
     01  FONTS          local woff2, no external request
     02  TOKENS         every colour and size in one place  <-- EDIT COLOURS HERE
     03  RESET
     04  TYPE
     05  LAYOUT         .wrap container, .sec section padding
     06  BUTTONS
     07  HEADER + NAV
     08  HERO
     09  QUOTE FORM
     10  CARD GRIDS
     11  COPY BLOCK
     12  FEATURE / ISSUE ICON GRIDS
     13  STAT BAND
     14  STEPS
     15  LONG-FORM PROSE
     16  FAQ ACCORDION
     17  AREAS LINK LIST
     18  FOOTER
     19  FLOATING BITS   scroll-top, mobile call bar
     20  MOTION          reveal-on-scroll
     21  RESPONSIVE
     22  REDUCED MOTION / PRINT

   TO RECOLOUR THE WHOLE SITE, change the six values under "BRAND" in §02.
   Nothing else in this file needs touching.
   ========================================================================== */

/* ==========================================================================
   01  FONTS
   ==========================================================================
   Poppins, four weights, served from assets/fonts/ so the page makes no
   request to Google and keeps working with no internet connection. */
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ==========================================================================
   02  TOKENS
   ========================================================================== */
:root {
  /* ---- BRAND -------------------------------------------------------------
     Blue primary, orange accent, near-black headings. Blue is for anything
     you want clicked; orange is decoration only. If orange starts appearing
     everywhere it stops meaning anything.

     The old variable names (--green*, --amber*) are kept below as aliases so
     that every rule further down this file, and every page, keeps working.
     Change a colour ONCE here and it changes across all ten pages. */
  --blue: #007BFF;         /* primary: buttons, links, icons          */
  --blue-d: #004BA8;       /* button hover, footer, dark bands         */
  --blue-l: #3395FF;       /* light blue for borders on dark           */
  --blue-t: #0059B3;       /* blue TEXT on white - 5.1:1, readable     */
  --tint: #F0F7FF;         /* the pale blue band behind two sections   */
  --orange: #FFA300;       /* accent: icon glyphs, rules, small marks  */
  --orange-d: #E08A00;     /* accent hover                             */
  --orange-t: #8A5800;     /* orange TEXT on white - 4.6:1             */

  /* Aliases. Do not delete: the rest of the file refers to these. */
  --green: var(--blue);
  --green-d: var(--blue-d);
  --green-l: var(--blue-t);
  --amber: var(--orange);
  --amber-d: var(--orange-d);
  --amber-w: var(--tint);
  --amber-t: var(--orange-t);
  --amber-l: #FFD48A;      /* orange text on the dark blue footer      */

  /* ---- NEUTRALS --------------------------------------------------------- */
  --ink: #0D0404;          /* headings                                */
  --body: #121212;         /* paragraphs                              */
  --muted: #737373;        /* captions, meta - 4.7:1 on white         */
  --line: #D4D4D4;         /* borders                                 */
  --line-d: #1F5EA8;       /* borders on blue                         */
  --white: #FFFFFF;
  --bg-2: #F0F7FF;         /* alternating section background          */
  --bg-3: #E7F1FC;         /* deeper tint                             */

  /* ---- TYPE ------------------------------------------------------------- */
  --ff-h: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --ff-b: var(--ff-h);

  --fs-h1: clamp(1.75rem, 1.25rem + 1.9vw, 2.375rem);   /* 28 -> 38px */
  --fs-h2: clamp(1.375rem, 1.05rem + 1.3vw, 2rem);      /* 22 -> 32px */
  --fs-h3: 1.125rem;                                    /* 18px       */
  --fs-lead: 1rem;
  --fs-b: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.8rem;

  /* ---- SPACE ------------------------------------------------------------ */
  --s1: 0.25rem;  --s2: 0.5rem;   --s3: 0.75rem;  --s4: 1rem;
  --s5: 1.5rem;   --s6: 2rem;     --s7: 3rem;     --s8: 4rem;
  --s9: 5.5rem;

  --wrap: 1140px;
  --r: 5px;                /* corner radius */
  --r-lg: 5px;
  --head-h: 74px;

  /* Flat design: cards are separated by a hairline border, not a shadow. */
  --sh-1: none;
  --sh-2: 0 2px 10px rgba(13, 4, 4, 0.08);
}

/* ==========================================================================
   03  RESET
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* The header is sticky, so an anchor jump would land with the target tucked
   underneath it. This pushes every jump down by the header's height. */
:target, [id] { scroll-margin-top: calc(var(--head-h) + 14px); }
body {
  margin: 0;
  font-family: var(--ff-b);
  font-size: var(--fs-b);
  line-height: 1.7;
  color: var(--body);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--green-l); }
button, input, select, textarea { font: inherit; color: inherit; }
table { border-collapse: collapse; width: 100%; }
h1, h2, h3, h4, h5, h6 { margin: 0; }
p, ul, ol, dl, figure { margin: 0; }
ul, ol { padding-left: 1.15em; }

:focus-visible {
  outline: 3px solid var(--blue-d);
  outline-offset: 2px;
  border-radius: 3px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--blue-d); color: var(--white);
  padding: var(--s3) var(--s5); border-radius: 0 0 var(--r) 0;
  text-decoration: none; font-weight: 600;
}
.skip:focus { left: 0; }

/* Screen-reader only, but still read aloud and still indexed. */
.vh {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ==========================================================================
   04  TYPE
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ff-h);
  color: var(--ink);
  line-height: 1.2;
  font-weight: 700;
}
h1 { font-size: var(--fs-h1); letter-spacing: -0.02em; }
h2 { font-size: var(--fs-h2); letter-spacing: -0.01em; }
h3 { font-size: var(--fs-h3); }

/* Centred section title. Plain, no underline rule — the sections are told
   apart by their background tint, not by decoration. */
.sec-h { text-align: center; margin-bottom: var(--s6); }
.sec-h h2 { position: relative; }
.sec-h p {
  max-width: 62ch; margin: var(--s4) auto 0;
  font-size: var(--fs-lead); color: var(--body);
}
/* Left-aligned variant, for the long prose blocks. */
.sec-h--l { text-align: left; }
.sec-h--l p { margin-left: 0; }

.lead { font-size: var(--fs-lead); }
.eyebrow {
  display: inline-block;
  font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--amber-t); margin-bottom: var(--s3);
}

/* ==========================================================================
   05  LAYOUT
   ========================================================================== */
.wrap {
  width: 100%; max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--s5);
}
/* Section rhythm. The reference site is compact — 40 to 50px above and below
   each band rather than the 80px a modern layout would use — and that
   tightness is a large part of why it looks the way it does. Raise these two
   numbers if the page ever feels cramped; nothing else depends on them. */
.sec { padding-block: 50px; }
.sec--tight { padding-block: 40px; }
.sec--grey { background: var(--bg-2); }
.sec--grey-2 { background: var(--bg-3); }

/* The pale blue band. Two sections on the home page sit on it. Text stays
   dark — this is a tint, not a dark band. */
.sec--green { background: var(--tint); }

/* Generic column grids. minmax(0, 1fr) not 1fr on purpose: a bare 1fr means
   minmax(AUTO, 1fr), and an auto minimum is min-content — so one long word
   can push a track wider than its share and overflow the row. */
.g { display: grid; gap: var(--s5); }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
/* The five square problem pictures. Five across, like the reference. */
.tiles { display: grid; gap: var(--s5); grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* Text beside an image. */
.split {
  display: grid; gap: var(--s6);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
}
.split--narrow { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }

.mt-3 { margin-top: var(--s3); }
.mt-4 { margin-top: var(--s4); }
.mt-5 { margin-top: var(--s5); }
.mt-6 { margin-top: var(--s6); }
.center { text-align: center; }

/* Generic white box. Used for the contact details, the legal pages and
   anywhere a block of text needs lifting off the page background. */
.panel {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s6);
}
.panel--amber { border-top: 5px solid var(--blue); }


/* ==========================================================================
   06  BUTTONS
   ==========================================================================
   min-height 46px on every button: WCAG 2.5.8 asks for 44px minimum so a
   thumb can hit it. Do not reduce this to make a row fit — wrap instead. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s2);
  min-height: 46px;
  padding: var(--s3) var(--s6);
  font-family: var(--ff-b);
  font-size: var(--fs-b); font-weight: 600;
  text-decoration: none; text-align: center;
  border: 2px solid transparent; border-radius: var(--r);
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease,
              color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.btn:active { transform: translateY(1px); }

/* Blue = the thing we want pressed. */
.btn--a { background: var(--blue); color: var(--white); }
.btn--a:hover { background: var(--blue-d); color: var(--white); }

.btn--g { background: var(--blue-d); color: var(--white); }
.btn--g:hover { background: var(--blue); }

.btn--o { background: transparent; color: var(--blue-t); border-color: var(--blue); }
.btn--o:hover { background: var(--blue); color: var(--white); border-color: var(--blue); }

/* On the dark photographic hero and in the footer the outline button needs
   white, not blue — otherwise it is blue on a dark image and hard to read. */
.hero .btn--o, .footer .btn--o { color: var(--white); border-color: rgba(255,255,255,0.55); }
.hero .btn--o:hover, .footer .btn--o:hover { background: var(--white); color: var(--blue-t); border-color: var(--white); }

.btn--lg { min-height: 54px; padding: var(--s4) var(--s7); font-size: 1.06rem; }
.btn--full { width: 100%; }
.btn__i { width: 18px; height: 18px; flex: none; }

/* ==========================================================================
   07  HEADER + NAV
   ========================================================================== */
.header {
  position: sticky; top: 0; z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}
.header.is-stuck { box-shadow: var(--sh-1); }
.header__in {
  display: flex; align-items: center; gap: var(--s5);
  min-height: var(--head-h);
}

.logo { display: inline-flex; align-items: center; gap: var(--s3); text-decoration: none; }
.logo__mark { width: 40px; height: 40px; flex: none; color: var(--blue); }
.logo__txt {
  font-family: var(--ff-h); font-weight: 700;
  font-size: 1.32rem; line-height: 1; color: var(--blue-d);
  letter-spacing: -0.01em;
}
.logo__txt span { color: var(--orange-d); }
.logo__sub {
  display: block;
  font-family: var(--ff-b); font-size: 0.6rem; font-weight: 600;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--muted); margin-top: 3px;
}

.nav { display: flex; align-items: center; gap: var(--s1); margin-left: auto; }
.nav > a, .nav__top {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 44px; padding: var(--s2) var(--s3);
  font-size: var(--fs-sm); font-weight: 600;
  color: var(--ink); text-decoration: none;
  background: none; border: 0; border-radius: var(--r);
  cursor: pointer; white-space: nowrap;
}
.nav > a:hover, .nav__top:hover { color: var(--blue-t); background: var(--bg-2); }
.nav > a[aria-current="page"] { color: var(--blue-t); box-shadow: inset 0 -3px 0 var(--blue); }

/* Dropdown. "Our Services" is a real link to services.html, not a button, so
   that it is followed by Google and works with JavaScript off. The menu opens
   on hover for mice and on :focus-within for keyboards — tabbing into any item
   holds it open. Phones never see this: the hamburger drawer lists the same
   sub-pages as ordinary links. */
.nav__grp { position: relative; }
.nav__menu {
  position: absolute; top: 100%; left: 0; z-index: 10;
  min-width: 250px; padding: var(--s2);
  background: var(--white);
  border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--sh-2);
  list-style: none; margin: 0;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
}
.nav__grp:hover .nav__menu,
.nav__grp:focus-within .nav__menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav__menu a {
  display: block; padding: var(--s3) var(--s4);
  font-size: var(--fs-sm); font-weight: 500;
  color: var(--body); text-decoration: none; border-radius: 6px;
}
.nav__menu a:hover { background: var(--tint); color: var(--blue-t); }
.nav__top svg { width: 11px; height: 11px; transition: transform 200ms ease; }
.nav__grp:hover .nav__top svg,
.nav__grp:focus-within .nav__top svg { transform: rotate(180deg); }

/* Header call button + hamburger */
.header__tel {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: var(--s2) var(--s4); min-height: 44px;
  font-weight: 700; font-size: var(--fs-sm);
  color: var(--blue-t); text-decoration: none;
  border: 2px solid var(--line); border-radius: var(--r);
  white-space: nowrap;
}
.header__tel:hover { border-color: var(--blue); background: var(--bg-2); }
.header__tel svg { width: 15px; height: 15px; color: var(--blue); }

.burger {
  display: none;
  width: 46px; height: 46px; flex: none;
  padding: 0; background: none;
  border: 2px solid var(--line); border-radius: var(--r);
  cursor: pointer;
}
.burger span {
  display: block; width: 20px; height: 2px; margin: 4px auto;
  background: var(--blue-d); border-radius: 2px;
  transition: transform 220ms ease, opacity 180ms ease;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile drawer. Closed = max-height 0, so it animates open and, crucially,
   is not reachable by keyboard while closed (visibility: hidden does that). */
.mobile-nav {
  display: none;
  max-height: 0; overflow: hidden; visibility: hidden;
  background: var(--white); border-top: 1px solid var(--line);
  transition: max-height 300ms ease, visibility 300ms;
}
.mobile-nav.is-open { max-height: 80vh; overflow-y: auto; visibility: visible; }
.mobile-nav a {
  display: block; padding: var(--s4) var(--s5);
  font-weight: 600; color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.mobile-nav a:hover { background: var(--bg-2); color: var(--blue-t); }
.mobile-nav a.is-sub { padding-left: var(--s7); font-weight: 500; font-size: var(--fs-sm); color: var(--body); }

/* ==========================================================================
   08  HERO
   ==========================================================================
   A wide photograph with a near-black wash over it so white text stays
   readable whatever the photo. To change the picture, overwrite
   assets/img/hero-bg.webp — 1920x1080 — and nothing here needs editing.
   The wash strength is the `opacity` on .hero::before: raise it towards 1
   for a darker, more contrasty hero, lower it towards 0 to show more photo. */
.hero {
  position: relative;
  padding-block: 9em;
  background: #0D0404 url("../img/hero-bg.webp") center center / cover no-repeat;
  color: var(--white);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background: #0D0404; opacity: 0.45;
  pointer-events: none;
}
.hero > .wrap { position: relative; z-index: 1; }

/* Home page: heading and button on the left, booking form on the right. */
.hero__grid {
  display: grid; gap: var(--s7);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
}
.hero h1 { color: var(--white); }
.hero p {
  margin-top: var(--s5);
  font-size: var(--fs-lead); color: rgba(255, 255, 255, 0.92);
}
.hero__cta {
  display: flex; flex-wrap: wrap; gap: var(--s4);
  margin-top: var(--s6);
}
/* Three small trust lines under the buttons. */
.hero__trust {
  display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6);
  margin-top: var(--s6);
  list-style: none; padding: 0;
  font-size: var(--fs-sm); font-weight: 600;
}
.hero__trust li { display: inline-flex; align-items: center; gap: var(--s2); }
.hero__trust svg { width: 17px; height: 17px; color: var(--orange); flex: none; }

/* Shorter, photo-free version used at the top of the nine inner pages. */
.hero--sub {
  padding-block: var(--s8);
  background: var(--blue-d);
  text-align: center;
}
.hero--sub::before { display: none; }
.hero--sub h1 { max-width: 26ch; margin-inline: auto; }
.hero--sub p { max-width: 60ch; margin-inline: auto; }
.hero--sub .hero__cta, .hero--sub .hero__trust { justify-content: center; }
.hero .eyebrow { color: var(--amber-l); }
.hero .eyebrow a { color: inherit; text-decoration: none; }
.hero .eyebrow a:hover { text-decoration: underline; }

/* ==========================================================================
   09  QUOTE FORM
   ========================================================================== */
.quote {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 5px solid var(--blue);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
  padding: 25px;
  max-width: 560px; margin-inline: auto;
}
.quote--wide { max-width: none; margin: 0; }
/* The form heading inside the card is smaller than a section heading. */
.quote h2 { font-size: 1.5rem; margin-bottom: var(--s5); }
.field { margin-bottom: var(--s4); }
.field__l {
  display: block; margin-bottom: var(--s2);
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink);
}
.req { color: var(--amber-t); }
.input, .select, .textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--s3) var(--s4);
  background: var(--white);
  color: var(--ink);
  border: 2px solid var(--line);
  border-radius: var(--r);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.textarea { min-height: 110px; resize: vertical; }
.input:focus, .select:focus, .textarea:focus {
  outline: 0;
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.16);
}
.select {
  appearance: none;
  /* Chevron drawn as an inline SVG so there is no extra request. Left as a
     data URI on purpose — do not "tidy" it into a separate file. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23737373' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s4) center;
  padding-right: var(--s7);
}
.field__error { display: none; margin-top: var(--s2); font-size: var(--fs-sm); color: #B3261E; font-weight: 600; }
/* site.js marks a bad field with aria-invalid="true" — the attribute IS the
   state, so the styling hangs off it rather than off an extra class. */
.field .input[aria-invalid="true"],
.field .select[aria-invalid="true"],
.field .textarea[aria-invalid="true"] { border-color: #B3261E; }
.field .input[aria-invalid="true"]:focus-visible,
.field .select[aria-invalid="true"]:focus-visible,
.field .textarea[aria-invalid="true"]:focus-visible { outline-color: #B3261E; }
.field__error.is-shown { display: block; }
.form__note { margin-top: var(--s4); font-size: var(--fs-xs); color: var(--muted); text-align: center; }
/* Honeypot. Off-screen, never seen by a human, filled by bots. */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form__ok {
  display: none;
  padding: var(--s5); margin-bottom: var(--s5);
  background: var(--amber-w); border-left: 4px solid var(--amber);
  border-radius: var(--r); color: var(--ink); font-weight: 600;
}
.form__ok.is-on { display: block; }

/* ==========================================================================
   10  CARD GRIDS
   ==========================================================================
   Photo-above-label cards (machine models, cross-sell). The frame is locked
   to 4:3 with object-fit: cover, so a client's 4032x3024 phone photo and a
   1200x900 stock shot occupy exactly the same box. Without that, one stray
   image changes the height of a whole row. */
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.card--link { text-decoration: none; color: inherit; }
.card--link:hover, .card--link:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--sh-2);
  border-color: var(--blue);
}
/* Square photo frame, matching the 1000x1000 pictures in assets/img. */
.card__img {
  aspect-ratio: 1 / 1;
  background: var(--bg-3);
  overflow: hidden;
}
.card__img img { width: 100%; height: 100%; object-fit: cover; }
.card--link:hover .card__img img { transform: scale(1.04); }
.card__img img { transition: transform 400ms ease; }
.card__b { padding: var(--s5); flex: 1; display: flex; flex-direction: column; gap: var(--s2); }
.card__b h3 { color: var(--ink); }
.card__b p { font-size: var(--fs-sm); }
.card__price {
  margin-top: auto; padding-top: var(--s3);
  font-family: var(--ff-h); font-weight: 700;
  font-size: 1.1rem; color: var(--amber-t);
}
.card__more {
  display: inline-flex; align-items: center; gap: var(--s2);
  margin-top: auto; padding-top: var(--s3);
  font-size: var(--fs-sm); font-weight: 700; color: var(--blue-t);
}
.card__more::after { content: "\2192"; transition: transform 200ms ease; }
.card--link:hover .card__more::after { transform: translateX(4px); }

/* ==========================================================================
   11  COPY BLOCK  (long paragraph + wide photo)
   ========================================================================== */
.shot {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-3);
  box-shadow: var(--sh-1);
}
.shot img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.shot--wide img { aspect-ratio: 16 / 9; }
.shot figcaption {
  padding: var(--s3) var(--s4);
  font-size: var(--fs-xs); color: var(--muted);
  background: var(--white); border-top: 1px solid var(--line);
}

/* ==========================================================================
   12  FEATURE / ISSUE ICON GRIDS
   ========================================================================== */
.feat {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s5);
  text-align: center;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.feat:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: var(--blue); }
/* Orange disc with a dark glyph. The disc is the accent; keeping the glyph
   dark is what makes it readable at small sizes. */
.feat__i {
  width: 62px; height: 62px; margin: 0 auto var(--s4);
  display: grid; place-items: center;
  background: var(--orange);
  border-radius: 50%;
  color: #3D2600;
  transition: background-color 220ms ease, color 220ms ease;
}
.feat:hover .feat__i { background: var(--blue-d); color: var(--white); }
.feat__i svg { width: 30px; height: 30px; }
/* The illustrated icons are pictures rather than inline SVG, so they need a
   size of their own. The circle is 62px, so 40px leaves an even margin. */
.feat__i img { width: 40px; height: 40px; object-fit: contain; mix-blend-mode: multiply; }
/* An icon tile that is itself a link (the "Common issues" row). */
a.feat { display: block; text-decoration: none; color: inherit; }
a.feat h3 { color: var(--ink); }
a.feat:hover h3 { color: var(--blue-t); }
.feat h3 { margin-bottom: var(--s2); }
.feat p { font-size: var(--fs-sm); }

/* A picture tile with a caption under it — the "Common issues" row. The photo
   is square (300x300) and fills the frame. */
.tile { text-align: center; text-decoration: none; color: inherit; display: block; }
.tile__f {
  aspect-ratio: 1 / 1; overflow: hidden;
  background: var(--bg-3);
  border: 1px solid var(--line); border-radius: var(--r-lg);
}
.tile__f img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; }
.tile:hover .tile__f img { transform: scale(1.05); }
.tile:hover .tile__f { border-color: var(--blue); }
.tile span {
  display: block; margin-top: var(--s3);
  font-size: var(--fs-b); font-weight: 600; color: var(--ink);
}
.tile:hover span { color: var(--blue-t); }

/* ==========================================================================
   13  STAT BAND
   ========================================================================== */
.stat { text-align: center; }
.stat__v {
  display: block;
  font-family: var(--ff-h); font-weight: 700;
  font-size: clamp(2.1rem, 1.3rem + 3vw, 3.4rem);
  line-height: 1; color: var(--blue-d);
  letter-spacing: -0.02em;
}
.stat__l {
  display: block;
  margin-top: var(--s3);
  font-size: var(--fs-b); font-weight: 500;
  color: var(--body);
}
/* Three across on desktop, dividers drawn only between (not before the first).
   The markup is <div class="stats"><div class="stat"> — if you change either
   class name, change it in both places here. */
.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s5);
  list-style: none; padding: 0;
}
.stats > .stat + .stat { border-left: 1px solid var(--line); }

/* ==========================================================================
   14  STEPS  (how it works)
   ========================================================================== */
.step {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s6) var(--s5) var(--s5);
  text-align: center;
}
/* The big number sits half outside the card top. */
.step__n {
  position: absolute; top: calc(var(--s5) * -1); left: 50%;
  transform: translateX(-50%);
  width: 52px; height: 52px;
  display: grid; place-items: center;
  background: var(--blue-d); color: var(--white);
  font-family: var(--ff-h); font-weight: 700; font-size: 1.24rem;
  border: 4px solid var(--white);
  border-radius: 50%;
  box-shadow: var(--sh-1);
}
.step h3 { margin: var(--s4) 0 var(--s2); }
.step p { font-size: var(--fs-sm); }
.steps { margin-top: var(--s6) !important; row-gap: var(--s8); }

/* ==========================================================================
   15  LONG-FORM PROSE
   ========================================================================== */
.prose { max-width: 74ch; }
.prose > * + * { margin-top: var(--s4); }
.prose h3 {
  margin-top: var(--s6);
  padding-left: var(--s4);
  border-left: 4px solid var(--orange);
  color: var(--ink);
}
.prose h3:first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.35em; }
.prose li + li { margin-top: var(--s2); }
.prose strong { color: var(--ink); }
.prose a { color: var(--blue-t); font-weight: 600; }

/* Price table */
.tbl-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
  -webkit-overflow-scrolling: touch;
}
/* The table scrolls sideways on a phone, so the wrapper is focusable: without
   tabindex a keyboard-only visitor cannot reach the price column. */
.tbl-wrap:focus-visible { outline: 3px solid var(--blue-d); outline-offset: 2px; }
.tbl { min-width: 30rem; font-size: var(--fs-sm); }
.tbl caption { padding: var(--s4); font-size: var(--fs-xs); color: var(--muted); text-align: left; }
.tbl th, .tbl td { padding: var(--s3) var(--s4); text-align: left; border-bottom: 1px solid var(--line); }
.tbl thead th {
  background: var(--blue-d); color: var(--white);
  font-family: var(--ff-b); font-weight: 700;
  font-size: var(--fs-xs); letter-spacing: 0.06em; text-transform: uppercase;
}
.tbl tbody tr:nth-child(even) { background: var(--bg-2); }
/* Last row: the first cell is a <th scope="row">, so both have to be named or
   a 1px stub is left hanging under the first column. */
.tbl tbody tr:last-child th,
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl td:last-child { font-weight: 700; color: var(--amber-t); white-space: nowrap; }

/* ==========================================================================
   16  FAQ ACCORDION
   ==========================================================================
   Built on native <details>/<summary>, so every answer is open-able and
   readable with JavaScript switched off and is indexed by Google. site.js
   only adds the open/close height animation on top. */
.acc { max-width: 860px; margin-inline: auto; }
.acc__item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  margin-bottom: var(--s3);
  overflow: hidden;
}
.acc__item[open] { border-color: var(--blue); box-shadow: var(--sh-1); }
.acc__item summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4);
  padding: var(--s4) var(--s5);
  min-height: 56px;
  font-family: var(--ff-h); font-weight: 700; font-size: 1.02rem;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.acc__item summary::-webkit-details-marker { display: none; }
.acc__item summary:hover { color: var(--blue-t); background: var(--bg-2); }
/* The +/- sign. Rotating one bar of a plus is cheaper than swapping icons. */
.acc__ico { position: relative; width: 20px; height: 20px; flex: none; }
.acc__ico::before, .acc__ico::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  background: var(--blue); border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform 250ms ease, opacity 250ms ease;
}
.acc__ico::before { width: 14px; height: 2.5px; }
.acc__ico::after  { width: 2.5px; height: 14px; }
.acc__item[open] .acc__ico::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.acc__panel { padding: 0 var(--s5) var(--s5); }
.acc__panel p + p { margin-top: var(--s3); }

/* ==========================================================================
   17  AREAS LINK LIST
   ========================================================================== */
.areas {
  list-style: none; padding: 0;
  display: grid; gap: var(--s2);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.areas a {
  display: flex; align-items: center; gap: var(--s2);
  min-height: 44px; padding: var(--s2) var(--s3);
  font-size: var(--fs-sm); font-weight: 500;
  color: var(--body); text-decoration: none;
  border-radius: 6px;
}
.areas a::before {
  content: ""; flex: none;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--blue);
}
.areas a:hover { background: var(--white); color: var(--blue-t); font-weight: 600; box-shadow: var(--sh-2); }

/* Same chip grid, but for plain <li> text with no link inside it - used by the
   brand list. The bullet and the padding move onto the <li> itself. */
.areas--plain li {
  display: flex; align-items: center; gap: var(--s2);
  min-height: 44px; padding: var(--s2) var(--s3);
  font-size: var(--fs-sm); font-weight: 500;
  color: var(--body);
  border-radius: 6px; background: var(--white); box-shadow: var(--sh-1);
}
.areas--plain li::before {
  content: ""; flex: none;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--blue);
}
/* The brand list sits inside the long article, and the article's own list rules
   would indent it and push the rows apart, so switch those two off here. */
.prose .areas { padding-left: 0; }
.prose .areas li + li { margin-top: 0; }

/* ==========================================================================
   18  FOOTER
   ========================================================================== */
.footer { background: var(--green-d); color: rgba(255, 255, 255, 0.78); padding-top: var(--s8); }
.footer h2, .footer h3 { color: var(--white); }
.footer .logo__txt { color: var(--white); }
.footer .logo__mark { color: var(--white); }
.footer .logo__sub { color: rgba(255, 255, 255, 0.6); }
.footer__top {
  display: grid; gap: var(--s6);
  grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
  padding-bottom: var(--s7);
}
.footer__h {
  font-family: var(--ff-b); font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--amber-l); margin-bottom: var(--s4);
}
.footer__links { list-style: none; padding: 0; }
.footer__links li + li { margin-top: var(--s2); }
.footer__links a {
  color: rgba(255, 255, 255, 0.78); text-decoration: none;
  font-size: var(--fs-sm);
  display: inline-block; min-height: 30px;
}
.footer__links a:hover { color: var(--amber-l); }

.footer address { font-style: normal; font-size: var(--fs-sm); line-height: 1.75; }
.footer__row {
  display: flex; align-items: flex-start; gap: var(--s3);
  margin-top: var(--s4); font-size: var(--fs-sm);
}
.footer__row svg { width: 18px; height: 18px; flex: none; color: var(--amber-l); margin-top: 4px; }
/* The email address sits in one of these rows. Same tone as the link list so it
   does not jump out, and anywhere-wrapping so a long address cannot push the
   footer sideways on a narrow phone. */
.footer__row a {
  color: rgba(255, 255, 255, 0.78); text-decoration: none;
  padding-block: 3px; overflow-wrap: anywhere;
}
.footer__row a:hover { color: var(--amber-l); text-decoration: underline; }
.footer__bot {
  display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5);
  justify-content: space-between; align-items: center;
  padding-block: var(--s5);
  border-top: 1px solid var(--line-d);
  font-size: var(--fs-xs); color: rgba(255, 255, 255, 0.6);
}
.footer__bot p { margin: 0; }

/* ==========================================================================
   19  FLOATING BITS
   ========================================================================== */
.totop {
  position: fixed; right: 16px; bottom: 16px; z-index: 90;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  background: var(--blue-d); color: var(--white);
  border: 0; border-radius: 50%;
  box-shadow: var(--sh-2);
  cursor: pointer;
  opacity: 0; visibility: hidden;
  transform: translateY(10px);
  transition: opacity 220ms ease, transform 220ms ease, visibility 220ms, background-color 160ms;
}
.totop.is-on { opacity: 1; visibility: visible; transform: translateY(0); }
.totop:hover { background: var(--blue); color: var(--white); }
.totop svg { width: 20px; height: 20px; }

/* Mobile call bar. Shown below 768px by the media query at the end of this
   section; site.js slides it in with .is-visible once the hero has scrolled
   away, and measures its height into body's padding-bottom so it can never
   cover the footer. With JS off it simply sits there, which is also fine. */
.action-bar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  background: var(--white);
  border-top: 1px solid var(--line);
  box-shadow: 0 -3px 14px rgba(16, 35, 46, 0.1);
  padding-bottom: env(safe-area-inset-bottom);
  transition: transform 260ms cubic-bezier(.22,.61,.36,1);
}
.js .action-bar { transform: translateY(105%); }
.js .action-bar.is-visible { transform: none; }
.action-bar > a {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 56px;
  font-weight: 700; font-size: var(--fs-sm);
  text-decoration: none; color: var(--blue-t);
}
.action-bar > a + a { border-left: 1px solid var(--line); }
.action-bar > a.is-a { background: var(--blue); color: var(--white); }
.action-bar svg { width: 18px; height: 18px; }

/* Matches site.js initActionBar(), which pads the body below 48rem. */
@media (max-width: 767px) {
  .action-bar { display: flex; }
  /* 56px bar + its 1px top border + the iPhone home-bar inset. site.js
     measures the real height and overrides this; the calc() is what no-JS
     visitors get, and it must not be short or the bar covers the footer. */
  body { padding-bottom: calc(57px + env(safe-area-inset-bottom, 0px)); }
  .totop { bottom: 70px; right: 12px; }
}

/* ==========================================================================
   20  MOTION  (reveal-on-scroll)
   --------------------------------------------------------------------------
   assets/js/site.js adds .is-revealed to every [data-reveal] element as it
   enters the viewport. If JavaScript is off or fails the hidden state is
   never applied by JS at all — so the rule below is written to only hide
   things once JS has confirmed it is running, by adding .js to <html>.
   Result: no JS, no hidden content.
   ========================================================================== */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 620ms cubic-bezier(.22,.61,.36,1),
              transform 620ms cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.js [data-reveal].is-revealed { opacity: 1; transform: none; will-change: auto; }

/* Arriving on a direct link such as services.html#installation, the browser
   scrolls to where that card sits at that instant — and at that instant it is
   still pushed down by the 16px above. The card then settles upward, ending up
   16px higher than the gap under the sticky header was meant to be. So the one
   element being linked to skips the animation and starts in its final place. */
.js [data-reveal]:target { opacity: 1; transform: none; transition: none; }

/* ==========================================================================
   21  RESPONSIVE
   --------------------------------------------------------------------------
   Desktop-first only for the grid collapses; everything else is fluid.
   Breakpoints: 1080 (tablet landscape) · 900 (tablet) · 680 (phone) · 400.
   ========================================================================== */
@media (max-width: 1080px) {
  .g-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
  .footer__top { grid-template-columns: 1fr 1fr; }
  :root { --fs-h1: clamp(1.85rem, 4.4vw, 2.6rem); }
  /* Below this width the hero's two columns are too narrow to hold a form
     beside a heading, so the form drops underneath. */
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
  .hero { padding-block: 5em; }
}

@media (max-width: 900px) {
  /* The desktop nav is replaced by the burger + slide-down drawer. */
  .nav { display: none; }
  .mobile-nav { display: block; }
  .burger { display: inline-flex; align-items: center; justify-content: center; flex-direction: column; margin-left: auto; }
  .header__tel span { display: none; }
  .g-3, .g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .areas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sec { padding-block: var(--s7); }
}

@media (max-width: 680px) {
  /* Phones. This is the priority surface, so it gets the most attention:
     every grid becomes one column. The call bar is handled in §19. */
  .g, .g-2, .g-3, .g-4, .g-5, .steps, .areas { grid-template-columns: minmax(0, 1fr); }
  .stats { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
  /* Stacked, so the divider has to move from the side to the top. */
  .stats > .stat + .stat {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding-top: var(--s5);
  }
  .footer__top { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }

  /* The reference drops the hero to 5em top and bottom with 1em at the sides
     on a phone. Two tiles per row for the problem pictures, so the row does
     not become five full-width photos. */
  .hero { padding: 5em 0; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { width: 100%; }
  .hero__trust { gap: var(--s3) var(--s4); font-size: var(--fs-xs); }

  .quote { padding: var(--s5); }
  .sec { padding-block: var(--s6); }
  .sec-h { margin-bottom: var(--s5); }

  /* Wide tables scroll sideways instead of squashing. .tbl-wrap does the
     scrolling; this just stops the cells collapsing to nothing. */
  .tbl { min-width: 520px; }

  .prose h3 { font-size: 1.06rem; }
  .step { text-align: left; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--s4); }
  .step__n { margin: 0; }

  .footer__bot { flex-direction: column; align-items: flex-start; gap: var(--s2); }
}

@media (max-width: 400px) {
  .wrap { padding-inline: 14px; }
  .card__b, .quote { padding: var(--s4); }
  .logo__sub { display: none; }
}

/* ==========================================================================
   22  REDUCED MOTION  ·  PRINT
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  /* Honour the OS setting: nothing moves, but nothing is hidden either. */
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
}

@media print {
  .header, .mobile-nav, .burger, .action-bar, .totop, .quote, .footer__bot { display: none !important; }
  body { padding: 0; color: #000; background: #fff; font-size: 11pt; }
  .sec { padding-block: 12pt; }
  .wrap { max-width: none; padding: 0; }
  a { color: #000; text-decoration: underline; }
  /* Printed pages lose hyperlinks, so write the address out in full. */
  .prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
  .acc__panel { display: block !important; height: auto !important; }
  .card, .panel, .feat { break-inside: avoid; border: 1px solid #999; }
  img { max-width: 320px; }
}