/* =================================================================
   MELLOUSSA ASSISTANCE — Brand system
   Dépannage / remorquage 24/7 · Tanger
   Palette: warm Onyx ink / ivory / premium ember-orange
   (token names keep the "navy-" prefix; values are now warm charcoal)
   ================================================================= */

/* ── Self-hosted web fonts (was: render-blocking fonts.googleapis.com) ──
   Identical families/weights to the previous Google Fonts request, served
   same-origin as woff2 with font-display:swap. Subsets: latin, latin-ext, arabic. */
@font-face{font-family:'Public Sans';font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/public-sans-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/public-sans-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Sora';font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/sora-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Sora';font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/sora-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/tajawal-400-arabic.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/tajawal-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/tajawal-500-arabic.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/tajawal-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/tajawal-700-arabic.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/tajawal-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/tajawal-800-arabic.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/tajawal-800-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}


:root{
  /* ---- Onyx / ink scale (primary dark surfaces, warm-neutral) ---- */
  --navy-950:#141311;
  --navy-900:#1b1a17;
  --navy-800:#23211d;   /* primary dark surface — warm ink/onyx */
  --navy-700:#2f2c27;
  --navy-600:#3d3933;
  --navy-500:#544f46;
  --navy-400:#8a8276;   /* muted accent / hover border on light */

  /* ---- Ink + neutrals (warm-tinted greige) ---- */
  --ink:#21201d;        /* headings on light — warm near-black */
  --slate-700:#3f3c37;
  --slate-600:#57534c;  /* body text on light */
  --slate-500:#736e66;
  --slate-400:#9d978c;
  --line:#e8e5df;       /* hairlines on light */
  --line-soft:#f1efe9;

  /* ---- Surfaces ---- */
  --bg:#ffffff;
  --bg-soft:#f7f5f1;    /* alt section bg — warm ivory */
  --bg-softer:#fbfaf7;

  /* ---- Orange accent (premium) ---- */
  --orange-700:#c9530f;
  --orange-600:#e35f12;
  --orange-500:#f4731f; /* primary accent */
  --orange-400:#ff8c43;
  --orange-tint:#fff2e9;
  --orange-tint-2:#ffe7d6;

  /* ---- On-dark text (on warm ink) ---- */
  --on-dark:#efece6;
  --on-dark-dim:#aaa49a;
  --on-dark-faint:#6f6a60;

  /* ---- Geometry ---- */
  --r-xs:8px;
  --r-sm:12px;
  --r:16px;
  --r-lg:22px;
  --r-xl:30px;
  --r-pill:999px;

  /* ---- Shadows ---- */
  --sh-sm:0 1px 2px rgba(26,22,16,.06), 0 1px 3px rgba(26,22,16,.05);
  --sh:0 4px 14px rgba(26,22,16,.07), 0 2px 6px rgba(26,22,16,.05);
  --sh-md:0 12px 34px rgba(26,22,16,.10), 0 4px 12px rgba(26,22,16,.06);
  --sh-lg:0 28px 64px rgba(26,22,16,.16), 0 10px 24px rgba(26,22,16,.08);
  --sh-orange:0 12px 30px rgba(227,95,18,.32);

  /* ---- Type ---- */
  --font-display:'Sora',system-ui,sans-serif;
  --font-body:'Public Sans',system-ui,sans-serif;
  --font-ar:'Tajawal',system-ui,sans-serif;

  --maxw:1200px;
  --pad:clamp(20px,5vw,40px);
}

*,*::before,*::after{box-sizing:border-box;}
/* NOTE: native `scroll-behavior:smooth` removed on purpose — it fights Lenis
   and makes the inertia stutter. Smooth scroll is now JS-driven (see site.js). */
html{-webkit-text-size-adjust:100%;}

/* ---- Lenis smooth scroll (official Studio Freight base rules) ---- */
html.lenis,html.lenis body{height:auto;}
.lenis.lenis-smooth{scroll-behavior:auto !important;}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain;}
.lenis.lenis-stopped{overflow:hidden;}
.lenis.lenis-smooth iframe{pointer-events:none;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--slate-600);
  background:var(--bg);
  line-height:1.6;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
:lang(ar),[dir="rtl"]{font-family:var(--font-ar);}
[dir="rtl"]{letter-spacing:0;}

img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--ink);line-height:1.08;
  margin:0;font-weight:700;letter-spacing:-.02em;text-wrap:balance;}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4{
  font-family:var(--font-ar);letter-spacing:0;font-weight:800;}
p{margin:0;}

/* ---- Layout helpers ---- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);}
.section{padding-block:clamp(64px,9vw,116px);}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-body);font-weight:700;
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--orange-600);
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--orange-500);border-radius:2px;}
[dir="rtl"] .eyebrow{letter-spacing:0;}
.section-head{max-width:660px;margin-bottom:clamp(36px,5vw,56px);}
.section-head h2{
  font-size:clamp(28px,4.4vw,46px);margin-top:14px;color:var(--ink);
}
.section-head .lead{margin-top:18px;font-size:clamp(16px,2vw,19px);color:var(--slate-500);}
.section--dark{background:var(--navy-800);color:var(--on-dark);}
.section--dark h2,.section--dark h3{color:#fff;}
.section--soft{background:var(--bg-soft);}

/* ---- Buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-display);font-weight:600;font-size:16px;
  padding:15px 26px;border-radius:var(--r-pill);border:1.5px solid transparent;
  cursor:pointer;
  white-space:nowrap;letter-spacing:-.01em;line-height:1;
}
[dir="rtl"] .btn{font-family:var(--font-ar);}
.btn svg{width:19px;height:19px;}

/* Primary — orange */
.btn-primary{background:var(--orange-500);color:#fff;box-shadow:var(--sh-orange);}

/* WhatsApp — green */
.btn-whatsapp{background:#1faf54;color:#fff;box-shadow:0 12px 30px rgba(31,175,84,.3);}

/* Ghost — on dark hero */
.btn-ghost-light{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.22);backdrop-filter:blur(6px);}

/* Dark */
.btn-dark{background:var(--navy-800);color:#fff;}

/* Outline */
.btn-outline{background:#fff;color:var(--ink);border-color:var(--line);box-shadow:var(--sh-sm);}

.btn-lg{padding:18px 32px;font-size:17px;}
.btn-block{width:100%;}

/* ---- Pills / chips ---- */
.tag{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 14px;border-radius:var(--r-pill);font-size:13.5px;font-weight:600;
  background:var(--orange-tint);color:var(--orange-700);
}
.tag-dark{background:rgba(255,255,255,.08);color:var(--on-dark);border:1px solid rgba(255,255,255,.14);}
.tag-line{background:#fff;border:1px solid var(--line);color:var(--slate-600);}

/* live dot */
/* Live dot is static by default. The `pulse` animation is applied ONLY on
   desktop ≥768px + motion-welcome (see the gated rule at the foot of this file)
   → on mobile the dot stays lit but still, sparing the 4%-battery scenario. */
.dot-live{width:9px;height:9px;border-radius:50%;background:#34d27b;box-shadow:0 0 0 0 rgba(52,210,123,.55);
  flex:none;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(52,210,123,.5);}70%{box-shadow:0 0 0 9px rgba(52,210,123,0);}100%{box-shadow:0 0 0 0 rgba(52,210,123,0);}}

/* =================================================================
   HEADER
   ================================================================= */
.site-header{
  position:sticky;top:0;z-index:60;
  transition:background .3s ease,box-shadow .3s ease,border-color .3s;
  border-bottom:1px solid transparent;
}
.site-header.scrolled{background:rgba(255,255,255,.86);backdrop-filter:blur(16px) saturate(160%);
  border-bottom-color:var(--line);box-shadow:var(--sh-sm);}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;height:74px;}
.nav-links{display:flex;align-items:center;gap:30px;list-style:none;margin:0;padding:0;}
.nav-links a{font-weight:600;font-size:15px;color:var(--slate-700);transition:color .15s;position:relative;}
.site-header:not(.scrolled) .nav-links a{color:rgba(255,255,255,.86);}
.site-header:not(.scrolled) .nav-links a:hover{color:#fff;}
.nav-links a:hover{color:var(--orange-600);}
.nav-right{display:flex;align-items:center;gap:14px;}

/* Logo */
.logo{display:inline-flex;align-items:center;gap:11px;}
.logo-mark{
  width:42px;height:42px;border-radius:12px;flex:none;position:relative;
  background:linear-gradient(155deg,var(--navy-700),var(--navy-900));
  display:grid;place-items:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),var(--sh-sm);
  overflow:hidden;
}
.logo-mark::after{content:"";position:absolute;top:0;inset-inline-end:0;width:15px;height:15px;
  background:var(--orange-500);clip-path:polygon(100% 0,0 0,100% 100%);}
.logo-mark span{font-family:var(--font-display);font-weight:800;color:#fff;font-size:21px;
  position:relative;z-index:1;line-height:1;}
.logo-text{display:flex;flex-direction:column;line-height:1.05;}
.logo-text b{font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--ink);letter-spacing:-.02em;}
.site-header:not(.scrolled) .logo-text b{color:#fff;}
.logo-text small{font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--orange-600);}
.site-header:not(.scrolled) .logo-text small{color:var(--orange-400);}

/* Language switch */
.lang-switch{display:inline-flex;align-items:center;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);border-radius:var(--r-pill);padding:3px;gap:2px;}
.site-header.scrolled .lang-switch{background:var(--bg-soft);border-color:var(--line);}
.lang-switch button{
  border:none;background:transparent;color:rgba(255,255,255,.7);
  font-weight:700;font-size:12.5px;padding:5px 11px;border-radius:var(--r-pill);
  transition:all .15s;letter-spacing:.02em;
}
.site-header.scrolled .lang-switch button{color:var(--slate-500);}
.lang-switch button.active{background:#fff;color:var(--navy-800);box-shadow:var(--sh-sm);}
.site-header.scrolled .lang-switch button.active{background:var(--navy-800);color:#fff;}

.nav-call{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-display);
  font-weight:700;font-size:15px;color:#fff;background:var(--orange-500);
  padding:11px 18px;border-radius:var(--r-pill);box-shadow:var(--sh-orange);white-space:nowrap;}
.nav-call svg{width:17px;height:17px;}

.menu-toggle{display:none;background:transparent;border:none;padding:8px;color:inherit;}
.site-header:not(.scrolled) .menu-toggle{color:#fff;}
.site-header.scrolled .menu-toggle{color:var(--ink);}

/* =================================================================
   HERO
   ================================================================= */
.hero{position:relative;background:var(--navy-800);color:var(--on-dark);overflow:hidden;
  margin-top:-74px;padding-top:74px;}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden;}
.hero-bg::before{content:"";position:absolute;width:760px;height:760px;border-radius:50%;
  top:-280px;inset-inline-end:-200px;
  background:radial-gradient(circle,rgba(244,115,31,.22),transparent 62%);}
.hero-bg::after{content:"";position:absolute;width:620px;height:620px;border-radius:50%;
  bottom:-300px;inset-inline-start:-160px;
  background:radial-gradient(circle,rgba(150,120,84,.42),transparent 60%);}
.hero-grid-lines{position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:54px 54px;mask-image:radial-gradient(ellipse 80% 75% at 50% 35%,#000,transparent);}
.hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(30px,5vw,68px);align-items:center;
  padding-block:clamp(56px,8vw,96px);}
.hero-badges{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px;}
.hero h1{color:#fff;font-size:clamp(36px,5.6vw,64px);letter-spacing:-.03em;}
.hero h1 .accent{color:var(--orange-400);}
.hero .sub{margin-top:22px;font-size:clamp(17px,2.2vw,21px);color:var(--on-dark-dim);max-width:560px;}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px;}
.hero-trust{display:flex;flex-wrap:wrap;gap:26px;margin-top:38px;padding-top:30px;
  border-top:1px solid rgba(255,255,255,.1);}
.hero-trust .ht{display:flex;flex-direction:column;gap:2px;}
.hero-trust .ht b{font-family:var(--font-display);font-size:26px;color:#fff;font-weight:700;line-height:1;}
.hero-trust .ht span{font-size:13px;color:var(--on-dark-dim);}
.hero-trust .stars{color:var(--orange-400);letter-spacing:2px;font-size:15px;}

/* Hero media card */
.hero-media{position:relative;}
.hero-photo{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-lg);
  aspect-ratio:3/2;
  width:100%;height:auto;display:block;object-fit:cover;object-position:center;}
.hero-float{position:absolute;background:#fff;border-radius:var(--r);box-shadow:var(--sh-lg);
  padding:14px 16px;display:flex;align-items:center;gap:12px;color:var(--ink);}
.hero-float .fi{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;flex:none;}
.hero-float small{display:block;font-size:12px;color:var(--slate-500);font-weight:600;}
.hero-float b{font-family:var(--font-display);font-size:16px;color:var(--ink);}
.hero-float--tl{top:24px;inset-inline-start:-26px;}
.hero-float--br{bottom:30px;inset-inline-end:-22px;}

/* image placeholder */
.ph{position:relative;background:
    repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 12px,rgba(255,255,255,.02) 12px 24px),
    var(--navy-700);
  display:grid;place-items:center;color:var(--on-dark-dim);}
.ph.light{background:
    repeating-linear-gradient(135deg,#efece6 0 12px,#f7f5f1 12px 24px);color:var(--slate-400);}
.ph .ph-label{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:12px;
  letter-spacing:.04em;padding:7px 12px;border:1px dashed currentColor;border-radius:8px;
  background:rgba(0,0,0,.12);text-align:center;max-width:80%;}
.ph.light .ph-label{background:rgba(255,255,255,.6);}

/* trust strip / logos bar */
.proof-strip{background:var(--navy-900);color:var(--on-dark-dim);}
.proof-strip .wrap{display:flex;align-items:center;justify-content:space-between;gap:30px;
  flex-wrap:wrap;padding-block:22px;}
.proof-strip .ps-item{display:flex;align-items:center;gap:11px;font-size:14.5px;font-weight:600;color:var(--on-dark);}
.proof-strip .ps-item svg{width:21px;height:21px;color:var(--orange-400);flex:none;}

/* =================================================================
   SERVICES
   ================================================================= */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.svc-card{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:30px 28px 28px;transition:transform .25s,box-shadow .25s,border-color .25s;
  overflow:hidden;display:flex;flex-direction:column;
}
.svc-card::before{content:"";position:absolute;inset-inline-start:0;top:0;height:100%;width:4px;
  background:var(--orange-500);transform:scaleY(0);transform-origin:top;transition:transform .3s;}
.svc-card:hover{transform:translateY(-6px);box-shadow:var(--sh-md);border-color:transparent;}
.svc-card:hover::before{transform:scaleY(1);}
.svc-ico{width:54px;height:54px;border-radius:15px;display:grid;place-items:center;
  background:var(--orange-tint);color:var(--orange-600);margin-bottom:20px;}
.svc-ico svg{width:27px;height:27px;}
.svc-card h3{font-size:21px;margin-bottom:9px;}
.svc-card p{font-size:15px;color:var(--slate-500);flex:1;}
.svc-link{display:inline-flex;align-items:center;gap:7px;margin-top:18px;font-weight:700;
  font-size:14.5px;color:var(--navy-500);font-family:var(--font-display);}
[dir="rtl"] .svc-link{font-family:var(--font-ar);}
.svc-link svg{width:16px;height:16px;transition:transform .2s;}
.svc-card:hover .svc-link svg{transform:translateX(4px);}
[dir="rtl"] .svc-card:hover .svc-link svg{transform:translateX(-4px) scaleX(-1);}
.svc-card.is-urgent{background:var(--navy-800);border-color:transparent;color:var(--on-dark);
  grid-column:span 1;}
.svc-card.is-urgent h3{color:#fff;}
.svc-card.is-urgent p{color:var(--on-dark-dim);}
.svc-card.is-urgent .svc-ico{background:var(--orange-500);color:#fff;}
.svc-card.is-urgent .svc-link{color:var(--orange-400);}
.svc-card.is-urgent::before{background:var(--orange-400);}

/* =================================================================
   EMERGENCY band
   ================================================================= */
.emergency{position:relative;background:
    linear-gradient(120deg,var(--navy-900),var(--navy-700));color:var(--on-dark);overflow:hidden;}
.emergency::before{content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 85% 20%,rgba(244,115,31,.28),transparent 45%);}
.emergency .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.1fr .9fr;
  gap:48px;align-items:center;}
.emergency h2{font-size:clamp(28px,4.2vw,44px);color:#fff;}
.emergency .lead{margin-top:18px;color:var(--on-dark-dim);font-size:18px;max-width:520px;}
.emergency-steps{display:flex;flex-direction:column;gap:18px;margin-top:32px;}
.estep{display:flex;gap:16px;align-items:flex-start;}
.estep .num{width:38px;height:38px;border-radius:11px;flex:none;display:grid;place-items:center;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  font-family:var(--font-display);font-weight:700;color:var(--orange-400);}
.estep b{color:#fff;font-family:var(--font-display);font-size:17px;display:block;margin-bottom:2px;}
.estep span{color:var(--on-dark-dim);font-size:15px;}
.emergency-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-xl);padding:34px;backdrop-filter:blur(8px);}
.emergency-card .big{font-family:var(--font-display);font-weight:800;font-size:clamp(30px,5vw,42px);
  color:#fff;letter-spacing:-.02em;line-height:1;}
.emergency-card .big span{color:var(--orange-400);}
.eta-row{display:flex;gap:14px;margin:24px 0;}
.eta-chip{flex:1;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r);padding:16px;text-align:center;}
.eta-chip b{display:block;font-family:var(--font-display);font-size:24px;color:#fff;}
.eta-chip small{font-size:12.5px;color:var(--on-dark-dim);}

/* =================================================================
   WHY US
   ================================================================= */
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.why-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;
  transition:transform .25s,box-shadow .25s;}
.why-card:hover{transform:translateY(-5px);box-shadow:var(--sh-md);}
.why-ico{width:50px;height:50px;border-radius:14px;background:var(--navy-800);color:var(--orange-400);
  display:grid;place-items:center;margin-bottom:18px;}
.why-ico svg{width:25px;height:25px;}
.why-card h3{font-size:18px;margin-bottom:8px;}
.why-card p{font-size:14.5px;color:var(--slate-500);}

/* =================================================================
   TESTIMONIALS
   ================================================================= */
.tst-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.tst-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:30px;
  display:flex;flex-direction:column;gap:18px;box-shadow:var(--sh-sm);}
.tst-card .stars{color:var(--orange-500);letter-spacing:2px;font-size:16px;}
.tst-card blockquote{margin:0;font-size:16.5px;color:var(--slate-700);line-height:1.62;flex:1;font-weight:500;}
.tst-who{display:flex;align-items:center;gap:13px;border-top:1px solid var(--line-soft);padding-top:18px;}
.tst-av{width:44px;height:44px;border-radius:50%;background:var(--navy-800);color:#fff;
  display:grid;place-items:center;font-family:var(--font-display);font-weight:700;flex:none;}
.tst-who b{display:block;color:var(--ink);font-size:15px;font-family:var(--font-display);}
.tst-who span{font-size:13px;color:var(--slate-400);}
.rating-summary{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:42px;
  background:var(--navy-800);color:#fff;border-radius:var(--r-lg);padding:24px 30px;}
.rating-summary .score{font-family:var(--font-display);font-weight:800;font-size:48px;line-height:1;}
.rating-summary .stars{color:var(--orange-400);font-size:20px;letter-spacing:3px;}

/* =================================================================
   ZONES / Local SEO
   ================================================================= */
.zones{position:relative;}
.zones-inner{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:center;}
.zones-map{position:relative;border-radius:var(--r-xl);overflow:hidden;aspect-ratio:1/1;
  box-shadow:var(--sh-md);border:1px solid var(--line);}
.zone-pins{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px;}
.zone-pin{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-pill);padding:9px 15px;font-size:14px;font-weight:600;color:var(--slate-700);
  transition:all .18s;}
.zone-pin svg{width:14px;height:14px;color:var(--orange-500);flex:none;}
.zone-pin:hover{border-color:var(--orange-500);color:var(--orange-700);background:var(--orange-tint);transform:translateY(-2px);}

/* =================================================================
   FAQ
   ================================================================= */
.faq-list{max-width:820px;margin-inline:auto;}
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{width:100%;background:none;border:none;text-align:start;padding:24px 4px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  font-family:var(--font-display);font-weight:600;font-size:18.5px;color:var(--ink);}
[dir="rtl"] .faq-q{font-family:var(--font-ar);}
.faq-q .chev{width:34px;height:34px;border-radius:50%;background:var(--bg-soft);flex:none;
  display:grid;place-items:center;transition:transform .3s,background .2s;color:var(--navy-500);}
.faq-q .chev svg{width:18px;height:18px;}
.faq-item.open .faq-q .chev{transform:rotate(180deg);background:var(--orange-500);color:#fff;}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease;}
.faq-a p{padding:0 4px 24px;color:var(--slate-500);font-size:16px;max-width:90%;}

/* =================================================================
   CONTACT
   ================================================================= */
.contact-inner{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:stretch;}
.contact-info{display:flex;flex-direction:column;gap:14px;}
.ci-card{display:flex;gap:16px;align-items:center;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:20px 22px;transition:all .2s;}
.ci-card:hover{border-color:var(--orange-500);box-shadow:var(--sh-sm);}
.ci-ico{width:48px;height:48px;border-radius:13px;background:var(--orange-tint);color:var(--orange-600);
  display:grid;place-items:center;flex:none;}
.ci-ico svg{width:23px;height:23px;}
.ci-card small{font-size:13px;color:var(--slate-400);font-weight:600;display:block;}
.ci-card b{font-family:var(--font-display);font-size:18px;color:var(--ink);}
.contact-form{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);
  padding:34px;box-shadow:var(--sh-md);}
.field{margin-bottom:16px;}
.field label{display:block;font-size:13.5px;font-weight:700;color:var(--slate-700);margin-bottom:7px;}
.field input,.field select,.field textarea{
  width:100%;padding:13px 15px;border:1.5px solid var(--line);border-radius:var(--r-sm);
  font-family:inherit;font-size:15.5px;color:var(--ink);background:var(--bg-softer);transition:border-color .15s,box-shadow .15s;}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--orange-500);
  box-shadow:0 0 0 3px rgba(244,115,31,.14);background:#fff;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}

/* =================================================================
   FOOTER
   ================================================================= */
.site-footer{background:var(--navy-950);color:var(--on-dark-dim);padding-block:64px 30px;}
.footer-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:40px;
  padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.08);}
.footer-top h4{color:#fff;font-size:14px;letter-spacing:.06em;text-transform:uppercase;
  margin-bottom:18px;font-family:var(--font-display);}
[dir="rtl"] .footer-top h4{letter-spacing:0;font-family:var(--font-ar);}
.footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;}
.footer-col a{font-size:14.5px;color:var(--on-dark-dim);transition:color .15s;}
.footer-col a:hover{color:var(--orange-400);}
.footer-brand .logo-text b{color:#fff;}
.footer-brand p{margin-top:16px;font-size:14.5px;max-width:300px;line-height:1.65;}
.footer-social{display:flex;gap:10px;margin-top:20px;}
.footer-social a{width:40px;height:40px;border-radius:11px;background:rgba(255,255,255,.06);
  display:grid;place-items:center;color:var(--on-dark);transition:all .2s;}
.footer-social a:hover{background:var(--orange-500);color:#fff;transform:translateY(-2px);}
.footer-social svg{width:19px;height:19px;}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:18px;
  padding-top:26px;flex-wrap:wrap;font-size:13.5px;}

/* =================================================================
   MOBILE STICKY ACTION BAR
   ================================================================= */
.mobile-bar{display:none;position:fixed;bottom:0;inset-inline:0;z-index:70;
  background:rgba(255,255,255,.92);backdrop-filter:blur(14px);
  border-top:1px solid var(--line);padding:10px 14px;gap:10px;
  box-shadow:0 -6px 24px rgba(26,22,16,.1);}
.mobile-bar .btn{flex:1;padding:14px;font-size:15px;}

/* mobile menu */
.mobile-menu{position:fixed;inset:0;z-index:99999;background:var(--navy-900);color:#fff;
  display:flex;flex-direction:column;padding:24px var(--pad);transform:translateY(-100%);
  transition:transform .35s cubic-bezier(.4,0,.2,1);overflow-y:auto;}
.mobile-menu.open{transform:translateY(0);}
.mobile-menu .mm-head{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:28px;flex-shrink:0;
}
.mobile-menu .mm-head-actions{display:flex;align-items:center;gap:8px;}
.mobile-menu .mm-head .lang-switch{
  background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.16);gap:1px;
}
.mobile-menu .mm-head .lang-switch button{
  color:rgba(255,255,255,.6);font-size:12px;padding:5px 10px;
}
.mobile-menu .mm-head .lang-switch button.active{
  background:#fff;color:var(--ink);box-shadow:none;
}
.mobile-menu .mm-close{
  background:rgba(255,255,255,.08);border:none;color:#fff;width:42px;height:42px;
  border-radius:12px;display:grid;place-items:center;flex:none;
}
.mobile-menu nav{display:flex;flex-direction:column;gap:0;}
.mobile-menu nav a{
  font-family:var(--font-display);font-weight:600;font-size:19px;color:#fff;
  padding:15px 0;border-bottom:1px solid rgba(255,255,255,.07);
  display:flex;align-items:center;gap:16px;
}
[dir="rtl"] .mobile-menu nav a{font-family:var(--font-ar);}
.mobile-menu nav a:last-child{border-bottom:none;}
.mobile-menu nav a svg{
  width:21px;height:21px;color:var(--orange-500);flex:none;opacity:.9;
}
.mobile-menu nav a:hover{color:var(--orange-400);}
.mobile-menu .mm-stats{
  display:flex;gap:0;margin-top:24px;flex-shrink:0;
  border:1px solid rgba(255,255,255,.09);border-radius:var(--r);overflow:hidden;
}
.mobile-menu .mm-stat{
  flex:1;padding:13px 8px;text-align:center;border-inline-end:1px solid rgba(255,255,255,.09);
}
.mobile-menu .mm-stat:last-child{border-inline-end:none;}
.mobile-menu .mm-stat b{display:block;font-family:var(--font-display);font-size:16px;color:#fff;}
.mobile-menu .mm-stat span{display:block;font-size:10.5px;color:rgba(255,255,255,.45);margin-top:2px;}
.mobile-menu .mm-cta{margin-top:auto;padding-top:20px;display:flex;flex-direction:column;gap:10px;flex-shrink:0;}

/* =================================================================
   GENERIC PAGE HEADER (service / district / strategy)
   ================================================================= */
.page-hero{background:var(--navy-800);color:var(--on-dark);position:relative;overflow:hidden;
  margin-top:-74px;padding-top:74px;}
.page-hero .hero-bg{position:absolute;inset:0;z-index:0;}
.page-hero-inner{position:relative;z-index:2;padding-block:clamp(50px,7vw,82px);}
.breadcrumb{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--on-dark-dim);
  margin-bottom:22px;flex-wrap:wrap;}
.breadcrumb a:hover{color:#fff;}
.breadcrumb svg{width:14px;height:14px;opacity:.6;}
.page-hero h1{color:#fff;font-size:clamp(30px,4.6vw,52px);max-width:760px;}
.page-hero .sub{margin-top:18px;color:var(--on-dark-dim);font-size:clamp(16px,2vw,19px);max-width:620px;}

/* content prose (service/district body) */
.prose{max-width:760px;}
.prose h2{font-size:clamp(24px,3.2vw,34px);margin-top:48px;margin-bottom:16px;}
.prose h3{font-size:21px;margin-top:32px;margin-bottom:10px;}
.prose p{margin-bottom:16px;font-size:17px;color:var(--slate-600);}
.prose ul{margin:0 0 18px;padding-inline-start:4px;list-style:none;display:flex;flex-direction:column;gap:11px;}
.prose ul li{position:relative;padding-inline-start:30px;font-size:16.5px;color:var(--slate-600);}
.prose ul li svg{position:absolute;inset-inline-start:0;top:3px;width:19px;height:19px;color:var(--orange-500);}

.layout-2col{display:grid;grid-template-columns:1fr 340px;gap:48px;align-items:start;}
.sidebar-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;
  box-shadow:var(--sh-sm);position:sticky;top:94px;}
.sidebar-card.dark{background:var(--navy-800);color:var(--on-dark);border-color:transparent;}
.sidebar-card.dark h3{color:#fff;}

/* price / info list */
.info-rows{display:flex;flex-direction:column;gap:0;}
.info-rows .ir{display:flex;justify-content:space-between;gap:14px;padding:13px 0;
  border-bottom:1px solid var(--line-soft);font-size:15px;}
.info-rows .ir:last-child{border-bottom:none;}
.info-rows .ir span{color:var(--slate-500);}
.info-rows .ir b{color:var(--ink);font-family:var(--font-display);font-weight:600;}

/* related links chips */
.link-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;}
.link-chip{display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:14px 16px;
  font-weight:600;font-size:14.5px;color:var(--slate-700);transition:all .18s;}
.link-chip svg{width:16px;height:16px;color:var(--orange-500);flex:none;}
.link-chip:hover{border-color:var(--orange-500);background:var(--orange-tint);transform:translateY(-2px);}

/* =================================================================
   STRATEGY DOC specific
   ================================================================= */
.doc-body{background:var(--bg-soft);}
.doc-toc{position:sticky;top:94px;}
.doc-toc ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;}
.doc-toc a{display:block;padding:9px 14px;border-radius:10px;font-size:14px;font-weight:600;
  color:var(--slate-500);border-inline-start:2px solid transparent;transition:all .15s;}
.doc-toc a:hover{color:var(--ink);background:#fff;}
.doc-toc a.active{color:var(--orange-700);background:var(--orange-tint);}
.doc-section{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(28px,4vw,48px);margin-bottom:24px;scroll-margin-top:94px;}
.doc-section > .eyebrow{margin-bottom:10px;}
.doc-section h2{font-size:clamp(24px,3.4vw,34px);margin-bottom:8px;}
.doc-meta{display:inline-flex;align-items:center;gap:8px;background:var(--navy-800);color:#fff;
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:5px 12px;
  border-radius:var(--r-pill);}

.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:14px;margin-top:8px;}
.swatch{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);}
.swatch .chip{height:78px;}
.swatch .meta{padding:11px 13px;background:#fff;}
.swatch .meta b{display:block;font-family:var(--font-display);font-size:14px;color:var(--ink);}
.swatch .meta code{font-size:12px;color:var(--slate-400);font-family:ui-monospace,monospace;}

.wf{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--bg-softer);}
.wf-row{padding:14px 16px;border-bottom:1px dashed var(--line);font-family:ui-monospace,monospace;
  font-size:12.5px;color:var(--slate-500);display:flex;gap:12px;align-items:center;}
.wf-row:last-child{border-bottom:none;}
.wf-row .wf-tag{background:var(--navy-800);color:#fff;font-size:10.5px;padding:3px 8px;border-radius:6px;
  letter-spacing:.06em;flex:none;font-weight:700;}
.wf-bar{height:10px;border-radius:4px;background:var(--line);}

.callout{display:flex;gap:14px;background:var(--orange-tint);border:1px solid var(--orange-tint-2);
  border-radius:var(--r);padding:18px 20px;margin:18px 0;}
.callout svg{width:22px;height:22px;color:var(--orange-600);flex:none;margin-top:1px;}
.callout p{font-size:15px;color:var(--orange-700);}
.callout b{color:var(--orange-700);}

.hier{font-family:ui-monospace,monospace;font-size:13.5px;line-height:1.9;background:var(--navy-900);
  color:var(--on-dark);border-radius:var(--r);padding:22px 24px;overflow-x:auto;}
.hier .h1c{color:var(--orange-400);font-weight:700;}
.hier .h2c{color:#fff;padding-inline-start:22px;}
.hier .h3c{color:var(--on-dark-dim);padding-inline-start:44px;}
.hier .kw{color:#7fd4a0;}

.doc-table{width:100%;border-collapse:collapse;margin-top:10px;font-size:14.5px;}
.doc-table th{text-align:start;background:var(--bg-soft);color:var(--ink);font-family:var(--font-display);
  font-weight:600;padding:12px 14px;border-bottom:2px solid var(--line);font-size:13.5px;}
.doc-table td{padding:12px 14px;border-bottom:1px solid var(--line-soft);color:var(--slate-600);vertical-align:top;}
.doc-table tr:hover td{background:var(--bg-softer);}

.preview-card{display:block;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  transition:all .25s;background:#fff;box-shadow:var(--sh-sm);}
.preview-card:hover{transform:translateY(-5px);box-shadow:var(--sh-md);border-color:var(--orange-500);}
.preview-card .pc-top{height:120px;background:var(--navy-800);position:relative;overflow:hidden;
  display:grid;place-items:center;color:#fff;}
.preview-card .pc-body{padding:20px 22px;}
.preview-card .pc-body b{font-family:var(--font-display);font-size:17px;color:var(--ink);display:block;}
.preview-card .pc-body span{font-size:14px;color:var(--slate-500);}
.preview-card .pc-body .go{display:inline-flex;align-items:center;gap:6px;margin-top:12px;
  color:var(--orange-600);font-weight:700;font-size:14px;}

/* =================================================================
   ANIMATIONS
   ================================================================= */
@media (prefers-reduced-motion:no-preference){
  html.anim-ready .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1);}
  html.anim-ready .reveal.in{opacity:1;transform:none;}
  html.anim-ready .reveal[data-delay="1"]{transition-delay:.08s;}
  html.anim-ready .reveal[data-delay="2"]{transition-delay:.16s;}
  html.anim-ready .reveal[data-delay="3"]{transition-delay:.24s;}
  html.anim-ready .reveal[data-delay="4"]{transition-delay:.32s;}
}

/* =================================================================
   RESPONSIVE
   ================================================================= */
@media (max-width:1024px){
  .svc-grid,.tst-grid{grid-template-columns:repeat(2,1fr);}
  .why-grid{grid-template-columns:repeat(2,1fr);}
  .hero-inner{grid-template-columns:1fr;}
  .hero-media{max-width:480px;}
  .emergency .wrap,.zones-inner,.contact-inner{grid-template-columns:1fr;gap:36px;}
  .footer-top{grid-template-columns:1fr 1fr;gap:32px;}
  .layout-2col{grid-template-columns:1fr;}
  .sidebar-card{position:static;}
}
@media (max-width:1000px){
  .nav-links,.nav-call{display:none;}
  .menu-toggle{display:grid;place-items:center;}
  .mobile-bar{display:flex;}
  body{padding-bottom:76px;}
}
@media (max-width:760px){
  body{font-size:16px;}
  .svc-grid,.tst-grid,.why-grid{grid-template-columns:1fr;}
  .field-row{grid-template-columns:1fr;}
  .hero-float--tl{inset-inline-start:8px;top:12px;}
  .hero-float--br{inset-inline-end:8px;bottom:14px;}
  .hero-trust{gap:18px;}
  .footer-top{grid-template-columns:1fr;}
  .lang-switch{order:-1;}
  .doc-toc{display:none;}
}

/* =================================================================
   MOBILE-APP COMPONENTS  (mobile-first; scale up at breakpoints)
   ================================================================= */

/* ---- Floating Dark Dock — pilule flottante premium (iOS-style) ---- */
.app-dock{
  position:fixed;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));
  z-index:999;max-width:calc(100% - 32px);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:6px;
  padding:8px 18px;
  background:rgba(27,26,23,.85);          /* --navy-900 : onyx chaud, même matière que le fond du site */
  -webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);
  border:1px solid rgba(255,107,53,.15);  /* liseré orange thématique, très subtil */
  border-radius:9999px;
  box-shadow:0 14px 40px -8px rgba(0,0,0,.55);
}
/* Boutons latéraux : fond transparent, texte blanc, icône colorée */
.dock-side{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:8px 4px;border-radius:9999px;color:#fff;font-weight:600;font-size:11px;
  background:transparent;border:none;min-height:52px;justify-content:center;
}
.dock-side svg{width:22px;height:22px;}
.dock-side.wa svg{color:#25D366;}        /* WhatsApp : vert officiel */
.dock-side:not(.wa) svg{color:#ff6b35;}  /* Urgence : orange d'alerte */
/* Bouton central « Appeler » : cercle orange parfait qui déborde vers le haut */
.dock-call{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  width:66px;height:66px;border-radius:50%;margin-top:-22px;
  background:#ff6b35;color:#fff;
  box-shadow:0 4px 24px rgba(255,107,53,.6);
  border:none;font-family:var(--font-display);font-weight:700;font-size:11px;
  position:relative;
}
[dir="rtl"] .dock-call{font-family:var(--font-ar);}
.dock-call svg{width:25px;height:25px;color:#fff;}
.dock-call::after{display:none;}        /* supprime l'anneau « cible de fléchettes » */

/* ---- App-style compact section heading on mobile ---- */
.app-h{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;color:var(--ink);}

/* ---- Service tiles (app home grid) ---- */
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
.tile{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 16px 16px;
  display:flex;flex-direction:column;gap:10px;min-height:128px;position:relative;overflow:hidden;
  transition:transform .2s,box-shadow .2s,border-color .2s;
}
.tile:active{transform:scale(.97);}
.tile:hover{box-shadow:var(--sh-md);border-color:transparent;transform:translateY(-3px);}
.tile-ico{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
  background:var(--orange-tint);color:var(--orange-600);}
.tile-ico svg{width:24px;height:24px;}
.tile h3{font-size:16px;line-height:1.18;margin:0;}
.tile p{font-size:13px;color:var(--slate-500);margin:0;line-height:1.4;}
.tile.tile-urgent{background:var(--navy-800);border-color:transparent;justify-content:space-between;}
.tile.tile-urgent h3{color:#fff;}
.tile.tile-urgent .tile-ico{background:var(--orange-500);color:#fff;}
.tile.tile-urgent .tile-go{color:var(--orange-400);display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:13px;}

/* ---- Selectable chips (emergency / forms) ---- */
.chips{display:flex;flex-wrap:wrap;gap:10px;}
.chip-pick{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  padding:13px 16px;border-radius:var(--r);border:1.5px solid var(--line);background:#fff;
  font-family:var(--font-display);font-weight:600;font-size:15px;color:var(--slate-700);
  transition:all .15s;min-height:50px;
}
[dir="rtl"] .chip-pick{font-family:var(--font-ar);}
.chip-pick svg{width:20px;height:20px;color:var(--slate-400);}
.chip-pick:hover{border-color:var(--navy-400);}
.chip-pick.sel{border-color:var(--orange-500);background:var(--orange-tint);color:var(--orange-700);box-shadow:0 0 0 3px rgba(244,115,31,.12);}
.chip-pick.sel svg{color:var(--orange-600);}
.chip-pick.small{padding:10px 14px;font-size:14px;min-height:44px;}

/* ---- Emergency flow card ---- */
.em-wrap{max-width:560px;margin-inline:auto;}
.em-call-top{
  display:flex;align-items:center;gap:14px;background:var(--navy-800);color:#fff;
  border-radius:var(--r-lg);padding:18px 20px;box-shadow:var(--sh-md);text-decoration:none;
  transition:transform .18s;
}
.em-call-top:hover{transform:translateY(-2px);}
.em-call-top .ec-ico{width:54px;height:54px;border-radius:50%;background:var(--orange-500);
  display:grid;place-items:center;flex:none;box-shadow:0 8px 20px rgba(227,95,18,.4);}
.em-call-top .ec-ico svg{width:26px;height:26px;}
.em-call-top small{display:block;color:var(--on-dark-dim);font-size:12.5px;font-weight:600;}
.em-call-top b{font-family:var(--font-display);font-size:19px;color:#fff;}
.em-divider{display:flex;align-items:center;gap:14px;color:var(--slate-400);font-size:13px;
  font-weight:600;margin:22px 0;}
.em-divider::before,.em-divider::after{content:"";height:1px;background:var(--line);flex:1;}
.em-step{margin-bottom:22px;}
.em-step > label{display:block;font-family:var(--font-display);font-weight:700;font-size:16px;
  color:var(--ink);margin-bottom:12px;}
[dir="rtl"] .em-step > label{font-family:var(--font-ar);}
.em-locate{display:inline-flex;align-items:center;gap:9px;width:100%;justify-content:center;
  padding:13px;border-radius:var(--r-sm);border:1.5px dashed var(--navy-400);background:var(--bg-soft);
  color:var(--navy-600);font-weight:700;font-size:14.5px;margin-bottom:10px;font-family:var(--font-display);}
.em-locate svg{width:18px;height:18px;}
.em-locate.loading{opacity:.6;pointer-events:none;}
.em-loc-status{font-size:13px;color:#1c9d4c;font-weight:600;min-height:18px;margin-top:6px;}

/* ---- Contact tiles ---- */
.ct-tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
.ct-tile{display:flex;flex-direction:column;gap:10px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);padding:20px 18px;transition:all .2s;min-width:0;}
.ct-tile > div{min-width:0;}
.ct-tile .cti{flex:none;}
.ct-tile:active{transform:scale(.97);}
.ct-tile:hover{box-shadow:var(--sh-md);border-color:var(--orange-500);transform:translateY(-3px);}
.ct-tile .cti{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;
  background:var(--orange-tint);color:var(--orange-600);}
.ct-tile .cti svg{width:24px;height:24px;}
.ct-tile small{font-size:13px;color:var(--slate-400);font-weight:600;}
.ct-tile b{font-family:var(--font-display);font-size:16.5px;color:var(--ink);overflow-wrap:anywhere;}
.ct-tile.dark{background:var(--navy-800);border-color:transparent;}
.ct-tile.dark .cti{background:var(--orange-500);color:#fff;}
.ct-tile.dark small{color:var(--on-dark-dim);}
.ct-tile.dark b{color:#fff;}

/* ---- Lang-switch: single cycling pill on phone/tablet ---- */
@media (max-width:1000px){
  .nav-right .lang-switch button:not(.active){display:none;}
  .nav-right .lang-switch{min-width:62px;justify-content:center;padding:3px 4px;}
  .nav-right .lang-switch button.active{padding:6px 13px;font-size:12.5px;}
  .nav-right .lang-switch button.active::after{content:" ↻";opacity:.5;font-size:11px;letter-spacing:0;}
}

/* ---- Mobile hero polish (app feel) ---- */
@media (max-width:760px){
  .app-dock{display:grid;}
  .mobile-bar{display:none !important;}
  body.has-dock{padding-bottom:96px;}
  .hero-inner{padding-block:34px 30px;}
  .hero h1{font-size:clamp(31px,8.8vw,42px);}
  .hero .sub{font-size:16.5px;}
  .hero-cta{flex-direction:column;}
  .hero-cta .btn{width:100%;}
  .hero-media{display:none;}
  .hero-trust{gap:0;display:grid;grid-template-columns:repeat(3,1fr);
    border-radius:var(--r);overflow:hidden;border:1px solid rgba(255,255,255,.12);margin-top:28px;}
  .hero-trust .ht{padding:14px 10px;border-inline-end:1px solid rgba(255,255,255,.1);align-items:center;text-align:center;}
  .hero-trust .ht:last-child{border-inline-end:none;}
  .hero-trust .ht b{font-size:19px;}
  .hero-trust .ht span{font-size:11.5px;}
  .section{padding-block:46px;}
  .section-head{margin-bottom:26px;}
  .page-hero-inner{padding-block:34px 30px;}
  .ct-tiles{gap:10px;}
}
@media (min-width:761px){
  .app-dock{display:none;}
}
/* tablet: tiles 3-up */
@media (min-width:600px) and (max-width:1000px){
  .tiles{grid-template-columns:repeat(3,1fr);}
}
/* desktop: tiles 4-up */
@media (min-width:1001px){
  .tiles{grid-template-columns:repeat(4,1fr);}
  .ct-tiles{grid-template-columns:repeat(4,1fr);}
}

/* =================================================================
   EEAT — Case study ("Dernière intervention réussie") + trust
   ================================================================= */
.case-study{
  background:linear-gradient(180deg,var(--bg-soft),#fff);
  border:1px solid var(--line);border-inline-start:4px solid var(--orange-500);
  border-radius:var(--r-lg);padding:24px 26px;margin:8px 0 4px;
}
.case-study .cs-head{display:flex;align-items:center;gap:10px;margin-bottom:16px;}
.case-study .cs-head .cs-badge{display:inline-flex;align-items:center;gap:7px;
  background:var(--orange-tint);color:var(--orange-700);font-family:var(--font-display);
  font-weight:700;font-size:12px;letter-spacing:.04em;text-transform:uppercase;
  padding:6px 12px;border-radius:var(--r-pill);}
.case-study .cs-head .cs-badge svg{width:15px;height:15px;}
.case-study .cs-verified{margin-inline-start:auto;display:inline-flex;align-items:center;gap:6px;
  font-size:12.5px;font-weight:600;color:#1c9d4c;}
.case-study .cs-verified svg{width:15px;height:15px;}
.case-study .cs-quote{font-size:16.5px;color:var(--slate-700);line-height:1.6;margin-bottom:18px;}
.cs-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff;}
.cs-metrics .csm{padding:14px 12px;text-align:center;border-inline-end:1px solid var(--line);}
.cs-metrics .csm:last-child{border-inline-end:none;}
.cs-metrics .csm small{display:block;font-size:11px;color:var(--slate-400);font-weight:600;
  text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px;}
.cs-metrics .csm b{font-family:var(--font-display);font-size:15px;color:var(--ink);line-height:1.2;}
.cs-metrics .csm.hl b{color:var(--orange-600);}
@media(max-width:560px){.cs-metrics{grid-template-columns:repeat(2,1fr);}
  .cs-metrics .csm:nth-child(2){border-inline-end:none;}
  .cs-metrics .csm:nth-child(1),.cs-metrics .csm:nth-child(2){border-bottom:1px solid var(--line);}}

/* trust signal row (license / insurance / experience) */
.trust-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:8px;}
.trust-row .tr-item{display:flex;gap:13px;align-items:flex-start;background:#fff;
  border:1px solid var(--line);border-radius:var(--r);padding:18px;}
.trust-row .tr-item .tr-ico{width:42px;height:42px;border-radius:11px;flex:none;display:grid;place-items:center;
  background:var(--navy-800);color:var(--orange-400);}
.trust-row .tr-item .tr-ico svg{width:21px;height:21px;}
.trust-row .tr-item b{font-family:var(--font-display);font-size:15px;color:var(--ink);display:block;margin-bottom:3px;}
.trust-row .tr-item span{font-size:13px;color:var(--slate-500);line-height:1.45;}
@media(max-width:700px){.trust-row{grid-template-columns:1fr;}}

/* about / team grid */
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
@media(max-width:760px){.team-grid{grid-template-columns:1fr;}}
.stat-band{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;text-align:center;}
@media(max-width:600px){.stat-band{grid-template-columns:repeat(2,1fr);}}

/* =================================================================
   ★★★  PREMIUM UPGRADE LAYER  (v2 — agency polish)
   Pure visual enhancement. No content/markup changes.
   Mobile-first; refined depth, motion, gradients, micro-interactions.
   ================================================================= */
:root{
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --ease-smooth:cubic-bezier(.2,.7,.2,1);
  /* warmer, layered shadow set */
  --sh-sm:0 1px 2px rgba(28,22,14,.05), 0 2px 5px rgba(28,22,14,.05);
  --sh:0 2px 6px rgba(28,22,14,.05), 0 8px 22px -6px rgba(28,22,14,.10);
  --sh-md:0 4px 12px rgba(28,22,14,.06), 0 18px 42px -10px rgba(28,22,14,.14);
  --sh-lg:0 8px 24px rgba(28,22,14,.08), 0 36px 70px -18px rgba(28,22,14,.22);
  --sh-orange:0 10px 26px -6px rgba(227,95,18,.45), 0 4px 10px -2px rgba(227,95,18,.30);
  --grad-orange:linear-gradient(135deg,#ff8c43 0%,#f4731f 48%,#e35f12 100%);
  --grad-onyx:linear-gradient(160deg,#2c2823 0%,#1b1a17 60%,#141311 100%);
}

/* soft warm page tint for depth */
body{background:
  radial-gradient(120% 60% at 100% 0%,rgba(244,115,31,.025),transparent 60%),
  var(--bg);}


/* ---------- Eyebrow: gradient accent ---------- */
.eyebrow::before{background:var(--grad-orange);width:26px;height:2.5px;}
.eyebrow{background:linear-gradient(90deg,var(--orange-700),var(--orange-500));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}

/* ---------- Section heads: tighter, more confident ---------- */
.section-head h2{letter-spacing:-.03em;}

/* ---------- Header: deeper premium glass ---------- */
.site-header.scrolled{background:rgba(252,250,247,.78);
  backdrop-filter:blur(22px) saturate(180%);-webkit-backdrop-filter:blur(22px) saturate(180%);
  box-shadow:0 1px 0 rgba(28,22,14,.06),0 8px 30px -12px rgba(28,22,14,.12);}
/* animated nav underline */
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;
  background:var(--grad-orange);border-radius:2px;transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease-smooth);}
[dir="rtl"] .nav-links a::after{transform-origin:right;}
.nav-links a:hover::after{transform:scaleX(1);}
.logo-mark{transition:transform .4s var(--ease-spring),box-shadow .3s ease;}
.logo:hover .logo-mark{transform:rotate(-4deg) scale(1.05);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 8px 20px -6px rgba(227,95,18,.4);}

/* nav-call premium */
.nav-call{background:var(--grad-orange);box-shadow:var(--sh-orange);}

/* ---------- Hero: atmospheric depth + finer grain ---------- */
.hero,.page-hero,.doc-hero,.mk-hero{background:var(--grad-onyx);}
.hero-bg::before{filter:blur(8px);opacity:.9;}
.hero::after,.page-hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
  opacity:.04;mix-blend-mode:overlay;}
.hero h1{letter-spacing:-.035em;}
.hero .accent{background:var(--grad-orange);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;}

/* hero trust numbers shimmer */
.hero-trust .ht b{background:linear-gradient(180deg,#fff,#e9e2d6);-webkit-background-clip:text;
  background-clip:text;-webkit-text-fill-color:transparent;}

/* ---------- Proof strip: refined ---------- */
.proof-strip{background:var(--grad-onyx);border-top:1px solid rgba(255,255,255,.05);
  border-bottom:1px solid rgba(0,0,0,.2);}
.proof-strip .ps-item{transition:transform .3s var(--ease-spring);}
.proof-strip .ps-item:hover{transform:translateY(-2px);}
.proof-strip .ps-item svg{filter:drop-shadow(0 2px 6px rgba(244,115,31,.4));}

/* ---------- Cards: unified premium hover (lift + ring + gradient edge) ---------- */
.tile,.svc-card,.why-card,.tst-card,.ct-tile,.veh-card,.scenario,.preview-card,.sidebar-card{
  transition:transform .4s var(--ease-spring),box-shadow .4s var(--ease-smooth),border-color .3s ease;}
.tile::after,.why-card::before{pointer-events:none;}
.tile:hover,.why-card:hover,.tst-card:hover,.ct-tile:hover,.veh-card:hover,.scenario:hover,.preview-card:hover{
  transform:translateY(-6px);box-shadow:var(--sh-lg);border-color:rgba(244,115,31,.18);}
.svc-card:hover{transform:translateY(-8px);box-shadow:var(--sh-lg);}

/* tile icon pop */
.tile-ico,.why-ico,.svc-ico,.cti,.veh-ico,.tr-ico,.ci-ico{transition:transform .4s var(--ease-spring),box-shadow .3s ease;}
.tile:hover .tile-ico,.why-card:hover .why-ico,.svc-card:hover .svc-ico,.ct-tile:hover .cti,.veh-card:hover .veh-ico{
  transform:scale(1.08) rotate(-3deg);}

/* orange icon tiles get a soft gradient */
.tile-ico,.svc-ico,.cti,.ci-ico{background:linear-gradient(140deg,var(--orange-tint),var(--orange-tint-2));
  box-shadow:inset 0 0 0 1px rgba(244,115,31,.12);}

/* dark icon tiles get depth */
.why-ico,.veh-ico,.tr-ico{background:var(--grad-onyx);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 6px 16px -6px rgba(20,17,12,.5);}

/* ---------- Rating summary & emergency card: gradient onyx ---------- */
.rating-summary{background:var(--grad-onyx);box-shadow:var(--sh-md);
  border:1px solid rgba(255,255,255,.06);}
.rating-summary .score{background:var(--grad-orange);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;}
.emergency-card{box-shadow:var(--sh-lg);}
.sidebar-card.dark{background:var(--grad-onyx);box-shadow:var(--sh-lg);
  border:1px solid rgba(255,255,255,.06);}

/* ---------- Testimonials: refined quote mark ---------- */
.tst-card{position:relative;overflow:hidden;}
.tst-card::before{content:"\201C";position:absolute;top:-18px;inset-inline-end:6px;
  font-family:Georgia,serif;font-size:110px;line-height:1;color:var(--orange-500);opacity:.08;}
[dir="rtl"] .tst-card::before{content:"\201D";}

/* ---------- Zone pins & link chips: premium pill ---------- */
.zone-pin,.link-chip{transition:transform .3s var(--ease-spring),box-shadow .3s ease,border-color .25s,background .25s,color .25s;}
.zone-pin:hover,.link-chip:hover{transform:translateY(-3px);box-shadow:0 10px 24px -8px rgba(244,115,31,.4);}

/* ---------- FAQ: smoother, card-like ---------- */
.faq-item{transition:background .3s ease;border-radius:14px;}
.faq-item.open{background:linear-gradient(180deg,var(--bg-soft),transparent);}
.faq-q{padding-inline:18px;}
.faq-a p{padding-inline:18px;}
.faq-q .chev{transition:transform .35s var(--ease-spring),background .25s ease,color .2s ease;}
.faq-item.open .faq-q .chev{background:var(--grad-orange);box-shadow:var(--sh-orange);}

/* ---------- Callout: premium ---------- */
.callout{background:linear-gradient(135deg,var(--orange-tint),#fff);
  border:1px solid var(--orange-tint-2);box-shadow:var(--sh-sm);border-radius:var(--r-lg);}

/* ---------- Case study: gradient edge ---------- */
.case-study{box-shadow:var(--sh);border-inline-start-width:5px;
  border-image:var(--grad-orange) 1;}

/* ---------- App dock: floating dark pill (renforce le dark design) ---------- */
.app-dock{background:rgba(27,26,23,.85);
  -webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);
  box-shadow:0 14px 40px -8px rgba(0,0,0,.55);}
.dock-call{background:#ff6b35;
  box-shadow:0 4px 24px rgba(255,107,53,.6);}

/* ---------- Forms: premium focus ---------- */
.field input,.field select,.field textarea{transition:border-color .2s ease,box-shadow .25s ease,background .2s ease;}
.field input:focus,.field select:focus,.field textarea:focus{
  box-shadow:0 0 0 4px rgba(244,115,31,.13),0 2px 8px -2px rgba(244,115,31,.2);}
.contact-form{box-shadow:var(--sh-lg);}

/* ---------- Selectable chips (emergency flow) ---------- */
.chip-pick{transition:transform .25s var(--ease-spring),border-color .2s,background .2s,box-shadow .25s;}
.chip-pick:active{transform:scale(.96);}
.chip-pick.sel{box-shadow:0 8px 20px -6px rgba(244,115,31,.35);}
.em-call-top{background:var(--grad-onyx);box-shadow:var(--sh-lg);}
.em-call-top .ec-ico{background:var(--grad-orange);}

/* ---------- Reveal: refined entrance (respects existing gating) ---------- */
@media (prefers-reduced-motion:no-preference){
  html.anim-ready .reveal{transform:translateY(26px) scale(.99);
    transition:opacity .8s var(--ease-smooth),transform .8s var(--ease-smooth);}
  html.anim-ready .reveal.in{transform:none;}
}

/* ---------- Mobile-first polish ---------- */
@media (max-width:760px){
  .section-head h2{font-size:clamp(26px,7vw,34px);}
  .btn{padding:16px 24px;}          /* generous tap targets */
  .btn-lg{padding:18px 28px;}
  .tile{min-height:120px;border-radius:20px;}
  .svc-card,.why-card,.tst-card,.case-study,.sidebar-card,.contact-form{border-radius:20px;}
  .callout{border-radius:18px;}
  /* fade card hover-lifts into press states on touch */
  .tile:active,.ct-tile:active,.svc-card:active{transform:scale(.98);}
}

/* crisper rendering of gradient text on webkit */
@supports (-webkit-background-clip:text){
  .accent,.eyebrow,.rating-summary .score,.hero-trust .ht b{-webkit-text-fill-color:transparent;}
}
/* ★★★ END PREMIUM UPGRADE LAYER ★★★ */

/* =================================================================
   ★★★  PREMIUM FINISHING LAYER  (v3)
   Atmospheric motion, brand selection/scrollbar, a11y focus.
   ================================================================= */

/* drifting hero glow orbs (GPU transform; paused for reduced-motion) */
@media (min-width:768px) and (prefers-reduced-motion:no-preference){
  .hero-bg::before{animation:orbDriftA 18s var(--ease-smooth) infinite alternate;}
  .hero-bg::after{animation:orbDriftB 22s var(--ease-smooth) infinite alternate;}
}
@keyframes orbDriftA{from{transform:translate3d(0,0,0) scale(1);}to{transform:translate3d(-40px,30px,0) scale(1.12);}}
@keyframes orbDriftB{from{transform:translate3d(0,0,0) scale(1);}to{transform:translate3d(36px,-26px,0) scale(1.1);}}

/* brand text selection */
::selection{background:rgba(244,115,31,.22);color:var(--ink);}

/* premium thin scrollbar (desktop) */
@media (pointer:fine){
  *{scrollbar-width:thin;scrollbar-color:var(--orange-400) transparent;}
  *::-webkit-scrollbar{width:10px;height:10px;}
  *::-webkit-scrollbar-thumb{background:linear-gradient(var(--orange-500),var(--orange-600));
    border-radius:999px;border:3px solid var(--bg);}
  *::-webkit-scrollbar-thumb:hover{background:var(--orange-600);}
}

/* accessible focus ring on all interactive elements */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2.5px solid var(--orange-500);outline-offset:3px;border-radius:6px;}
.btn:focus-visible,.nav-call:focus-visible,.dock-call:focus-visible{outline-offset:4px;}

/* gentle entrance for hero copy on first paint */
@media (prefers-reduced-motion:no-preference){
  html.anim-ready .hero h1{animation:heroRise .9s var(--ease-smooth) both;}
  html.anim-ready .hero .sub{animation:heroRise .9s var(--ease-smooth) .08s both;}
  html.anim-ready .hero-cta{animation:heroRise .9s var(--ease-smooth) .16s both;}
}
@keyframes heroRise{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;}}

/* refined divider between light sections */
.section--soft + .section,.section + .section--soft{position:relative;}

/* mobile: slightly tighter hero rhythm + premium dock shadow already set */
@media (max-width:760px){
  .hero h1{letter-spacing:-.025em;}
  .proof-strip .wrap{gap:16px 22px;}
}
/* ★★★ END PREMIUM FINISHING LAYER (v3) ★★★ */

/* footer urgence buttons: always white label, every page */
.site-footer .footer-col .btn,
.site-footer .footer-col .btn span{color:#fff !important;}

/* ============================================================
   MOBILE UX — nettoyage tactile
   1) supprime le flash bleu natif (tap highlight) partout
   2) bloque la sélection/copie accidentelle (appui long) sur les actions
   3) retire l'anneau de focus au pointeur — l'accessibilité CLAVIER
      reste assurée par le bloc :focus-visible ci-dessus
   ============================================================ */

/* 1) Tap highlight transparent sur TOUS les éléments (boutons, liens, FAQ, cartes…) */
*{ -webkit-tap-highlight-color:transparent; }

/* 2) Pas de sélection de texte sur les éléments d'action (les zones de texte/FAQ-réponses restent sélectionnables) */
.btn,.nav-call,.dock-side,.dock-call,.tile,.zone-pin,.link-chip,.tag,.faq-q,.logo,
button,[role="button"]{
  -webkit-user-select:none;
  -moz-user-select:none;
  user-select:none;
}

/* 3) Pas d'outline au clic souris/tactile ; conservé au clavier via :focus-visible */
:focus:not(:focus-visible){ outline:none; }


/* ============================================================
   ★★★ DOUBLE CHÂSSIS — Immersion Hero (DESKTOP ≥ 1024px UNIQUEMENT) ★★★
   Stratégie : 100% des effets sont encapsulés dans @media (min-width:1024px).
   En dessous, RIEN n'est défini → le processeur mobile ne calcule aucune
   animation ni ombre lourde. Hero mobile = brut, statique, instantané.
   ============================================================ */

@media (min-width:1024px){

  /* ── 2 · AURA DE DÉTRESSE — le « 24h/24 » irradie la chaleur ── */
  .hero h1 .accent{ text-shadow:0 0 35px rgba(255,107,53,.45); }

  /* ── 4 · PROFONDEUR DE SCÈNE — backlight ambré derrière le camion ──
     isolation:isolate confine le z-index:-1 au cadre média (jamais
     derrière le fond de section) → halo qui détache la dépanneuse. */
  .hero-media{ isolation:isolate; }
  .hero-media::before{
    content:"";position:absolute;z-index:-1;pointer-events:none;
    top:50%;left:50%;transform:translate(-50%,-50%);
    width:118%;height:115%;
    background:radial-gradient(ellipse at center,
      rgba(255,140,50,.15) 0%, rgba(255,115,40,.09) 45%, transparent 72%);
    filter:blur(14px);
  }

  /* ── 3 · SHIMMER EFFECT — reflet de lumière sur le bouton principal ── */
  .hero-cta .btn-primary{
    position:relative; overflow:hidden; isolation:isolate;
  }
  .hero-cta .btn-primary::after{       /* le reflet incliné à ~45° */
    content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(115deg,
      transparent 35%, rgba(255,255,255,.45) 50%, transparent 65%);
    transform:translateX(-120%);
  }
  .hero-cta .btn-primary > *{ position:relative; z-index:2; } /* texte/icône au-dessus du reflet */

  /* ── ANIMATIONS — désactivées si l'utilisateur préfère moins de mouvement ── */
  @media (prefers-reduced-motion:no-preference){
    /* 1 · LÉVITATION ASYNCHRONE des deux badges blancs */
    .hero-float--tl{ animation:float-slow 6s ease-in-out infinite; }
    .hero-float--br{ animation:float-slow 6s ease-in-out infinite; animation-delay:-3s; }
    /* 3 · balayage du shimmer toutes les 5s */
    .hero-cta .btn-primary::after{ animation:btn-shimmer 5s ease-in-out infinite; }
  }
}

/* Keyframes (définitions inertes : jamais référencées sous 1024px) */
@keyframes float-slow{
  0%,100%{ transform:translateY(0); }
  50%   { transform:translateY(-5px); }
}
@keyframes btn-shimmer{
  0%       { transform:translateX(-120%); }
  18%,100% { transform:translateX(120%); }   /* sweep rapide puis pause jusqu'au prochain cycle */
}

/* ── ★ VERROU DE SÉCURITÉ MOBILE (LA LOI) — < 1024px ──
   Filet de sécurité explicite : neutralise toute animation/ombre lourde,
   même si une règle future tentait de cascader vers le mobile. */
@media (max-width:1023px){
  .hero-float--tl, .hero-float--br{ animation:none !important; }
  .hero h1 .accent{ text-shadow:none; }
  .hero-cta .btn-primary::after{ content:none; }
}

/* =================================================================
   LOW-END MOBILE PERFORMANCE GUARD  ( < 768px )
   A desktop with a mouse never matches max-width:767.98px, so the premium
   glass/blur UI on PC is left 100% untouched (hard constraint).

   backdrop-filter:blur() repaints its whole region on EVERY scroll frame →
   the "scroll freeze" + battery drain on a Mali-class GPU. On phones we swap
   it for a solid 98%-opaque surface: visually near-identical, zero per-frame
   GPU work. Each surface keeps its own hue (light header, onyx dock).
   ================================================================= */
@media (max-width:767.98px){
  .site-header.scrolled,
  .app-dock,
  .mobile-bar{
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
  }
  .site-header.scrolled{background:rgba(252,250,247,.98) !important;} /* light, solid 98% */
  .app-dock{background:rgba(27,26,23,.98) !important;}               /* onyx, solid 98% */
  .mobile-bar{background:rgba(255,255,255,.98) !important;}          /* light, solid 98% */
}

/* Infinite animations run ONLY on desktop (≥768px) + motion-welcome.
   On mobile the live dot stays lit but static — no endless repaint loop
   waking the CPU/GPU on a near-empty battery. (orbDriftA/B are gated the
   same way at their source declaration above.) */
@media (min-width:768px) and (prefers-reduced-motion:no-preference){
  .dot-live{animation:pulse 2.4s infinite;}
}

/* =================================================================
   RENDERING PERF — content-visibility (below-the-fold sections only)
   The browser skips layout + paint for these off-screen sections until they
   approach the viewport, cutting initial main-thread rendering work (helps
   Speed Index / TBT) on the long homepage. `contain-intrinsic-size: auto <h>`
   reserves a placeholder height so the scrollbar stays stable; after the first
   render the browser remembers each section's real size (zero CLS thereafter).
   Targets are STRICTLY below the fold and are NOT in-page anchor targets
   (#services / #how / #zones / #reviews stay fully eager, so smooth-scroll
   offsets are untouched). Browsers without support (older Safari) ignore the
   property and render normally — purely additive, no visual change.
   ================================================================= */
#guide{content-visibility:auto;contain-intrinsic-size:auto 1200px;}
#faq{content-visibility:auto;contain-intrinsic-size:auto 900px;}
.site-footer{content-visibility:auto;contain-intrinsic-size:auto 720px;}