/* ------------------------------------------------------------------
   Samsung Service Center — stylesheet

   TWO COLOURS. Everything on this page is #2d8cff or #232333 at some
   lightness. No third hue is introduced anywhere.

     #2d8cff  primary       accents, icons, borders, focus rings
       at 96% lightness     --tint-1   section fill
       at 92% lightness     --tint-2   panels inside a tinted section
       pulled to 4.8:1      --primary-ink   buttons and links
       pulled dark          --primary-deep  hero and call bands

     #232333  secondary     headings, dark sections, footer
       at 97% lightness     --tint-grey  section fill

     #56566b  body text        #ffffff  page background

   Sections alternate between white, a 4% blue tint, a 3% neutral tint
   and full dark. That rotation is what separates them — a long page of
   white blocks divided by hairlines reads as one continuous sheet no
   matter how good the cards on it are.

   Why the primary is split. #2d8cff on white measures 3.3:1, under the
   4.5:1 WCAG AA asks of normal text, so white button labels and inline
   links set in it are hard to read outdoors. --primary-ink is the same
   hue pulled down to 4.8:1. Side by side they read as one colour.
   ------------------------------------------------------------------ */

:root {
  --primary:      #2d8cff;
  --primary-ink:  #1a6fe0;   /* same hue, AA contrast on white */
  --primary-dark: #1259bd;   /* button hover */
  --primary-deep: #143f8f;   /* hero and call bands */
  --primary-deeper: #0d2b63; /* far end of those gradients */
  --primary-tint: #eef5ff;
  --primary-line: #cfe2ff;

  /* Section fills. Both are the theme colours at very high lightness. */
  --tint-1:    #f4f8ff;      /* #2d8cff at 96% */
  --tint-2:    #e9f1ff;      /* #2d8cff at 92% */
  --tint-grey: #f7f7f9;      /* #232333 at 97% */

  /* From the logo. Used only inside the logo lockup — it is brand
     artwork, not a third colour for the interface to spend. */
  --logo-blue:   #1b4fa8;
  --logo-orange: #f4771f;

  --secondary:      #232333;
  --secondary-soft: #32324a;
  --secondary-deep: #1a1a26;

  --text:   #56566b;   /* darkened from #747487 — 7.4:1 on white */
  --muted:  #7c7c90;   /* labels and captions, darkened to match */
  --line:   #e7e7ee;
  --bg:     #ffffff;

  --wrap: 1200px;
  --r: 7px;   /* one radius, everywhere: buttons, cards, inputs, tiles */
  --shadow-xs: 0 1px 2px rgba(35,35,51,.05), 0 2px 8px rgba(35,35,51,.045);
  --shadow-sm: 0 2px 6px rgba(35,35,51,.06), 0 10px 24px rgba(35,35,51,.07);
  --shadow-md: 0 6px 16px rgba(35,35,51,.08), 0 18px 40px rgba(35,35,51,.10);
  --shadow-lg: 0 8px 20px rgba(35,35,51,.07), 0 24px 56px rgba(35,35,51,.11);
  --ring: 0 0 0 3px rgba(45,140,255,.22);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: Poppins, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { color: var(--secondary); line-height: 1.3; margin: 0 0 .6em; font-weight: 600; }
h1 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); font-weight: 700; line-height: 1.2; }
h2 { font-size: clamp(1.45rem, 2.6vw, 2.05rem); font-weight: 600; }
h3 { font-size: 1.08rem; font-weight: 600; }

p { margin: 0 0 1.1em; }
a { color: var(--primary-ink); }
strong { color: var(--secondary); font-weight: 600; }
img, svg { max-width: 100%; }
ul { margin: 0; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 22px; }
.center { text-align: center; }
.small { font-size: .87rem; }
/* One drawing weight across the site. 1.6 is the width every icon set
   ships at and it reads as generic; 1.5 on larger glyphs and 2.4 on the
   small ticks gives them a deliberate hierarchy instead. */
.ico { flex: none; stroke-width: 1.5; }
.mt { margin-top: 1.5em; }

.skip { position: absolute; left: -9999px; background: var(--primary-ink); color: #fff; padding: 10px 16px; z-index: 200; }
.skip:focus { left: 12px; top: 12px; }

:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* --- Buttons ------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--primary-ink); color: #fff;
  border: 1px solid var(--primary-ink);
  padding: 10px 20px; border-radius: var(--r);
  font-family: inherit; font-weight: 500; font-size: .86rem; line-height: 1.4;
  text-decoration: none; cursor: pointer;
  transition: background .16s, border-color .16s, color .16s;
}
.btn:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.btn-sm { padding: 8px 16px; font-size: .82rem; }

.btn-dark { background: var(--secondary); border-color: var(--secondary); }
.btn-dark:hover { background: var(--secondary-soft); border-color: var(--secondary-soft); }

.btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.btn-outline:hover { background: rgba(255,255,255,.12); border-color: #fff; }

/* On a filled blue band the white button carries the blue as its label. */
.btn-white { background: #fff; color: var(--primary-ink); border-color: #fff; }
.btn-white:hover { background: var(--primary-tint); border-color: var(--primary-tint); color: var(--primary-dark); }

/* --- Top bar ------------------------------------------------------- */

.topbar { background: var(--secondary); color: #a9a9bb; font-size: .82rem; }
.topbar-inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 40px; }
.topbar a { color: #d6d6e0; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.topbar a:hover { color: #fff; }
.topbar .ico { color: var(--primary); }

/* --- Header -------------------------------------------------------- */

.site-head { position: sticky; top: 0; z-index: 100; background: #fff; border-bottom: 1px solid var(--line); }
.head-inner { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 72px; }

.brand { display: inline-flex; align-items: center; text-decoration: none; }

/* Uploaded artwork wins. Height is capped so a large export cannot push
   the header open. */
.logo-img { height: 48px; width: auto; display: block; }

/* Drawn fallback, used until assets/img/logo.png is in place. */
.logo-lockup { display: inline-flex; align-items: center; gap: 13px; }
.logo-mark { flex: none; display: block; }
.logo-words { display: flex; flex-direction: column; gap: 3px; line-height: 1; }
.logo-brand {
  font-size: 1.28rem; font-weight: 700; letter-spacing: -.01em;
  color: var(--logo-blue); line-height: 1;
}
.logo-line { display: flex; align-items: center; gap: 7px; }
.logo-sub {
  font-size: .62rem; font-weight: 500; letter-spacing: .19em;
  color: var(--secondary); white-space: nowrap;
}
.logo-badge {
  font-size: .58rem; font-weight: 600; letter-spacing: .1em; color: #fff;
  background: var(--logo-orange); border-radius: var(--r); padding: 3px 6px 2px; line-height: 1;
}
.logo-lockup.is-dark .logo-brand { color: #6ea8ff; }
.logo-lockup.is-dark .logo-sub { color: #d3d3de; }

.nav { display: flex; align-items: center; gap: 26px; }
.nav a { color: var(--secondary); text-decoration: none; font-weight: 500; font-size: .88rem; }
.nav a.btn { color: #fff; }

/* No colour change and no border on hover, anywhere in the menu. The
   focus ring stays — that is for keyboard users and is not a hover
   state; without it a menu cannot be operated without a mouse. */

/* --- Services dropdown ---------------------------------------------- */

.nav-item { position: relative; display: inline-flex; align-items: center; gap: 4px; }

.sub-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; padding: 0;
  background: none; border: 0; cursor: pointer;
  color: var(--secondary);
}
.sub-toggle svg { transition: transform .18s; }
.has-sub.is-open > .sub-toggle svg { transform: rotate(180deg); }

.sub {
  position: absolute; top: 100%; left: -14px;
  min-width: 268px; z-index: 120;
  list-style: none; margin: 0; padding: 8px 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .16s, transform .16s, visibility .16s;
}
/* Opens on hover for a mouse and on focus for a keyboard. focus-within
   is what lets someone tab through the seven links without the panel
   closing under them. */
.nav-item.has-sub:hover > .sub,
.nav-item.has-sub:focus-within > .sub,
.nav-item.has-sub.is-open > .sub {
  opacity: 1; visibility: visible; transform: translateY(0);
}
/* A gap between the trigger and the panel would close the menu as the
   pointer crosses it. This bridges it without being visible. */
.nav-item.has-sub::after {
  content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 12px;
}

.sub li { margin: 0; }
.sub a {
  display: block; padding: 9px 18px;
  font-size: .85rem; font-weight: 400; line-height: 1.5;
  color: var(--secondary); text-decoration: none;
}

.nav-toggle { display: none; width: 42px; height: 38px; background: none; border: 1px solid var(--line); border-radius: var(--r); cursor: pointer; padding: 10px 9px; }
.nav-toggle span { display: block; height: 2px; background: var(--secondary); border-radius: var(--r); }
.nav-toggle span + span { margin-top: 5px; }

/* --- Hero ---------------------------------------------------------- */

.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(118deg, var(--secondary) 0%, #1d2b52 46%, var(--primary-deep) 100%);
  color: #c2cee4;
  padding: 62px 0 0;
}
/* A faint dot field over the gradient, for when there is no photograph.
   Flat colour across a block this large looks unfinished. */
.hero::after {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
}

/* --- Hero with a photograph ----------------------------------------
   inc/media.php sets background-image only when the file exists, so
   these rules simply do not apply until it does.

   The overlay is a left-to-right gradient rather than a flat wash: it
   stays opaque enough under the copy to keep the text at full contrast,
   then thins across the right so the technician and the appliances are
   actually visible. A photo darkened evenly is a photo nobody sees. */
.hero[style*="background-image"] {
  background-size: cover;
  background-position: 72% center;
  background-repeat: no-repeat;
}
.hero[style*="background-image"]::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgba(26,26,38,.95) 0%,
    rgba(26,26,38,.90) 34%,
    rgba(26,26,38,.62) 55%,
    rgba(26,26,38,.28) 78%,
    rgba(26,26,38,.18) 100%);
  width: auto; height: auto; border-radius: 0;
  pointer-events: none;
}
.hero[style*="background-image"]::after { opacity: .5; }
/* One soft primary glow, off the right edge. It gives the flat dark
   panel some depth without needing a photograph. */
.hero::before {
  content: ""; position: absolute; right: -220px; top: -180px;
  width: 680px; height: 680px; border-radius: var(--r);
  background: radial-gradient(circle, rgba(45,140,255,.42) 0%, rgba(45,140,255,0) 70%);
  pointer-events: none;
}
.hero .wrap { position: relative; z-index: 3; }

/* One column now. The ticks that used to sit on the right repeated the
   two paragraphs almost word for word, and with a photograph behind the
   hero that side belongs to the picture. */
.hero-grid { max-width: 640px; }
.hero h1 { color: #fff; margin-bottom: .5em; }
.hero p { font-size: .96rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }

.rating { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; font-size: .84rem; color: #9a9ab0; }
.rating .stars { display: inline-flex; gap: 2px; color: #f5b301; }

.hero-checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.hero-checks li { display: flex; gap: 12px; align-items: flex-start; font-size: .91rem; color: #e2e2ea; line-height: 1.6; }
.hero-checks .ico {
  width: 17px; height: 17px; margin-top: 4px;
  color: var(--primary);
  stroke-width: 2.4;
}

/* --- Enquiry bar --------------------------------------------------- */

.enquiry-bar { position: relative; z-index: 2; margin-top: 44px; }
.enquiry-bar form {
  background: #fff; border-radius: var(--r) var(--r) 0 0;
  box-shadow: var(--shadow-lg);
  padding: 18px; display: grid; gap: 10px;
  grid-template-columns: repeat(5, 1fr) auto;
}
.enquiry-bar input, .enquiry-bar select {
  width: 100%; font: inherit; font-size: .85rem;
  padding: 10px 13px; border: 1px solid var(--line); border-radius: var(--r);
  background: #fff; color: var(--secondary);
}
.enquiry-bar input::placeholder { color: var(--muted); }
.enquiry-bar input:focus, .enquiry-bar select:focus {
  outline: none; border-color: var(--primary); box-shadow: var(--ring);
}
.enquiry-bar .form-status { grid-column: 1 / -1; margin: 0; }

/* --- Sections ------------------------------------------------------ */

.section { padding: 64px 0; background: #fff; }

/* The rotation. Each fill is one of the two theme colours at a very high
   lightness, so the page gains structure without gaining a palette. */
.section-tint  { background: var(--tint-1); }
.section-grey  { background: var(--tint-grey); }
.section-dark  { background: var(--secondary); color: #b8b8c8; }
.section-dark h1, .section-dark h2, .section-dark h3 { color: #fff; }

/* Cards on the dark ground. Without these they keep their white fill and
   a white heading lands on white — which is exactly what happened when
   the selector below lost its tail in an earlier edit. */
.section-dark .card,
.section-dark .callout {
  background: #2c2c3f;
  border-color: #3c3c52;
  border-top-color: var(--primary);
  box-shadow: none;
}
.section-dark .callout p,
.section-dark .card p { color: #c4c4d2; }
.section-dark strong { color: #fff; }

/* Every other dark ground on the site. The default strong is near-black
   for white pages; landing on the banner or the call band it disappears
   into the background, which is exactly what emboldening a phrase is
   supposed to prevent. */
.hero strong,
.page-hero strong,
.cta-band strong { color: #fff; }
.section-dark .phone-big { color: #6fb0ff; }

/* The accent under each heading. With the eyebrow gone this is the only
   thing marking where a section starts, so it sits above the heading as
   well as below — a rule the eye meets before the words. */
.section-head h1::after,
.section-head h2::after {
  content: ""; display: block;
  width: 56px; height: 3px; border-radius: var(--r);
  background: var(--primary);
  margin-top: 22px;
}
.section-dark .section-head h2::after,
.section-dark h2::after { background: var(--primary); }
.section-head.center h2::after,
.section-head.center h1::after { margin-left: auto; margin-right: auto; }
.reasons-intro h2::after {
  content: ""; display: block; width: 52px; height: 3px; border-radius: var(--r);
  background: var(--primary); margin-top: 20px;
}

.lead { max-width: 880px; margin: 0 auto; text-align: center; }
.lead p { font-size: .96rem; }

/* --- Stats --------------------------------------------------------- */

/* --- Service cards -------------------------------------------------
   Picture on top, then the title, the copy, and a call button running
   the full width of the card. Flex rather than grid so the last row
   centres itself — seven cards into rows of three would otherwise leave
   the seventh stranded at the left edge.

   Three across, not four. The copy on these cards runs to four or five
   sentences; at a quarter of the container that becomes a very tall,
   very narrow column of text.
   ------------------------------------------------------------------ */

.svc-grid { display: flex; flex-wrap: wrap; gap: 22px; justify-content: center; }

.svc-card {
  display: flex; flex-direction: column;
  flex: 1 1 320px; max-width: 380px;
  background: var(--tint-1);
  border: 1px solid var(--primary-line);
  border-radius: var(--r);
  overflow: hidden;
  transition: box-shadow .22s, transform .22s, border-color .22s;
}
.svc-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); border-color: var(--primary); }

.svc-media { margin: 12px 12px 0; border-radius: var(--r); overflow: hidden; background: #fff; }
.svc-media img,
.svc-media .media-placeholder {
  display: block; width: 100%; aspect-ratio: 16 / 10;
  object-fit: cover; border-radius: var(--r);
}
/* The drawn stand-in, used per service until a photo is uploaded. */
/* Plain panel, no glyph — the photograph is what goes here. */
.svc-media .media-placeholder { border: 1px solid var(--primary-line); }

.svc-body {
  display: flex; flex-direction: column; flex: 1;
  padding: 20px 22px 22px; text-align: center;
}
.svc-body h3 { margin-bottom: .55em; font-size: 1.05rem; }
.svc-body h3 a { color: var(--secondary); text-decoration: none; }
.svc-body h3 a:hover { color: var(--primary-ink); }
/* The copy grows to fill, which keeps every button on the same baseline
   however long a description happens to be. */
/* Smaller and tighter than body copy elsewhere. Seven cards of five
   sentences each at full size turned this into the longest section on
   the page by a distance. */
.svc-body p { font-size: .8rem; line-height: 1.68; margin-bottom: 1.25em; flex: 1; }

.btn-block { width: 100%; padding: 11px 18px; }

/* --- Call bands ----------------------------------------------------
   The main one runs the copy on a dark panel with a photograph filling
   the right edge, and the phone number set larger than anything else in
   it. On a page whose whole purpose is a phone call, the number is the
   message.

   The closing band before the footer stays centred on the deep primary,
   so the page does not show the same picture layout twice.
   ------------------------------------------------------------------ */

.cta-band { background: var(--secondary); color: #b8b8c8; overflow: hidden; }

.cta-band-inner { display: grid; grid-template-columns: 1.75fr 1fr; align-items: stretch; }

.cta-copy { display: flex; align-items: center; padding: 54px 0; }
/* Lines the copy up with the site container's left edge even though this
   column is not the container — the band itself runs edge to edge. */
.cta-copy-inner {
  width: 100%;
  padding-left: max(22px, calc((100vw - var(--wrap)) / 2 + 22px));
  padding-right: 56px;
}
.cta-band h2 { color: #fff; margin-bottom: .45em; font-size: clamp(1.5rem, 2.9vw, 2.15rem); max-width: 20ch; }
.cta-band p { margin: 0 0 4px; font-size: .92rem; max-width: 56ch; }

.cta-phone {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: clamp(1.7rem, 3.2vw, 2.3rem); font-weight: 700; letter-spacing: -.02em;
  color: var(--primary); text-decoration: none;
  margin: 18px 0 22px;
}
.cta-phone:hover { color: #6fb0ff; }

.cta-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* The photograph fills its column to the band's full height. */
.cta-photo { position: relative; min-height: 340px; }
.cta-photo img,
.cta-photo .media-placeholder {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border: 0; border-radius: 0;
}
.cta-photo .media-placeholder { background: linear-gradient(150deg, #2f2f42 0%, #262636 100%); }

/* --- Coverage ------------------------------------------------------
   162 areas across seven emirates. As chips that is a wall; as one long
   list it is unreadable. A rail of emirates beside the areas of whichever
   one is selected shows the whole coverage without printing it all at
   once, and reads as a place you look something up rather than a badge
   collection.

   The rail is built as a real control — its own ground, a selected row
   that sits proud of the others, a moving marker — because a row of
   plain text links does not look like something you are meant to press.

   Every panel is in the HTML and visible before the script runs, so with
   JavaScript off the section degrades to seven labelled lists rather than
   to nothing.
   ------------------------------------------------------------------ */

.coverage {
  display: grid; grid-template-columns: 268px 1fr;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}

.cov-rail {
  list-style: none; padding: 12px; margin: 0;
  background: var(--tint-grey);
  border-right: 1px solid var(--line);
}
.cov-tab {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 14px 16px 14px 18px;
  background: none; border: 0; border-radius: var(--r); cursor: pointer;
  font: inherit; font-size: 1rem; font-weight: 500; color: var(--text);
  text-align: left;
  transition: color .16s, background .16s, box-shadow .16s;
}
/* The marker grows rather than blinks, which is what makes the rail read
   as one control instead of seven separate links. */
.cov-tab::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 3px; height: 0; border-radius: 0 3px 3px 0;
  background: var(--primary);
  transform: translateY(-50%);
  transition: height .22s ease;
}
.cov-tab:hover { background: rgba(255,255,255,.7); color: var(--secondary); }
.cov-tab.is-on {
  background: #fff; color: var(--secondary); font-weight: 600;
  box-shadow: var(--shadow-xs);
}
.cov-tab.is-on::before { height: 58%; }

.cov-count {
  font-size: .74rem; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--muted);
  background: #fff; border: 1px solid var(--line);
  border-radius: 999px; padding: 3px 9px; line-height: 1.5;
  transition: color .16s, background .16s, border-color .16s;
}
.cov-tab.is-on .cov-count {
  color: #fff; background: var(--primary-ink); border-color: var(--primary-ink);
}

.cov-body { padding: 26px 30px; min-height: 300px; }
.cov-panel { display: none; }
.cov-panel.is-on { display: block; }

.cov-areas {
  list-style: none; padding: 0; margin: 0;
  columns: 3; column-gap: 30px;
}
.cov-areas li {
  break-inside: avoid;
  padding: 6px 0 6px 17px; position: relative;
  font-size: .88rem; line-height: 1.6;
}
.cov-areas li::before {
  content: ""; position: absolute; left: 0; top: .88em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--primary-line);
  transition: background .16s;
}
.cov-areas li:hover::before { background: var(--primary); }

/* --- Process -------------------------------------------------------
   A timeline rather than four boxes: one rule threaded through four
   numbers. The number is drawn large and pale behind its step, so the
   sequence is legible from across the room while the words stay quiet.
   ------------------------------------------------------------------ */

.flow {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px;
  position: relative;
}
.flow-step { position: relative; padding-top: 46px; }
/* The rule sits behind the numbers and stops at the last step rather
   than running off the edge of the container. */
.flow-step::before {
  content: ""; position: absolute; left: 0; right: -30px; top: 21px;
  height: 2px; background: var(--primary-line);
}
.flow-step:last-child::before { right: 0; }
.flow-step::after {
  content: ""; position: absolute; left: 0; top: 14px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 5px var(--tint-1), 0 0 0 6px var(--primary-line);
  transition: transform .18s;
}
.flow-step:hover::after { transform: scale(1.25); }

.flow-num {
  position: absolute; right: 8px; top: 30px;
  font-size: 3.4rem; font-weight: 700; line-height: 1;
  color: var(--primary); opacity: .13; letter-spacing: -.04em;
  pointer-events: none;
}
.flow-step h3 { margin-bottom: .4em; font-size: 1.06rem; }
.flow-step p { font-size: .87rem; line-height: 1.75; margin: 0; }

/* --- Callout ------------------------------------------------------- */

.callout { background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--primary); border-radius: var(--r); padding: 34px 32px 30px; box-shadow: var(--shadow-sm); }
.callout h3 { margin-bottom: .55em; }
.callout p { font-size: .9rem; }
.phone-big { display: inline-flex; align-items: center; gap: 9px; font-size: 1.2rem; font-weight: 600; color: var(--primary-ink); text-decoration: none; margin-top: 4px; }

/* --- Reasons ------------------------------------------------------- */

.reasons-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 56px; align-items: start; }
.reasons-intro { position: sticky; top: 100px; }
.reasons-intro p { font-size: .93rem; }

.reason-list { list-style: none; padding: 0; margin: 0; counter-reset: reason; }
.reason-list li {
  position: relative;
  display: grid; grid-template-columns: 26px 1fr; gap: 20px;
  padding: 24px 22px; margin-bottom: 12px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow-xs);
  transition: box-shadow .2s, border-color .2s, transform .2s;
}
.reason-list li:hover { box-shadow: var(--shadow-md); border-color: var(--primary-line); transform: translateX(4px); }
.reason-list li:last-child { margin-bottom: 0; }
/* No tile, no gradient, no glow. The icon sits on its own against a
   hairline that separates it from the text — the rule does the work a
   coloured box was doing, without shouting. */
.reason-list .ico {
  width: 26px; height: 26px;
  color: var(--primary-ink);
  stroke-width: 1.5;
  margin-top: 3px;
}
/* 01 to 07, sitting in the corner of each card. Numbering a list of
   reasons tells the reader how much is left, which a plain list does not. */
.reason-list li::after {
  counter-increment: reason;
  content: "0" counter(reason);
  position: absolute; right: 20px; top: 18px;
  font-size: 1.5rem; font-weight: 700; color: var(--primary);
  opacity: .16; line-height: 1;
}
.reason-list h3 { margin-bottom: .4em; padding-right: 44px; }
.reason-list p { font-size: .88rem; margin: 0; line-height: 1.78; }

/* --- Prose / inner pages ------------------------------------------- */

.prose { max-width: 840px; }
.prose h2 { margin-top: 1.5em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.6em; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: start; }

/* Text left, picture right. The media column is centred against the copy
   rather than pinned to the top, so a short image does not leave the
   right side looking abandoned. */
.media-split { grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.split .section-head { margin-bottom: 26px; }

.media { position: relative; }
.media-img {
  display: block; width: 100%; height: auto;
  border-radius: var(--r);
  box-shadow: var(--shadow-md);
}

/* Stands in until assets/img/about.jpg is uploaded. Built to look like a
   deliberate panel, not a missing file. */
.media-placeholder {
  display: grid; place-items: center;
  aspect-ratio: 4 / 3;
  background: linear-gradient(150deg, var(--tint-1) 0%, var(--tint-2) 100%);
  border: 1px solid var(--primary-line);
  border-radius: var(--r);
  color: var(--primary);
}
.media-placeholder .ico { width: 96px; height: 96px; opacity: .55; }

.grid { display: grid; gap: 22px; }
/* min() on the track floor, not a bare pixel value: minmax(330px, 1fr)
   refuses to go under 330 even in a 320px viewport, which is what put a
   horizontal scrollbar on the service pages at the narrow end. */
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); }

.card { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 28px 26px; box-shadow: var(--shadow-xs); transition: box-shadow .2s, border-color .2s, transform .2s; }
.card:hover { box-shadow: var(--shadow-md); border-color: var(--primary-line); transform: translateY(-3px); }
.card h3 { margin-bottom: .45em; }
.card p { font-size: .89rem; margin-bottom: .9em; }
.card > .ico { color: var(--primary); margin-bottom: 12px; }
.card-link { display: inline-flex; align-items: center; gap: 7px; font-weight: 500; font-size: .86rem; text-decoration: none; color: var(--primary-ink); }
.card-link .ico { width: 15px; height: 15px; margin: 0; }

.num { width: 38px; height: 38px; border-radius: var(--r); background: var(--primary-tint); color: var(--primary-ink); display: grid; place-items: center; font-weight: 600; margin-bottom: 14px; }
.section-soft { background: var(--tint-1); }

.symptoms { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.symptoms li { background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--primary); border-radius: 0 var(--r) var(--r) 0; padding: 14px 18px; font-size: .89rem; }


/* --- Forms --------------------------------------------------------- */

.form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 30px; box-shadow: var(--shadow-sm); }
.field { margin-bottom: 16px; }
.field label { display: block; font-weight: 500; color: var(--secondary); font-size: .86rem; margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: .89rem; padding: 11px 13px;
  border: 1px solid var(--line); border-radius: var(--r); background: #fff; color: var(--secondary);
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--primary); box-shadow: var(--ring);
}
.field textarea { min-height: 125px; resize: vertical; }
.hp { position: absolute; left: -9999px; }

.form-status { margin-top: 12px; font-size: .87rem; }
.form-status.is-ok  { color: #0a7b3f; }
.form-status.is-err { color: #c02626; }

.info-list { list-style: none; padding: 0; margin: 0; }
.info-list li { display: flex; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.info-list li:last-child { border-bottom: 0; }
.info-list .ico { width: 22px; height: 22px; color: var(--primary-ink); stroke-width: 1.5; margin-top: 4px; }
.info-list span { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.info-list strong, .info-list a { color: var(--secondary); font-size: .94rem; text-decoration: none; font-weight: 500; }
.info-list a:hover { color: var(--primary-ink); }

/* --- FAQ ----------------------------------------------------------- */

.faq-item { border-bottom: 1px solid var(--line); }
.faq-q { width: 100%; text-align: left; background: none; border: 0; cursor: pointer; font: inherit; font-weight: 500; color: var(--secondary); padding: 18px 40px 18px 0; position: relative; }
.faq-q::after { content: "+"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 1.4rem; font-weight: 300; color: var(--primary-ink); }
.faq-item:not(.is-collapsed) .faq-q::after { content: "\2212"; }
.faq-a { padding-bottom: 18px; font-size: .89rem; }
.faq-item.is-collapsed .faq-a { display: none; }

/* --- Page banner ---------------------------------------------------
   Every page except the homepage opens the same way: heading, one line,
   breadcrumbs, over the shared photograph. Same shape everywhere, so the
   site does not feel like several sites stitched together.
   ------------------------------------------------------------------ */

.page-hero {
  position: relative;
  background: var(--secondary-deep) center/cover no-repeat;
  padding: 68px 0 60px;
  text-align: center;
  color: #c2cee4;
}
/* Dark enough under the words to keep them at full contrast, thinner at
   the edges so the photograph is still a photograph. */
.page-hero::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(26,26,38,.88) 0%, rgba(26,26,38,.80) 55%, rgba(20,63,143,.82) 100%);
}
.page-hero::after {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 22px 22px;
}
.page-hero .wrap { position: relative; z-index: 1; }

.page-hero h1 { color: #fff; margin-bottom: .35em; }
.page-hero h1::after {
  content: ""; display: block;
  width: 56px; height: 3px; border-radius: 2px;
  background: var(--primary);
  margin: 20px auto 0;
}
.page-lead {
  font-size: 1rem; max-width: 62ch; margin: 0 auto;
  color: #d3dbe8;
}

/* --- Breadcrumbs ---------------------------------------------------- */

.crumbs { margin-top: 22px; font-size: .84rem; }
.crumbs ol {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0;
}
.crumbs li { display: inline-flex; align-items: center; }
/* The separator is drawn rather than typed, so it is not read aloud as
   a word and cannot be selected with the text. */
.crumbs li + li::before {
  content: ""; display: inline-block;
  width: 5px; height: 5px; margin: 0 12px;
  border-top: 1.5px solid rgba(255,255,255,.45);
  border-right: 1.5px solid rgba(255,255,255,.45);
  transform: rotate(45deg);
}
.crumbs a { color: #b7c4d8; text-decoration: none; padding: 4px 0; }
.crumbs a:hover { color: #fff; }
.crumbs span { color: #fff; font-weight: 500; }

/* --- Footer -------------------------------------------------------- */

.site-foot { background: var(--secondary); color: #a0a0b2; padding: 50px 0 22px; font-size: .87rem; }
.foot-grid { display: grid; gap: 32px; grid-template-columns: 1.6fr 1fr 1.1fr 1.1fr; }
.site-foot h3 { color: #fff; font-size: .9rem; margin-bottom: 1.1em; font-weight: 600; }
.site-foot ul { list-style: none; padding: 0; }
.site-foot li { margin-bottom: 9px; }
.site-foot a { color: #a0a0b2; text-decoration: none; }
.site-foot a:hover { color: #fff; }
.foot-about .logo-lockup, .foot-about .logo-img { margin-bottom: 16px; }
.foot-about p { line-height: 1.8; margin-bottom: 0; }

.foot-contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 42px; padding-top: 30px; border-top: 1px solid rgba(255,255,255,.1); }
.foot-contact li { display: flex; gap: 13px; align-items: center; margin: 0; list-style: none; }
.foot-contact .ico { width: 22px; height: 22px; color: var(--primary); stroke-width: 1.5; }
.foot-contact span { display: block; font-size: .73rem; text-transform: uppercase; letter-spacing: .08em; color: #8f8fa2; }
.foot-contact strong, .foot-contact a { color: #fff; font-weight: 500; font-size: .9rem; }

.foot-base { margin-top: 28px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.1); font-size: .79rem; display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; }
.foot-base p { margin: 0; }

/* --- Floating actions ---------------------------------------------- */

/* Right-hand side: that is where a thumb rests, and on the left they sat
   on top of the copy at narrow widths. */
.floats { position: fixed; right: 15px; bottom: 16px; z-index: 90; display: grid; gap: 9px; }
.float { width: 44px; height: 44px; border-radius: var(--r); display: grid; place-items: center; color: #fff; box-shadow: 0 4px 14px rgba(35,35,51,.24); transition: transform .16s; }
.float:hover { transform: scale(1.06); }
.float-wa { background: #25d366; }
.float-call { background: var(--primary-ink); }

/* --- Responsive ---------------------------------------------------- */

@media (max-width: 1080px) {
  .enquiry-bar form { grid-template-columns: repeat(3, 1fr); }
  .enquiry-bar .btn { grid-column: 1 / -1; }
  .svc-grid { grid-template-columns: 1fr; }
  .flow { grid-template-columns: repeat(2, 1fr); gap: 34px 26px; }
  .flow-step:nth-child(2)::before { right: 0; }
  .coverage { grid-template-columns: 210px 1fr; }
  .cov-areas { columns: 2; }
  .cov-body { padding: 22px 24px; }
  .strip-row { grid-template-columns: repeat(4, 1fr); gap: 22px; }
  .reasons-grid { grid-template-columns: 1fr; gap: 36px; }
  .reasons-intro { position: static; }
}

@media (max-width: 900px) {
  /* The photo stacks under the copy rather than being squeezed into a
     column too narrow to show a person in. */
  .cta-band-inner { grid-template-columns: 1fr; }
  .cta-copy { padding: 52px 0 46px; }
  .cta-copy-inner { padding-left: 22px; padding-right: 22px; }
  .cta-photo { min-height: 260px; }

  /* On a narrow screen the hero photo has no room to show beside the copy,
     so the overlay closes up and the picture becomes texture behind it. */
  .hero[style*="background-image"] { background-position: 62% center; }
  .hero[style*="background-image"]::before {
    background: linear-gradient(180deg, rgba(26,26,38,.94) 0%, rgba(26,26,38,.88) 60%, rgba(26,26,38,.92) 100%);
  }
  .split, .media-split { grid-template-columns: 1fr; gap: 32px; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 820px) {
  .nav-toggle { display: block; }
  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--line);
    padding: 8px 22px 18px; display: none;
  }
  .nav.is-open { display: flex; }
  .nav > a { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .nav a.btn { margin-top: 12px; border-bottom: 0; text-align: center; }

  /* On a phone the panel is not a panel — it opens in the flow, pushing
     the rest of the menu down, because a floating dropdown on a narrow
     screen either runs off the edge or covers what is under it. */
  .nav-item.has-sub { display: block; width: 100%; position: static; }
  .nav-item.has-sub > a {
    display: inline-block; padding: 12px 0;
    width: calc(100% - 44px);
  }
  .nav-item.has-sub { border-bottom: 1px solid var(--line); }
  .sub-toggle { position: absolute; right: 22px; width: 44px; height: 44px; }
  .nav-item.has-sub > a + .sub-toggle { margin-top: 0; }

  .sub {
    position: static; min-width: 0; width: 100%;
    border: 0; border-radius: 0; box-shadow: none; padding: 0 0 8px 14px;
    display: none;
    opacity: 1; visibility: visible; transform: none;
  }
  .nav-item.has-sub:hover > .sub,
  .nav-item.has-sub:focus-within > .sub { display: none; }
  .nav-item.has-sub.is-open > .sub { display: block; }
  .sub a { padding: 10px 0; }
  .section { padding: 46px 0; }
  .hero { padding-top: 42px; }
  .topbar .t-mail { display: none; }
  .topbar-inner { justify-content: center; }
}

/* --- Touch targets --------------------------------------------------
   Below the tablet break, anything tappable gets enough height to hit
   with a thumb. A 15px text link is fine with a cursor and a coin toss
   with a finger, and this site's whole job is getting someone to press
   a phone number.
   ------------------------------------------------------------------ */
@media (max-width: 820px) {
  .page-hero { padding: 48px 0 44px; }
  .page-lead { font-size: .94rem; }
  .crumbs a { padding: 8px 0; }
  .topbar a { padding: 9px 4px; }
  .topbar-inner { min-height: 44px; }
  .site-foot li { margin-bottom: 2px; }
  .site-foot li a { display: inline-block; padding: 11px 0; }
  .foot-contact a { display: inline-block; padding: 8px 0; }
  .crumbs { padding-top: 10px; }
  .crumbs a { display: inline-block; padding: 10px 4px; }
  .card-link, .info-list a { display: inline-flex; padding: 10px 0; }
  .svc-body h3 a { display: inline-block; padding: 11px 0; }
  .cta-phone, .phone-big, .call-card-num { padding: 6px 0; }

  /* 44px is the size a thumb actually hits. Everything above lands on it
     with its padding; these two need a floor set instead. */
  .btn { min-height: 44px; }
  .nav-toggle { width: 44px; height: 44px; }
}

@media (max-width: 600px) {
  .flow { grid-template-columns: 1fr; gap: 26px; }
  .flow-step { padding-top: 0; padding-left: 34px; }
  /* Vertical on a phone: the rule runs down the left instead of across. */
  .flow-step::before { left: 7px; right: auto; top: 0; bottom: -26px; width: 2px; height: auto; }
  .flow-step:last-child::before { display: none; }
  .flow-step::after { top: 4px; }
  .flow-num { top: -6px; right: 0; font-size: 2.6rem; }

  /* The rail becomes a scrolling row of chips. -webkit-overflow-scrolling
     and scroll-snap make it behave like a native control under a thumb
     rather than a list that happens to slide. */
  .coverage { grid-template-columns: 1fr; }
  .cov-rail {
    display: flex; gap: 8px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    padding: 12px; border-right: 0; border-bottom: 1px solid var(--line);
    scrollbar-width: none;
  }
  .cov-rail::-webkit-scrollbar { display: none; }
  .cov-rail li { flex: none; scroll-snap-align: start; }
  .cov-tab {
    padding: 10px 14px; white-space: nowrap; font-size: .9rem;
    border: 1px solid var(--line); background: #fff;
  }
  .cov-tab::before { display: none; }
  .cov-tab.is-on { background: var(--primary-ink); color: #fff; border-color: var(--primary-ink); }
  .cov-tab.is-on .cov-count { background: rgba(255,255,255,.2); border-color: transparent; color: #fff; }
  .cov-body { padding: 20px 18px 22px; min-height: 0; }
  .cov-areas { columns: 2; column-gap: 18px; }
  .cov-areas li { font-size: .84rem; }

  .logo-mark { width: 40px; height: 40px; }
  .logo-brand { font-size: 1.08rem; }
  .logo-sub { font-size: .55rem; letter-spacing: .15em; }
  .logo-img { height: 40px; }
  .enquiry-bar form { grid-template-columns: 1fr; }
  .svc-card { grid-template-columns: 1fr; gap: 16px; }
    .strip-row { grid-template-columns: repeat(3, 1fr); }
  .foot-grid { grid-template-columns: 1fr; gap: 24px; }
  .hero-actions .btn, .cta-actions .btn { flex: 1 1 100%; }
}

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

/* --- Fault list ------------------------------------------------------
   Eleven faults, each with the code the machine shows. Native <details>,
   so they open with no JavaScript, take keyboard focus for free, and can
   be found by the browser's own find-in-page. Someone reading a 5C off a
   display wants that one entry, not all eleven at once.
   ------------------------------------------------------------------ */

.fault-list { display: grid; gap: 12px; }

.fault {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}
.fault[open] { border-color: var(--primary-line); box-shadow: var(--shadow-sm); }

.fault summary {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 16px;
  padding: 18px 22px;
  cursor: pointer;
  list-style: none;
}
/* Safari draws its own triangle unless both of these are set. */
.fault summary::-webkit-details-marker { display: none; }
.fault summary::marker { content: ""; }

.fault-n {
  font-size: 1.05rem; font-weight: 700; line-height: 1;
  color: var(--primary); opacity: .45;
  font-variant-numeric: tabular-nums;
}
.fault[open] .fault-n { opacity: 1; }

/* min-width:0 or the badge's nowrap sets the column's floor and pushes
   the +/- off the right edge on a narrow phone. */
.fault-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; min-width: 0; }
.fault-title { font-weight: 600; color: var(--secondary); font-size: 1rem; line-height: 1.4; }
/* The code is the thing a reader is matching against their display, so
   it is set apart rather than buried in the sentence. */
.fault-code {
  font-size: .72rem; font-weight: 600; letter-spacing: .04em;
  color: var(--primary-ink);
  background: var(--primary-tint);
  border: 1px solid var(--primary-line);
  border-radius: 999px; padding: 3px 10px;
  white-space: nowrap;
}

/* Drawn, not typed, so no character is read aloud or selectable. */
.fault-mark {
  position: relative; width: 16px; height: 16px; flex: none;
}
.fault-mark::before,
.fault-mark::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  background: var(--primary-ink);
  transform: translate(-50%, -50%);
  transition: transform .18s, opacity .18s;
}
.fault-mark::before { width: 14px; height: 2px; border-radius: 1px; }
.fault-mark::after  { width: 2px; height: 14px; border-radius: 1px; }
.fault[open] .fault-mark::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }

/* Open, the row splits: what is wrong on the left, what we do about it on
   the right. Two labelled halves are read; one long paragraph followed by
   a second long paragraph is skimmed and abandoned. */
.fault-body {
  display: grid; grid-template-columns: 1fr .92fr; gap: 24px;
  padding: 4px 22px 22px 62px;
  border-top: 1px solid var(--line);
  margin-top: 2px; padding-top: 20px;
}
.fault-problem p { font-size: .92rem; margin: 0; }

.fault-label {
  display: block; font-size: .7rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 8px;
}
.fault-fix {
  background: var(--tint-1);
  border: 1px solid var(--primary-line);
  border-left: 3px solid var(--primary);
  border-radius: 0 var(--r) var(--r) 0;
  padding: 16px 20px;
}
.fault-fix-label { color: var(--primary-ink); }
.fault-fix p { margin: 0; font-size: .92rem; }

/* A centred prose block wants its buttons centred with it. */
.lead-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 1.6em; }
.lead .section-head { margin-bottom: 30px; }

/* On the dark section the prose and the number have to invert. */
.section-dark .lead p { color: #c4c4d2; }
.section-dark .cta-phone { color: #6fb0ff; }

@media (max-width: 900px) {
  .fault-body { grid-template-columns: 1fr; gap: 18px; padding-left: 22px; }
}

@media (max-width: 600px) {
  /* The title wraps to two or three lines here, so the number and the
     +/- sit at the top of it rather than floating in the middle. */
  .fault summary { padding: 15px 16px; gap: 12px; align-items: start; }
  .fault-n { margin-top: 3px; }
  .fault-mark { margin-top: 5px; }
  .fault-body { padding: 18px 16px 18px; }
  .fault-title { font-size: .94rem; }
  /* A long badge — "Condenser & Heat Pump Models" — wraps here rather
     than holding the row open wider than the screen. */
  .fault-code { white-space: normal; }
  .fault-fix { padding: 14px 16px; }
  .lead-actions .btn { flex: 1 1 100%; }
}


/* ------------------------------------------------------------------
   Washing machine landing page
   ------------------------------------------------------------------
   Nine long blocks of copy. Stacked as full-width sections with a
   centred heading over a centred paragraph, every one of them reads the
   same and the page has no shape — which is exactly what it looked like.

   What gives it shape here is layout, not decoration: a panel that lifts
   up into the banner, headings set beside their copy rather than above
   it, photographs carried on an offset block, an index that stays on
   screen beside eleven faults, and a process that runs down a line
   instead of sitting in four boxes.

   No new colour and no new radius. Same blue at the same lightnesses,
   7px throughout.
   ------------------------------------------------------------------ */

/* --- Panel lifted into the banner ----------------------------------- */

/* Room at the foot of the banner so the panel overlaps the picture and
   not the breadcrumbs. */
.page-hero.has-lift { padding-bottom: 104px; }

.lift { position: relative; z-index: 6; margin-top: -62px; }
.lift-row {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.lift-row li {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 24px 24px;
  border-right: 1px solid var(--line);
}
.lift-row li:last-child { border-right: 0; }
.lift-row .ico { color: var(--primary-ink); stroke-width: 1.5; margin-top: 2px; }
.lift-row strong { display: block; color: var(--secondary); font-size: .9rem; font-weight: 600; line-height: 1.45; }
.lift-row span { display: block; font-size: .8rem; line-height: 1.6; }

/* --- Opening -------------------------------------------------------- */

.wm-open-sec { padding-top: 54px; }
.wm-open { display: grid; grid-template-columns: 1.3fr .7fr; gap: 56px; align-items: center; }
/* The page's promise, set a size above the body copy under it. */
.wm-first { font-size: 1.06rem; line-height: 1.85; margin: 0; }
.wm-first::first-letter { color: var(--secondary); font-weight: 600; }
.wm-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 1.6em 0 0; }

/* Dark, on a white ground. The one thing the page exists to be pressed
   should not look like the panels around it. */
.call-card {
  background: var(--secondary);
  border-radius: var(--r);
  border-top: 3px solid var(--primary);
  padding: 26px 28px 28px;
  box-shadow: var(--shadow-md);
}
.call-card-top {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .74rem; font-weight: 500; letter-spacing: .09em; text-transform: uppercase;
  color: #b8b8c8;
}
.call-card-top .ico { color: var(--primary); }
.call-card-num {
  display: flex; align-items: center; gap: 11px;
  margin: 12px 0 20px;
  font-size: clamp(1.35rem, 2.4vw, 1.75rem); font-weight: 700; letter-spacing: -.02em;
  color: var(--primary); text-decoration: none;
  /* Broken across two lines it stops reading as a number. */
  white-space: nowrap;
}
.call-card-num:hover { color: #6fb0ff; }
.call-card-actions { display: grid; gap: 9px; }

/* --- Heading beside its copy ----------------------------------------
   The centred-heading-over-centred-paragraph shape is what made every
   section look like the one before it. Here the heading holds the left
   third and the copy runs beside it. */

.head-split {
  display: grid; grid-template-columns: .82fr 1.18fr; gap: 26px 58px;
  align-items: start; margin-bottom: 42px;
}
.head-split .section-head { margin: 0; position: sticky; top: 100px; }
.head-split p:last-child { margin-bottom: 0; }

/* Two columns of text, for the one paragraph with no panel beside it. */
.two-col { columns: 2; column-gap: 46px; }
.two-col { margin: 0; }

/* --- Photograph on an offset block ---------------------------------- */

.framed-sec { overflow: hidden; }
.frame { position: relative; }
.frame::before {
  content: ""; position: absolute; z-index: 0;
  top: 20px; bottom: -20px;
  width: 100%;
  background: var(--tint-2);
  border-radius: var(--r);
}
.frame-left::before  { left: -20px; }
.frame-right::before { right: -20px; }
.frame .media-img, .frame .media-placeholder { position: relative; z-index: 1; }

/* --- Model range as one bar ----------------------------------------- */

/* The column count comes from the page — the AC page names five models,
   the rest name six, and a fixed six would leave that page a blank cell. */
.spec-bar {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(var(--cols, 6), 1fr);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden;
}
.spec-bar li {
  display: grid; justify-items: center; gap: 14px;
  padding: 24px 12px;
  border-right: 1px solid var(--line);
  transition: background .18s;
}
.spec-bar li:last-child { border-right: 0; }
.spec-bar li:hover { background: var(--tint-1); }
/* The same short rule that marks a heading, rather than six copies of one
   icon — a glyph repeated across a row says nothing and reads as filler. */
.spec-bar li::before {
  content: ""; width: 24px; height: 3px; border-radius: var(--r);
  background: var(--primary);
}
.spec-bar span {
  font-size: .88rem; font-weight: 600; color: var(--secondary);
  text-align: center; line-height: 1.4;
}

/* --- Faults: index beside the list ---------------------------------- */

.fault-wrap { display: grid; grid-template-columns: 264px 1fr; gap: 34px; align-items: start; }
/* Stays with the reader through all eleven rows rather than scrolling
   off the top of them. */
.fault-side { position: sticky; top: 96px; }

.code-index {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: 20px 20px 18px;
  box-shadow: var(--shadow-xs);
}
.code-index h3 {
  font-size: .72rem; font-weight: 600; letter-spacing: .11em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 13px;
}
.code-index ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.code-index a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; padding: 8px 11px;
  font-size: .81rem; font-weight: 600; letter-spacing: .02em;
  color: var(--primary-ink); text-decoration: none;
  background: var(--primary-tint);
  border: 1px solid var(--primary-line); border-radius: var(--r);
  transition: background .16s, color .16s, border-color .16s;
}
.code-index a:hover { background: var(--primary-ink); border-color: var(--primary-ink); color: #fff; }
.code-index p { font-size: .79rem; line-height: 1.6; margin: 13px 0 0; color: var(--muted); }

.code-call {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  margin-top: 14px; padding: 11px 12px;
  background: var(--secondary); color: #fff;
  border-radius: var(--r);
  font-size: .82rem; font-weight: 500; text-decoration: none;
  transition: background .16s;
}
.code-call:hover { background: var(--secondary-soft); color: #fff; }
.code-call .ico { color: var(--primary); }

/* Beside the index it fills its own column — no centred measure. */
.fault-list { display: grid; gap: 12px; max-width: none; margin: 0; }
/* The sticky header would otherwise sit on top of the row jumped to. */
.fault { scroll-margin-top: 96px; }
.fault:target { border-color: var(--primary); box-shadow: var(--shadow-sm); }

/* --- Process on a line ----------------------------------------------
   Four steps alternating either side of one rule. Four boxes in a row is
   the shape every template uses; this reads as a sequence. */

.track { list-style: none; margin: 0; padding: 0; position: relative; }
.track::before {
  content: ""; position: absolute; left: 50%; top: 8px; bottom: 8px;
  width: 2px; margin-left: -1px;
  background: var(--primary-line);
}
.track-step { position: relative; display: grid; grid-template-columns: 1fr 1fr; }
.track-step + .track-step { margin-top: 26px; }
.track-step:nth-child(odd)  .track-card { grid-column: 1; margin-right: 46px; }
.track-step:nth-child(even) .track-card { grid-column: 2; margin-left: 46px; }

.track-dot {
  position: absolute; left: 50%; top: 30px;
  width: 15px; height: 15px; margin-left: -7px;
  border-radius: 50%; background: var(--primary);
  box-shadow: 0 0 0 5px #fff, 0 0 0 6px var(--primary-line);
}

.track-card {
  position: relative;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: 26px 26px 22px;
  box-shadow: var(--shadow-xs);
  transition: box-shadow .2s, border-color .2s;
}
.track-card:hover { box-shadow: var(--shadow-md); border-color: var(--primary-line); }
.track-n {
  position: absolute; right: 20px; top: 14px;
  font-size: 2.6rem; font-weight: 700; line-height: 1;
  color: var(--primary); opacity: .14; letter-spacing: -.04em;
}
.track-card h3 { margin-bottom: .4em; padding-right: 56px; }
.track-card p { font-size: .88rem; line-height: 1.75; margin: 0; }

/* --- Inspection checklist -------------------------------------------- */

.inspect-split { grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; }
.inspect-copy .section-head { margin-bottom: 24px; }
.inspect-copy p:last-child { margin-bottom: 0; }

.check-list {
  list-style: none; counter-reset: chk;
  padding: 10px 26px; margin: 0;
  background: #fff; border: 1px solid var(--primary-line); border-radius: var(--r);
  box-shadow: var(--shadow-xs);
}
.check-list li {
  counter-increment: chk;
  display: grid; grid-template-columns: 30px 1fr; gap: 14px; align-items: baseline;
  padding: 15px 0; border-bottom: 1px solid var(--tint-2);
  font-size: .89rem; line-height: 1.6; color: var(--secondary);
}
.check-list li:last-child { border-bottom: 0; }
.check-list li::before {
  content: "0" counter(chk);
  font-size: .78rem; font-weight: 700; color: var(--primary);
  font-variant-numeric: tabular-nums;
}

/* --- Support panel on the dark band ---------------------------------- */

.support-split { grid-template-columns: 1.2fr .8fr; gap: 50px; align-items: center; }

.support-card {
  background: #2c2c3f; border: 1px solid #3c3c52;
  border-top: 3px solid var(--primary);
  border-radius: var(--r);
  padding: 26px 28px 28px;
}
.support-open {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .76rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  color: #b8b8c8;
}
.support-open .ico { color: var(--primary); }
.support-card .cta-phone { margin: 12px 0 20px; font-size: clamp(1.5rem, 2.6vw, 1.95rem); }
.support-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* --- Coverage tiles --------------------------------------------------- */

/* Flex rather than grid, so the two emirates left over on the last row
   centre themselves instead of hanging off the left edge. */
.area-grid {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 14px;
}
.area-grid li {
  flex: 1 1 200px; max-width: 268px; min-width: 0;
  display: grid; grid-template-columns: auto 1fr; gap: 4px 13px;
  align-items: center;
  padding: 16px 18px;
  background: var(--tint-1); border: 1px solid var(--primary-line); border-radius: var(--r);
  transition: border-color .18s, background .18s;
}
/* No hover state. These tiles are not links, and a border that lights up
   under the pointer promises a click that never happens. */
.area-grid .ico { grid-row: span 2; color: var(--primary-ink); stroke-width: 1.6; }
.area-grid strong { font-size: .95rem; font-weight: 600; color: var(--secondary); line-height: 1.3; }
.area-grid span { font-size: .78rem; color: var(--muted); line-height: 1.4; }

/* --- Picture on the left, for the closing block ----------------------- */

.media-split-flip { grid-template-columns: .95fr 1.05fr; }

/* --- Compact service card, for the cross-links ------------------------ */

.svc-card-sm .svc-body { padding: 16px 20px 20px; }
.svc-card-sm .svc-body h3 { margin-bottom: .5em; font-size: 1rem; }

/* --- Responsive -------------------------------------------------------
   Four bands, not two. The usual desktop/phone pair leaves the whole
   tablet range — and a laptop at 1280 — reading as a phone layout blown
   up, which is what a two-column page turns into the moment it stacks.

     1181+      the full layout
     901–1180   columns survive, gaps and side panels tighten
     601–900    everything stacks; the call panel turns into a bar rather
                than a tall dark block across the page
     ≤600       phone
   --------------------------------------------------------------------- */

@media (max-width: 1180px) {
  .wm-open { gap: 40px; }
  .head-split { gap: 24px 42px; }
  .fault-wrap { grid-template-columns: 236px 1fr; gap: 26px; }
  .inspect-split { gap: 40px; }
}

@media (max-width: 1080px) {
  .lift-row { grid-template-columns: repeat(2, 1fr); }
  .lift-row li:nth-child(2n) { border-right: 0; }
  .lift-row li:nth-child(-n+2) { border-bottom: 1px solid var(--line); }

  .wm-open { grid-template-columns: 1.15fr .85fr; gap: 32px; }

  /* The heading goes above its copy, but the copy keeps its two columns
     so the section does not turn into one long measure. */
  .head-split { grid-template-columns: 1fr; gap: 16px; margin-bottom: 34px; }
  .head-split .section-head { position: static; }
  .two-col { column-gap: 36px; }

  .spec-bar { grid-template-columns: repeat(3, 1fr); }
  .spec-bar li:nth-child(3n) { border-right: 0; }
  .spec-bar li:nth-child(-n+3) { border-bottom: 1px solid var(--line); }

  .fault-wrap { grid-template-columns: 208px 1fr; gap: 22px; }
  .code-index { padding: 18px 16px 16px; }
  .code-index a { min-width: 40px; padding: 7px 10px; font-size: .78rem; }

  .inspect-split { grid-template-columns: 1fr 1fr; gap: 34px; }
  .track-step:nth-child(odd)  .track-card { margin-right: 30px; }
  .track-step:nth-child(even) .track-card { margin-left: 30px; }
  .track-card { padding: 22px 22px 20px; }
}

@media (max-width: 900px) {
  .wm-open { grid-template-columns: 1fr; gap: 30px; }

  /* Full width, a tall dark block is a wall across the page. As a bar the
     number keeps its buttons beside it and the section keeps its height. */
  .call-card {
    display: grid; grid-template-columns: 1fr auto;
    align-items: center; gap: 4px 30px;
    padding: 22px 26px 24px;
  }
  .call-card-top { grid-column: 1; grid-row: 1; }
  .call-card-num { grid-column: 1; grid-row: 2; margin: 0; }
  .call-card-actions { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 9px; }

  .two-col { columns: 1; }

  /* The index goes above the list and stops being sticky — a panel that
     follows you down a narrow screen is in the way, not in reach. */
  .fault-wrap { grid-template-columns: 1fr; gap: 24px; }
  .fault-side { position: static; }
  .code-index { padding: 20px 20px 18px; }
  .code-index a { min-width: 46px; padding: 9px 12px; font-size: .81rem; }

  .inspect-split { grid-template-columns: 1fr; gap: 30px; }
  .support-split { grid-template-columns: 1fr; gap: 32px; }

  /* Stacked, the picture belongs under the words it illustrates. */
  .media-split-flip { grid-template-columns: 1fr; }
  .media-split-flip .media { order: 2; }
  .frame::before { display: none; }

  /* The line moves to the left edge and every step sits to the right of
     it — alternating sides needs width a narrow screen does not have. */
  .track::before { left: 7px; margin-left: 0; }
  .track-step { grid-template-columns: 1fr; }
  .track-step + .track-step { margin-top: 18px; }
  .track-step:nth-child(odd) .track-card,
  .track-step:nth-child(even) .track-card { grid-column: 1; margin: 0 0 0 40px; }
  .track-dot { left: 7px; margin-left: -6px; top: 26px; }
}

@media (max-width: 600px) {
  .page-hero.has-lift { padding-bottom: 74px; }
  .lift { margin-top: -46px; }
  /* Two across and titles only. Four full-width rows push the quick jump
     below the first screen, and the first screen is the one that decides
     whether the visitor stays. */
  .lift-row { grid-template-columns: 1fr 1fr; }
  .lift-row li { padding: 14px 14px; gap: 10px; }
  .lift-row li:nth-child(2n) { border-right: 0; }
  .lift-row li:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .lift-row strong { font-size: .82rem; line-height: 1.4; }
  .lift-row span { display: none; }
  .lift-row .ico { width: 20px; height: 20px; }

  .wm-open-sec { padding-top: 40px; }
  .wm-first { font-size: .98rem; }
  .wm-actions .btn { flex: 1 1 100%; }

  /* Back to a block: side by side, the buttons and the number each get a
     column too narrow to be worth having. */
  .call-card { display: block; padding: 22px 20px 24px; }
  .call-card-num { margin: 12px 0 18px; }
  .call-card-actions { display: grid; gap: 9px; }

  .spec-bar { grid-template-columns: repeat(2, 1fr); }
  .spec-bar li { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 20px 10px; }
  .spec-bar li:nth-child(2n),
  .spec-bar li:last-child { border-right: 0; }
  .spec-bar li:nth-last-child(-n+2) { border-bottom: 0; }

  .code-index a { min-width: 52px; padding: 10px 12px; }
  .check-list { padding: 6px 18px; }
  .check-list li { grid-template-columns: 26px 1fr; gap: 10px; }
  .track-card { padding: 22px 20px 18px; }
  .track-n { font-size: 2.1rem; right: 16px; }
  .track-card h3 { padding-right: 44px; }

  .area-grid li { flex: 1 1 100%; max-width: none; }
  .support-actions .btn { flex: 1 1 100%; }
}

/* The narrow end of the range — a 320px phone, and any browser at a large
   text setting. Only the two places where a fixed string has to fit. */
@media (max-width: 400px) {
  .call-card-num { font-size: 1.22rem; gap: 9px; }
  .call-card-num .ico { width: 19px; height: 19px; }

  .support-card { padding: 22px 18px 24px; }
  .support-card .cta-phone,
  .cta-band .cta-phone { font-size: 1.24rem; gap: 9px; white-space: nowrap; }
  .cta-phone .ico { width: 21px; height: 21px; }
}

/* A phone held sideways: 400-odd pixels of height and no room for a
   banner that fills the screen before the page starts. */
@media (max-height: 460px) and (orientation: landscape) {
  .page-hero { padding: 34px 0 30px; }
  .page-hero.has-lift { padding-bottom: 88px; }
  .section { padding: 38px 0; }
}


/* ------------------------------------------------------------------
   Mobile: getting to the answer
   ------------------------------------------------------------------
   The page is nineteen screens on a phone and the fault list starts on
   the sixth. Someone who searched their own symptom should not have to
   read four sections about us to reach it. Two additions fix that, and
   neither changes a word of the copy.
   ------------------------------------------------------------------ */

/* --- Quick jump, under the banner ----------------------------------- */

/* Hidden on a desktop: there the index is already beside the list and
   stays on screen for its whole length. */
.quick-jump { display: none; }

.quick-jump-lead {
  font-size: .74rem; font-weight: 600; letter-spacing: .11em;
  text-transform: uppercase; color: var(--muted);
  margin: 0 0 12px;
}
.quick-jump ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.quick-jump a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 10px 14px;
  font-size: .85rem; font-weight: 600;
  color: var(--primary-ink); text-decoration: none;
  background: #fff;
  border: 1px solid var(--primary-line); border-radius: var(--r);
}
.quick-jump a:active { background: var(--primary-ink); border-color: var(--primary-ink); color: #fff; }

/* --- Bottom action bar ---------------------------------------------- */

.callbar { display: none; }
.callbar-btn {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 52px;
  font-family: inherit; font-size: .92rem; font-weight: 600;
  text-decoration: none; color: #fff;
}
.callbar-call { background: var(--primary-ink); }
.callbar-wa   { background: #25d366; }

@media (max-width: 900px) {
  .quick-jump {
    display: block;
    background: var(--tint-1);
    border-bottom: 1px solid var(--primary-line);
    padding: 22px 0 24px;
  }
  /* The panel over the banner already carries the top margin; this sits
     directly under it with no gap of its own. */
  .quick-jump + .wm-open-sec { padding-top: 34px; }
}

@media (max-width: 820px) {
  .callbar {
    display: grid; grid-template-columns: 1fr 1fr;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
    box-shadow: 0 -2px 14px rgba(35,35,51,.16);
  }
  /* Room for the bar, so it never covers the last line of the footer. */
  body { padding-bottom: 52px; }
  /* One set of controls, not two stacked in the same corner. */
  .floats { display: none; }
}


/* ------------------------------------------------------------------
   About page
   ------------------------------------------------------------------ */

/* --- Problem / solution, without the accordion ----------------------
   Three of them, not eleven, and all three are the point of the section
   — so they are open cards rather than rows that have to be pressed.
   Same card as a fault, minus the <details>. */

.fault.is-static {
  border-color: var(--primary-line);
  box-shadow: var(--shadow-sm);
}
.fault-summary {
  display: grid; grid-template-columns: auto 1fr;
  align-items: center; gap: 16px;
  padding: 18px 22px;
}
.fault.is-static .fault-n { opacity: 1; }

/* --- Repair departments ---------------------------------------------
   Five of them. Flex rather than grid so the last two centre themselves
   instead of sitting under the first column. */

.dept-grid { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; }
.dept {
  flex: 1 1 330px; max-width: 380px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  border-top: 3px solid var(--primary);
  padding: 26px 26px 24px;
  box-shadow: var(--shadow-xs);
  transition: box-shadow .2s, transform .2s;
}
.dept:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.dept > .ico { color: var(--primary-ink); stroke-width: 1.4; margin-bottom: 14px; }
.dept h3 { margin-bottom: .5em; font-size: 1.02rem; line-height: 1.4; }
.dept p { font-size: .87rem; line-height: 1.75; margin: 0; }

/* The values list carries its heading and copy in a wrapper here, where
   the service pages put them straight into the row. */
.reason-list li > div { min-width: 0; }

@media (max-width: 600px) {
  .fault-summary { padding: 15px 16px; gap: 12px; align-items: start; }
  .dept { padding: 22px 20px 20px; }
}

/* --- Direct contact, when a build has no form endpoint --------------- */

.enquiry-direct {
  background: #fff; border-radius: var(--r) var(--r) 0 0;
  box-shadow: var(--shadow-lg);
  padding: 22px 26px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 26px;
}
.enquiry-direct strong { display: block; color: var(--secondary); font-size: 1rem; }
.enquiry-direct span { display: block; font-size: .86rem; color: var(--text); line-height: 1.6; }
.enquiry-direct-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.contact-direct h2 { font-size: 1.3rem; margin-bottom: .5em; }
.contact-direct p { font-size: .92rem; }
.contact-direct .call-card-num { color: var(--primary-ink); margin: 4px 0 20px; }
.contact-direct .call-card-num:hover { color: var(--primary-dark); }
.contact-direct-actions { display: flex; flex-wrap: wrap; gap: 10px; }

@media (max-width: 600px) {
  .enquiry-direct { padding: 20px; }
  .enquiry-direct-actions .btn, .contact-direct-actions .btn { flex: 1 1 100%; }
}