/* SAMADEZ - Bleu & Or
   Fluid, rem-based scale. One root size drives every type step and gap.
   ------------------------------------------------------------------ */
:root{
  --bg:#0A1424; --bg2:#0F1B30; --bg3:#14223A;
  --ink:#F1F4F9; --nav:#C4CEDD; --body:#9AA7BC; --mut:#8492A9; --mut2:#7C8BA4;
  --gold:#C8A45C; --gold2:#E8CE8F; --warn:#E0876F;
  --grad:linear-gradient(96deg,#A9782B 0%,#E4B860 46%,#C8912F 100%);
  --line:rgba(200,164,92,0.24); --lineS:rgba(200,164,92,0.5); --line2:rgba(235,242,250,0.1);
  --pad:clamp(1.15rem,4.4vw,4.4rem);
  --sec:clamp(3rem,6vw,6.2rem);
  --disp:'Big Shoulders Display',Impact,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --sans:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease:cubic-bezier(0.16,1,0.3,1);
}
*,*::before,*::after{box-sizing:border-box; min-width:0}
html{
  -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip;
  /* the whole page is sized from here: 14px on a small phone → 17.5px on a wide desktop */
  font-size:clamp(14px,13.1px + 0.28vw,17.5px);
}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:1rem; line-height:1.6;
  overflow-x:clip; -webkit-font-smoothing:antialiased;
}
/* direction-safe visually-hidden skip link */
.skip{position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0;
      overflow:hidden; clip-path:inset(50%); white-space:nowrap}
.skip:focus{position:fixed; top:.75rem; inset-inline-start:.75rem; z-index:9999;
  width:auto; height:auto; margin:0; padding:.9rem 1.25rem; overflow:visible; clip-path:none;
  background:var(--gold); color:var(--bg); font-family:var(--mono); font-size:.78rem;
  letter-spacing:.12em; text-transform:uppercase}
img{max-width:100%; display:block}
a{color:var(--gold); text-decoration:none; transition:color .25s ease}
a:hover{color:var(--gold2)}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
h1,h2,h3,h4{margin:0; font-weight:600; text-wrap:balance}
p{margin:0; text-wrap:pretty}
::selection{background:var(--gold); color:var(--bg)}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px}

.wrap{width:100%; max-width:100rem; margin:0 auto; position:relative}
.pad{padding-left:var(--pad); padding-right:var(--pad)}
.sec{padding-top:var(--sec); padding-bottom:var(--sec)}
.grid-bg::before{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:linear-gradient(rgba(200,164,92,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(200,164,92,.05) 1px,transparent 1px);
  background-size:clamp(3.5rem,7vw,6.25rem) clamp(3.5rem,7vw,6.25rem);
}
.rel{position:relative; z-index:1}

/* type ------------------------------------------------------------- */
.kicker{font-family:var(--mono); font-size:clamp(.68rem,.95vw,.75rem); letter-spacing:.16em; text-transform:uppercase; color:var(--gold)}
.eyebrow{font-family:var(--mono); font-size:clamp(.68rem,.95vw,.75rem); letter-spacing:.14em; text-transform:uppercase; color:var(--mut)}
.h1{font-family:var(--disp); font-weight:800; font-size:clamp(2.85rem,7vw,6rem); line-height:1.02; text-transform:uppercase; letter-spacing:.005em}
.h2{font-family:var(--disp); font-weight:600; font-size:clamp(2.4rem,4.7vw,4.25rem); line-height:1.02; text-transform:uppercase}
.h3{font-family:var(--disp); font-weight:600; font-size:clamp(1.65rem,2.3vw,2.1rem); line-height:1.06; text-transform:uppercase}
.lead{font-size:clamp(1.03rem,1.3vw,1.12rem); line-height:1.7; color:var(--body)}
.body{font-size:clamp(.95rem,1.1vw,1rem); line-height:1.72; color:var(--mut)}
.small{font-size:.9rem; line-height:1.65; color:var(--mut)}
.gold{color:var(--gold)}
.grad{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
      display:inline-block; padding-top:.16em; margin-top:-.16em}
.diamond{display:inline-block; width:.7rem; height:.5rem; flex:none; background:var(--grad);
         clip-path:polygon(50% 0,100% 100%,50% 72%,0 100%)}

/* buttons ---------------------------------------------------------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.7rem;
     min-height:max(3.15rem,44px); padding:.9rem 1.65rem; font-family:var(--mono); font-size:.78rem;
     font-weight:500; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap;
     transition:background .28s ease,color .28s ease,border-color .28s ease,transform .28s var(--ease)}
.btn-fill{background:var(--gold); color:var(--bg)}
.btn-fill:hover{background:var(--gold2); color:var(--bg); transform:translateY(-2px)}
.btn-line{border:1px solid var(--lineS); color:var(--gold)}
.btn-line:hover{background:var(--gold); color:var(--bg); border-color:var(--gold)}
.btn-ghost{color:var(--ink); border-bottom:1px solid var(--lineS); padding:.6rem 0 .45rem; min-height:2.5rem;
           align-items:flex-end}
.btn-ghost:hover{color:var(--gold)}

.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0}

/* header ----------------------------------------------------------- */
.util{display:flex; justify-content:space-between; align-items:center; gap:1.25rem;
      padding:.68rem var(--pad); border-bottom:1px solid var(--line);
      font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--mut)}
.util a{color:var(--mut)} .util a:hover{color:var(--gold)}
.util-l,.util-r{display:flex; flex-wrap:wrap; align-items:center; gap:clamp(.8rem,1.8vw,1.7rem)}
/* the blur lives on a pseudo-element: backdrop-filter on .hdr itself would make it the
   containing block for the fixed mobile nav panel, trapping it inside the header */
.hdr{position:sticky; top:0; z-index:900; border-bottom:1px solid var(--line)}
.hdr::before{content:''; position:absolute; inset:0; z-index:-1; background:rgba(10,20,36,.92);
     backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px)}
.hdr-in{display:flex; justify-content:space-between; align-items:center; gap:clamp(.9rem,1.6vw,1.4rem);
        padding:.85rem var(--pad)}
.brand{display:flex; align-items:center; gap:.85rem; height:2.8rem; flex:none}
.brand img.mk{height:2.65rem; width:auto}
.brand .sep{width:1px; height:1.7rem; background:var(--line); flex:none}
.brand img.lk{height:1.85rem; width:auto}
.nav{display:flex; align-items:center; gap:clamp(1rem,1.9vw,2rem); min-width:0;
     font-family:var(--mono); font-size:.75rem; letter-spacing:.1em; text-transform:uppercase}
.nav a{color:var(--nav); white-space:nowrap; position:relative; padding:.4rem 0}
.nav a::after{content:''; position:absolute; left:0; right:100%; bottom:0; height:1px;
              background:var(--gold); transition:right .32s var(--ease)}
.nav a:hover::after,.nav a[aria-current]::after{right:0}
.nav a[aria-current]{color:var(--gold)}
.nav .lang{display:none}
.burger{display:none; width:max(2.9rem,44px); height:max(2.9rem,44px); align-items:center; justify-content:center; flex:none}
.burger span{display:block; position:relative; width:1.35rem; height:1.5px; background:var(--ink);
             transition:background .2s ease}
.burger span::before,.burger span::after{content:''; position:absolute; left:0; width:1.35rem; height:1.5px;
             background:var(--ink); transition:transform .32s var(--ease)}
.burger span::before{top:-.42rem} .burger span::after{top:.42rem}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(.42rem) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-.42rem) rotate(-45deg)}

/* hero ------------------------------------------------------------- */
.hero{padding:clamp(2.4rem,4.6vw,4.4rem) var(--pad) clamp(2rem,3.4vw,3.2rem)}
.hero-top{display:flex; flex-wrap:wrap; gap:1.1rem 1.75rem; justify-content:space-between;
          align-items:flex-start; margin-bottom:clamp(1.5rem,2.6vw,2.1rem)}
/* leading must clear the acute on RÉNOVER: the accent rises .976em above the
   baseline, so baseline-to-baseline needs >= .99em. Em-relative, so it tracks
   the fluid word size instead of a fixed rem gap. */
.hero-stack{display:flex; flex-direction:column; gap:0; font-family:var(--disp);
            font-weight:800; text-transform:uppercase; line-height:1.02}
.hero-row{display:flex; flex-wrap:wrap; align-items:flex-end; gap:clamp(1rem,2vw,1.6rem)}
.hero-w{font-size:clamp(3.6rem,11.2vw,10.4rem)}
.hero-band{position:relative; flex:1 1 12rem; min-width:0; height:clamp(3.4rem,7vw,6.2rem);
           overflow:hidden; margin-bottom:.85rem}
.hero-band img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
/* sits inside a word row: its height must not exceed the word beside it,
   or it drives the row box and breaks the stack's rhythm */
.hero-note{font-family:var(--mono); font-weight:400; font-size:clamp(15px,.95rem,1.05rem); line-height:1.5;
           text-transform:none; color:var(--body); max-width:46ch; margin-bottom:0;
           align-self:flex-end}
.hero-foot{display:flex; flex-wrap:wrap; align-items:center; gap:.85rem 1.25rem;
           margin-top:clamp(1.75rem,3vw,2.8rem); padding-top:1.35rem; border-top:1px solid var(--line);
           font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--mut)}
.hero-foot .rule{flex:1 1 2.5rem; height:1px; background:var(--line)}

/* page hero (inner pages) ------------------------------------------ */
.phero{position:relative; overflow:hidden; border-bottom:1px solid var(--line)}
.phero-img{position:absolute; inset:0}
.phero-img img{width:100%; height:100%; object-fit:cover}
.phero-img::after{content:''; position:absolute; inset:0;
  background:linear-gradient(100deg,var(--bg) 18%,rgba(10,20,36,.9) 52%,rgba(10,20,36,.62) 100%)}
.phero-in{position:relative; z-index:1; padding:clamp(2.8rem,5.6vw,6rem) var(--pad) clamp(2.4rem,4.6vw,4.6rem);
          max-width:68rem}
.crumb{display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; margin-bottom:1.35rem;
       font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--mut)}
.crumb a{color:var(--mut)} .crumb a:hover{color:var(--gold)}
.crumb .sl{color:var(--gold)}

/* marquee ---------------------------------------------------------- */
.mq{position:relative; overflow:hidden; background:var(--bg2);
    border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:1.1rem 0}
.mq-track{display:flex; width:max-content; animation:marquee 52s linear infinite; will-change:transform}
.mq-set{display:flex; align-items:center}
.mq-set span{padding:0 clamp(1.1rem,2vw,1.9rem); font-family:var(--disp); font-weight:600;
             font-size:clamp(1.35rem,2.1vw,1.8rem); text-transform:uppercase; color:#5E6E8A; white-space:nowrap}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* grids / cards ---------------------------------------------------- */
.hair{display:grid; gap:1px; background:var(--line)}
.hair > *{background:var(--bg)}
.hair.on2 > *{background:var(--bg2)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.split,.split-l,.split-r{display:grid}
.split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.split-l{grid-template-columns:minmax(0,34rem) minmax(0,1fr)}
.split-r{grid-template-columns:minmax(0,1fr) minmax(0,34rem)}
.head{display:flex; flex-wrap:wrap; gap:1.35rem 2rem; justify-content:space-between;
      align-items:flex-end; margin-bottom:clamp(2rem,3.6vw,3.2rem)}
.head-txt{max-width:44rem; display:flex; flex-direction:column; gap:1rem}

.card{padding:clamp(1.6rem,2.4vw,2.1rem) clamp(1.35rem,2vw,1.85rem); display:flex; flex-direction:column;
      gap:.75rem; transition:background .3s ease}
.card:hover{background:var(--bg3)}
.card .n{font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; color:var(--gold)}

/* contact column is shorter than the form beside it: centre it instead of
   leaving the difference as a void at the bottom */
#devis > div:first-child{display:flex; flex-direction:column; justify-content:center}

/* the left rail of the projects split: content flows, never spread apart */
.pcol{padding:var(--sec) var(--pad); display:flex; flex-direction:column;
      gap:clamp(1.6rem,2.6vw,2.4rem); justify-content:flex-start;
      border-right:1px solid var(--line)}
.pcol .filt{display:flex; flex-direction:column; gap:1.15rem; margin-top:auto; padding-top:.6rem}

.stat{padding:clamp(1.75rem,3.2vw,2.7rem) clamp(1.35rem,3.4vw,3.4rem)}
.stat .v{font-family:var(--disp); font-weight:800; font-size:clamp(3rem,4.8vw,4.4rem); line-height:.9}
.stat .l{margin-top:.6rem; font-family:var(--mono); font-size:.72rem; letter-spacing:.14em;
         text-transform:uppercase; color:var(--mut)}
.stars{display:flex; gap:3px}
.stars svg{display:block; flex:none}

/* service explorer (photo + list) ---------------------------------- */
.explore{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:1px;
         background:var(--line); border-top:1px solid var(--line)}
.explore-ph{position:relative; min-height:clamp(19rem,40vw,36rem); overflow:hidden; background:var(--bg2)}
.explore-ph img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
                transition:opacity .5s ease}
.explore-ph .scrim{position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top,rgba(10,20,36,.9) 0%,rgba(10,20,36,.12) 48%,rgba(10,20,36,.4) 100%)}
.explore-cap{position:absolute; left:clamp(1.15rem,2.4vw,2rem); right:clamp(1.15rem,2.4vw,2rem);
             bottom:clamp(1.15rem,2.4vw,2rem); z-index:2; display:flex; flex-direction:column; gap:.55rem}
.explore-cap .k{display:flex; align-items:center; gap:.65rem; font-family:var(--mono);
                font-size:.72rem; letter-spacing:.15em; text-transform:uppercase; color:var(--gold2);
                transition:opacity .4s ease}
.explore-cap .d{max-width:28rem; font-size:clamp(.95rem,1.2vw,1.05rem); line-height:1.6;
                color:#EAF0F8; transition:opacity .4s ease}
.explore-num{position:absolute; top:clamp(1rem,2.2vw,1.9rem); right:clamp(1rem,2.2vw,1.9rem); z-index:2;
             font-family:var(--disp); font-weight:800; font-size:clamp(2.4rem,4vw,3.8rem); line-height:1;
             color:rgba(255,255,255,.16)}
.explore-num i{font-style:normal; color:rgba(255,255,255,.1)}
.explore-list{background:var(--bg2); display:flex; flex-direction:column; justify-content:center; padding-bottom:1.25rem}
.erow{position:relative; display:flex; align-items:center; gap:clamp(.85rem,1.4vw,1.25rem);
      width:100%; padding:.65rem clamp(1rem,1.6vw,1.35rem); min-height:max(3.5rem,48px); text-align:left;
      border-top:1px solid var(--line2); transition:background .32s ease,border-color .32s ease}
.erow .bar{position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--grad);
           transform:scaleY(0); transition:transform .4s var(--ease)}
.erow .n{font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; color:var(--mut2); transition:color .32s ease}
.erow .t{flex:1; min-width:0; font-family:var(--disp); font-weight:600;
         font-size:clamp(1.25rem,1.75vw,1.7rem); line-height:1.08; text-transform:uppercase; color:var(--nav);
         transition:color .32s ease,transform .4s var(--ease)}
.erow .a{font-family:var(--mono); font-size:.82rem; color:var(--gold); opacity:0;
         transform:translateX(-8px); transition:opacity .32s ease,transform .4s var(--ease)}
.erow.on{background:var(--bg3); border-top-color:var(--line)}
.erow.on .bar{transform:scaleY(1)}
.erow.on .n{color:#E4B860}
.erow.on .t{color:#fff; transform:translateX(6px)}
.erow.on .a{opacity:1; transform:none}
.explore-foot{display:flex; flex-wrap:wrap; align-items:center; gap:.75rem;
              padding:1.35rem clamp(1rem,1.6vw,1.35rem) 0; border-top:1px solid var(--line2);
              font-family:var(--mono); font-size:.72rem; letter-spacing:.12em;
              text-transform:uppercase; color:var(--mut)}

/* filter chips + gallery ------------------------------------------- */
.chips{display:flex; flex-wrap:wrap; gap:.55rem}
.chip{padding:.7rem 1rem; min-height:max(2.75rem,44px); border:1px solid var(--line2); color:var(--mut);
      font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
      transition:border-color .3s ease,color .3s ease,background .3s ease}
.chip:hover{border-color:var(--gold); color:var(--gold)}
.chip.on{border-color:var(--gold); color:var(--gold); background:rgba(200,164,92,.08)}
.shots{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
       grid-template-rows:minmax(0,1fr) minmax(0,1fr); gap:1px; background:var(--line);
       min-height:clamp(21rem,36vw,34rem)}
.shot{position:relative; min-width:0; overflow:hidden; background:var(--bg2)}
.shot img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
          transition:transform .9s var(--ease),opacity .34s ease}
.shot:hover img{transform:scale(1.04)}
.shot.tall{grid-row:span 2}
.shot .cap{position:absolute; left:1.35rem; right:1.35rem; bottom:1.25rem; z-index:2; display:flex;
           align-items:baseline; gap:.65rem; font-family:var(--mono); font-size:.72rem;
           letter-spacing:.14em; text-transform:uppercase; color:var(--gold2); transition:opacity .34s ease}
.shot .cap::before{content:''; display:block; width:.7rem; height:.5rem; flex:none; background:var(--grad);
                   clip-path:polygon(50% 0,100% 100%,50% 72%,0 100%)}
.shot.tall::after{content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top,rgba(10,20,36,.8) 0%,rgba(10,20,36,0) 36%)}

/* gallery grid (portfolio) ----------------------------------------- */
.gal{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--line)}
.gal figure{position:relative; margin:0; aspect-ratio:4/3; overflow:hidden; background:var(--bg2)}
.gal img{width:100%; height:100%; object-fit:cover; background:var(--bg2); transition:transform .9s var(--ease)}
.gal figure:hover img{transform:scale(1.05)}
.gal figcaption{position:absolute; left:0; right:0; bottom:0; padding:2rem 1.25rem 1rem;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold2);
  background:linear-gradient(to top,rgba(10,20,36,.88),rgba(10,20,36,0));
  opacity:0; transform:translateY(6px); transition:opacity .35s ease,transform .35s var(--ease)}
.gal figure:hover figcaption,.gal figure:focus-within figcaption{opacity:1; transform:none}

/* steps / list rows ------------------------------------------------ */
.rows{display:flex; flex-direction:column}
.row{display:grid; grid-template-columns:3.6rem minmax(0,1fr); gap:clamp(1rem,1.6vw,1.5rem);
     padding:clamp(1.25rem,2vw,1.6rem) 0; border-top:1px solid var(--line2)}
.row:last-child{border-bottom:1px solid var(--line2)}
.row .k{font-family:var(--disp); font-weight:800; font-size:clamp(1.9rem,2.6vw,2.4rem);
        line-height:.9; color:var(--gold)}
.row .t{font-size:clamp(1.05rem,1.4vw,1.2rem); color:var(--ink)}
.row .d{margin-top:.5rem; font-size:clamp(.9rem,1.1vw,.96rem); line-height:1.7; color:var(--mut)}

.checks{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.85rem 2rem; margin:0; padding:0; list-style:none}
.checks li{display:grid; grid-template-columns:1.1rem minmax(0,1fr); gap:.85rem; align-items:start;
           font-size:clamp(.95rem,1.15vw,1.03rem); line-height:1.6; color:var(--nav)}
.checks li::before{content:''; display:block; width:.7rem; height:.5rem; margin-top:.5em; background:var(--grad);
                   clip-path:polygon(50% 0,100% 100%,50% 72%,0 100%)}

/* faq -------------------------------------------------------------- */
.qa{border-top:1px solid var(--line)}
.qa:last-of-type{border-bottom:1px solid var(--line)}
.qa summary{display:flex; align-items:flex-start; justify-content:space-between; gap:1.5rem;
            padding:clamp(1.25rem,1.9vw,1.6rem) 0; cursor:pointer; list-style:none;
            font-size:clamp(1.05rem,1.35vw,1.15rem); line-height:1.45; color:var(--ink)}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--gold2)}
.qa .ic{flex:none; position:relative; width:1.1rem; height:1.1rem; margin-top:.25rem}
.qa .ic::before,.qa .ic::after{content:''; position:absolute; background:var(--gold);
  transition:transform .35s var(--ease),opacity .3s ease}
.qa .ic::before{left:0; top:.5rem; width:1.1rem; height:1.5px}
.qa .ic::after{left:.5rem; top:0; width:1.5px; height:1.1rem}
.qa[open] .ic::after{transform:rotate(90deg); opacity:0}
.qa .ans{overflow:hidden; padding:0 2.75rem clamp(1.25rem,1.9vw,1.6rem) 0; max-width:52rem;
         font-size:clamp(.95rem,1.15vw,1.03rem); line-height:1.72; color:var(--body);
         animation:ansIn .4s var(--ease)}
@keyframes ansIn{from{opacity:0; transform:translateY(-6px)}to{opacity:1; transform:none}}

.faq-split{display:grid; grid-template-columns:minmax(0,26rem) minmax(0,1fr);
           gap:clamp(2rem,4vw,4.5rem); align-items:start}

/* form ------------------------------------------------------------- */
.form{display:flex; flex-direction:column; gap:.75rem; max-width:40rem}
.field{display:flex; flex-direction:column; gap:.45rem}
.field label{font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mut)}
.field input,.field select,.field textarea{
  width:100%; padding:.9rem 1rem; min-height:max(3.15rem,44px); background:var(--bg);
  border:1px solid var(--line2); color:var(--ink); font-family:var(--sans); font-size:1rem;
  border-radius:0; -webkit-appearance:none; appearance:none; transition:border-color .25s ease}
.field textarea{min-height:6.8rem; resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--mut2)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--gold)}
.field select{background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),
  linear-gradient(135deg,var(--gold) 50%,transparent 50%);
  background-position:calc(100% - 1.25rem) 1.35rem,calc(100% - .85rem) 1.35rem;
  background-size:6px 6px,6px 6px; background-repeat:no-repeat; padding-right:2.75rem}
.f2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem}
/* honeypot: hors ecran, hors tabulation, hors lecteur d'ecran. Seuls les
   robots le remplissent, ce qui suffit a les identifier cote serveur. */
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.form button[disabled]{opacity:.55; cursor:progress}
.form [data-sent] .btn{margin-top:.85rem}

/* legal / long-form pages ------------------------------------------ */
.prose{max-width:56rem; display:flex; flex-direction:column; gap:1.6rem}
.prose h2{font-family:var(--disp); font-weight:600; font-size:clamp(1.55rem,2.1vw,2rem);
          line-height:1.1; text-transform:uppercase; margin-top:1.2rem}
.prose h3{font-family:var(--mono); font-weight:500; font-size:.8rem; letter-spacing:.14em;
          text-transform:uppercase; color:var(--gold); margin-top:.6rem}
.prose p,.prose li{font-size:clamp(.98rem,1.15vw,1.05rem); line-height:1.75; color:var(--body)}
.prose ul{margin:0; padding-inline-start:1.15rem; display:flex; flex-direction:column; gap:.6rem}
.prose a{border-bottom:1px solid var(--line)}
.prose .meta{font-family:var(--mono); font-size:.75rem; letter-spacing:.1em;
             text-transform:uppercase; color:var(--mut)}
.prose .box{padding:clamp(1.25rem,2vw,1.75rem); border:1px solid var(--line); background:var(--bg2);
            display:flex; flex-direction:column; gap:.5rem}

/* footer ----------------------------------------------------------- */
.ftr{padding:clamp(2.8rem,5vw,4rem) var(--pad) 1.9rem; background:var(--bg)}
.ftr-top{display:grid; grid-template-columns:minmax(0,1.25fr) repeat(3,minmax(0,1fr));
         gap:clamp(1.8rem,3vw,3rem); padding-bottom:clamp(2rem,3.4vw,3rem); border-bottom:1px solid var(--line2)}
.ftr h4{font-family:var(--mono); font-size:.7rem; font-weight:400; letter-spacing:.16em;
        text-transform:uppercase; color:var(--mut)}
.ftr ul{list-style:none; margin:1rem 0 0; padding:0; display:flex; flex-direction:column; gap:.6rem;
        font-size:.96rem; color:var(--nav)}
.ftr ul a{color:var(--nav)} .ftr ul a:hover{color:var(--gold)}
.ftr-bot{display:flex; flex-wrap:wrap; gap:.85rem 1.6rem; justify-content:space-between; align-items:center;
         padding-top:1.5rem; font-family:var(--mono); font-size:.72rem; letter-spacing:.1em;
         text-transform:uppercase; color:var(--mut)}
.ftr-bot a{color:var(--mut)} .ftr-bot a:hover{color:var(--gold)}
.ftr-links{display:flex; flex-wrap:wrap; gap:.85rem 1.5rem; align-items:center}
.credit{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; justify-content:center;
        margin-top:1.5rem; padding-top:1.25rem; border-top:1px solid var(--line2);
        font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--mut2)}
.credit a{color:var(--gold)} .credit a:hover{color:var(--gold2)}
.social{display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.35rem}
.social a{padding:.7rem .95rem; min-height:max(2.75rem,44px); display:inline-flex; align-items:center;
          border:1px solid var(--line2); color:var(--mut); font-family:var(--mono);
          font-size:.72rem; letter-spacing:.12em; text-transform:uppercase}
.social a:hover{border-color:var(--gold); color:var(--gold)}

/* floating whatsapp ------------------------------------------------ */
.wa{position:fixed; right:clamp(.9rem,2vw,1.6rem); bottom:clamp(.9rem,2vw,1.6rem); z-index:800;
    display:inline-flex; align-items:center; gap:.65rem; padding:.8rem 1.1rem; min-height:max(3.15rem,44px);
    background:var(--gold); color:var(--bg); font-family:var(--mono); font-size:.75rem;
    font-weight:500; letter-spacing:.12em; text-transform:uppercase;
    box-shadow:0 10px 30px rgba(0,0,0,.45); transition:background .28s ease,transform .28s var(--ease)}
.wa:hover{background:var(--gold2); color:var(--bg); transform:translateY(-2px)}
.wa svg{flex:none}

/* reveal ----------------------------------------------------------- */
[data-rev]{opacity:0; transform:translateY(24px)}
.revd[data-rev]{opacity:1; transform:none; transition:opacity .85s var(--ease),transform .85s var(--ease)}
.no-js [data-rev]{opacity:1; transform:none}

/* intro ------------------------------------------------------------ */
#intro{position:fixed; inset:0; z-index:9999; pointer-events:none}
.no-js #intro{display:none}
#intro .pane{position:absolute; left:0; right:0; height:50.2%; background:var(--bg)}
#intro .pane.t{top:0} #intro .pane.b{bottom:0}
#intro .plate{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
              justify-content:center; gap:clamp(1.1rem,2.4vw,2rem); padding:1.5rem}
#intro .plate img{width:min(74vw,34rem); height:auto; opacity:0}
#intro .plate .rule{display:block; width:min(46vw,15rem); height:1px; transform:scaleX(0);
  background:linear-gradient(90deg,rgba(200,164,92,0),#E4B860,rgba(200,164,92,0))}
html[data-fonts] #intro .plate img{animation:introLogo 1.05s var(--ease) .05s both}
html[data-fonts] #intro .plate .rule{animation:introRule .8s var(--ease) .55s both}
html[data-fonts] #intro .plate{animation:introOut .45s var(--ease) 1.7s forwards}
html[data-fonts] #intro .pane.t{animation:introUp .85s cubic-bezier(.76,0,.24,1) 1.9s forwards}
html[data-fonts] #intro .pane.b{animation:introDown .85s cubic-bezier(.76,0,.24,1) 1.9s forwards}
html[data-fonts] #intro{animation:introGone .01s linear 2.83s forwards}
@keyframes introLogo{from{opacity:0; transform:translateY(1.4rem) scale(.955)}to{opacity:1; transform:none}}
@keyframes introRule{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes introOut{to{opacity:0; transform:translateY(-1rem)}}
@keyframes introUp{to{transform:translateY(-101%)}}
@keyframes introDown{to{transform:translateY(101%)}}
@keyframes introGone{to{visibility:hidden}}

/* ------------------------------------------------------------------ */
/* desktop → laptop: the two-column splits are the first thing to go   */
@media (max-width:1180px){
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split,.split-l,.split-r,.explore{grid-template-columns:minmax(0,1fr)}
  /* once stacked, the inter-column gutter becomes a page margin: align it to --pad
     so every section starts on the same vertical line */
  .split > *,.split-l > *,.split-r > *{padding-inline:var(--pad) !important}
  .split > * + *,.split-l > * + *,.split-r > * + *{padding-block-start:var(--sec) !important}
  /* media cells stay edge-to-edge: their background is the hairline colour, so any
     padding would paint a frame around the photos */
  .split > .shots,.split-l > .shots,.split-r > .shots,
  .split > .gal,.split-l > .gal,.split-r > .gal,
  .split > .explore-ph,.split-l > .explore-ph,.split-r > .explore-ph,
  .split > .hair,.split-l > .hair,.split-r > .hair{padding:0 !important}
  .explore-ph{min-height:clamp(17rem,44vw,26rem)}
  .nobd-r,.pcol{border-right:0 !important}
  .nobd-l{border-left:0 !important}
  .gal{grid-template-columns:repeat(2,minmax(0,1fr))}
  .shots{min-height:clamp(19rem,52vw,28rem)}
  .pcol .filt{margin-top:0}
  .faq-split{grid-template-columns:minmax(0,1fr)}
  /* the nav bar runs out of room here, long before the phone breakpoint */
  .util{display:none}
  .nav{position:fixed; top:0; right:0; bottom:0; width:min(88vw,23rem); z-index:950;
       flex-direction:column; align-items:stretch; justify-content:flex-start; gap:0;
       padding:5.5rem 1.6rem 2rem; background:var(--bg2); border-left:1px solid var(--line);
       transform:translateX(102%); visibility:hidden; font-size:.8rem;
       transition:transform .42s var(--ease), visibility 0s linear .42s; overflow-y:auto}
  .nav[data-open]{transform:none; visibility:visible; transition:transform .42s var(--ease), visibility 0s}
  .nav a{padding:1rem 0; min-height:max(3.4rem,48px); display:flex; align-items:center;
         border-bottom:1px solid var(--line2)}
  .nav a::after{display:none}
  .nav .lang{display:flex; color:var(--gold)}
  .burger{display:flex}
  .hdr-cta{display:none}
    /* .hdr has z-index:900 and so opens a stacking context: the nav's own 950 is
     scoped inside it, and any scrim above 900 would paint over the menu links.
     Keep the scrim under the header so the panel stays tappable. */
  .scrim-nav{position:fixed; inset:0; z-index:880; background:rgba(6,12,22,.62);
             opacity:0; pointer-events:none; transition:opacity .35s ease}
  .scrim-nav[data-open]{opacity:1; pointer-events:auto}
}
@media (max-width:900px){
  .g3,.g2{grid-template-columns:minmax(0,1fr)}
  .gal{grid-template-columns:repeat(2,minmax(0,1fr))}
  .checks{grid-template-columns:minmax(0,1fr)}
  .f2{grid-template-columns:minmax(0,1fr)}
  .shots{grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:14.5rem 9.5rem; min-height:0}
  .shot.tall{grid-row:auto; grid-column:1 / -1}
  .hero-note{max-width:38ch}
  .ftr-top{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat{border-right:0 !important}
  .qa .ans{padding-right:0}
  .row{grid-template-columns:2.75rem minmax(0,1fr)}
  .explore-list{padding-bottom:.75rem}
}
@media (max-width:620px){
  .gal{grid-template-columns:minmax(0,1fr)}
  .ftr-top{grid-template-columns:minmax(0,1fr)}
  .btn{width:100%}
  .head .btn,.crumb .btn{width:auto}
  .wa span{display:none}
  .wa{padding:.9rem; min-width:max(3.15rem,44px); justify-content:center}
  .brand img.lk,.brand .sep{display:none}
  .hero-stack{gap:0}
  /* photo bands drop onto their own full-width line under each word */
  .hero-band{flex:1 1 100%; height:clamp(6rem,30vw,8.5rem); margin-bottom:.4rem}
  .hero-row{gap:.65rem}
  .hero-row .btn{margin-bottom:0 !important}
  .ftr-bot{justify-content:flex-start}
  .explore-num{font-size:2.2rem}
}
/* landscape phones: shrink the floating button so it stops covering the CTA */
@media (max-height:640px){
  .wa span{display:none}
  .wa{padding:.9rem; min-width:max(3.15rem,44px); justify-content:center}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important;
                       transition-duration:.001ms !important; scroll-behavior:auto !important}
  #intro{display:none !important}
  [data-rev]{opacity:1 !important; transform:none !important}
}

/* mobile hero: a purpose-built phone hero, swapped in for the desktop stack --- */
.hero-m{display:none; position:relative; flex-direction:column}
.hero-m-ph{position:relative; width:100%; height:44vh; min-height:300px; max-height:440px; overflow:hidden}
.hero-m-ph img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.hero-m-ph::after{content:''; position:absolute; inset:0;
  background:linear-gradient(to top,var(--bg) 2%,rgba(10,20,36,.72) 34%,rgba(10,20,36,.12) 78%)}
.hero-m-cap{position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:0 var(--pad) 24px; display:flex; flex-direction:column; gap:12px}
.hero-m-cap .k{display:flex; align-items:center; gap:10px; font-family:var(--mono);
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:#E4B860}
.hero-m-cap .t{font-family:var(--disp); font-weight:800; font-size:clamp(42px,12.6vw,76px);
  line-height:1.05; text-transform:uppercase; color:#fff; text-wrap:balance}
.hero-m-body{padding:24px var(--pad) 40px; display:flex; flex-direction:column; gap:24px}
.hero-m-body > p{max-width:54ch; font-size:17px; line-height:1.6; color:#A8B4C6}
.hero-m-cta{display:flex; flex-direction:column; gap:12px}
.hero-m-cta .btn{width:100%}
.hero-m-stats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px;
  background:var(--line); margin-top:2px}
.hero-m-stats > div{background:var(--bg); padding:18px 14px; display:flex; flex-direction:column; gap:6px}
.hero-m-stats .v{display:flex; align-items:center; gap:5px; font-family:var(--disp);
  font-weight:800; font-size:30px; line-height:1; color:var(--ink)}
.hero-m-stats .l{font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--mut)}

/* ---------- hero swap ---------- */
@media (max-width:900px){
  .hero{display:none}
  .hero-m{display:flex}
  .hdr-in{padding-top:14px; padding-bottom:14px}
  .brand{height:40px; gap:12px}
  .brand img.mk{height:40px}
  .brand .sep{display:none}
  .brand img.lk{height:28px}
}

/* ---------- phone: rhythm, type floors, denser grids ---------- */
/* tablet: the root font shrinks with the viewport, so rem-based body copy
   drops under 15px here — hold a readable floor, and keep touch targets real */
@media (max-width:900px){
  .lead,.body,.hero-note{font-size:16px; line-height:1.66}
  /* footer links sit at ~20px tall on touch: give them a real target without
     stretching the plain-text rows (address, hours) beside them */
  .ftr ul{gap:0}
  .ftr ul a{display:inline-flex; align-items:center; min-height:44px; padding:.35rem 0}
  .ftr ul li:not(:has(a)){padding:.6rem 0}
  .ftr-bot a{display:inline-flex; align-items:center; min-height:44px}
  .credit a{display:inline-flex; align-items:center; min-height:44px}
  .btn-ghost{min-height:44px; padding-bottom:0; align-items:flex-end}
  .qa .ans{font-size:16px}
  .small{font-size:15px}
}

@media (max-width:760px){
  .stat{padding:1.5rem 1.15rem}
  /* section rhythm */
  :root{--sec:48px}
  .head{margin-bottom:28px}
  /* type floors */
  .h2{font-size:clamp(32px,8.6vw,46px); line-height:1.04}
  .h3{font-size:clamp(21px,5.6vw,26px)}
  .lead,.body{font-size:16px; line-height:1.62}
  /* marquee */
  .mq{padding:16px 0}
  .mq-set span{font-size:20px; padding:0 16px}
  /* interventions */
  .explore-ph{min-height:300px}
  .erow{min-height:58px; padding:0 18px}
  .erow .t{font-size:21px}
  .explore-cap .d{font-size:16px}
  /* method + pillars */
  .card{padding:26px 20px 30px}
  .row{grid-template-columns:44px minmax(0,1fr); gap:16px; padding:20px 0}
  /* faq */
  .qa summary{font-size:17px}
  .qa .ans{font-size:16px; line-height:1.62}
  /* footer */
  .ftr-top{grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px}
  .ftr-top > *:first-child{grid-column:1 / -1}
  .ftr-bot{flex-direction:column; align-items:flex-start; gap:12px}
}

/* ---------- small phone ---------- */
@media (max-width:460px){
  .g4{grid-template-columns:minmax(0,1fr)}
  .ftr-top{grid-template-columns:minmax(0,1fr)}
  .shots{grid-template-rows:12.5rem 8rem}
  .mq-set span{font-size:18px}
  .head{margin-bottom:24px}
  .hero-m-stats .v{font-size:26px}
}

/* RTL -------------------------------------------------------------- */
[dir="rtl"] body,[dir="rtl"] .nav,[dir="rtl"] .util,[dir="rtl"] .kicker,[dir="rtl"] .eyebrow,
[dir="rtl"] .btn,[dir="rtl"] .chip,[dir="rtl"] .erow .n,[dir="rtl"] .ftr h4,[dir="rtl"] .ftr-bot,
[dir="rtl"] .crumb,[dir="rtl"] .stat .l,[dir="rtl"] .field label,[dir="rtl"] .explore-cap .k,
[dir="rtl"] .social a,[dir="rtl"] .explore-foot,[dir="rtl"] .hero-foot,[dir="rtl"] .hero-note,
[dir="rtl"] .mq-set span,[dir="rtl"] .shot .cap,[dir="rtl"] .gal figcaption,[dir="rtl"] .credit,
[dir="rtl"] .prose h3,[dir="rtl"] .prose .meta{
  font-family:'Cairo',var(--sans)}
/* Arabic sets tighter than the Latin display face and hates wide tracking */
[dir="rtl"] .kicker,[dir="rtl"] .eyebrow,[dir="rtl"] .btn,[dir="rtl"] .chip,[dir="rtl"] .util,
[dir="rtl"] .nav,[dir="rtl"] .stat .l,[dir="rtl"] .field label,[dir="rtl"] .explore-cap .k,
[dir="rtl"] .social a,[dir="rtl"] .explore-foot,[dir="rtl"] .hero-foot,[dir="rtl"] .ftr h4,
[dir="rtl"] .ftr-bot,[dir="rtl"] .crumb,[dir="rtl"] .shot .cap,[dir="rtl"] .gal figcaption,
[dir="rtl"] .credit,[dir="rtl"] .prose h3,[dir="rtl"] .prose .meta{letter-spacing:0}
[dir="rtl"] .h1,[dir="rtl"] .h2,[dir="rtl"] .h3,[dir="rtl"] .hero-w,[dir="rtl"] .erow .t,
[dir="rtl"] .stat .v,[dir="rtl"] .row .k,[dir="rtl"] .explore-num,[dir="rtl"] .prose h2,
[dir="rtl"] .mq-set span{
  font-family:'Cairo',var(--disp); font-weight:800; letter-spacing:0}
[dir="rtl"] .h1{font-size:clamp(2rem,5vw,3.9rem); line-height:1.3}
[dir="rtl"] .h2{font-size:clamp(1.7rem,3.4vw,2.9rem); line-height:1.3}
[dir="rtl"] .h3{font-size:clamp(1.25rem,1.9vw,1.6rem); line-height:1.32}
[dir="rtl"] .prose h2{font-size:clamp(1.25rem,2vw,1.7rem); line-height:1.32}
/* Cairo runs deep descenders under a tall ascent: needs >= 1.27em between
   baselines at this size, or consecutive words touch */
[dir="rtl"] .hero-w{font-size:clamp(2.6rem,7vw,6rem); line-height:1.3}
[dir="rtl"] .hero-stack{line-height:1.3; gap:0}
[dir="rtl"] .hero-note{font-family:'Cairo',var(--sans); font-size:.95rem; line-height:1.85; max-width:34ch}
[dir="rtl"] .erow .t{font-size:clamp(1rem,1.35vw,1.28rem); line-height:1.4}
[dir="rtl"] .stat .v{line-height:1.1}
[dir="rtl"] .row .k{line-height:1.2}
[dir="rtl"] .mq-set span{font-size:clamp(1.05rem,1.6vw,1.35rem); font-weight:600}
[dir="rtl"] .qa summary{font-size:clamp(1rem,1.3vw,1.1rem); line-height:1.7}
[dir="rtl"] .qa .ans{padding:0 0 clamp(1.25rem,1.9vw,1.6rem) 2.75rem; line-height:1.9}
[dir="rtl"] .lead,[dir="rtl"] .body,[dir="rtl"] .prose p,[dir="rtl"] .prose li{line-height:1.9}
[dir="rtl"] .grad{padding-top:.1em; margin-top:-.1em}
[dir="rtl"] .nav a::after{right:0; left:100%; transition:left .32s var(--ease)}
[dir="rtl"] .nav a:hover::after,[dir="rtl"] .nav a[aria-current]::after{left:0}
[dir="rtl"] .erow .bar{left:auto; right:0}
[dir="rtl"] .erow.on .t{transform:translateX(-6px)}
[dir="rtl"] .erow .a{transform:translateX(8px) scaleX(-1)}
[dir="rtl"] .erow.on .a{transform:scaleX(-1)}
[dir="rtl"] .explore-num{right:auto; left:clamp(1rem,2.2vw,1.9rem)}
[dir="rtl"] .row{grid-template-columns:3.6rem minmax(0,1fr)}
[dir="rtl"] .field select{background-position:1.25rem 1.35rem,1.75rem 1.35rem;
                          padding-right:1rem; padding-left:2.75rem}
[dir="rtl"] .pcol{border-right:0; border-left:1px solid var(--line)}
[dir="rtl"] .wa{right:auto; left:clamp(.9rem,2vw,1.6rem)}
/* numbers, phone numbers and time ranges stay left-to-right inside Arabic text */
.ltr{direction:ltr; unicode-bidi:isolate; display:inline-block}
[dir="rtl"] a[href^="tel:"]{direction:ltr; unicode-bidi:isolate; display:inline-block}
[dir="rtl"] .mq-track{animation-name:marqueeRtl}
@keyframes marqueeRtl{from{transform:translateX(0)}to{transform:translateX(50%)}}
/* Arabic labels are longer: the desktop nav runs out of room sooner */
@media (max-width:1340px){
  [dir="rtl"] .util{display:none}
  [dir="rtl"] .nav{position:fixed; top:0; right:auto; left:0; bottom:0; width:min(88vw,23rem); z-index:950;
       flex-direction:column; align-items:stretch; justify-content:flex-start; gap:0;
       padding:5.5rem 1.6rem 2rem; background:var(--bg2); border-left:0; border-right:1px solid var(--line);
       transform:translateX(-102%); visibility:hidden; font-size:.85rem;
       transition:transform .42s var(--ease), visibility 0s linear .42s; overflow-y:auto}
  [dir="rtl"] .nav[data-open]{transform:none; visibility:visible; transition:transform .42s var(--ease), visibility 0s}
  [dir="rtl"] .nav a{padding:1rem 0; min-height:max(3.4rem,48px); display:flex; align-items:center;
         border-bottom:1px solid var(--line2)}
  [dir="rtl"] .nav a::after{display:none}
  [dir="rtl"] .nav .lang{display:flex; color:var(--gold)}
  [dir="rtl"] .burger{display:flex}
  [dir="rtl"] .hdr-cta{display:none}
}
@media (max-width:1180px){
  [dir="rtl"] .pcol{border-left:0 !important}
}
/* the root shrinks on phones, so rem-based Arabic headings fall below a
   comfortable floor — pin them in px at that size */
@media (max-width:760px){
  [dir="rtl"] .h2{font-size:clamp(28px,7.4vw,40px); line-height:1.3}
  [dir="rtl"] .h3{font-size:clamp(19px,5vw,24px); line-height:1.32}
  [dir="rtl"] .lead,[dir="rtl"] .body{font-size:16.5px; line-height:1.85}
  [dir="rtl"] .erow .t{font-size:17px}
}

/* Arabic mobile hero: Big Shoulders has no Arabic coverage, so the headline and
   the stat numerals must use Cairo, with leading that clears the glyph run.
   Last in the file so no earlier same-specificity RTL rule outranks it. */
[dir="rtl"] .hero-m-cap .t{font-family:'Cairo',var(--disp); font-weight:800;
  font-size:clamp(30px,9.4vw,54px); line-height:1.3; letter-spacing:0}
[dir="rtl"] .hero-m-stats .v{font-family:'Cairo',var(--disp); line-height:1.15}
/* the mono face has no Arabic coverage either — kicker and stat labels */
[dir="rtl"] .hero-m-cap .k,[dir="rtl"] .hero-m-stats .l{
  font-family:'Cairo',var(--sans); letter-spacing:0}

/* A neutral separator flanked by European numbers takes RTL direction under the
   bidi algorithm, so "4.9 / 5" would paint as "5 / 4.9". Isolate such runs. */
[dir="rtl"] .num-ltr{unicode-bidi:isolate; direction:ltr}