@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@400;500;600;700&family=Source+Sans+3:wght@400;600;700&display=swap');

/*!
 * Reef Al Ghadeer — site stylesheet
 * Design and front-end build: Techpullers — https://techpullers.com
 * Copyright (c) 2026 Techpullers. All rights reserved.
 * This design, layout and stylesheet may not be copied or reused without
 * written permission. Site content and imagery belong to Reef Al Ghadeer.
 */
/* Reef Al Ghadeer — design tokens (leno-webdesign, brand-locked)
   Blueberry #243B8F chosen by measured distance to the logo navy #002060
   (dE 16.1; next candidate 40.6). Cream Soda #FFF0C9 is the tint band.
   Logo green #33A02C is DECORATIVE ONLY — 3.38:1 fails AA for text.
   #1F7A14 carries white text at 5.45:1. All pairs pass the token gate. */
:root{
  --primary:#243B8F; --on-primary:#fff;
  --primary-deep:#16234F; --primary-light:#3557C4;
  --accent:#1F7A14; --on-accent:#fff;      /* AA-safe green — buttons, links */
  --accent-bright:#33A02C;                  /* decorative only, never behind text */
  --cream:#FFF0C9;          /* retained as a token; no longer used as a section ground */
  --band:#F4F7FB;
  --ink:#16181D; --muted:#566173; --line:#E3E7EC;
  --bg:#fff; --bg-soft:#F7F8FA;
  --brand-gradient:linear-gradient(90deg,var(--primary) 0%,var(--accent) 100%);
  --font-heading:'Lexend',system-ui,sans-serif;
  --font-body:'Source Sans 3',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --sand:#FAF6EE; --sand-ink:#F0E4CB;
  --navy-deepest:#07183D;
  /* The logo green is unusable on dark (#33A02C on navy = 4.47:1, AA-large only).
     This is the same brightened green as the reversed wordmark: 8.5:1 on navy. */
  --accent-on-dark:#7AD93C;
  --heading:#16234F;                   /* one heading colour, everywhere */
  /* v2 (2026-09-17) — emergency + blog components. --danger carries white text at
     6.6:1; --danger-ink is 7.4:1 on --danger-soft. Topic hues are tag grounds only,
     each paired with --heading ink (all >= 9:1). */
  --danger:#B42318; --danger-ink:#912018; --danger-deep:#3A1D2A; --danger-soft:#FEF3F2; --danger-line:#FECDCA;
  --topic-ac:#E8F1FD; --topic-home:#EAF6E8; --topic-building:#F4EEE4;
  --topic-contracts:#EEEDFB; --topic-cleaning:#E6F6F5;
  --shadow-sm:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.08);
  --shadow-md:0 12px 32px rgba(0,23,74,.12);
  --sec:96px;
  --wrap:1160px; --radius:16px; --radius-lg:20px;

  /* legacy aliases so existing components retheme without edits */
  --navy-900:var(--primary-deep); --navy-700:var(--primary); --navy-500:var(--primary-light);
  --green-700:var(--accent); --green-500:var(--accent-bright); --green-400:var(--accent-bright);
  --blue-400:var(--primary-light);
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font:400 16px/1.65 var(--font-body);color:var(--ink);background:var(--bg)}
h1,h2,h3,h4{font-family:var(--font-heading);font-weight:600;letter-spacing:-.01em;color:var(--heading)}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent)}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:3px solid var(--primary-light);outline-offset:2px;border-radius:4px}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:20px}

.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- header: wordmark + emergency pill ---------- */
.site-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line);
  border-top:3px solid var(--primary)}
.site-header .wrap{display:flex;align-items:center;gap:20px;min-height:86px}
.brand{display:inline-flex;align-items:center;flex:0 0 auto;min-height:44px}
/* Logo v3 is sized by HEIGHT and the width follows. The <img> carries the
   desktop lockup's intrinsic 2037x575, but phones are served a different crop
   (5.5964:1), so aspect-ratio is restated per breakpoint — otherwise the box
   reserved before the file lands would be the wrong shape and the header would
   shift. */
.brand img{height:54px;width:auto;max-width:none;aspect-ratio:2037/575}
.nav{margin-inline-start:auto;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.nav a{text-decoration:none;font-weight:600;font-size:.94rem;color:var(--ink);
  min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center}
.nav a:hover{color:var(--primary)}
.nav a.nav-cta{background:var(--accent);color:#fff!important;border-radius:999px;
  padding:0 22px;font-weight:700}
.nav a.nav-cta:hover{filter:brightness(1.08)}
.nav-toggle{display:none;background:none;border:1px solid var(--line);border-radius:10px;
  width:46px;height:46px;margin-inline-start:auto;cursor:pointer;align-items:center;justify-content:center}
.nav-toggle-bars,.nav-toggle-bars::before,.nav-toggle-bars::after{
  display:block;width:20px;height:2px;background:var(--ink);border-radius:2px;transition:transform .2s,opacity .2s}
.nav-toggle-bars::before,.nav-toggle-bars::after{content:"";position:absolute}
.nav-toggle-bars::before{transform:translateY(-6px)}
.nav-toggle-bars::after{transform:translateY(6px)}
.nav-toggle[aria-expanded=true] .nav-toggle-bars{background:transparent}
.nav-toggle[aria-expanded=true] .nav-toggle-bars::before{transform:rotate(45deg)}
.nav-toggle[aria-expanded=true] .nav-toggle-bars::after{transform:rotate(-45deg)}

/* NAV / SHEET / CALLBAR BREAKPOINT — 1200px.
   Moved 1023 -> 1200 on 2026-09-12. The desktop nav gained a Blog item and two
   dropdown triggers, and at 1024 the row needed ~1150px of the 773px it had, so
   the language switcher wrapped to a second line. Tablets now get the sheet,
   which is the better menu anyway, and they keep the fixed call bar with it.
   Every rule in this system uses 1200/1201 — keep them in step, and keep the
   JS matchMedia in assets/js/main.js matching. */
@media (max-width:1200px){
  .site-header .wrap{min-height:74px;gap:12px}
  .brand img{height:48px}
  .nav-toggle{display:inline-flex;position:relative}
  .nav{position:absolute;inset-inline:0;top:100%;margin:0;flex-direction:column;
    align-items:stretch;gap:0;background:#fff;border-bottom:1px solid var(--line);
    box-shadow:0 18px 34px rgba(6,14,34,.12);padding:8px 20px 18px}
  .nav[hidden]{display:none}
  .nav a{justify-content:flex-start;min-height:52px;border-bottom:1px solid var(--line)}
  .nav a:last-child{border-bottom:0}
  .nav a.nav-cta{margin-top:12px;justify-content:center}
}

/* ---------- hero: split layout, depth, staggered entrance ---------- */
.hero{position:relative;isolation:isolate;color:#fff;overflow:hidden;
  min-height:clamp(520px,74vh,720px);display:flex;align-items:center}
.hero>picture{position:absolute;inset:0;z-index:-2}
.hero>picture>img{width:100%;height:100%;object-fit:cover;object-position:62% center;
  animation:kenburns 22s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.05)}}
/* dark field on the left, clear of the van and its logo on the right */
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,
    rgba(9,18,42,.95) 0%, rgba(9,18,42,.86) 22%,
    rgba(9,18,42,.42) 38%, rgba(9,18,42,.08) 48%, rgba(9,18,42,0) 56%)}
.hero-inner{width:100%;padding-block:72px}
.hero-copy{max-width:600px}
.hero h1{color:#fff;font-size:clamp(2.05rem,4.2vw,3.3rem);line-height:1.08;margin:0 0 1.1rem;
  text-wrap:balance;letter-spacing:-.02em}
.accent-word{color:var(--accent-bright);position:relative;white-space:nowrap}
.accent-word::after{content:"";position:absolute;left:0;right:0;bottom:-.12em;height:3px;
  border-radius:2px;background:var(--accent-bright);transform-origin:left;
  transform:scaleX(0);animation:draw .7s .55s cubic-bezier(.22,.8,.3,1) forwards}
@keyframes draw{to{transform:scaleX(1)}}
.hero-lede{max-width:44ch;font-size:1.08rem;color:#DCE4F2;margin:0 0 1.9rem}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 14px}
.btn{display:inline-flex;align-items:center;justify-content:center;
  padding:14px 28px;border-radius:999px;font-family:var(--font-heading);font-weight:600;
  font-size:.98rem;text-decoration:none;background:var(--accent);color:var(--on-accent);
  border:1.5px solid transparent;min-height:48px;
  transition:transform .18s,filter .18s,background .18s,border-color .18s,box-shadow .18s}
.btn:hover{filter:brightness(1.07);transform:translateY(-2px);box-shadow:0 10px 22px rgba(31,122,20,.32)}
.btn-lg{font-size:1.05rem;padding:16px 34px;min-height:54px}
.btn-light{background:#fff;color:var(--primary);border-color:#fff}
.btn-light:hover{filter:brightness(.97);box-shadow:0 10px 22px rgba(4,10,26,.3)}
.btn-ghost{background:transparent;border-color:rgba(255,255,255,.55);color:#fff}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.1);filter:none;box-shadow:none}
.btn-wa{background:#25D366;color:#062B15;border-color:#25D366}
.hero-tel{margin:0 0 1.9rem;color:#B4C4DE;font-size:.97rem}
.hero-tel a{color:#fff;font-weight:600;text-decoration:none;
  border-bottom:1.5px solid rgba(255,255,255,.4);
  min-height:44px;min-width:44px;display:inline-flex;align-items:center}
.hero-tel a:hover{border-bottom-color:var(--accent-bright)}
.trust-strip{list-style:none;display:flex;flex-wrap:wrap;gap:9px;padding:0;margin:0}
.trust-strip li{font-size:.86rem;font-weight:600;color:#fff;padding:9px 17px;border-radius:999px;
  background:rgba(9,18,42,.55);border:1px solid rgba(255,255,255,.34);
  min-height:38px;display:inline-flex;align-items:center;backdrop-filter:blur(6px)}
.trust-strip li::before{content:"";width:7px;height:7px;border-radius:50%;
  background:var(--accent-bright);margin-inline-end:9px;flex:0 0 auto}
.reveal{opacity:0;transform:translateY(12px);
  animation:rise .4s cubic-bezier(.22,.8,.3,1) forwards;animation-delay:var(--d,0ms)}
@keyframes rise{to{opacity:1;transform:none}}
@media (max-width:980px){.hero-inner{padding-block:56px}}
@media (max-width:760px){
  .hero::after{background:linear-gradient(180deg,rgba(9,18,42,.84) 0%,rgba(9,18,42,.72) 50%,rgba(9,18,42,.92) 100%)}
}

/* staggered entrance */
.reveal{opacity:0;transform:translateY(12px);
  animation:rise .4s cubic-bezier(.22,.8,.3,1) forwards;animation-delay:var(--d,0ms)}
@keyframes rise{to{opacity:1;transform:none}}

@media (max-width:980px){
    }

.section{padding:var(--sec) 0}
.section h2{font-size:clamp(1.5rem,2.6vw,2.1rem);margin:0 0 .4rem}
.section .lede{color:var(--muted);margin:0 0 40px;max-width:60ch}
.grid{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.card{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;
  transition:transform .25s,box-shadow .25s}
.card:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(0,23,74,.12)}
.card figure{margin:0;aspect-ratio:3/2;overflow:hidden}
.card figure img{width:100%;height:100%;object-fit:cover}
.card .body{padding:20px 22px 26px}
.card h3{margin:0 0 .4rem;font-size:1.12rem}
.card p{margin:0;color:var(--muted);font-size:.95rem}

/* Reduced motion. Looping decoration stops entirely; entrance animations are
   allowed to complete instantly so nothing is left stuck at opacity:0. */
@media (prefers-reduced-motion:reduce){
  /* Blanket stop first: any animation added later is covered automatically.
     An earlier version listed animations by name and a cleanup regex silently
     deleted the line, leaving the hero Ken Burns looping for users who had
     asked for no motion. The gate does not catch that — it only checks that a
     reduced-motion block exists. */
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    animation-delay:0ms!important;
    transition-duration:.01ms!important;
    transition-delay:0ms!important;
    scroll-behavior:auto!important;
  }
  /* Entrance animations must land visible, never stuck at opacity:0. */
  .reveal,.io-reveal,.js .io-reveal{opacity:1!important;transform:none!important}
  .accent-word::after{transform:scaleX(1)!important}
  /* Looping decoration holds its start frame rather than its end frame. */
  .hero>picture>img{animation:none!important;transform:none!important}
  /* No hover displacement. */
  .btn:hover,.svc-card:hover,.svc-featured:hover,.why-card:hover,
  .proof-item:hover,.svc-link:hover .arrow{transform:none!important}
}
}

/* ---------- build-status bars ---------- */
.preview-bar{font-size:.82rem;padding:8px 20px;text-align:center;letter-spacing:.01em}
.preview-bar{background:#FFF4D6;color:#6B4C00;border-bottom:1px solid #E8D9A8}
.preview-bar span{opacity:.8}

/* ---------- shared page furniture ---------- */
.page-head{background:var(--bg-soft);border-bottom:1px solid var(--line);padding:56px 0;position:relative}
.page-head.has-img{color:#fff;isolation:isolate;border-bottom:0;padding:88px 0}
.page-head.has-img>picture>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.page-head.has-img::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(0,23,74,.9) 0%,rgba(0,23,74,.6) 60%,rgba(0,23,74,.25) 100%)}
.page-head h1{margin:0 0 .5rem;font-size:clamp(1.7rem,3.4vw,2.6rem);line-height:1.15}
/* The h1 needs its colour set EXPLICITLY over a photo. `.page-head.has-img` sets
   color:#fff on the section, but the base `h1,h2,h3,h4{color:var(--heading)}`
   rule gives the heading its own colour, so it never inherits and every image
   hero rendered a dark navy headline on a dark navy photo — about 1.5:1. */
.page-head.has-img h1{color:#fff;text-shadow:0 1px 18px rgba(4,10,26,.34)}
.page-head .lede{color:var(--muted);max-width:62ch;margin:0}
.page-head.has-img .lede{color:#DDE6F2}
.crumbs{font-size:.85rem;margin-bottom:14px;color:var(--muted)}
.crumbs a{color:inherit}.crumbs span{opacity:.5;margin:0 6px}
.page-head.has-img .crumbs{color:#BACBE4}


.tier-head{margin:44px 0 18px;font-size:1.05rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);border-top:1px solid var(--line);padding-top:18px}
.card-plain .body{padding:22px}
.card h4{margin:0 0 .4rem;font-size:1.08rem}
.card h3 a,.card h4 a{text-decoration:none;color:var(--navy-900)}
.card h3 a:hover,.card h4 a:hover{color:var(--green-700)}
.band{background:var(--bg-soft);border-block:1px solid var(--line)}
.more{margin-top:28px;font-weight:600}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:0 0 8px}
.chips li a,.chips li span{display:inline-block;padding:8px 16px;border-radius:999px;
  border:1px solid var(--line);background:#fff;font-size:.9rem;text-decoration:none}
.chips li span{color:var(--muted);opacity:.65}
.chips li a{color:var(--navy-700);font-weight:600}
.chips li a:hover{border-color:var(--green-500);color:var(--green-700)}

.prose{max-width:74ch}
.prose h2{margin-top:2em}
.notice{border:1px solid #E3D9A8;background:#FFFBEF;border-radius:var(--radius);padding:20px 22px;margin:0 0 28px}
.notice-soft{border-color:var(--line);background:var(--bg-soft)}
.notice p{margin:.5rem 0 0;color:var(--muted)}
.notice code,.kw code{background:#fff;border:1px solid var(--line);border-radius:5px;padding:1px 6px;font-size:.88em}
.note{font-size:.9rem;color:var(--muted)}
.pending{font-size:.85rem;color:var(--muted);font-style:italic;margin-top:.5rem}
.empty{color:var(--muted)}
mark.todo{background:#FFE9A8;color:#6B4C00;padding:1px 7px;border-radius:4px;font-style:normal}

dl.contact{display:grid;grid-template-columns:max-content 1fr;gap:10px 24px;margin:0 0 28px}
dl.contact dt{font-weight:700;color:var(--navy-900)}
dl.contact dd{margin:0}

.quote-form{display:grid;gap:16px;max-width:520px}
.quote-form label{display:grid;gap:6px;font-weight:600;font-size:.92rem}
.quote-form input,.quote-form select,.quote-form textarea{
  font:inherit;padding:11px 13px;border:1px solid var(--line);border-radius:9px;background:#fff}
.quote-form input:focus-visible,.quote-form select:focus-visible,.quote-form textarea:focus-visible{
  outline:2px solid var(--green-500);outline-offset:1px;border-color:var(--green-500)}
.quote-form button{justify-self:start;border:0;cursor:pointer}

/* RTL for the Arabic mirrors */
[dir=rtl] .nav{margin-left:0;margin-right:auto}
[dir=rtl] .hero::after,[dir=rtl] .page-head.has-img::after{
  background:linear-gradient(270deg,rgba(0,23,74,.9) 0%,rgba(0,23,74,.6) 60%,rgba(0,23,74,.25) 100%)}

/* ---------- how it works ---------- */
.steps{list-style:none;display:grid;gap:26px;padding:0;margin:36px 0 0;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.step{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff}
.step figure{margin:0;aspect-ratio:4/3;overflow:hidden}
.step figure img{width:100%;height:100%;object-fit:cover}
.step-body{padding:18px 20px 24px;position:relative}
.step-n{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--brand-gradient);color:#fff;font-weight:700;font-size:.9rem;margin-bottom:10px}
.step h3{margin:0 0 .35rem;font-size:1.02rem}
.step p{margin:0;color:var(--muted);font-size:.92rem}

/* ---------- emergency band: full-bleed photographic (2026-09-08) ---------- */
.emergency{position:relative;isolation:isolate;background:var(--navy-deepest);color:#fff;
  overflow:hidden;padding:var(--sec) 0}
.emergency-bg{position:absolute;inset:0;z-index:-2}
.emergency-bg img{width:100%;height:100%;object-fit:cover;object-position:60% center}
/* Left-weighted so the technician and lit doorway on the right stay readable.
   Fully opaque at the text, transparent by 78% — the same construction as the hero. */
.emergency::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(7,24,61,.93) 0%,rgba(7,24,61,.86) 38%,
    rgba(7,24,61,.5) 62%,rgba(7,24,61,.18) 78%,rgba(7,24,61,.1) 100%)}
.emergency-copy{max-width:620px}
.emergency h2{margin:0 0 .7rem;color:#fff;font-size:clamp(1.7rem,3.2vw,2.5rem);line-height:1.12}
.emergency p:not(.cta-row){color:#D6E0F0;max-width:50ch}
.emergency .cta-row{color:#D6E0F0}
.emergency .cta-row{margin-top:26px}
@media (max-width:860px){
  /* On a phone the gradient covers the frame so the copy always wins. */
  .emergency::after{background:linear-gradient(180deg,rgba(7,24,61,.9) 0%,rgba(7,24,61,.82) 100%)}
  .emergency-bg img{object-position:center}
  .emergency .cta-row{flex-direction:column;align-items:stretch}
  .emergency .cta-row .btn{width:100%}
}
.btn-wa{background:#25D366;color:#062B15}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}


/* ---------- before / after gallery ---------- */
.ba{margin:0 0 64px}
.ba h2{margin:0 0 .3rem}
.ba-note{color:var(--muted);max-width:70ch;margin:0 0 22px}
.ba-pair{display:grid;gap:20px;grid-template-columns:1fr 1fr}
.ba-pair figure{margin:0;position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line)}
.ba-pair img{width:100%;display:block}
.ba-pair figcaption{position:absolute;top:12px;inset-inline-start:12px}
.tag{display:inline-block;padding:5px 13px;border-radius:999px;font-size:.76rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;backdrop-filter:blur(6px)}
.tag-before{background:rgba(18,24,31,.72);color:#fff}
.tag-after{background:var(--green-500);color:#fff}
@media (max-width:760px){.ba-pair{grid-template-columns:1fr}}

/* ---------- homepage: hero ---------- */

/* ---------- faq ---------- */
.faq{max-width:80ch;margin-top:28px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;padding:20px 40px 20px 0;position:relative;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary h3{display:inline;margin:0;font-size:1.04rem;color:var(--heading)}
.faq summary::after{content:"+";position:absolute;inset-inline-end:8px;top:16px;
  font-size:1.6rem;line-height:1;color:var(--accent);font-family:var(--font-heading)}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0 0 22px;color:var(--muted);max-width:72ch}

/* ---------- closing cta ---------- */
.band{background:#F4F7FB;border-block:1px solid #E4EAF2}
.card h3 a{color:var(--heading)}
.card h3 a:hover{color:var(--accent)}

/* ---------- touch targets: WCAG 2.2 AA 2.5.8 (24x24 min) + 44x44 mobile guideline ----------
   Hit area grows; visual size is unchanged. Links inline in a sentence are exempt
   by the standard and are deliberately not padded here. */
.nav a,
.chips li a,
.chips li span,
.site-footer ul a,
.card h3 a,
.card h4 a,
.crumbs a,
.more a{min-height:44px;display:inline-flex;align-items:center}
.chips li a,.chips li span{padding:10px 18px}
.card h3 a,.card h4 a{padding-block:4px}
.nav{gap:18px}
.nav a{padding-inline:2px}
.legal a{min-height:44px;display:inline-flex;align-items:center}
.nav a,.legal a,.more a,.site-footer ul a,.chips li a,.crumbs a{min-width:44px}
.nav a,.legal a,.more a{justify-content:center}
.quote-form button{min-height:44px}
dl.contact dd a{min-height:44px;min-width:44px;display:inline-flex;align-items:center}
/* staging only: distinguishes "planned, not written" from "broken" */
a.is-draft{text-decoration:underline dotted;text-underline-offset:3px;opacity:.72}
a.is-draft::after{content:"soon";font-size:.62rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;margin-inline-start:6px;padding:2px 6px;border-radius:4px;
  background:var(--cream);color:#7A5B00;vertical-align:middle;text-decoration:none}

/* ---------- services section: featured + 2x3 grid ---------- */
.services{padding-top:var(--sec)}
.services-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;
  align-items:start;padding-bottom:44px}
.eyebrow-dark{color:var(--accent);margin-bottom:14px;padding-bottom:0}
.eyebrow-dark::after{display:none}
.services-head h2{font-size:clamp(1.85rem,3.4vw,2.6rem);line-height:1.12;margin:0 0 .8rem;max-width:19ch}
.services-head .lede{max-width:62ch;margin:0;color:var(--muted)}
/* Secondary action: quiet inline link on the heading row. The section already
   ends with a full-width navy CTA band, so this must not compete with it. */
.svc-link{display:inline-flex;align-items:center;gap:.65rem;align-self:end;
  font-size:.95rem;color:var(--ink);text-decoration:none;min-height:44px}
.svc-link strong{color:var(--accent);font-weight:600}
.svc-link .arrow{display:inline-grid;place-items:center;width:34px;height:34px;
  border-radius:50%;background:rgba(31,122,20,.11);color:var(--accent);flex:0 0 auto;
  transition:transform .25s ease,background .25s ease,color .25s ease}
.svc-link:hover .arrow{transform:translateX(4px);background:var(--accent);color:#fff}
.svc-link:hover strong{text-decoration:underline}
@media (max-width:760px){.svc-link{align-self:start}}

.services-band{position:relative;border-top:1px solid var(--line);padding:40px 0 var(--sec);
  background:
    radial-gradient(620px 420px at 92% 4%, rgba(51,160,44,.09) 0%, rgba(51,160,44,0) 70%),
    #F7F8FA}
.services-grid{display:grid;gap:22px;grid-template-columns:minmax(0,360px) minmax(0,1fr)}

.svc-featured{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;display:flex;flex-direction:column;box-shadow:0 2px 10px rgba(6,14,34,.04);
  transition:transform .22s,box-shadow .22s,border-color .22s}
.svc-featured:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(6,14,34,.11);border-color:#D7DEE7}
.svc-featured-link::after{content:"";position:absolute;inset:0}
.svc-featured-media{position:relative;flex:1;min-height:300px;overflow:hidden}
.svc-featured-media img{width:100%;height:100%;object-fit:cover}
.svc-featured-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,14,34,0) 40%,rgba(6,14,34,.82) 100%)}
.svc-featured-title{position:absolute;inset-inline:22px;bottom:18px;z-index:1;margin:0;
  color:#fff!important;font-size:1.32rem;line-height:1.2}
.svc-featured-body{padding:24px 24px 28px;display:flex;flex-direction:column;gap:18px}
.svc-featured-body p{margin:0;color:var(--muted);font-size:.97rem}
.svc-tags{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;padding:0;margin:0}
.svc-tags li{display:flex;align-items:center;gap:9px;font-weight:600;font-size:.92rem}
.svc-tags li::before{content:"";width:9px;height:9px;border-radius:50%;
  background:var(--accent-bright);flex:0 0 auto}
.svc-featured-body .btn{align-self:flex-start}

.svc-cards{display:grid;gap:22px;grid-template-columns:repeat(3,minmax(0,1fr))}
.svc-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;
  display:flex;flex-direction:column;box-shadow:0 2px 10px rgba(6,14,34,.04);
  transition:transform .22s,box-shadow .22s,border-color .22s}
.svc-card:hover{transform:translateY(-6px);box-shadow:0 22px 46px rgba(6,14,34,.14);
  border-color:#CFD9E6}
.svc-card figure{margin:0;aspect-ratio:4/3;overflow:hidden}
.svc-card figure img{width:100%;height:100%;object-fit:cover;
  transition:transform .5s cubic-bezier(.22,.8,.3,1)}
.svc-card:hover figure img{transform:scale(1.05)}
.svc-card-body{position:relative;padding:18px 20px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.svc-card h3{margin:0;font-size:1.06rem;line-height:1.25}
/* The stretched ::after makes the whole card the tap target, but a checker can only
   measure the anchor's own box — so give it a real one too. */
.svc-card h3 a{color:var(--heading);text-decoration:none;display:flex;align-items:center;
  min-height:44px;min-width:0}
.svc-card h3 a::after{content:"";position:absolute;inset:0}
.svc-card{position:relative}
.svc-card:hover h3 a{color:var(--accent)}
.svc-card p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.55}
.svc-more{margin-top:auto;padding-top:6px;font-weight:600;font-size:.86rem;color:var(--accent)}
.svc-more::after{content:" →"}

.svc-cta{grid-column:1/-1;background:var(--primary-deep);border-radius:16px;
  padding:26px 32px;display:flex;align-items:center;justify-content:space-between;
  gap:24px;flex-wrap:wrap;margin-top:2px}
.svc-cta-title{font-family:var(--font-heading);font-weight:600;color:#fff;font-size:1.2rem;margin:0 0 4px}
.svc-cta-sub{margin:0;color:#B9C7E0;font-size:.94rem}
.svc-cta-actions{display:flex;gap:12px;flex-wrap:wrap;margin:0}

/* service pillar pages */
.svc-body{display:grid;gap:40px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
.svc-intro h2{margin-top:0}
.svc-list{list-style:none;padding:0;margin:0;display:grid;gap:2px}
.svc-list li{display:flex;gap:12px;align-items:flex-start;padding:13px 2px;
  border-bottom:1px solid var(--line);font-size:.98rem}
.svc-list li::before{content:"";width:9px;height:9px;border-radius:50%;margin-top:.5em;
  background:var(--accent-bright);flex:0 0 auto}

@media (max-width:1080px){
  .svc-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .services-grid{grid-template-columns:1fr}
}
@media (max-width:760px){
  .services-head{grid-template-columns:1fr}
  .svc-cards{grid-template-columns:1fr}
  .svc-body{grid-template-columns:1fr;gap:26px}
  .svc-tags{grid-template-columns:1fr}
  .svc-cta{flex-direction:column;align-items:flex-start}
}

/* service card icon + hover arrow chip */
.svc-icon-wrap{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;
  background:rgba(31,122,20,.10);color:var(--accent);margin-bottom:2px}
.svc-icon{width:19px;height:19px}
.svc-chip{position:absolute;right:16px;bottom:18px;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;background:var(--accent);color:#fff;font-weight:700;
  opacity:0;transform:translateX(-6px);transition:opacity .22s,transform .22s}
.svc-card:hover .svc-chip{opacity:1;transform:none}
.svc-card-body{padding-bottom:56px}
.svc-card-body p{padding-right:0}

/* Scroll reveal. Only hidden once the inline snippet has confirmed JS is running —
   otherwise a script failure would leave the whole services grid at opacity 0. */
.js .io-reveal{opacity:0;transform:translateY(18px)}
.js .io-reveal.is-in{animation:rise .4s cubic-bezier(.22,.8,.3,1) forwards;
  animation-delay:var(--d,0ms)}

/* the closing band should not read as a flat rectangle */
.svc-cta{position:relative;overflow:hidden}
.svc-cta::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(560px 300px at 88% 120%, rgba(51,160,44,.30) 0%, rgba(51,160,44,0) 70%)}
.svc-cta > *{position:relative;z-index:1}

/* ---------- proof: real before/after, the pattern's missing second section ---------- */
.proof{padding:var(--sec) 0 calc(var(--sec) - 24px)}
.proof-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  flex-wrap:wrap;margin-bottom:30px}
.proof-head h2{font-size:clamp(1.6rem,2.9vw,2.15rem);margin:0 0 .5rem;line-height:1.15}
.proof-head .lede{margin:0;color:var(--muted);max-width:52ch}
.proof-link{font-weight:600;text-decoration:none;color:var(--accent);white-space:nowrap;
  min-height:44px;min-width:44px;display:inline-flex;align-items:center}
.proof-link:hover{text-decoration:underline}
/* .proof-grid / .proof-item retired 2026-09-08 — replaced by .work-grid below */


/* ---------- why choose us ---------- */
.why{background:#F4F8F5;border-block:1px solid #E3EDE6;padding:var(--sec) 0}
.why-head{margin-bottom:34px}
.why-head h2{font-size:clamp(1.7rem,3.1vw,2.35rem);line-height:1.14;margin:0 0 .6rem}
.why-head .lede{margin:0;color:var(--muted);max-width:56ch}
.why-cards{list-style:none;padding:0;margin:0;display:grid;gap:20px;
  grid-template-columns:repeat(2,minmax(0,1fr))}
.why-card{background:#fff;border:1px solid #E3EDE6;border-radius:var(--radius);padding:20px 22px 22px;
  transition:transform .22s,box-shadow .22s,border-color .22s}
.why-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(6,14,34,.09);
  border-color:#CFE0D6}
.why-icon-wrap{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:11px;
  background:rgba(31,122,20,.10);color:var(--accent);margin-bottom:12px}
.why-icon-wrap .svc-icon{width:21px;height:21px}
.why-card h3{margin:0 0 .38rem;font-size:1.02rem;line-height:1.25}
.why-card p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.55}

.why-cta{margin-top:24px;background:var(--primary-deep);border-radius:999px;
  padding:14px 14px 14px 32px;display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap}
.why-cta-text{margin:0;color:#fff;font-family:var(--font-heading);font-weight:600;font-size:1.05rem}

@media (max-width:640px){
  .why-cta{border-radius:16px;padding:20px 22px;flex-direction:column;align-items:flex-start}
}

/* ---------- section rhythm: white / sand / navy, alternating deliberately ---------- */
.proof{background:#fff}
.services-head{background:#fff}
.why{background:var(--sand)!important;border-block-color:#EADFC9!important}
.process{background:#fff}
.areas{background:var(--sand);border-block:1px solid #EADFC9;padding:var(--sec) 0}

/* ---------- process: timeline ---------- */
.process-head{margin-bottom:36px}
.process-head h2{margin:0 0 .5rem}
.process-head .lede{margin:0;color:var(--muted);max-width:56ch}
.timeline{list-style:none;padding:0;margin:0;display:grid;gap:26px;
  grid-template-columns:repeat(4,minmax(0,1fr));position:relative}
.timeline::before{content:"";position:absolute;top:26px;left:6%;right:6%;height:2px;
  background:repeating-linear-gradient(90deg,var(--accent-bright) 0 10px,transparent 10px 20px);
  opacity:.45}
.tl-step{position:relative;display:grid;gap:14px;justify-items:start}
.tl-num{position:relative;z-index:1;font-family:var(--font-heading);font-weight:300;
  font-size:2.9rem;line-height:1;color:var(--accent);background:#fff;padding-right:14px}
.tl-body h3{margin:0 0 .3rem;font-size:1.05rem}
.tl-body p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.55}
.tl-media{margin:0;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3;width:100%}
.tl-media img{width:100%;height:100%;object-fit:cover}

/* ---------- areas ---------- */
.areas-grid{display:grid;gap:40px;grid-template-columns:minmax(0,1fr) minmax(0,560px);
  align-items:center;margin-bottom:34px}
.areas-copy h2{font-size:clamp(1.7rem,3.1vw,2.35rem);line-height:1.14;margin:0 0 .6rem;max-width:18ch}
.areas-copy .lede{margin:0 0 26px;color:var(--muted);max-width:54ch}
.areas-stats{list-style:none;display:flex;gap:38px;flex-wrap:wrap;padding:0;margin:0 0 28px}
.areas-stats li{display:grid;gap:2px}
.stat-n{font-family:var(--font-heading);font-weight:700;font-size:2rem;line-height:1;color:var(--accent)}
.stat-l{font-size:.85rem;color:var(--muted)}
.areas-map{position:relative;margin:0;border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:0 10px 34px rgba(6,14,34,.10);border:1px solid #EADFC9}
.cov-map{display:block;width:100%;height:auto}
.areas-map figcaption{position:absolute;top:16px;left:16px;display:grid;gap:2px;
  background:var(--primary-deep);color:#fff;border-radius:12px;padding:11px 16px}
.areas-map-title{font-family:var(--font-heading);font-weight:600;font-size:.95rem;color:#fff}
.areas-map-sub{font-size:.82rem;color:#B9C7E0}
.btn-outline{background:#fff;color:var(--primary-deep);border-color:#D6DEE9}
.btn-outline:hover{border-color:var(--primary);background:#fff}
.chips li a{position:relative;padding-inline:16px 16px}

/* ---------- faq ---------- */
.faq-grid{display:grid;gap:40px;grid-template-columns:minmax(0,1fr) minmax(0,340px);align-items:start}
.faq{max-width:none;margin-top:22px}
.faq details p{margin:0 0 20px}
.faq-a{display:grid;grid-template-rows:1fr;transition:grid-template-rows .28s ease}
.faq details:not([open]) .faq-a{grid-template-rows:0fr}
.faq-a>p{overflow:hidden}
.faq-card{background:var(--primary-deep);color:#fff;border-radius:var(--radius-lg);padding:26px 26px 28px}
.faq-card h3{margin:0 0 .5rem;color:#fff!important;font-size:1.15rem}
.faq-card>p{margin:0 0 18px;color:#C3D0E6;font-size:.94rem}
.faq-card dl{display:grid;grid-template-columns:max-content 1fr;gap:9px 16px;margin:0 0 22px;font-size:.92rem}
.faq-card dt{color:#93A6C6}
.faq-card dd{margin:0;color:#fff}
.faq-card a{color:#fff}
.faq-card dd a{min-height:44px;display:inline-flex;align-items:center}

/* ---------- final CTA ---------- */

@media (max-width:1000px){
  .timeline{grid-template-columns:repeat(2,minmax(0,1fr))}
  .timeline::before{display:none}
  .areas-grid,.faq-grid{grid-template-columns:1fr}
}
@media (max-width:620px){
  .timeline{grid-template-columns:1fr}
  .areas-stats{gap:24px}
}

/* ---------- before/after comparison slider ---------- */
.ba-compare{position:relative;aspect-ratio:4/3;overflow:hidden;
  border-bottom:1px solid var(--line);touch-action:pan-y}
.ba-compare picture,.ba-compare img{display:block;width:100%;height:100%;object-fit:cover}
.ba-after{position:absolute;inset:0;width:var(--pos,50%);overflow:hidden}
.ba-after picture,.ba-after img{width:var(--w,100%);max-width:none}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:3px;
  background:#fff;box-shadow:0 0 0 1px rgba(6,14,34,.18);transform:translateX(-50%);pointer-events:none}
.ba-handle::after{content:"";position:absolute;top:50%;left:50%;width:44px;height:44px;
  transform:translate(-50%,-50%);border-radius:50%;background:#fff;
  box-shadow:0 4px 16px rgba(6,14,34,.38)}
.ba-handle::before{content:"";position:absolute;top:50%;left:50%;width:18px;height:11px;z-index:1;
  transform:translate(-50%,-50%);
  background:linear-gradient(90deg,var(--accent) 0 7px,transparent 7px 11px,var(--accent) 11px 18px);
  clip-path:polygon(0 50%,35% 0,35% 100%,65% 0,65% 100%,100% 50%)}
.ba-tag{position:absolute;top:12px;font-size:.82rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;padding:4px 10px;border-radius:999px;pointer-events:none}
.ba-tag-before{left:12px;background:rgba(18,24,31,.78);color:#fff}
.ba-tag-after{right:12px;background:var(--accent);color:#fff}
.ba-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.ba-range:focus-visible{opacity:1;outline:3px solid var(--primary-light);outline-offset:-3px}
.proof-item{overflow:hidden}

/* ---------- final CTA ---------- */
.closing{background:var(--primary-deep);color:#fff;padding:0;
  border-top:5px solid var(--accent)}
.closing-grid{display:grid;gap:44px;grid-template-columns:minmax(0,1fr) minmax(0,520px);
  align-items:center;padding-block:var(--sec)}
.closing-eyebrow{color:var(--accent-bright);margin-bottom:14px;padding-bottom:0}
.closing-eyebrow::after{display:none}
.closing h2{margin:0 0 .7rem;font-size:clamp(1.8rem,3.6vw,2.7rem);color:#fff!important;line-height:1.1}
.closing p:not(.hero-cta){color:#C3D0E6;max-width:52ch;margin:0}
.closing .hero-cta{margin-top:1.9rem}
.closing-media{position:relative;margin:0;border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:0 22px 52px rgba(3,9,24,.42)}
.closing-media picture,.closing-media img{display:block;width:100%;height:100%;object-fit:cover}
.closing-media figcaption{position:absolute;inset-inline:0;bottom:0;padding:46px 22px 18px;
  display:grid;gap:2px;
  background:linear-gradient(180deg,rgba(7,24,61,0) 0%,rgba(7,24,61,.88) 62%)}
.closing-cap-title{font-family:var(--font-heading);font-weight:600;color:#fff;font-size:1.02rem}
.closing-cap-sub{font-size:.85rem;color:#BFCDE4}

/* ---------- footer ---------- */
.site-footer{background:var(--navy-deepest);color:#AFC0DC;padding:56px 0 26px}
.site-footer .cols{display:grid;gap:36px;
  grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));
  padding-top:34px;border-top:1px solid rgba(255,255,255,.14)}
.site-footer img{height:14px;width:auto}
.foot-tagline{font-family:var(--font-heading);font-weight:700;font-size:.6rem;
  letter-spacing:.155em;text-transform:uppercase;color:#8FA3C4;
  margin:10px 0 20px}
.foot-brand p{margin:0 0 12px;font-size:.92rem;line-height:1.6}
.foot-phone{font-weight:700}
.foot-phone a{color:#fff;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.foot-phone a:hover{color:var(--accent-bright)}
.foot-note{font-size:.85rem;color:#8FA3C4}
.site-footer h2{color:#fff;font-family:var(--font-heading);font-size:.8rem;
  letter-spacing:.14em;text-transform:uppercase;margin:0 0 16px}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:2px;font-size:.93rem}
.site-footer ul a{color:#AFC0DC;text-decoration:none;
  min-height:44px;min-width:44px;display:inline-flex;align-items:center}
.site-footer ul a:hover{color:#fff}
.legal{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.14);margin-top:40px;padding-top:22px;
  font-size:.85rem;color:#8FA3C4}
.legal a{color:#8FA3C4;min-height:44px;display:inline-flex;align-items:center}
.legal a:hover{color:#fff}
@media (max-width:960px){
  .closing-grid{grid-template-columns:1fr;gap:32px;padding-block:52px}
  .site-footer .cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:400px){.foot-tagline{white-space:nowrap}}
@media (max-width:560px){.site-footer .cols{grid-template-columns:1fr}}

/* ---------- one eyebrow style ---------- */
.eyebrow,.eyebrow-dark,.eyebrow-light{font-family:var(--font-heading);font-weight:700;
  font-size:.82rem;letter-spacing:.15em;text-transform:uppercase;margin:0 0 14px;padding-bottom:0}
.eyebrow::after,.eyebrow-dark::after,.eyebrow-light::after{display:none}
.eyebrow-dark{color:var(--accent)}
.eyebrow-light{color:var(--accent-bright)}

/* ---------- header phone ---------- */
.nav .nav-sheet-tel{display:none}
.nav-tel{font-weight:700;color:var(--heading)!important;white-space:nowrap}
.nav-tel:hover{color:var(--accent)!important}
/* `.nav a` in the touch-target block is (0,1,1) and outranks a bare `.nav-tel`,
   so this needs the same weight or the number never hides — it was rendering
   twice in the mobile sheet, once here and once as .nav-sheet-tel. */
@media (max-width:1180px){.nav a.nav-tel{display:none}}

/* ---------- sticky mobile contact bar ---------- */
.callbar{display:none}
@media (max-width:1200px){
  .callbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;
    grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.16);
    box-shadow:0 -6px 20px rgba(6,14,34,.22);padding-bottom:env(safe-area-inset-bottom)}
  .callbar a{display:flex;align-items:center;justify-content:center;min-height:56px;
    font-family:var(--font-heading);font-weight:700;font-size:1rem;text-decoration:none}
  .callbar-call{background:var(--accent);color:#fff}
  .callbar-wa{background:var(--heading);color:#fff}
  body{padding-bottom:56px}
}

/* ---------- comfortable measure + mobile type ---------- */
.lede,.section .lede{max-width:64ch}
.services-head h2,.areas-copy h2{max-width:24ch}
@media (min-width:761px){.services-head{grid-template-columns:minmax(0,62%) auto}}
/* Tablet spacing step. There wasn't one: the page jumped straight from the 96px
   desktop rhythm to the 48px phone rhythm at 760px, so a 900px viewport got
   desktop-sized gaps. MUST stay above the max-width:760px blocks below — equal
   specificity means source order decides which wins on a phone. */
@media (max-width:1024px){:root{--sec:72px}}
@media (max-width:760px){
  :root{--sec:64px}
  /* .proof-label was retired with the old proof grid; .work-blurb and the
     gallery captions replaced it and need the same 16px floor. */
  .svc-card p,.why-card p,.tl-body p,.work-blurb{font-size:1rem}
  body{font-size:16px}
}
.legal-right{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.credit{color:#8FA3C4}
.credit a{color:#AFC0DC;text-decoration:none;font-weight:600;min-height:44px;display:inline-flex;align-items:center}
.credit a:hover{color:#fff}

/* =========================================================================
   MOBILE (<=760px) — content-first: keep what helps someone decide to call,
   collapse what supports it, hide what is decoration.
   ========================================================================= */
@media (max-width:760px){
  :root{--sec:48px;--radius:20px;--radius-lg:24px}
  .wrap{padding-inline:16px}

  /* scroll lock behind the menu sheet */
  html.nav-open,html.nav-open body{overflow:hidden}
  html.nav-open .callbar{display:none}
  .nav-backdrop{position:fixed;inset:0;z-index:55;background:rgba(6,14,34,.55);
    backdrop-filter:blur(2px)}
  .nav-backdrop[hidden]{display:none}

  /* full-screen sheet from the right */
  .nav{position:fixed;inset:0 0 0 auto;width:min(84vw,340px);z-index:56;
    flex-direction:column;align-items:stretch;gap:0;background:#fff;
    padding:76px 20px calc(20px + env(safe-area-inset-bottom));
    box-shadow:-12px 0 34px rgba(6,14,34,.24);overflow-y:auto;
    animation:sheet .24s cubic-bezier(.22,.8,.3,1)}
  @keyframes sheet{from{transform:translateX(100%)}to{transform:none}}
  .nav a{justify-content:flex-start;min-height:56px;font-size:1.05rem;
    border-bottom:1px solid var(--line)}
  .nav a:last-child{border-bottom:0}
  .nav a.nav-cta{margin-top:auto;justify-content:center;min-height:54px}
  .nav .nav-sheet-tel{display:inline-flex;margin-top:12px;justify-content:center!important;min-height:54px;
    border:1.5px solid var(--line)!important;border-radius:999px;font-weight:700}
  .nav-toggle{position:relative;z-index:57}

  /* type floors */
  .eyebrow,.eyebrow-dark,.eyebrow-light{font-size:.82rem}
  .ba-tag{font-size:.82rem;padding:5px 12px}

  /* single column, no orphaned grid tracks */
  .services-head,.about-grid,.areas-grid,.faq-grid,.closing-grid,
  .emergency .wrap,.svc-body{grid-template-columns:1fr!important}
  .services-head h2,.areas-copy h2,.why-head h2{max-width:none}

  /* hide desktop flourishes that cost a swipe */
  .svc-link,.areas-map,.emergency-img,.closing-media,.trust-strip{display:none}

  /* tap feedback */
  .btn:active,.svc-card:active,.why-card:active,.quick a:active{transform:scale(.97)}

  /* tighter rhythm */
  .services-band{padding:24px 0 var(--sec)}
  .proof{padding:var(--sec) 0 24px}
  .services{padding-top:var(--sec)}
  .why-head,.process-head{margin-bottom:22px}
}

/* ---------- footer social row ---------- */
.social{list-style:none;display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:20px 0 0}
.social a{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  color:#AFC0DC;transition:background .2s,color .2s,border-color .2s,transform .2s}
.social a:hover{background:var(--accent);border-color:var(--accent);color:#fff;transform:translateY(-2px)}
.social svg{width:20px;height:20px}

/* quick-action tiles: see the "quick service navigator" component below */

/* ---------- area chips: six then expand ---------- */
.chips-more{display:none}
@media (max-width:760px){
  .chips-more{display:inline-flex;align-items:center;justify-content:center;
    min-height:48px;margin-top:14px;padding:0 22px;border-radius:999px;cursor:pointer;
    background:#fff;border:1.5px solid var(--line);font-family:var(--font-heading);
    font-weight:600;font-size:.95rem;color:var(--heading)}
  .chips-more[aria-expanded=true]{border-color:var(--accent);color:var(--accent)}
  .chips.is-collapsed .chip-extra{display:none}
}

/* ---------- horizontal swipe rows (mobile) ---------- */
@media (max-width:760px){
  /* .why-cards left out deliberately: the client asked for a 2x3 grid on
     phones so all six reasons are visible without swiping. */
  .svc-cards,.proof-grid,.timeline{
    display:flex;overflow-x:auto;gap:12px;padding-inline:16px;margin-inline:-16px;
    scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .svc-cards::-webkit-scrollbar,.proof-grid::-webkit-scrollbar,
  .timeline::-webkit-scrollbar{display:none}
  .svc-card,.proof-item,.tl-step{flex:0 0 78%;scroll-snap-align:start}
  .timeline::before{display:none}
  /* the featured card joins the row instead of towering above it */
  .services-grid{display:block}
  .svc-featured{display:none}
  /* process: numbers and copy carry it, photos are decoration here */
  .tl-media{display:none}
  .tl-step{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
    padding:20px;gap:8px}
  .tl-num{font-size:2.4rem;padding:0}
}

/* ---------- compact footer ---------- */
@media (max-width:760px){
  .site-footer{padding:40px 0 22px}
  .site-footer .cols{grid-template-columns:1fr;gap:8px;padding-top:26px}
  .site-footer .cols>div:not(.foot-brand){border-top:1px solid rgba(255,255,255,.12)}
  .site-footer h2{margin:0;padding:16px 0;cursor:pointer;position:relative;
    font-size:.95rem;letter-spacing:.06em;min-height:48px;display:flex;align-items:center}
  .site-footer h2::after{top:50%;transform:translateY(-50%)}
  .site-footer h2::after{content:"+";position:absolute;right:4px;top:12px;font-size:1.3rem;font-weight:400}
  .site-footer .cols>div.is-open h2::after{content:"–"}
  .site-footer .cols>div:not(.foot-brand) ul{display:none;padding-bottom:12px}
  .site-footer .cols>div.is-open ul{display:grid}
  .legal{flex-direction:column;align-items:flex-start;gap:10px;margin-top:24px}
}

@media (max-width:760px){
  .hero{min-height:70vh}
  .hero-inner{padding-block:44px}
  .hero h1{font-size:clamp(1.9rem,7.4vw,2.4rem)}
  .hero-lede{margin-bottom:1.4rem;font-size:1rem}
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .btn{width:100%}
  /* header shrinks once you start scrolling */
  .site-header{transition:min-height .2s}
  .site-header.is-small .wrap{min-height:54px}
  .site-header.is-small .brand img{height:12px}
  .callbar{box-shadow:0 -8px 24px rgba(6,14,34,.28)}
}

@media (max-width:760px){.hero{min-height:auto}}


/* =========================================================================
   ADDED 2026-09-08 — client feedback round: corporate credibility + icons
   1. quick service navigator (8 tiles, desktop + mobile)
   2. about the company + verified statistics band
   3. why choose us as a 3x2 / 2x3 icon grid
   4. mission / vision / promise
   5. EN | العربية language switcher
   ========================================================================= */

/* ---------- 1. quick service navigator ---------- */
/* Eight tiles directly under the hero — the client's single highest-value ask.
   On desktop the rail overlaps the hero so it reads as part of it. */
.quick{background:#fff;position:relative;z-index:2}
.quick-rail{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:14px;margin-top:-46px;margin-bottom:6px;
  box-shadow:0 18px 40px rgba(6,14,34,.13)}
.quick-tile{display:grid;justify-items:center;align-content:start;gap:9px;
  padding:16px 6px 14px;border-radius:var(--radius);text-decoration:none;
  color:var(--heading);min-height:44px;border:1px solid transparent;
  transition:background .2s,border-color .2s,transform .2s,box-shadow .2s}
.quick-ico{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;
  background:rgba(31,122,20,.09);color:var(--accent);
  transition:background .2s,color .2s}
.quick-ico .svc-icon{width:23px;height:23px}
.quick-label{font-family:var(--font-heading);font-weight:600;font-size:.86rem;
  line-height:1.2;text-align:center}
.quick-tile:hover{background:var(--bg-soft);border-color:var(--line);transform:translateY(-3px);
  box-shadow:0 10px 22px rgba(6,14,34,.09)}
.quick-tile:hover .quick-ico{background:var(--accent);color:#fff}
/* The emergency tile is the one that must be found in a hurry. */
.quick-tile.is-urgent{background:var(--accent);color:#fff}
.quick-tile.is-urgent .quick-ico{background:rgba(255,255,255,.18);color:#fff}
.quick-tile.is-urgent .quick-label{color:#fff}
.quick-tile.is-urgent:hover{background:var(--accent);border-color:var(--accent);
  filter:brightness(1.08);box-shadow:0 10px 22px rgba(31,122,20,.32)}
.quick-tile.is-urgent:hover .quick-ico{background:rgba(255,255,255,.28)}

@media (max-width:1080px){
  .quick-rail{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:-34px}
}
@media (max-width:760px){
  /* 4x2 grid, not a horizontal scroller — the client asked for all eight
     reachable without swiping. */
  .quick-rail{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:10px;
    margin-top:0;border-radius:var(--radius);box-shadow:0 6px 18px rgba(6,14,34,.07)}
  .quick{padding:16px 0 4px}
  .quick-tile{padding:12px 2px 10px;gap:7px}
  .quick-ico{width:40px;height:40px;border-radius:12px}
  .quick-ico .svc-icon{width:20px;height:20px}
  .quick-label{font-size:.82rem;overflow-wrap:break-word}
}
@media (max-width:360px){
  .quick-rail{gap:5px;padding:8px}
  .quick-tile{padding:10px 1px 9px}
  .quick-ico{width:36px;height:36px}
}

/* ---------- 2. about the company ---------- */
.about{background:#fff;padding:var(--sec) 0 0}
.about-grid{display:grid;gap:44px;grid-template-columns:minmax(0,440px) minmax(0,1fr);
  align-items:center;padding-bottom:var(--sec)}
.about-media{position:relative;margin:0;border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:0 12px 36px rgba(6,14,34,.13);align-self:stretch;min-height:340px}
.about-media picture,.about-media img{width:100%;height:100%;object-fit:cover;display:block}
.about-media figcaption{position:absolute;inset-inline:0;bottom:0;padding:52px 24px 22px;
  display:grid;gap:3px;
  background:linear-gradient(180deg,rgba(6,14,34,0) 0%,rgba(6,14,34,.84) 62%)}
.about-cap-title{font-family:var(--font-heading);font-weight:600;color:#fff;font-size:1.05rem}
.about-cap-sub{font-size:.85rem;color:#D7E1F0}
.about-copy h2{font-size:clamp(1.8rem,3.3vw,2.5rem);line-height:1.12;margin:0 0 .8rem}
.about-copy .lede{margin:0 0 1rem;color:var(--muted);max-width:52ch;font-size:1.06rem}
.about-copy p:not(.cta-row){color:var(--muted);max-width:56ch}
.about-points{list-style:none;padding:0;margin:22px 0 26px;display:grid;gap:11px}
.about-points li{position:relative;padding-inline-start:30px;color:var(--ink);font-size:.97rem}
.about-points li::before{content:"";position:absolute;inset-inline-start:0;top:.36em;
  width:17px;height:17px;border-radius:50%;background:rgba(31,122,20,.12)}
.about-points li::after{content:"";position:absolute;inset-inline-start:5px;top:.62em;
  width:7px;height:4px;border-inline-start:2px solid var(--accent);
  border-bottom:2px solid var(--accent);transform:rotate(-45deg)}

/* ---------- 2b. verified statistics band ---------- */
/* Numbers only. Rows with no confirmed value are not rendered at all — see
   COMPANY_STATS in includes/config.php. */
.stats{background:var(--primary-deep);color:#fff}
.stats-row{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));
  gap:1px;background:rgba(255,255,255,.13)}
.stat{background:var(--primary-deep);display:grid;gap:5px;justify-items:center;
  text-align:center;padding:38px 18px 34px}
.stat-num{font-family:var(--font-heading);font-weight:700;line-height:1;
  font-size:clamp(2.1rem,3.6vw,2.9rem);color:var(--accent-on-dark)}
.stat-lab{font-family:var(--font-heading);font-weight:600;font-size:1rem;color:#fff}
.stat-sub{font-size:.84rem;color:#B9C7E0}
@media (max-width:1023px){
  .stats-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat{padding:26px 14px 24px}
  /* An odd number of stats left an empty cell, and the divider colour behind the
     grid showed through it as a stray pale rectangle. The last one spans both. */
  .stat:last-child:nth-child(odd){grid-column:1/-1}
}
@media (max-width:1000px){
  .about-grid{grid-template-columns:1fr;gap:32px}
  .about-media{min-height:280px}
}

/* ---------- 3. why choose us: 3x2 desktop, 2x3 phone ---------- */
.why-head{max-width:62ch}
.why-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.why-card{padding:24px 24px 26px}
.why-icon-wrap{width:44px;height:44px;border-radius:13px;margin-bottom:14px}
.why-icon-wrap .svc-icon{width:23px;height:23px}
.why-card h3{font-size:1.06rem}
@media (max-width:940px){.why-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){
  .why-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;
    overflow:visible;padding-inline:0;margin-inline:0}
  .why-card{flex:none;padding:18px 16px 20px}
  .why-card h3{font-size:.98rem}
  .why-card p{font-size:.88rem;line-height:1.5}
  .why-icon-wrap{width:38px;height:38px;border-radius:11px;margin-bottom:10px}
  .why-icon-wrap .svc-icon{width:20px;height:20px}
}
@media (max-width:339px){.why-cards{grid-template-columns:1fr}}

/* ---------- 4. mission / vision / promise ---------- */
.mvp{background:var(--band);border-block:1px solid #E4EAF2;padding:var(--sec) 0}
.mvp-head{margin-bottom:32px;max-width:60ch}
.mvp-head h2{font-size:clamp(1.5rem,2.7vw,2.05rem);line-height:1.16;margin:0}
.mvp-grid{list-style:none;padding:0;margin:0;display:grid;gap:20px;
  grid-template-columns:repeat(3,minmax(0,1fr))}
.mvp-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 26px 28px;position:relative;overflow:hidden}
.mvp-card::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:4px;
  background:var(--accent)}
.mvp-card h3{margin:0 0 .3rem;font-size:1.1rem}
.mvp-strap{margin:0 0 .7rem!important;font-family:var(--font-heading);font-weight:600;
  font-size:.95rem;line-height:1.35;color:var(--accent)!important}
.mvp-card p{margin:0;color:var(--muted);font-size:.96rem;line-height:1.6}
@media (max-width:860px){.mvp-grid{grid-template-columns:1fr}}

/* ---------- 5. language switcher ---------- */
.lang{display:inline-flex;align-items:center;gap:2px;padding:3px 4px;border-radius:999px;
  border:1px solid var(--line);background:var(--bg-soft);flex:0 0 auto}
.lang-opt{display:inline-flex;align-items:center;justify-content:center;
  min-height:32px;padding:0 12px;border-radius:999px;text-decoration:none;
  font-family:var(--font-heading);font-weight:600;font-size:.85rem;color:var(--muted);
  white-space:nowrap;transition:background .2s,color .2s}
.lang-opt[lang=ar]{font-size:.92rem}
a.lang-opt:hover{background:#fff;color:var(--accent)}
.lang-opt.is-current{background:var(--primary);color:#fff}
/* staging only: the control is visible but the Arabic pages are not written */
.lang-opt.is-pending{opacity:.5;cursor:not-allowed}
.lang-sep{color:var(--line);font-size:.8rem}
@media (max-width:1200px){
  /* first thing in the sheet — where a language control is looked for */
  .lang{order:-1;align-self:stretch;justify-content:center;margin:0 0 16px;
    border-radius:14px;padding:5px}
  .lang-opt{flex:1;min-height:46px;font-size:.95rem}
}

/* ---------- section rhythm, revised for the two new sections ---------- */
/* white hero > white rail > white proof > band services > white about >
   navy stats > sand why > band mission > white process > sand areas > navy */
.mvp{background:var(--band)}


/* ---------- ADDED 2026-09-08: project gallery (client's own job photos) ----------
   CSS columns rather than a fixed-ratio grid: the source photos are a mix of
   portrait and landscape phone shots, and cropping them all to 4:3 would cut the
   top off half the staircases. Columns keep every frame whole. */
.gal-jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.gal-jump a{display:inline-flex;align-items:center;min-height:40px;padding:0 15px;
  border-radius:999px;border:1px solid var(--line);background:#fff;text-decoration:none;
  font-family:var(--font-heading);font-weight:600;font-size:.86rem;color:var(--heading);
  transition:border-color .2s,color .2s}
.gal-jump a:hover{border-color:var(--accent);color:var(--accent)}
.gal-h2{font-size:clamp(1.45rem,2.5vw,2rem);margin:0 0 .4rem}
.gal-note{color:var(--muted);max-width:64ch;margin:0 0 28px}
.gal-sec{scroll-margin-top:96px}
/* One large feature per category, then supporting images. Replaced a flat
   3-column masonry run where every photograph carried identical weight. */
.gal-layout{display:grid;grid-template-columns:minmax(0,58%) minmax(0,1fr);gap:18px;
  align-items:start}
.gal-feature{position:relative;margin:0;border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--line);box-shadow:0 6px 24px rgba(6,14,34,.09)}
.gal-feature img{width:100%;height:auto;display:block}
.gal-feature figcaption{position:absolute;inset-inline:0;bottom:0;padding:46px 20px 16px;
  color:#fff;font-size:.92rem;line-height:1.45;
  background:linear-gradient(180deg,rgba(6,14,34,0) 0%,rgba(6,14,34,.86) 68%)}
.gal-grid{list-style:none;padding:0;margin:0;columns:2;column-gap:14px}
.gal-item{break-inside:avoid;margin:0 0 18px;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;box-shadow:0 2px 10px rgba(6,14,34,.05)}
.gal-item img{width:100%;height:auto;display:block}
.gal-cap{display:block;padding:12px 15px 14px;font-size:.86rem;line-height:1.45;
  color:var(--muted)}
.gal-cta{display:flex;align-items:center;justify-content:space-between;gap:28px;
  flex-wrap:wrap;background:var(--band);border:1px solid #E4EAF2;
  border-radius:var(--radius-lg);padding:30px 32px}
.gal-cta h2{margin:0 0 .4rem;font-size:1.35rem}
.gal-cta p{margin:0;color:var(--muted);max-width:52ch}
.ba h3{margin:0 0 .3rem;font-size:1.25rem}
@media (max-width:1000px){
  .gal-layout{grid-template-columns:1fr;gap:14px}
  .gal-grid{columns:3;column-gap:14px}
}
@media (max-width:600px){
  .gal-grid{columns:2;column-gap:10px}
  .gal-feature figcaption{padding:38px 14px 12px;font-size:.84rem}
  .gal-item{margin-bottom:10px;border-radius:14px}
  .gal-cap{padding:9px 11px 11px;font-size:.84rem}
  .gal-cta{padding:22px}
}
@media (max-width:380px){.gal-grid{columns:1}}

/* ---------- video walkthroughs (client's own site clips) ----------
   Vertical phone video at 478x850. The intrinsic width/height on <video> plus a
   fixed aspect-ratio here reserve the slot, so the poster arriving does not
   shift the page. preload="none" keeps ~4MB off the initial load. */
.vid-grid{list-style:none;padding:0;margin:0;display:grid;gap:18px;
  grid-template-columns:repeat(4,minmax(0,1fr))}
.vid-item{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:0 2px 10px rgba(6,14,34,.05);display:flex;flex-direction:column}
.vid-item video{width:100%;height:auto;aspect-ratio:478/850;display:block;
  background:var(--primary-deep);object-fit:cover}
.vid-item .gal-cap{margin-top:auto}
@media (max-width:900px){.vid-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
@media (max-width:340px){.vid-grid{grid-template-columns:1fr}}


/* ---------- RECENT WORK — editorial asymmetric grid (2026-09-08) ----------
   The three before/after sliders used to sit in an even 3-up row at ~360px, so
   the most persuasive proof on the site read as thumbnails. A 12-column grid
   lets one comparison run large beside a full-height portrait project, then a
   three-up row underneath. Rows 1 and 2 have different rhythms on purpose —
   an even grid of identical boxes is what made it feel like a template. */
.work-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px}
.work-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 2px 12px rgba(6,14,34,.05);
  transition:transform .25s,box-shadow .25s,border-color .25s}
.work-card:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(6,14,34,.13);
  border-color:#D7DEE7}
.work-feature{grid-column:span 7}
.work-tall{grid-column:span 5}
.work-third{grid-column:span 4}

.work-media{position:relative;margin:0;overflow:hidden}
/* Single photographs fill whatever height the grid row gives them, so the tall
   card lines up with the feature comparison beside it without a magic number. */
.work-photo{flex:1;min-height:260px}
.work-photo picture,.work-photo img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;transition:transform .6s cubic-bezier(.22,.8,.3,1)}
.work-card:hover .work-photo img{transform:scale(1.03)}
.work-feature .ba-compare{aspect-ratio:16/11}
.work-third .ba-compare{aspect-ratio:4/3}

.work-meta{padding:16px 20px 20px}
.work-cat{margin:0 0 .3rem;font-family:var(--font-heading);font-weight:600;
  font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.work-meta h3{margin:0 0 .3rem;font-size:1.1rem;line-height:1.28}
.work-blurb{margin:0;color:var(--muted);font-size:.9rem;line-height:1.55}
.work-more{margin:28px 0 0}

@media (max-width:1100px){
  .work-feature,.work-tall{grid-column:span 12}
  .work-third{grid-column:span 6}
  .work-photo{min-height:340px}
}
@media (max-width:760px){
  /* Large single-column cards, not a swipe row: this is the proof section and
     every frame should be big enough to actually read. */
  .work-grid{grid-template-columns:1fr;gap:14px}
  .work-feature,.work-tall,.work-third{grid-column:1/-1}
  .work-feature .ba-compare,.work-third .ba-compare{aspect-ratio:4/3}
  .work-photo{min-height:0;aspect-ratio:4/3;flex:none}
  .work-meta{padding:14px 16px 18px}
  .work-more .btn{width:100%}
}

/* footer contact lines + the language control in the legal bar */
.foot-contact{margin:.35rem 0 0;font-size:.9rem;color:#AFC0DC}
.foot-contact a{color:#fff;text-decoration:none}
.foot-contact a:hover{text-decoration:underline}
.legal-right .lang{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18)}
.legal-right .lang-opt{color:#AFC0DC}
.legal-right a.lang-opt:hover{background:rgba(255,255,255,.12);color:#fff}
.legal-right .lang-opt.is-current{background:var(--accent);color:#fff}
.legal-right .lang-sep{color:rgba(255,255,255,.25)}
@media (max-width:1200px){
  /* the sheet layout rules must not follow the switcher into the footer */
  .legal-right .lang{order:0;align-self:auto;margin:0;border-radius:999px;padding:3px 4px}
  .legal-right .lang-opt{flex:0 0 auto;min-height:36px;font-size:.85rem}
}

/* skip link — visible only on keyboard focus, above the sticky header */
.skip-link{position:fixed;top:0;inset-inline-start:0;z-index:100;
  background:var(--primary-deep);color:#fff;padding:12px 20px;
  border-end-end-radius:12px;transform:translateY(-130%);
  font-family:var(--font-heading);font-weight:600;text-decoration:none}
.skip-link:focus{transform:none}
@media (prefers-reduced-motion:reduce){.skip-link{transition:none}}
main:focus{outline:none}


/* =========================================================================
   RTL CORRECTIONS (2026-09-08)
   Logical properties handle most of the flip on their own. These are the
   places that genuinely cannot: physical gradient angles and image framing,
   which have no logical equivalent.
   ========================================================================= */

/* The hero's dark field is a 100deg gradient — a PHYSICAL direction. Unmirrored
   it covered the technicians on an Arabic page and left the copy sitting over
   the brightest part of the photo. Mirror the angle and the crop together. */
[dir="rtl"] .hero::after{
  background:linear-gradient(260deg,rgba(4,10,26,.94) 0%,rgba(4,10,26,.86) 34%,
    rgba(4,10,26,.55) 58%,rgba(4,10,26,.12) 74%,rgba(4,10,26,0) 100%)}
[dir="rtl"] .hero>picture>img{object-position:38% center}

/* Same construction on the emergency band. */
[dir="rtl"] .emergency::after{
  background:linear-gradient(260deg,rgba(7,24,61,.93) 0%,rgba(7,24,61,.86) 38%,
    rgba(7,24,61,.5) 62%,rgba(7,24,61,.18) 78%,rgba(7,24,61,.1) 100%)}
[dir="rtl"] .emergency-bg img{object-position:40% center}
@media (max-width:860px){
  /* the vertical mobile gradient needs no mirroring, but the override above
     would otherwise win on specificity */
  [dir="rtl"] .emergency::after{
    background:linear-gradient(180deg,rgba(7,24,61,.9) 0%,rgba(7,24,61,.82) 100%)}
  [dir="rtl"] .emergency-bg img{object-position:center}
}

/* The mobile nav sheet slides in from the inline-end edge in both directions. */
[dir="rtl"] .nav{box-shadow:12px 0 34px rgba(6,14,34,.24)}
@media (max-width:760px){
  [dir="rtl"] .nav{inset:0 auto 0 0}
  @keyframes sheet-rtl{from{transform:translateX(-100%)}to{transform:none}}
  [dir="rtl"] .nav{animation-name:sheet-rtl}
}

/* Decorative arrows point the other way when the text does. */
[dir="rtl"] .svc-link .arrow,
[dir="rtl"] .proof-link span[aria-hidden],
[dir="rtl"] .svc-chip{transform:scaleX(-1)}
[dir="rtl"] .svc-link:hover .arrow{transform:scaleX(-1) translateX(4px)}
[dir="rtl"] .svc-more::after{content:" ←"}

/* Staging bar is English developer text; keep it LTR inside an RTL document. */
[dir="rtl"] .preview-bar{direction:ltr}

/* An isolated LTR run sits flush against the Arabic beside it — the separating
   space lands on the far side of the isolate. A hair of margin keeps them apart
   in both directions and is invisible in English. */
bdi{margin-inline:.14em}

/* Numbers stay LTR wherever they carry meaning as a sequence. */
.stat-num,.tl-num{direction:ltr;unicode-bidi:isolate}


/* ---------- logo v3 (full lockup) ---------- */
/* Footer mark is the reversed derivation; it can run larger, there is room. */
.foot-brand img{height:70px;width:auto;max-width:100%}
@media (max-width:760px){
  /* compact crop: no tagline, so it can run shorter and still read */
  .brand img{height:40px;aspect-ratio:2496/446}
  .foot-brand img{height:46px;aspect-ratio:2496/446}
  .site-header.is-small .wrap{min-height:62px}
  .site-header.is-small .brand img{height:34px}
}
@media (max-width:360px){.brand img{height:34px}}
/* The lockup already carries the tagline, so the separate line went with it. */
.foot-tagline{display:none}


/* ============================================================
   INNER PAGES  (added 2026-09-12)
   Service, area, core, hub and blog templates. Mobile-first:
   everything below is single column until 900px, where the
   sidebar appears. No rule here assumes a wide viewport.
   ============================================================ */

/* ---------- breadcrumbs ---------- */
/* The old rule faded every <span>, which also faded the current page label once
   breadcrumbs started marking it up as one. Only the separator should recede. */
.crumbs span{opacity:1;margin:0}
.crumbs .crumb-sep{opacity:.45;margin:0 8px}
.crumbs [aria-current=page]{color:var(--ink);font-weight:600}
.page-head.has-img .crumbs [aria-current=page]{color:#fff}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline}

/* ---------- two-column body ---------- */
.page-body{display:grid;gap:40px;padding-block:56px;align-items:start}
@media (min-width:900px){
  .page-body{grid-template-columns:minmax(0,1fr) 320px;gap:60px}
  /* Form and legal pages have no sidebar, so the measure is capped instead. */
  .page-body.is-wide{grid-template-columns:minmax(0,1fr)}
  .page-body.is-wide .page-main{max-width:74ch}
}
.page-main{min-width:0}            /* lets long code/tables shrink, not overflow */
@media (min-width:900px){
  .page-side{position:sticky;top:108px}
}

/* ---------- prose ---------- */
.prose{max-width:72ch;font-size:1.0625rem}
.prose>*:first-child{margin-top:0}
.prose h2{margin:2.2em 0 .6em;font-size:clamp(1.32rem,2.2vw,1.65rem);line-height:1.25;
  scroll-margin-top:110px}
.prose h3{margin:1.8em 0 .5em;font-size:1.12rem;line-height:1.3;scroll-margin-top:110px}
.prose p{margin:0 0 1.15em}
.prose ul,.prose ol{margin:0 0 1.3em;padding-inline-start:1.4em}
.prose li{margin-bottom:.55em}
.prose li::marker{color:var(--accent)}
.prose strong{color:var(--heading);font-weight:700}
.prose a{font-weight:600;text-underline-offset:3px}
.prose blockquote{margin:1.6em 0;padding:4px 0 4px 20px;
  border-inline-start:3px solid var(--accent);color:var(--muted);font-style:italic}
.prose hr{border:0;border-top:1px solid var(--line);margin:2.4em 0}
/* A paragraph that opens with a bolded run-in is the deck's house style for
   labelled points; give it a touch more air so the label reads as a heading. */
.prose p>strong:first-child{display:inline-block;margin-bottom:.1em}

/* ---------- tables ---------- */
/* A comparison table is the one thing allowed to scroll sideways on a phone,
   and it has to announce itself as scrollable — hence the inset shadow edge. */
.table-scroll{overflow-x:auto;margin:0 0 1.6em;border:1px solid var(--line);
  border-radius:var(--radius);-webkit-overflow-scrolling:touch}
.data-table{border-collapse:collapse;width:100%;min-width:34rem;font-size:.95rem}
.data-table th,.data-table td{text-align:start;padding:12px 16px;
  border-bottom:1px solid var(--line);vertical-align:top}
.data-table thead th,.data-table tr:first-child th{background:var(--band);
  color:var(--heading);font-family:var(--font-heading);font-weight:600;
  position:sticky;top:0}
.data-table tr:last-child td,.data-table tr:last-child th{border-bottom:0}
.data-table td strong{color:var(--heading)}

/* ---------- contents rail ---------- */
/* Ships as <details> so a phone gets a single tappable line instead of a
   nine-item list between the reader and the copy. */
.toc{border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-soft);
  margin:0 0 36px;padding:0 18px}
.toc summary{cursor:pointer;list-style:none;padding:14px 0;font-family:var(--font-heading);
  font-weight:600;color:var(--heading);display:flex;align-items:center;gap:8px;min-height:44px}
.toc summary::-webkit-details-marker{display:none}
.toc summary::after{content:"";width:8px;height:8px;margin-inline-start:auto;
  border-inline-end:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(45deg);transition:transform .18s ease}
.toc[open] summary::after{transform:rotate(-135deg)}
.toc ol{margin:0;padding:0 0 12px 1.3em;font-size:.94rem}
.toc li{margin-bottom:0}
/* Block + padding so an opened rail gives each row a thumb-sized target rather
   than a 21px line of text. */
.toc a{color:var(--muted);text-decoration:none;display:block;padding:11px 0;
  min-height:44px}
.toc a:hover{color:var(--accent);text-decoration:underline}
@media (min-width:900px){
  /* Pointer input, so the rail can tighten up and show more at a glance. */
  .toc a{padding:5px 0;min-height:0}
  .toc li{margin-bottom:.3em}
}

/* ---------- scope list ---------- */
.scope{margin-top:44px;padding-top:32px;border-top:1px solid var(--line)}
.scope h2{margin:0 0 1rem;font-size:1.4rem}
.svc-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
@media (min-width:620px){.svc-list{grid-template-columns:1fr 1fr;gap:12px 28px}}
.svc-list li{position:relative;padding-inline-start:30px;color:var(--muted)}
.svc-list li::before{content:"";position:absolute;inset-inline-start:0;top:.45em;
  width:16px;height:9px;border-inline-start:2.5px solid var(--accent);
  border-bottom:2.5px solid var(--accent);transform:rotate(-45deg)}

/* ---------- reviewer byline ---------- */
.reviewed{margin-top:48px;padding:22px 24px;border-radius:var(--radius);
  background:var(--bg-soft);border:1px solid var(--line);border-inline-start:4px solid var(--primary)}
.reviewed p{margin:0;font-size:.94rem;color:var(--muted)}
.reviewed-by strong{color:var(--heading)}
.reviewed-on{margin-top:.5rem!important}

/* ---------- sidebar enquiry card ---------- */
.cta-card{background:var(--primary);color:#fff;border-radius:var(--radius-lg);padding:28px 26px}
.cta-card h2{color:#fff;margin:0 0 .5rem;font-size:1.3rem}
.cta-card p{margin:0 0 20px;color:#D9E2F5;font-size:.96rem}
.cta-card .btn{display:flex;width:100%;justify-content:center;margin-bottom:10px}
.cta-card .btn:last-child{margin-bottom:0}
.cta-card .btn-ghost{border-color:rgba(255,255,255,.55);color:#fff}
.cta-card .btn-ghost:hover{background:rgba(255,255,255,.12)}

/* ---------- closing CTA band ---------- */
.cta-band{background:var(--primary-deep);color:#fff;text-align:center}
.cta-band h2{color:#fff}
.cta-band p{color:#C9D5EC;max-width:60ch;margin-inline:auto}
.cta-band .cta-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:26px}

/* ---------- FAQ ---------- */
.faq-section{background:var(--bg-soft);border-block:1px solid var(--line)}
.faq-a{margin:0 0 22px;color:var(--muted);max-width:72ch}
.faq-a>*:last-child{margin-bottom:0}
.faq-a p{margin:0 0 .9em}
.faq-a ul,.faq-a ol{margin:0 0 .9em;padding-inline-start:1.3em}
.faq summary{min-height:44px}
.faq summary h3{font-family:var(--font-heading)}

/* ---------- related / areas ---------- */
.related h2,.areas-band h2{margin-bottom:1.2rem}
.card-meta{margin-top:.8rem!important;font-size:.85rem;color:var(--muted)}
.hub-intro{padding-bottom:0}

/* ---------- forms ---------- */
.quote-form{display:grid;gap:20px;max-width:560px}
.field{display:grid;gap:7px}
.field label{font-weight:600;font-size:.94rem;color:var(--heading)}
.field .req{color:var(--accent);font-weight:700}
.field .opt{color:var(--muted);font-weight:400;font-size:.85em}
/* 16px minimum: anything smaller makes iOS Safari zoom the whole page on focus. */
.quote-form input,.quote-form select,.quote-form textarea{
  font:inherit;font-size:16px;padding:13px 14px;border:1px solid var(--line);
  border-radius:10px;background:#fff;color:var(--ink);width:100%;min-height:48px}
.quote-form textarea{min-height:132px;resize:vertical}
.quote-form input[aria-invalid=true],.quote-form textarea[aria-invalid=true],
.quote-form select[aria-invalid=true]{border-color:#C02B14;background:#FFF8F7}
.field-err{color:#A8240F;font-size:.88rem;font-weight:600}
.form-summary{border:1px solid #E8B4A8;background:#FFF6F4;border-radius:var(--radius);
  padding:16px 18px;color:#8C1D0A}
.form-summary strong{color:#7A1908}
.quote-form button{justify-self:start;border:0;cursor:pointer;min-height:52px}
.form-note{font-size:.88rem;color:var(--muted);margin:0;max-width:52ch}
/* Honeypot: moved off-screen rather than display:none, which some bots detect. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-success{border:1px solid #BFE3B8;background:#F3FBF1;border-radius:var(--radius-lg);
  padding:28px 26px}
.form-success h2{margin:0 0 .6rem;font-size:1.45rem;color:var(--heading)}
.form-success p{margin:0 0 .9em;color:var(--muted)}
.form-success .cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.inline-form{margin-top:48px;padding-top:36px;border-top:1px solid var(--line)}
.inline-form h2{font-size:1.4rem;margin:0 0 1.2rem}

/* ---------- contact details & people ---------- */
.contact-dl{display:grid;gap:0;margin:0 0 36px;border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden}
@media (min-width:560px){.contact-dl{grid-template-columns:minmax(120px,auto) 1fr}}
.contact-dl dt{background:var(--bg-soft);padding:13px 18px;font-weight:600;
  font-family:var(--font-heading);color:var(--heading);font-size:.92rem;
  border-bottom:1px solid var(--line)}
.contact-dl dd{margin:0;padding:13px 18px;border-bottom:1px solid var(--line);
  overflow-wrap:anywhere}
@media (max-width:559px){
  .contact-dl dt{border-bottom:0;padding-bottom:2px;background:#fff}
  .contact-dl dd{padding-top:0}
}
.contact-dl>*:nth-last-child(-n+2){border-bottom:0}
.people{margin-top:44px}
.people h2{font-size:1.4rem;margin:0 0 1rem}
.people-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
@media (min-width:560px){.people-list{grid-template-columns:1fr 1fr}}
.people-list li{display:grid;gap:2px;padding:16px 18px;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--bg-soft)}
.people-list strong{color:var(--heading);font-family:var(--font-heading)}
.people-list span{color:var(--muted);font-size:.92rem}

/* ---------- blog byline ---------- */
.byline{margin:14px 0 0;font-size:.94rem;color:var(--muted)}
.byline strong{color:var(--ink)}
.byline-sep{margin:0 7px;opacity:.5}
.page-head.has-img .byline{color:#DDE6F2}
.page-head.has-img .byline strong{color:#fff}

/* ---------- mobile trim ---------- */
@media (max-width:760px){
  .page-body{padding-block:40px;gap:32px}
  .prose{font-size:1rem}
  .cta-card{padding:24px 20px}
  .toc{margin-bottom:28px}
  .reviewed{padding:18px 20px}
  /* The fixed call bar sits over the end of the page; keep clear of it. */
  .cta-band{padding-bottom:calc(var(--sec) + 64px)}
}
@media (max-width:420px){
  .data-table{min-width:28rem}
}

/* The fixed call bar (<=1023px) already pins Call and WhatsApp to the bottom of
   every page, so the hero's WhatsApp button is a duplicate that pushes the copy
   down a whole row on a phone. Keep "Get a free quote" — the bar has no
   equivalent — and drop the repeat. It returns on desktop, where there is no bar. */
@media (max-width:1200px){
  .page-head .cta-row .btn-wa{display:none}
}

/* Hero overlay on narrow screens.
   The desktop overlay is a HORIZONTAL gradient — .9 opacity at the left where
   the text sits, fading to .25 at the right. Below the sidebar breakpoint the
   heading spans the full width, so its last words landed on the .25 end and
   white-on-photo dropped under AA. Narrow screens get an even, darker wash
   instead, with a little extra weight at the bottom for the lede. */
@media (max-width:1200px){
  .page-head.has-img::after,
  [dir=rtl] .page-head.has-img::after{
    background:linear-gradient(180deg,rgba(0,23,74,.74) 0%,rgba(0,23,74,.78) 55%,rgba(0,23,74,.86) 100%)}
}

/* ============================================================
   PRIMARY MENU with dropdowns  (2026-09-12)
   One markup tree serves both: a hover/click mega-panel on
   desktop, an in-sheet accordion on mobile. The panel is
   [hidden] by default so the no-JS state is a plain link row.
   ============================================================ */
.nav-group{position:relative;display:flex;align-items:center}
.nav-group-link{text-decoration:none}
.nav-group-toggle{background:none;border:0;padding:0 2px;margin-inline-start:2px;cursor:pointer;
  color:var(--ink);display:inline-flex;align-items:center;justify-content:center;
  min-width:32px;min-height:44px}
.nav-group-toggle svg{width:15px;height:15px;transition:transform .2s}
.nav-group-toggle[aria-expanded=true] svg{transform:rotate(180deg)}
.nav-group:hover .nav-group-link,.nav-group:focus-within .nav-group-link{color:var(--primary)}
.nav .nav-group-link[aria-current=page],.nav a[aria-current=page]{color:var(--primary)}
.nav-col-h{font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);margin:0 0 10px;font-weight:700}
.nav-panel ul{list-style:none;margin:0;padding:0}
.nav-panel-all a{font-weight:700;text-decoration:none;color:var(--accent);
  display:inline-flex;align-items:center;gap:7px;min-height:44px}

@media (min-width:1201px){
  /* Desktop mega-panel.
     It anchors to the HEADER, not to its trigger. Anchoring to the trigger and
     centring on it pushed a 980px panel off the left edge of the screen, because
     "Services" sits near the left of a 1160px row. Making .nav-group static hands
     the containing block to .site-header (position:sticky counts as positioned),
     so the panel spans the full header width and its inner grid lines up with
     the page's own 1160px measure. */
  .nav-group{position:static}
  .nav-panel{position:absolute;top:100%;inset-inline:0;background:#fff;
    border-top:1px solid var(--line);
    box-shadow:0 26px 60px rgba(6,14,34,.16);padding:30px 0 26px;z-index:70}
  /* HOVER BRIDGE — without this the menu is unusable with a mouse.
     .nav-group is position:static here, so its hover box is just the trigger
     (44px tall, ending at y68) while the panel starts at the bottom of the
     header (y89). Moving the pointer down to a link crosses 21px belonging to
     neither, which fires mouseleave and closes the panel before it can be
     reached. This invisible strip is a child of the panel, so the pointer never
     leaves .nav-group while crossing it. It only exists while the panel is open,
     because [hidden] is display:none and renders no pseudo-element. */
  .nav-panel::before{content:"";position:absolute;top:-24px;inset-inline:0;height:24px}
  .nav-panel-inner{max-width:var(--wrap);margin-inline:auto;padding-inline:20px;
    display:grid;gap:26px 28px;grid-template-columns:repeat(5,minmax(0,1fr));
    align-items:start}
  .nav-panel li a{display:block;padding:6px 0;font-size:.9rem;color:var(--ink);
    text-decoration:none;line-height:1.35}
  .nav-panel li a:hover{color:var(--accent)}
  .nav-panel-all{grid-column:1/-1;margin:4px 0 0;padding-top:16px;
    border-top:1px solid var(--line)}
  /* The Areas panel has one short column; don't stretch it across five. */
  .nav-panel-inner:has(> .nav-col:only-of-type){grid-template-columns:minmax(0,320px)}
}

@media (max-width:1200px){
  /* Mobile: the panel is part of the sheet, not an overlay. */
  /* flex-wrap:nowrap is the fix, and the removed max-height was the bug.
     The sheet inherits flex-wrap:wrap from the desktop nav and is flex-direction:
     column. Giving it a max-height meant that as soon as an opened accordion made
     the content taller than the sheet, the column WRAPPED — into a second and
     third column laid out sideways — so the whole menu jumped right and clipped.
     The drawer is already inset:0 0 0 auto (full height) and scrolls on its own,
     so the cap was never needed. */
  .nav{overflow-y:auto;flex-wrap:nowrap;overscroll-behavior:contain}
  /* minmax(0,1fr) rather than 1fr is the fix that matters here.
     A plain `1fr` track is `minmax(auto,1fr)`, and that `auto` floor is the
     track's MIN-CONTENT width. The open panel spans both columns and carries
     labels like "Complete Building Maintenance", so the floor grew past the
     drawer and dragged the whole sheet sideways — the menu visibly jumped right
     and clipped the moment an accordion was opened. A zero floor lets the track
     shrink to the drawer instead, and the labels wrap.
     The overflow-x guard is belt-and-braces: .nav sets overflow-y:auto, which
     computes overflow-x to auto, so anything that did overflow would scroll
     sideways rather than being clipped cleanly. */
  .nav{overflow-x:hidden}
  .nav-group{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:stretch;
    width:100%;min-width:0;border-bottom:1px solid var(--line)}
  .nav-group>*{min-width:0}
  .nav-panel,.nav-panel-inner,.nav-col,.nav-panel ul,.nav-panel li{min-width:0;max-width:100%}
  .nav-panel li a{overflow-wrap:anywhere}
  .nav-group .nav-group-link{min-height:52px;display:flex;align-items:center;
    border-bottom:0;font-weight:600;font-size:.94rem;color:var(--ink)}
  .nav-group-toggle{min-width:52px;border-inline-start:1px solid var(--line)}
  .nav-panel{grid-column:1/-1;padding:4px 0 14px}
  .nav-panel-inner{display:grid;gap:18px}
  .nav-col-h{margin:8px 0 4px}
  .nav-panel li a{display:flex;align-items:center;min-height:46px;
    padding-inline-start:14px;font-size:.92rem;color:var(--muted);text-decoration:none;
    border-bottom:1px solid var(--line)}
  .nav-panel li:last-child a{border-bottom:0}
  .nav-panel-all{margin:10px 0 0;padding-inline-start:14px}
}

/* Desktop nav row budget.
   The row has 909px between the logo and the edge of the 1160px wrap, and its
   items measure 788px. At an 18px gap that totals 950px — one pixel over, which
   is what pushed the language switcher onto a second line the moment "Blog" and
   the two dropdown chevrons were added. Tightening the gap and the two widest
   controls brings it to ~878px, leaving about 30px of headroom for a future
   label rather than sitting on the limit. */
@media (min-width:1201px){
  .nav{gap:12px}
  .nav a.nav-cta{padding:0 18px}
  .lang{padding:3px}
  .lang-opt{padding-inline:12px}
}


/* =====================================================================
   v2 CONTENT PACKAGE COMPONENTS (2026-09-17)
   About, Emergency Callout, Blog index, Blog post, reviewer card.
   Everything below is additive; nothing above was replaced.
   ===================================================================== */
.section-tight{padding:40px 0}
.section-top-0{padding-top:0}
.narrow{max-width:820px}
.narrow-lg{max-width:900px}
.section-sub{color:var(--muted);max-width:64ch;margin:0 0 36px;font-size:1.05rem}
.section-sub p{margin:0 0 .6em}
.btn-block{width:100%}
.btn .ui-icon{width:20px;height:20px;margin-inline-end:8px}
.ui-icon{width:22px;height:22px;flex:0 0 auto}
.text-link{display:inline-flex;align-items:center;gap:6px;font-weight:700;text-decoration:none;
  color:var(--accent);min-height:44px}
.text-link .ui-icon{width:18px;height:18px;transition:transform .2s}
.text-link:hover .ui-icon{transform:translateX(3px)}
.row-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:12px;margin-bottom:24px}
.row-head h2{margin:0}
.band-navy{background:var(--primary-deep);color:#fff}
.band-navy h2,.band-navy h3{color:#fff}
.split-2{display:grid;gap:40px}
@media (min-width:900px){.split-2{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:64px;align-items:center}
  .split-2.split-top{align-items:start}}

/* ---------- avatar + reviewer card ---------- */
.avatar{display:inline-grid;place-items:center;flex:0 0 auto;width:52px;height:52px;border-radius:50%;
  background:var(--primary);color:#fff;font:700 1.05rem/1 var(--font-heading);letter-spacing:.02em;
  box-shadow:0 0 0 3px #fff,0 0 0 4px var(--line)}
.avatar-sm{width:34px;height:34px;font-size:.78rem;box-shadow:none}
.avatar-lg{width:68px;height:68px;font-size:1.35rem}
.reviewed{display:flex;gap:18px;align-items:flex-start}
.reviewed-txt{min-width:0}
.reviewed .reviewed-kicker{font:700 .78rem/1.2 var(--font-heading);letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent);margin-bottom:4px}
.reviewed .reviewed-by{font-size:1rem}
.reviewed .reviewed-by strong{display:block;font-family:var(--font-heading);font-size:1.08rem}
.reviewed .reviewed-by span{display:block}
.cred-chips{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0;padding:0}
.cred-chips li{font-size:.82rem;font-weight:600;color:var(--primary-deep);background:#fff;
  border:1px solid var(--line);border-radius:999px;padding:4px 11px}
@media (max-width:520px){.reviewed{flex-direction:column;gap:12px}}

/* ---------- person cards ---------- */
.person-grid{display:grid;gap:24px}
@media (min-width:900px){.person-grid{grid-template-columns:1fr 1fr}}
.person-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px;
  box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:14px}
.person-head{display:flex;align-items:center;gap:16px}
.person-head>div{min-width:0;flex:1}
.person-head h3{margin:0;font-size:1.25rem}
.person-role{margin:2px 0 0;color:var(--muted);font-size:.95rem}
.person-years{margin:0;text-align:center;line-height:1;color:var(--primary)}
.person-years strong{display:block;font:700 2rem/1 var(--font-heading)}
.person-years span{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.person-card .cred-chips{margin:0}
.person-card .cred-chips li{background:var(--band)}
.person-body p,.person-covers{margin:0 0 .8em;color:var(--ink)}
.person-covers{color:var(--muted)}

/* ---------- ABOUT ---------- */
.about-hero,.em-hero,.blog-hero{background:var(--primary-deep);color:#fff;padding:48px 0 64px;position:relative;
  overflow:hidden;isolation:isolate}
.about-hero::before,.blog-hero::before{content:"";position:absolute;inset:auto -10% -40% auto;width:560px;height:560px;
  border-radius:50%;background:radial-gradient(circle,rgba(53,87,196,.55),transparent 65%);z-index:-1}
.about-hero .crumbs,.em-hero .crumbs,.blog-hero .crumbs{color:#BACBE4}
.about-hero .crumbs [aria-current=page],.em-hero .crumbs [aria-current=page],.blog-hero .crumbs [aria-current=page]{color:#fff}
.about-hero h1,.em-hero h1,.blog-hero h1{color:#fff;font-size:clamp(2rem,4.4vw,3.1rem);line-height:1.1;margin:.3rem 0 .9rem}
.about-hero .lede,.blog-hero-intro{color:#D5DEEE;font-size:1.12rem;max-width:56ch}
.about-hero-grid,.blog-hero-grid{display:grid;gap:40px;margin-top:18px}
@media (min-width:980px){.about-hero-grid,.blog-hero-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);align-items:center;gap:64px}}
.about-hero .cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.fact-grid,.blog-stats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fact-grid li,.blog-stats li{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius);
  padding:20px;backdrop-filter:blur(4px)}
.fact-grid strong,.blog-stats strong{display:block;font:700 2.2rem/1 var(--font-heading);color:var(--accent-on-dark);margin-bottom:8px}
.fact-grid span,.blog-stats span{font-size:.93rem;color:#D5DEEE;line-height:1.4;display:block}
.big-prose p{font-size:clamp(1.12rem,1.6vw,1.3rem);line-height:1.6;color:var(--ink);margin:0 0 1em}
.big-prose p:first-child{font-family:var(--font-heading);font-weight:500;color:var(--heading);font-size:clamp(1.25rem,2vw,1.55rem);line-height:1.45}
.leak-flow{background:var(--sand);border:1px solid var(--sand-ink);border-radius:var(--radius-lg);padding:28px}
.leak-flow-h{font:700 1.15rem/1.3 var(--font-heading);color:var(--heading);margin:0 0 18px}
.leak-flow ol{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:10px;counter-reset:lf}
.leak-flow li{display:flex;gap:14px;align-items:center;background:#fff;border-radius:12px;padding:12px 14px;
  box-shadow:var(--shadow-sm);position:relative}
.leak-flow li .svc-icon,.leak-flow li .ui-icon{width:34px;height:34px;padding:6px;border-radius:10px;background:var(--band);color:var(--primary)}
.leak-flow li strong{display:block;color:var(--heading);font-family:var(--font-heading)}
.leak-flow li span{font-size:.93rem;color:var(--muted)}
.chips-tight{margin:0 0 6px}
.chips-tight li a{font-size:.86rem;padding:6px 12px}
.principle-grid{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:18px}
@media (min-width:700px){.principle-grid{grid-template-columns:1fr 1fr}}
.principle{position:relative;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius-lg);padding:28px 28px 26px}
.principle .ui-icon{width:40px;height:40px;color:var(--accent-on-dark);margin-bottom:14px}
.principle-n{position:absolute;top:22px;inset-inline-end:24px;font:700 1rem/1 var(--font-heading);color:rgba(255,255,255,.35)}
.principle h3{margin:0 0 .4rem;font-size:1.2rem}
.principle p{margin:0;color:#D5DEEE}
.info-tiles{display:grid;gap:18px}
@media (min-width:760px){.info-tiles{grid-template-columns:repeat(3,1fr)}.info-tiles-2{grid-template-columns:1fr 1fr}}
.info-tile{border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px;background:#fff}
.info-tile>.ui-icon{width:40px;height:40px;padding:8px;border-radius:12px;background:var(--band);color:var(--primary);margin-bottom:12px}
.info-tile h2{font-size:1.15rem;margin:0 0 .4rem}
.info-tile p{margin:0 0 .6em;color:var(--muted)}

/* ---------- EMERGENCY ---------- */
.em-hero{background:linear-gradient(135deg,var(--navy-deepest) 0%,var(--primary-deep) 60%,var(--danger-deep) 100%)}
.em-hero::before{content:"";position:absolute;inset:-30% -20% auto auto;width:620px;height:620px;border-radius:50%;
  background:radial-gradient(circle,rgba(180,35,24,.38),transparent 62%);z-index:-1}
.em-hero-grid{display:grid;gap:32px;margin-top:10px}
@media (min-width:980px){.em-hero-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:56px;align-items:start}}
.live-badge{display:inline-flex;align-items:center;gap:10px;margin:8px 0 0;padding:7px 14px 7px 12px;border-radius:999px;
  background:var(--danger);color:#fff;font:700 .85rem/1.2 var(--font-heading);letter-spacing:.02em}
.pulse{width:10px;height:10px;border-radius:50%;background:#fff;position:relative}
.pulse::after{content:"";position:absolute;inset:0;border-radius:50%;background:#fff;animation:em-pulse 1.6s ease-out infinite}
@keyframes em-pulse{from{transform:scale(1);opacity:.8}to{transform:scale(2.8);opacity:0}}
.em-intro p{color:#D5DEEE;font-size:1.1rem;max-width:58ch;margin:0 0 .8em}
.em-intro strong,.em-intro a{color:#fff}
.em-call{background:#fff;color:var(--ink);border-radius:var(--radius-lg);padding:26px;box-shadow:0 24px 60px rgba(4,10,26,.45)}
.em-call h2{margin:0 0 10px;font-size:1.05rem;text-transform:uppercase;letter-spacing:.08em;color:var(--danger-ink)}
.em-number{display:flex;align-items:center;gap:12px;background:var(--danger);color:#fff;border-radius:14px;
  padding:16px 18px;text-decoration:none;font:700 clamp(1.35rem,2.4vw,1.7rem)/1 var(--font-heading);margin-bottom:12px;
  transition:transform .15s,box-shadow .15s}
.em-number:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(180,35,24,.35)}
.em-number .ui-icon{width:30px;height:30px}
.em-call .btn-wa{min-height:52px}
.em-call-tip{font-size:.93rem;color:var(--muted);margin:14px 0}
.em-999{display:flex;gap:10px;align-items:flex-start;margin:0;padding:12px 14px;border-radius:12px;
  background:var(--danger-soft);border:1px solid var(--danger-line);color:var(--danger-ink);font-size:.93rem}
.em-999 a{color:var(--danger-ink);font-weight:700}
.em-999 .ui-icon{margin-top:1px}
.em-jump{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:36px;padding-top:26px;border-top:1px solid rgba(255,255,255,.14)}
.em-jump>span{font:600 .95rem/1 var(--font-heading);color:#BACBE4;margin-inline-end:6px}
.em-jump a{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 16px;border-radius:999px;
  color:#fff;text-decoration:none;font-weight:600;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2)}
.em-jump a:hover{background:rgba(255,255,255,.16);border-color:#fff}
.em-jump .ui-icon{width:18px;height:18px}
.scenario-grid{display:grid;gap:20px}
@media (min-width:900px){.scenario-grid{grid-template-columns:1fr 1fr}.scenario:first-child{grid-row:span 2}}
.scenario{border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:#fff;
  scroll-margin-top:110px;box-shadow:var(--shadow-sm)}
.scenario:target{outline:3px solid var(--danger);outline-offset:2px}
.scenario header{display:flex;align-items:center;gap:14px;padding:18px 22px;background:var(--band);border-bottom:1px solid var(--line)}
.scenario header h3{margin:0;font-size:1.15rem}
.scenario-ic{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--primary);color:#fff}
.scenario-flame .scenario-ic,.scenario-bolt .scenario-ic{background:var(--danger)}
.scenario-body{padding:20px 22px 22px}
.scenario-body p{margin:0 0 .8em}
.scenario-body p:last-child{margin-bottom:0}
.scenario-body ol{list-style:none;counter-reset:step;margin:0;padding:0;display:grid;gap:12px}
.scenario-body ol li{counter-increment:step;position:relative;padding-inline-start:44px;min-height:30px}
.scenario-body ol li::before{content:counter(step);position:absolute;inset-inline-start:0;top:-2px;width:30px;height:30px;
  border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center;font:700 .88rem/1 var(--font-heading)}
.em-type-grid{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:14px}
@media (min-width:640px){.em-type-grid{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.em-type-grid{grid-template-columns:repeat(4,1fr)}}
.em-type-grid li{display:flex;flex-direction:column;gap:12px;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:20px}
.em-type-ic{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--danger-soft);color:var(--danger)}
.em-type-grid strong{display:block;color:var(--heading);font-family:var(--font-heading);font-size:1.02rem;line-height:1.3}
.em-type-grid small{display:block;margin-top:4px;color:var(--muted);font-size:.9rem;line-height:1.45}
.not-em{display:flex;gap:20px;margin-top:36px;padding:26px 28px;border-radius:var(--radius-lg);background:#fff;
  border:1px dashed var(--primary-light)}
.not-em .h3{font-size:1.2rem;margin:0 0 .5rem}
.not-em p{margin:0 0 .6em;color:var(--muted)}
.not-em-ic{display:grid;place-items:center;flex:0 0 auto;width:48px;height:48px;border-radius:12px;background:var(--band);color:var(--primary)}
@media (max-width:640px){.not-em{flex-direction:column;gap:12px;padding:22px}}
.tick-list{list-style:none;margin:20px 0;padding:0;display:grid;gap:10px}
.tick-list li{display:flex;gap:12px;align-items:flex-start}
.tick-list .ui-icon{width:26px;height:26px;padding:4px;border-radius:50%;background:var(--accent);color:#fff;margin-top:1px}
.rate-card{background:var(--sand);border:1px solid var(--sand-ink);border-radius:var(--radius-lg);padding:28px}
.rate-card>.ui-icon{width:44px;height:44px;color:var(--primary);margin-bottom:10px}
.rate-card h2{font-size:1.4rem;margin:0 0 .5rem}
.rate-card p{margin:0 0 .8em}
.rate-hours{display:flex;gap:10px;align-items:flex-start;padding-top:14px;border-top:1px solid var(--sand-ink);font-size:.93rem;color:var(--muted)}
.rate-hours strong{display:block;color:var(--heading)}
.em-final{background:var(--danger);color:#fff;text-align:center;padding:64px 0}
.em-final h2{color:#fff;font-size:clamp(1.6rem,3vw,2.3rem);margin:0 0 .4rem}
.em-final p{margin:0 auto;max-width:56ch;color:var(--danger-soft)}
.em-final .cta-row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:24px}
.em-final .btn-light{color:var(--danger-ink)}

/* ---------- BLOG ---------- */
.blog-hero-intro p{margin:0 0 .8em}
.topic-tag{display:inline-flex;align-items:center;gap:6px;padding:5px 11px 5px 9px;border-radius:999px;
  font:600 .8rem/1.2 var(--font-heading);color:var(--heading);background:var(--topic-home);text-decoration:none}
.topic-tag .ui-icon{width:15px;height:15px}
.topic-ac{background:var(--topic-ac)}.topic-home{background:var(--topic-home)}.topic-building{background:var(--topic-building)}
.topic-contracts{background:var(--topic-contracts)}.topic-cleaning{background:var(--topic-cleaning)}
.post-mins{display:inline-flex;align-items:center;gap:6px;font-size:.85rem;color:var(--muted)}
.post-mins .ui-icon{width:16px;height:16px}
.post-grid{display:grid;gap:20px}
@media (min-width:680px){.post-grid{grid-template-columns:1fr 1fr}}
@media (min-width:1040px){.post-grid{grid-template-columns:repeat(3,1fr)}}
.post-card{position:relative;display:flex;flex-direction:column;gap:12px;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:24px 24px 22px;transition:transform .2s,box-shadow .2s,border-color .2s}
.post-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:transparent}
.post-card:focus-within{box-shadow:var(--shadow-md)}
.post-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.post-card h3{margin:0;font-size:1.14rem;line-height:1.35}
.post-card h3 a{color:var(--heading);text-decoration:none}
.post-card h3 a::after{content:"";position:absolute;inset:0;border-radius:inherit}   /* whole card is the link */
.post-card h3 a:focus-visible{outline:none}
.post-card h3 a:focus-visible::after{outline:3px solid var(--primary-light);outline-offset:2px}
.post-card>p{margin:0;color:var(--muted);font-size:.95rem;flex:1}
.post-author{display:flex;align-items:center;gap:10px;margin:6px 0 0;padding-top:14px;border-top:1px solid var(--line);
  font-size:.85rem;color:var(--muted);padding-inline-end:40px}
.post-author strong{display:block;color:var(--ink);font-size:.9rem}
.post-go{position:absolute;inset-inline-end:20px;bottom:20px;display:grid;place-items:center;width:34px;height:34px;
  border-radius:50%;background:var(--band);color:var(--primary);transition:background .2s,color .2s}
.post-go .ui-icon{width:18px;height:18px}
.post-card:hover .post-go{background:var(--accent);color:#fff}
.post-card.is-featured{background:linear-gradient(120deg,var(--sand) 0%,#fff 70%);border-color:var(--sand-ink);padding:36px}
.post-card.is-featured::before{content:attr(data-featured);position:absolute;top:-12px;inset-inline-start:28px;padding:4px 12px;
  border-radius:999px;background:var(--accent);color:#fff;font:700 .75rem/1.3 var(--font-heading);letter-spacing:.06em;text-transform:uppercase}
.post-card.is-featured h3{font-size:clamp(1.4rem,2.6vw,2rem);max-width:28ch}
.post-card.is-featured>p{font-size:1.08rem;max-width:62ch}
.blog-toolbar{display:flex;flex-direction:column;gap:14px;margin-bottom:28px}
.blog-toolbar h2{margin:0}
.topic-filter{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.topic-filter a{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 16px;border-radius:999px;
  border:1px solid var(--line);background:#fff;color:var(--ink);font-weight:600;font-size:.93rem;text-decoration:none;white-space:nowrap}
.topic-filter a span{font-size:.8rem;color:var(--muted);background:var(--band);border-radius:999px;padding:1px 8px}
.topic-filter a .ui-icon{width:16px;height:16px;color:var(--primary)}
.topic-filter a:hover{border-color:var(--primary)}
.topic-filter a.is-active{background:var(--primary);border-color:var(--primary);color:#fff}
.topic-filter a.is-active span{background:rgba(255,255,255,.2);color:#fff}
.topic-filter a.is-active .ui-icon{color:#fff}
.topic-group{margin-bottom:40px;scroll-margin-top:110px}
.topic-group[hidden]{display:none}
.topic-group-h{display:flex;align-items:center;gap:10px;font-size:1.2rem;margin:0 0 16px}
.topic-group-h .ui-icon{width:28px;height:28px;padding:5px;border-radius:8px;background:var(--band);color:var(--primary)}
.post-head{background:var(--bg-soft);border-bottom:1px solid var(--line);padding:40px 0 44px}
.post-head h1{font-size:clamp(1.9rem,4vw,2.9rem);line-height:1.12;margin:.5rem 0 .8rem}
.post-head .lede{font-size:1.15rem;color:var(--muted);max-width:62ch;margin:0}
.post-meta-top{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:6px 0 0}
.post-head .byline{display:flex;align-items:center;gap:14px;margin-top:24px}
.post-head .byline p{margin:0;display:flex;flex-direction:column;line-height:1.35}
.post-head .byline-sub{font-size:.88rem;color:var(--muted)}
.prose-post{font-size:1.07rem;line-height:1.75}
.prose-post h2{font-size:clamp(1.35rem,2.2vw,1.65rem);margin-top:2.1em;padding-top:.2em;scroll-margin-top:110px}
.prose-post h3{scroll-margin-top:110px}
.prose-post>p:first-child{font-size:1.2rem;color:var(--heading)}
.prose-post ul li,.prose-post ol li{margin-bottom:.45em}
.prose-post blockquote{margin:1.5em 0;padding:16px 22px;border-inline-start:4px solid var(--accent);background:var(--bg-soft);border-radius:0 12px 12px 0}
.svc-hand{border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px;margin-bottom:20px;background:#fff}
.svc-hand-k{margin:0 0 4px;font:700 .78rem/1.2 var(--font-heading);text-transform:uppercase;letter-spacing:.08em;color:var(--accent)}
.svc-hand h2{font-size:1.15rem;margin:0 0 .4rem}
.svc-hand h2 a{color:var(--heading);text-decoration:none}
.svc-hand p{margin:0;color:var(--muted);font-size:.93rem}
@media (min-width:900px){.page-side .svc-hand+.cta-card{position:sticky;top:110px}}

/* Mobile: these heroes must not cost a whole screen before the answer. */
@media (max-width:760px){
  .about-hero,.em-hero,.blog-hero{padding:28px 0 40px}
  .fact-grid li,.blog-stats li{padding:14px}
  .fact-grid strong,.blog-stats strong{font-size:1.7rem}
  .blog-stats{grid-template-columns:repeat(3,1fr)}
  .blog-stats span{font-size:.82rem}
  .em-jump{margin-top:24px;padding-top:18px;flex-wrap:nowrap;overflow-x:auto;margin-inline:-16px;padding-inline:16px}
  .em-jump>span{display:none}
  .em-jump a{flex:0 0 auto}
  .person-card{padding:22px}
  .post-card.is-featured{padding:28px 22px 22px}
  .principle{padding:22px}
}
@media (prefers-reduced-motion:reduce){.pulse::after{animation:none}.post-card,.post-card:hover{transform:none}}
@media (max-width:639px){
  .em-type-grid{grid-template-columns:1fr 1fr;gap:10px}
  .em-type-grid li{padding:14px;gap:8px}
  .em-type-ic{width:36px;height:36px}
  .em-type-grid strong{font-size:.93rem}
  .em-type-grid small{font-size:.82rem}
  .scenario header{padding:14px 16px}
  .scenario-body{padding:16px}
  .em-call{padding:20px}
}
/* Blog topic groups follow the site's mobile card-row pattern: swipe, don't scroll 18 cards. */
@media (max-width:679px){
  .topic-group .post-grid,.post-body~.band .post-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    gap:14px;margin-inline:-16px;padding:4px 16px 14px;scroll-padding-inline:16px;scrollbar-width:none}
  .topic-group .post-grid::-webkit-scrollbar{display:none}
  .topic-group .post-card,.post-body~.band .post-card{flex:0 0 82%;scroll-snap-align:start}
  .post-card:hover{transform:none}
  .blog-hero-intro p+p{display:none}
}