/* =============================================================================
   UNITECH MAINTENANCE — design system "Precision Calm"
   Warm ivory surfaces · deep ink · the azure of the company mark · saffron spark
   Fraunces (display) · Manrope (interface) · JetBrains Mono (codes & numbers)
   Signature shape: the gable — the house silhouette from the logo.
   ============================================================================= */

:root {
  /* surfaces */
  --ivory:    #F7F4EE;
  --paper:    #FFFFFF;
  --sand-50:  #FCFCF4;   /* the cream inside the company mark — the site's tray tint */
  --sand-100: #F0EBE2;
  --sand-200: #E4DDD0;
  --sand-300: #D3CAB9;

  /* ink */
  --ink:      #0F1B23;
  --ink-2:    #17262F;
  --ink-3:    #22343F;
  --ink-soft: #4A5A64;
  --ink-mute: #5E6A70;   /* ≥4.69:1 on every light surface (AA for small text) */
  --ink-line: rgba(255,255,255,.10);

  /* brand — five rungs of the blue in the company mark, each with a defined job */
  --az-50:  #EAF2FD;   /* tint: icon tiles, table head, the independence notice */
  --az-300: #7FB4F2;   /* on the ink surfaces — 8.1:1 */
  --az-500: #1177E3;   /* the logo blue itself: fills, masks, graphics. Not small text. */
  --az-600: #0E62C4;   /* interactive fills — white text 5.9:1 */
  --az-700: #0B4FA0;   /* text blue: links, labels, numerals — 7.9:1 on white */
  --az-800: #082F6E;   /* hover and pressed — 12.8:1 on white */
  --saffron:    #F0A02B;
  --saffron-600:#975F0A;  /* text-safe saffron: 4.8:1 on saffron-50 */
  --saffron-50: #FDF3E1;

  /* semantic */
  --wa:   #178243;   /* white label 4.87:1 — WhatsApp's own #25D366 fails AA with white text */
  --wa-700:#14723B;
  --ok:   #17784A;   /* 4.86:1 on the pale-green badge */
  --warn: #B45309;

  /* brand-page accent (overridden inline per brand) */
  --brand:     var(--saffron);
  --brand-ink: var(--az-700);

  /* type */
  --f-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --f-ui:      "Manrope", "Segoe UI", system-ui, -apple-system, "Noto Sans Arabic", sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* shape & depth
     Radius nesting rule: an inner radius is the outer radius minus the padding
     between them, snapped DOWN to the nearest rung. Keeps corners concentric. */
  --r-xs: 8px;    /* code pips, inner chips */
  --r-sm: 12px;   /* icon tiles, inner trays, form fields */
  --r-md: 16px;   /* rows, notices, small cards */
  --r-lg: 22px;   /* cards, panels */
  --r-xl: 30px;   /* shells, hero frame, the CTA, the map */

  /* Elevation, three rungs, tinted with the brand ink rather than neutral black.
     flat + 1px border = a row inside a container · sh-1 = a standalone card ·
     sh-2 = a container that groups cards · sh-3 = something floating above the page. */
  --sh-1: 0 1px 2px rgba(11,38,74,.07), 0 1px 1px rgba(11,38,74,.05);
  --sh-2: 0 10px 30px -12px rgba(11,38,74,.20), 0 2px 6px rgba(11,38,74,.06);
  --sh-3: 0 30px 60px -24px rgba(11,38,74,.34), 0 8px 20px -10px rgba(11,38,74,.16);
  --ring: 0 0 0 3px rgba(17,119,227,.30);

  /* spacing scale — sections and components measure from this, not from inline styles */
  --s-1: 8px; --s-2: 14px; --s-3: 22px; --s-4: 34px; --s-5: 52px;

  --wrap: 1240px;
  --gut: clamp(18px, 4vw, 40px);
  --hdr-h: 76px;

  /* THE GABLE — the house silhouette of the company mark, used as a mask.
     Flat bottom with softened corners, chamfered shoulders, a rounded apex.
     preserveAspectRatio is 'none', so every gable box must keep an aspect ratio
     between 0.72 and 0.86 or the roof pitch drifts. */
  --gable: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 132' preserveAspectRatio='none'%3E%3Cpath d='M50 0q4.6 0 8.2 2.4L96.3 29.4q3.7 2.7 3.7 7.2V120q0 12-12 12H12Q0 132 0 120V36.6q0-4.5 3.7-7.2L41.8 2.4Q45.4 0 50 0Z'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- base ---- */
*, *::before, *::after { box-sizing: border-box; }
/* clip, not hidden — hidden on a scroll container breaks position:sticky */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hdr-h) + 16px); overflow-x: clip; }
body {
  margin: 0; background: var(--ivory); color: var(--ink);
  font: 400 16.5px/1.65 var(--f-ui);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--az-700); text-decoration-thickness: .08em; text-underline-offset: .18em; }
a:hover { color: var(--az-800); }
button { font: inherit; color: inherit; }
/* A real indicator that keeps each control's own shape. The old rule forced a 6px
   radius onto every pill and relied on a translucent glow of about 1.3:1. */
:focus-visible { outline: 2.5px solid var(--az-600); outline-offset: 2px; box-shadow: none; }
.on-dark :focus-visible, .section--ink :focus-visible, .ftr :focus-visible { outline-color: var(--az-300); }
::selection { background: var(--saffron-50); color: var(--ink); }
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 10px; text-decoration: none; }
.skip:focus { top: 12px; }

/* ---------------------------------------------------------- typography ---- */
h1, h2, h3, h4 { margin: 0; color: var(--ink); }
.display, h1, h2 {
  font-family: var(--f-display); font-weight: 600; letter-spacing: -.022em;
  font-variation-settings: "opsz" 96, "SOFT" 40;
}
h1 { font-size: clamp(2.35rem, 1.3rem + 4.2vw, 4.4rem); line-height: 1.02; }
h2 { font-size: clamp(1.85rem, 1.25rem + 2.3vw, 3rem); line-height: 1.08; }
/* Three rungs for h3 and nothing between them. .h3-sm sits inside a card,
   .h3-lg is the display cut used by panels and the booking card. */
h3 { font: 700 1.22rem/1.3 var(--f-ui); letter-spacing: -.01em; }
.h3-sm { font: 700 1.08rem/1.35 var(--f-ui); letter-spacing: -.005em; }
.h3-lg { font: 600 1.5rem/1.15 var(--f-display); letter-spacing: -.02em; font-variation-settings: "opsz" 96, "SOFT" 40; }
h4 { font: 700 .98rem/1.35 var(--f-ui); }
p { margin: 0 0 1em; }
.lead { font-size: clamp(1.04rem, .98rem + .3vw, 1.2rem); line-height: 1.6; color: var(--ink-soft); max-width: 62ch; }
.mono { font-family: var(--f-mono); font-feature-settings: "zero" 1; letter-spacing: -.01em; }
em.hl, .hl { font-style: italic; color: var(--az-700); font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1; }

/* ONE micro-label. Every uppercase label on the site is .cap — there used to be
   fifteen near-identical declarations with eight sizes and four tracking values. */
.cap, .glance__t, .appl__label, .fx__meta small { font: 800 .75rem/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); }
.on-dark .cap { color: #93A2AA; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font: 800 .75rem/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase;
  color: var(--az-700);
}
.eyebrow::before {   /* the gable pip — the mark at its smallest useful size */
  content: ""; width: 11px; height: 13px; flex: none;
  background: var(--az-500); -webkit-mask: var(--gable) center/100% 100% no-repeat; mask: var(--gable) center/100% 100% no-repeat;
}
.on-dark .eyebrow { color: var(--az-300); }
.on-dark .eyebrow::before { background: var(--az-300); }

/* -------------------------------------------------------------- layout ---- */
.wrap { width: min(100% - 2 * var(--gut), var(--wrap)); margin-inline: auto; }
.wrap--narrow { width: min(100% - 2 * var(--gut), 820px); margin-inline: auto; }
.section { padding-block: clamp(64px, 5vw + 32px, 120px); position: relative; }
.section--tight { padding-block: clamp(44px, 3vw + 24px, 72px); }
.section--paper { background: var(--paper); }
.section--sand  { background: var(--sand-100); }
.section--ink   { background: var(--ink); color: #D6DEE2; }
.section--ink h2, .section--ink h3 { color: #fff; }
.section--ink .lead { color: #A8B6BD; }
.grid-bg::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse at 70% 30%, #000 20%, transparent 75%);
          mask-image: radial-gradient(ellipse at 70% 30%, #000 20%, transparent 75%);
}
.sec-head { display: grid; gap: 14px; margin-bottom: clamp(32px, 3vw, 52px); max-width: 780px; }
.sec-head--center { margin-inline: auto; text-align: center; justify-items: center; }
.sec-head--split { max-width: none; grid-template-columns: 1fr auto; align-items: end; gap: 24px 48px; }
.sec-head p { margin: 0; }
.grid { display: grid; gap: clamp(16px, 2vw, 24px); }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Two-column bands. The bare .split keeps a general-purpose ratio for the simple
   pairs on the home, contact, pricing and about pages; anywhere one side is much
   taller than the other, use a modifier or a .shell instead — one ratio doing every
   job is what produced the dead columns on the brand pages. */
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.split--label { grid-template-columns: .78fr 1.22fr; align-items: start; }   /* a label beside tall content */
.split--even  { grid-template-columns: 1fr 1fr; align-items: center; }  /* copy beside a form */
.split--wide  { grid-template-columns: 1.2fr .8fr; align-items: start; }     /* prose beside a card */
.split--top { align-items: start; }
.stack > * + * { margin-top: 1rem; }

/* A column that always reaches the row's full height, with its last block pinned to
   the bottom. Whatever slack exists becomes composed spacing instead of a void. */
.flow { display: flex; flex-direction: column; }
.flow__end { margin-top: auto; }

/* ---------------------------------------------- the section register ---- */
/* Every major section opens the same way: a gable numeral, the section name, a
   hairline, and a live count taken from this brand's own data. The count is what
   lets one component describe a data-rich and a data-thin brand honestly. */
.srule { display: grid; grid-template-columns: auto auto minmax(20px, 1fr) auto; gap: 18px; align-items: center; margin-bottom: clamp(26px, 2.6vw, 40px); }
.srule__t { font: 800 .78rem/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.srule__l { height: 1px; background: var(--sand-300); }
.srule__c { font: 600 .78rem/1 var(--f-mono); color: var(--ink-mute); font-variant-numeric: tabular-nums; white-space: nowrap; }
.on-dark .srule__t { color: #fff; }
.on-dark .srule__l { background: rgba(255,255,255,.16); }
.on-dark .srule__c { color: #93A2AA; }

/* The gable numeral: the company mark carrying the section number. The per-brand
   accent appears only as the bar across its flat bottom edge. */
.gnum {
  position: relative; display: grid; place-items: center; width: 40px; height: 52px; flex: none;
  font: 600 .9rem/1 var(--f-mono); color: var(--sand-50); background: var(--az-700);
  -webkit-mask: var(--gable) center/100% 100% no-repeat; mask: var(--gable) center/100% 100% no-repeat;
}
.gnum::after { content: ""; position: absolute; left: 7px; right: 7px; bottom: 7px; height: 3px; border-radius: 2px; background: var(--brand); }
.on-dark .gnum { background: var(--az-500); color: #06101A; }

/* ------------------------------------------------------- the shell ---- */
/* One bordered container owning its own split. The short side is a painted panel
   divided by a hairline, so leftover space reads as a surface, not an absence. */
.shell { border: 1px solid var(--sand-200); border-radius: var(--r-xl); background: var(--paper); box-shadow: var(--sh-2); overflow: hidden; }
.shell__grid { display: grid; grid-template-columns: var(--shell-cols, .78fr 1.22fr); }
.shell__aside { display: flex; flex-direction: column; gap: var(--s-3); padding: clamp(26px, 3vw, 44px); background: var(--sand-50); border-inline-end: 1px solid var(--sand-200); }
.shell__aside > h2 { margin: 0; }
.shell__aside .lead { margin: 0; }
.shell__main { padding: clamp(22px, 2.6vw, 34px); min-width: 0; }
.shells { display: grid; gap: clamp(16px, 2vw, 26px); }   /* several shells under one register row */
.shell__main.prose > :first-child { margin-top: 0; }
.shell__main.prose h3:first-child { margin-top: 0; }

/* The ledger of computed facts that gives the short side something true to say. */
.facts { margin: auto 0 0; display: grid; border-top: 1px solid var(--sand-200); }
.facts > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--sand-200); }
.facts dt { font: 600 .9rem/1.3 var(--f-ui); color: var(--ink-soft); }
.facts dd { margin: 0; font: 600 1.02rem/1 var(--f-mono); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Three equal-height cells. A band that cannot void, because nothing short is
   paired against anything tall. */
.band3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: clamp(16px, 2vw, 24px); align-items: start; }
.band3 > * { display: flex; flex-direction: column; }
.band3 .panel p:last-of-type { margin-bottom: 0; }
.band3 .jobs { grid-template-columns: 1fr; }
.band3 .jobpic { aspect-ratio: 4/3; }

/* the label column of a .split--label: a composed column, never a lone heading */
.split__sticky { position: sticky; top: calc(var(--hdr-h) + 24px); align-self: start; display: flex; flex-direction: column; gap: var(--s-2); }
.split__sticky h2 { margin: 0; }
.stack-tight { display: grid; gap: var(--s-2); }
.lead--side { margin: 0; max-width: 52ch; }
.bhero__media { position: relative; }
h3 + .btiles, h3 + .related { margin-top: 16px; }

/* ------------------------------------------------------------- buttons ---- */
.btn {
  --bg: var(--ink); --fg: #fff; --bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 22px; border-radius: 999px; border: 1.5px solid var(--bd);
  background: var(--bg); color: var(--fg); font: 700 .98rem/1 var(--f-ui); letter-spacing: -.005em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.btn svg { width: 19px; height: 19px; flex: none; }
.btn:hover { transform: translateY(-1px); color: var(--fg); }
.btn:active { transform: translateY(0); }
.btn--primary { --bg: var(--az-600); box-shadow: 0 10px 24px -10px rgba(11,87,194,.62); }
.btn--primary:hover { --bg: var(--az-800); }
.btn--spark { --bg: var(--saffron); --fg: var(--ink); box-shadow: 0 10px 24px -10px rgba(240,160,43,.8); }
.btn--spark:hover { --bg: #F5B04A; }
.btn--wa { --bg: var(--wa); box-shadow: 0 10px 24px -10px rgba(31,175,90,.7); }
.btn--wa:hover { --bg: var(--wa-700); }
.btn--ghost { --bg: transparent; --fg: var(--ink); --bd: var(--sand-300); }
.btn--ghost:hover { --bd: var(--ink); }
.on-dark .btn--ghost, .btn--ghost-light { --bg: rgba(255,255,255,.04); --fg: #fff; --bd: rgba(255,255,255,.22); }
.on-dark .btn--ghost:hover, .btn--ghost-light:hover { --bd: rgba(255,255,255,.55); }
.btn--sm { min-height: 42px; padding: 0 16px; font-size: .9rem; }
.btn--lg { min-height: 58px; padding: 0 28px; font-size: 1.04rem; }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; text-decoration: none; }
.link-arrow svg { width: 17px; height: 17px; transition: transform .18s ease; }
.link-arrow:hover svg { transform: translateX(3px); }

/* ---------------------------------------------------------- icons ---- */
.ico { width: 22px; height: 22px; flex: none; }
.ico-tile {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; flex: none;
  background: var(--az-50); color: var(--az-700);
}
.ico-tile svg { width: 28px; height: 28px; }

/* ------------------------------------------------------ utility bar ---- */
.topbar { background: var(--ink); color: #B9C5CB; font: 600 .82rem/1 var(--f-ui); }
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; }
.topbar a { color: #fff; text-decoration: none; }
.topbar a:hover { color: var(--saffron); }
.topbar__live { display: inline-flex; align-items: center; gap: 9px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 rgba(30,158,97,.6); animation: pulse 2.4s infinite; flex: none; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(30,158,97,.55); } 70% { box-shadow: 0 0 0 9px rgba(30,158,97,0); } 100% { box-shadow: 0 0 0 0 rgba(30,158,97,0); } }
.topbar__links { display: flex; gap: 22px; align-items: center; }
.topbar__links span { color: #7F8E96; }
.topbar, .topbar a { white-space: nowrap; }
.tb-areas { color: #7F8E96; }
.tb-short { display: none; }
@media (max-width: 980px) { .tb-areas { display: none; } }
@media (max-width: 720px) { .tb-hide, .tb-long { display: none; } .tb-short { display: inline; } .topbar .wrap { min-height: 36px; } }

/* --------------------------------------------------------------- header ---- */
.hdr { position: sticky; top: 0; z-index: 60; background: rgba(247,244,238,.86); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; transition: border-color .2s, background-color .2s; }
.hdr.is-stuck { border-bottom-color: var(--sand-200); background: rgba(247,244,238,.95); }
.hdr .wrap { display: flex; align-items: center; gap: 24px; min-height: var(--hdr-h); }

/* The mark is the owner's artwork, used as supplied — never recoloured. The wordmark
   beside it is set in Manrope to the mark's own blue, so the second line survives at
   header size. The full supplied lockup is used only as the schema.org and social logo. */
.logo { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; flex: none; }
.logo__mark img { height: 44px; width: auto; }
.logo__txt { display: grid; gap: 5px; line-height: 1; }
.logo__name { font: 800 1.34rem/1 var(--f-ui); letter-spacing: .012em; text-transform: uppercase; color: var(--az-500); }
.logo__sub { font: 700 .585rem/1 var(--f-ui); letter-spacing: .285em; text-transform: uppercase; color: var(--ink-mute); }
.logo--sm .logo__mark img { height: 38px; }
.logo--sm .logo__name { font-size: 1.14rem; }
.logo--sm .logo__sub { font-size: .53rem; letter-spacing: .26em; }
.logo--lg { gap: 14px; }
.logo--lg .logo__mark img { height: 56px; }
.logo--lg .logo__name { font-size: 1.7rem; }
.logo--lg .logo__sub { font-size: .72rem; letter-spacing: .3em; }
.on-dark .logo__sub, .ftr .logo__sub { color: #93A1A8; }
@media (max-width: 560px) {
  .btn--callnow { padding: 0 13px; }
  .ribbon span { display: none; }      /* the long area list wrapped the pill onto two lines */
}
@media (max-width: 345px) {   /* narrowest phones: the header call button keeps its tap size, loses its label */
  .btn--callnow { min-width: 44px; }
  .btn--callnow span { display: none; }
}
@media (max-width: 560px) {
  .logo__mark img { height: 36px; }
  .logo__name { font-size: 1.1rem; }
  .logo__sub { font-size: .5rem; letter-spacing: .24em; }
}

.nav { display: flex; align-items: center; gap: 2px; margin-inline: auto; }
.nav__item { position: relative; }
.nav__link {
  display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 999px;
  font: 650 .95rem/1 var(--f-ui); color: var(--ink); text-decoration: none; background: none; border: 0; cursor: pointer;
}
.nav__link svg { width: 14px; height: 14px; transition: transform .2s; opacity: .6; }
.nav__link:hover, .nav__item:focus-within > .nav__link, .nav__link[aria-current="page"] { background: rgba(15,27,35,.06); color: var(--ink); }
.nav__item:hover .nav__link svg, .nav__item:focus-within .nav__link svg { transform: rotate(180deg); }

.mega {
  position: absolute; left: 50%; top: calc(100% + 10px); transform: translate(-50%, 8px);
  width: min(880px, 92vw); padding: 22px; border-radius: var(--r-lg);
  background: var(--paper); border: 1px solid var(--sand-200); box-shadow: var(--sh-3);
  opacity: 0; visibility: hidden; transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.mega::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.nav__item:hover > .mega, .nav__item:focus-within > .mega, .nav__item.is-open > .mega { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.mega--svc { width: min(640px, 92vw); }
.mega__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.mega__svc { display: flex; gap: 14px; align-items: center; padding: 12px; border-radius: 14px; text-decoration: none; color: var(--ink); }
.mega__svc:hover { background: var(--sand-50); color: var(--ink); }
.mega__svc .ico-tile { width: 44px; height: 44px; border-radius: 12px; }
.mega__svc .ico-tile svg { width: 24px; height: 24px; }
.mega__svc b { display: block; font-size: .95rem; }
.mega__svc small { color: var(--ink-mute); font-size: .8rem; }
.mega__brands { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 22px; }
.mega__t { margin: 0 0 10px;  font: 800 .68rem/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 10px; }
.mega__group a { display: block; padding: 5px 0; font-weight: 600; font-size: .92rem; color: var(--ink); text-decoration: none; }
.mega__group a:hover { color: var(--az-700); }
.mega__foot { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--sand-200); font-size: .88rem; color: var(--ink-soft); }

.hdr__cta { display: flex; align-items: center; gap: 12px; flex: none; }
.hdr__phone { display: grid; gap: 3px; text-align: right; text-decoration: none; color: var(--ink); }
.hdr__phone small { font: 700 .64rem/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); }
.hdr__phone b { font: 600 1.02rem/1 var(--f-mono); letter-spacing: -.02em; }
.burger { display: none; width: 48px; height: 48px; border-radius: 14px; border: 1px solid var(--sand-300); background: var(--paper); cursor: pointer; place-items: center; }
.burger svg { width: 22px; height: 22px; }

/* mobile drawer */
.drawer { position: fixed; inset: 0; z-index: 90; visibility: hidden; }
.drawer.is-open { visibility: visible; }
.drawer__scrim { position: absolute; inset: 0; background: rgba(15,27,35,.5); opacity: 0; transition: opacity .25s; }
.drawer.is-open .drawer__scrim { opacity: 1; }
.drawer__panel {
  position: absolute; right: 0; top: 0; bottom: 0; width: min(420px, 90vw); background: var(--ivory);
  transform: translateX(100%); transition: transform .3s cubic-bezier(.2,.8,.2,1);
  display: flex; flex-direction: column; overflow-y: auto;
}
.drawer.is-open .drawer__panel { transform: none; }
.drawer__top { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; border-bottom: 1px solid var(--sand-200); }
.drawer__close { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--sand-300); background: var(--paper); display: grid; place-items: center; cursor: pointer; }
.drawer__close svg { width: 20px; height: 20px; }
.drawer__body { padding: 10px 20px 24px; display: grid; gap: 2px; }
.drawer details { border-bottom: 1px solid var(--sand-200); }
.drawer summary, .drawer__link { display: flex; justify-content: space-between; align-items: center; padding: 16px 2px; font: 700 1.05rem/1.2 var(--f-ui); color: var(--ink); text-decoration: none; cursor: pointer; list-style: none; }
.drawer summary::-webkit-details-marker { display: none; }
.drawer summary svg { width: 18px; height: 18px; transition: transform .2s; }
.drawer details[open] summary svg { transform: rotate(180deg); }
.drawer__link { border-bottom: 1px solid var(--sand-200); }
.drawer__sub { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 14px; padding: 0 2px 16px; }
.drawer__sub a { padding: 7px 0; font-weight: 600; font-size: .95rem; color: var(--ink-soft); text-decoration: none; }
.drawer__actions { display: grid; gap: 10px; padding: 16px 20px 28px; margin-top: auto; }

/* ------------------------------------------------------------ heroes ---- */
.crumb { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font: 600 .84rem/1.4 var(--f-ui); color: var(--ink-mute); margin-bottom: 22px; }
.crumb a { color: inherit; text-decoration: none; }
.crumb a:hover { color: var(--az-700); }
.crumb span[aria-hidden] { opacity: .5; }
.on-dark .crumb { color: #8E9DA5; }
.on-dark .crumb a:hover { color: #fff; }

/* home hero */
.hero { position: relative; overflow: hidden; padding-block: clamp(40px, 5vw, 76px) clamp(64px, 6vw, 104px); }
.hero::after { /* soft azure wash */
  content: ""; position: absolute; width: 900px; height: 900px; right: -300px; top: -380px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(17,119,227,.12), transparent 62%);
}
.hero .wrap { position: relative; z-index: 1; }
.hero__grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero h1 { margin: 18px 0 22px; }
.hero h1 .hl { display: inline; }
.hero__areas { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0 0 26px; padding: 0; list-style: none; font: 700 .9rem/1 var(--f-ui); color: var(--ink); }
.hero__areas li { display: inline-flex; align-items: center; gap: 8px; }
.hero__areas li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--saffron); }
.hero .btn-row { margin-top: 30px; }
.hero__proof { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: var(--paper); border: 1px solid var(--sand-200); font: 700 .84rem/1 var(--f-ui); color: var(--ink); }
.chip svg { width: 16px; height: 16px; color: var(--az-700); }
.on-dark .chip { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: #E6ECEF; }
.on-dark .chip svg { color: var(--brand); }

/* page hero (legal, pricing, about) */
.phero { padding-block: clamp(40px, 5vw, 72px) clamp(40px, 4vw, 64px); border-bottom: 1px solid var(--sand-200); position: relative; overflow: hidden; }
.phero::after { content: ""; position: absolute; width: 640px; height: 640px; right: -220px; top: -300px; border-radius: 50%; background: radial-gradient(circle, rgba(240,160,43,.12), transparent 62%); pointer-events: none; }
.phero h1 { font-size: clamp(2.2rem, 1.4rem + 3.2vw, 3.6rem); margin: 14px 0 16px; max-width: 18ch; }
.phero .lead { max-width: 60ch; }

/* brand & service hero (dark, accent-themed) */
/* Both washes sit on the media side, so the text column stays on pure --ink and the
   per-brand accent contrast floor set in lib.php keeps holding. */
.bhero { position: relative; background: var(--ink); color: #C9D4D9; padding-block: clamp(36px, 4vw, 64px) clamp(64px, 6vw, 110px); }
.bhero::before { content: ""; position: absolute; inset: 0; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(900px 520px at 84% 12%, color-mix(in srgb, var(--brand) 22%, transparent), transparent 70%),
    radial-gradient(760px 540px at 92% 96%, rgba(17,119,227,.26), transparent 72%);
}
.bhero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 110px; pointer-events: none;
  background: linear-gradient(to top, var(--ivory), transparent); }
.bhero .wrap { position: relative; z-index: 1; }
.bhero__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.ribbon {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 10px; border-radius: 999px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  font: 800 .75rem/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: #E8EEF1;
}
.ribbon i { width: 11px; height: 13px; background: var(--az-300); -webkit-mask: var(--gable) center/100% 100% no-repeat; mask: var(--gable) center/100% 100% no-repeat; }
.ribbon span { color: #93A2AA; }
.bhero h1 { color: #fff; margin: 20px 0 20px; font-size: clamp(2.4rem, 1.2rem + 4.4vw, 4.6rem); }
.bhero h1 .bw { color: var(--brand); font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; }
.bhero h1 .loc { display: block; font: 600 clamp(1rem, .9rem + .45vw, 1.28rem)/1.35 var(--f-ui); color: #AEBCC3; margin-top: .75em; letter-spacing: -.005em; }
.bhero .lead { color: #AEBCC3; }
.bhero .btn-row { margin-top: 28px; }
.bhero__line { display: flex; align-items: center; gap: 14px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--ink-line); }
.bhero__line small { display: block; font: 800 .66rem/1 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: #7F8E96; margin-bottom: 7px; }
.bhero__line a { font: 600 1.35rem/1 var(--f-mono); color: #fff; text-decoration: none; letter-spacing: -.02em; }
.bhero__line a:hover { color: var(--brand); }

/* ----------------------------------------------------- gable frame ---- */
/* The logo's own construction — a tinted mat with the photograph set inside it,
   both cut to the gable. Its flat bottom edge is what the glance card docks onto;
   a shield's point could never give an element something to sit against. */
.gable-frame { position: relative; }
.gable-frame__mat {
  padding: 10px;
  background: linear-gradient(185deg, rgba(252,252,244,.30), color-mix(in srgb, var(--brand) 26%, rgba(252,252,244,.08)));
  -webkit-mask: var(--gable) center/100% 100% no-repeat; mask: var(--gable) center/100% 100% no-repeat;
}
.gable-frame__img {
  aspect-ratio: 4 / 5; width: 100%; overflow: hidden; background: var(--ink-3);
  -webkit-mask: var(--gable) center/100% 100% no-repeat; mask: var(--gable) center/100% 100% no-repeat;
}
.gable-frame__img img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.tag {
  position: absolute; right: 24px; top: 26px; display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border-radius: 999px;
  background: rgba(15,27,35,.82); color: #fff; font: 700 .78rem/1 var(--f-ui); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.14);
}
.tag svg { width: 14px; height: 14px; color: var(--ok); }

/* Docked, not floating: it overlaps the frame's flat bottom by a fixed amount at
   every viewport, instead of drifting over the old shield's point. */
.glance {
  position: relative; z-index: 2; width: calc(100% - 52px); margin: -34px auto 0;
  padding: 18px 20px; border-radius: var(--r-lg); background: rgba(255,255,255,.97); color: var(--ink);
  box-shadow: var(--sh-3); border: 1px solid var(--sand-200);
}
.glance--float { position: absolute; right: -6px; bottom: 4%; width: 250px; margin: 0; z-index: 3; }
.glance__t { margin: 0 0 12px; }
.glance ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.glance li { display: flex; gap: 10px; align-items: flex-start; font-weight: 700; font-size: .9rem; line-height: 1.3; }
.glance li svg { width: 18px; height: 18px; color: var(--az-700); flex: none; margin-top: 1px; }
.glance li small { display: block; font-weight: 600; color: var(--ink-mute); font-size: .78rem; margin-top: 2px; }

/* home hero art: two gable photos */
.hero-art { position: relative; min-height: 520px; }
.hero-art .gable-frame { position: absolute; }
.hero-art .sf-1 { width: 62%; right: 0; top: 0; }
.hero-art .sf-2 { width: 42%; left: 0; bottom: 0; --brand: var(--saffron); }

/* --------------------------------------------------- promises strip ---- */
.promises { display: grid; grid-template-columns: repeat(4, 1fr); border-radius: var(--r-lg); background: var(--paper); border: 1px solid var(--sand-200); box-shadow: var(--sh-2); overflow: hidden; }
.promise { display: flex; gap: 16px; padding: 24px; align-items: flex-start; }
.promise + .promise { border-left: 1px solid var(--sand-200); }
.promise svg { width: 30px; height: 30px; color: var(--az-700); flex: none; }
.promise b { display: block; font-size: 1rem; margin-bottom: 4px; }
.promise p { margin: 0; font-size: .88rem; line-height: 1.5; color: var(--ink-soft); }
/* On brand pages the rail above already carries the card chrome, so the strip
   sheds its own and becomes four divided cells on the page surface. */
.promises--bare { background: none; border: 0; box-shadow: none; border-radius: 0; }
.promises--bare .promise { padding: 22px 24px 22px 0; }
.promises--bare .promise + .promise { padding-left: 24px; }

/* --------------------------------------------------------- call band ---- */
/* The area pages are Google Ads landing pages and the goal is a phone call, so the
   number gets its own band directly under the hero — readable at arm's length, and
   a tap target on a phone. */
.callband {
  display: grid; grid-template-columns: 1.3fr auto; gap: clamp(20px, 3vw, 44px); align-items: center;
  padding: clamp(22px, 2.6vw, 34px); border-radius: var(--r-xl);
  background: var(--az-50); border: 1px solid #CFE0F8;
}
.callband__num { display: block; margin: 10px 0 12px; font: 600 clamp(1.9rem, 1.2rem + 2.2vw, 2.9rem)/1 var(--f-mono); letter-spacing: -.03em; color: var(--az-800); text-decoration: none; }
.callband__num:hover { color: var(--az-700); }
.callband__sub { margin: 0; max-width: 56ch; color: var(--ink-soft); font-size: .95rem; }
.callband__acts { display: grid; gap: 10px; min-width: 260px; }
.callband__note { display: flex; gap: 8px; align-items: center; justify-content: center; font: 600 .82rem/1 var(--f-ui); color: var(--ink-mute); margin-top: 2px; }
.callband__note svg { width: 15px; height: 15px; }

/* A one-line call prompt for the middle of a long page. */
.callstrip {
  display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; justify-content: space-between;
  margin-top: clamp(22px, 2.4vw, 32px); padding: 18px 22px; border-radius: var(--r-lg);
  background: var(--ink); color: #C9D4D9;
}
.callstrip p { margin: 0; max-width: 62ch; font-size: .96rem; }
.callstrip b { color: #fff; }

/* The three facts an Ads visitor is checking for, directly under the hero buttons. */
.bhero__ticks { list-style: none; margin: 24px 0 0; padding: 20px 0 0; border-top: 1px solid var(--ink-line); display: grid; gap: 9px; font: 600 .95rem/1.35 var(--f-ui); color: #DCE4E8; }
.bhero__ticks li { display: flex; gap: 10px; align-items: flex-start; }
.bhero__ticks svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--saffron); }

/* Sticky-header Call Now. Hidden on desktop pages whose header leads with "Book a
   repair"; shown on every call-first page, and on every page once the nav has
   collapsed, so a phone visitor always has the call one tap away at the top. */
.btn--callnow { display: none; }
.is-callfirst .btn--callnow { display: inline-flex; }
.is-callfirst .hdr__cta .btn--book { display: none; }
.is-callfirst .mbar { grid-template-columns: 1.7fr 1fr 1fr; }
.is-callfirst .mbar .m-call { background: var(--saffron); color: var(--ink); }

.charge--text { grid-template-columns: auto 1fr; align-items: start; }
.charge--text small { display: block; margin-top: 4px; line-height: 1.5; }

/* Interactive Google map (contact page only). */
.gmap { border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--sand-200); box-shadow: var(--sh-2); background: var(--sand-100); }
.gmap iframe { display: block; width: 100%; height: clamp(320px, 42vw, 460px); border: 0; }

/* ------------------------------------- Google Business Profile band ---- */
.gbp {
  display: grid; grid-template-columns: 1.2fr auto; gap: clamp(22px, 3vw, 48px); align-items: center;
  padding: clamp(24px, 2.8vw, 38px); border-radius: var(--r-xl);
  background: var(--paper); border: 1px solid var(--sand-200); box-shadow: var(--sh-2);
}
.gbp h2 { margin: 10px 0 16px; }
.gbp__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; font-size: .94rem; color: var(--ink-soft); }
.gbp__list li { display: flex; gap: 12px; align-items: center; }
.gbp__list svg { width: 19px; height: 19px; flex: none; color: var(--az-700); }
.gbp__list a { text-decoration: none; }
.gbp__acts { display: grid; gap: 10px; min-width: 268px; }

/* ------------------------------------------------------- hero rail ---- */
/* The page's own numbers, counted from this brand's data — the honest substitute
   for the ratings and review counts the claims registry forbids. */
.hero-rail {
  display: grid; grid-template-columns: repeat(var(--rail-n, 4), 1fr);
  margin-top: calc(-1 * clamp(34px, 4vw, 54px)); position: relative; z-index: 2;
  border-radius: var(--r-xl); background: var(--sand-50); border: 1px solid var(--sand-200); box-shadow: var(--sh-2); overflow: hidden;
}
.hero-rail > div { display: flex; gap: 13px; align-items: center; padding: 20px 22px; }
.hero-rail > div + div { border-inline-start: 1px solid var(--sand-200); }
.hero-rail i { width: 11px; height: 13px; flex: none; background: var(--az-500); -webkit-mask: var(--gable) center/100% 100% no-repeat; mask: var(--gable) center/100% 100% no-repeat; }
.hero-rail b { display: block; font: 600 1.42rem/1 var(--f-mono); color: var(--ink); font-variant-numeric: tabular-nums; margin-bottom: 6px; }

/* -------------------------------------------------------- cards ---- */
.card { background: var(--paper); border: 1px solid var(--sand-200); border-radius: var(--r-lg); padding: clamp(22px, 2.2vw, 30px); box-shadow: var(--sh-1); }
.card--hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.card--hover:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: var(--sand-300); }

/* service card */
.svc { display: flex; flex-direction: column; gap: 14px; text-decoration: none; color: var(--ink); position: relative; overflow: hidden; }
.svc:hover { color: var(--ink); }
.svc h3 { font-size: 1.2rem; }
.svc p { margin: 0; color: var(--ink-soft); font-size: .95rem; }
.svc__price { margin-top: auto; padding-top: 16px; border-top: 1px dashed var(--sand-300); display: flex; justify-content: space-between; align-items: baseline; font-size: .86rem; color: var(--ink-mute); font-weight: 600; }
.svc__price b { font: 600 1.05rem/1 var(--f-mono); color: var(--ink); }
.svc .link-arrow { color: var(--az-700); }

/* appliance card (brand pages) */
.appl { display: flex; flex-direction: column; gap: 14px; }
.appl__top { display: flex; gap: 14px; align-items: center; }
.appl__top .ico-tile { background: var(--az-50); color: var(--az-700); }
.appl h3 { font-size: 1.08rem; }
.appl > p { margin: 0; color: var(--ink-soft); font-size: .93rem; }
.appl__label { margin-top: 4px; }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ticks li { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; font-size: .92rem; line-height: 1.4; }
.ticks li::before { content: ""; width: 16px; height: 16px; margin-top: 2px; flex: none; border-radius: 50%;
  background: var(--az-600) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 8.3l2.3 2.2 4.7-5'/%3E%3C/svg%3E") center/16px no-repeat; }

/* Fault-code hints. These used to live in a hover-only tooltip marked aria-hidden,
   so none of them reached a touch user, a screen reader or a crawler. They are now
   a visible, tappable list pinned to the foot of the card by margin-top:auto —
   which also absorbs the nought-to-four chip variance between brands. */
.ahints { margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--sand-300); display: grid; gap: 6px; }
.ahint { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; min-height: 44px;
  text-decoration: none; color: var(--ink-soft); transition: color .15s; }
.ahint:hover { color: var(--ink); }
.ahint__code { display: grid; place-items: center; width: 40px; height: 48px; flex: none;
  font: 600 .74rem/1 var(--f-mono); color: var(--sand-50); background: var(--az-700);
  -webkit-mask: var(--gable) center/100% 100% no-repeat; mask: var(--gable) center/100% 100% no-repeat; }
/* A few manufacturers name a fault in words rather than giving it a code. The tile keeps
   its proportions — stretching it would skew the roof pitch — so the type steps down, and
   where even that will not fit the tile carries a glyph and the words stay in the text. */
.ahint__code--long { font-size: .615rem; letter-spacing: -.03em; }
.ahint__code svg, .fx__code svg { width: 55%; height: auto; }
.ahint span { font-size: .82rem; line-height: 1.4; }

/* fault code explorer */
.fx__filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.fx__filter { padding: 10px 16px; border-radius: 999px; border: 1.5px solid var(--sand-300); background: var(--paper); font: 700 .88rem/1 var(--f-ui); cursor: pointer; color: var(--ink-soft); }
.fx__filter[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
/* One column. A two-column grid of accordions is ragged by construction: every
   brand with an odd number of codes ended on a hole, and Fisher & Paykel put one
   card in a two-column grid. */
.fx__list { display: grid; grid-template-columns: 1fr; gap: 10px; }
.fx__item { background: var(--paper); border: 1px solid var(--sand-200); border-radius: var(--r-md); overflow: hidden; transition: border-color .2s, box-shadow .2s; scroll-margin-top: calc(var(--hdr-h) + 20px); }
.fx__item[open] { border-color: var(--sand-300); box-shadow: var(--sh-2); }
.fx__item:target { box-shadow: 0 0 0 2px var(--az-500), var(--sh-2); border-color: var(--az-500); }
.fx__item summary { list-style: none; display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; padding: 14px 20px 14px 16px; cursor: pointer; }
.fx__item summary::-webkit-details-marker { display: none; }
/* The code sits in a gable, so the codes read as one column of marks down the page
   instead of centring differently on every label length. */
.fx__code { display: grid; place-items: center; width: 50px; height: 60px; flex: none; position: relative;
  background: var(--az-700); color: var(--sand-50); font: 600 .88rem/1 var(--f-mono);
  -webkit-mask: var(--gable) center/100% 100% no-repeat; mask: var(--gable) center/100% 100% no-repeat; }
.fx__code::after { content: ""; position: absolute; left: 9px; right: 9px; bottom: 8px; height: 3px; border-radius: 2px; background: var(--brand); }
.fx__code--long { font-size: .72rem; letter-spacing: -.03em; }
.fx__meta small { display: block; margin-bottom: 6px; }
.fx__meta b { font-size: .96rem; line-height: 1.35; display: block; }
.fx__plus { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--sand-300); display: grid; place-items: center; transition: transform .2s, background-color .2s; }
.fx__plus svg { width: 14px; height: 14px; }
/* one rule for both accordions — the FAQ borrows .fx__plus from the fault-code list */
details[open] .fx__plus { transform: rotate(45deg); background: var(--sand-100); }
/* The open body shares a left edge with the summary's text, not with the code tile. */
.fx__body { padding: 0 20px 20px calc(16px + 50px + 18px); display: grid; gap: 12px; font-size: .93rem; color: var(--ink-soft); }
.fx__body p { margin: 0; }
.fx__h { margin: 0 0 4px; font: 800 .72rem/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--az-700); }
.fx__self { padding: 12px 14px; border-radius: var(--r-sm); background: var(--saffron-50); border: 1px solid #F4DDB4; color: #6B4A12; }
.fx__self .fx__h { color: var(--saffron-600); }

/* charges / pricing */
/* One tray, three divided rows — the charged row is tinted, so cost versus no-cost
   is legible before a word is read. */
.charges { display: grid; border: 1px solid var(--sand-200); border-radius: var(--r-lg); background: var(--paper); overflow: hidden; }
.charge { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; padding: 18px 20px; }
.charge + .charge { border-top: 1px solid var(--sand-200); }
.charge--cost { background: var(--az-50); }
.charge .ico-tile { width: 46px; height: 46px; border-radius: var(--r-sm); }
.charge .ico-tile svg { width: 24px; height: 24px; }
.charge b { display: block; font-size: .98rem; }
.charge small { color: var(--ink-mute); font-size: .83rem; font-weight: 600; }
.charge__val { font: 600 1.15rem/1 var(--f-mono); color: var(--ink); white-space: nowrap; }
.charge__val--free { font: 800 .8rem/1 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--ok); background: #E4F5EC; padding: 8px 12px; border-radius: 999px; }
.rates-wrap { background: var(--paper); border: 1px solid var(--sand-200); border-radius: var(--r-lg); overflow: hidden; }
.rates { width: 100%; border-collapse: separate; border-spacing: 0; }
.rates-cap { margin: 0 0 12px; color: var(--ink-mute); font-size: .85rem; font-weight: 600; }
.rates th, .rates td { text-align: left; padding: 15px 20px; border-bottom: 1px solid var(--sand-100); vertical-align: top; }
.rates thead th { background: var(--az-50); color: var(--az-700); border-bottom: 2px solid #CFE0F8; font: 800 .72rem/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; }
.rates td:last-child, .rates th:last-child { text-align: right; white-space: nowrap; }
.rates tbody tr:last-child td { border-bottom: 0; }
.rates tbody tr:hover td { background: rgba(17,119,227,.045); }
.rates .job { font-weight: 700; }
.rates .job small { display: block; font-weight: 600; color: var(--ok); font-size: .8rem; margin-top: 3px; }
.rates .amt { font: 600 1rem/1.2 var(--f-mono); font-variant-numeric: tabular-nums; }
.rates .amt span { font: 600 .74rem/1 var(--f-ui); color: var(--ink-mute); margin-right: 6px; text-transform: uppercase; letter-spacing: .08em; }
/* A dashed tray says "this is a note, not a price". */
.rate-notes { list-style: none; margin: 18px 0 0; padding: 16px 18px; display: grid; gap: 8px; font-size: .88rem; color: var(--ink-soft);
  background: var(--sand-100); border: 1px dashed var(--sand-300); border-radius: var(--r-md); }
.rate-notes li { display: flex; gap: 10px; }
.rate-notes li::before { content: "—"; color: var(--az-700); font-weight: 800; }
.premium-note { display: flex; gap: 12px; padding: 14px 16px; border-radius: var(--r-md); background: var(--saffron-50); border: 1px solid #F4DDB4; font-size: .88rem; color: #6B4A12; margin-top: 16px; }
.premium-note svg { width: 20px; height: 20px; flex: none; color: var(--saffron-600); }

/* process */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; counter-reset: step; position: relative; }
.steps::before { content: ""; position: absolute; left: 6%; right: 6%; top: 29px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.22) 10%, rgba(255,255,255,.22) 90%, transparent); }
.step { position: relative; padding: 0 6px; }
.step__num {
  position: relative; z-index: 0; width: 48px; height: 60px; display: grid; place-items: center; margin-bottom: 22px;
  font: 600 1.15rem/1 var(--f-mono); color: #06101A;
}
.step__num::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--az-500); -webkit-mask: var(--gable) center/100% 100% no-repeat; mask: var(--gable) center/100% 100% no-repeat; }
.step__num::after { content: ""; position: absolute; left: 9px; right: 9px; bottom: 8px; height: 3px; border-radius: 2px; background: var(--brand); }
/* The one place the gable is stated at page scale: the dark band's own shoulders. */
.section--cut { clip-path: polygon(0 56px, 56px 0, calc(100% - 56px) 0, 100% 56px, 100% 100%, 0 100%); }
@media (max-width: 720px) { .section--cut { clip-path: polygon(0 28px, 28px 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%); } }
.step h3 { color: #fff; margin-bottom: 8px; }
.step p { margin: 0; font-size: .93rem; color: #A8B6BD; }
.section--light .steps::before { background: linear-gradient(90deg, transparent, var(--sand-300) 10%, var(--sand-300) 90%, transparent); }
.section--light .step h3 { color: var(--ink); }
.section--light .step p { color: var(--ink-soft); }

/* real job gallery — auto-fit, so a brand with one photo fills its cell instead of
   sitting at half width beside nothing */
.jobs { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }

/* Where a brand has no technician photograph, the policy is stated as a design
   element rather than apologised for: a grid of gable cells carrying that brand's
   own appliance icons. <use>, not <img>, so no manufacturer name can reach a file
   name or an alt attribute. */
.mosaic { display: grid; grid-template-columns: repeat(var(--mo-n, 3), 1fr); gap: 10px; }
.mosaic i { display: grid; place-items: center; aspect-ratio: 4/5;
  background: linear-gradient(160deg, var(--az-500), var(--az-700));
  -webkit-mask: var(--gable) center/100% 100% no-repeat; mask: var(--gable) center/100% 100% no-repeat; }
.mosaic i:nth-child(even) { background: linear-gradient(160deg, var(--az-600), var(--ink-2)); }
.mosaic svg { width: 46%; height: auto; color: rgba(252,252,244,.92); }
.mosaic__cap { display: flex; gap: 9px; align-items: flex-start; margin-top: 12px; color: var(--ink-mute); font-size: .8rem; line-height: 1.45; }
.mosaic__cap svg { width: 15px; height: 15px; flex: none; margin-top: 1px; }
.jobpic { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--ink-3); aspect-ratio: 4/5; margin: 0; }
.jobpic img { width: 100%; height: 100%; object-fit: cover; }
.jobpic figcaption { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; gap: 10px; align-items: center; padding: 11px 13px; border-radius: 12px; background: rgba(15,27,35,.8); color: #fff; font: 600 .82rem/1.35 var(--f-ui); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.jobpic figcaption svg { width: 16px; height: 16px; color: var(--ok); flex: none; }

/* brand tiles */
.btiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 14px; }
.btile {
  --brand-ink: var(--az-700);
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 22px; min-height: 132px;
  padding: 20px; border-radius: var(--r-md); background: var(--paper); border: 1px solid var(--sand-200);
  text-decoration: none; color: var(--ink); overflow: hidden; transition: transform .2s, box-shadow .2s, border-color .2s;
}
.btile::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--brand-ink); transform-origin: left; transform: scaleX(.18); transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.btile:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: color-mix(in srgb, var(--brand-ink) 40%, var(--sand-200)); color: var(--ink); }
.btile:hover::before { transform: scaleX(1); }
.btile__name { font: 600 1.45rem/1.05 var(--f-display); letter-spacing: -.02em; color: var(--brand-ink); font-variation-settings: "opsz" 96, "SOFT" 60; }
.btile__meta { display: flex; justify-content: space-between; align-items: center; font: 700 .72rem/1.2 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute); }
.btile__meta svg { width: 16px; height: 16px; color: var(--ink); }

/* emirates / coverage */
.coverage { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.map { position: relative; border-radius: var(--r-xl); background: var(--ink); overflow: hidden; aspect-ratio: 4/3; }
.map > svg { width: 100%; height: 100%; }
.map__legend { position: absolute; left: 18px; bottom: 18px; display: flex; gap: 10px; flex-wrap: wrap; }
.emirates { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.emirate { padding: 20px; border-radius: var(--r-md); background: var(--paper); border: 1px solid var(--sand-200); }
.emirate h3 { display: flex; align-items: center; gap: 10px; font-size: 1.08rem; margin-bottom: 12px; }
.emirate h3 i { width: 11px; height: 13px; flex: none; background: var(--az-500); -webkit-mask: var(--gable) center/100% 100% no-repeat; mask: var(--gable) center/100% 100% no-repeat; }
/* A wrapped cluster self-levels; four identical grey dot-separated paragraphs did not. */
.areas { display: flex; flex-wrap: wrap; gap: 6px; }
.areas span { padding: 5px 10px; border-radius: 999px; background: var(--az-50); color: var(--az-700); font: 600 .78rem/1.25 var(--f-ui); }
.areas span.more { background: none; color: var(--ink-mute); }
.areas--off span { background: var(--sand-100); color: var(--ink-mute); text-decoration: line-through; text-decoration-color: var(--sand-300); }

/* FAQ */
.faq { display: grid; gap: 12px; }
.faq details { background: var(--paper); border: 1px solid var(--sand-200); border-radius: var(--r-md); transition: box-shadow .2s, border-color .2s; }
.faq details[open] { box-shadow: var(--sh-2); border-color: var(--sand-300); }
.faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 20px 22px; cursor: pointer; font: 700 1.02rem/1.4 var(--f-ui); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .fx__plus { flex: none; }
.faq__a { padding: 0 22px 22px; color: var(--ink-soft); font-size: .97rem; }
.faq__a p:last-child { margin: 0; }
/* Inside a shell the accordions lose their own chrome and become divided rows —
   a bordered card inside a bordered container is chrome twice over. */
.shell__main .faq { gap: 0; }
.shell__main .faq details { border: 0; border-radius: 0; box-shadow: none; border-bottom: 1px solid var(--sand-200); }
.shell__main .faq details:last-child { border-bottom: 0; }
.shell__main .faq details[open] { background: var(--sand-50); box-shadow: inset 3px 0 0 var(--az-500); }
.shell__main .faq summary { padding: 18px 20px; }
.shell__main .faq__a { padding: 0 20px 20px; }
.shell__main .rates-wrap { border: 0; border-radius: 0; }
.shell__main .rates-cap { display: none; }

/* notice (independence) — a tinted, bordered note. The old 4px left stripe was
   sliced into a tapering wedge at both ends by the 16px corner radius. */
.notice { display: flex; gap: 16px; padding: 20px 22px; border-radius: var(--r-md); background: var(--az-50); border: 1px solid #CFE0F8; font-size: .92rem; color: var(--ink-soft); max-width: 92ch; }
.notice svg { width: 24px; height: 24px; flex: none; color: var(--az-700); }
.notice p { margin: 0; }
.notice b { color: var(--ink); }

/* booking form */
.book { position: relative; padding: clamp(24px, 3vw, 34px); border-radius: var(--r-xl); background: var(--paper); border: 1px solid var(--sand-200); box-shadow: var(--sh-3); }
.book__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 20px; }
.book__head h3 { font: 600 1.6rem/1.1 var(--f-display); letter-spacing: -.02em; font-variation-settings: "opsz" 96, "SOFT" 40; }
.book__head p { margin: 6px 0 0; color: var(--ink-mute); font-size: .9rem; }
.badge { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: 999px; background: #E4F5EC; color: var(--ok); font: 800 .7rem/1 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.field { display: grid; gap: 7px; margin-bottom: 14px; }
.field label { font: 700 .84rem/1 var(--f-ui); color: var(--ink); }
.field label span { color: var(--saffron-600); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 50px; padding: 12px 15px; border-radius: 13px; border: 1.5px solid var(--sand-200); background: var(--sand-50);
  font: 500 1rem/1.3 var(--f-ui); color: var(--ink); transition: border-color .15s, background-color .15s, box-shadow .15s; appearance: none;
}
.field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%234A5A64' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; padding-right: 42px; }
.field textarea { min-height: 96px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--az-500); background: #fff; box-shadow: var(--ring); }
.field.has-error input, .field.has-error select { border-color: #C2410C; }
.field__err { font-size: .8rem; color: #C2410C; font-weight: 600; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.book__foot { display: flex; align-items: center; gap: 8px; justify-content: center; margin-top: 12px; font-size: .8rem; color: var(--ink-mute); font-weight: 600; }
.book__foot svg { width: 14px; height: 14px; }
.book__ok { text-align: center; padding: 20px 6px; }
.book__ok svg { width: 56px; height: 56px; color: var(--wa); margin: 0 auto 14px; }
.book__ok h3 { font: 600 1.5rem/1.2 var(--f-display); margin-bottom: 8px; }

/* contact rows */
.crow { display: flex; gap: 16px; align-items: center; padding: 18px; border-radius: var(--r-md); background: var(--paper); border: 1px solid var(--sand-200); text-decoration: none; color: var(--ink); transition: border-color .2s, transform .2s; }
.crow:hover { border-color: var(--sand-300); transform: translateY(-2px); color: var(--ink); }
.crow .ico-tile { width: 50px; height: 50px; }
.crow small { display: block; font: 800 .66rem/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 7px; }
.crow b { font-size: 1.12rem; }
.crow b.mono { font-size: 1.2rem; }

/* related links */
.related { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.rlink { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-radius: var(--r-md); background: var(--paper); border: 1px solid var(--sand-200); text-decoration: none; color: var(--ink); font-weight: 700; transition: border-color .2s, transform .2s; }
.rlink:hover { border-color: var(--ink); transform: translateY(-2px); color: var(--ink); }
.rlink svg { width: 18px; height: 18px; color: var(--az-700); }

/* two-column info panels (models / parts) */
.panel { padding: clamp(24px, 2.6vw, 36px); border-radius: var(--r-lg); background: var(--paper); border: 1px solid var(--sand-200); box-shadow: var(--sh-1); }
.panel h3 { font: 600 1.5rem/1.15 var(--f-display); letter-spacing: -.02em; margin-bottom: 14px; font-variation-settings: "opsz" 96, "SOFT" 40; }
.panel p { color: var(--ink-soft); font-size: .96rem; }
.panel p:last-child { margin: 0; }
.panel--ink { background: var(--ink-2); border-color: var(--ink-3); color: #BFCBD1; }
.panel--ink h3 { color: #fff; }
.panel--ink p { color: #A8B6BD; }

/* ------------------------------------------------------------ prose ---- */
.prose { font-size: 1.02rem; color: var(--ink-soft); }
.prose > * + * { margin-top: 1.05em; }
.prose h2 { font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem); margin-top: 2em; color: var(--ink); scroll-margin-top: calc(var(--hdr-h) + 20px); }
.prose h3 { font-size: 1.1rem; margin-top: 1.6em; color: var(--ink); }
.prose p, .prose li { color: var(--ink-soft); }
.prose strong, .prose b { color: var(--ink); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .45em; }
.prose ul li::marker { color: var(--az-600); }
.prose a { font-weight: 600; }
.prose table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.prose th, .prose td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--sand-200); vertical-align: top; }
.prose th { color: var(--ink); font-weight: 700; width: 38%; }
.prose .prose__updated, .prose .updated { font: 700 .8rem/1 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); }
.prose .prose__note, .prose .note { padding: 16px 18px; border-radius: var(--r-md); background: var(--sand-100); border: 1px solid var(--sand-200); font-size: .94rem; }
.prose dl { display: grid; grid-template-columns: minmax(160px, 34%) 1fr; margin: 0; border-top: 1px solid var(--sand-200); }
.prose dt, .prose dd { margin: 0; padding: 13px 0; border-bottom: 1px solid var(--sand-200); }
.prose dt { font-weight: 700; color: var(--ink); padding-right: 16px; }
.prose-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.toc { position: sticky; top: calc(var(--hdr-h) + 24px); padding: 20px; border-radius: var(--r-md); background: var(--paper); border: 1px solid var(--sand-200); }
.toc__t { margin: 0 0 12px;  font: 800 .68rem/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 12px; }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: t; }
.toc a { display: block; padding: 6px 8px; border-radius: 8px; font-size: .86rem; font-weight: 600; color: var(--ink-soft); text-decoration: none; line-height: 1.35; }
.toc a:hover, .toc a.is-active { background: var(--sand-100); color: var(--ink); }

/* licence card (legal / about / footer) */
.lic { display: grid; gap: 0; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--sand-200); background: var(--paper); }
.lic__head { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 20px 22px; background: var(--ink); color: #fff; }
.lic__head b { font: 600 1.25rem/1.1 var(--f-display); }
.lic__head small { display: block; font: 800 .64rem/1 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: #8E9DA5; margin-bottom: 6px; }
.lic__num { font: 600 1.5rem/1 var(--f-mono); color: var(--saffron); }
.lic dl { display: grid; grid-template-columns: auto 1fr; margin: 0; }
.lic dt, .lic dd { margin: 0; padding: 12px 22px; border-bottom: 1px solid var(--sand-100); font-size: .9rem; }
.lic dt { color: var(--ink-mute); font-weight: 700; }
.lic dd { color: var(--ink); font-weight: 600; }
.lic dd.ar { font-family: "Noto Kufi Arabic", "Segoe UI", Tahoma, sans-serif; direction: rtl; text-align: left; }

/* ---------------------------------------------------------- CTA band ---- */
.cta { position: relative; overflow: hidden; border-radius: var(--r-xl); background: var(--ink); color: #C9D4D9; padding: clamp(32px, 5vw, 64px); display: grid; grid-template-columns: 1.3fr auto; gap: 32px; align-items: center; }
/* A structural rule across the panel's top edge, not a ghost watermark behind the
   type: the mark earns its place by carrying the eye to the heading. */
.cta::before { content: ""; position: absolute; left: clamp(32px, 5vw, 64px); right: clamp(32px, 5vw, 64px); top: 0; height: 3px;
  background: linear-gradient(90deg, var(--az-500) 0 120px, rgba(127,180,242,.3) 120px, rgba(127,180,242,.07)); }
.cta::after { content: ""; position: absolute; inset: 0; background: radial-gradient(600px 300px at 90% 0%, rgba(17,119,227,.24), transparent 70%); pointer-events: none; }
.cta > * { position: relative; z-index: 1; }
.cta h2 { color: #fff; margin: 12px 0 12px; }
.cta p { margin: 0; color: #A8B6BD; max-width: 56ch; }
.cta__actions { display: grid; gap: 12px; min-width: 260px; }
.cta__phone { font: 600 1.6rem/1 var(--f-mono); color: #fff; text-decoration: none; letter-spacing: -.02em; text-align: center; margin-bottom: 4px; }
.cta__phone:hover { color: var(--az-300); }

/* ------------------------------------------------------------ footer ---- */
.ftr { background: var(--ink); color: #9AA9B1; padding-top: clamp(56px, 6vw, 88px); font-size: .92rem; }
.ftr a { color: #C9D4D9; text-decoration: none; }
.ftr a:hover { color: #fff; }
.ftr__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.25fr; gap: clamp(28px, 4vw, 56px); padding-bottom: 48px; }
.ftr__about p { margin: 18px 0 20px; max-width: 42ch; line-height: 1.65; }
.ftr__h {  font: 800 .7rem/1 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: #fff; margin-bottom: 18px; }
.ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ftr__contact a { display: flex; gap: 12px; align-items: center; }
.ftr__contact svg { width: 18px; height: 18px; color: var(--az-300); flex: none; }
.ftr__contact .mono { font-size: 1rem; }
.ftr__lic { padding: 18px; border-radius: var(--r-md); background: rgba(255,255,255,.04); border: 1px solid var(--ink-line); display: grid; gap: 10px; font-size: .85rem; line-height: 1.5; }
.ftr__lic b { color: #fff; font-weight: 700; }
.ftr__lic .lic__num { font-size: 1.2rem; }
.ftr__acts { padding: 22px 0; border-top: 1px solid var(--ink-line); font-size: .8rem; line-height: 1.6; color: #7F8E96; }
.ftr__acts b { color: #B9C5CB; }
.ftr__legal { padding: 22px 0; border-top: 1px solid var(--ink-line); font-size: .82rem; line-height: 1.6; color: #7F8E96; }
.ftr__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding: 22px 0 28px; border-top: 1px solid var(--ink-line); font-size: .84rem; }
.ftr__bottom nav { display: flex; flex-wrap: wrap; gap: 20px; }

/* ------------------------------------------------ sticky actions ---- */
.mbar { position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 70; display: none; grid-template-columns: 1fr 1fr 1fr; gap: 8px; padding: 8px; border-radius: 20px; background: rgba(15,27,35,.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: var(--sh-3); }
.mbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-height: 56px; border-radius: 14px; color: #fff; text-decoration: none; font: 700 .76rem/1 var(--f-ui); }
.mbar a svg { width: 20px; height: 20px; }
.mbar .m-call { background: var(--az-600); }
.mbar .m-wa { background: var(--wa); }
.mbar .m-book { background: rgba(255,255,255,.08); }
.fab { position: fixed; right: 22px; bottom: 22px; z-index: 70; display: inline-flex; align-items: center; gap: 10px; padding: 14px 18px 14px 16px; border-radius: 999px; background: var(--wa); color: #fff; text-decoration: none; font: 700 .92rem/1 var(--f-ui); box-shadow: 0 16px 34px -12px rgba(31,175,90,.8); transition: transform .2s; }
.fab:hover { transform: translateY(-2px); color: #fff; }
.fab svg { width: 22px; height: 22px; }

/* ------------------------------------------------------------ reveal ---- */
/* Staggered by --d, set per element as it is observed, so a four-card row arrives
   as four cards rather than as one block. */
.js .rv { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0ms); }
.js .rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .rv { opacity: 1; transform: none; }
}

/* -------------------------------------------------------- responsive ---- */
@media (max-width: 1180px) {
  .nav { display: none; }
  .burger { display: grid; }
  .hdr__cta .btn--book { display: none; }
  .btn--callnow { display: inline-flex; }
  .hdr .wrap { justify-content: space-between; }
  .ftr__grid { grid-template-columns: 1fr 1fr; }
  .mega__brands { grid-template-columns: repeat(2, 1fr); }
}
/* The real squeeze starts here: the nav has collapsed but every desktop column
   count used to survive to 980px, running full-width layouts in 25% less space. */
@media (max-width: 1100px) {
  .g-4, .promises, .hero-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .promise:nth-child(3) { border-left: 0; }
  .promise:nth-child(n+3) { border-top: 1px solid var(--sand-200); }
  .hero-rail > div:nth-child(3) { border-inline-start: 0; }
  .hero-rail > div:nth-child(n+3) { border-top: 1px solid var(--sand-200); }
  .steps { grid-template-columns: 1fr 1fr; gap: 36px 18px; }
  .steps::before { display: none; }
  .emirates { grid-template-columns: 1fr; }
  .shell__grid { grid-template-columns: 1fr; }
  .shell__aside { border-inline-end: 0; border-block-end: 1px solid var(--sand-200); }
  .sec-head--split { grid-template-columns: 1fr; }
  .split--label, .split--even, .split--wide { grid-template-columns: 1fr; }
  .split__sticky { position: static; }
}
@media (max-width: 980px) {
  .hero__grid, .bhero__grid, .split, .coverage, .prose-layout { grid-template-columns: 1fr; }
  .toc { position: static; }
  .hero-art { min-height: 440px; max-width: 560px; margin-inline: auto; width: 100%; }
  .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cta, .callband, .gbp { grid-template-columns: 1fr; }
  .callband__acts, .gbp__acts { min-width: 0; }
  .bhero__media { max-width: 460px; margin-inline: auto; width: 100%; }
  .sec-head--split { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  body { font-size: 16px; padding-bottom: 84px; }
  .hdr__phone { display: none; }
  .logo--lg .logo__mark img { height: 46px; }
  .logo--lg .logo__name { font-size: 1.4rem; }
  .g-2, .g-3, .g-4, .emirates, .row-2 { grid-template-columns: 1fr; }
  .promises, .hero-rail { grid-template-columns: 1fr; }
  .promise + .promise { border-left: 0; border-top: 1px solid var(--sand-200); }
  .promises--bare .promise { padding: 18px 0; }
  .promises--bare .promise + .promise { padding-left: 0; }
  .hero-rail > div + div { border-inline-start: 0; border-top: 1px solid var(--sand-200); }
  .steps { grid-template-columns: 1fr; }
  .mbar { display: grid; }
  .fab { display: none; }
  .ftr__grid { grid-template-columns: 1fr; }
  .glance { width: calc(100% - 28px); margin-top: -28px; }
  .glance--float { position: relative; right: auto; bottom: auto; width: calc(100% - 28px); margin: -28px auto 0; }
  .fx__body { padding-inline-start: 20px; }
  .srule { grid-template-columns: auto 1fr; row-gap: 10px; }
  .srule__l { display: none; }
  .srule__c { grid-column: 1 / -1; text-align: left; }
  .hero-art { min-height: 360px; }
  .rates th, .rates td { padding: 13px 14px; }
  .prose dl, .lic dl { grid-template-columns: 1fr; }
  .prose dt, .lic dt { border-bottom: 0; padding-bottom: 2px; }
  .bhero h1 { font-size: clamp(2.3rem, 9vw, 3rem); }
}

/* ---------------------------------------------- review fixes, 9 October 2026 ---- */
/* A grid track cannot shrink below its content: the long email address pushed the
   contact column 4px past a 360px screen. */
.split > * { min-width: 0; }
.crow > span:last-child { min-width: 0; }
.crow b { overflow-wrap: anywhere; }
/* "Call now · +971 58 869 5211" is one long nowrap label: let it wrap on narrow phones
   instead of running out of its container. */
.btn { max-width: 100%; }
@media (max-width: 420px) { .btn { white-space: normal; text-align: center; padding-block: 10px; line-height: 1.25; } }
/* The header call button is the one call control that stays on screen above 720px. */
.btn--callnow { min-height: 46px; }
/* Call-first pages: top-align the hero so the Call now button is not pushed below the
   fold on laptop screens by a text column centred against a taller photo. */
.is-callfirst .bhero__grid { align-items: start; }
.is-callfirst .bhero { padding-top: clamp(24px, 2.4vw, 40px); }
/* The modifier was declared before the base .charge rule and lost to it. */
.charge.charge--text { grid-template-columns: auto 1fr; align-items: start; }
/* The call strip is a dark surface outside .on-dark: give its focus ring the light outline. */
.callstrip :focus-visible { outline-color: var(--az-300); }

/* The line under a service-page H1. It used to be a <span> inside the heading, which made
   the heading's text run straight into it for anything reading text rather than layout. */
.bhero h1:has(+ .hloc) { margin-bottom: 14px; }
.bhero .hloc { margin: 0 0 20px; max-width: 44ch; font: 650 clamp(1.02rem, .92rem + .45vw, 1.3rem)/1.38 var(--f-ui); letter-spacing: -.005em; color: #DCE4E8; }