/* ============================================================
   Hasad Al-Dahab — Design System
   Local rebuild of hasad-aldahab.com · bilingual EN/AR, RTL-aware
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  /* Brand: green taken from the logo mark (#51704C); gold for "golden
     harvest". Replaces the inherited extreme-sports orange (#FF621E). */
  --ink:#14201A;
  --ink-2:#2A3B31;
  --green-900:#16301F;
  --green-800:#1F3D2A;
  --green-700:#2C5138;
  --green-600:#51704C;
  --green-500:#6D9163;
  --green-200:#C6D8BF;
  --green-100:#E7EFE4;
  --gold-700:#8F6720;
  --gold-600:#B8862F;
  --gold-500:#D4A24A;
  --gold-100:#F7EEDC;

  --cream:#FBF8F2;
  --sand:#F2ECE1;
  --line:#E3DCCE;
  --line-soft:#EFE9DE;
  --muted:#6E7A70;
  --white:#fff;

  /* Type */
  --font-display:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;

  --fs-display:clamp(2.4rem,5.6vw,4.75rem);
  --fs-h1:clamp(2rem,3.9vw,3.25rem);
  --fs-h2:clamp(1.6rem,2.8vw,2.4rem);
  --fs-h3:clamp(1.15rem,1.5vw,1.4rem);
  --fs-h4:clamp(1.02rem,1.15vw,1.15rem);
  --fs-body:1.0625rem;
  --fs-sm:.9rem;
  --fs-xs:.8rem;
  --fs-eyebrow:.72rem;

  --lh-tight:1.06;
  --lh-head:1.16;
  --lh-body:1.72;

  /* Space */
  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.5rem;
  --s-6:2rem; --s-7:2.75rem; --s-8:3.5rem; --s-9:5rem; --s-10:7rem;
  --sec-y:clamp(3.75rem,7.5vw,7.5rem);
  --gutter:clamp(1.15rem,4vw,2.5rem);
  --maxw:1240px;
  --maxw-narrow:820px;

  --r-sm:6px; --r-md:12px; --r-lg:20px; --r-xl:28px; --r-pill:999px;
  --shadow-sm:0 1px 2px rgba(20,32,26,.05),0 2px 8px rgba(20,32,26,.05);
  --shadow-md:0 4px 12px rgba(20,32,26,.06),0 14px 34px rgba(20,32,26,.08);
  --shadow-lg:0 10px 24px rgba(20,32,26,.08),0 30px 70px rgba(20,32,26,.12);
  --ease:cubic-bezier(.22,.61,.36,1);
  --header-h:78px;
  --topbar-h:38px;
}

/* Arabic swaps the family and loosens leading; nothing else changes. */
html[lang="ar"]{
  --font-display:"IBM Plex Sans Arabic",system-ui,sans-serif;
  --font-body:"IBM Plex Sans Arabic",system-ui,sans-serif;
  --lh-body:1.95;
  --lh-head:1.45;
  --lh-tight:1.25;
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + var(--topbar-h) + 12px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;display:block}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,h5,h6,p{margin:0}
:focus-visible{outline:2px solid var(--green-600);outline-offset:3px;border-radius:3px}

/* ---------- 3. Typography ---------- */
h1,h2,h3,h4,h5,h6,.display{
  font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;
  line-height:var(--lh-head);text-wrap:balance;
}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3,
html[lang="ar"] h4,html[lang="ar"] .display{letter-spacing:normal}
.display{font-size:var(--fs-display);line-height:var(--lh-tight);font-weight:800}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3)}
h4{font-size:var(--fs-h4);letter-spacing:-.01em}
p{max-width:68ch}
.lede{font-size:clamp(1.05rem,1.35vw,1.24rem);color:var(--ink-2);line-height:1.68;max-width:62ch}
html[lang="ar"] .lede{line-height:1.9}
.muted{color:var(--muted)}

.eyebrow{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--font-display);font-size:var(--fs-eyebrow);font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--green-600);
}
html[lang="ar"] .eyebrow{letter-spacing:normal;font-size:.85rem;text-transform:none}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--gold-500);flex:none}

/* Arabic is cursive: any tracking breaks the letter joins. */
html[lang="ar"] .btn,html[lang="ar"] .lang__btn,html[lang="ar"] .why__n,
html[lang="ar"] .stat__num,html[lang="ar"] .stat__label,html[lang="ar"] .link-arrow,
html[lang="ar"] .plist__item,html[lang="ar"] .footer__bar{letter-spacing:normal}

/* ---------- 4. Layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--narrow{max-width:var(--maxw-narrow)}
.sec{padding-block:var(--sec-y);position:relative}
.sec--tight{padding-block:calc(var(--sec-y) * .62)}
.sec--cream{background:var(--cream)}
.sec--sand{background:var(--sand)}
.sec--white{background:var(--white)}
.sec--dark{background:var(--green-900);color:#EDF2EA}
.sec--dark p{color:#C3D2C1}
.sec--dark h1,.sec--dark h2,.sec--dark h3,.sec--dark h4{color:#fff}
.sec--dark .eyebrow{color:var(--green-200)}

.sec-head{max-width:760px;margin-bottom:clamp(2.25rem,4vw,3.5rem)}
.sec-head > * + *{margin-top:var(--s-4)}
.sec-head--center{margin-inline:auto;text-align:center}
.sec-head--center .eyebrow{justify-content:center}
.sec-head--center p{margin-inline:auto}

.grid{display:grid;gap:clamp(1.15rem,2.2vw,1.85rem)}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:980px){.g-3,.g-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.g-2,.g-3,.g-4{grid-template-columns:minmax(0,1fr)}}

/* Split: media + copy. Order is set per-instance so each block reads
   correctly in both LTR and RTL. */
.split{display:grid;gap:clamp(1.75rem,4vw,4rem);align-items:center;grid-template-columns:repeat(2,minmax(0,1fr))}
.split--media-end .split__media{order:2}
.split--media-end .split__copy{order:1}
@media (max-width:900px){
  .split{grid-template-columns:minmax(0,1fr)}
  .split__media,.split--media-end .split__media{order:0}
  .split__copy,.split--media-end .split__copy{order:1}
}
.split__copy > * + *{margin-top:var(--s-4)}
.split__copy .eyebrow + h2{margin-top:var(--s-3)}

/* ---------- 5. Buttons ---------- */
.btn{
  --btn-bg:var(--green-700);--btn-fg:#fff;--btn-bd:var(--green-700);
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--font-display);font-weight:600;font-size:.92rem;letter-spacing:.01em;
  line-height:1;padding:.95em 1.6em;border-radius:var(--r-pill);
  background:var(--btn-bg);color:var(--btn-fg);border:1.5px solid var(--btn-bd);
  transition:transform .25s var(--ease),background .25s var(--ease),
             color .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease);
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn:active{transform:translateY(0)}
.btn--gold{--btn-bg:var(--gold-600);--btn-bd:var(--gold-600)}
.btn--gold:hover{--btn-bg:var(--gold-700);--btn-bd:var(--gold-700)}
.btn--outline{--btn-bg:transparent;--btn-fg:var(--ink);--btn-bd:var(--line)}
.btn--outline:hover{--btn-bd:var(--green-600);--btn-fg:var(--green-700)}
.btn--ghost-light{--btn-bg:rgba(255,255,255,.13);--btn-fg:#fff;--btn-bd:rgba(255,255,255,.5)}
.btn--ghost-light:hover{--btn-bg:#fff;--btn-fg:var(--green-900);--btn-bd:#fff}
.btn--sm{padding:.72em 1.15em;font-size:.84rem}
.btn__icon{width:1.05em;height:1.05em;flex:none}
/* Arrows follow the reading direction. */
[dir="rtl"] .icon-flip{transform:scaleX(-1)}

.link-arrow{
  display:inline-flex;align-items:center;gap:.5em;font-family:var(--font-display);
  font-weight:600;font-size:.9rem;color:var(--green-700);
  border-bottom:1.5px solid transparent;padding-bottom:2px;transition:.25s var(--ease);
}
.link-arrow:hover{border-color:var(--green-600);gap:.85em}
.link-arrow svg{width:1em;height:1em}

/* ---------- 5b. Utility strip ----------
   A slim bar above the header carrying the social accounts, so they get
   a permanent home at the top without crowding the main navigation.
   Below 1080px it is hidden and the accounts move into the menu panel. */
.topbar{
  position:fixed;inset-block-start:0;inset-inline:0;z-index:121;
  height:var(--topbar-h);background:var(--green-900);color:#B9CBB6;
  display:flex;align-items:center;
}
.topbar__inner{
  width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
}
.topbar__contact{display:flex;align-items:center;gap:clamp(.75rem,2vw,1.5rem);font-size:.78rem}
.topbar__contact a{
  display:inline-flex;align-items:center;gap:.45em;color:#B9CBB6;
  transition:color .2s var(--ease);white-space:nowrap;
}
.topbar__contact a:hover{color:#fff}
.topbar__contact svg{width:13px;height:13px;flex:none}
@media (max-width:1080px){
  :root{--topbar-h:0px}
  .topbar{display:none}
}
@media (max-width:820px){.topbar__contact{display:none}}

/* ---------- 5c. Social links ---------- */
.social{display:flex;align-items:center;flex-wrap:wrap}
.social__link{
  display:grid;place-items:center;flex:none;
  transition:color .22s var(--ease),background .22s var(--ease),
             border-color .22s var(--ease),transform .22s var(--ease);
}
.social__link svg{width:1em;height:1em}

/* in the utility strip */
.social--bar{gap:.15rem}
.social--bar .social__link{width:30px;height:30px;border-radius:50%;color:#9FB69C;font-size:15px}
.social--bar .social__link:hover{color:#fff;background:rgba(255,255,255,.12);transform:translateY(-1px)}

/* inside the mobile menu panel — only exists once the panel does.
   Seven equal columns rather than a wrapping flex row, so the set stays
   on one line at any phone width while each target keeps its 44px. */
.social--menu{display:none}
@media (max-width:1080px){
  .social--menu{
    display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.3rem;
    padding-top:var(--s-5);margin-top:var(--s-2);
  }
}
.social--menu .social__link{
  width:100%;min-width:0;height:44px;border-radius:var(--r-pill);font-size:17px;
  border:1px solid var(--line);color:var(--ink-2);background:var(--white);
}
.social--menu .social__link:hover{background:var(--green-700);border-color:var(--green-700);color:#fff}

/* in the footer */
.social--footer{gap:.55rem;margin-top:var(--s-5)}
.social--footer .social__link{
  width:38px;height:38px;border-radius:50%;font-size:16px;
  border:1px solid rgba(255,255,255,.22);color:#B9CBB6;
}
.social--footer .social__link:hover{background:#fff;color:var(--green-900);border-color:#fff}
@media (max-width:1080px){.social--footer .social__link{width:44px;height:44px}}

/* ---------- 6. Header ---------- */
.header{
  position:fixed;inset-block-start:var(--topbar-h);inset-inline:0;z-index:120;
  height:var(--header-h);display:flex;align-items:center;
  background:rgba(251,248,242,.86);backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid transparent;
  transition:background .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.header.is-stuck{background:rgba(251,248,242,.97);border-bottom-color:var(--line);box-shadow:0 2px 20px rgba(20,32,26,.06)}
.header__inner{
  width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);
  display:flex;align-items:center;gap:clamp(.75rem,2vw,1.75rem);
}
.brand{flex:none;display:flex;align-items:center;min-height:44px}
.brand img{height:52px;width:auto}
@media (max-width:520px){.brand img{height:42px}}

.nav{display:flex;align-items:center;gap:clamp(.4rem,1.4vw,1.35rem);margin-inline-start:auto}
.nav__link{
  font-family:var(--font-display);font-weight:600;font-size:.86rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-2);padding:.5em .2em;position:relative;
  transition:color .22s var(--ease);white-space:nowrap;
}
html[lang="ar"] .nav__link{text-transform:none;letter-spacing:normal;font-size:.98rem}
.nav__link::after{
  content:"";position:absolute;inset-block-end:.15em;inset-inline-start:0;
  width:100%;height:2px;background:var(--green-600);
  transform:scaleX(0);transform-origin:left;transition:transform .28s var(--ease);
}
[dir="rtl"] .nav__link::after{transform-origin:right}
.nav__link:hover,.nav__link[aria-current="page"]{color:var(--green-700)}
.nav__link:hover::after,.nav__link[aria-current="page"]::after{transform:scaleX(1)}

.header__actions{display:flex;align-items:center;gap:.55rem;flex:none}

/* Language toggle */
.lang{display:inline-flex;align-items:center;border:1.5px solid var(--line);
  border-radius:var(--r-pill);overflow:hidden;background:var(--white)}
.lang__btn{
  font-family:var(--font-display);font-weight:700;font-size:.78rem;letter-spacing:.04em;
  padding:.55em .85em;color:var(--muted);transition:.22s var(--ease);line-height:1;
}
.lang__btn[aria-pressed="true"]{background:var(--green-700);color:#fff}
.lang__btn:not([aria-pressed="true"]):hover{color:var(--green-700);background:var(--green-100)}

/* Burger */
.burger{display:none;width:44px;height:44px;border:1.5px solid var(--line);
  border-radius:var(--r-pill);align-items:center;justify-content:center;background:var(--white)}
.burger span{display:block;width:18px;height:1.8px;background:var(--ink);position:relative;transition:.3s var(--ease)}
.burger span::before,.burger span::after{
  content:"";position:absolute;inset-inline-start:0;width:18px;height:1.8px;
  background:var(--ink);transition:.3s var(--ease);
}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

@media (max-width:1080px){
  .nav{
    position:fixed;inset-block-start:var(--header-h);inset-inline:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--cream);border-bottom:1px solid var(--line);
    padding:var(--s-4) var(--gutter) var(--s-6);
    transform:translateY(-12px);opacity:0;pointer-events:none;
    transition:.3s var(--ease);box-shadow:var(--shadow-lg);margin-inline-start:0;
  }
  .nav.is-open{transform:none;opacity:1;pointer-events:auto}
  .nav__link{font-size:1.05rem;padding:.85em 0;border-bottom:1px solid var(--line-soft);text-align:start}
  .nav{overflow-y:auto;max-height:calc(100dvh - var(--header-h))}
  .nav__link::after{display:none}
  .burger{display:flex}
  .header__actions{margin-inline-start:auto}
  .header__actions .btn--quote{display:none}
}
@media (max-width:640px){
  .header__actions .btn--profile span{display:none}
  .header__actions .btn--profile{padding:.8em}
}
/* At 360px the logo, language toggle, profile button and burger together
   overrun the bar and the burger — the only route to the menu — gets
   clipped. Tighten the lockup rather than drop a control. */
@media (max-width:400px){
  /* seven 44px columns only fit here with a hairline gap */
  .social--menu{gap:.15rem}
  .brand img{height:34px}
  .header__inner{gap:.5rem}
  .header__actions{gap:.35rem}
  .lang__btn{min-width:38px;padding-inline:.55rem;font-size:.8rem}
}

/* ---------- 7. Hero ---------- */
.hero{
  position:relative;min-height:clamp(560px,92svh,900px);
  display:flex;align-items:flex-end;
  padding-block:calc(var(--header-h) + var(--topbar-h) + 4rem) clamp(3rem,7vw,5.5rem);
  color:#fff;overflow:hidden;isolation:isolate;
}
/* Living background.
   A slow ping-pong zoom/drift plus a drifting warm light pass, so the
   still reads as footage rather than a photo. Transform and opacity
   only, so it stays on the compositor. If .hero__bg carries a
   data-video attribute, app.js layers that video over the image and
   the image becomes its poster. */
.hero__bg{position:absolute;inset:0;z-index:-2;overflow:hidden;background:var(--green-900)}
.hero__bg picture{display:contents}
.hero__bg img{
  width:100%;height:100%;object-fit:cover;transform-origin:50% 58%;
  animation:heroDrift 34s cubic-bezier(.45,0,.55,1) infinite alternate;
  will-change:transform;
}
@keyframes heroDrift{
  from{transform:scale(1.03) translate3d(0.6%,0.4%,0)}
  to{transform:scale(1.15) translate3d(-1.6%,-1.4%,0)}
}

/* Warm light travelling across the field */
.hero__sheen{
  position:absolute;inset:-25%;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(42% 38% at 32% 42%,rgba(255,214,150,.22),rgba(255,214,150,0) 70%);
  animation:heroSheen 26s ease-in-out infinite alternate;
  will-change:transform,opacity;
}
@keyframes heroSheen{
  from{transform:translate3d(-6%,2%,0);opacity:.55}
  to{transform:translate3d(10%,-4%,0);opacity:1}
}

/* Video layer, only present once a source is supplied */
.hero__bg video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.2s var(--ease);
}
.hero__bg.is-video-ready video{opacity:1}
/* The footage carries its own motion and lighting, so the still's drift
   and the light pass both stand down once it is playing. */
.hero__bg.is-video-ready img{animation:none}
.hero__bg.is-video-ready .hero__sheen{opacity:0;animation:none;transition:opacity 1.2s var(--ease)}

@media (prefers-reduced-motion:reduce){
  .hero__bg img{animation:none;transform:scale(1.03)}
  .hero__sheen{animation:none;opacity:.7}
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(11,26,17,.88) 0%,rgba(11,26,17,.52) 42%,
             rgba(11,26,17,.22) 72%,rgba(11,26,17,.42) 100%);
}
.hero__inner{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);position:relative}
.hero__eyebrow{color:#D9E5D3;margin-bottom:var(--s-5)}
/* Headline is contained and fluid — it never bleeds off the viewport. */
.hero__title{
  font-size:var(--fs-display);max-width:15ch;margin-bottom:var(--s-5);
  text-shadow:0 2px 30px rgba(0,0,0,.28);
}
.hero__title em{font-style:normal;color:var(--gold-500)}
.hero__lede{max-width:52ch;color:#E4EDE0;font-size:clamp(1.02rem,1.3vw,1.2rem);margin-bottom:var(--s-6)}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--s-3)}
.hero__foot{
  display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-6);
  margin-top:clamp(2.5rem,5vw,4rem);
}
.hero__scroll{
  display:inline-flex;align-items:center;gap:.7em;font-size:var(--fs-xs);
  letter-spacing:.14em;text-transform:uppercase;color:#CFDCC9;
  font-family:var(--font-display);font-weight:600;
}
html[lang="ar"] .hero__scroll{letter-spacing:normal;text-transform:none;font-size:.85rem}
.hero__scroll svg{width:14px;height:22px;animation:bob 2.2s var(--ease) infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@media (prefers-reduced-motion:reduce){.hero__scroll svg{animation:none}}

/* Circular "download our profile" badge — kept from the original design,
   now paired with a permanent copy in the header. */
.profile-badge{
  position:relative;flex:none;width:132px;height:132px;border-radius:50%;
  display:grid;place-items:center;color:#fff;
  background:var(--green-600);box-shadow:0 12px 40px rgba(0,0,0,.3);
  transition:transform .35s var(--ease),background .35s var(--ease);
}
.profile-badge:hover{transform:scale(1.06);background:var(--green-700)}
.profile-badge__ring{position:absolute;inset:0;width:100%;height:100%;animation:spin 22s linear infinite}
@media (prefers-reduced-motion:reduce){.profile-badge__ring{animation:none}}
@keyframes spin{to{transform:rotate(360deg)}}
.profile-badge__ring text{
  font-family:var(--font-display);font-size:9.4px;font-weight:700;
  letter-spacing:.24em;fill:#fff;text-transform:uppercase;
  /* Chrome lays out RTL text on a <textPath> off the path entirely and
     draws nothing. Isolating the run to LTR keeps the ring rendering;
     the Arabic glyphs still shape and order correctly inside it. */
  direction:ltr;unicode-bidi:isolate;
}
html[lang="ar"] .profile-badge__ring text{letter-spacing:normal;font-size:11px;text-transform:none}
.profile-badge__arrow{width:30px;height:30px}
@media (max-width:720px){.profile-badge{width:104px;height:104px}.profile-badge__arrow{width:24px;height:24px}}
@media (max-width:520px){.hero__foot{flex-direction:column;align-items:flex-start}}

/* ---------- 8. Stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
@media (max-width:860px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stat{padding:clamp(1.5rem,3vw,2.5rem) clamp(1rem,2vw,1.75rem);border-inline-start:1px solid rgba(255,255,255,.14)}
.stat:first-child{border-inline-start:0}
@media (max-width:860px){
  .stat:nth-child(odd){border-inline-start:0}
  .stat:nth-child(n+3){border-top:1px solid rgba(255,255,255,.14)}
}
.stat__num{
  font-family:var(--font-display);font-weight:800;line-height:1;
  font-size:clamp(2.5rem,5vw,3.9rem);color:#fff;letter-spacing:-.03em;
  display:flex;align-items:baseline;gap:.06em;
}
.stat__suffix{color:var(--gold-500);font-size:.55em}
.stat__label{margin-top:var(--s-3);font-size:var(--fs-sm);color:#B9CBB6;line-height:1.5;max-width:24ch}

/* ---------- 9. Cards ---------- */
.card{
  background:var(--white);border:1px solid var(--line-soft);border-radius:var(--r-lg);
  padding:clamp(1.4rem,2.2vw,2rem);height:100%;
  display:flex;flex-direction:column;gap:var(--s-3);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--green-200)}
.card__icon{
  width:46px;height:46px;border-radius:var(--r-md);display:grid;place-items:center;
  background:var(--green-100);color:var(--green-700);flex:none;
}
.card__icon svg{width:23px;height:23px}
.card h3,.card h4{color:var(--ink)}
.card p{font-size:var(--fs-sm);color:var(--muted);line-height:1.68;margin:0}
html[lang="ar"] .card p{line-height:1.9}

/* "Why Hasad" — editorial numbered grid that steps down into the lab block. */
.why{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1rem,2vw,1.6rem)}
.why__item{
  grid-column:span 4;background:var(--white);border:1px solid var(--line-soft);
  border-radius:var(--r-lg);padding:clamp(1.5rem,2.4vw,2.1rem);
  display:flex;flex-direction:column;gap:var(--s-3);position:relative;overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
}
.why__item::before{
  content:"";position:absolute;inset-block-start:0;inset-inline-start:0;
  width:100%;height:3px;background:linear-gradient(90deg,var(--green-600),var(--gold-500));
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease);
}
[dir="rtl"] .why__item::before{transform-origin:right}
.why__item:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:var(--green-200)}
.why__item:hover::before{transform:scaleX(1)}
.why__item--wide{grid-column:span 6}
.why__item--feature{
  grid-column:span 12;background:var(--green-900);border-color:var(--green-900);color:#E8F0E4;
  flex-direction:row;align-items:center;gap:clamp(1.5rem,4vw,3.5rem);
  padding:clamp(1.75rem,3vw,2.75rem);
}
.why__item--feature > div:first-child{flex:0 0 clamp(200px,26%,300px)}
.why__item--feature > div:last-child{flex:1}
@media (max-width:760px){
  .why__item--feature{flex-direction:column;align-items:flex-start;gap:var(--s-4)}
  .why__item--feature > div:first-child,.why__item--feature > div:last-child{flex:auto}
}
.why__item--feature h3{color:#fff}
.why__item--feature p{color:#B9CBB6}
.why__n{font-family:var(--font-display);font-weight:800;font-size:.78rem;letter-spacing:.12em;color:var(--gold-600)}
.why__item--feature .why__n{color:var(--gold-500)}
.why__item h3{font-size:1.12rem}
.why__item p{font-size:var(--fs-sm);color:var(--muted);line-height:1.68;margin:0}
html[lang="ar"] .why__item p{line-height:1.9}
@media (max-width:980px){.why__item,.why__item--wide{grid-column:span 6}}
@media (max-width:620px){.why__item,.why__item--wide{grid-column:span 12}}

/* ---------- 10. Media blocks ---------- */
.media{position:relative;border-radius:var(--r-xl);overflow:hidden;background:var(--sand)}
.media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.media--tall{aspect-ratio:4/5}
.media--wide{aspect-ratio:16/10}
.media--square{aspect-ratio:1}
/* For transparent-background graphics: show the whole artwork rather
   than cropping it, on a light panel. */
.media--contain{background:var(--white);border:1px solid var(--line-soft);aspect-ratio:5/4}
.media--contain img{object-fit:contain;padding:clamp(1.1rem,2.4vw,2rem)}
.media--contain:hover img{transform:none}
.media:hover img{transform:scale(1.035)}
.media__tag{
  position:absolute;inset-block-end:var(--s-4);inset-inline-start:var(--s-4);
  background:rgba(20,32,26,.72);backdrop-filter:blur(8px);color:#fff;
  font-family:var(--font-display);font-size:var(--fs-xs);font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;padding:.5em 1em;border-radius:var(--r-pill);
}
html[lang="ar"] .media__tag{letter-spacing:normal;text-transform:none}

/* Offset composition used by the lab / equipment block. */
.stack{position:relative;padding-inline-end:clamp(1.5rem,5vw,4rem);padding-block-end:clamp(1.5rem,5vw,4rem)}
.stack__main{border-radius:var(--r-xl);overflow:hidden;aspect-ratio:4/3;background:var(--sand)}
.stack__main img{width:100%;height:100%;object-fit:cover}
.stack__inset{
  position:absolute;inset-block-end:0;inset-inline-end:0;width:52%;
  border-radius:var(--r-lg);overflow:hidden;border:8px solid var(--cream);
  box-shadow:var(--shadow-lg);background:var(--white);aspect-ratio:4/3;
}
.stack__inset img{width:100%;height:100%;object-fit:cover}
.sec--sand .stack__inset{border-color:var(--sand)}
.sec--white .stack__inset{border-color:var(--white)}
@media (max-width:620px){
  .stack{padding:0}
  .stack__inset{position:static;width:100%;margin-top:var(--s-3);border-width:0;box-shadow:none}
}

/* ---------- 11. Video ----------
   Autoplays muted on scroll-into-view, like a showreel. The source is
   only fetched at that point, and playback pauses again once the block
   leaves the viewport. Falls back to click-to-play when autoplay is
   refused, Data Saver is on, or reduced motion is requested. */
.videoblk{position:relative;border-radius:var(--r-xl);overflow:hidden;background:var(--green-900);aspect-ratio:16/9}
.videoblk video{width:100%;height:100%;object-fit:cover;display:block}
.videoblk__poster{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:opacity .6s var(--ease);
}
.videoblk.is-ready .videoblk__poster{opacity:0}
.videoblk__scrim{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(11,26,17,.72),rgba(11,26,17,.1) 55%);
  transition:opacity .6s var(--ease);
}
.videoblk.is-ready .videoblk__scrim{opacity:0}
.videoblk__cap{
  position:absolute;inset-block-end:0;inset-inline-start:0;
  padding:clamp(1.15rem,2.5vw,2rem);color:#fff;pointer-events:none;
  max-width:min(60ch,72%);transition:opacity .5s var(--ease);
}
.videoblk.is-ready .videoblk__cap{opacity:0}
.videoblk__cap h3{color:#fff;font-size:clamp(1.1rem,1.7vw,1.45rem)}
.videoblk__cap p{color:#CBD8C7;font-size:var(--fs-sm);margin-top:.35rem}

/* Big centre button — only while the video is not auto-playing. */
.videoblk__play{position:absolute;inset:0;display:grid;place-items:center;width:100%;height:100%;color:#fff}
.videoblk.is-ready .videoblk__play{display:none}
.videoblk__play span{
  width:88px;height:88px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.16);backdrop-filter:blur(10px);border:1.5px solid rgba(255,255,255,.6);
  transition:transform .3s var(--ease),background .3s var(--ease);
}
.videoblk__play:hover span{transform:scale(1.08);background:var(--green-600);border-color:var(--green-600)}
.videoblk__play svg{width:26px;height:26px;margin-inline-start:4px}
[dir="rtl"] .videoblk__play svg{transform:scaleX(-1);margin-inline-start:0;margin-inline-end:4px}

/* Sound / pause controls, shown once it is actually playing. */
.videoblk__controls{
  position:absolute;inset-block-start:clamp(1rem,2vw,1.5rem);
  inset-inline-end:clamp(1rem,2vw,1.5rem);
  display:flex;gap:.5rem;opacity:0;pointer-events:none;transition:opacity .4s var(--ease);
}
.videoblk.is-ready .videoblk__controls{opacity:1;pointer-events:auto}
.vbtn{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:rgba(11,26,17,.5);backdrop-filter:blur(10px);border:1.5px solid rgba(255,255,255,.42);
  transition:background .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease);
}
.vbtn:hover{background:var(--green-600);border-color:var(--green-600);transform:scale(1.06)}
.vbtn svg{width:19px;height:19px}
.vbtn .icon-on{display:none}
.vbtn[aria-pressed="true"] .icon-on{display:block}
.vbtn[aria-pressed="true"] .icon-off{display:none}

/* On a phone a 16:9 block is only ~210px tall, so the caption and the
   centre play button end up on top of each other. Give the frame more
   height and trim the caption to its title. */
@media (max-width:620px){
  .videoblk{aspect-ratio:3/2}
  .videoblk__cap{max-width:100%;padding:1rem}
  .videoblk__cap h3{font-size:1rem}
  .videoblk__cap p{display:none}
  .videoblk__play span{width:62px;height:62px}
  .videoblk__play svg{width:20px;height:20px}
  .vbtn{width:44px;height:44px}
  .vbtn svg{width:17px;height:17px}
}

.videoblk__note{margin-top:var(--s-3);font-size:var(--fs-xs);color:var(--muted);text-align:center}

/* ---------- 12. Product category cards ---------- */
.pcard{
  position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:300px;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(1.25rem,2.2vw,1.75rem);color:#fff;isolation:isolate;background:var(--green-800);
}
.pcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .8s var(--ease)}
.pcard::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(11,26,17,.92) 0%,rgba(11,26,17,.55) 45%,rgba(11,26,17,.15) 100%);
  transition:background .4s var(--ease);
}
.pcard:hover img{transform:scale(1.06)}
.pcard:hover::after{background:linear-gradient(to top,rgba(16,45,26,.95) 0%,rgba(16,45,26,.62) 48%,rgba(16,45,26,.2) 100%)}
.pcard h3{color:#fff;font-size:1.15rem;margin-bottom:.5rem}
.pcard p{font-size:var(--fs-xs);color:#C4D3C0;margin-bottom:var(--s-4);line-height:1.6}
.pcard .link-arrow{color:#fff;font-size:.84rem}
.pcard .link-arrow:hover{border-color:rgba(255,255,255,.7)}

/* ---------- 13. Product lists (products page) ---------- */
.plist{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--white);overflow:hidden}
.plist + .plist{margin-top:clamp(1.5rem,3vw,2.5rem)}
.plist__head{
  display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--s-4);
  padding:clamp(1.35rem,2.4vw,2rem);border-bottom:1px solid var(--line-soft);
}
.plist__head > div{flex:1 1 320px}
.plist__thumb{
  flex:none;width:96px;height:96px;border-radius:var(--r-md);object-fit:cover;
  background:var(--sand);border:1px solid var(--line-soft);
}
@media (max-width:620px){.plist__thumb{width:64px;height:64px}}
.plist__head h3{margin-bottom:.5rem}
.plist__head p{font-size:var(--fs-sm);color:var(--muted);margin:0}
.plist__items{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1px;background:var(--line-soft)}
.plist__item{
  background:var(--white);padding:.95rem 1.15rem;font-size:var(--fs-sm);
  display:flex;align-items:center;gap:.65em;transition:background .2s var(--ease);
}
.plist__item:hover{background:var(--green-100)}
.plist__item::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold-500);flex:none}

/* ---------- 13b. Product catalogue ----------
   Family navigation beside a product grid. Switching family is a hash
   change, so nothing reloads and every family stays linkable. */
.cat{display:grid;grid-template-columns:262px minmax(0,1fr);gap:clamp(1.5rem,3vw,2.75rem);align-items:start}
@media (max-width:920px){.cat{grid-template-columns:minmax(0,1fr);gap:1.25rem}}

/* --- family nav --- */
.cat__nav{position:sticky;top:calc(var(--header-h) + var(--topbar-h) + 1.5rem)}
.cat__navhead{
  margin:0 0 .7rem;font-family:var(--font-display);font-size:.68rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--muted);
}
html[lang="ar"] .cat__navhead{letter-spacing:normal;text-transform:none;font-size:.82rem}
.cat__tabs{display:grid;gap:.3rem}
.cat__tab{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  padding:.7rem .9rem;border-radius:var(--r-md);border:1px solid transparent;
  font-family:var(--font-display);font-weight:600;font-size:.92rem;color:var(--ink-2);
  transition:background .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease);
}
.cat__tab:hover{background:var(--white);border-color:var(--line-soft);color:var(--green-700)}
.cat__tab.is-on{background:var(--green-700);border-color:var(--green-700);color:#fff}
.cat__tabname{min-width:0}
.cat__tabnum{
  flex:none;font-size:.72rem;font-variant-numeric:tabular-nums;
  padding:.15em .55em;border-radius:var(--r-pill);
  background:var(--sand);color:var(--muted);
}
.cat__tab.is-on .cat__tabnum{background:rgba(255,255,255,.2);color:#fff}

@media (max-width:920px){
  .cat__nav{position:static}
  /* Horizontal and edge-to-edge, so the last family is reachable by swipe. */
  .cat__tabs{
    display:flex;gap:.45rem;overflow-x:auto;padding-block:.2rem .5rem;
    margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);
    scrollbar-width:none;
  }
  .cat__tabs::-webkit-scrollbar{display:none}
  .cat__tab{
    flex:none;background:var(--white);border-color:var(--line-soft);
    border-radius:var(--r-pill);min-height:44px;white-space:nowrap;
  }
}

/* --- compact family banner --- */
.fam{
  display:flex;align-items:center;gap:clamp(.9rem,2vw,1.4rem);
  padding:clamp(.85rem,1.6vw,1.15rem) clamp(1rem,2vw,1.4rem);
  background:var(--white);border:1px solid var(--line-soft);border-radius:var(--r-lg);
  margin-bottom:clamp(1rem,2vw,1.5rem);
}
.fam__mark{
  flex:none;width:62px;height:62px;border-radius:var(--r-md);overflow:hidden;
  background:var(--sand);display:grid;place-items:center;
}
.fam__mark img{width:100%;height:100%;object-fit:contain;padding:6px}
.fam__body{min-width:0;flex:1}
.fam__name{margin:0;font-size:clamp(1.05rem,1.5vw,1.3rem)}
.fam__desc{
  margin:.25rem 0 0;font-size:var(--fs-sm);color:var(--muted);line-height:1.55;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.fam__count{flex:none;margin:0;text-align:center;line-height:1.1}
.fam__count b{display:block;font-family:var(--font-display);font-size:1.5rem;color:var(--green-700)}
.fam__count span{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
html[lang="ar"] .fam__count span{letter-spacing:normal;text-transform:none;font-size:.78rem}
@media (max-width:620px){
  /* Side by side, the name column is only ~180px wide and the family
     name wraps to four lines. Mark and count share a row instead, and
     the text gets the full width. */
  .fam{
    display:grid;grid-template-columns:auto 1fr auto;
    grid-template-areas:"mark . count" "body body body";
    gap:.5rem .8rem;align-items:center;
  }
  .fam__mark{grid-area:mark;width:44px;height:44px}
  .fam__count{grid-area:count;display:flex;align-items:baseline;gap:.35rem}
  .fam__count b{font-size:1.15rem}
  .fam__body{grid-area:body}
  .fam__name{font-size:1.02rem}
  .fam__desc{-webkit-line-clamp:2}
}

/* --- product grid --- */
.pgrid{display:grid;gap:clamp(.75rem,1.5vw,1.1rem);grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
@media (max-width:420px){.pgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}}

.pcx{
  display:flex;flex-direction:column;background:var(--white);
  border:1px solid var(--line-soft);border-radius:var(--r-lg);overflow:hidden;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease),transform .25s var(--ease);
}
.pcx:hover{border-color:var(--green-200);box-shadow:var(--shadow-md);transform:translateY(-3px)}
.pcx__media{
  position:relative;aspect-ratio:4/5;padding:12px;
  background:linear-gradient(170deg,var(--cream),var(--sand));
  display:grid;place-items:center;
}
.pcx__media img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.pcx__link{display:flex;flex-direction:column;flex:1;min-width:0;color:inherit}
.pcx__link:focus-visible{outline-offset:-3px}
.pcx__body{padding:.85rem .95rem .6rem;flex:1;min-width:0}
.pcx__name{
  margin:0;font-size:.95rem;line-height:1.3;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.pcx__figs{
  margin:.45rem 0 0;display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;
  font-family:var(--font-display);font-weight:700;font-size:.82rem;color:var(--green-700);
  font-variant-numeric:tabular-nums;direction:ltr;
}
[dir="rtl"] .pcx__figs{justify-content:flex-end}
.pcx__figs--none{color:var(--line);font-weight:400}
.pcx__te{
  font-style:normal;font-size:.62rem;letter-spacing:.08em;
  padding:.15em .45em;border-radius:4px;background:var(--gold-100);color:var(--gold-700);
}
.pcx__add{
  display:flex;align-items:center;justify-content:center;gap:.45em;
  margin:0 .6rem .6rem;padding:.62em .8em;min-height:42px;
  border-radius:var(--r-md);border:1.5px solid var(--line);
  font-family:var(--font-display);font-weight:600;font-size:.8rem;color:var(--ink-2);
  transition:.22s var(--ease);
}
.pcx__add:hover{border-color:var(--green-600);color:var(--green-700);background:var(--green-100)}
.pcx__add.is-in{background:var(--green-700);border-color:var(--green-700);color:#fff}
.pcx__ico{display:grid;place-items:center;width:1em;height:1em;flex:none}
.pcx__ico svg{grid-area:1/1;width:1em;height:1em}
.pcx__add .pcx__ico svg:last-child{display:none}
.pcx__add.is-in .pcx__ico svg:first-child{display:none}
.pcx__add.is-in .pcx__ico svg:last-child{display:block}

/* A dot marks photos still to be confirmed against the physical label. */
.pcx--check .pcx__media::after{
  content:"";position:absolute;inset-block-start:8px;inset-inline-end:8px;
  width:7px;height:7px;border-radius:50%;background:var(--gold-500);
}

/* --- floating quote list --- */
.qbtn{
  position:fixed;inset-block-end:88px;inset-inline-end:22px;z-index:112;
  display:flex;align-items:center;gap:.5em;padding:.75em 1.1em;
  border-radius:var(--r-pill);background:var(--green-700);color:#fff;
  font-family:var(--font-display);font-weight:600;font-size:.88rem;
  box-shadow:0 8px 26px rgba(20,32,26,.28);
  transition:transform .25s var(--ease),background .25s var(--ease),opacity .25s var(--ease);
}
.qbtn:hover{transform:translateY(-2px);background:var(--green-800)}
.qbtn.is-empty{background:var(--ink-2);opacity:.82}
.qbtn svg{width:19px;height:19px}
.qbtn__count{
  min-width:1.5em;padding:.1em .35em;border-radius:var(--r-pill);
  background:var(--gold-500);color:var(--green-900);font-size:.78rem;
  font-variant-numeric:tabular-nums;text-align:center;
}
.qpanel{
  position:fixed;inset-block-end:146px;inset-inline-end:22px;z-index:112;
  width:min(340px,calc(100vw - 44px));max-height:min(60vh,440px);
  display:flex;flex-direction:column;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);overflow:hidden;
}
.qpanel[hidden]{display:none}
.qpanel__head{padding:.9rem 1rem;border-bottom:1px solid var(--line-soft)}
.qpanel__head h3{margin:0;font-size:.98rem}
.qpanel__head p{margin:.15rem 0 0;font-size:var(--fs-xs);color:var(--muted)}
.qpanel ul{margin:0;padding:.4rem;overflow:auto;flex:1}
.qpanel li{
  display:flex;align-items:center;gap:.5rem;padding:.5rem .6rem;
  font-size:var(--fs-sm);border-radius:var(--r-sm);
}
.qpanel li:hover{background:var(--cream)}
.qpanel li span{flex:1;min-width:0}
.qpanel li button{
  flex:none;width:26px;height:26px;border-radius:50%;font-size:1.15rem;line-height:1;
  color:var(--muted);transition:.2s var(--ease);
}
.qpanel li button:hover{background:var(--sand);color:var(--ink)}
.qpanel__empty{padding:1.1rem 1rem;font-size:var(--fs-sm);color:var(--muted);text-align:center}
.qpanel__foot{padding:.7rem;border-top:1px solid var(--line-soft)}
.qpanel__foot .btn{width:100%}
@media (max-width:620px){
  .qbtn__label{display:none}
  .qbtn{padding:.8em;inset-block-end:84px}
  .qpanel{inset-block-end:142px}
}

/* ---------- 13c. Product detail ----------
   One template for every SKU: a large shot beside the copy, with the
   analysis and benefits stacked under it. */
.pdet__back{margin-bottom:clamp(1.25rem,2.5vw,2rem)}
.pdet__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.75rem,4vw,4rem);align-items:start;
}
@media (max-width:880px){.pdet__grid{grid-template-columns:minmax(0,1fr);gap:1.5rem}}

/* --- the shot ---
   The studio photos are built on a 3:4 canvas, so the frame is fixed at
   3:4 and capped by width rather than height: that keeps the aspect
   while stopping a tall screen from turning the photo into a poster.
   Hovering with a mouse raises a lens over the label; a click or a tap
   hands the same photo to the full-screen viewer. */
.pdet__shot{
  margin:0;position:sticky;top:calc(var(--header-h) + var(--topbar-h) + 1.5rem);
  background:linear-gradient(165deg,var(--white),var(--sand));
  border:1px solid var(--line-soft);border-radius:var(--r-xl);
  padding:clamp(1.1rem,3vw,2.25rem);
}
@media (max-width:880px){.pdet__shot{position:static}}

.pshot{display:grid;gap:.85rem}
.pshot__frame{
  position:relative;display:block;width:100%;padding:0;border:0;
  margin-inline:auto;overflow:hidden;cursor:zoom-in;
  aspect-ratio:3/4;max-width:calc(min(58vh,520px) * 0.75);
  background:var(--white);border-radius:var(--r-lg);
  box-shadow:0 1px 0 var(--line-soft);
}
.pshot__frame img{width:100%;height:100%;object-fit:contain;display:block}
.pshot__frame:focus-visible{outline:2px solid var(--green-600);outline-offset:3px}

.pshot__lens{
  position:absolute;width:200px;height:200px;border-radius:50%;
  pointer-events:none;opacity:0;transition:opacity .16s var(--ease);
  background-color:var(--white);background-repeat:no-repeat;
  border:2px solid var(--white);
  box-shadow:0 0 0 1px var(--line),0 14px 34px rgba(22,48,31,.3);
}
.pshot__frame.is-lensing .pshot__lens{opacity:1}

.pshot__hint{
  display:flex;align-items:center;justify-content:center;gap:.45em;margin:0;
  font-size:var(--fs-xs);color:var(--muted);line-height:1.4;text-align:center;
}
.pshot__hint svg{width:1.1em;height:1.1em;flex:none;color:var(--green-600)}

.pshot__views{display:flex;flex-wrap:wrap;gap:.55rem;justify-content:center}
.pshot__view{
  display:grid;gap:.3rem;justify-items:center;cursor:pointer;
  padding:.45rem .55rem .5rem;min-width:80px;min-height:44px;
  background:var(--white);border:1px solid var(--line-soft);border-radius:var(--r-md);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.pshot__view img{width:46px;height:61px;object-fit:contain;display:block}
.pshot__view span{font-size:.68rem;line-height:1.3;color:var(--muted);text-align:center}
.pshot__view:hover{border-color:var(--green-200)}
.pshot__view.is-on{border-color:var(--green-600);box-shadow:inset 0 0 0 1px var(--green-600)}
.pshot__view.is-on span{color:var(--green-700);font-weight:600}
.pdet__flag{
  margin-top:1rem;padding:.55rem .8rem;border-radius:var(--r-md);
  background:var(--gold-100);color:var(--gold-700);
  font-size:var(--fs-xs);line-height:1.5;text-align:center;
}

/* --- the copy --- */
.pdet__side .eyebrow{margin-bottom:var(--s-3)}
.pdet__side .eyebrow a{border-bottom:1px solid transparent;transition:border-color .2s var(--ease)}
.pdet__side .eyebrow a:hover{border-bottom-color:currentColor}
.pdet__name{margin:0;font-size:clamp(1.7rem,3.2vw,2.6rem);line-height:1.12}
.pdet__figline{
  margin:.6rem 0 0;display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.05rem,1.6vw,1.32rem);color:var(--green-700);
  font-variant-numeric:tabular-nums;direction:ltr;
}
[dir="rtl"] .pdet__figline{justify-content:flex-end}

.pdet__block{margin-top:clamp(1.5rem,3vw,2.25rem)}
.pdet__h{
  margin:0 0 .6rem;font-family:var(--font-display);font-size:.72rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--muted);
}
html[lang="ar"] .pdet__h{letter-spacing:normal;text-transform:none;font-size:.88rem}
.pdet__block p{margin:0;color:var(--ink-2);line-height:1.72}
html[lang="ar"] .pdet__block p{line-height:1.95}
.pdet__te{margin-top:.6rem !important;font-size:var(--fs-sm);color:var(--muted)}

/* analysis figures as data, not prose */
.pdet__analysis{margin-top:clamp(1.5rem,3vw,2.25rem)}
.pdet__figs{display:flex;flex-wrap:wrap;gap:.55rem}
.pdet__figs li{
  flex:1 1 92px;min-width:0;padding:.7rem .8rem;
  background:var(--white);border:1px solid var(--line-soft);border-radius:var(--r-md);
  text-align:center;
}
.pdet__figs b{
  display:block;font-family:var(--font-display);font-size:1.3rem;color:var(--green-700);
  font-variant-numeric:tabular-nums;direction:ltr;
}
.pdet__figs span{display:block;margin-top:.15rem;font-size:.68rem;color:var(--muted);line-height:1.35}

.pdet__benefits{display:grid;gap:.55rem}
.pdet__benefits li{
  display:flex;gap:.65em;align-items:flex-start;
  font-size:var(--fs-sm);color:var(--ink-2);line-height:1.6;
}
.pdet__benefits li::before{
  content:"";flex:none;width:7px;height:7px;margin-top:.55em;border-radius:50%;
  background:var(--gold-500);
}

.pdet__acts{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:clamp(1.5rem,3vw,2.25rem)}
.pdet__acts .btn{flex:1 1 190px;min-height:48px}
.pdet__acts svg{width:1.05em;height:1.05em;flex:none}
.pdet__note{margin-top:var(--s-4);font-size:var(--fs-xs);color:var(--muted);line-height:1.6}

/* --- others in this family --- */
.pdet__related{margin-top:clamp(2.5rem,5vw,4.5rem);padding-top:clamp(1.5rem,3vw,2.25rem);border-top:1px solid var(--line)}
.pdet__rel{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.pdet__relcard{
  display:block;padding:.7rem;background:var(--white);
  border:1px solid var(--line-soft);border-radius:var(--r-md);text-align:center;
  transition:border-color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease);
}
.pdet__relcard:hover{border-color:var(--green-200);transform:translateY(-3px);box-shadow:var(--shadow-md)}
.pdet__relcard img{
  width:100%;aspect-ratio:1;object-fit:contain;mix-blend-mode:multiply;margin-bottom:.4rem;
}
.pdet__relcard span{display:block;font-family:var(--font-display);font-weight:600;font-size:.85rem;color:var(--ink)}
.pdet__relcard em{
  display:block;margin-top:.15rem;font-style:normal;font-size:.75rem;
  color:var(--green-700);font-variant-numeric:tabular-nums;direction:ltr;
}

/* ---------- 13d. Photo zoom ----------
   The full-screen viewer built by assets/js/zoom.js. It sits above the
   header and the top bar, locks the page behind it, and only ever holds
   one image — the 1800px file, requested when the viewer opens. */
html.has-zoom, html.has-zoom body{overflow:hidden}
.zoom{
  position:fixed;inset:0;z-index:130;display:flex;flex-direction:column;
  background:rgba(9,20,13,.95);color:var(--white);
}
/* display:flex above outranks the user agent's [hidden] rule. */
.zoom[hidden]{display:none}
@supports (backdrop-filter:blur(6px)){.zoom{backdrop-filter:blur(6px)}}

.zoom__bar{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.7rem clamp(.7rem,2.5vw,1.5rem);
  border-bottom:1px solid rgba(255,255,255,.13);
}
.zoom__title{
  margin:0;font-family:var(--font-display);font-size:var(--fs-sm);
  color:rgba(255,255,255,.9);
}
.zoom__tools{display:flex;gap:.4rem;flex:none}
.zoom__btn{
  width:44px;height:44px;display:grid;place-items:center;cursor:pointer;
  border:1px solid rgba(255,255,255,.22);border-radius:var(--r-md);
  background:rgba(255,255,255,.07);color:var(--white);
  transition:background .2s var(--ease),border-color .2s var(--ease);
}
.zoom__btn:hover{background:rgba(255,255,255,.17);border-color:rgba(255,255,255,.42)}
.zoom__btn:focus-visible{outline:2px solid var(--white);outline-offset:2px}
.zoom__btn svg{width:20px;height:20px}
.zoom__btn--close{background:rgba(255,255,255,.15)}

.zoom__stage{
  flex:1;min-height:0;display:flex;align-items:center;justify-content:center;
  overflow:hidden;touch-action:none;padding:clamp(.5rem,2vw,1.5rem);
}
.zoom.is-zoomed .zoom__stage{cursor:grab}
.zoom.is-zoomed .zoom__stage:active{cursor:grabbing}
.zoom__img{
  max-width:100%;max-height:100%;display:block;background:var(--white);
  border-radius:var(--r-sm);transform-origin:center center;will-change:transform;
  user-select:none;-webkit-user-drag:none;
}

.zoom__foot{
  display:grid;gap:.55rem;justify-items:center;
  padding:.7rem clamp(.7rem,2.5vw,1.5rem);
  padding-bottom:calc(.7rem + env(safe-area-inset-bottom,0px));
  border-top:1px solid rgba(255,255,255,.13);
}
.zoom__dots{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center}
.zoom__dot{
  padding:.5rem 1rem;min-height:40px;cursor:pointer;
  border:1px solid rgba(255,255,255,.26);border-radius:var(--r-pill);
  background:transparent;color:rgba(255,255,255,.8);font-size:var(--fs-xs);
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
.zoom__dot:hover{border-color:rgba(255,255,255,.55);color:var(--white)}
.zoom__dot.is-on{background:var(--white);border-color:var(--white);color:var(--green-900);font-weight:600}
.zoom__hint{margin:0;font-size:var(--fs-xs);color:rgba(255,255,255,.6);text-align:center}
@media (max-width:560px){.zoom__hint{display:none}}

/* ---------- 14. Showrooms ----------
   A projected map of the Kingdom beside the list, with pin and row
   highlighting each other. The outline and pin coordinates are baked
   at build time by tools/build-map.js. */
.showrooms{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(1.75rem,4vw,4rem);align-items:start;
}
@media (max-width:900px){.showrooms{grid-template-columns:minmax(0,1fr)}}

/* --- map --- */
.smap{position:sticky;top:calc(var(--header-h) + var(--topbar-h) + 2rem)}
@media (max-width:900px){.smap{position:static;max-width:440px;margin-inline:auto}}
.smap svg{width:100%;height:auto;overflow:visible}
.smap__outline{
  fill:rgba(255,255,255,.06);
  stroke:var(--green-200);stroke-width:4;stroke-linejoin:round;stroke-linecap:round;
  opacity:.75;
}
/* Faint repeat of the outline, offset, to give the landmass some depth. */
.smap__shadow{
  fill:none;stroke:var(--gold-500);stroke-width:4;stroke-linejoin:round;
  opacity:.16;transform:translate(6px,7px);
}
.smap__hit{fill:transparent;cursor:pointer}
.smap__pin{cursor:pointer;outline:none}
.smap__dot{
  fill:var(--gold-500);stroke:var(--green-900);stroke-width:4;
  transition:transform .3s var(--ease),fill .3s var(--ease);
  transform-box:fill-box;transform-origin:center;
}
.smap__halo{
  fill:var(--gold-500);opacity:0;
  transform-box:fill-box;transform-origin:center;transform:scale(.4);
  transition:opacity .35s var(--ease),transform .35s var(--ease);
}
.smap__label{
  fill:#fff;font-family:var(--font-display);font-weight:700;font-size:30px;
  text-anchor:middle;paint-order:stroke;stroke:var(--green-900);stroke-width:6;
  opacity:0;transition:opacity .3s var(--ease);pointer-events:none;
}
.smap__pin:hover .smap__dot,
.smap__pin:focus-visible .smap__dot,
.smap__pin.is-active .smap__dot{transform:scale(1.35);fill:#fff}
.smap__pin:hover .smap__halo,
.smap__pin:focus-visible .smap__halo,
.smap__pin.is-active .smap__halo{opacity:.22;transform:scale(1)}
.smap__pin:hover .smap__label,
.smap__pin:focus-visible .smap__label,
.smap__pin.is-active .smap__label{opacity:1}

/* --- list --- */
.shoplist{display:grid;gap:.5rem}
.shoprow{
  position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:var(--s-4);align-items:start;
  padding:clamp(.95rem,1.8vw,1.25rem) clamp(1rem,2vw,1.35rem);
  border:1px solid rgba(255,255,255,.13);border-radius:var(--r-lg);
  background:rgba(255,255,255,.02);cursor:default;outline:none;
  transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);
}
.shoprow.is-active,.shoprow:focus-visible{
  background:rgba(255,255,255,.07);border-color:var(--gold-500);transform:translateY(-2px);
}
.shoprow__n{
  font-family:var(--font-display);font-weight:800;font-size:.78rem;letter-spacing:.1em;
  color:var(--gold-500);opacity:.75;padding-top:.25rem;
}
.shoprow__body{min-width:0}
.shoprow__region{
  margin:0 0 .15rem;font-family:var(--font-display);font-size:.68rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--green-200);
}
html[lang="ar"] .shoprow__region{letter-spacing:normal;text-transform:none;font-size:.82rem}
.shoprow__name{margin:0;font-size:clamp(.98rem,1.2vw,1.1rem);color:#fff}
.shoprow__addr{margin:.2rem 0 0;font-size:var(--fs-sm);color:#A9BCA6}

.shoprow__acts{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.15rem;margin-top:.7rem}
.shoprow__tel{
  display:inline-flex;align-items:center;gap:.5em;min-height:40px;
  font-family:var(--font-display);font-weight:600;font-size:.98rem;color:#fff;
  transition:color .25s var(--ease);
}
.shoprow__tel bdi{direction:ltr;unicode-bidi:isolate}
.shoprow__tel svg{width:15px;height:15px;flex:none;color:var(--green-200);transition:color .25s var(--ease)}
.shoprow__tel:hover,.shoprow__tel:hover svg{color:var(--gold-500)}
.shoprow__map{
  display:inline-flex;align-items:center;gap:.45em;min-height:40px;
  font-family:var(--font-display);font-weight:600;font-size:.85rem;color:var(--green-200);
  border-bottom:1.5px solid transparent;transition:.25s var(--ease);
}
.shoprow__map svg{width:1em;height:1em}
.shoprow__map:hover{color:#fff;border-bottom-color:rgba(255,255,255,.55);gap:.75em}

@media (max-width:1080px){
  .shoprow__tel,.shoprow__map{min-height:44px}
}
@media (prefers-reduced-motion:reduce){
  .smap__dot,.smap__halo,.smap__label,.shoprow{transition:none}
}

/* ---------- 14b. Before / after projects ----------
   The strongest proof on the page, so the pairs get full width.
   Note: "BEFORE"/"AFTER" is burned into the source JPEGs, so those
   labels stay English even in Arabic — flagged for new source art. */
.projects{display:grid;gap:clamp(2rem,4vw,3.25rem)}
.project{margin:0}
.project__pair{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(.5rem,1.2vw,1rem);
  border-radius:var(--r-xl);overflow:hidden;
}
.project__pair img{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--sand)}
.project figcaption{
  margin-top:var(--s-4);font-family:var(--font-display);font-weight:600;
  font-size:var(--fs-h3);color:var(--ink);
}
@media (max-width:560px){.project__pair img{aspect-ratio:4/3}}

/* ---------- 14c. Success partners ----------
   One moving row of logos rather than a grid of cards — the layout the
   client pointed at on a reference site. The row is cloned in script
   until it is wider than the rail, then slid by exactly the width of
   one copy, so the loop has no seam.

   Cards are gone on purpose: a logo wall reads better when nothing
   frames the marks. The company name stays as a quiet caption, because
   one partner has no logo file yet and would otherwise be a blank gap. */
.pmarq{
  position:relative;overflow:hidden;
  /* Fade both ends so logos enter and leave instead of being cut. */
  -webkit-mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent);
}
.pmarq__track{
  list-style:none;margin:0;padding:0;
  display:flex;align-items:stretch;
  gap:clamp(1.5rem,4vw,3.5rem);
  width:max-content;
  animation:pmarq-slide var(--marq-time,40s) linear infinite;
}
@keyframes pmarq-slide{
  from{transform:translateX(0)}
  to{transform:translateX(var(--marq-end,-50%))}
}
.pmarq:hover .pmarq__track,
.pmarq:focus-within .pmarq__track{animation-play-state:paused}

/* Before script measures the row, and for anyone who would rather it
   held still, the logos sit as a centred wrapped row instead. */
.pmarq__track:not(.is-running){animation:none}
@media (prefers-reduced-motion:reduce){
  .pmarq{-webkit-mask-image:none;mask-image:none}
  .pmarq__track{
    animation:none !important;transform:none !important;
    width:auto;flex-wrap:wrap;justify-content:center;
    row-gap:clamp(1.5rem,3vw,2.5rem);
  }
  .pmarq__track .partner[aria-hidden="true"]{display:none}
}

.partner{
  flex:0 0 auto;
  width:clamp(140px,15vw,200px);
  display:flex;flex-direction:column;align-items:center;
  gap:.85rem;text-align:center;
}

.partner__mark{
  --mark-h:clamp(52px,6.4vw,76px);
  display:flex;align-items:center;justify-content:center;
  width:100%;height:var(--mark-h);
}
/* Bound the logo with real lengths, not percentages. A percentage
   height on a flex item resolves against the track, which is auto here,
   so the browser falls back to the file's own size and a wide wordmark
   overflows the frame. */
.partner__mark img{
  width:auto;height:auto;
  max-width:100%;max-height:var(--mark-h);
  object-fit:contain;display:block;
}

/* The name plate stands in until a logo file exists. */
.partner__mono{
  display:none;align-items:center;justify-content:center;
  padding:.45em .9em;border-radius:var(--r-md);
  background:var(--sand);border:1px dashed var(--line);
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(.78rem,1.4vw,.9rem);color:var(--green-700);
  line-height:1.25;max-width:100%;
}
.partner.is-plate .partner__mark img{display:none}
.partner.is-plate .partner__mono{display:inline-flex}

/* One partner supplied only the white-on-dark version of their mark.
   That is a real variant, not a mistake, so the row gives it the dark
   ground it was drawn for instead of recolouring it. */
.partner--ondark .partner__mark{
  background:var(--green-900);border-radius:var(--r-md);
  padding:.45rem .8rem;
}
.partner--ondark .partner__mark img{max-height:calc(var(--mark-h) - .9rem)}

.partner__name{
  margin:0;font-size:.82rem;line-height:1.45;color:var(--muted);
  text-wrap:balance;
}

/* ---------- 15. CTA band ---------- */
.cta{
  position:relative;border-radius:var(--r-xl);overflow:hidden;isolation:isolate;
  padding:clamp(2.5rem,6vw,5rem) clamp(1.5rem,5vw,4.5rem);color:#fff;text-align:center;
}
.cta img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.cta::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(15,38,24,.8)}
.cta h2{color:#fff;max-width:20ch;margin-inline:auto}
.cta p{color:#C6D5C2;max-width:56ch;margin:var(--s-4) auto 0}
.cta__row{display:flex;flex-wrap:wrap;gap:var(--s-3);justify-content:center;margin-top:var(--s-6)}

/* ---------- 16. Footer ----------
   Dark green ground, as on the live site. The header's black logo is
   used here too, sitting on a light plate so it stays legible — the
   same lockup rather than a second colour variant of it. */
.footer{
  background:var(--green-900);color:#B9CBB6;
  padding-block:clamp(3rem,6vw,5rem) var(--s-6);
}
.footer__grid{display:grid;gap:clamp(2rem,4vw,3rem);grid-template-columns:1.5fr 1fr 1fr 1.2fr}
@media (max-width:900px){.footer__grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer__grid{grid-template-columns:1fr}}

.footer__plate{
  display:inline-block;background:var(--cream);border-radius:var(--r-md);
  padding:.85rem 1.15rem;margin-bottom:var(--s-4);
}
.footer__logo{height:52px;width:auto;display:block}

.footer h4{
  color:#fff;font-family:var(--font-display);font-weight:700;
  font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:var(--s-4);
}
html[lang="ar"] .footer h4{letter-spacing:normal;text-transform:none;font-size:1rem}
.footer p{font-size:var(--fs-sm);line-height:1.75;color:#B9CBB6}
.footer a{font-size:var(--fs-sm);color:#B9CBB6;transition:color .2s var(--ease)}
.footer a:hover{color:#fff}
.footer li + li{margin-top:.62rem}
.footer__social{display:flex;gap:.6rem;margin-top:var(--s-5)}
.footer__social a{
  width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.2);
  display:grid;place-items:center;color:#B9CBB6;transition:.25s var(--ease);
}
.footer__social a:hover{background:#fff;color:var(--green-900);border-color:#fff}
.footer__social svg{width:16px;height:16px}
.footer__bar{
  margin-top:clamp(2.5rem,5vw,3.5rem);padding-top:var(--s-5);
  border-top:1px solid rgba(255,255,255,.13);
  display:flex;flex-wrap:wrap;gap:var(--s-3);justify-content:space-between;font-size:var(--fs-xs);
}

/* ---------- 17. Floating WhatsApp ---------- */
.wa{
  position:fixed;inset-block-end:22px;inset-inline-end:22px;z-index:110;
  width:54px;height:54px;border-radius:50%;background:#25D366;color:#fff;
  display:grid;place-items:center;box-shadow:0 6px 24px rgba(0,0,0,.22);
  transition:transform .3s var(--ease);
}
.wa:hover{transform:scale(1.08)}
.wa svg{width:27px;height:27px}

/* ---------- 18. Reveal (progressive enhancement) ----------
   Content is visible by default; JS opts in to animating it. A script
   failure can never leave a section blank the way the original does. */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
}

/* ---------- 19. Interior page header ---------- */
.phead{
  position:relative;padding-block:calc(var(--header-h) + var(--topbar-h) + clamp(3.5rem,7vw,6rem)) clamp(3rem,6vw,5rem);
  color:#fff;isolation:isolate;overflow:hidden;
}
.phead img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.phead::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(11,26,17,.9),rgba(11,26,17,.55))}
.phead--slim{padding-block:calc(var(--header-h) + var(--topbar-h) + clamp(2rem,4vw,3.25rem)) clamp(1.75rem,3vw,2.5rem)}
.phead h1{color:#fff;max-width:18ch}
.phead p{color:#CBD8C7;max-width:56ch;margin-top:var(--s-4)}
.phead .eyebrow{color:#C6D5C2;margin-bottom:var(--s-4)}

/* ---------- 20. Forms ---------- */
.form{display:grid;gap:var(--s-4)}
.field{display:grid;gap:.45rem}
.field label{font-family:var(--font-display);font-weight:600;font-size:var(--fs-sm)}
.field input,.field select,.field textarea{
  font:inherit;font-size:var(--fs-sm);padding:.85em 1em;border:1.5px solid var(--line);
  border-radius:var(--r-md);background:var(--white);color:var(--ink);width:100%;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--green-600);box-shadow:0 0 0 3px var(--green-100);
}
.field textarea{min-height:130px;resize:vertical}
.form__row{display:grid;gap:var(--s-4);grid-template-columns:1fr 1fr}
@media (max-width:620px){.form__row{grid-template-columns:1fr}}
.form__note{font-size:var(--fs-xs);color:var(--muted)}
.form__ok{
  display:none;padding:1rem 1.15rem;border-radius:var(--r-md);
  background:var(--green-100);border:1px solid var(--green-200);
  color:var(--green-900);font-size:var(--fs-sm);
}
.form__ok.is-on{display:block}
.form__ok.is-bad{background:#F7ECE8;border-color:#E0C4BA;color:#7A4030}
/* The honeypot is hidden from people without display:none, which some
   bots check for. */
.form__trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form.is-sending{opacity:.7;pointer-events:none}

/* ---------- 20b. Touch targets ----------
   Everything tappable clears 44x44 on the layouts that get used by
   thumb rather than mouse. */
@media (max-width:1080px){
  .lang__btn{
    display:inline-flex;align-items:center;justify-content:center;
    min-height:44px;min-width:46px;padding-inline:.9rem;font-size:.85rem;
  }
  .btn--sm{min-height:44px;padding-block:0}
  .header__actions .btn--profile{min-height:44px;min-width:44px}
  .link-arrow{padding-block:.6rem}
  .branch__tel{min-height:44px;align-items:center}
  .branch__link{padding-top:var(--s-2)}
  .footer a{display:inline-flex;align-items:center;min-height:44px}
  .footer li + li{margin-top:.1rem}
  .footer__social a{width:44px;height:44px}
  .footer__bar span{min-height:auto}
  .plist__item{min-height:46px}
  .contact-list a{display:inline-flex;align-items:center;min-height:44px}
}

/* ---------- 21. Utilities ---------- */
.skip{
  position:absolute;inset-inline-start:-9999px;top:0;z-index:200;
  background:var(--green-700);color:#fff;padding:.8em 1.2em;border-radius:0 0 var(--r-md) 0;
}
.skip:focus{inset-inline-start:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.mt-4{margin-top:var(--s-4)}
.mt-5{margin-top:var(--s-5)}
.mt-6{margin-top:var(--s-6)}
.contact-list li{display:flex;gap:.85em;align-items:flex-start;font-size:var(--fs-sm)}
.contact-list li + li{margin-top:var(--s-4)}
.contact-list svg{width:18px;height:18px;flex:none;color:var(--green-600);margin-top:.25em}