/* ═══════════════════════════════════════════════════════════════════════════
   TOKENS  —  taken from the client's own logo, not invented.
   Sampled from _client-details/photos/gmb-19.jpg: navy #003054 (13.5:1 on white)
   and gold #CC9C30 (8.4:1 on black). Names match combo/assets/css/base.css so
   porting into the Mustache templates is a copy, not a rewrite.
   No raw hex below this block.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --color-brand:#0A3A61; --color-brand-dark:#003054; --color-brand-deep:#001E36;
  --color-accent:#CC9C30; --color-accent-dark:#A87C1E; --color-accent-light:#E4C87F;
  --color-surface:#FFFFFF; --color-surface-alt:#F2F5F8;
  --color-tint:#E3EAF2;
  --color-text:#0C1F2E; --color-text-muted:#4A5F72; --color-text-inverse:#FFFFFF;
  --color-focus:#CC9C30;
  --border-hairline:1px solid hsl(207 40% 12% / .12);

  --shadow-xs:0 1px 1px hsl(207 40% 10% / .04), 0 1px 2px hsl(207 40% 10% / .06);
  --shadow-sm:0 1px 2px hsl(207 40% 10% / .05), 0 2px 6px hsl(207 40% 10% / .07);
  --shadow-md:0 2px 4px hsl(207 40% 10% / .05), 0 8px 20px hsl(207 40% 10% / .09);
  --shadow-lg:0 4px 8px hsl(207 40% 10% / .06), 0 18px 40px hsl(207 40% 10% / .12);
  --shadow-xl:0 8px 16px hsl(207 40% 10% / .08), 0 32px 64px hsl(207 40% 10% / .16);
  --shadow-action:0 2px 4px hsl(40 60% 22% / .20), 0 10px 24px hsl(40 65% 32% / .32);
  --shadow-ring:inset 0 0 0 1px hsl(207 40% 10% / .07);
  --shadow-ring-strong:inset 0 0 0 1px hsl(207 40% 10% / .14);
  --shadow-ring-light:inset 0 0 0 1px hsl(0 0% 100% / .13);

  /* Raised for the approved hero. The old floor of .58 was the bare AA minimum and
     was chosen against a dark photograph; the villa hall is a bright white interior,
     where .58 leaves white text sitting on mid-grey — passing the measurement and
     still looking washed out. .66 reads as deliberate and keeps a wide margin over
     the .55 floor the build enforces. */
  --scrim-strong:hsl(207 55% 6% / .86);
  --scrim-mid:hsl(207 55% 6% / .74);
  --scrim-floor:hsl(207 55% 6% / .66);
  --hero-scrim:linear-gradient(to bottom,var(--scrim-strong) 0%,var(--scrim-floor) 34%,var(--scrim-mid) 66%,var(--scrim-strong) 100%);
  --caption-scrim:linear-gradient(to bottom,transparent 0%,var(--scrim-strong) 78%);

  --font-display:"Cairo",system-ui,sans-serif;
  --font-body:"Tajawal",system-ui,sans-serif;
  --step--1:clamp(.78rem,.75rem + .12vw,.86rem);
  --step-0:clamp(1rem,.96rem + .2vw,1.09rem);
  --step-1:clamp(1.15rem,1.08rem + .32vw,1.32rem);
  --step-2:clamp(1.32rem,1.2rem + .55vw,1.62rem);
  --step-3:clamp(1.55rem,1.32rem + .95vw,2.1rem);
  --step-4:clamp(1.95rem,1.5rem + 1.9vw,3.05rem);
  --step-5:clamp(2.3rem,1.6rem + 2.9vw,3.9rem);
  --step-6:clamp(2.55rem,1.6rem + 4.75vw,5rem);
  --leading-body:1.85; --leading-heading:1.4; --leading-display:1.28;
  --weight-display:900;

  --space-2xs:.25rem; --space-xs:.5rem; --space-sm:.75rem; --space-md:1rem;
  --space-lg:1.5rem; --space-xl:2.25rem; --space-2xl:3.5rem;
  --section-space:clamp(3rem,2rem + 4.2vw,5rem);
  --section-space-tight:clamp(1.5rem,1.2rem + 1.6vw,2.25rem);
  --radius-sm:8px; --radius-md:14px; --radius-lg:22px; --radius-pill:999px;
  --container:78rem;
  --media-zoom:1.05;
  --lift-sm:-2px; --lift-md:-4px;
  --transition:160ms cubic-bezier(.22,.61,.36,1);
  --transition-slow:280ms cubic-bezier(.22,.61,.36,1);
  --focus-ring-width:3px; --focus-ring-offset:3px;
  /* A translucent wash, always layered OVER an opaque colour — never used as the
     only background, or whatever sits behind shows through it. */
  --tint-accent:hsl(40 60% 50% / .09);
}
:root:lang(ar){ --leading-body:1.9; --leading-heading:1.45; --leading-display:1.3;
  --tracking-display:0; --label-transform:none; }
html:lang(ar){ font-size:106.25%; }

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;overflow-x:clip;background:var(--color-surface);color:var(--color-text);
  font-family:var(--font-body);font-size:var(--step-0);line-height:var(--leading-body);
  -webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{font-family:var(--font-display);line-height:var(--leading-heading);
  margin:0;font-weight:800;letter-spacing:var(--tracking-display,-.01em)}
p{margin:0}
a{color:inherit}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:var(--focus-ring-width) solid var(--color-focus);
  outline-offset:var(--focus-ring-offset);border-radius:var(--radius-sm)}
.container{width:min(100% - 2.5rem,var(--container));margin-inline:auto}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.bidi{unicode-bidi:isolate;direction:ltr;display:inline-block}

/* ═══ THE BRAND ICON SET ═══
   One stroke width for the whole system, set once, here. The gold accent is a
   custom property because custom properties inherit through <use>'s shadow tree
   and ordinary descendant selectors do not. */
.icon{inline-size:1.15em;block-size:1.15em;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;flex:none;
  --icon-accent:var(--color-accent)}
.icon--solid{stroke-width:0}

.skip{position:absolute;inset-inline-start:1rem;top:-6rem;z-index:200;
  background:var(--color-surface);color:var(--color-brand);padding:.75rem 1.25rem;
  border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);font-weight:700;
  transition:top var(--transition)}
.skip:focus{top:1rem}

/* ═══ SECTION SHELL ═══
   The head is a CENTRED STACK everywhere. The heading-beside-standfirst split was
   removed sitewide: it reads as two competing columns rather than one title. */
.section{padding-block:var(--section-space);background:var(--color-surface);position:relative}
.section--alt{background:var(--color-surface-alt)}
.section--tint{background:var(--color-tint)}
.section--inverse{background:var(--color-brand-deep);color:var(--color-text-inverse)}
.section--tight{padding-block:var(--section-space-tight)}
.section__head{max-width:44rem;margin-inline:auto;text-align:center;
  margin-block-end:var(--space-2xl)}
.section__head--sm{margin-block-end:var(--space-xl)}
.section__title{font-size:var(--step-4);font-weight:900;line-height:1.2;
  letter-spacing:-.015em;text-wrap:balance}
.section--inverse .section__title{color:var(--color-text-inverse)}
.section__lead{margin-block-start:var(--space-sm);font-size:var(--step-1);
  color:var(--color-text-muted);text-wrap:balance}
.section--inverse .section__lead{color:hsl(0 0% 100% / .7)}
.section__foot{margin-block-start:var(--space-xl);text-align:center}

/* ═══ BUTTONS ═══ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--font-display);font-weight:800;font-size:var(--step-0);
  padding:.95rem 1.7rem;border-radius:var(--radius-pill);border:0;cursor:pointer;
  text-decoration:none;line-height:1.2;transition:transform var(--transition),
  box-shadow var(--transition),background-color var(--transition),color var(--transition)}
.btn--primary{background:var(--color-accent);color:var(--color-brand-deep);
  box-shadow:var(--shadow-action)}
.btn--secondary{background:var(--color-surface);color:var(--color-brand);
  box-shadow:var(--shadow-sm),var(--shadow-ring)}
.btn--ghost{background:hsl(0 0% 100% / .1);color:var(--color-text-inverse);
  box-shadow:var(--shadow-ring-light)}
.btn--brand{background:var(--color-brand);color:var(--color-text-inverse);
  box-shadow:var(--shadow-md)}
.btn--lg{padding:1.1rem 2.1rem;font-size:var(--step-1)}
@media (hover:hover){
  .btn:hover{transform:translateY(var(--lift-sm))}
  .btn--primary:hover{background:var(--color-accent-dark);box-shadow:var(--shadow-lg)}
  .btn--secondary:hover{box-shadow:var(--shadow-md),var(--shadow-ring-strong)}
  .btn--ghost:hover{background:hsl(0 0% 100% / .18)}
  .btn--brand:hover{background:var(--color-brand-dark);box-shadow:var(--shadow-lg)}
}
.btn:active{transform:translateY(1px);box-shadow:var(--shadow-xs)}

/* ═══ HEADER ═══ */
.site-header{position:sticky;top:0;z-index:100;background:hsl(0 0% 100% / .92);
  backdrop-filter:blur(14px);transition:box-shadow var(--transition)}
.site-header[data-scrolled]{box-shadow:var(--shadow-md)}
.site-header__inner{display:flex;align-items:center;gap:var(--space-lg);
  min-height:4.5rem;padding-block:.6rem}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;flex:none}
.brand__mark{inline-size:2.9rem;block-size:2.9rem;display:grid;place-items:center;flex:none}
.brand__mark img{inline-size:100%;block-size:100%;object-fit:contain}
.site-footer .brand__mark{background:var(--color-surface);border-radius:var(--radius-md);
  padding:.3rem;box-shadow:var(--shadow-ring-light)}
.brand__name{font-family:var(--font-display);font-weight:900;font-size:1.06rem;
  line-height:1.2;letter-spacing:-.01em}
.brand__tag{display:block;font-family:var(--font-body);font-weight:500;
  font-size:var(--step--1);color:var(--color-text-muted);letter-spacing:0}
.site-nav{margin-inline-start:auto;display:none}
.site-nav ul{display:flex;gap:var(--space-lg)}
.site-nav a{position:relative;text-decoration:none;font-weight:500;padding-block:.4rem}
.site-nav a::after{content:"";position:absolute;inset-inline:0;bottom:0;block-size:2px;
  background:var(--color-accent);transform:scaleX(0);transform-origin:inline-end;
  transition:transform var(--transition)}
@media (hover:hover){.site-nav a:hover::after{transform:scaleX(1);transform-origin:inline-start}}
/* Same "you are here" signal as the mobile panel: the gold rule the hover state
   draws, left drawn. */
.site-nav a[aria-current="page"]{color:var(--color-brand-dark);font-weight:700}
.site-nav a[aria-current="page"]::after{transform:scaleX(1);transform-origin:inline-start}
.header__cta{display:none}
@media (min-width:62rem){.site-nav{display:block}.header__cta{display:inline-flex}}

/* ═══ MOBILE NAVIGATION ═══
   Below 62rem the header carried the logo and nothing else — no links, no call
   button, no way to reach another page except the footer. This closes that.

   The shape follows the research rather than taste. The panel is anchored under
   the header so the close control sits exactly where the open control was, which
   removes the "where did the button go" beat. The two actions are parked at the
   BOTTOM of the panel, not the top: the lower third is the only comfortable zone
   for a thumb on a large phone, and the top corners are the worst. Entry is 280ms
   ease-out, inside the 250–350ms band where the motion reads as responsive rather
   than either instant or sluggish. The scrim blurs rather than dimming to black,
   so the page stays legible underneath as context.

   The motion is carried by the list items staggering in, not by throwing the whole
   panel across the screen — a full-height element travelling a viewport height in
   280ms is a lurch. Rows are 3.5rem, comfortably over the 48px minimum target.

   All of it is CSS transitions driven by one attribute on <html>. The JS only flips
   that attribute, manages focus and locks scroll. */
.nav-toggle{display:none}
.mnav{position:fixed;inset:0;z-index:90;visibility:hidden;pointer-events:none}
.mnav__scrim{position:absolute;inset:0;background:hsl(207 55% 6% / .5);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;transition:opacity var(--transition-slow)}
.mnav__panel{position:absolute;inset-block-start:var(--header-h,4.5rem);inset-block-end:0;
  inset-inline:0;display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;
  padding:var(--space-lg) var(--space-lg) max(var(--space-lg),env(safe-area-inset-bottom));
  background:linear-gradient(165deg,var(--color-brand-dark),var(--color-brand-deep));
  box-shadow:var(--shadow-xl);
  opacity:0;transform:translateY(-10px);
  transition:opacity var(--transition-slow),transform var(--transition-slow)}
.mnav__list{list-style:none;margin:0;padding:0}
.mnav__list li{opacity:0;transform:translateY(14px);
  transition:opacity 240ms ease-out,transform 240ms cubic-bezier(.22,.61,.36,1)}
.mnav__list a{display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-md);min-block-size:3.5rem;padding-inline:var(--space-2xs);
  font-family:var(--font-display);font-weight:800;font-size:var(--step-2);
  line-height:var(--leading-heading);color:var(--color-text-inverse);text-decoration:none;
  border-block-end:1px solid hsl(0 0% 100% / .14);
  -webkit-tap-highlight-color:transparent}
.mnav__list .icon{flex:none;inline-size:1rem;block-size:1rem;color:var(--color-accent);
  transition:transform var(--transition)}
/* The current page is stated, not just implied by the URL — the gold rule and the
   dimmed chevron say "you are here" without a second visual language. */
.mnav__list a[aria-current="page"]{color:var(--color-accent)}
.mnav__list a[aria-current="page"] .icon{opacity:.35}
.mnav__actions{margin-block-start:auto;display:grid;gap:var(--space-sm);
  padding-block-start:var(--space-xl);
  opacity:0;transform:translateY(14px);
  transition:opacity 240ms ease-out,transform 240ms cubic-bezier(.22,.61,.36,1)}
.mnav__actions .btn{inline-size:100%}
/* The panel takes focus when it opens so the reading order starts inside it. It is
   a container, not a control, so it does not draw a ring — the real controls still
   do. */
.mnav__panel:focus{outline:none}

:root[data-nav-open] .mnav{visibility:visible;pointer-events:auto}
:root[data-nav-open] .mnav__scrim{opacity:1}
:root[data-nav-open] .mnav__panel{opacity:1;transform:none}
:root[data-nav-open] .mnav__list li,
:root[data-nav-open] .mnav__actions{opacity:1;transform:none}
/* Stagger on the way IN only. The delays live under [data-nav-open], so closing
   drops every one of them to zero and the panel leaves in a single motion —
   a staggered exit makes a dismissal feel like it is arguing with you. */
:root[data-nav-open] .mnav__list li:nth-child(1){transition-delay:50ms}
:root[data-nav-open] .mnav__list li:nth-child(2){transition-delay:95ms}
:root[data-nav-open] .mnav__list li:nth-child(3){transition-delay:140ms}
:root[data-nav-open] .mnav__list li:nth-child(4){transition-delay:185ms}
:root[data-nav-open] .mnav__list li:nth-child(5){transition-delay:230ms}
:root[data-nav-open] .mnav__actions{transition-delay:275ms}
/* Scroll lock. position:fixed on the body would lose the scroll position; overflow
   hidden on both elements holds it. */
:root[data-nav-open],:root[data-nav-open] body{overflow:hidden}

@media (max-width:61.99rem){
  .nav-toggle{display:grid;place-items:center;margin-inline-start:auto;
    inline-size:3rem;block-size:3rem;flex:none;padding:0;border:0;
    border-radius:var(--radius-md);background:transparent;
    color:var(--color-brand-dark);cursor:pointer;-webkit-tap-highlight-color:transparent}
  .nav-toggle__box{position:relative;inline-size:1.375rem;block-size:.875rem}
  .nav-toggle__bar{position:absolute;inset-inline:0;block-size:2px;border-radius:2px;
    background:currentColor;
    transition:transform var(--transition-slow),opacity 100ms linear}
  .nav-toggle__bar:nth-child(1){inset-block-start:0}
  .nav-toggle__bar:nth-child(2){inset-block-start:calc(50% - 1px)}
  .nav-toggle__bar:nth-child(3){inset-block-end:0}
  /* Three bars fold to an X: the outer pair travels to the centre line and rotates,
     the middle one fades and collapses so it is not caught under the crossing. */
  :root[data-nav-open] .nav-toggle__bar:nth-child(1){
    transform:translateY(calc(.4375rem - 1px)) rotate(45deg)}
  :root[data-nav-open] .nav-toggle__bar:nth-child(2){opacity:0;transform:scaleX(.3)}
  :root[data-nav-open] .nav-toggle__bar:nth-child(3){
    transform:translateY(calc(-.4375rem + 1px)) rotate(-45deg)}
}
/* Above the breakpoint the panel must never be reachable, even if the attribute is
   somehow left on by a resize mid-open. */
@media (min-width:62rem){
  .mnav{display:none}
  :root[data-nav-open],:root[data-nav-open] body{overflow:visible}
}
@media (prefers-reduced-motion:reduce){
  .mnav__scrim,.mnav__panel,.mnav__list li,.mnav__actions,.nav-toggle__bar{
    transition-duration:1ms!important;transition-delay:0ms!important}
}

/* ═══ SERVICE PAGE ═══
   Components used only by the 43 generated service pages. They live here rather
   than in a second stylesheet because every page already links styles.css, and a
   separate file would be a second request for a few kilobytes. */

/* The service hero is the HOME hero — same class, same scale, same gold second
   line, same benefit row. Only these three things differ. Anything more would make
   a service page look like a lesser page than the one that linked to it. */
.hero--svc .hero__media img{object-position:50% 50%}
.hero--svc .breadcrumb{color:hsl(0 0% 100% / .75);margin-block-end:var(--space-sm)}
.hero--svc .breadcrumb a{color:inherit}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--space-sm);
  margin-block-start:var(--space-xl)}
@media (max-width:47.99rem){
  .hero--svc .hero__inner{text-align:center}
  .hero--svc .hero__lead{margin-inline:auto}
  .hero__actions{justify-content:center}
}

/* Signs — the self-diagnosis block. Cards rather than a list because each one is a
   separate "is this me?", and a bulleted list invites skimming past all of them.
   The icon is what stops the section reading as six paragraphs. */
.signs{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-md);
  grid-template-columns:repeat(3,1fr)}
.sign{padding:var(--space-lg);background:var(--color-surface);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-sm),var(--shadow-ring);
  border-block-start:3px solid var(--color-accent)}
.sign__ico{display:grid;place-items:center;inline-size:3rem;block-size:3rem;
  border-radius:var(--radius-md);margin-block-end:var(--space-md);
  background:linear-gradient(var(--tint-accent),var(--tint-accent)),var(--color-surface-alt)}
.sign__ico .icon{inline-size:1.6rem;block-size:1.6rem;color:var(--color-accent-dark);
  --icon-accent:var(--color-brand)}
.sign h3{font-size:var(--step-1);margin:0 0 .5rem}
.sign p{margin:0;color:var(--color-text-muted)}
@media (max-width:63.99rem){.signs{grid-template-columns:repeat(2,1fr)}}
@media (max-width:41.99rem){.signs{grid-template-columns:1fr}}

/* What the service includes — six picture cards. The checklist this replaced was
   eight lines of text in a box, which is the shape nobody reads. */
.incs{list-style:none;margin:0 0 var(--space-xl);padding:0;display:grid;
  gap:var(--space-md);grid-template-columns:repeat(3,1fr)}
.inc{background:var(--color-surface);border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow-sm),var(--shadow-ring);display:flex;flex-direction:column}
.inc__media{aspect-ratio:3/2;overflow:hidden;background:var(--color-tint)}
.inc__media img{inline-size:100%;block-size:100%;object-fit:cover;display:block;
  transition:transform var(--transition-slow)}
@media (hover:hover){.inc:hover .inc__media img{transform:scale(var(--media-zoom))}}
.inc__body{padding:var(--space-md) var(--space-lg) var(--space-lg)}
.inc__body h3{font-size:var(--step-1);margin:0 0 .35rem}
.inc__body p{margin:0;color:var(--color-text-muted);font-size:.95rem;line-height:1.7}
@media (max-width:63.99rem){.incs{grid-template-columns:repeat(2,1fr)}}
@media (max-width:41.99rem){.incs{grid-template-columns:1fr}}

/* Scope — the exclusions now stand alone, so the column no longer sits in a
   two-up grid. Kept centred and narrow: it is a caveat, not a feature list. */
.scope--out-only{grid-template-columns:minmax(0,42rem)!important;justify-content:center}
.scope{display:grid;gap:var(--space-lg);grid-template-columns:1fr 1fr;align-items:start}
.scope__col{padding:var(--space-lg);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-ring)}
.scope__col--in{background:var(--color-surface-alt)}
.scope__col--out{background:var(--color-surface);box-shadow:var(--shadow-ring-strong)}
.scope__col .illus{max-inline-size:8.5rem;margin-inline:0;margin-block-end:var(--space-sm)}
.scope__col h3{font-size:var(--step-2);margin:0 0 var(--space-md)}
.scope__col ul{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.scope__col li{position:relative;padding-inline-start:1.6rem;line-height:1.65}
.scope__col li::before{position:absolute;inset-inline-start:0;font-weight:800}
.scope__col--in li::before{content:"\2713";color:var(--color-accent-dark)}
.scope__col--out li::before{content:"—";color:var(--color-text-muted)}
.scope__note{margin-block-start:var(--space-md);margin-block-end:0;
  font-size:var(--step--1);color:var(--color-text-muted);
  padding-block-start:var(--space-md);border-block-start:var(--border-hairline)}
@media (max-width:47.99rem){.scope{grid-template-columns:1fr}}

/* The method is exactly six steps on every service page — enforced in
   _build-service-pages.mjs — so three columns give two full rows. The shared
   auto-fit grid put five across and orphaned the sixth on a row of its own.
   The connector line also has to stop at the end of each row rather than running
   off the edge, hence the nth-child rules. */
.svc-method .process__grid{grid-template-columns:repeat(3,1fr)}
.svc-method .process__step:nth-child(3n)::before{display:none}
@media (max-width:63.99rem){
  .svc-method .process__grid{grid-template-columns:repeat(2,1fr)}
  .svc-method .process__step:nth-child(3n)::before{display:block}
  .svc-method .process__step:nth-child(2n)::before{display:none}
}
@media (max-width:47.99rem){.svc-method .process__grid{grid-template-columns:1fr}}

/* Price factors. */
.factors{display:grid;gap:var(--space-md);grid-template-columns:repeat(3,1fr)}
.factor{padding:var(--space-lg);background:var(--color-surface-alt);
  border-radius:var(--radius-md)}
.factor__ico{display:grid;place-items:center;inline-size:2.75rem;block-size:2.75rem;
  border-radius:var(--radius-pill);margin-block-end:var(--space-sm);
  background:var(--color-brand);box-shadow:var(--shadow-sm)}
.factor__ico .icon{inline-size:1.45rem;block-size:1.45rem;
  color:var(--color-text-inverse); --icon-accent:var(--color-accent)}
.factor h3{font-size:var(--step-1);margin:0 0 .4rem}
.factor p{margin:0;color:var(--color-text-muted)}
.factors__foot{margin-block-start:var(--space-lg);margin-block-end:0;text-align:center;
  font-weight:600}
@media (max-width:63.99rem){.factors{grid-template-columns:repeat(2,1fr)}}
@media (max-width:41.99rem){.factors{grid-template-columns:1fr}}

/* Comparison. A real table would be the semantic choice, but a three-column grid
   collapses to a readable stack on a phone and a table does not. The header row is
   aria-hidden because each cell repeats its own label below 48rem. */
.compare{display:grid;gap:1px;background:hsl(207 40% 12% / .12);
  border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-ring)}
.compare__row{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:1px;
  background:hsl(207 40% 12% / .12)}
.compare__row>*{background:var(--color-surface);padding:var(--space-md)}
.compare__row--head>*{background:var(--color-brand-dark);color:var(--color-text-inverse);
  font-family:var(--font-display);font-weight:800;text-align:center}
.compare__label{font-weight:700}
.compare__diy{color:var(--color-text-muted)}
/* Layered over white rather than set as a bare translucent colour. The row carries
   the hairline-gap colour as its own background, so a 9%-alpha wash on its own read
   as grey — which made the column we are recommending look disabled. */
.compare__pro{font-weight:600;
  background:linear-gradient(var(--tint-accent),var(--tint-accent)),var(--color-surface)}
@media (max-width:47.99rem){
  .compare__row--head{display:none}
  .compare__row{grid-template-columns:1fr}
  .compare__label{background:var(--color-surface-alt);font-size:var(--step-1)}
  .compare__diy::before{content:"بنفسك: ";font-weight:800;color:var(--color-text)}
  .compare__pro::before{content:"مع فريق: ";font-weight:800}
}

/* Guarantee — the last thing between reading and booking, so it gets the inverse
   treatment and sits alone in its section. */
.guarantee{display:flex;gap:var(--space-lg);align-items:flex-start;
  padding:var(--space-xl);border-radius:var(--radius-lg);color:var(--color-text-inverse);
  background:linear-gradient(150deg,var(--color-brand),var(--color-brand-deep));
  box-shadow:var(--shadow-lg)}
.guarantee__mark{flex:none;inline-size:3.5rem;block-size:3.5rem;display:grid;
  place-items:center;border-radius:var(--radius-md);background:var(--color-accent)}
.guarantee__mark .icon{inline-size:2rem;block-size:2rem;color:var(--color-brand-deep);
  --icon-accent:var(--color-brand-deep)}
.guarantee__body{min-inline-size:0}
.guarantee h2{font-size:var(--step-3);margin:0 0 .5rem}
.guarantee>.guarantee__body>p{margin:0 0 var(--space-md);color:hsl(0 0% 100% / .88)}
.guarantee ul{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.guarantee li{position:relative;padding-inline-start:1.7rem;line-height:1.6}
.guarantee li::before{content:"\2713";position:absolute;inset-inline-start:0;
  color:var(--color-accent);font-weight:800}
@media (max-width:41.99rem){
  .guarantee{flex-direction:column;padding:var(--space-lg)}
}

/* ═══ HERO ═══ */
.hero{position:relative;isolation:isolate;color:var(--color-text-inverse);
  padding-block:clamp(3.5rem,2rem + 8vw,7rem);
  background:linear-gradient(160deg,var(--color-brand-dark),var(--color-brand-deep))}
.hero__media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero__media img{inline-size:100%;block-size:100%;object-fit:cover;object-position:50% 45%}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--hero-scrim)}
.hero__inner{max-width:60rem}
.hero__title{font-size:var(--step-6);font-weight:var(--weight-display);
  line-height:var(--leading-display);letter-spacing:-.02em;text-wrap:balance}
.hero__title span{display:block;color:var(--color-accent);font-size:.62em;
  margin-block-start:.25em;letter-spacing:-.01em}
.hero__lead{margin-block-start:var(--space-lg);font-size:var(--step-2);
  line-height:1.7;color:hsl(0 0% 100% / .88);max-width:38ch}
/* the service rail in the hero: the fastest route to the page a visitor wants */
.hero__services{display:flex;flex-wrap:wrap;gap:.5rem;margin-block-start:var(--space-xl)}
.hero__services a{display:inline-flex;align-items:center;gap:.35rem;
  background:hsl(0 0% 100% / .12);box-shadow:var(--shadow-ring-light);
  padding:.5rem 1.05rem;border-radius:var(--radius-pill);text-decoration:none;
  font-family:var(--font-display);font-weight:700;font-size:.92rem;
  transition:background-color var(--transition),transform var(--transition)}
@media (hover:hover){.hero__services a:hover{background:var(--color-accent);
  color:var(--color-brand-deep);transform:translateY(var(--lift-sm))}}
/* four benefits inside the hero.
   CONTRAST: the labels are PURE white, not a faded white. The scrim guarantees AA
   for --color-text-inverse over any photograph, but that guarantee is for full
   opacity — white at 82% measures about 4.1:1 against the scrim floor, which fails
   AA for text this size. So the label carries no alpha, and the tint is spent on the
   plate behind the icon instead, where nothing has to be read. */
/* TWO PER LINE, at every width — four across read as a thin strip of noise.
   The icon plate is solid GOLD with a navy glyph: the same pairing as the WhatsApp
   button. The first version used a translucent white plate, which is exactly what
   the service pills use a few lines below, so the two blocks merged into one
   undifferentiated field. Gold separates them and ties them to the primary action.
   Gold on navy-deep measures 6.7:1. */
.hero__benefits{display:grid;grid-template-columns:repeat(2,1fr);
  gap:var(--space-lg) var(--space-xl);max-inline-size:44rem;
  margin-block-start:var(--space-xl);padding-block-start:var(--space-lg);
  border-top:1px solid hsl(0 0% 100% / .2)}
.hero__benefit{display:flex;align-items:center;gap:.8rem}
/* No plate. The icon IS the gold — main stroke in the accent, its one highlight in
   white so the duotone still reads. A drop-shadow does the separation a box used to:
   gold measures ~3.75:1 against the scrim where these sit, which clears the 3:1 that
   non-text graphics need, but only just — the shadow buys back the margin without
   putting a container round it. */
.hero__benefit .b-ico{flex:none;display:grid;place-items:center}
.hero__benefit .icon{inline-size:2.15rem;block-size:2.15rem;
  color:var(--color-accent); --icon-accent:var(--color-text-inverse);
  stroke-width:1.7;
  filter:drop-shadow(0 1px 4px hsl(207 55% 6% / .85))}
.hero__benefit b{font-family:var(--font-display);font-weight:800;font-size:1.02rem;
  line-height:1.4;color:var(--color-text-inverse)}
@media (max-width:47.99rem){
  .hero__benefits{gap:var(--space-md) var(--space-sm);margin-inline:auto}
  .hero__benefit{flex-direction:column;text-align:center;gap:.5rem}
  .hero__benefit b{font-size:.92rem}
}

.hero__actions{display:flex;flex-wrap:wrap;gap:var(--space-md);
  margin-block-start:var(--space-xl)}
/* On a phone the hero is the whole first screen and there is no second column for
   the eye to align against, so a hard start edge reads as text pushed into a
   corner. Centre the lot — and centre the measure too, or the balanced heading
   sits over a paragraph that is still hugging one side. */
@media (max-width:47.99rem){
  .hero__inner{text-align:center}
  .hero__lead{margin-inline:auto}
  .hero__services,.hero__actions{justify-content:center}
}
.hero .btn:focus-visible,.section--inverse .btn:focus-visible{outline-color:var(--color-text-inverse)}

/* ═══ ILLUSTRATED CARDS ═══
   Used by the promises band and by why-us. Flat vector scenes, not glyphs on a
   tile — a line icon at this size reads as a placeholder for a picture. */
.illus{inline-size:100%;max-inline-size:11rem;block-size:auto;aspect-ratio:4/3;
  display:block;margin-inline:auto;
  --ill-deep:var(--color-brand-deep); --ill-navy:var(--color-brand);
  --ill-tint:var(--color-tint);      --ill-gold:var(--color-accent);
  --ill-sand:var(--color-accent-light)}
.icard{background:var(--color-surface);border-radius:var(--radius-lg);
  padding:var(--space-lg) var(--space-lg) var(--space-xl);text-align:center;
  box-shadow:var(--shadow-sm),var(--shadow-ring);
  transition:transform var(--transition),box-shadow var(--transition)}
.icard h3{margin-block:var(--space-md) .45rem;font-size:var(--step-1);font-weight:800}
.icard p{color:var(--color-text-muted);font-size:.95rem;line-height:1.75}
@media (hover:hover){.icard:hover{transform:translateY(var(--lift-md));
  box-shadow:var(--shadow-lg),var(--shadow-ring)}}
.icard__grid{display:grid;gap:var(--space-lg);
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}

/* ═══ SERVICES — a horizontal rail. Uniform frames, one row, scrolls. ═══
   A vertical grid of mixed-size photos ate a screen and a half and read as a
   scrapbook. A rail shows the same eight services in a third of the height. */
.rail{position:relative}
.rail__track{display:grid;grid-auto-flow:column;grid-auto-columns:min(78vw,19rem);
  gap:var(--space-lg);overflow-x:auto;scroll-snap-type:x mandatory;
  padding-block-end:var(--space-md);scrollbar-width:none}
.rail__track::-webkit-scrollbar{display:none}
.rail__card{scroll-snap-align:start;background:var(--color-surface);
  border-radius:var(--radius-lg);overflow:hidden;text-decoration:none;color:inherit;
  box-shadow:var(--shadow-sm),var(--shadow-ring);display:flex;flex-direction:column;
  transition:transform var(--transition),box-shadow var(--transition)}
.rail__media{aspect-ratio:8/5;overflow:hidden;background:var(--color-tint)}
.rail__media img{inline-size:100%;block-size:100%;object-fit:cover;
  transition:transform var(--transition-slow)}
.rail__body{padding:var(--space-md) var(--space-lg) var(--space-lg);
  display:flex;align-items:center;gap:.5rem}
.rail__title{font-family:var(--font-display);font-size:var(--step-1);font-weight:800}
.rail__body .icon{margin-inline-start:auto;color:var(--color-accent);
  inline-size:1.2rem;block-size:1.2rem;transition:transform var(--transition)}
@media (hover:hover){
  .rail__card:hover{transform:translateY(var(--lift-md));
    box-shadow:var(--shadow-lg),var(--shadow-ring)}
  .rail__card:hover .rail__media img{transform:scale(var(--media-zoom))}
  .rail__card:hover .rail__body .icon{transform:translateX(-4px)}
}
.rail__card:active{transform:translateY(0)}
/* the services page: the same card, laid out as a grid instead of a rail */
.svc-grid{display:grid;gap:var(--space-lg);
  grid-template-columns:repeat(auto-fill,minmax(15.5rem,1fr))}
.svc-grid .rail__card{scroll-snap-align:none}

/* a service with no photograph of its own gets a designed plate, not a hole */
.rail__media--plate{display:grid;place-items:center;
  background:linear-gradient(145deg,var(--color-brand) 0%,var(--color-brand-deep) 100%)}
.rail__media--plate .illus{max-inline-size:8.5rem;
  --ill-tint:hsl(0 0% 100% / .16); --ill-navy:hsl(0 0% 100% / .55);
  --ill-deep:hsl(0 0% 100% / .78)}
/* the label above each rail — residential vs commercial */
.rail__label{display:flex;align-items:center;gap:.7rem;
  margin-block:var(--space-xl) var(--space-md);font-family:var(--font-display);
  font-weight:800;font-size:var(--step-1)}
.rail__label::after{content:"";flex:1;block-size:1px;
  background:hsl(207 40% 12% / .14)}
.rail__label span{color:var(--color-accent)}
.rail + .rail__label{margin-block-start:var(--space-2xl)}
.rail__nav{display:none;gap:.6rem;justify-content:center;margin-block-start:var(--space-md)}
.rail__btn{inline-size:2.9rem;block-size:2.9rem;border-radius:var(--radius-pill);
  border:0;cursor:pointer;background:var(--color-surface);color:var(--color-brand);
  box-shadow:var(--shadow-sm),var(--shadow-ring);display:grid;place-items:center;
  transition:transform var(--transition),box-shadow var(--transition)}
.rail__btn .icon{inline-size:1.35rem;block-size:1.35rem}
@media (hover:hover){.rail__btn:hover{transform:translateY(var(--lift-sm));
  box-shadow:var(--shadow-md),var(--shadow-ring-strong)}}
.rail__btn:active{transform:translateY(1px)}
@media (min-width:62rem){.rail__nav{display:flex}}

/* ═══ PROCESS ═══ */
.process__grid{display:grid;gap:var(--space-xl);
  grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}
.process__step{position:relative;text-align:start}
.process__step::before{content:"";position:absolute;inset-block-start:1.65rem;
  inset-inline-start:3.3rem;inset-inline-end:calc(-1 * var(--space-xl));block-size:2px;
  background:hsl(207 40% 12% / .16)}
.process__step:last-child::before{display:none}
@media (max-width:47.99rem){.process__step::before{display:none}}
.process__num{position:relative;z-index:1;inline-size:3.3rem;block-size:3.3rem;
  border-radius:var(--radius-pill);display:grid;place-items:center;
  background:var(--color-brand);color:var(--color-text-inverse);
  font-family:var(--font-display);font-weight:900;font-size:1.35rem;
  box-shadow:var(--shadow-md),0 0 0 7px var(--color-tint)}
.process__step h3{margin-block-start:var(--space-lg);font-size:var(--step-2);font-weight:800}
.process__step p{margin-block-start:.4rem;color:var(--color-text-muted);font-size:.95rem}

/* ═══ PROOF — a full-bleed strip of uniform squares. ═══
   Deliberately NOT the services treatment: no cards, no shadows, no rounded
   panels. One band, edge to edge, six equal frames. */
/* The strip is already a direct child of the section, so it is full-bleed by
   construction. The usual `margin-inline:calc(50% - 50vw); inline-size:100vw`
   trick was not just redundant here, it overflowed: 100vw counts the scrollbar,
   so the document ran 8px wider than the viewport. */
.proof-strip{display:grid;grid-template-columns:repeat(2,1fr);gap:2px}
@media (min-width:40rem){.proof-strip{grid-template-columns:repeat(3,1fr)}}
@media (min-width:64rem){.proof-strip{grid-template-columns:repeat(6,1fr)}}
.proof-strip figure{position:relative;margin:0;overflow:hidden;aspect-ratio:1}
.proof-strip img{inline-size:100%;block-size:100%;object-fit:cover;
  transition:transform var(--transition-slow)}
.proof-strip figcaption{position:absolute;inset-inline:0;inset-block-end:0;
  padding:2rem .85rem .8rem;background:var(--caption-scrim);
  color:var(--color-text-inverse);font-family:var(--font-display);font-weight:700;
  font-size:var(--step--1);line-height:1.35}
@media (hover:hover){.proof-strip figure:hover img{transform:scale(var(--media-zoom))}}
.proof__note{margin-block-start:var(--space-lg);font-size:var(--step--1);
  color:hsl(0 0% 100% / .55);text-align:center}

/* ═══ TESTIMONIALS ═══ */
.quotes{display:grid;gap:var(--space-lg);
  grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))}
.quote{position:relative;background:var(--color-surface);border-radius:var(--radius-lg);
  padding:var(--space-xl);box-shadow:var(--shadow-sm),var(--shadow-ring);overflow:hidden}
.quote__mark{position:absolute;inset-block-start:-.4rem;inset-inline-end:.6rem;
  inline-size:4.5rem;block-size:4.5rem;color:var(--color-brand);opacity:.07;
  pointer-events:none}
.quote__stars{display:flex;gap:.15rem;margin-block-end:var(--space-md)}
.quote__stars .icon{inline-size:1.1rem;block-size:1.1rem;stroke-width:0}
.quote__text{font-size:1.02rem;line-height:1.85;position:relative}
.quote__who{margin-block-start:var(--space-lg);padding-block-start:var(--space-md);
  border-top:var(--border-hairline);font-family:var(--font-display);font-weight:800}
.quote__who span{display:block;font-family:var(--font-body);font-weight:400;
  font-size:var(--step--1);color:var(--color-text-muted)}

/* ═══ PLEDGES — typographic, no symbol at all. ═══
   Three sections carrying illustrations would turn the device into wallpaper, and
   a small glyph here is exactly what was called basic. A gold rule is enough. */
.pledge__grid{display:grid;gap:var(--space-xl);
  grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}
.pledge{padding-block-start:var(--space-md);border-top:4px solid var(--color-accent)}
.pledge h3{font-size:var(--step-2);font-weight:800;margin-block-end:.4rem}
.pledge p{color:var(--color-text-muted);font-size:.95rem}
.proof__note{display:none}

/* ═══ AREAS — three fixed rows that scroll sideways. ═══
   Wrapping pills grew to eight rows on a phone. Locking the row count and moving
   the overflow onto the horizontal axis makes the block a constant height no
   matter how many districts are listed — which matters, because this list grows. */
.pills{display:grid;grid-auto-flow:column;grid-template-rows:repeat(3,auto);
  grid-auto-columns:max-content;gap:.5rem;overflow-x:auto;
  scroll-snap-type:x proximity;padding-block-end:.35rem;scrollbar-width:none;
  justify-content:start}
.pills::-webkit-scrollbar{display:none}
.pills a{scroll-snap-align:start;display:inline-block;text-decoration:none;white-space:nowrap;
  font-family:var(--font-display);font-weight:700;font-size:var(--step--1);
  background:var(--color-surface);color:var(--color-brand);padding:.42rem .95rem;
  border-radius:var(--radius-pill);box-shadow:var(--shadow-xs),var(--shadow-ring);
  transition:transform var(--transition),box-shadow var(--transition),
  background-color var(--transition),color var(--transition)}
@media (hover:hover){.pills a:hover{background:var(--color-brand);
  color:var(--color-text-inverse);transform:translateY(var(--lift-sm));
  box-shadow:var(--shadow-md)}}
.pills a:active{transform:translateY(0)}

/* ═══ INNER PAGES ═══
   Shared by about / contact / blog / terms. They are built from the same
   stylesheet as the home page, so a token change reaches all of them. */
.page-head{background:linear-gradient(160deg,var(--color-brand-dark),var(--color-brand-deep));
  color:var(--color-text-inverse);padding-block:clamp(2.5rem,1.5rem + 4vw,4.5rem);
  text-align:center}
.page-head h1{font-size:var(--step-5);font-weight:900;line-height:1.2;text-wrap:balance}
.page-head p{margin-block-start:var(--space-md);color:hsl(0 0% 100% / .82);
  font-size:var(--step-1);max-width:52ch;margin-inline:auto}
.breadcrumb{font-size:var(--step--1);color:hsl(0 0% 100% / .6);
  margin-block-end:var(--space-md)}
.breadcrumb a{text-decoration:none}
@media (hover:hover){.breadcrumb a:hover{color:var(--color-accent)}}

.prose{max-width:44rem;margin-inline:auto}
.prose h2{font-size:var(--step-3);font-weight:900;margin-block:var(--space-2xl) var(--space-md)}
.prose h2:first-child{margin-block-start:0}
.prose h3{font-size:var(--step-1);font-weight:800;margin-block:var(--space-xl) var(--space-xs)}
.prose p{margin-block-end:var(--space-md);color:var(--color-text-muted);line-height:1.95}
.prose strong{color:var(--color-text);font-weight:700}
.prose ul{margin-block-end:var(--space-md)}
.prose ul li{position:relative;padding-inline-start:1.5rem;margin-block-end:.55rem;
  color:var(--color-text-muted)}
.prose ul li::before{content:"";position:absolute;inset-inline-start:.3rem;
  inset-block-start:.72em;inline-size:.42rem;block-size:.42rem;border-radius:50%;
  background:var(--color-accent)}
.prose .lede{font-size:var(--step-1);color:var(--color-text)}
.prose figure{margin:var(--space-xl) 0}
.prose figure img{inline-size:100%;border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md)}
.prose figcaption{margin-block-start:.6rem;font-size:var(--step--1);
  color:var(--color-text-muted);text-align:center}

/* contact cards — no form, by instruction: a form is a promise to reply that
   nobody staffs. Every route here reaches a person who is already reachable. */
.contact-grid{display:grid;gap:var(--space-lg);
  grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}
.contact-card{background:var(--color-surface);border-radius:var(--radius-lg);
  padding:var(--space-xl);box-shadow:var(--shadow-sm),var(--shadow-ring);
  display:flex;flex-direction:column;gap:var(--space-sm);text-align:center;
  align-items:center}
.contact-card h3{font-size:var(--step-1);font-weight:800}
.contact-card p{color:var(--color-text-muted);font-size:.95rem}
.contact-card .icon-tile{inline-size:3.4rem;block-size:3.4rem}
.contact-card .value{font-family:var(--font-display);font-weight:800;
  font-size:var(--step-1);color:var(--color-brand);text-decoration:none;
  unicode-bidi:isolate}
.contact-card .btn{margin-block-start:auto}
.hours{width:100%;border-collapse:collapse;font-size:.95rem}
.hours th,.hours td{padding:.6rem .4rem;border-bottom:var(--border-hairline);text-align:start}
.hours th{font-family:var(--font-display);font-weight:700}
.hours td{color:var(--color-text-muted);unicode-bidi:isolate}
.map-frame{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);
  aspect-ratio:16/9;background:var(--color-tint)}
.map-frame iframe{inline-size:100%;block-size:100%;border:0;display:block}

/* blog */
/* Three across, not auto-fit. auto-fit gave four columns on a wide screen, which
   leaves the ninth post sitting alone on a row of its own — a layout that reads as
   "we ran out" rather than "there are nine". Three divides the set exactly, and the
   wider card lets a two-line Arabic headline breathe. */
.post-grid{display:grid;gap:var(--space-lg);
  grid-template-columns:repeat(3,1fr)}
@media (max-width:63.99rem){.post-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:37.99rem){.post-grid{grid-template-columns:1fr}}
.post-card{background:var(--color-surface);border-radius:var(--radius-lg);
  overflow:hidden;text-decoration:none;color:inherit;display:flex;flex-direction:column;
  box-shadow:var(--shadow-sm),var(--shadow-ring);
  transition:transform var(--transition),box-shadow var(--transition)}
.post-card img{aspect-ratio:8/5;inline-size:100%;object-fit:cover}
.post-card__body{padding:var(--space-lg);display:flex;flex-direction:column;gap:.5rem;flex:1}
.post-card h3{font-family:var(--font-display);font-size:var(--step-1);font-weight:800;
  line-height:1.4}
.post-card p{color:var(--color-text-muted);font-size:.93rem}
.post-card .more{margin-block-start:auto;padding-block-start:var(--space-sm);
  color:var(--color-brand);font-family:var(--font-display);font-weight:800;
  font-size:.93rem;display:inline-flex;align-items:center;gap:.35rem}
.post-card .more .icon{inline-size:1rem;block-size:1rem}
@media (hover:hover){.post-card:hover{transform:translateY(var(--lift-md));
  box-shadow:var(--shadow-lg),var(--shadow-ring)}}

/* ═══ FAQ ═══ */
.faq{max-width:52rem;margin-inline:auto}
.faq__item{background:var(--color-surface);border-radius:var(--radius-md);
  box-shadow:var(--shadow-xs),var(--shadow-ring);margin-block-end:var(--space-sm);
  transition:box-shadow var(--transition)}
.faq__item[open]{box-shadow:var(--shadow-md),var(--shadow-ring)}
.faq__q{cursor:pointer;list-style:none;display:flex;align-items:center;gap:var(--space-md);
  padding:var(--space-lg);font-family:var(--font-display);font-weight:800;
  font-size:var(--step-1);line-height:1.5}
.faq__q::-webkit-details-marker{display:none}
.faq__q .icon{margin-inline-start:auto;color:var(--color-brand);flex:none;
  transition:transform var(--transition)}
.faq__item[open] .faq__q .icon{transform:rotate(180deg)}
.faq__a{padding:0 var(--space-lg) var(--space-lg);color:var(--color-text-muted)}
@media (hover:hover){.faq__q:hover{color:var(--color-brand)}}

/* ═══ FINAL CTA ═══ */
.cta{background:linear-gradient(150deg,var(--color-brand) 0%,var(--color-brand-dark) 100%);
  color:var(--color-text-inverse);text-align:center}
.cta__title{font-size:var(--step-4);font-weight:900;line-height:1.25}
.cta__lead{margin-block-start:var(--space-md);color:hsl(0 0% 100% / .82);
  font-size:var(--step-1);max-width:44ch;margin-inline:auto}
.cta__actions{margin-block-start:var(--space-xl);display:flex;flex-wrap:wrap;
  gap:var(--space-md);justify-content:center}

/* ═══ FOOTER ═══ */
.site-footer{background:var(--color-brand-deep);color:hsl(0 0% 100% / .74);
  padding-block:var(--section-space) 0}
.site-footer__grid{display:grid;gap:var(--space-xl);
  grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}
.site-footer h4{color:var(--color-text-inverse);font-size:.95rem;font-weight:800;
  margin-block-end:var(--space-md);text-transform:var(--label-transform,uppercase);
  letter-spacing:var(--tracking-display,.04em)}
.site-footer a{text-decoration:none;transition:color var(--transition)}
@media (hover:hover){.site-footer a:hover{color:var(--color-accent)}}
.site-footer li{margin-block-end:.45rem;font-size:.95rem}
.footer-contact li{display:flex;align-items:flex-start;gap:.6rem;
  margin-block-end:var(--space-md)}
.footer-contact .icon{color:var(--color-accent);margin-block-start:.3rem;flex:none;
  inline-size:1.15rem;block-size:1.15rem}
.footer-contact strong{display:block;color:var(--color-text-inverse);font-weight:700}
.footer-map{margin-block-start:var(--space-lg);border-radius:var(--radius-md);
  overflow:hidden;aspect-ratio:4/3;box-shadow:var(--shadow-ring-light);
  background:hsl(0 0% 100% / .06)}
.footer-map iframe{inline-size:100%;block-size:100%;border:0;display:block;
  filter:grayscale(.15)}
.site-footer__bottom{margin-block-start:var(--section-space);
  padding-block:var(--space-lg) calc(5rem + env(safe-area-inset-bottom,0px));
  border-top:1px solid hsl(0 0% 100% / .12);font-size:var(--step--1);
  display:flex;flex-wrap:wrap;gap:var(--space-md);justify-content:space-between}
@media (min-width:40rem){.site-footer__bottom{padding-block-end:var(--space-lg)}}
.site-footer .brand__name{color:var(--color-text-inverse)}
.site-footer :focus-visible{outline-color:var(--color-text-inverse)}

/* ═══ STICKY CALL BAR ═══
   Two actions, an icon and one word each. The phone number is gone: on a 375px bar
   it wrapped, and the number is not information — tapping is the whole point.
   It stays out of the way over the hero, where the hero's own buttons already
   offer both actions, and slides up once the hero is behind you. */
.float-ctas{position:fixed;z-index:120;inset-block-end:0;inset-inline:0;
  display:flex;padding-block-end:env(safe-area-inset-bottom,0px);
  background:var(--color-brand-deep);box-shadow:var(--shadow-xl);
  transition:transform 240ms var(--transition),opacity 240ms var(--transition)}
.float-ctas[data-hidden]{transform:translateY(115%);opacity:0;pointer-events:none}
.float-cta{flex:1;display:flex;align-items:center;justify-content:center;gap:.5rem;
  min-block-size:3.75rem;text-decoration:none;font-family:var(--font-display);
  font-weight:800;color:var(--color-text-inverse);font-size:1.02rem;
  transition:background-color var(--transition)}
.float-cta .icon{inline-size:1.35rem;block-size:1.35rem}
.float-cta--call{background:var(--color-brand)}
.float-cta--wa{background:var(--color-accent);color:var(--color-brand-deep)}
.float-cta:active{filter:brightness(.94)}
@media (min-width:40rem){
  .float-ctas{inset-inline-start:auto;inset-inline-end:1.5rem;inset-block-end:1.5rem;
    flex-direction:column;gap:.75rem;background:none;box-shadow:none;padding:0}
  .float-ctas[data-hidden]{transform:translateY(140%)}
  .float-cta{min-inline-size:3.6rem;min-block-size:3.6rem;border-radius:var(--radius-pill);
    padding:0 1.25rem;box-shadow:var(--shadow-xl)}
  .float-cta__label{display:none}
  .float-cta .icon{inline-size:1.5rem;block-size:1.5rem}
}
@media (hover:hover) and (min-width:40rem){.float-cta:hover{transform:translateY(var(--lift-sm))}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .btn:hover,.rail__card:hover,.float-cta:hover,.pills a:hover,.rail__btn:hover,
  .hero__services a:hover,.btn:active,.rail__card:active{transform:none!important}
  .rail__card:hover .rail__media img,.proof-strip figure:hover img{transform:none!important}
  .rail__card:hover .rail__body .icon{transform:none!important}
}