@charset "UTF-8";
/* ==========================================================================
   Samsung Services Center — stylesheet
   --------------------------------------------------------------------------
   1.  Tokens
   2.  Reset & base
   3.  Layout helpers
   4.  Buttons
   5.  Top bar
   6.  Header & navigation
   7.  Hero
   8.  Split band (text + image)
   9.  Service cards (dark section)
   10. Why choose us
   11. Explore / detail rows
   12. Service areas
   13. Process stepper
   14. FAQ
   15. CTA band
   16. Contact & forms
   17. Footer
   18. Floating actions
   19. Inner page header
   20. Utilities
   21. Responsive
   22. Motion, print & forced colours
   ========================================================================== */

/* ==========================================================================
   1. Tokens
   ========================================================================== */
:root {
  /* brand palette */
  --primary: #2189ff;        /* accents, icons, large fills */
  --primary-dark: #0961c6;   /* blue SURFACES with white text, and links — 5.9:1 on white, 5.1:1 on the cream band */
  --primary-darker: #0857b0;
  --primary-light: #7fbaff;  /* blue accent ON a dark surface (6.3:1 on #323333) */
  --primary-tint: #eaf3ff;
  --primary-tint-2: #d5e7ff;
  --secondary: #323333;      /* every dark surface: sections, footer, page heads */
  --btn: #010202;            /* buttons only */
  --btn-hover: var(--primary-dark);

  /* text on the dark (#323333) surfaces */
  --on-dark: #c9ccd0;
  --on-dark-soft: #bcc0c4;
  --on-dark-muted: #9a9ea2;
  --hover-grey: #f2f3f5;     /* dropdown / list hover */

  /* neutrals */
  --ink: #323333;
  --body: #55595b;
  --muted: #6b7075;
  --line: #e2e5e9;
  --line-dark: rgba(255, 255, 255, .14);
  --bg-soft: #f4f6f8;
  --bg-cream: #eeefec;
  --white: #fff;
  --wa: #25d366;

  /* type — Samsung's brand faces first, then a close geometric fallback.
     See assets/fonts/README for self-hosting SamsungOne / Samsung Sharp Sans. */
  --font-sans: "SamsungOne", "Samsung Sharp Sans", "SamsungSharpSans",
               -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-display: "Samsung Sharp Sans", "SamsungSharpSans", "SamsungOne",
                  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;

  /* shape & depth */
  --radius: 4px;
  --radius-lg: 8px;
  /* Site rule: nothing is a circle. Every icon tile, badge and round-looking
     control uses this radius instead. Do not reintroduce border-radius: 50%. */
  --radius-icon: 7px;
  --shadow-sm: 0 2px 10px rgba(1, 2, 2, .06);
  --shadow: 0 14px 34px rgba(1, 2, 2, .1);
  --shadow-lg: 0 26px 60px rgba(1, 2, 2, .16);

  /* metrics */
  --wrap: 1240px;
  --gap: clamp(1.25rem, 2.5vw, 2rem);
  --section-y: clamp(2.25rem, 4.5vw, 3.5rem);
  --header-h: 78px;

  /* decorative patterns lifted from the design */
  --dots: radial-gradient(currentColor 1.6px, transparent 1.7px);
  --hatch: repeating-linear-gradient(-45deg, currentColor 0 1px, transparent 1px 9px);
}

/* ==========================================================================
   2. Reset & base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 20px);
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--body);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5 {
  margin: 0 0 .65em;
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -.02em;
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 4.6vw, 3.4rem); }
h2 { font-size: clamp(1.65rem, 3.6vw, 2.65rem); }
h3 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); }
h4 { font-size: 1.02rem; }

p { margin: 0 0 1.1rem; }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 1.1rem; padding-left: 1.25rem; }
li { margin-bottom: .4rem; }
strong, b { font-weight: 700; color: var(--ink); }

a { color: var(--primary-dark); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--primary-darker); }

img, svg, video { max-width: 100%; height: auto; display: block; }
/* photos get a neutral plate while they load; logos must stay transparent */
.svc-card > img, .detail-row > img, .cta > img, .hero-bg { background: var(--bg-soft); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
  border-radius: 2px;
}

::selection { background: var(--primary); color: #fff; }

/* skip link */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--btn); color: #fff; padding: .7rem 1.1rem;
  border-radius: var(--radius); font-weight: 700; text-decoration: none;
  transition: top .18s ease;
}
.skip-link:focus { top: 12px; color: #fff; }

/* ==========================================================================
   3. Layout helpers
   ========================================================================== */
.container { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; }
.container-narrow { max-width: 900px; }

.section { padding-block: var(--section-y); }
.section-soft { background: var(--bg-soft); }
.section-dark { background: var(--secondary); color: var(--on-dark); }
.section-dark :is(h1, h2, h3, h4) { color: #fff; }

/* Headings and copy are left-aligned across the whole site — no centred
   section heads, no justified paragraphs. */
.section-head { max-width: 820px; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.section-head > p { font-size: 1.03rem; }
.section-head > p:last-child { margin-bottom: 0; }

.eyebrow {
  display: block;
  font-family: var(--font-sans);
  font-size: .78rem; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--primary-dark); margin-bottom: .7rem;
}
.section-dark .eyebrow { color: var(--primary-light); }
.muted { color: var(--muted); }

/* ==========================================================================
   4. Buttons
   ========================================================================== */
.btn {
  --btn-bg: var(--btn);
  --btn-fg: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .62rem 1.25rem;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid var(--btn-bg); border-radius: var(--radius);
  font: inherit; font-weight: 600; font-size: .88rem; line-height: 1.45;
  text-align: center; text-decoration: none; cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease,
              transform .2s ease, box-shadow .2s ease;
}
.btn:hover {
  --btn-bg: var(--btn-hover);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.btn:active { transform: translateY(0); }
.btn svg { width: 15px; height: 15px; fill: currentColor; flex: 0 0 auto; }
/* trailing arrow: nudges forward on hover */
.btn-arrow { width: 17px !important; height: 17px !important; transition: transform .2s ease; }
.btn:hover .btn-arrow { transform: translateX(3px); }

.btn-primary { --btn-bg: var(--primary-dark); }
.btn-primary:hover { --btn-bg: var(--primary-darker); }
.btn-light { --btn-bg: #fff; --btn-fg: var(--btn); }
.btn-light:hover { --btn-bg: var(--primary-dark); --btn-fg: #fff; }
.btn-outline-light { --btn-bg: transparent; --btn-fg: #fff; border-color: rgba(255,255,255,.5); }
.btn-outline-light:hover { --btn-bg: #fff; --btn-fg: var(--btn); border-color: #fff; }
/* WhatsApp green is a fixed brand colour, and white on it is only 1.98:1.
   Dark ink on the same green is 10.5:1, so the colour stays and the text passes. */
.btn-wa { --btn-bg: var(--wa); --btn-fg: var(--btn); border-color: var(--wa); }
.btn-wa:hover { --btn-bg: #1fbe5b; --btn-fg: var(--btn); border-color: #1fbe5b; }
.btn-wa:hover { color: var(--btn); }
.btn-lg { padding: .78rem 1.6rem; font-size: .95rem; }
.btn-block { width: 100%; }

/* ==========================================================================
   5. Top bar
   ========================================================================== */
/* brand-blue strip. Only pure white clears AA on #0a6ede, so nothing here is dimmed. */
.topbar { background: var(--primary-dark); color: #fff; font-size: .855rem; }
.topbar a { color: #fff; text-decoration: none; display: inline-block; padding-block: 3px; }
.topbar a:hover { text-decoration: underline; text-underline-offset: 3px; }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; min-height: 44px; flex-wrap: wrap; }
.topbar-list { display: flex; align-items: center; gap: 1.75rem; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.topbar-list li { display: flex; align-items: center; gap: .5rem; margin: 0; }
.topbar-list svg { width: 15px; height: 15px; fill: #fff; opacity: .85; flex: 0 0 auto; }
.social { display: flex; align-items: center; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.social li { margin: 0; }
.social a { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-icon); background: rgba(255,255,255,.16); transition: background .18s ease, color .18s ease; }
.social a:hover { background: #fff; }
.social svg { width: 14px; height: 14px; fill: currentColor; }
.topbar .social a { color: #fff; }
.topbar .social a:hover { color: var(--primary-dark); }

/* ==========================================================================
   6. Header & navigation
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--line);
  transition: box-shadow .2s ease;
}
.site-header.is-stuck { box-shadow: 0 6px 22px rgba(1, 2, 2, .1); }
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: var(--header-h); position: relative;
}

.logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
.logo img { height: 50px; width: auto; }

.header-right { display: flex; align-items: center; gap: 2rem; }

.nav { display: flex; align-items: center; gap: 1.9rem; list-style: none; margin: 0; padding: 0; }
.nav > li { margin: 0; position: relative; }
.nav > li > a,
.nav > li > .nav-parent {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .5rem 0;
  font: inherit; font-size: .97rem; font-weight: 600;
  color: var(--ink); background: none; border: 0; cursor: pointer;
  text-decoration: none; white-space: nowrap;
  position: relative;
}
.nav > li > a::after,
.nav > li > .nav-parent::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -2px;
  height: 2px; background: var(--primary); transition: right .22s ease;
}
.nav > li > a:hover, .nav > li > .nav-parent:hover { color: var(--primary-dark); }
.nav > li > a:hover::after,
.nav > li > .nav-parent:hover::after,
.nav > li > [aria-current="page"]::after,
.nav > li.is-open > .nav-parent::after { right: 0; }
.nav > li > [aria-current="page"] { color: var(--primary-dark); }
.nav-caret { width: 11px; height: 11px; fill: currentColor; transition: transform .2s ease; }
.nav > li.is-open .nav-caret { transform: rotate(180deg); }

/* dropdown */
.subnav {
  position: absolute; left: -14px; top: calc(100% + 10px); z-index: 10;
  /* 292px fitted the service names; "Samsung Service Center Abu Dhabi"
     wrapped to two lines, so the panel sizes to its longest label now
     and 292px is only the floor. */
  min-width: 292px; width: max-content; max-width: min(360px, 90vw); margin: 0;
  /* no side padding: the hover highlight has to reach both edges of the panel */
  padding: .35rem 0;
  list-style: none; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;               /* keeps a full-bleed row inside the rounded corners */
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.nav > li.is-open > .subnav { opacity: 1; visibility: visible; transform: translateY(0); }
.subnav li { margin: 0; }
.subnav a {
  display: block; padding: .68rem 1.15rem; border-radius: 0;
  color: var(--ink); font-size: .93rem; font-weight: 600; text-decoration: none;
  border-left: 3px solid transparent;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.subnav a:hover {
  background: var(--hover-grey); color: var(--ink);
  border-left-color: var(--primary);
}

.header-cta { display: flex; align-items: center; gap: .75rem; }
.header-phone {
  display: inline-flex; align-items: center; gap: .6rem;
  background: var(--btn); color: #fff;
  padding: .52rem 1rem; border-radius: var(--radius);
  font-weight: 600; font-size: .88rem; text-decoration: none; white-space: nowrap;
  transition: background .18s ease, color .18s ease;
}
.header-phone:hover { background: var(--primary-dark); color: #fff; }
.header-phone svg { width: 14px; height: 14px; fill: currentColor; flex: 0 0 auto; }

.nav-toggle {
  display: none; width: 44px; height: 44px; padding: 10px;
  background: none; border: 0; cursor: pointer;
}
.nav-toggle span { display: block; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .22s ease, opacity .22s ease; }
.nav-toggle span + span { margin-top: 6px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ==========================================================================
   7. Hero
   ========================================================================== */
.hero {
  position: relative; isolation: isolate;
  display: grid; place-items: center;
  min-height: clamp(460px, 72vh, 720px);
  padding-block: calc(var(--section-y) * 1.5);
  text-align: left; color: #fff;
  background: var(--secondary);
}
.hero-bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  /* Weighted to the left, where the copy sits, so the photograph stays visible
     on the right. Measured against the actual hero image with the text hidden:
     worst case 5.49:1, against a 4.5:1 AA minimum. Do not lighten these stops
     without re-measuring — see the note in CLAUDE.md.
     The 38% stop was .78 while the hero carried a shorter block of copy; the
     longer copy reaches further across the photograph, and at .78 the worst
     case had fallen to 4.61:1 — still a pass, but with almost no headroom for
     the next copy change. */
  background:
    linear-gradient(90deg,
      rgba(28, 30, 33, .90) 0%,
      rgba(28, 30, 33, .84) 38%,
      rgba(28, 30, 33, .52) 68%,
      rgba(28, 30, 33, .30) 100%),
    linear-gradient(0deg, rgba(10, 110, 222, .06), rgba(10, 110, 222, .06));
}
.hero h1 { color: #fff; margin-bottom: .4em; text-shadow: 0 2px 20px rgba(0, 0, 0, .35); }
.hero .container { display: flex; flex-direction: column; align-items: flex-start; }
.hero h1 { max-width: 20ch; }
.hero p { color: rgba(255, 255, 255, .9); max-width: 62ch; }
/* the four proof points under the hero copy: the tick list, on a dark ground */
.hero-points { margin-top: 1.25rem; }
.hero-points li { margin-bottom: .45rem; color: rgba(255, 255, 255, .92); }
.hero-points svg { fill: var(--primary-light); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem; }

/* ==========================================================================
   8. Split band — copy on the left, full-bleed image on the right
   ========================================================================== */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  background: var(--bg-cream);
}
.split-body {
  /* keeps the text aligned to the site container while the image bleeds out */
  width: 100%;
  max-width: calc(var(--wrap) / 2);
  margin-left: auto;
  padding: var(--section-y) clamp(1.75rem, 3vw, 3rem) var(--section-y) 20px;
}
.split-body h2 { max-width: 22ch; }
.split-body p { max-width: 54ch; }
.split-action { margin-top: 1.75rem; }
.split-media {
  width: 100%; height: 100%;
  min-height: 380px;
  object-fit: cover;
  background: var(--bg-soft);
  border-radius: 0;
}

/* A run of plain body copy with no cards or grid around it. Measure is capped
   so a long paragraph does not run the full width of the container. */
.prose { max-width: 68ch; }
.prose > * + * { margin-top: 1.1rem; }

/* ticked feature list */
.tick-list { list-style: none; padding: 0; margin: 1.5rem 0 0; }
.tick-list li { display: flex; gap: .6rem; align-items: flex-start; margin-bottom: .6rem; font-size: .97rem; }
.tick-list li:last-child { margin-bottom: 0; }
.tick-list svg { width: 18px; height: 18px; fill: var(--primary-dark); flex: 0 0 auto; margin-top: .28rem; }

/* ==========================================================================
   9. Service cards (dark section)
   ========================================================================== */
.svc-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap);
  align-items: start;
}
.svc-card { display: flex; flex-direction: column; height: 100%; }
.svc-card > img {
  width: 100%; aspect-ratio: 10 / 7; object-fit: cover;
  border-radius: var(--radius) var(--radius) 0 0;
}
.svc-body {
  position: relative;
  display: flex; flex-direction: column; flex: 1 1 auto;
  margin: -3.25rem 1rem 0; padding: 1.75rem 1.5rem 1.6rem;
  background: #fff; border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.svc-body::before {           /* dotted pattern behind the heading */
  content: ""; position: absolute; top: 1.15rem; right: 1.15rem;
  width: 84px; height: 60px; color: var(--primary-tint-2);
  background-image: var(--dots); background-size: 12px 12px;
  opacity: .95; pointer-events: none;
}
/* the card is a light surface inside .section-dark, so re-assert text colours */
.svc-body { color: var(--body); }
.svc-body h3 { position: relative; margin-bottom: .75rem; color: var(--ink); padding-right: 4.5rem; }
.svc-body p { font-size: .95rem; }

/* "interested in a repair?" filler that sits in the last grid row */
.svc-invite {
  grid-column: span 2;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  gap: 1.1rem; padding: 2rem 0;
}
.svc-invite-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 3.6vw, 2.65rem); font-weight: 800;
  line-height: 1.18; letter-spacing: -.02em;
  color: #fff;                 /* a <p> does not inherit .section-dark's white headings */
  text-wrap: balance;
}

/* ==========================================================================
   10. Why choose us
   ========================================================================== */
/* Three across, because there are six cards — four across leaves a ragged
   row of two. Revisit if the number of cards changes. */
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.75rem, 3vw, 2.75rem); }
/* four cards read as 2x2; three-across leaves the fourth stranded on its own row.
   The responsive rules in section 21 come later in the file and still win. */
.why-grid-2 { grid-template-columns: repeat(2, 1fr); }
/* No frame, no border, no radius — the tinted icon tile carries the structure.
   The hatched corner went with the frame; it read as stray texture without it. */
.why-card { height: 100%; }
.why-inner { height: 100%; }
.why-icon {
  display: grid; place-items: center;
  width: 56px; height: 56px; margin: 0 0 1.15rem;
  background: var(--primary-tint);
  border-radius: var(--radius-icon);
}
.why-icon svg { width: 28px; height: 28px; fill: var(--primary-dark); }
.why-inner h3 { font-size: 1.12rem; margin-bottom: .5rem; }
.why-inner p { font-size: .93rem; margin: 0 0 .9rem; }
.why-inner p:last-child { margin-bottom: 0; }

/* ==========================================================================
   11. Explore / detail rows
   ========================================================================== */
.detail-row {
  display: grid; grid-template-columns: 400px 1fr; gap: 0;
  align-items: stretch; margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.detail-row:last-child { margin-bottom: 0; }
.detail-row > img { width: 100%; height: 100%; min-height: 260px; object-fit: cover; }
/* Product cut-outs, not lifestyle photos. They are RGBA with a fully transparent
   background, so they must sit on the section itself rather than on a plate of
   their own — hence `transparent`, which works whether the surrounding section is
   --bg-soft (home) or white (services). `contain` keeps the appliance uncropped,
   and the padding just gives it room to breathe. */
.detail-row > img.is-product {
  object-fit: contain;
  background: transparent;
  padding: clamp(1.25rem, 2.5vw, 2.25rem);
}
.detail-body { padding: clamp(1.5rem, 2.5vw, 2.25rem); background: var(--bg-soft); }
.detail-row.is-flipped { grid-template-columns: 1fr 400px; }
.detail-row.is-flipped > img { order: 2; }
.detail-body h3 { font-size: clamp(1.2rem, 2vw, 1.55rem); margin-bottom: .9rem; }
/* the three sub-headings inside a detail row: Common X Problems,
   What We Inspect and Repair, X Care Tips */
.detail-body h4 { margin: 1.9rem 0 .5rem; color: var(--ink); }
.detail-body h4:first-of-type { margin-top: 0; }
.detail-body > p { font-size: .98rem; }
/* the one-line direct answer that opens a service section */
.detail-body > p.lede { font-size: 1.08rem; font-weight: 600; color: var(--ink); }
/* These were buttons until the call-to-action buttons came out. As plain text
   an inline link is only its line-height tall — 17px, under the 24px WCAG 2.2
   minimum — so the block padding is doing real work here, not decoration. */
.jump-link {
  display: inline-block; padding-block: 4px;
  font-weight: 600; text-decoration-thickness: 1px;
}

/* ==========================================================================
   12. Service areas
   ========================================================================== */
.areas-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.areas-grid.is-auto { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.area-card { padding: 1.85rem 1.75rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.area-card h3 { font-size: 1.3rem; margin-bottom: 1rem; }
.area-card ul { list-style: none; padding: 0; margin: 0; }
.area-card li { position: relative; padding-left: 1.15rem; margin-bottom: .6rem; font-size: .96rem; }
.area-card li::before { content: ""; position: absolute; left: 0; top: .68em; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); }
.area-card li:last-child { margin-bottom: 0; }
.areas-action { margin-top: clamp(1.75rem, 3vw, 2.5rem); }

/* ==========================================================================
   13. Process stepper — numbered badge over a circular icon, joined by a line
   ========================================================================== */
.steps {
  --step-gap: clamp(.75rem, 2vw, 1.75rem);
  --step-size: 84px;
  --step-count: 4;          /* keep in sync with the number of <li class="step"> */
  position: relative;
  display: grid; grid-template-columns: repeat(var(--step-count), 1fr);
  gap: var(--step-gap);
  list-style: none; margin: 0; padding: 0;
}
/* One continuous connector; the opaque tiles hide it between themselves, which
   is what reads as a segmented line. It has to start and end at the centre of
   the first and last tile.
   The tiles are left-aligned in their columns, so the first centre is simply
   half a tile in from the left. The last one is half a tile in from the left
   edge of the final column, and that column is
   (100% - (N-1) gaps) / N wide — hence the right inset below.
   Driving both off --step-count means changing the number of steps cannot
   silently leave the line hanging in mid-air, which is exactly what the old
   hard-coded five-column version did. */
.steps::before {
  content: "";
  position: absolute; z-index: 0;
  top: calc(var(--step-size) / 2 - 1px);
  left: calc(var(--step-size) / 2);
  right: calc((100% - (var(--step-count) - 1) * var(--step-gap)) / var(--step-count)
              - var(--step-size) / 2);
  height: 2px;
  background: linear-gradient(90deg, var(--primary-light), var(--primary), var(--primary-light));
}
/* Left-aligned like everything else on the site — see CLAUDE.md. The tile
   therefore sits at the left edge of its column, not in the middle of it,
   which is what the ::before insets above are calculated against. */
.step { position: relative; z-index: 1; margin: 0; }
.step-mark {
  position: relative; display: block;
  width: var(--step-size); height: var(--step-size);
  margin: 0 0 1.4rem;
}
.step-icon {
  display: grid; place-items: center;
  width: 100%; height: 100%;
  background: var(--primary-tint); border: 0; border-radius: var(--radius-icon);
}
.step-icon svg { width: 32px; height: 32px; fill: var(--primary-dark); }
.step-num {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  z-index: 2;
  padding: .12rem .55rem;
  background: var(--primary-dark); color: #fff;
  border: 2px solid var(--bg-soft); border-radius: var(--radius-icon);
  font-family: var(--font-display); font-size: .75rem; font-weight: 700;
  letter-spacing: .04em; line-height: 1.5;
}
.step h3 { font-size: 1.04rem; margin-bottom: .4rem; }
.step p { font-size: .92rem; margin: 0; }

/* ==========================================================================
   14. FAQ
   ========================================================================== */
.faq { max-width: 980px; }
/* each question is its own card with a gap between, rather than one joined stack */
.faq-item {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: .85rem;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.faq-item:last-of-type { margin-bottom: 0; }
.faq-item[open] { background: #fff; border-color: var(--line); box-shadow: var(--shadow-sm); }
/* light rule under the question once it is open */
.faq-item[open] summary { border-bottom: 1px solid var(--line); }
.faq-item summary {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.15rem 1.35rem; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-plus { position: relative; width: 16px; height: 16px; flex: 0 0 auto; }
.faq-plus::before, .faq-plus::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  background: var(--primary); transition: transform .22s ease, opacity .22s ease;
}
.faq-plus::before { width: 16px; height: 2px; }
.faq-plus::after { width: 2px; height: 16px; }
.faq-item[open] .faq-plus::after { transform: rotate(90deg); opacity: 0; }
.faq-chevron { width: 15px; height: 15px; fill: var(--muted); margin-left: auto; flex: 0 0 auto; transition: transform .22s ease; }
.faq-item[open] .faq-chevron { transform: rotate(90deg); }
.faq-body {
  padding: 1.15rem 1.35rem 1.35rem 3.35rem; font-size: .97rem;
  /* the height itself is animated in main.js; this just softens the reveal */
  animation: faq-reveal .28s cubic-bezier(.4, 0, .2, 1) both;
}
@keyframes faq-reveal {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   15. CTA band
   ========================================================================== */
.cta { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.cta-body {
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--section-y) clamp(1.25rem, 5vw, 4rem);
  background: var(--primary-dark); color: #fff;
}
.cta-body h2 { color: #fff; }
.cta-body .kicker { font-size: 1rem; font-weight: 600; color: #fff; margin-bottom: .4rem; }
.cta-body h2 {
  font-family: var(--font-serif); font-weight: 600; letter-spacing: -.01em;
  font-size: clamp(1.75rem, 3.6vw, 2.85rem); line-height: 1.15; margin-bottom: 1.6rem;
}
.cta > img { width: 100%; height: 100%; min-height: 300px; object-fit: cover; }

/* ==========================================================================
   16. Contact & forms
   ========================================================================== */
.contact-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }

.info-list { list-style: none; padding: 0; margin: 0; }
.info-list li { display: flex; gap: 1rem; margin-bottom: 1.4rem; }
.info-list li:last-child { margin-bottom: 0; }
.info-icon { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 auto; background: var(--primary-tint); border-radius: var(--radius-icon); }
.info-icon svg { width: 20px; height: 20px; fill: var(--primary-dark); }
.info-list strong { display: block; font-size: .96rem; margin-bottom: .1rem; }
.info-list a { display: inline-block; padding-block: 4px; text-decoration: none; font-weight: 600; }
.info-list span { display: block; font-size: .95rem; }

.form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.5rem, 3vw, 2.25rem); box-shadow: var(--shadow); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field { margin-bottom: 1.15rem; }
.field label { display: block; font-size: .91rem; font-weight: 700; color: var(--ink); margin-bottom: .4rem; }
.field .req { color: #d33; }
.field input, .field select, .field textarea {
  width: 100%; padding: .8rem .95rem;
  font: inherit; font-size: .97rem; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(33, 137, 255, .18);
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #d33; }
.field-error { display: block; font-size: .84rem; color: #d33; margin-top: .3rem; min-height: 1em; }
.form-note { font-size: .87rem; margin-top: 1rem; }
/* Honeypot. Moved off-screen rather than display:none, because some bots skip
   hidden fields but happily fill an off-screen one. */
.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form-status { font-size: .93rem; font-weight: 600; margin-top: 1rem; }
.form-status.is-ok { color: #157347; }
.form-status.is-error { color: #d33; }

/* ==========================================================================
   17. Footer
   ========================================================================== */
.site-footer { background: var(--secondary); color: var(--on-dark-soft); padding-block: var(--section-y) 1.5rem; font-size: .95rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1.3fr 1.2fr; gap: clamp(1.75rem, 3vw, 3rem); }
.footer-logo { height: 44px; width: auto; background: #fff; padding: 7px 12px; border-radius: var(--radius); margin-bottom: 1.25rem; }
.footer-head { color: #fff; font-size: 1.06rem; margin-bottom: 1.15rem; }
.footer-list { list-style: none; padding: 0; margin: 0; }
.footer-list li { margin-bottom: .3rem; }
.footer-list a {
  display: inline-block; padding-block: 4px;   /* 24px minimum tap target */
  color: var(--on-dark-soft); text-decoration: none;
  transition: color .16s ease, padding-left .16s ease;
}
.footer-list a:hover { color: #fff; padding-left: 4px; }
.footer-contact { list-style: none; padding: 0; margin: 0; }
.footer-contact li { display: flex; gap: .7rem; margin-bottom: .85rem; }
.footer-contact svg { width: 16px; height: 16px; fill: var(--primary-light); flex: 0 0 auto; margin-top: .35rem; }
.footer-contact a { display: inline-block; padding-block: 4px; color: #fff; text-decoration: none; }
.footer-contact a:hover { color: #fff; }
.site-footer .social { margin-top: 1.4rem; }
.site-footer .social a { color: #fff; }
.site-footer .social a:hover { color: var(--primary-dark); }
.footer-bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem;
  margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.5rem;
  border-top: 1px solid var(--line-dark); font-size: .87rem;
}
.footer-bottom p { margin: 0; }
.footer-bottom a { display: inline-block; padding-block: 4px; color: var(--on-dark-soft); text-decoration: none; }
.footer-bottom a:hover { color: #fff; }

/* ==========================================================================
   18. Floating actions
   ========================================================================== */
.floaties { position: fixed; right: 16px; bottom: 16px; z-index: 90; display: flex; flex-direction: column; gap: .65rem; }
.floatie {
  display: grid; place-items: center; width: 48px; height: 48px;
  border-radius: var(--radius-icon); text-decoration: none;
  box-shadow: 0 10px 26px rgba(1, 2, 2, .28);
  transition: transform .18s ease;
}
.floatie:hover { transform: scale(1.09); }
.floatie svg { width: 23px; height: 23px; fill: #fff; }
.floatie-wa { background: var(--wa); }
.floatie-call { background: var(--primary-dark); }

/* ==========================================================================
   19. Inner page header
   ========================================================================== */
.page-head {
  position: relative; isolation: isolate;
  background: var(--secondary); color: var(--on-dark);
  padding-block: var(--section-y);
}
.page-head-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
/* Same approach as the hero: weighted to the left where the copy sits, so the
   photograph stays visible on the right. Measured against the real image with
   the text hidden — see herocontrast. Do not lighten these stops without
   re-measuring. */
.page-head::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg,
      rgba(28, 30, 33, .94) 0%,
      rgba(28, 30, 33, .90) 55%,
      rgba(28, 30, 33, .68) 80%,
      rgba(28, 30, 33, .46) 100%),
    linear-gradient(0deg, rgba(10, 110, 222, .06), rgba(10, 110, 222, .06));
}
.page-head h1 { color: #fff; margin-bottom: .5rem; }
.page-head p { max-width: 68ch; margin: 0; }
/* the about page leads with three paragraphs, so they need space between */
.page-head p + p { margin-top: 1.1rem; }

/* A link on a dark surface cannot use the default --primary-dark: #0961c6 on
   #323333 is 1.4:1, unreadable. --primary-light is 6.3:1 on the same surface.
   Scoped to the paragraph so it cannot reach the breadcrumb links above it,
   which set their own colour; buttons bring their own foreground. */
.page-head p a,
.section-dark a:not(.btn) { color: var(--primary-light); }
.page-head p a:hover,
.section-dark a:not(.btn):hover { color: #fff; }
.crumbs { margin-bottom: .9rem; font-size: .88rem; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.crumbs li { display: flex; align-items: center; gap: .4rem; margin: 0; color: var(--on-dark-muted); }
.crumbs li + li::before { content: "/"; color: var(--on-dark-muted); opacity: .6; }
.crumbs a { display: inline-block; padding-block: 4px; color: var(--on-dark-soft); text-decoration: none; }
.crumbs a:hover { color: #fff; }

/* generic content cards used on inner pages */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: var(--gap); }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.75rem; height: 100%; }
.card p { font-size: .95rem; }
/* cards that are themselves links */
a.card { text-decoration: none; color: var(--body); transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
a.card:hover { border-color: var(--primary); box-shadow: var(--shadow); transform: translateY(-3px); }
.card-title { font-size: 1.14rem; }
.card-meta { font-size: .86rem; margin: 0; }
.form-hint { font-size: .94rem; }

/* ==========================================================================
   18b. Team, job examples and reviews — the first-hand-experience blocks
   ========================================================================== */
/* --- Google reviews: the rating summary, then the cards in a slider ------- */
.gr-summary {
  display: flex; align-items: center; flex-wrap: wrap; gap: .9rem 1.3rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
  padding: 1.1rem 1.35rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
}
.gr-summary-body { margin-right: auto; }
/* The Google wordmark is not reproduced — this is the letter, in Google's
   darker blue, next to the word itself. #1967d2 is 5.4:1 on white; the
   lighter #1a73e8 measures 4.5:1, which is too close to the line for text
   this small. */
.gr-mark {
  display: grid; place-items: center; flex: none;
  width: 40px; height: 40px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-icon);
  font-family: var(--font-sans); font-weight: 800; font-size: 1.3rem; line-height: 1;
  color: #1967d2;
}
.gr-mark-lg { width: 54px; height: 54px; font-size: 1.7rem; }
.gr-score { margin: 0; font-size: .93rem; color: var(--body); }
.gr-score strong { margin-right: .35rem; font-size: 1.55rem; color: var(--ink); }
.gr-count { display: flex; align-items: center; gap: .45rem; margin: .2rem 0 0; font-size: .86rem; color: var(--muted); }
.review-stars { color: #c77700; letter-spacing: .06em; }

.slider { position: relative; }
/* a real scroll container, so a swipe, a trackpad, the keyboard and the
   scrollbar all page it even if the script never runs */
/* contain: paint is not decoration. Without it Chromium keeps reporting the
   off-screen cards in documentElement.scrollWidth, so the page measures as
   ~850px wider than the viewport even though it cannot be scrolled sideways
   — every "content wider than screen" test fails on a carousel that is in
   fact clipping correctly. */
.slider-viewport {
  overflow-x: auto; overflow-y: hidden; contain: paint;
  scroll-snap-type: x mandatory; scrollbar-width: none;
}
.slider-viewport::-webkit-scrollbar { width: 0; height: 0; }
/* the focus ring comes from the global :where(..., [tabindex]):focus-visible
   rule — the viewport carries tabindex="0" so a keyboard user can scroll it */

.review-track {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * var(--gap)) / 3);
  gap: var(--gap);
  margin: 0; padding: 0; list-style: none;
}
.review {
  display: flex; flex-direction: column;
  scroll-snap-align: start;
  padding: clamp(1.4rem, 2.4vw, 1.9rem);
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
}
.review-head { display: flex; align-items: center; gap: .7rem; margin-bottom: .85rem; }
/* the reviewer's initial in a circle, the way Google draws an account with no
   profile photo; the G chip sits on the right as the source mark */
.review-avatar {
  display: grid; place-items: center; flex: none;
  width: 38px; height: 38px;
  background: var(--primary-dark); border-radius: var(--radius-icon);
  font-family: var(--font-sans); font-weight: 700; font-size: 1rem; line-height: 1;
  color: #fff;
}
.review-name { margin-right: auto; font-weight: 700; font-size: .97rem; color: var(--ink); }
.review-head .gr-mark { width: 28px; height: 28px; font-size: .95rem; }
.review-rating { margin-bottom: .8rem; font-size: 1.05rem; }
.review blockquote { margin: 0 0 1.2rem; font-size: .97rem; color: var(--ink); }
.review-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .8rem;
  margin: auto 0 0; padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: .84rem; color: var(--muted);
}
/* the one green on the site, and only here: a verified mark reads as green or
   it does not read at all. 6.6:1 on white. */
.gr-badge { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; color: #0b6b3a; }
.gr-badge svg { flex: none; width: 15px; height: 15px; fill: currentColor; }
.review-appliance { margin-left: auto; }

.slider-nav { display: flex; align-items: center; gap: .5rem; margin-top: clamp(1.25rem, 2.5vw, 1.75rem); }
.slider-btn {
  display: grid; place-items: center; flex: none;
  width: 44px; height: 44px;
  background: #fff; border: 1px solid var(--muted); border-radius: var(--radius-icon);
  color: var(--ink); cursor: pointer;
}
.slider-btn:hover { background: var(--primary-tint); border-color: var(--primary-dark); color: var(--primary-dark); }
.slider-btn svg { width: 18px; height: 18px; fill: currentColor; }
/* #i-chevron points right, so only the previous button needs turning */
[data-slider-prev] svg { transform: rotate(180deg); }
.slider-dots { display: flex; align-items: center; margin-left: .35rem; }
.slider-dot { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; background: none; border: 0; cursor: pointer; }
.slider-dot::before { content: ""; width: 9px; height: 9px; background: var(--muted); border-radius: 2px; }
.slider-dot[aria-current="true"]::before { width: 22px; background: var(--primary-dark); border-radius: 2px; }

/* ==========================================================================
   18c. Branch map — drawn, not embedded
   --------------------------------------------------------------------------
   No Google iframe: that would be a third-party request on the busiest page
   and would need the CSP opened up. The outline is one path, the pins are
   real HTML text over it, and each branch links out to Google Maps for
   directions. The pin coordinates come from content.py's BRANCHES — if a
   branch moves, both files change.
   ========================================================================== */
.costs-layout { display: grid; grid-template-columns: 1fr 400px; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.map-card {
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
}
.map-lead { margin-bottom: 1rem; font-size: .93rem; color: var(--body); }
/* no padding here: the pins are positioned in per-cent of this box, so any
   padding would slide them off the coastline */
.map-plot { position: relative; max-width: 440px; margin-bottom: 1.35rem; background: #eef4fb; border-radius: var(--radius); } /* water */
.map-svg { display: block; width: 100%; height: auto; }
.map-land { fill: var(--primary-tint-2); stroke: var(--primary-dark); stroke-width: 3; stroke-linejoin: round; }
.map-pin {
  position: absolute; display: inline-flex; align-items: center; gap: .25rem;
  margin: 0; white-space: nowrap;
  transform: translate(-11px, -100%);
}
.map-pin svg { flex: none; width: 22px; height: 22px; fill: var(--primary-dark); }
.map-pin span {
  padding: .12rem .45rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  font-family: var(--font-sans); font-size: .79rem; font-weight: 700; color: var(--ink);
}
/* Dubai and Sharjah are only a few pixels apart, so Dubai's label goes left */
.map-pin-dubai { left: 72.1%; top: 34.1%; flex-direction: row-reverse; transform: translate(calc(-100% + 11px), -100%); }
.map-pin-abu-dhabi { left: 58%; top: 52.3%; }
.map-pin-sharjah { left: 77%; top: 26.3%; }

.branch-list { margin: 0; padding: 0; list-style: none; }
.branch + .branch { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.branch h3 { margin-bottom: .5rem; font-size: 1.02rem; }
.branch-line { display: flex; gap: .5rem; margin-bottom: .25rem; font-size: .9rem; color: var(--body); }
.branch-line svg { flex: none; width: 17px; height: 17px; margin-top: .3rem; fill: var(--primary-dark); }
.branch-dir { margin: .55rem 0 0; font-size: .88rem; }
.branch-line a, .branch-dir a { padding-block: .25rem; }

/* ==========================================================================
   18d. About page rows — the copy with the matching photograph beside it
   ========================================================================== */
.about-row { display: grid; grid-template-columns: 420px 1fr; gap: clamp(1.75rem, 3.5vw, 3rem); align-items: start; }
.about-row.is-flipped { grid-template-columns: 1fr 420px; }
.about-row.is-flipped > img { order: 2; }
.about-row > img { width: 100%; height: auto; border-radius: var(--radius); background: var(--bg-soft); }
.about-row .prose { max-width: 62ch; }

/* the same card, used as a whole-card link on the services index */
.svc-card-link { text-decoration: none; color: inherit; transition: transform .2s ease; }
.svc-card-link:hover { transform: translateY(-2px); color: inherit; }
.svc-more {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .88rem; font-weight: 600; color: var(--primary-light);
}
.svc-more svg { width: 14px; height: 14px; fill: currentColor; transition: transform .2s ease; }
.svc-card-link:hover .svc-more svg { transform: translateX(3px); }

/* ==========================================================================
   18e. Long service page — copy on the left, sticky link rail on the right
   ========================================================================== */
.with-aside { display: grid; grid-template-columns: 1fr 300px; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.with-aside-body > h2 { margin-top: clamp(2rem, 4vw, 3rem); }
.with-aside-body > h2:first-child { margin-top: 0; }
.with-aside-body > h3 { margin-top: 1.75rem; font-size: 1.1rem; }
.with-aside-body > p { max-width: 72ch; }
/* .tick-list carries no bottom margin — in the hero the next element brings
   its own. In a long-form body the prose resumes straight after it, and
   without this the paragraph sits flush against the last bullet. */
.with-aside-body > .tick-list { margin-bottom: 1.5rem; }

.page-aside { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 1.25rem; }
.aside-card { padding: 1.25rem 1.35rem; background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius); }
.aside-title {
  margin-bottom: .75rem;
  font-family: var(--font-sans); font-size: .78rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.aside-list { list-style: none; margin: 0; padding: 0; }
.aside-list li + li { border-top: 1px solid var(--line); }
.aside-list a { display: block; padding: .55rem 0; font-size: .93rem; font-weight: 600; text-decoration: none; }
.aside-list a:hover { text-decoration: underline; }

/* the fifteen faults: a real <ol>, with the number drawn as the site's badge */
.fault-list { list-style: none; margin: 0; padding: 0; counter-reset: fault; }
/* direct children only. A step can hold a tick list, and an unscoped
   `.fault-list li` numbered those bullets too: the eight items under step 1
   came out as 02 to 09 and step 2 was numbered 10. */
.fault-list > li { position: relative; margin-bottom: 1.5rem; padding-left: 3.25rem; counter-increment: fault; }
.fault-list > li:last-child { margin-bottom: 0; }
.fault-list > li::before {
  content: counter(fault, decimal-leading-zero);
  position: absolute; left: 0; top: .1rem;
  display: grid; place-items: center; min-width: 34px; height: 26px;
  background: var(--primary-dark); border-radius: var(--radius-icon);
  font-family: var(--font-sans); font-size: .8rem; font-weight: 800; color: #fff;
}
.fault-list h3 { margin-bottom: .35rem; font-size: 1.08rem; }
.fault-list p { margin: 0; }
/* the emirate pages reuse this list for a numbered process, where a step can
   run to two paragraphs. The fault entries above are all single ones. */
.fault-list p + p { margin-top: .6rem; }
/* a step can also hold its own tick list. .fault-list p has no margin, so
   the list has to carry the spacing on both of its sides. */
.fault-list .tick-list { margin: .75rem 0 .9rem; }
/* an appliance heading on an emirate page links to that appliance's page.
   A heading that is a link is a tap target in its own right, not a link
   inside a sentence, so SC 2.5.8's in-sentence exception does not apply:
   the 19px line box needs padding to clear 24px. */
.with-aside-body h3 a { display: inline-block; padding-block: .25rem; text-decoration: none; }
.with-aside-body h3 a:hover { text-decoration: underline; }

.mini-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.25rem, 2.5vw, 2rem); }
/* the emirate pages list their districts two across, each with a pin */
.area-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: .1rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.area-list li { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .35rem; font-size: .95rem; }
.area-list svg { flex: none; width: 15px; height: 15px; fill: var(--primary-dark); transform: translateY(2px); }
.mini h3 { margin-bottom: .35rem; font-size: 1.05rem; }
.mini p { margin: 0; font-size: .95rem; }

/* ==========================================================================
   19b. Legal pages — a long numbered document with its own contents list
   ========================================================================== */
.legal { display: grid; grid-template-columns: 260px 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
/* the contents list follows the reader down the page on a wide screen; the
   offset clears the sticky header so a jumped-to clause is not hidden by it */
.legal-toc { position: sticky; top: calc(var(--header-h) + 24px); }
.legal-toc-title {
  font-family: var(--font-sans); font-size: .78rem; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--primary-dark); margin-bottom: .8rem;
}
.legal-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.legal-toc li { margin-bottom: .1rem; counter-increment: toc; }
.legal-toc a {
  display: block; padding: .35rem 0 .35rem 2.1rem;
  position: relative; font-size: .92rem; text-decoration: none; color: var(--body);
  border-left: 2px solid var(--line); margin-left: -2px;
}
.legal-toc a::before {
  content: counter(toc, decimal-leading-zero);
  position: absolute; left: .9rem; color: var(--muted);
  font-size: .78rem; font-weight: 700;
}
.legal-toc a:hover { color: var(--primary-dark); border-left-color: var(--primary); background: var(--bg-soft); }

.legal-body { max-width: 68ch; }
.legal-clause + .legal-clause { margin-top: clamp(2.25rem, 4vw, 3.25rem); }
.legal-clause h2 {
  display: flex; align-items: baseline; gap: .8rem;
  font-size: clamp(1.2rem, 2.1vw, 1.6rem); margin-bottom: .9rem;
}
.legal-num {
  flex: 0 0 auto;
  font-size: .82rem; font-weight: 800; letter-spacing: .04em;
  color: var(--primary-dark);
  background: var(--primary-tint);
  border-radius: var(--radius-icon);
  padding: .18rem .5rem;
}
.legal-clause p { font-size: .98rem; }

/* the "last updated" line under a page-head heading */
.page-head-meta { margin-top: .9rem; font-size: .9rem; color: var(--on-dark-muted); }
.page-head-meta time { color: var(--on-dark-soft); font-weight: 600; }

/* ==========================================================================
   20. Utilities
   ========================================================================== */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* spacing utilities — the CSP forbids inline style attributes, so anything
   that would have been style="margin-…" needs a class here instead */
.mt-3 { margin-top: 1.25rem; }
.mt-4 { margin-top: 1.5rem; }
.mt-5 { margin-top: 2.5rem; }
.mb-1 { margin-bottom: .5rem; }

/* ==========================================================================
   21. Responsive
   ========================================================================== */
@media (max-width: 1100px) {
  /* the connector is hidden below this width, so the column count is the
     only thing that has to change — --step-count drives the grid. */
  .steps { --step-count: 2; row-gap: 2.5rem; }
  .legal { grid-template-columns: 1fr; }
  .review-track { grid-auto-columns: calc((100% - var(--gap)) / 2); }
  .costs-layout { grid-template-columns: 1fr; }
  .legal-toc { position: static; }
  .steps::before { display: none; }
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .svc-invite { grid-column: span 2; }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .nav { gap: 1.35rem; }
  .header-right { gap: 1.25rem; }
}

@media (max-width: 980px) {
  .split { grid-template-columns: 1fr; }
  .split-body {
    max-width: var(--wrap); margin: 0 auto;
    padding: var(--section-y) 20px clamp(2rem, 4vw, 3rem);
  }
  .split-media {
    order: 0; min-height: 0; aspect-ratio: 16 / 10; max-height: 420px;
    border-radius: 0;
  }
  .detail-row, .detail-row.is-flipped { grid-template-columns: 1fr; }
  .detail-row.is-flipped > img { order: 0; }
  .detail-row > img { min-height: 220px; aspect-ratio: 16 / 9; }
  .areas-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .cta { grid-template-columns: 1fr; }
  .cta > img { order: -1; min-height: 240px; max-height: 340px; }
}

@media (max-width: 900px) {
  /* full-width copy needs a full-width wash, same as the hero */
  .page-head::after {
    background:
      linear-gradient(180deg, rgba(28, 30, 33, .80) 0%, rgba(28, 30, 33, .92) 100%),
      linear-gradient(0deg, rgba(10, 110, 222, .06), rgba(10, 110, 222, .06));
  }
  .with-aside { grid-template-columns: 1fr; }
  .page-aside { position: static; grid-template-columns: repeat(2, 1fr); }
  .about-row, .about-row.is-flipped { grid-template-columns: 1fr; }
  .about-row.is-flipped > img { order: 0; }
  /* full-width copy needs a full-width wash — measured 8.15:1 on the real photo */
  .hero::after {
    background:
      linear-gradient(180deg, rgba(28, 30, 33, .70) 0%, rgba(28, 30, 33, .88) 100%),
      linear-gradient(0deg, rgba(10, 110, 222, .06), rgba(10, 110, 222, .06));
  }
  .nav-toggle { display: block; }
  .header-right {
    position: absolute; left: 0; right: 0; top: 100%;
    display: none; flex-direction: column; align-items: stretch; gap: 0;
    padding: .5rem 20px 1.25rem;
    background: #fff; border-top: 1px solid var(--line);
    box-shadow: 0 18px 30px rgba(1, 2, 2, .12);
    max-height: calc(100vh - var(--header-h)); overflow-y: auto;
  }
  .header-right.is-open { display: flex; }
  .nav { flex-direction: column; align-items: stretch; gap: 0; }
  .nav > li { border-bottom: 1px solid var(--line); }
  .nav > li > a, .nav > li > .nav-parent { width: 100%; padding: .95rem 0; justify-content: space-between; }
  .nav > li > a::after, .nav > li > .nav-parent::after { display: none; }
  .subnav {
    position: static; min-width: 0; margin: 0 0 .75rem; padding: 0;
    background: none; border: 0; border-left: 2px solid var(--primary);
    border-radius: 0; box-shadow: none; overflow: visible;
    display: none; opacity: 1; visibility: visible; transform: none;
  }
  .nav > li.is-open > .subnav { display: block; }
  /* same full-width highlight on the collapsed menu */
  .subnav a { color: var(--body); padding: .6rem .85rem; border-left-width: 0; }
  .subnav a:hover { background: var(--hover-grey); color: var(--ink); }
  .header-cta { flex-direction: column; align-items: stretch; margin-top: 1rem; }
  .header-phone { justify-content: center; }
  .logo img { height: 40px; }
  :root { --header-h: 66px; }
}

@media (max-width: 720px) {
  .topbar-list { gap: 1rem; row-gap: .25rem; font-size: .82rem; }
  .topbar-list li:nth-child(3) { display: none; }
  .svc-grid, .why-grid, .form-row, .mini-grid, .area-list { grid-template-columns: 1fr; }
  .page-aside { grid-template-columns: 1fr; }
  .review-track { grid-auto-columns: 100%; }
  .svc-invite { grid-column: span 1; padding-block: 1rem; }
  .svc-body { margin-inline: .75rem; }
  .faq-body { padding-left: 1.35rem; }
  .footer-grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .floatie { width: 48px; height: 48px; }
  .floatie svg { width: 24px; height: 24px; }
  .hero-actions .btn { width: 100%; }
}

@media (max-width: 460px) {
  /* single column: the badge reads better beside the text than above it */
  .steps { --step-count: 1; row-gap: 1.75rem; }
  .step { display: grid; grid-template-columns: 68px 1fr; gap: 0 1.1rem; text-align: left; }
  .step-mark { --step-size: 68px; grid-row: span 2; margin: 0; }
  .step-icon svg { width: 26px; height: 26px; }
  .step h3 { margin-bottom: .25rem; }
  .topbar-social { display: none; }
  .btn { width: 100%; }
}

/* ==========================================================================
   22. Motion, print & forced colours
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  .btn:hover, .floatie:hover { transform: none; }
}

@media (forced-colors: active) {
  .btn, .header-phone, .floatie { border: 1px solid ButtonText; }
  .faq-plus::before, .faq-plus::after { background: CanvasText; }
}

@media print {
  .topbar, .site-header, .floaties, .hero-actions, .cta, .form-card { display: none !important; }
  body { color: #000; font-size: 11pt; }
  .section { padding-block: 1rem; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; word-break: break-all; }
  .section-dark, .site-footer { background: #fff !important; color: #000 !important; }
  .section-dark :is(h1,h2,h3), .site-footer :is(h1,h2,h3) { color: #000 !important; }
}