/* ==========================================================================
   Lotus East — design system
   Layout and rhythm follow Salient "Corporate 3": a full-bleed dark hero,
   very generous section padding, dash-prefixed pill buttons, quiet cards
   that come alive on hover. Colour and type are Lotus East's own.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Type — the brand faces, self-hosted and subset per script. Future Tense sets
   Latin display, Montserrat sets Latin text, Firjar carries all the Arabic.
   unicode-range means an Arabic page never downloads the Latin faces, and a
   Latin page never downloads Firjar. Firjar has no Latin glyphs at all, so
   Montserrat sits behind it in the stack for part numbers and brand names.
   -------------------------------------------------------------------------- */
@font-face{font-family:"Future Tense";src:url("../fonts/future-tense-400.woff2") format("woff2");
  font-weight:400 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2190-2193,U+2212,U+2215}

@font-face{font-family:"Montserrat";src:url("../fonts/montserrat-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2190-2193,U+2212,U+2215}
@font-face{font-family:"Montserrat";src:url("../fonts/montserrat-500.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2190-2193,U+2212,U+2215}
@font-face{font-family:"Montserrat";src:url("../fonts/montserrat-600.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2190-2193,U+2212,U+2215}
@font-face{font-family:"Montserrat";src:url("../fonts/montserrat-700.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2190-2193,U+2212,U+2215}

@font-face{font-family:"Firjar";src:url("../fonts/firjar-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0020-0040,U+005B-0060,U+007B-007E,U+00A0,U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200F,U+2010-2011,U+2018-201F,U+2022,U+2026,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"Firjar";src:url("../fonts/firjar-600.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0020-0040,U+005B-0060,U+007B-007E,U+00A0,U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200F,U+2010-2011,U+2018-201F,U+2022,U+2026,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"Firjar";src:url("../fonts/firjar-700.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0020-0040,U+005B-0060,U+007B-007E,U+00A0,U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200F,U+2010-2011,U+2018-201F,U+2022,U+2026,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"Firjar";src:url("../fonts/firjar-900.woff2") format("woff2");
  font-weight:900;font-style:normal;font-display:swap;unicode-range:U+0020-0040,U+005B-0060,U+007B-007E,U+00A0,U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200F,U+2010-2011,U+2018-201F,U+2022,U+2026,U+FB50-FDFF,U+FE70-FEFF}

/* -------------------------------------------------------------------------- */
:root{
  /* brand */
  /* Carbon Fiber, and three steps up from it for cards and dividers */
  --ink:#262626; --ink-2:#303030; --ink-3:#3D3D3D; --ink-4:#4C4C4C;
  /* Crimson Red — 8.08:1 both ways against white */
  --accent:#A50000; --accent-base:#A50000; --accent-600:#8A0000; --accent-050:#FBEDED;
  /* the same red mixed 45% toward white: 1.87:1 on Carbon Fiber becomes 4.56:1,
     so the accent stays legible on the dark bands instead of sinking into them */
  --accent-on-dark:#CE7373;

  /* Wild Sand and its neutral steps */
  --stone:#F4F4F4; --stone-2:#E8E8E8; --stone-3:#D6D6D6;
  --g100:#F4F4F4; --g200:#E4E4E4; --g300:#C9C9C9;
  --g400:#9A9A9A; --g500:#6E6E6E; --g600:#4F4F4F; --g700:#343434;

  /* semantic */
  --bg:#FFFFFF; --surface:#FFFFFF; --surface-2:var(--stone);
  --text:#262626; --text-muted:var(--g500); --border:var(--g200);
  --on-dark:#FFFFFF; --on-dark-muted:rgba(255,255,255,.66);

  /* type */
  --font:"Montserrat","Firjar","Helvetica Neue",Arial,sans-serif;
  --font-head:"Future Tense","Firjar","Montserrat",sans-serif;
  --lh-body:1.75; --lh-head:1.06;
  --ls-head:-0.01em;

  /* fluid display sizes — the hero and section heads scale with the viewport */
  --fs-hero:clamp(34px,5vw,64px);
  --fs-h1:clamp(34px,4.6vw,62px);
  --fs-h2:clamp(28px,3.6vw,48px);
  --fs-h3:clamp(21px,2vw,28px);
  --fs-h4:18px;
  --fs-lead:clamp(17px,1.35vw,20px);
  --fs-body:16px; --fs-sm:14px; --fs-xs:12.5px;

  /* layout */
  --wrap:1300px; --wrap-narrow:900px; --pad:28px;
  --sec:clamp(72px,9vw,132px);      /* vertical section rhythm */
  --radius:10px; --radius-lg:16px; --radius-full:999px;
  --shadow-sm:0 2px 8px rgba(38,38,38,.06);
  --shadow:0 18px 44px -18px rgba(38,38,38,.28);
  --shadow-lg:0 34px 80px -28px rgba(38,38,38,.42);
  --ease:cubic-bezier(.22,.61,.36,1);
  --header-h:84px;
  /* the top strip only exists at the width where it is shown, so the
     heroes clear the bar alone on anything narrower */
  --header-top-h:0px;
  --header-total:calc(var(--header-h) + var(--header-top-h));
}

/* Arabic rides a touch larger and looser than the Latin faces. */
/* Arabic puts Firjar first so the space, the digits and the punctuation come
   from it. Latin letters have no glyph in Firjar and fall through on their own. */
html[lang="ar"]{
  --lh-body:1.95;--ls-head:0;--fs-body:16.5px;
  --font:"Firjar","Montserrat","Helvetica Neue",Arial,sans-serif;
  --font-head:"Firjar","Future Tense","Montserrat",sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font);font-size:var(--fs-body);line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  /* clip, not hidden: hidden would make body a scroll container and
     break position:sticky for the facts card */
  overflow-x:clip;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,h4,h5{
  font-family:var(--font-head);font-weight:700;line-height:var(--lh-head);
  letter-spacing:var(--ls-head);margin:0 0 .5em;
}
h1{font-size:var(--fs-h1)} h2{font-size:var(--fs-h2)} h3{font-size:var(--fs-h3)} h4{font-size:var(--fs-h4)}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
::selection{background:var(--accent);color:#fff}

/* --------------------------------------------------------------- utilities */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.wrap--narrow{max-width:var(--wrap-narrow)}
.sec{padding-block:var(--sec)}
.sec--tight{padding-block:calc(var(--sec) * .62)}
/* The photo shelf borrows its breathing room from the section above, which
   already ends on a full measure of padding — a second one here only opened a
   gap. It keeps a shorter measure below so the block reads as one band. */
.sec--shelf{padding-block:0 calc(var(--sec) * .62)}
.sec--shelf .sechead{margin-bottom:clamp(28px,3.2vw,44px)}
.sec--strip{padding-block:clamp(15px,2vw,26px)}
.sec--stone{background:var(--surface-2)}
.sec--ink{background:var(--ink);color:var(--on-dark)}
/* A crimson rise off the bottom edge of the dark bands. Symmetric, so it needs
   no RTL mirror, and dark enough that white type still measures 10.9:1 over the
   reddest point. Charcoal stays the dominant value; this is the accent
   breathing through it. */
.sec--ink,.cta,.footer{
  background-color:var(--ink);
  background-image:radial-gradient(135% 78% at 50% 118%,
    rgba(122,14,44,.92) 0%, rgba(122,14,44,.34) 42%, transparent 68%);
  background-repeat:no-repeat;
}
.sec--ink h1,.sec--ink h2,.sec--ink h3{color:#fff}
.center{text-align:center}
.lead{font-size:var(--fs-lead);color:var(--text-muted);line-height:1.75}
.sec--ink .lead{color:var(--on-dark-muted)}
.muted{color:var(--text-muted)}
.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}

/* Eyebrow — small caps label with a leading rule, used above every heading. */
.eyebrow{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--font);font-size:var(--fs-xs);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
  margin:0 0 18px;
}
html[lang="ar"] .eyebrow{letter-spacing:0;text-transform:none;font-size:13.5px}
.eyebrow::before{content:"";width:30px;height:2px;background:currentColor;flex:none}
.sec--ink .eyebrow{color:var(--accent-on-dark)}
/* Crimson Red is 1.87:1 on Carbon Fiber, so anywhere the accent is ink rather
   than a fill on a dark ground it steps up to the lighter tint. Fills keep the
   full-strength red — white on it measures 8.08:1. */
.hero .eyebrow,
.header .nav a::after,
.drawer nav a:hover,
.stats--ink .stat__n em,
.sec--ink .founder__note blockquote,
.cmeta__i svg,
.bcard__cta{color:var(--accent-on-dark)}
.header .nav a::after{background:var(--accent-on-dark)}
.sec--ink .founder__note blockquote{border-inline-start-color:var(--accent-on-dark)}
.bcard__cta{border-block-end-color:var(--accent-on-dark)}

/* An eyebrow standing in for a heading — it carries the section on its own, so
   it is set at heading scale while keeping the accent colour that marks it. */
.eyebrow--lead{
  font-family:var(--font-head);font-weight:700;
  font-size:clamp(21px,2.4vw,30px);letter-spacing:.06em;line-height:1.25;
  margin:0;
}
html[lang="ar"] .eyebrow--lead{font-size:clamp(22px,2.5vw,32px);letter-spacing:0}

/* Section head — Salient's two-column "big heading left, copy right". */
.sechead{display:grid;gap:20px 64px;align-items:end;margin-bottom:clamp(38px,4.5vw,64px)}
@media (min-width:900px){
  .sechead--split{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
  .sechead--split .sechead__body{padding-bottom:8px}
}
.sechead h2{margin:0;max-width:16ch}
.sechead--wide h2{max-width:22ch}
.sechead--center{justify-items:center;text-align:center}
.sechead--center h2{max-width:24ch}
.sechead--center .eyebrow::before{display:none}
/* centred text still needs a measure, or the lead runs the full column width */
.sechead--center .sechead__body{max-width:62ch}

/* ------------------------------------------------------------------ button */
.btn{
  --btn-bg:var(--accent);--btn-fg:#fff;
  display:inline-flex;align-items:center;gap:14px;
  background:var(--btn-bg);color:var(--btn-fg);
  border:1px solid transparent;border-radius:var(--radius-full);
  padding:16px 32px;font-weight:600;font-size:var(--fs-sm);
  letter-spacing:.06em;text-transform:uppercase;cursor:pointer;
  transition:background .25s var(--ease),color .25s var(--ease),
             border-color .25s var(--ease),transform .25s var(--ease);
}
html[lang="ar"] .btn{letter-spacing:0;text-transform:none;font-size:15px}
/* the dash that grows on hover — Salient's signature button tell */
.btn::before{
  content:"";width:16px;height:2px;background:currentColor;flex:none;
  transition:width .3s var(--ease);
}
.btn:hover{background:var(--accent-600);transform:translateY(-2px)}
.btn:hover::before{width:26px}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--text);border-color:var(--g300)}
.btn--ghost:hover{background:var(--text);--btn-fg:#fff;border-color:var(--text)}
.btn--light{--btn-bg:transparent;--btn-fg:#fff;border-color:rgba(255,255,255,.34)}
.btn--light:hover{background:#fff;--btn-fg:var(--ink);border-color:#fff}
.btn--solid-light{--btn-bg:#fff;--btn-fg:var(--ink)}
.btn--solid-light:hover{background:var(--stone-2)}
.btn--sm{padding:12px 22px;font-size:13px}
.btn--block{width:100%;justify-content:center}
.btn[disabled]{opacity:.5;pointer-events:none}

/* Text link with a sliding arrow. */
.tlink{
  display:inline-flex;align-items:center;gap:10px;font-weight:600;
  font-size:var(--fs-sm);letter-spacing:.05em;text-transform:uppercase;color:var(--accent);
}
html[lang="ar"] .tlink{letter-spacing:0;text-transform:none;font-size:15px}
.tlink svg{transition:transform .25s var(--ease)}
[dir="rtl"] .tlink svg{transform:scaleX(-1)}
.tlink:hover svg{transform:translateX(5px)}
[dir="rtl"] .tlink:hover svg{transform:scaleX(-1) translateX(5px)}

/* ------------------------------------------------------------------ header */
.header{
  position:fixed;inset-block-start:0;inset-inline:0;z-index:60;
  transition:background .3s var(--ease),box-shadow .3s var(--ease),
             border-color .3s var(--ease);
  border-bottom:1px solid transparent;
}
/* Three tracks with equal flanks: the middle one then sits on the centre of the
   page rather than on the centre of whatever space the logo happens to leave. */
.header__bar{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:20px;height:var(--header-h);
}
.header__bar .brand{justify-self:start}
.header__mid{display:flex;align-items:center;gap:30px;justify-self:center}
.header a{color:#fff}
/* .header a is more specific than .btn, so without this the buttons could never
   change their own text colour — on hover .btn--light turns its plate white and
   the label was staying white with it. */
.header .btn{color:var(--btn-fg)}

/* Top strip: language on one side, the accounts to follow in the middle, the
   number to ring on the other. It is hidden on narrow screens, where the drawer
   already carries all three, and it folds away once the page is scrolled so the
   bar alone travels with the reader. */
.header__top{
  background:var(--accent-base);overflow:hidden;
  max-height:var(--header-top-h);transition:max-height .32s var(--ease),opacity .32s var(--ease);
}
.header__topbar{
  /* three tracks rather than auto margins: the middle one is centred on the
     page regardless of how wide the language pill and the number turn out */
  display:none;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;
  height:var(--header-top-h);font-size:var(--fs-xs);
}
@media (min-width:1060px){
  :root{--header-top-h:40px}
  .header__topbar{display:grid}
}
.header.is-stuck .header__top{max-height:0;opacity:0}
.header__top .langsw{
  border-color:rgba(255,255,255,.45);color:#fff;padding:5px 12px;font-size:var(--fs-xs);
}
.header__top .langsw:hover{background:rgba(255,255,255,.14);border-color:#fff}
.header__tel{
  display:inline-flex;align-items:center;gap:8px;justify-self:end;
  font-weight:600;letter-spacing:.02em;
}
.header__top .langsw{justify-self:start}
/* .social.social--top, not .social--top: the footer's own .social a rule sits
   further down the sheet and would otherwise win the tie on source order,
   sizing these 40px with a 22px top margin and bursting the strip. */
.social.social--top{display:flex;gap:6px;margin-block-start:0}
.social.social--top a{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:999px;color:rgba(255,255,255,.86);
  transition:background .2s var(--ease),color .2s var(--ease);
}
.social.social--top a:hover{background:rgba(255,255,255,.18);color:#fff}
/* Frosted glass once the page is scrolled. 62% is as transparent as the tint
   can go and still keep the nav's 82%-white type at 4.55:1 over the lightest
   band that travels under it — measured, not guessed. */
.header.is-stuck{
  background:rgba(38,38,38,.62);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
          backdrop-filter:blur(22px) saturate(150%);
  border-block-end-color:rgba(255,255,255,.14);
  box-shadow:0 10px 34px -16px rgba(0,0,0,.55);
}
/* without a backdrop filter the tint is all there is, so it goes back to solid */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .header.is-stuck{background:rgba(38,38,38,.94)}
}
/* pages without a dark hero start solid */
.header--solid{background:var(--ink)}


.brand{display:flex;align-items:center;gap:12px;flex:none}
.brand__logo{height:42px;width:auto}
@media (max-width:600px){
  .brand__logo{height:34px}
  /* the mark stays 34px but its link gets a full-height hit area */
  .header .brand{min-height:44px;align-items:center}
}
.footer .brand__logo{height:46px}
.brand__type{display:grid;line-height:1.05}
.brand__name{font-family:var(--font-head);font-weight:700;font-size:23px;letter-spacing:.02em}
.brand__name em{font-style:normal;color:var(--accent)}
.brand__sub{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.55);font-weight:500}
html[lang="ar"] .brand__sub{letter-spacing:.06em}

.nav{display:none;align-items:center;gap:34px}
@media (min-width:1060px){.nav{display:flex}}
.nav a{
  position:relative;font-size:var(--fs-sm);font-weight:500;letter-spacing:.03em;
  color:rgba(255,255,255,.82);padding-block:6px;transition:color .2s var(--ease);
}
html[lang="ar"] .nav a{font-size:15.5px;letter-spacing:0}
.nav a::after{
  content:"";position:absolute;inset-block-end:0;inset-inline-start:0;
  height:2px;width:0;background:var(--accent);transition:width .28s var(--ease);
}
.nav a:hover,.nav a[aria-current]{color:#fff}
.nav a:hover::after,.nav a[aria-current]::after{width:100%}

.header__end{display:flex;align-items:center;gap:14px;justify-self:end}
/* .btn--ghost is drawn for light grounds — dark type, grey rule. In the header it
   sits on the dark bar, so it takes the light treatment instead. */
.header .btn--ghost{color:#fff;border-color:rgba(255,255,255,.34);background:transparent}
.header .btn--ghost:hover:not([disabled]){border-color:#fff;background:rgba(255,255,255,.1)}
/* a disabled catalogue button reads as waiting for its file, not as broken —
   dimmed, but its label still has to be readable */
.header__cta[disabled]{opacity:.62;cursor:default;pointer-events:none}
.langsw__flag{
  width:20px;height:14px;border-radius:2px;object-fit:cover;flex:none;
  box-shadow:0 0 0 1px rgba(255,255,255,.28);
}
.langsw{
  display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-sm);font-weight:600;
  color:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.24);
  border-radius:var(--radius-full);padding:9px 15px;transition:.22s var(--ease);
}
.langsw:hover{border-color:#fff;color:#fff}
.header__cta{display:none}
@media (min-width:780px){.header__cta{display:inline-flex}}
.burger{
  display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  background:none;border:1px solid rgba(255,255,255,.24);border-radius:var(--radius-full);
  color:#fff;cursor:pointer;transition:.22s var(--ease);
}
.burger:hover{border-color:#fff}
@media (min-width:1060px){.burger{display:none}}

/* slide-in mobile menu */
.drawer{position:fixed;inset:0;z-index:70;visibility:hidden;pointer-events:none}
.drawer[data-open="1"]{visibility:visible;pointer-events:auto}
.drawer__scrim{position:absolute;inset:0;background:rgba(38,38,38,.62);
  opacity:0;transition:opacity .3s var(--ease)}
.drawer[data-open="1"] .drawer__scrim{opacity:1}
.drawer__panel{
  position:absolute;inset-block:0;inset-inline-end:0;width:min(88vw,380px);
  background:var(--ink);color:#fff;padding:26px 28px 40px;overflow-y:auto;
  transform:translateX(100%);transition:transform .36s var(--ease);
}
[dir="rtl"] .drawer__panel{transform:translateX(-100%)}
.drawer[data-open="1"] .drawer__panel{transform:none}
.drawer__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}
.drawer__close{background:none;border:0;color:#fff;cursor:pointer;padding:8px;margin:-8px}
.drawer nav{display:grid;gap:2px}
.drawer nav a{
  font-family:var(--font-head);font-size:26px;font-weight:700;padding-block:11px;
  border-block-end:1px solid rgba(255,255,255,.09);transition:color .2s var(--ease);
}
.drawer nav a:hover{color:var(--accent)}
.drawer__foot{margin-top:30px;display:grid;gap:12px;font-size:var(--fs-sm);
  color:var(--on-dark-muted)}
.drawer__foot a{display:flex;align-items:center;gap:10px}

/* -------------------------------------------------------------------- hero */
.hero{
  position:relative;display:flex;align-items:center;min-height:min(92vh,860px);
  padding-block:calc(var(--header-total) + 60px) 90px;background:var(--ink);
  color:#fff;overflow:hidden;
}
.hero--short{min-height:min(58vh,540px);padding-block:calc(var(--header-total) + 54px) 68px}
.hero__media{
  position:absolute;inset:0;overflow:hidden;
  /* the ground under every hero layer — also the whole background when no
     photograph or video has been uploaded yet */
  background:
    radial-gradient(120% 90% at 78% 22%, #24303B 0%, transparent 62%),
    radial-gradient(90% 70% at 12% 88%, #2A1714 0%, transparent 58%),
    var(--ink);
}
.hero__media img,.hero__media video{width:100%;height:100%;object-fit:cover}

/* Background video. site.js attaches the source and fades it in once it can
   play, so a stalled download never shows a black rectangle. */
.hero__video{
  position:absolute;inset:0;z-index:1;
  opacity:0;transition:opacity .9s var(--ease);
}
.hero__video.is-playing{opacity:1}

/* A film on the brand's own YouTube channel, standing in where there is no
   file to host. It is decoration and nothing else: muted, no controls, no
   pointer events, no tab stop — and served from the no-cookie domain so a
   background never tracks a visitor. */
.hero__yt{
  position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;
  container-type:size;
}
/* The still sits ON TOP of the player rather than under it. A browser will not
   start even a muted autoplay inside a frame it considers invisible, so the
   frame has to be rendered from the first paint — and the photograph is what
   hides it until it is genuinely running. If autoplay never happens, the
   photograph simply stays, which is the behaviour we want anyway. */
.hero__media--yt > img{position:relative;z-index:2;transition:opacity .9s var(--ease)}
.hero__media--yt.is-live > img{opacity:0}
.hero__yt iframe{
  position:absolute;top:50%;left:50%;border:0;width:100%;height:100%;
  transform:translate(-50%,-50%) scale(1.06);
}
@supports (width:1cqh){
  /* cover the hero whatever its shape — the 16:9 frame grows past the edge on
     whichever axis is short, the way object-fit:cover would */
  .hero__yt iframe{width:max(100%,177.78cqh);height:max(100%,56.25cqw)}
}

/* --- stand-in motion, used until a real clip is uploaded ----------------- */
.hero__glow{
  position:absolute;z-index:0;border-radius:50%;pointer-events:none;
  will-change:transform;
}
.hero__glow--a{
  width:62vw;height:62vw;inset-inline-start:-10vw;inset-block-end:-24vw;
  background:radial-gradient(closest-side, rgba(165,0,0,.46), rgba(165,0,0,0) 72%);
  animation:heroDriftA 26s ease-in-out infinite alternate;
}
.hero__glow--b{
  width:48vw;height:48vw;inset-inline-end:-8vw;inset-block-start:-18vw;
  background:radial-gradient(closest-side, rgba(86,140,178,.34), rgba(86,140,178,0) 72%);
  animation:heroDriftB 34s ease-in-out infinite alternate;
}
@keyframes heroDriftA{
  from{transform:translate3d(0,0,0) scale(1)}
  to  {transform:translate3d(12vw,-7vw,0) scale(1.18)}
}
@keyframes heroDriftB{
  from{transform:translate3d(0,0,0) scale(1.12)}
  to  {transform:translate3d(-9vw,9vw,0) scale(.92)}
}
/* a faint engineered hatch sliding the other way, so the light has texture
   to move against rather than drifting over flat colour */
.hero__hatch{
  position:absolute;inset:-6% -12%;z-index:0;pointer-events:none;
  background-image:repeating-linear-gradient(115deg,
    rgba(255,255,255,.05) 0 1px, transparent 1px 26px);
  animation:heroHatch 34s linear infinite;
}
@keyframes heroHatch{from{transform:translateX(0)}to{transform:translateX(57.4px)}}
@media (prefers-reduced-motion:reduce){
  .hero__glow,.hero__hatch{animation:none}
}

/* Two stacked veils. Raw footage is busy — machine edges and pipes cut the
   letterforms apart even when the luminance contrast measures fine — so the
   plate under the copy is held much darker than a still photograph needs. */
.hero__media::after{
  content:"";position:absolute;inset:0;z-index:2;
  background:
    linear-gradient(to right,rgba(38,38,38,.95) 0%,rgba(38,38,38,.84) 48%,rgba(38,38,38,.60) 100%),
    linear-gradient(to top,rgba(38,38,38,.90) 0%,rgba(38,38,38,.10) 55%);
}
[dir="rtl"] .hero__media::after{
  background:
    linear-gradient(to left,rgba(38,38,38,.95) 0%,rgba(38,38,38,.84) 48%,rgba(38,38,38,.60) 100%),
    linear-gradient(to top,rgba(38,38,38,.90) 0%,rgba(38,38,38,.10) 55%);
}
/* Calm the footage itself as well as darken it: a touch of blur removes the
   high-frequency detail that fights the type. The slight scale hides the soft
   edge blur leaves at the frame border. */
.hero__media > img,
.hero__video,
.hero__yt{filter:brightness(.62) saturate(.85) blur(2px)}
.hero__media > img,
.hero__video{transform:scale(1.04)}

/* A company hero carries a mark, one line and a meta row — far less type than
   the home page holds — so the footage is allowed through much further. The
   numbers were picked against the clip's own frames: on its brightest frame
   white text still measures 5.2:1, well clear of the 4.5 it needs. */
.hero--short .hero__media::after{
  background:
    linear-gradient(to right,rgba(38,38,38,.83) 0%,rgba(38,38,38,.68) 48%,rgba(38,38,38,.41) 100%),
    linear-gradient(to top,rgba(38,38,38,.77) 0%,rgba(38,38,38,.06) 55%);
}
[dir="rtl"] .hero--short .hero__media::after{
  background:
    linear-gradient(to left,rgba(38,38,38,.83) 0%,rgba(38,38,38,.68) 48%,rgba(38,38,38,.41) 100%),
    linear-gradient(to top,rgba(38,38,38,.77) 0%,rgba(38,38,38,.06) 55%);
}
.hero--short .hero__media > img,
.hero--short .hero__video,
.hero--short .hero__yt{filter:brightness(.75) saturate(.92) blur(1.2px)}

.hero__inner{position:relative;z-index:2;width:100%}
/* The hero runs centred: eyebrow, headline and the two buttons on one axis. */
.hero__body{max-width:min(700px,92%);margin-inline:auto;text-align:center}
/* the eyebrow's leading rule reads as a hanging indent once centred, and with
   the paragraph gone it is the only thing above the headline — so it carries a
   little more weight than the section eyebrows do */
.hero .eyebrow::before{display:none}
.hero .eyebrow{font-size:14px;letter-spacing:.22em;margin-bottom:22px}
html[lang="ar"] .hero .eyebrow{font-size:15px;letter-spacing:.06em}
.hero h1{font-size:var(--fs-hero);margin:0 0 34px;text-wrap:balance}
.hero--short h1{font-size:var(--fs-h1)}
/* only the home hero is centred; the short page heroes stay ranged */
.hero--short .hero__body{margin-inline:0;text-align:start;max-width:min(760px,92%)}
.hero--short .hero__actions{justify-content:flex-start}
/* a company hero centres instead: its mark, tagline and facts read as one
   stacked block. Must follow .hero--short — same specificity, source order wins. */
.hero--center .hero__body{margin-inline:auto;text-align:center}
.hero--center .hero__actions{justify-content:center}
.hero--center .cmeta,
.hero--center .crumbs{justify-content:center}
/* a centred prose column: headings sit over their own text rather than off to
   one side, and the measure stays narrow so the ragged edges stay close */
.rich--center{text-align:center}
.rich--center > *{margin-inline:auto}
.rich--center p{max-width:62ch}
/* the mark is a block-level img, so text-align cannot reach it */
.hero--center .chero__logo{margin-inline:auto}
.hero--short .eyebrow::before{display:inline-block}
.hero__lead{font-size:var(--fs-lead);color:rgba(255,255,255,.78);max-width:56ch;
  margin:0 auto 38px}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}

/* ==========================================================================
   Grid that rises into the hero
   Industrial 2 stacks its category tiles across the hero's bottom edge; the
   brand grid does the same, so the marks read as the hero's own footing
   rather than as the next section down.
   ========================================================================== */
:root{--ovl:clamp(64px,8vw,128px)}
.hero--peek{padding-block-end:calc(96px + var(--ovl))}
.sec--overlap{
  position:relative;z-index:3;
  margin-block-start:calc(var(--ovl) * -1);
  padding-block-start:0;
  /* the band below follows straight on, so the grid does not need a full
     section's worth of air under it */
  padding-block-end:clamp(34px,4vw,58px);
}
/* the cards need their own ground once they sit over the dark hero */
.sec--overlap .bcard{box-shadow:0 26px 60px -30px rgba(0,0,0,.85)}

/* a single column would overlap far more of the hero than intended */
@media (max-width:679px){
  :root{--ovl:44px}
  .hero--peek{padding-block-end:calc(70px + var(--ovl))}
}
/* breadcrumb sits inside short heroes */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:var(--fs-sm);
  color:rgba(255,255,255,.6);margin-bottom:16px}
.crumbs a:hover{color:#fff}
.crumbs span{opacity:.5}

/* ------------------------------------------------------------------- stats */
/* auto-fit rather than a fixed four: a company with three figures fills the row
   instead of leaving an empty cell on the end */
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--border)}
@media (min-width:860px){
  .stats{grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr))}
}
.stats--ink{background:rgba(255,255,255,.12)}
.stat{background:var(--surface);padding:38px 28px;text-align:center}
.stats--ink .stat{background:var(--ink)}
.stat__n{
  font-family:var(--font-head);font-weight:700;font-size:clamp(38px,4.4vw,58px);
  line-height:1;color:var(--text);font-variant-numeric:tabular-nums;
  /* the value and its suffix are one run, so keep it LTR in Arabic too —
     otherwise "30K+" reads as "+30K" */
  direction:ltr;
}
.stats--ink .stat__n{color:#fff}
.stat__n em{font-style:normal;color:var(--accent)}
.stat__l{margin-top:10px;font-size:var(--fs-sm);color:var(--text-muted);letter-spacing:.03em}
/* under a section rather than under the hero, the numbers are a supporting
   note — a size below the display scale they carry on their own */
.split__numbers .stat{padding:30px 24px}
.split__numbers .stat__n{font-size:clamp(30px,3.2vw,42px)}
.stats--ink .stat__l{color:var(--on-dark-muted)}

/* ------------------------------------------------------- company/brand card */
.cards{display:grid;gap:26px}
@media (min-width:680px){.cards--2{grid-template-columns:repeat(2,1fr)}}
@media (min-width:680px){.cards--3{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.cards--3{grid-template-columns:repeat(3,1fr)}}
@media (min-width:680px){.cards--4{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.cards--4{grid-template-columns:repeat(4,1fr)}}

/* ==========================================================================
   Brand card
   At rest: a black plate carrying the maker's mark in white — the marks are
   the point, and stripping everything else lets six of them read as a set.
   On hover the plant photograph rises behind a one-line summary.
   ========================================================================== */
/* The brand plate carries the identity's own gradient, sampled off the logo
   sheet: crimson glows at two opposite corners over Carbon Fiber, with the
   middle settling into the plum the two make where they meet. */
:root{
  --plate-crimson:#7A0E2C;
  --plate-mid:#41222D;
  --plate-base:#2B2B2B;
}
.bcard{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:var(--plate-base)}
.bcard__link{
  position:relative;display:block;aspect-ratio:4/3;
  background:
    radial-gradient(125% 115% at 0% 0%,   var(--plate-crimson) 0%, transparent 58%),
    radial-gradient(125% 115% at 100% 100%, var(--plate-crimson) 0%, transparent 58%),
    linear-gradient(135deg, var(--plate-base) 0%, var(--plate-mid) 50%, var(--plate-base) 100%);
}
/* mirrored so the crimson still falls top-start and bottom-end in Arabic */
[dir="rtl"] .bcard__link{
  background:
    radial-gradient(125% 115% at 100% 0%, var(--plate-crimson) 0%, transparent 58%),
    radial-gradient(125% 115% at 0% 100%, var(--plate-crimson) 0%, transparent 58%),
    linear-gradient(225deg, var(--plate-base) 0%, var(--plate-mid) 50%, var(--plate-base) 100%);
}

/* the photograph, hidden until hover */
.bcard__photo{position:absolute;inset:0;overflow:hidden}
.bcard__photo img{
  width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.08);
  transition:opacity .55s var(--ease),transform 1.1s var(--ease);
}
.bcard__photo::after{
  content:"";position:absolute;inset:0;opacity:0;
  transition:opacity .55s var(--ease);
  /* The mark stays white over whatever the photograph happens to be, so the
     scrim has to hold the middle of the frame down too — not just the foot of
     it where the copy sits. */
  background:linear-gradient(to top,
    rgba(8,8,8,.95) 0%, rgba(8,8,8,.66) 38%,
    rgba(8,8,8,.60) 66%, rgba(8,8,8,.74) 100%);
}

/* the mark, centred at rest and lifted out of the way on hover */
.bcard__mark{
  position:absolute;inset:0;z-index:2;display:grid;place-items:center;padding:32px;
  transition:transform .5s var(--ease);
}
.bcard__mark img{
  max-width:min(58%,220px);max-height:34%;width:auto;height:auto;object-fit:contain;
  /* marks arrive in every colour; force them to one white so a row of six
     reads as a set rather than a ransom note */
  filter:brightness(0) invert(1);
  opacity:.94;
}
.bcard__word{
  font-family:var(--font-head);font-weight:700;font-size:clamp(30px,3.4vw,44px);
  letter-spacing:.06em;color:#fff;opacity:.94;
}
/* A brand with nothing behind it yet: the card carries the word, not a name
   that would only raise a question the page cannot answer. Set quieter than a
   real mark so a filled card always wins the eye in a row of six. */
.bcard__soon{
  font-family:var(--font-head);font-weight:600;font-size:clamp(17px,1.5vw,21px);
  letter-spacing:.16em;color:#fff;opacity:.62;text-transform:uppercase;
  padding:9px 18px;border:1px solid rgba(255,255,255,.26);border-radius:var(--radius-full);
}
/* Arabic letters join — spacing them apart pulls the word to pieces */
[dir="rtl"] .bcard__soon{letter-spacing:0}

/* the summary and the link through, held below the fold until hover */
.bcard__body{
  position:absolute;z-index:3;inset-inline:0;inset-block-end:0;
  display:grid;gap:12px;padding:0 26px 26px;
  opacity:0;transform:translateY(14px);
  transition:opacity .45s var(--ease),transform .45s var(--ease);
}
.bcard__line{
  color:rgba(255,255,255,.86);font-size:var(--fs-sm);line-height:1.6;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.bcard__cta{
  display:inline-flex;align-items:center;gap:10px;align-self:start;
  color:#fff;font-weight:600;font-size:var(--fs-sm);
  border-block-end:2px solid var(--accent);padding-block-end:5px;
}
.bcard__cta svg{transition:transform .25s var(--ease)}
[dir="rtl"] .bcard__cta svg{transform:scaleX(-1)}

.bcard__tag{
  position:absolute;z-index:4;inset-block-start:16px;inset-inline-start:16px;
  background:rgba(255,255,255,.14);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.22);border-radius:var(--radius-full);
  padding:6px 13px;font-size:12px;color:rgba(255,255,255,.9);
}

/* --- the hover itself -------------------------------------------------- */
.bcard__link:hover .bcard__photo img,
.bcard__link:focus-visible .bcard__photo img{opacity:.8;transform:scale(1)}
.bcard__link:hover .bcard__photo::after,
.bcard__link:focus-visible .bcard__photo::after{opacity:1}
.bcard__link:hover .bcard__mark,
.bcard__link:focus-visible .bcard__mark{transform:translateY(-16%) scale(.82)}
.bcard__link:hover .bcard__body,
.bcard__link:focus-visible .bcard__body{opacity:1;transform:none}
.bcard__link:hover .bcard__cta svg{transform:translateX(5px)}
[dir="rtl"] .bcard__link:hover .bcard__cta svg{transform:scaleX(-1) translateX(5px)}

/* a card with no photograph on file keeps the plate and just brings the copy up */
.bcard--draft .bcard__link:hover .bcard__mark{transform:translateY(-14%) scale(.86)}

/* --- no hover to give: phones and tablets show the revealed state ------- */
@media (hover:none){
  .bcard__photo img{opacity:.75;transform:none}
  .bcard__photo::after{opacity:1}
  .bcard__mark{transform:translateY(-16%) scale(.82)}
  .bcard__body{opacity:1;transform:none}
}

/* small pill inside a card — the photo count */
.chip{
  display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-xs);font-weight:600;
  border:1px solid var(--border);border-radius:var(--radius-full);padding:8px 14px;
  color:var(--text-muted);transition:.22s var(--ease);position:relative;z-index:4;
}
html[lang="ar"] .chip{font-size:13px}
.chip:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-050)}
.chip--accent{background:var(--accent);border-color:var(--accent);color:#fff}
.chip--accent:hover{background:var(--accent-600);border-color:var(--accent-600);color:#fff}

/* ==========================================================================
   Factory photos
   The tiles are square so a mixed set of phone shots still lines up, and the
   caption only appears on hover so the grid reads as photography first.
   ========================================================================== */
/* One shelf mechanic, three uses: the factory photos, the product-group cards,
   and the parts inside each card. A track only has to declare how wide its own
   columns are. */
.gscroll{position:relative;--gap:14px;--lift:14px}
[data-track]{
  display:grid;grid-auto-flow:column;gap:var(--gap);
  overflow-x:auto;overscroll-behavior-inline:contain;
  scroll-snap-type:x mandatory;scrollbar-width:none;
  /* the padding gives a hover lift and its shadow somewhere to go; the equal
     negative margin takes that room back so the row sits where it always did */
  padding-block:var(--lift);margin-block:calc(var(--lift) * -1);
}
[data-track]::-webkit-scrollbar{display:none}
[data-track] > *{scroll-snap-align:start}

.gallery{grid-auto-columns:78%}
@media (min-width:560px) {.gallery{grid-auto-columns:calc((100% - var(--gap)) / 2)}}
@media (min-width:900px) {.gallery{grid-auto-columns:calc((100% - var(--gap) * 2) / 3)}}
@media (min-width:1180px){.gallery{grid-auto-columns:calc((100% - var(--gap) * 3) / 4)}}
.shot{
  position:relative;display:block;padding:0;border:0;cursor:zoom-in;
  aspect-ratio:1;border-radius:var(--radius);overflow:hidden;background:var(--ink-2);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.shot:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.shot img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.shot:hover img{transform:scale(1.07)}
.shot__veil{
  position:absolute;inset:0;display:grid;place-items:center;color:#fff;
  background:rgba(38,38,38,.45);opacity:0;transition:opacity .3s var(--ease);
}
.shot:hover .shot__veil,.shot:focus-visible .shot__veil{opacity:1}
.shot__cap{
  position:absolute;inset-inline:0;inset-block-end:0;padding:26px 14px 12px;
  font-size:var(--fs-sm);color:#fff;text-align:start;line-height:1.4;
  background:linear-gradient(to top,rgba(38,38,38,.86),rgba(38,38,38,0));
  transform:translateY(100%);transition:transform .32s var(--ease);
}
.shot:hover .shot__cap,.shot:focus-visible .shot__cap{transform:none}
/* Shelf arrows. They ride over the outer photos rather than in the page
   gutter, which keeps them on screen at every width, and they are logical-
   positioned so the "previous" arrow lands on the right in Arabic. */
.gnav{
  position:absolute;inset-block-start:50%;transform:translateY(-50%);z-index:2;
  display:none;place-items:center;width:46px;height:46px;padding:0;
  border:0;border-radius:999px;cursor:pointer;color:var(--ink);
  /* a white plate, not a dark one: every factory photo behind it is dark, and a
     tinted scrim would sink into the picture instead of sitting on it */
  background:#fff;box-shadow:0 6px 22px rgba(38,38,38,.34);
  transition:background .25s var(--ease),color .25s var(--ease),opacity .25s var(--ease);
}
.gnav--prev{inset-inline-start:12px}
.gnav--next{inset-inline-end:12px}
.gnav:hover{background:var(--accent);color:#fff}
.gnav[disabled]{opacity:0;pointer-events:none}
.gnav--prev svg{transform:rotate(180deg)}
[dir="rtl"] .gnav--prev svg{transform:none}
[dir="rtl"] .gnav--next svg{transform:rotate(180deg)}
/* a finger swipes the shelf directly, so the arrows are for pointers only */
.gnav--sm{width:32px;height:32px}
.gnav--sm.gnav--prev{inset-inline-start:2px}
.gnav--sm.gnav--next{inset-inline-end:2px}
@media (hover:hover) and (pointer:fine){.gnav{display:grid}}

/* ==========================================================================
   Lightbox
   ========================================================================== */
/* The overlay shell. Without display:none the close and arrow buttons render
   over the page while the lightbox is shut. */
.modal{position:fixed;inset:0;z-index:90;display:none}
.modal[data-open="1"]{display:block}
.modal__scrim{position:absolute;inset:0;background:rgba(38,38,38,.92);
  backdrop-filter:blur(6px);animation:fade .28s var(--ease)}
@keyframes fade{from{opacity:0}to{opacity:1}}
body.is-locked{overflow:hidden}

.lightbox__box{
  position:absolute;inset:0;display:grid;place-items:center;
  grid-template-columns:auto minmax(0,1fr) auto;gap:10px;padding:56px 14px 20px;
  animation:fade .28s var(--ease);
}
.lightbox__stage{
  margin:0;display:grid;gap:12px;justify-items:center;min-width:0;max-height:100%;
  /* place-items:center on the box would shrink-wrap this to the image's
     intrinsic width, and then max-width:100% on the image resolves against
     nothing — so claim the whole column explicitly */
  width:100%;justify-self:stretch;
}
.lightbox__stage img{
  max-width:100%;max-height:76vh;width:auto;object-fit:contain;
  border-radius:var(--radius);background:var(--ink-2);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.8);
}
.lightbox__stage figcaption{
  display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline;justify-content:center;
  color:rgba(255,255,255,.86);font-size:var(--fs-sm);text-align:center;
}
.lightbox__count{color:rgba(255,255,255,.5);font-size:var(--fs-xs);
  font-variant-numeric:tabular-nums;direction:ltr}
.lightbox__nav,.lightbox__close{
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.24);border-radius:var(--radius-full);
  background:rgba(38,38,38,.5);color:#fff;cursor:pointer;
  transition:background .22s var(--ease),border-color .22s var(--ease);
}
.lightbox__nav{width:52px;height:52px;flex:none}
.lightbox__nav:hover,.lightbox__close:hover{background:#fff;color:var(--ink);border-color:#fff}
/* the chevron points forward; each arrow turns it to its own side */
.lightbox__nav--prev svg{transform:rotate(180deg)}
[dir="rtl"] .lightbox__nav--prev svg{transform:none}
[dir="rtl"] .lightbox__nav--next svg{transform:rotate(180deg)}
.lightbox.is-single .lightbox__nav{visibility:hidden}
.lightbox__close{
  position:absolute;inset-block-start:14px;inset-inline-end:14px;width:46px;height:46px;
}
@media (max-width:640px){
  .lightbox__box{grid-template-columns:1fr;padding:56px 12px 84px}
  .lightbox__stage{grid-row:1}
  .lightbox__nav{position:absolute;inset-block-end:18px;width:46px;height:46px}
  .lightbox__nav--prev{inset-inline-start:28%}
  .lightbox__nav--next{inset-inline-end:28%}
  .lightbox__stage img{max-height:62vh}
}

/* ----------------------------------------------------------- feature cards */
.feats{display:grid;gap:1px;background:var(--border)}
@media (min-width:640px){.feats{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.feats{grid-template-columns:repeat(4,1fr)}}
.feat{background:var(--surface);padding:40px 32px;display:grid;gap:14px;align-content:start;
  transition:background .3s var(--ease)}
.feat:hover{background:var(--stone)}
.feat__ico{
  display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;
  border-radius:var(--radius);background:var(--accent-050);color:var(--accent);
  transition:background .3s var(--ease),color .3s var(--ease);
}
.feat:hover .feat__ico{background:var(--accent);color:#fff}
.feat h3{margin:0;font-size:21px}
.feat p{margin:0;color:var(--text-muted);font-size:var(--fs-sm);line-height:1.72}
.sec--ink .feats{background:rgba(255,255,255,.12)}
.sec--ink .feat{background:var(--ink)}
.sec--ink .feat:hover{background:var(--ink-2)}
.sec--ink .feat p{color:var(--on-dark-muted)}
.sec--ink .feat__ico{background:rgba(206,115,115,.18);color:var(--accent-on-dark)}



/* ---------------------------------------------------------- founder's note */
/* Adapted from the Industrial 2 layout: portrait on one side, the note,
   a signature, and the name underneath. */
.founder{display:grid;gap:clamp(34px,5vw,72px);align-items:center}



.founder__note{max-width:62ch}
.founder__note h2{margin-block-end:20px}
.founder__note blockquote{
  margin:0;padding-inline-start:22px;border-inline-start:2px solid var(--accent);
  font-size:var(--fs-lead);line-height:1.8;color:var(--text);
}
.sec--ink .founder__note blockquote{color:#fff}
/* the credit, the autograph and the link stack under the quote */

/* The note takes the side the portrait used to hold; the rail runs across the
   space beside it. The note comes first in the markup, so in Arabic it lands on
   the right and the rail on the left without any reordering. */
.founder--rail{grid-template-columns:minmax(0,1fr);gap:clamp(38px,4.4vw,64px)}
/* the note is only a heading and a quote now, so the row can give more of its
   width to the rail and the whole band can sit shorter */
.sec--founder{padding-block:clamp(52px,6vw,88px)}
@media (min-width:940px){
  .sec--founder .founder--rail{
    grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
    align-items:center;gap:clamp(30px,3.2vw,52px);
  }
  .founder--rail .founder__note{max-width:38ch}
  /* a wider rail column now fits three milestones at 236 apiece */
  .founder--rail .rail{grid-auto-columns:min(236px,74vw)}
  /* 122px, not 100: a four-line card is 105px and its margin another 12, and a
     fixed row does not grow to meet it — it just spills and gets clipped */
  .founder--rail .rail__item{grid-template-rows:122px 30px 122px}
  .founder--rail .rail__year{font-size:clamp(25px,2.2vw,32px)}
  .founder--rail .rail__card{font-size:13px;line-height:1.55;padding:12px 14px}
}

/* --------------------------------------------------------------- split row */
.split{display:grid;gap:clamp(34px,5vw,76px);align-items:center}
@media (min-width:940px){
  .split{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split--flip .split__media{order:2}
}
.split__media img{width:100%;aspect-ratio:5/4;object-fit:cover;border-radius:var(--radius-lg)}
.split__body{max-width:60ch}
/* one even step between the heading, the paragraph, the list and the link */
.split__body > * + *{margin-block-start:clamp(16px,1.8vw,24px)}
/* A step down from the full section scale. The Arabic headline needs ~494px to
   fall on two lines rather than three, and the column is 586px, so 32ch sits
   comfortably between the two; balance keeps the pair of lines even. */
.split__title{font-size:clamp(25px,2.9vw,38px);max-width:32ch;text-wrap:balance;margin:0}

/* The numbers and the way through close the section, under both columns. */
.sec--intro{padding-block:clamp(44px,5.5vw,72px)}
/* with no heading above them, the reasons only need air enough to breathe */
.sec--reasons{padding-block:clamp(30px,4vw,56px)}
.split__numbers{margin-block-start:clamp(40px,5vw,68px)}
.checklist{display:grid;gap:16px;margin:0;padding:0;list-style:none}
.checklist li{display:flex;gap:14px;align-items:flex-start;font-size:var(--fs-body)}
.checklist svg{flex:none;margin-block-start:5px;color:var(--accent)}
.sec--ink .checklist svg{color:var(--accent-on-dark)}

/* ------------------------------------------------------------ product groups */
/* The groups ride their own shelf. Cards are equal height so the parts rows
   inside them line up across the row. */
.gscroll--cards{--gap:16px}
.groups{grid-auto-columns:86%;align-items:stretch}
@media (min-width:620px) {.groups{grid-auto-columns:calc((100% - var(--gap)) / 2)}}
@media (min-width:1000px){.groups{grid-auto-columns:calc((100% - var(--gap) * 2) / 3)}}
.group{
  display:flex;flex-direction:column;gap:16px;
  border:1px solid var(--border);border-radius:var(--radius);padding:24px 20px 22px;
  background:var(--surface);transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.group:hover{border-color:var(--accent);box-shadow:var(--shadow-sm)}
.group h4{margin:0;font-size:19px;display:flex;align-items:center;gap:10px}
.group h4 svg{color:var(--accent);flex:none}

/* the parts inside a card: one tile per part, scrolling on their own */
.gscroll--parts{--gap:10px;--lift:6px;margin-block-start:auto}
.parts{grid-auto-columns:106px}
.part{margin:0;display:flex;flex-direction:column;gap:8px}
.part__pic{
  display:grid;place-items:center;aspect-ratio:1;overflow:hidden;
  border-radius:12px;background:var(--stone);color:var(--g400);
}
/* the stand-in mark reads as texture, not as content: there are dozens of them
   on screen until the real part photographs are uploaded */
.part__pic svg{opacity:.3}
.part__pic img{width:100%;height:100%;object-fit:cover;
  transition:transform .5s var(--ease)}
.part:hover .part__pic img{transform:scale(1.06)}
.part figcaption{
  font-size:var(--fs-xs);line-height:1.35;color:var(--text-muted);text-align:center;
  /* two lines then ellipsis, so one long part name cannot deepen the whole row */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* ==========================================================================
   Milestone rail
   Runs across the page. Each item is a three-row column — year, the line with
   its dot, then the card — and alternating items swap the year and the card so
   the run reads as a zigzag. The rows are fixed rather than auto: an auto row
   would take its height from its own card and drop that item's dot off the
   shared line.
   ========================================================================== */
.founder__rail{min-width:0}
.gscroll--rail{--gap:0px;--lift:4px}
.rail{grid-auto-columns:min(300px,74vw)}
.rail__item{
  display:grid;grid-template-rows:120px 34px 120px;
  align-items:center;padding-inline:6px;
}
.rail__year{
  grid-row:1;justify-self:center;align-self:end;padding-block-end:12px;
  font-family:var(--font-head);font-weight:700;
  font-size:clamp(30px,3.2vw,44px);line-height:1;color:#fff;
}
.rail__card{
  grid-row:3;align-self:start;margin:12px 4px 0;padding:14px 16px;
  border-radius:var(--radius);background:var(--accent);color:#fff;
  font-size:var(--fs-sm);line-height:1.6;position:relative;
  /* four lines keeps every card inside its fixed row whatever gets typed */
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
}
.rail__card::before{
  content:"";position:absolute;inset-block-start:-7px;inset-inline-start:22px;
  border:7px solid transparent;border-block-start:0;border-block-end-color:var(--accent);
}
.rail__item--flip .rail__year{grid-row:3;align-self:start;padding-block:12px 0}
.rail__item--flip .rail__card{grid-row:1;align-self:end;margin:0 4px 12px}
.rail__item--flip .rail__card::before{
  inset-block-start:auto;inset-block-end:-7px;
  border-block-end:0;border-block-start-color:var(--accent);
}
/* the dashed rail, drawn per item so it survives the scroll */
.rail__line{grid-row:2;position:relative;display:block;width:100%;height:34px}
.rail__line::before{
  content:"";position:absolute;inset-inline:0;inset-block-start:50%;
  height:0;border-block-start:2px dashed rgba(255,255,255,.28);
}
.rail__dot{
  position:absolute;inset-block-start:50%;inset-inline-start:24px;
  width:14px;height:14px;margin-block-start:-7px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 4px rgba(165,0,0,.28);
}
/* Below this width a horizontal rail shows a single milestone per screen with
   no arrows to move it — seven swipes to read a timeline. The same markup turns
   vertical instead: line down the side, year and note beside each dot. */
@media (max-width:720px){
  .gscroll--rail .gnav{display:none}
  .gscroll--rail .rail{
    grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:minmax(0,1fr);
    overflow:visible;scroll-snap-type:none;
    gap:20px;padding-block:0;margin-block:0;
  }
  .rail__item{
    grid-template-rows:auto auto;grid-template-columns:16px minmax(0,1fr);
    column-gap:14px;row-gap:4px;padding-inline:0;align-items:start;
  }
  .rail__line{grid-column:1;grid-row:1 / span 2;width:16px;height:auto;align-self:stretch}
  .rail__line::before{
    inset:8px auto -20px 7px;width:0;height:auto;
    border-block-start:0;border-inline-start:2px dashed rgba(255,255,255,.28);
  }
  [dir="rtl"] .rail__line::before{inset:8px 7px -20px auto}
  .rail__item:last-child .rail__line::before{display:none}
  .rail__dot{inset-block-start:2px;inset-inline-start:1px;margin-block-start:0}
  .rail__year,
  .rail__item--flip .rail__year{
    grid-column:2;grid-row:1;justify-self:start;align-self:start;
    padding:0;font-size:23px;
  }
  .rail__card,
  .rail__item--flip .rail__card{
    grid-column:2;grid-row:2;align-self:start;margin:2px 0 0;
    -webkit-line-clamp:unset;display:block;
  }
  /* the pointer aimed at a dot that is no longer above or below it */
  .rail__card::before,
  .rail__item--flip .rail__card::before{display:none}
}

/* --------------------------------------------------------------- logo strip */
/* The marquee is held to the content column, so the marks fade in and out at
   the edges of the block rather than at the edges of the window. */
.strip{overflow:hidden;padding-block:6px;
  -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)}
.strip__track{display:flex;gap:64px;width:max-content;align-items:center;
  animation:marquee 44s linear infinite}
.strip:hover .strip__track{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
[dir="rtl"] .strip__track{animation-name:marquee-rtl}
@keyframes marquee-rtl{from{transform:translateX(0)}to{transform:translateX(50%)}}
.strip__item{display:flex;align-items:center;justify-content:center;height:40px;flex:none}
.strip__item img{max-height:100%;width:auto;opacity:.4;filter:grayscale(1);
  transition:opacity .3s var(--ease),filter .3s var(--ease)}
.strip__item:hover img{opacity:1;filter:none}
.strip__item span{font-family:var(--font-head);font-size:23px;font-weight:700;
  color:var(--g600);white-space:nowrap;transition:color .3s var(--ease)}
.strip__item:hover span{color:var(--text)}
.sec--ink .strip__item img{opacity:.42;filter:grayscale(1) invert(1) brightness(2)}
.sec--ink .strip__item:hover img{opacity:.95}
.sec--ink .strip__item span{color:rgba(255,255,255,.45)}
.sec--ink .strip__item:hover span{color:#fff}
/* inside a body column the marks sit closer together and smaller, so several
   are in view at once instead of one drifting mark at a time */
.strip--inline{margin-block-start:18px}
.strip--inline .strip__track{gap:44px;animation-duration:34s}
.strip--inline .strip__item{height:30px}
.strip--inline .strip__item span{font-size:19px}

/* --------------------------------------------------------------- big CTA */
.cta{position:relative;color:#fff;overflow:hidden}
.cta__media{position:absolute;inset:0}
.cta__media img{width:100%;height:100%;object-fit:cover;opacity:.24}
.cta__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to right,rgba(38,38,38,.92),rgba(38,38,38,.55))}
.cta__inner{position:relative;z-index:2;display:grid;gap:34px;align-items:center;
  padding-block:clamp(64px,8vw,110px)}
@media (min-width:960px){.cta__inner{grid-template-columns:minmax(0,1.2fr) auto}}
.cta h2{margin:0;font-size:var(--fs-h2);max-width:18ch}
.cta p{margin:14px 0 0;color:var(--on-dark-muted);max-width:52ch}
.cta__acts{display:flex;flex-wrap:wrap;gap:14px}

/* ------------------------------------------------------------------- forms */
.form{display:grid;gap:18px}
@media (min-width:700px){.form--2{grid-template-columns:repeat(2,1fr)}.form .full{grid-column:1/-1}}
.field{display:grid;gap:8px}
.field label{font-size:var(--fs-sm);font-weight:600}
.field .req{color:var(--accent)}
.field .opt{color:var(--text-muted);font-weight:400;font-size:var(--fs-xs)}

/* brand picker: a checkbox each, wrapping into as many columns as fit */
.checks{border:0;padding:0;margin:0;min-width:0}
.checks legend{padding:0;margin-block-end:10px;font-size:var(--fs-sm);font-weight:600}
.checks__grid{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.check{
  display:flex;align-items:center;gap:10px;cursor:pointer;
  border:1px solid var(--border);border-radius:var(--radius);
  padding:11px 14px;background:var(--surface);
  font-size:var(--fs-sm);transition:border-color .2s var(--ease),background .2s var(--ease);
}
.check:hover{border-color:var(--accent)}
.check input{accent-color:var(--accent);width:17px;height:17px;flex:none;margin:0}
.check:has(input:checked){border-color:var(--accent);background:var(--stone)}
.check:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.input,.select,.textarea{
  width:100%;background:var(--surface);border:1px solid var(--g300);border-radius:var(--radius);
  padding:14px 16px;font:inherit;font-size:var(--fs-body);color:var(--text);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.textarea{min-height:150px;resize:vertical}
.select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236C767F' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;padding-inline-end:44px}
[dir="rtl"] .select{background-position:left 16px center;padding-inline-end:16px;padding-inline-start:44px}
.input:focus,.select:focus,.textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(165,0,0,.16)}
.input::placeholder,.textarea::placeholder{color:var(--g400)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

.note{display:flex;gap:12px;align-items:flex-start;border-radius:var(--radius);
  padding:15px 18px;font-size:var(--fs-sm);line-height:1.65}
.note svg{flex:none;margin-block-start:3px}
.note--ok{background:#ECF7F0;color:#17643C}
.note--err{background:var(--accent-050);color:#96301C}
.note--info{background:var(--stone);color:var(--g600)}

/* contact detail list */
.deets{display:grid;gap:2px}
.deet{display:flex;gap:16px;align-items:flex-start;padding:20px 0;
  border-block-end:1px solid var(--border)}
.deet:last-child{border-block-end:0}
.deet__ico{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  flex:none;border-radius:var(--radius);background:var(--stone);color:var(--accent)}
.deet__k{font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-muted);margin-block-end:3px}
html[lang="ar"] .deet__k{letter-spacing:0;text-transform:none;font-size:13px}
.deet__v{font-weight:600;line-height:1.5;word-break:break-word}
.deet__v a:hover{color:var(--accent)}

/* --------------------------------------------------------------- rich text */
.rich{font-size:17px;line-height:1.85;color:var(--g600)}
.rich h2{font-size:clamp(24px,2.6vw,34px);margin:1.8em 0 .6em;color:var(--text)}
.rich h3{font-size:clamp(20px,2vw,26px);margin:1.6em 0 .5em;color:var(--text)}
.rich h2:first-child,.rich h3:first-child{margin-block-start:0}
.rich ul,.rich ol{padding-inline-start:22px;margin:0 0 1.2em}
.rich li{margin-block-end:.5em}
.rich a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.rich img{border-radius:var(--radius);margin-block:1.4em}
.rich blockquote{margin:1.6em 0;padding-inline-start:24px;
  border-inline-start:3px solid var(--accent);font-size:19px;color:var(--text)}
.rich table{width:100%;border-collapse:collapse;margin:1.4em 0;font-size:var(--fs-sm)}
.rich th,.rich td{border:1px solid var(--border);padding:11px 14px;text-align:start}
.rich th{background:var(--stone);font-weight:600}

/* ------------------------------------------------------------------ badges */
.badges{display:flex;flex-wrap:wrap;gap:10px}
.badge{
  display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border);
  border-radius:var(--radius-full);padding:8px 15px;font-size:var(--fs-sm);
  color:var(--text-muted);background:var(--surface);
}
.badge svg{color:var(--accent);flex:none}
.sec--ink .badge svg{color:var(--accent-on-dark)}
.sec--ink .badge{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.16);
  color:var(--on-dark-muted)}

/* ------------------------------------------------------------------ footer */
.footer{color:var(--on-dark-muted);font-size:var(--fs-sm)}
.footer a:hover{color:#fff}
.footer__top{display:grid;gap:44px;padding-block:clamp(56px,7vw,86px)}
@media (min-width:840px){.footer__top{grid-template-columns:1.5fr 1fr 1fr 1.3fr}}
.footer h4{color:#fff;font-size:var(--fs-h4);margin:0 0 20px;letter-spacing:.06em;
  text-transform:uppercase;font-family:var(--font)}
html[lang="ar"] .footer h4{letter-spacing:0;text-transform:none;font-size:17px}
/* On a phone every footer link becomes a full-height row rather than a 20px
   line of text — 44px is the smallest reliable thumb target. */
@media (max-width:840px){
  .footer ul a,.footer nav a,.crumbs a,.tlink{
    display:inline-flex;align-items:center;min-height:44px;
  }
  .footer ul li{margin-block:0}
  .cmeta__i{min-height:44px}
}
.footer ul{margin:0;padding:0;list-style:none;display:grid;gap:11px}
.footer .brand{margin-bottom:20px}
.footer__about{max-width:38ch;line-height:1.8}
.social{display:flex;gap:10px;margin-block-start:22px}
.social a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
  border:1px solid rgba(255,255,255,.18);border-radius:var(--radius-full);
  transition:.22s var(--ease)}
.social a:hover{background:#fff;color:var(--ink);border-color:#fff}
.footer__bar{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;
  padding-block:24px;border-block-start:1px solid rgba(255,255,255,.1);font-size:13px}
.footer__bar nav{display:flex;flex-wrap:wrap;gap:20px;margin-inline-start:auto}

/* floating WhatsApp */
.wafab{
  position:fixed;inset-block-end:24px;inset-inline-end:24px;z-index:55;
  display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;
  border-radius:var(--radius-full);background:#25D366;color:#fff;
  box-shadow:0 10px 30px -8px rgba(37,211,102,.7);transition:transform .25s var(--ease);
}
.wafab:hover{transform:scale(1.08)}

/* -------------------------------------------------------------- reveal-on-scroll */
[data-reveal]{opacity:0;transform:translateY(24px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
[data-reveal].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none}}

/* ------------------------------------------------------------------ misc */
.pagehead{padding-block:calc(var(--header-h) + 54px) 54px;background:var(--ink);color:#fff}
.pagehead h1{margin:0;max-width:20ch}
.empty{text-align:center;padding:80px 20px;color:var(--text-muted)}
.empty svg{color:var(--g300);margin:0 auto 18px}

/* ==========================================================================
   Company plates — stand-in artwork for the "who we are" column
   ========================================================================== */
/* the 2×2 plate grid that stands in for the "who we are" photograph */
.plategrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;
  aspect-ratio:5/4;border-radius:var(--radius-lg);overflow:hidden}
.plategrid__cell{
  position:relative;display:grid;place-items:center;border-radius:var(--radius);
  background:linear-gradient(160deg,var(--plate),var(--ink) 88%);
}
.plategrid__cell span{font-family:var(--font-head);font-weight:700;font-size:clamp(24px,3.4vw,40px);
  color:rgba(255,255,255,.85);letter-spacing:.05em}

/* founder portrait stand-in */

/* ==========================================================================
   Company page
   ========================================================================== */
.chero__logo{height:44px;width:auto;margin-block-end:22px;
  filter:brightness(0) invert(1);opacity:.95}
.cmeta{display:flex;flex-wrap:wrap;gap:10px 22px;margin-block-start:26px}
.cmeta__i{display:inline-flex;align-items:center;gap:9px;font-size:var(--fs-sm);
  color:rgba(255,255,255,.72)}
.cmeta__i svg{color:var(--accent);flex:none}
a.cmeta__i:hover{color:#fff}

/* minmax(0,1fr) rather than a bare auto column: the mark strip inside lays its
   track out at max-content, and an unclamped track would take that width and
   stretch the whole page with it on narrow screens. */
.cprofile{display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(34px,4vw,56px);align-items:start}
@media (min-width:980px){.cprofile{grid-template-columns:minmax(0,1fr) 370px}}

/* the facts card — sticky beside the profile on wide screens */
.factcard{
  border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;
  background:var(--surface);box-shadow:var(--shadow-sm);
}
@media (min-width:980px){.cside{position:sticky;top:calc(var(--header-h) + 20px)}}
.cside{display:grid;gap:14px;align-self:start}

/* Documents the brand publishes. Each one is its own button under the facts
   card: a buyer takes the catalogue away without having to ask for it. */
.cdocs{display:grid;gap:10px}
.cdoc{
  display:flex;align-items:center;gap:13px;padding:14px 16px;
  border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);
  color:var(--text);box-shadow:var(--shadow-sm);
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease),transform .18s var(--ease);
}
.cdoc:hover{border-color:var(--accent,var(--brand));box-shadow:var(--shadow-md);transform:translateY(-1px)}
.cdoc__ico{
  display:grid;place-items:center;inline-size:38px;block-size:38px;flex:0 0 auto;
  border-radius:50%;background:var(--stone);color:var(--accent,var(--brand));
}
.cdoc__t{display:block;font-weight:600;font-size:var(--fs-sm);line-height:1.4}
.cdoc__m{display:block;margin-block-start:2px;font-size:var(--fs-xs);color:var(--text-muted);
  font-variant-numeric:tabular-nums}
.factcard__body{padding:24px 24px 26px}
.facts{margin:0 0 22px;display:grid;gap:1px;background:var(--border);
  border-block:1px solid var(--border)}
.facts > div{display:flex;gap:14px;align-items:baseline;justify-content:space-between;
  background:var(--surface);padding:12px 2px}
.facts dt{font-size:var(--fs-sm);color:var(--text-muted);margin:0}
.facts dd{margin:0;font-weight:600;text-align:end}
.facts:last-child{margin-block-end:0}

/* ==========================================================================
   Contact
   ========================================================================== */
.contact{display:grid;gap:clamp(38px,5vw,64px);align-items:start}
@media (min-width:980px){.contact{grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr)}}
.contact__form h2{margin-block-end:30px;max-width:44ch;color:var(--text-muted);font-family:var(--font);
  font-weight:400;line-height:1.65;letter-spacing:0}
.contact__side{background:var(--stone);border-radius:var(--radius-lg);padding:10px 26px 26px}
.contact__map{margin-block-start:22px;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3}
.contact__map iframe{width:100%;height:100%;border:0;display:block}

/* a company whose page is not filled in yet says so under its name */
.hero__tag{
  display:inline-flex;align-items:center;gap:9px;margin:0 0 18px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
  border-radius:var(--radius-full);padding:7px 15px;
  font-size:var(--fs-sm);color:rgba(255,255,255,.8);
}

/* ==========================================================================
   Reviews — a strip that drifts sideways
   Same idea as the OEM marquee but carrying cards, so it pauses on hover and
   stops outright for anyone who has asked for less motion.
   ========================================================================== */
.sec--reviews{padding-block:clamp(44px,5.5vw,76px);overflow:hidden}
.rstrip{
  overflow:hidden;padding-block:6px;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);
}
.rstrip__track{
  display:flex;gap:20px;width:max-content;align-items:stretch;
  animation:rmarquee 72s linear infinite;
}
.rstrip:hover .rstrip__track,
.rstrip:focus-within .rstrip__track{animation-play-state:paused}
@keyframes rmarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
[dir="rtl"] .rstrip__track{animation-name:rmarquee-rtl}
@keyframes rmarquee-rtl{from{transform:translateX(0)}to{transform:translateX(50%)}}
@media (prefers-reduced-motion:reduce){
  .rstrip__track{animation:none}
  /* with the drift gone the strip has to be reachable by hand */
  .rstrip{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
}

.rcard{
  flex:none;width:min(360px,78vw);display:flex;flex-direction:column;gap:14px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:22px 24px 20px;
}
.rcard__top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.rcard__stars{display:inline-flex;gap:3px;color:var(--g300)}
.rcard__stars .is-on{color:#F5A623}
.rcard__stars svg{fill:currentColor;stroke:none}
.rcard__src{color:var(--g400);display:inline-flex}
.rcard__text{
  margin:0;color:var(--text-muted);font-size:var(--fs-sm);line-height:1.75;
  /* every card the same height whatever the review's length */
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
  min-height:calc(1.75em * 4);
}
.rcard__who{display:flex;align-items:center;gap:12px;margin-block-start:auto;
  padding-block-start:14px;border-block-start:1px solid var(--border)}
.rcard__avatar{
  display:grid;place-items:center;width:38px;height:38px;flex:none;
  border-radius:50%;background:var(--accent-050);color:var(--accent);
  font-family:var(--font-head);font-weight:700;font-size:17px;
}
.rcard__who strong{display:block;font-size:var(--fs-sm)}
.rcard__who em{font-style:normal;font-size:var(--fs-xs);color:var(--text-muted)}

/* ==========================================================================
   Map — the last block before the footer
   ========================================================================== */
.mapsec{position:relative}
.mapsec__card{width:100%;height:clamp(300px,42vw,460px);background:var(--ink-2)}
.mapsec__card iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(.25)}