/*
Theme Name: HM Pro Parging
Theme URI: https://hmparging.ca
Author: HM Pro Parging
Description: Custom trilingual (EN/FR/AR) WordPress theme for HM Pro Parging — parging, resurfacing, masonry and foundation repair across Ottawa, Gatineau and within ~100 km. White/red/blue palette, live open/closed hours bar, first-visit language popup.
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: hmpargingca
*/

/* ==========================================================================
   0. Design tokens — palette 60% white / 25% blue / 15% red
   ========================================================================== */
:root{
  --blue:#0340A2;       /* PRIMARY accent */
  --blue-dark:#022C6E;  /* hover / pressed */
  --red:#E30613;        /* SECONDARY accent */
  --red-dark:#B00510;
  --ink:#1A1A1A;        /* body text */
  --charcoal:#141414;   /* footer + rare dark band */
  --grey:#6E6E68;       /* muted labels */
  --line:#EAEAEA;       /* hairlines */
  --paper:#F6F6F4;      /* light alt sections */
  --white:#FFFFFF;      /* DOMINANT background */
  --wa:#25D366;         /* WhatsApp green */
  --ig-purple:#8A3AB9;  /* Instagram-brand accent for the Instagram button border */

  --font-head:"Oswald",system-ui,sans-serif;
  --font-body:"Inter",system-ui,-apple-system,sans-serif;
  --font-display:"Anton",system-ui,sans-serif;

  --wrap:1180px;
  --gutter:clamp(16px,4vw,40px);
  --radius:10px;
  --radius-lg:16px;
  --shadow-sm:0 1px 3px rgba(20,20,20,.08);
  --shadow:0 8px 30px rgba(20,20,20,.10);
  --shadow-lg:0 20px 60px rgba(20,20,20,.16);
  --topbar-h:38px;
  --header-h:76px;
  --ease:cubic-bezier(.4,0,.2,1);
}

/* Arabic swaps every family to Cairo — Anton and Oswald have no Arabic
   glyphs, so headings must explicitly repoint rather than silently font-fallback. */
:root[lang="ar"]{
  --font-body:"Cairo",system-ui,sans-serif;
  --font-head:"Cairo",system-ui,sans-serif;
  --font-display:"Cairo",system-ui,sans-serif;
}

/* ==========================================================================
   1. Reset / base
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.65;
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
:root[lang="ar"] body{ font-size:18.5px; line-height:1.8; letter-spacing:0; }

img{ max-width:100%; height:auto; display:block; }
a{ color:var(--blue); text-decoration:none; transition:color .2s var(--ease); }
a:hover{ color:var(--blue-dark); }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3,h4{ font-family:var(--font-head); font-weight:600; line-height:1.12; margin:0 0 .5em; color:var(--ink); }
:root[lang="ar"] h1,:root[lang="ar"] h2,:root[lang="ar"] h3,:root[lang="ar"] h4{ font-weight:700; line-height:1.4; }
p{ margin:0 0 1em; }
ul{ margin:0; padding:0; list-style:none; }

/* Accessibility: visible focus everywhere */
:focus-visible{ outline:3px solid var(--blue); outline-offset:2px; border-radius:3px; }
.skip-link{
  position:absolute; inset-inline-start:-9999px; top:0; z-index:2000;
  background:var(--red); color:#fff; padding:10px 18px; border-radius:0 0 8px 0;
}
.skip-link:focus{ inset-inline-start:0; color:#fff; }

/* Keep phone/email LTR inside Arabic text */
:root[lang="ar"] bdi,:root[lang="ar"] .ltr{ direction:ltr; unicode-bidi:isolate; }

/* ==========================================================================
   2. Layout primitives
   ========================================================================== */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:clamp(56px,8vw,104px); }
.section--paper{ background:var(--paper); }
.section--tight{ padding-block:clamp(40px,6vw,72px); }

.eyebrow{
  font-family:var(--font-head);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-weight:600;
  font-size:.82rem;
  color:var(--blue);
  display:inline-block;
  margin-bottom:.6rem;
}
:root[lang="ar"] .eyebrow{ letter-spacing:0; }
.section-head{ max-width:720px; margin-bottom:clamp(32px,5vw,56px); }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-title{ font-family:var(--font-display); font-weight:400; font-size:clamp(1.9rem,4.4vw,2.9rem); text-transform:uppercase; letter-spacing:-.015em; }
:root[lang="ar"] .section-title{ text-transform:none; font-weight:900; letter-spacing:0; }
.section-intro{ color:var(--grey); font-size:1.06rem; margin:0; }

/* ==========================================================================
   3. Buttons
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family:var(--font-head); font-weight:600; letter-spacing:.03em;
  text-transform:uppercase; font-size:.95rem;
  padding:.85em 1.6em; border-radius:var(--radius); border:2px solid transparent;
  transition:transform .15s var(--ease), background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
  cursor:pointer; line-height:1; text-align:center;
}
:root[lang="ar"] .btn{ text-transform:none; letter-spacing:0; }
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--blue); color:#fff; border-color:var(--blue); }
.btn-primary:hover{ background:var(--blue-dark); border-color:var(--blue-dark); color:#fff; box-shadow:var(--shadow); }
.btn-outline{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn-outline:hover{ background:var(--ink); color:#fff; }
.btn-outline-red{ background:transparent; color:var(--red); border-color:var(--red); }
.btn-outline-red:hover{ background:var(--red); color:#fff; }
.btn-red{ background:var(--red); color:#fff; border-color:var(--red); }
.btn-red:hover{ background:var(--red-dark); border-color:var(--red-dark); color:#fff; }
.btn-wa{ background:var(--wa); color:#0b3d20; border-color:var(--wa); }
.btn-wa:hover{ background:#1fb457; border-color:#1fb457; color:#062a15; }
.btn-lg{ padding:1.05em 2em; font-size:1.02rem; }
.btn-block{ width:100%; }
.btn svg,.btn img{ width:1.15em; height:1.15em; }

/* ==========================================================================
   4. Top hours bar
   ========================================================================== */
.topbar{
  background:var(--blue); color:#fff;
  font-size:.85rem; min-height:var(--topbar-h);
  display:flex; align-items:center;
}
.topbar .wrap{ display:flex; align-items:center; justify-content:center; gap:1.4rem; flex-wrap:wrap; padding-block:6px; }
.topbar__hours{ display:flex; align-items:center; gap:1.2rem; font-weight:500; }
/* Direct-child only — must not reach into the nested .topbar__icon (mobile-only, hidden by default). */
.topbar__hours > span{ display:inline-flex; align-items:center; gap:.4rem; }
.topbar__hours .sep{ opacity:.55; }
.topbar__phone{ color:#fff; font-weight:600; white-space:nowrap; }
.topbar__phone:hover{ color:#fff; text-decoration:underline; }
/* Phone-only addition to the bar — desktop row stays exactly as built. */
.topbar__email{ display:none; color:#fff; font-weight:600; white-space:nowrap; }
.topbar__email:hover{ color:#fff; text-decoration:underline; }
.topbar__areas{ font-weight:500; opacity:.92; }
/* Line icons before each topbar item — mobile-only, see @media 768px below. */
.topbar__icon{ display:none; flex:0 0 auto; width:15px; height:15px; }
.topbar__icon svg{ width:100%; height:100%; display:block; }
.status-pill{
  display:inline-flex; align-items:center; gap:.45em;
  font-family:var(--font-head); font-weight:600; text-transform:uppercase;
  letter-spacing:.06em; font-size:.76rem;
  padding:.28em .8em; border-radius:999px; background:rgba(0,0,0,.28); color:#fff;
}
:root[lang="ar"] .status-pill{ text-transform:none; letter-spacing:0; }
.status-pill::before{ content:""; width:.55em; height:.55em; border-radius:50%; background:#fff; }
.status-pill.is-open{ background:var(--wa); color:#062a15; }
.status-pill.is-open::before{ background:#0b3d20; box-shadow:0 0 0 3px rgba(255,255,255,.35); }
.status-pill.is-closed{ background:rgba(0,0,0,.4); }

/* ==========================================================================
   5. Header
   ========================================================================== */
.site-header{
  position:sticky; top:0; z-index:900; background:var(--white);
  border-bottom:1px solid var(--line);
  transition:box-shadow .25s var(--ease);
}
.site-header.scrolled{ box-shadow:var(--shadow-sm); }

/* PC only: give the header row more width than page content (1180) so the logo
   sits hard against the left, the quote button hard against the right, and the
   nav has room to breathe between them. Mobile (<=860px) stacks — untouched. */
@media (min-width:861px){
  .site-header .wrap{ max-width:min(96vw,1340px); }
}

/* Header quote button (desktop .header-actions + mobile .mobile-cta) persists on scroll and
   turns blue in the condensed state — clear signal the header changed. */
#siteHeader .header-actions .btn-red,
#siteHeader .mobile-cta .btn-red{
  transition:background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.site-header.scrolled .header-actions .btn-red,
.site-header.scrolled .mobile-cta .btn-red{
  background:var(--blue); border-color:var(--blue); color:#fff;
}
.site-header.scrolled .header-actions .btn-red:hover,
.site-header.scrolled .mobile-cta .btn-red:hover{
  background:var(--blue-dark); border-color:var(--blue-dark);
}

/* Single nav row: logo (start) — nav (center) — quote+lang group (end). Never wraps on desktop. */
.header-inner{
  display:flex; align-items:center; flex-wrap:nowrap;
  gap:clamp(.75rem,2vw,1.5rem); min-height:var(--header-h);
}
.brand{ display:flex; align-items:center; gap:.6rem; flex:0 0 auto; min-width:0; }
.brand__logo{ height:54px; width:auto; flex:0 0 auto; }
.brand__text{ display:flex; flex-direction:column; line-height:1.05; min-width:0; }
.brand__name{ font-family:var(--font-head); font-weight:800; font-size:1.05rem; text-transform:uppercase; letter-spacing:-.01em; white-space:nowrap; }
.brand__hm{ color:var(--red); }
.brand__rest{ color:var(--blue); }
.brand__slogan{ font-size:.7rem; color:var(--grey); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
:root[lang="ar"] .brand__name{ text-transform:none; }

/* Nav takes the flexible middle space and centers its links within it,
   so it sits visually between the logo and the action group. */
.primary-nav{ flex:1 1 auto; min-width:0; }
.primary-nav ul{ display:flex; align-items:center; justify-content:center; flex-wrap:nowrap; gap:clamp(1rem,2vw,1.6rem); }
.primary-nav a{
  font-family:var(--font-head); font-weight:600; text-transform:uppercase;
  font-size:clamp(.92rem,1vw,1.02rem); letter-spacing:.03em; color:var(--ink); position:relative; padding-block:.4rem;
  white-space:nowrap;
}
:root[lang="ar"] .primary-nav a{ text-transform:none; letter-spacing:0; }
.primary-nav a::after{
  content:""; position:absolute; inset-inline:0; bottom:-2px; height:3px;
  background:var(--blue); transform:scaleX(0); transform-origin:center;
  transition:transform .2s var(--ease);
}
.primary-nav a:hover,.primary-nav a[aria-current="page"]{ color:var(--blue); }
.primary-nav a:hover::after,.primary-nav a[aria-current="page"]::after{ transform:scaleX(1); }

/* Quote button + language switcher grouped together on the right. This is the
   ONLY copy shown on desktop — the identical pair inside .drawer-actions is
   mobile-drawer-only markup and must stay hidden outside that breakpoint,
   otherwise both render at once and appear as duplicates. */
.header-actions{ display:flex; align-items:center; gap:clamp(.5rem,1.2vw,.85rem); flex:0 0 auto; white-space:nowrap; }
.drawer-actions{ display:none; }

/* Mobile-only stacked quote/work CTAs under the hamburger — hidden on desktop, see @media 860px */
.mobile-cta{ display:none; }

/* Hamburger — solid blue rounded-square, white bars, animates to an X */
.nav-toggle{
  display:none; width:44px; height:44px; border:0;
  background:var(--blue); border-radius:10px; padding:0; place-items:center;
  transition:background .2s var(--ease), transform .15s var(--ease);
}
.nav-toggle:hover{ background:var(--blue-dark); }
.nav-toggle:active{ transform:scale(.94); }
.nav-toggle span{ position:relative; width:20px; height:2.5px; background:#fff; border-radius:2px; display:block; }
.nav-toggle span::before,.nav-toggle span::after{ content:""; position:absolute; left:0; width:20px; height:2.5px; background:#fff; border-radius:2px; transition:.2s var(--ease); }
.nav-toggle span::before{ top:-7px; }
.nav-toggle span::after{ top:7px; }
.nav-toggle[aria-expanded="true"] span{ background:transparent; }
.nav-toggle[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); }
@media (prefers-reduced-motion:reduce){
  .nav-toggle,.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{ transition:none; }
}

/* ==========================================================================
   6. Language dropdown
   ========================================================================== */
.lang-dd{ position:relative; }
.lang-dd__btn{
  display:inline-flex; align-items:center; gap:.4rem;
  background:#fff; border:1px solid var(--line); border-radius:999px;
  padding:.45rem .8rem; font-family:var(--font-head); font-weight:600;
  font-size:.85rem; color:var(--ink); text-transform:uppercase;
}
.lang-dd__btn svg{ width:1.05em; height:1.05em; color:var(--blue); }
.lang-dd__btn .caret{ width:.6em; height:.6em; border-inline:2px solid transparent; border-bottom:2px solid var(--grey); border-right:2px solid var(--grey); transform:rotate(45deg); margin-top:-3px; }
.lang-dd__menu{
  position:absolute; inset-inline-end:0; top:calc(100% + 8px); min-width:150px;
  background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow);
  padding:6px; z-index:50; display:none;
}
.lang-dd.open .lang-dd__menu{ display:block; }
.lang-dd__menu button{
  display:flex; width:100%; align-items:center; gap:.6rem; background:none; border:0;
  padding:.6rem .7rem; border-radius:8px; font-size:.95rem; color:var(--ink); text-align:start;
}
.lang-dd__menu button:hover{ background:var(--paper); }
.lang-dd__menu button[aria-current="true"]{ color:var(--blue); font-weight:600; }
/* Flags on the language options — Ontario/EN, Quebec/FR, KSA emoji/AR. */
.lang-dd__menu .lang-flag{ width:22px; height:16px; object-fit:contain; flex:0 0 auto; }
.lang-dd__menu .lang-flag--emoji{ width:auto; height:auto; font-size:1.15rem; line-height:1; }

/* ==========================================================================
   6b. Get in touch strip — full-width, dark, under hero/page-hero
   ========================================================================== */
.touch-strip{
  display:block; width:100%; background:#3A3A3A; border:0; cursor:pointer;
  padding:clamp(20px,3.5vw,26px) var(--gutter); text-align:center;
  font-family:var(--font-head); font-weight:700; text-transform:uppercase;
  font-size:clamp(1.05rem,2.6vw,1.5rem); letter-spacing:.02em; line-height:1.35;
  transition:background .2s var(--ease);
}
.touch-strip:hover,.touch-strip:focus-visible{ background:#2c2c2c; }
:root[lang="ar"] .touch-strip{ text-transform:none; letter-spacing:0; }
.touch-strip__text{ color:#fff; }
.touch-strip__emph{ color:var(--red); font-weight:800; }

/* ==========================================================================
   7. Hero
   ========================================================================== */
.hero{ position:relative; background:var(--white); overflow:hidden; }
.hero::before{
  /* subtle construction-vibe diagonal red/blue stripe */
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:repeating-linear-gradient(135deg,transparent 0 38px,rgba(3,64,162,.04) 38px 40px);
}
.hero__inner{ display:grid; grid-template-columns:.9fr 1.25fr; gap:clamp(28px,5vw,64px); align-items:stretch; padding-block:clamp(48px,7vw,92px); position:relative; }
.hero__content{ align-self:center; }
.hero__title{ font-family:var(--font-display); font-weight:400; font-size:clamp(2.45rem,6.4vw,4.25rem); text-transform:uppercase; letter-spacing:-.015em; margin-bottom:.35em; line-height:1.05; }
:root[lang="ar"] .hero__title{ text-transform:none; font-weight:900; letter-spacing:0; line-height:1.3; }
.hero__subtitle{ font-size:1.22rem; color:var(--grey); max-width:32em; margin-bottom:1.8em; }
.hero__eyebrow{ font-size:.92rem; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.9rem; }
/* Hero's "See Our Work" only — plain .btn-outline elsewhere (About/Services/Contact "Call" buttons) stays ink. */
.hero__cta .btn-outline{ color:var(--blue); border-color:var(--blue); }
.hero__cta .btn-outline:hover{ background:var(--blue); color:#fff; }
.hero__media{ position:relative; align-self:stretch; min-height:clamp(320px,40vw,560px); }
.hero__media img{ width:100%; height:100%; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); object-fit:cover; }
.hero__media::after{ content:""; position:absolute; inset-block-start:-14px; inset-inline-end:-14px; width:56%; height:60%; border-inline-end:5px solid var(--blue); border-block-start:5px solid var(--blue); border-radius:0 var(--radius-lg) 0 0; z-index:-1; }

/* ==========================================================================
   8. Trusted by
   ========================================================================== */
.trusted{ text-align:center; }
.trusted__label{ font-family:var(--font-head); text-transform:uppercase; letter-spacing:.16em; color:var(--grey); font-size:.85rem; margin-bottom:1.8rem; }
:root[lang="ar"] .trusted__label{ letter-spacing:0; }
.trusted__row{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:clamp(24px,5vw,64px); }
.trusted__item{ display:flex; flex-direction:column; align-items:center; gap:.4rem; }
.trusted__row img{ height:48px; width:auto; transition:transform .25s var(--ease); }
.trusted__row img:hover,.trusted__item:hover img{ transform:translateY(-2px); }
.trusted__item--soon{ position:relative; cursor:default; }
.trusted__item--soon img{ filter:grayscale(1); opacity:.55; }
.trusted__item--soon:hover img{ transform:none; }
.trusted__soon-tag{ font-family:var(--font-head); font-style:normal; font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--grey); }
.rate-us .section-title{ margin-bottom:1.8rem; }

/* Rate Us page — 4 review buttons (Yelp / TrustedPros / Google Maps "soon" / Facebook) */
.rate-page{ max-width:640px; margin-inline:auto; }
.rate-btns{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(14px,2.5vw,22px); }
.rate-btn{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.9rem;
  min-height:150px; padding:1.6rem 1.2rem; border:1px solid var(--line); border-radius:var(--radius-lg);
  background:#fff; text-align:center; box-shadow:var(--shadow-sm);
  transition:transform .18s var(--ease), box-shadow .2s var(--ease);
}
.rate-btn:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.rate-btn img{ height:44px; width:auto; }
.rate-btn span{ font-family:var(--font-head); font-weight:700; text-transform:uppercase; letter-spacing:.02em; font-size:.95rem; color:var(--ink); }
:root[lang="ar"] .rate-btn span{ text-transform:none; letter-spacing:0; }
.rate-btn--soon{ cursor:default; }
.rate-btn--soon:hover{ transform:none; box-shadow:var(--shadow-sm); }
.rate-btn--soon img{ filter:grayscale(1); opacity:.5; }
.rate-btn--soon span{ color:var(--grey); }
.rate-btn__soon{ font-family:var(--font-head); font-style:normal; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#fff; background:var(--grey); padding:.15rem .55rem; border-radius:999px; }
@media (max-width:560px){ .rate-btns{ grid-template-columns:1fr; } }

/* ==========================================================================
   9. Services
   ========================================================================== */
.grid{ display:grid; gap:clamp(20px,3vw,30px); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }

.svc-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.svc-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:transparent; }
.svc-card__media{ aspect-ratio:4/3; overflow:hidden; }
.svc-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .4s var(--ease); }
.svc-card:hover .svc-card__media img{ transform:scale(1.05); }

/* Service photo sliders — auto cross-fade (home cards + services page detail) */
.svc-slider{ position:relative; width:100%; aspect-ratio:4/3; overflow:hidden; }
.svc-slider .svc-slide{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .8s var(--ease),transform .4s var(--ease); }
.svc-slider .svc-slide.is-active{ opacity:1; }
.svc-card:hover .svc-slider .svc-slide.is-active{ transform:scale(1.05); }
.svc-detail__media .svc-slider{ border-radius:var(--radius-lg); box-shadow:var(--shadow); }
.svc-card__body{ padding:1.4rem 1.4rem 1.6rem; display:flex; flex-direction:column; flex:1; }
.svc-card__icon{ display:grid; place-items:center; width:44px; height:44px; margin-bottom:.9rem; }
.svc-card__icon img{ width:100%; height:100%; object-fit:contain; }
.svc-card__title{ font-size:1.3rem; text-transform:uppercase; margin-bottom:.15em; }
:root[lang="ar"] .svc-card__title{ text-transform:none; }
.svc-card__sub{ display:block; font-family:var(--font-body); font-size:.8rem; font-weight:600; color:var(--blue); text-transform:uppercase; letter-spacing:.04em; margin-bottom:.6em; }
.svc-card__desc{ color:var(--grey); font-size:.98rem; margin:0; }

/* ==========================================================================
   10. Process / How we do it
   ========================================================================== */
.steps{ counter-reset:step; display:grid; gap:clamp(22px,3vw,34px); grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }
.step{ position:relative; padding-block-start:.4rem; }
.step__n{ font-family:var(--font-head); font-weight:700; font-size:3.2rem; color:var(--blue); line-height:1; margin-bottom:.35rem; }
.step__title{ font-size:1.18rem; text-transform:uppercase; margin-bottom:.35em; }
:root[lang="ar"] .step__title{ text-transform:none; }
.step__desc{ color:var(--grey); font-size:.96rem; margin:0; }

/* ==========================================================================
   11. Gallery / Our work
   ========================================================================== */
.ba-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(18px,3vw,28px); margin-bottom:clamp(20px,3vw,30px); }
.ba{ position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); }
.ba img{ width:100%; aspect-ratio:16/10; object-fit:cover; }
.gallery-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,2vw,20px); }
.gallery-grid.cols-3{ grid-template-columns:repeat(3,1fr); }
.tile{ position:relative; border-radius:var(--radius); overflow:hidden; cursor:pointer; background:var(--paper); }
.tile img{ width:100%; aspect-ratio:1; object-fit:cover; transition:transform .4s var(--ease); }
.tile:hover img{ transform:scale(1.06); }
.tile::after{ content:"⤢"; position:absolute; inset-block-end:8px; inset-inline-end:10px; color:#fff; font-size:1.1rem; opacity:0; transition:.2s; text-shadow:0 1px 4px rgba(0,0,0,.5); }
.tile:hover::after{ opacity:1; }
.gallery-cta{ text-align:center; margin-top:clamp(28px,4vw,44px); }

/* Lightbox */
.lightbox{ position:fixed; inset:0; z-index:1200; background:rgba(10,10,10,.92); display:none; align-items:center; justify-content:center; padding:24px; }
.lightbox.open{ display:flex; }
.lightbox img{ max-width:92vw; max-height:88vh; border-radius:8px; box-shadow:var(--shadow-lg); }
.lightbox__close{ position:absolute; top:18px; inset-inline-end:22px; background:none; border:0; color:#fff; font-size:2.2rem; line-height:1; }

/* ==========================================================================
   12. Why us
   ========================================================================== */
.why-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.5vw,26px); }
.why-box{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:1.6rem 1.5rem; transition:transform .2s var(--ease), box-shadow .2s var(--ease); }
.why-box:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
/* display:grid so the fixed 44px box actually constrains the img — a plain inline
   <span> ignores width/height, letting width:100% blow the icon up to card size. */
.why-box__icon{ display:grid; place-items:center; width:44px; height:44px; margin-bottom:.9rem; }
.why-box__icon img{ width:100%; height:100%; object-fit:contain; }
.why-box__title{ color:var(--red); font-size:1.16rem; text-transform:uppercase; margin-bottom:.35em; }
:root[lang="ar"] .why-box__title{ text-transform:none; }
.why-box__desc{ color:var(--grey); font-size:.96rem; margin:0; }

/* ==========================================================================
   13. Areas / map
   ========================================================================== */
.areas__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,48px); align-items:start; margin-top:clamp(28px,4vw,44px); }
.hmp-map{ position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); aspect-ratio:16/11; }
.hmp-map iframe{ position:absolute; inset:0; width:100%; height:100%; }
.areas__cols{ display:grid; grid-template-columns:1fr 1fr; gap:1.6rem; }
.area-col h3{ display:flex; align-items:center; gap:.55rem; font-size:1.05rem; text-transform:uppercase; color:var(--ink); padding-bottom:.5rem; border-bottom:2px solid var(--red); margin-bottom:.9rem; }
.area-col__flag{ width:24px; height:18px; object-fit:contain; flex:0 0 auto; box-shadow:0 0 0 1px var(--line); }
:root[lang="ar"] .area-col h3{ text-transform:none; }
.area-col li{ padding:.28rem 0; color:var(--ink); font-size:.96rem; display:flex; align-items:baseline; gap:.5rem; }
.area-col li::before{ content:""; width:.4rem; height:.4rem; border-radius:50%; background:var(--blue); flex:0 0 auto; }
.area-col li.anchor{ font-weight:700; color:var(--red); }

/* ==========================================================================
   14. Red CTA band
   ========================================================================== */
.cta-band{ background:var(--blue); color:#fff; text-align:center; }
.cta-band .section-title{ color:#fff; }
.cta-band .eyebrow{ color:rgba(255,255,255,.85); }
.cta-band p{ color:rgba(255,255,255,.92); max-width:40em; margin-inline:auto; }
.cta-band__actions{ display:flex; flex-wrap:wrap; gap:.9rem; justify-content:center; margin-top:1.6rem; }
.cta-band .btn-primary{ background:#fff; color:var(--blue); border-color:#fff; }
.cta-band .btn-primary:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
.cta-band .btn-outline{ color:#fff; border-color:#fff; }
.cta-band .btn-outline:hover{ background:#fff; color:var(--blue); }

/* ==========================================================================
   15. Sticky contact FAB
   ========================================================================== */
.fab{
  position:fixed; inset-block-end:22px; inset-inline-end:22px; z-index:850;
  width:60px; height:60px; border-radius:50%; background:var(--blue); color:#fff;
  border:0; display:grid; place-items:center; box-shadow:0 10px 26px rgba(3,64,162,.4);
  transition:transform .2s var(--ease), background .2s var(--ease);
}
.fab:hover{ background:var(--blue-dark); transform:scale(1.06); color:#fff; }
.fab svg{ width:26px; height:26px; }
.fab::after{ content:""; position:absolute; inset:0; border-radius:50%; border:2px solid var(--blue); animation:fabPulse 2.4s ease-out infinite; }
@keyframes fabPulse{ 0%{ transform:scale(1); opacity:.6; } 100%{ transform:scale(1.5); opacity:0; } }
@media (prefers-reduced-motion:reduce){ .fab::after,.fab-pulse{ animation:none; } }

/* Mobile-only floating action button — phone, fixed bottom-right, always visible. */
.fab-stack{ display:none; }

/* ==========================================================================
   16. Modal + language popup
   ========================================================================== */
/* opacity/visibility (not display:none) so .modal/.sheet can transition in — see openOverlay in main.js. */
.overlay{
  position:fixed; inset:0; z-index:1000; background:rgba(10,10,10,.6);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .25s var(--ease), visibility .25s;
}
.overlay.open{ opacity:1; visibility:visible; pointer-events:auto; }
.modal{ background:#fff; border-radius:var(--radius-lg); max-width:420px; width:100%; padding:clamp(24px,4vw,36px); box-shadow:var(--shadow-lg); position:relative; text-align:center; }
.modal__close{ position:absolute; top:12px; inset-inline-end:14px; background:none; border:0; font-size:1.8rem; line-height:1; color:var(--grey); }
.modal__title{ font-size:1.5rem; text-transform:uppercase; margin-bottom:.3em; }
:root[lang="ar"] .modal__title{ text-transform:none; }
.modal__sub{ color:var(--grey); margin-bottom:1.4rem; }
.modal__actions{ display:grid; gap:.8rem; }

.lang-popup .modal__actions .btn{ font-size:1.1rem; padding:1em; background:#fff; color:var(--ink); border-color:var(--red); }
.lang-popup .modal__actions .btn:hover{ background:#fff; color:var(--ink); border-color:var(--blue); box-shadow:var(--shadow); }
/* Flags on popup options — scoped past .btn img (1.15em) which would otherwise shrink them. */
.lang-popup .modal__actions .btn .lang-flag{ width:34px; height:24px; object-fit:contain; flex:0 0 auto; filter:drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.lang-popup .modal__actions .btn .lang-flag--emoji{ width:auto; height:auto; font-size:1.7rem; line-height:1; filter:none; }

/* Contact sheet — bottom sheet, not a centered dialog: Call (red) + WhatsApp (green), no email. */
.overlay.sheet{ align-items:flex-end; padding:0; }
.overlay.sheet .modal{
  max-width:480px; border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  padding:clamp(22px,4vw,30px) clamp(20px,4vw,28px) calc(env(safe-area-inset-bottom,0px) + 22px);
  transform:translateY(28px);
  transition:transform .3s var(--ease);
}
.overlay.sheet.open .modal{ transform:translateY(0); }
.sheet .modal__actions .btn{ font-size:1.05rem; padding:1em; }
@media (prefers-reduced-motion:reduce){
  .overlay,.overlay .modal,.primary-nav.drawer{ transition:none; }
}

/* ==========================================================================
   17. Footer
   Kept red rather than blue here: --blue on --charcoal only hits ~2:1 contrast
   (fails WCAG), while --red holds ~3.8:1 — legibility over ratio on dark bg.
   ========================================================================== */
.site-footer{ background:var(--charcoal); color:#cfcfcf; border-top:4px solid var(--red); padding-block:clamp(48px,6vw,72px) 0; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:clamp(28px,4vw,48px); }
.footer-brand__name{ font-family:var(--font-head); font-weight:800; font-size:1.5rem; text-transform:uppercase; letter-spacing:-.01em; margin:0 0 .6rem; }
.footer-brand__rest{ color:#fff; }
.footer-brand p{ color:#a9a9a9; font-size:.95rem; max-width:28em; }
.footer-col h4{ color:var(--red); font-size:1rem; text-transform:uppercase; letter-spacing:.05em; margin-bottom:1rem; }
:root[lang="ar"] .footer-col h4{ text-transform:none; letter-spacing:0; }
.footer-col li{ margin-bottom:.6rem; }
.footer-col a{ color:#cfcfcf; }
.footer-col a:hover{ color:#fff; }
.footer-contact li{ display:flex; align-items:baseline; gap:.55rem; color:#cfcfcf; }
.footer-social{ display:flex; gap:.7rem; margin-top:1.1rem; }
.footer-social a{ width:40px; height:40px; border-radius:10px; background:rgba(255,255,255,.08); display:grid; place-items:center; transition:background .2s var(--ease); }
.footer-social a:hover{ background:rgba(255,255,255,.18); }
.footer-social img{ width:22px; height:22px; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.1); margin-top:clamp(32px,4vw,52px); padding-block:1.4rem; text-align:center; font-size:.85rem; color:#8f8f8f; }

/* ==========================================================================
   18. Inner page header band
   ========================================================================== */
.page-hero{ background:var(--paper); border-bottom:1px solid var(--line); text-align:center; padding-block:clamp(44px,6vw,76px); }
.page-hero .section-title{ font-size:clamp(2rem,5vw,3.1rem); }
.page-hero p{ color:var(--grey); max-width:42em; margin-inline:auto; }

/* Service detail blocks */
.svc-detail{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,52px); align-items:center; }
.svc-detail:nth-child(even) .svc-detail__media{ order:2; }
.svc-detail__media img{ border-radius:var(--radius-lg); box-shadow:var(--shadow); width:100%; aspect-ratio:4/3; object-fit:cover; }
.svc-detail + .svc-detail{ margin-top:clamp(40px,6vw,80px); }

/* FAQ accordion */
.faq{ max-width:820px; margin-inline:auto; }
.faq-item{ border:1px solid var(--line); border-radius:var(--radius); margin-bottom:.8rem; overflow:hidden; background:#fff; }
.faq-q{ width:100%; text-align:start; background:none; border:0; padding:1.15rem 1.3rem; font-family:var(--font-head); font-weight:600; font-size:1.08rem; color:var(--ink); display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.faq-q .ic{ flex:0 0 auto; width:1.1em; height:1.1em; position:relative; }
.faq-q .ic::before,.faq-q .ic::after{ content:""; position:absolute; inset-block:0; margin:auto; background:var(--blue); }
.faq-q .ic::before{ inset-inline:0; height:2.5px; top:0; bottom:0; }
.faq-q .ic::after{ inset-block:0; width:2.5px; left:0; right:0; margin-inline:auto; transition:transform .2s var(--ease); }
.faq-item.open .faq-q .ic::after{ transform:scaleY(0); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .3s var(--ease); }
.faq-a__inner{ padding:0 1.3rem 1.2rem; color:var(--grey); }

/* Contact page cards */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,52px); align-items:start; }
.contact-actions{ display:grid; gap:1rem; }
.contact-info{ display:grid; gap:1.4rem; }
.info-block h3{ font-size:1rem; text-transform:uppercase; color:var(--blue); margin-bottom:.3em; }
:root[lang="ar"] .info-block h3{ text-transform:none; }
.info-block p{ margin:0; color:var(--ink); }

/* ==========================================================================
   19. Links (Linktree) page
   ========================================================================== */
.links-page{ min-height:100vh; background:var(--paper); display:flex; flex-direction:column; align-items:center; padding:clamp(32px,6vw,64px) var(--gutter) 60px; }
.links-page__top{ position:absolute; top:16px; inset-inline-end:16px; }
.links-card{ width:100%; max-width:480px; text-align:center; }
.links-card__logo{ height:92px; margin-inline:auto 0; margin-bottom:1rem; }
.links-card__logo img{ height:92px; width:auto; margin-inline:auto; }
.links-card__tagline{ color:var(--grey); font-size:.95rem; margin-bottom:2rem; }
.link-btns{ display:grid; gap:.85rem; }
.link-btn{
  display:flex; align-items:center; justify-content:center; gap:.6rem;
  padding:1.05em 1.2em; border-radius:var(--radius); font-family:var(--font-head);
  font-weight:600; font-size:1rem; text-transform:uppercase; letter-spacing:.02em;
  border:2px solid var(--blue); background:#fff; color:var(--ink);
  transition:transform .15s var(--ease), box-shadow .2s var(--ease), border-color .15s var(--ease);
}
:root[lang="ar"] .link-btn{ text-transform:none; letter-spacing:0; }
.link-btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow); color:var(--ink); }
.link-btn img{ width:1.35em; height:1.35em; }
.link-btn.is-blue{ background:var(--blue); color:#fff; border-color:var(--blue); }
.link-btn.is-blue:hover{ background:var(--blue-dark); color:#fff; }
.link-btn.is-wa{ background:var(--wa); color:#062a15; border-color:var(--wa); }
.link-btn.is-wa:hover{ background:#1fb457; color:#062a15; }
/* White buttons get a colored border so they read clearly against the page —
   Instagram gets its brand purple instead of the default blue. */
.link-btn.is-instagram{ border-color:var(--ig-purple); }
.link-btn.is-instagram:hover{ background:var(--ig-purple); color:#fff; }

/* ==========================================================================
   19b. Scroll-reveal — one-shot via IntersectionObserver in main.js.
   Default is a vertical translate+fade; .reveal-x is the RTL-aware horizontal
   variant for elements that read better sliding in from the start edge.
   ========================================================================== */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .5s var(--ease), transform .5s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }
.reveal-x{ opacity:0; transform:translateX(-26px); transition:opacity .5s var(--ease), transform .5s var(--ease); }
.reveal-x.is-visible{ opacity:1; transform:none; }
:root[dir="rtl"] .reveal-x{ transform:translateX(26px); }
@media (prefers-reduced-motion:reduce){
  .reveal,.reveal-x{ opacity:1; transform:none; transition:none; }
}

/* ==========================================================================
   20. Utilities
   ========================================================================== */
.center{ text-align:center; }
.mt-lg{ margin-top:clamp(28px,4vw,44px); }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.no-scroll{ overflow:hidden; }

/* ==========================================================================
   21. Responsive
   ========================================================================== */
@media (max-width:1024px){
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .why-grid{ grid-template-columns:repeat(2,1fr); }
  .gallery-grid{ grid-template-columns:repeat(3,1fr); }
  .areas__grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:860px){
  :root{ --header-h:64px; }
  .hero__inner{ grid-template-columns:1fr; row-gap:24px; }
  .hero__media{ order:-1; min-height:260px; }
  .hero__media::after{ display:none; }
  .hero__title{ font-size:clamp(2.4rem,9vw,3.1rem); font-weight:400; line-height:1.08; }
  /* :root[lang="ar"] h1 (specificity 0,1,1) would otherwise beat the rule above (0,1,0)
     and silently fall back to line-height:1.4 — set it explicitly so Arabic gets the
     same intentional heavy/tight mobile treatment instead of the generic heading default. */
  :root[lang="ar"] .hero__title{ font-weight:900; line-height:1.3; }
  .primary-nav,.header-actions .lang-dd,.header-actions .btn{ display:none; }
  .nav-toggle{ display:grid; }

  /* Mobile header stacks top to bottom: logo+text, hamburger, quote button, work button —
     all centered. .primary-nav is absolutely positioned as a drawer so it doesn't add a row. */
  .header-inner{ flex-direction:column; align-items:center; padding-block:.85rem; }
  .header-actions{ margin-inline-start:0; }

  /* Logo + brand name + tagline are the most prominent element in the mobile header. */
  .brand{ gap:.65rem; }
  .brand__logo{ height:64px; }
  .brand__name{ font-size:clamp(1.35rem,6vw,1.75rem); }
  .brand__slogan{ font-size:clamp(.82rem,3.8vw,1rem); white-space:normal; line-height:1.25; max-width:56vw; }

  .mobile-cta{ display:flex; flex-direction:column; width:100%; gap:.6rem; margin-top:.7rem; }
  .mobile-cta .btn{ width:100%; }
  /* Condense to just logo + hamburger + quote button once scrolled — the quote button itself
     must persist, only "See Our Work" drops away to save space. */
  .site-header.scrolled .mobile-cta{ margin-top:.5rem; }
  .site-header.scrolled .mobile-cta .btn-outline-red{ display:none; }

  /* Mobile nav: a compact dropdown centered under the hamburger (not a full-screen drawer).
     Slides in from the reading-direction start edge — --drawer-slide flips sign in RTL. */
  .primary-nav.drawer{
    --drawer-slide:-28px;
    display:block; position:absolute; inset-block-start:100%; left:50%;
    width:min(90vw,360px); max-height:calc(100vh - var(--header-h) - 24px);
    margin-block-start:10px; background:#fff; z-index:895;
    padding:1rem 1.1rem 1.2rem; border-radius:var(--radius-lg);
    border:1px solid var(--line); box-shadow:var(--shadow-lg); overflow-y:auto;
    transform:translate(calc(-50% + var(--drawer-slide)),0); opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
  }
  :root[dir="rtl"] .primary-nav.drawer{ --drawer-slide:28px; }
  .primary-nav.drawer.open{ transform:translate(-50%,0); opacity:1; visibility:visible; pointer-events:auto; }
  .primary-nav.drawer ul{ flex-direction:column; align-items:stretch; gap:0; }
  .primary-nav.drawer li{ border-bottom:1px solid var(--line); }
  .primary-nav.drawer li:last-child{ border-bottom:0; }
  .primary-nav.drawer a{ display:block; padding:.85rem .3rem; font-size:1.15rem; }
  .primary-nav.drawer a::after{ display:none; }
  .drawer-actions{ margin-top:.9rem; display:grid; gap:.7rem; }
  .drawer-actions .lang-dd,.drawer-actions .btn{ display:flex; }
  .drawer-actions .lang-dd__btn{ width:100%; justify-content:center; }

  .svc-detail,.svc-detail:nth-child(even) .svc-detail__media{ grid-template-columns:1fr; order:0; }
  .svc-detail__media{ order:-1 !important; }
  .contact-grid{ grid-template-columns:1fr; }
  .footer-social a{ } /* WhatsApp/IG/FB icons never flipped in RTL */

  /* Direct-dial phone FAB replaces the "open contact modal" FAB on mobile. */
  #contactFab{ display:none; }
  .fab-stack{
    display:flex; flex-direction:column; align-items:center; gap:12px;
    position:fixed; inset-block-end:20px; inset-inline-end:16px; z-index:850;
  }
  .fab-stack .fab{ position:static; width:68px; height:68px; }
  .fab-stack .fab svg{ width:30px; height:30px; }
}
/* Top hours bar — stacked block matching client reference (mobile only), same blue
   as desktop. Desktop bar (single row, phone/areas/status pill) is untouched above this breakpoint. */
@media (max-width:768px){
  .topbar{ font-size:.92rem; }
  .topbar .wrap{
    flex-direction:column; align-items:center; justify-content:center;
    gap:.55rem; padding-block:20px 16px;
  }
  .topbar__hours{ flex-direction:column; align-items:center; gap:.55rem; }
  .topbar__hours .sep{ display:none; }
  .topbar__line,.topbar__phone,.topbar__email{
    display:inline-flex; align-items:center; gap:.5rem;
  }
  .topbar__icon{ display:inline-flex; }
  /* Generous tap target for the two clickable lines. */
  .topbar__phone,.topbar__email{ padding:.3rem .5rem; }
  .status-pill{ display:none; }
}
@media (max-width:640px){
  .grid-4,.grid-3,.grid-2,.why-grid,.ba-grid,.areas__cols{ grid-template-columns:1fr; }
  .gallery-grid,.gallery-grid.cols-3{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr; }
  .fab{ width:54px; height:54px; inset-block-end:16px; inset-inline-end:16px; }
}

/* ==========================================================================
   Hero slider — auto-rotating crossfade (replaces the single hero image)
   ========================================================================== */
.hero-slider{ position:absolute; inset:0; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg); z-index:1; }
.hero-slider__track{ display:flex; direction:ltr; width:100%; height:100%; transition:transform .8s var(--ease); will-change:transform; }
.hero__media .hero-slide{ position:relative; flex:0 0 100%; width:100%; height:100%; object-fit:cover; border-radius:0; box-shadow:none; }
@media (prefers-reduced-motion:reduce){ .hero-slider__track{ transition:none; } }

/* ==========================================================================
   Service-area ON/OFF toggle (Ontario = red · Quebec = blue)
   ========================================================================== */
.areas__switcher{ align-self:start; }
.area-switch{ position:relative; display:grid; grid-template-columns:1fr 1fr; max-width:360px; margin:0 0 1.5rem; padding:5px; background:#fff; border:2px solid var(--line); border-radius:999px; box-shadow:var(--shadow-sm); transition:border-color .32s var(--ease); }
[data-area-switch][data-active="on"] .area-switch{ border-color:var(--red); }
[data-area-switch][data-active="qc"] .area-switch{ border-color:var(--blue); }
.area-switch__knob{ position:absolute; inset-block:5px; inset-inline-start:5px; width:calc(50% - 5px); border-radius:999px; background:var(--red); box-shadow:0 5px 14px rgba(227,6,19,.35); transition:transform .32s var(--ease),background .32s var(--ease),box-shadow .32s var(--ease); z-index:0; }
[data-area-switch][data-active="qc"] .area-switch__knob{ transform:translateX(100%); background:var(--blue); box-shadow:0 5px 14px rgba(3,64,162,.35); }
.area-switch__side{ position:relative; z-index:1; display:flex; align-items:center; justify-content:center; gap:.5rem; padding:.72rem .8rem; background:transparent; border:0; border-radius:999px; font-family:var(--font-head); font-weight:600; font-size:1.02rem; text-transform:uppercase; letter-spacing:.02em; color:var(--grey); transition:color .3s var(--ease); }
:root[lang="ar"] .area-switch__side{ text-transform:none; font-weight:700; }
[data-area-switch][data-active="on"] .area-switch__side--on,
[data-area-switch][data-active="qc"] .area-switch__side--qc{ color:#fff; }
.area-switch__side:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }
.area-switch__flag{ width:26px; height:18px; object-fit:contain; border-radius:2px; box-shadow:0 0 0 1px rgba(0,0,0,.14); flex:0 0 auto; }

.area-panel{ animation:areaFade .35s var(--ease); }
.area-panel[hidden]{ display:none; }
.area-panel ul{ columns:2; column-gap:1.8rem; }
.area-panel li{ break-inside:avoid; }
.area-panel--on h3{ border-bottom-color:var(--red); }
.area-panel--on li.anchor{ color:var(--red); }
.area-panel--on li::before{ background:var(--red); }
.area-panel--qc h3{ border-bottom-color:var(--blue); }
.area-panel--qc li.anchor{ color:var(--blue); }
.area-panel--qc li::before{ background:var(--blue); }
@keyframes areaFade{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
/* Phone: keep the city list two columns so it doesn't force a long scroll */
@media (max-width:640px){ .area-panel ul{ columns:2; column-gap:.9rem; } .area-panel li{ font-size:.86rem; gap:.4rem; } .area-switch{ max-width:none; } }

/* Green flag for the Arabic language option (replaces the KSA flag emoji) */
.lang-flag--ar{ display:block; border-radius:3px; }

/* Footer logo — white badge so the white-background mark reads on the dark footer */
.footer-brand__logo{ width:84px; height:84px; border-radius:14px; background:#fff; padding:7px; box-shadow:0 6px 18px rgba(0,0,0,.28); margin-bottom:.9rem; }