/* Desert Sand Dunes Trading Establishment (DSD) — site styles, v3 (English + Arabic)
   Palette taken from the DSD logo: wrench amber, gear grey, charcoal lettering.
   The one extra colour is the eco green, used only in the footer's environment badge.
   Layout follows the customer's reference (sacmi.com): a photo slider, category cards and
   alternating photo/text rows. The look stays DSD's own: logo colours, Archivo, and photos
   with one chamfered corner, like the edge of a chamfered tile.
   Direction: everything uses logical properties (inline-start/end), so the Arabic pages
   (<html lang="ar" dir="rtl">) mirror automatically; the few physical cases are in the RTL block. */
:root{
  --bg:#F4F5F7; --white:#FFFFFF; --ink:#30343B; --ink-2:#4D5462;
  --gear:#636A7C; --slate-deep:#373C48; --slate-ink:#2B2F38; --line:#D9DCE2;
  --amber:#FFAA00; --amber-hover:#F09C00; --amber-strong:#C28400; --amber-soft:#FFF1CC;
  --leaf:#6CCB86; --leaf-dark:#3FA45F; --leaf-vein:#E3F5E8;
  --error:#B42318;
  --display:"Archivo",Arial,"Helvetica Neue",sans-serif;
  --body:"Source Sans 3","Segoe UI",Arial,sans-serif;
  --wrap:1240px; --gap:clamp(1rem,3vw,2rem);
  --chamfer:clamp(18px,2.4vw,34px);
  --chamfer-path:polygon(0 0,calc(100% - var(--chamfer)) 0,100% var(--chamfer),100% 100%,0 100%);
  --ease:cubic-bezier(.2,.7,.2,1);
  --on-dark:#C9CDD5;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:6rem;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.6 var(--body)}
img{max-width:100%;height:auto;display:block}
[hidden]{display:none!important}
a{color:var(--ink);text-decoration-color:var(--amber);text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{text-decoration-color:var(--ink)}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:2px}
.util :focus-visible,.hero :focus-visible,.line-strip :focus-visible,.page-banner :focus-visible,
.site-foot :focus-visible,.lightbox :focus-visible{outline-color:var(--amber)}
/* parked above the page, not to the side: sideways overflow scrolls in right-to-left pages */
.skip{position:absolute;inset-inline-start:1rem;top:-5rem;background:var(--ink);color:#fff;padding:.75rem 1rem;z-index:100}
.skip:focus{top:1rem}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gap)}
h1,h2,h3{font-family:var(--display);line-height:1.1;margin:0 0 .6em;font-stretch:112%;text-wrap:balance}
h1{font-size:clamp(2.1rem,4.4vw,3.4rem);font-weight:800;letter-spacing:-.01em;max-width:20ch}
h2{font-size:clamp(1.65rem,3vw,2.35rem);font-weight:750;max-width:24ch}
h3{font-size:1.2rem;font-weight:700}
p{margin:0 0 1em;max-width:68ch}
.lead{font-size:clamp(1.125rem,1.6vw,1.25rem);color:var(--ink-2)}
/* short amber rule above a section heading (the logo's wrench colour) */
.accent::before{content:"";display:block;width:3.5rem;height:4px;background:var(--amber);margin-bottom:1.1rem}

/* utility bar above the header */
.util{background:var(--slate-ink);color:var(--on-dark);font-size:.92rem}
.util .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:2.9rem}
.util-end{display:flex;align-items:center;gap:1.25rem}
.util p{margin:0}
.util a{color:#fff;text-decoration:none;display:inline-block;padding:.35rem 0}
.util a:hover{text-decoration:underline;text-decoration-color:var(--amber)}
/* language button: top of every page, always visible (also on phones) */
.util .lang-switch{display:inline-flex;align-items:center;gap:.45rem;min-height:40px;padding:.2rem .85rem;border:1.5px solid var(--amber);border-radius:4px;color:#fff;font-weight:700;white-space:nowrap}
.util .lang-switch:hover{background:var(--amber);color:var(--ink);text-decoration:none}
.lang-switch svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8}
@media (max-width:640px){.util-where{display:none}.util .wrap{justify-content:flex-end}.util-end{gap:.9rem}.util-mail{font-size:.85rem}}

/* header */
.site-head{position:sticky;top:0;z-index:50;background:var(--white);border-bottom:1px solid var(--line);transition:box-shadow .2s}
.site-head.is-scrolled{box-shadow:0 10px 24px -18px rgba(43,47,56,.55)}
.site-head .wrap{display:flex;align-items:center;gap:1rem;min-height:5rem}
.brand{display:flex;align-items:center;gap:.75rem;min-width:0;text-decoration:none;color:var(--ink)}
.brand img{width:52px;height:52px;flex:none}
/* company name in capitals, with what DSD supplies underneath in small type */
.brand-name{font:800 1rem/1.15 var(--display);font-stretch:100%;text-transform:uppercase;letter-spacing:.02em;text-wrap:balance}
.brand-name small{display:block;margin-top:.2rem;font:500 .8rem/1.3 var(--body);text-transform:none;letter-spacing:0;color:var(--ink-2)}
.nav-toggle{flex:none}
@media (max-width:520px){.brand{gap:.6rem}.brand img{width:44px;height:44px}.brand-name{font-size:.82rem}.brand-name small{font-size:.72rem}}
.nav{display:flex;align-items:center;gap:.25rem;margin-inline-start:auto}
.nav a{position:relative;color:var(--ink);text-decoration:none;padding:.65rem .85rem;font-weight:600;border-radius:4px}
.nav a:not(.btn)::after{content:"";position:absolute;inset-inline:.85rem;bottom:.35rem;height:3px;background:var(--amber);transform:scaleX(0);transform-origin:left;transition:transform .2s var(--ease)}
.nav a:not(.btn):hover::after{transform:scaleX(1)}
.nav a[aria-current="page"]::after{transform:scaleX(1);background:var(--amber-strong)}
.nav .btn{margin-inline-start:.6rem}
.lang-switch[lang="ar"]{font-family:"IBM Plex Sans Arabic",var(--body)}
.lang-switch[lang="en"]{font-family:"Source Sans 3",Arial,sans-serif}
.nav-toggle{display:none;background:none;border:1px solid var(--line);border-radius:4px;min-width:44px;min-height:44px;font:600 1rem var(--body);color:var(--ink);padding:0 .9rem;cursor:pointer}
@media (max-width:1100px){
  .nav-toggle{display:block}
  .nav-toggle{margin-inline-start:auto}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;margin:0;background:var(--white);flex-direction:column;align-items:stretch;padding:.5rem var(--gap) 1rem;border-bottom:1px solid var(--line);box-shadow:0 16px 24px -20px rgba(43,47,56,.6)}
  .nav.open{display:flex}
  .nav a:not(.btn)::after{inset-inline-start:0;inset-inline-end:auto;width:2.5rem;bottom:.3rem}
  .nav a{padding-inline-start:0}
  .nav .btn{margin:.5rem 0 0;text-align:center}
}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:.75rem 1.4rem;font:700 1rem var(--body);text-decoration:none;border-radius:4px;border:2px solid transparent;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.btn-primary,.nav a.btn-primary{background:var(--amber);color:var(--ink)}
.btn-primary:hover,.nav a.btn-primary:hover{background:var(--amber-hover);color:var(--ink)}
.btn-ghost{border-color:currentColor;color:var(--ink);background:transparent}
.btn-ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-light{border-color:#fff;color:#fff;background:transparent}
.btn-light:hover{background:#fff;color:var(--ink)}
.btn-dark{background:var(--slate-deep);color:#fff}
.btn-dark:hover{background:var(--ink);color:#fff}
.actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem}
.more{font-weight:700;display:inline-block;padding:.35rem 0}

/* photo placeholders: replace the <div class="ph"> with <img> when photos arrive */
.ph{position:relative;flex-direction:column;background:repeating-linear-gradient(135deg,#E6E8EC 0 12px,#EEF0F3 12px 24px);border:2px dashed #A9AFBA;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--ink-2);font:600 .95rem/1.35 var(--body);padding:1rem;min-height:200px}
.ph::before{content:"Photo placeholder";position:absolute;top:.6rem;inset-inline-start:.75rem;font-size:.78rem;font-weight:700;color:#8A5C00}
.ph code{display:block;font-size:.8rem;margin-top:.35rem;color:var(--ink-2)}
/* supplied photos get one chamfered corner */
.chamfer{clip-path:var(--chamfer-path)}

/* hero: photo slider with the headline over a slate fade */
.hero{position:relative;display:grid;background:var(--slate-ink);color:#fff;isolation:isolate}
.hero>*{grid-area:1/1}
.hero-slider{position:relative;min-height:clamp(540px,76vh,780px)}
.slides{position:absolute;inset:0;overflow:hidden}
.slide{position:absolute;inset:0;margin:0;opacity:0;visibility:hidden}
.slide.is-leaving{opacity:1;visibility:visible;z-index:1}
.slide.is-active{opacity:1;visibility:visible;z-index:2;transition:opacity 1.1s var(--ease)}
.slide img{width:100%;height:100%;object-fit:cover}
.slide::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(43,47,56,.95) 0%,rgba(43,47,56,.9) 36%,rgba(43,47,56,.55) 58%,rgba(43,47,56,.1) 84%),
             linear-gradient(0deg,rgba(43,47,56,.75) 0%,rgba(43,47,56,0) 28%)}
.slide figcaption{position:absolute;z-index:1;inset-inline-end:max(var(--gap),calc((100% - var(--wrap))/2 + var(--gap)));bottom:5.4rem;max-width:22rem;text-align:end}
.slide figcaption a{display:inline-block;color:#fff;font-weight:600;text-decoration:none;padding:.55rem .85rem;background:rgba(43,47,56,.78);border-inline-start:4px solid var(--amber)}
.slide figcaption a:hover{text-decoration:underline;text-decoration-color:var(--amber)}
.hero-copy{position:relative;z-index:4;align-self:center;width:100%;pointer-events:none;padding-top:clamp(3rem,7vw,5rem);padding-bottom:clamp(5.5rem,9vw,7rem)}
.hero-copy>*{pointer-events:auto}
.hero-copy h1{color:#fff;font-size:clamp(2rem,3.6vw,3.15rem);max-width:19ch}
.hero-copy .lead{color:#E3E6EB;max-width:46ch}
.slider-ui{position:absolute;z-index:5;left:0;right:0;bottom:0;display:none;pointer-events:none}
.is-ready .slider-ui{display:block}
.slider-ui .wrap{display:flex;justify-content:flex-end;padding-bottom:1.25rem}
.sl-controls{pointer-events:auto;display:flex;align-items:center;gap:.15rem;padding:.25rem;background:rgba(43,47,56,.8);border-radius:4px}
.sl-btn{width:44px;height:44px;display:grid;place-items:center;background:none;border:0;border-radius:3px;color:#fff;cursor:pointer;padding:0}
.sl-btn:hover{background:rgba(255,255,255,.14)}
.sl-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.sl-pause .i-play,.sl-pause.is-paused .i-pause{display:none}
.sl-pause.is-paused .i-play{display:block}
.sl-dots{display:flex}
.sl-dot{width:34px;height:44px;display:grid;place-items:center;background:none;border:0;padding:0;cursor:pointer}
.sl-dot::before{content:"";width:18px;height:4px;background:rgba(255,255,255,.5);transition:width .25s var(--ease),background .25s}
.sl-dot:hover::before{background:#fff}
.sl-dot[aria-current="true"]::before{width:28px;background:var(--amber)}
@media (max-width:760px){
  .hero{display:block}
  .hero-slider{min-height:0;aspect-ratio:16/10}
  .slide::after{background:linear-gradient(0deg,rgba(43,47,56,.8) 0%,rgba(43,47,56,0) 42%)}
  .slide figcaption{inset-inline-start:var(--gap);inset-inline-end:auto;top:.75rem;bottom:auto;text-align:start}
  .slide figcaption a{font-size:.92rem;padding:.4rem .7rem}
  .slider-ui .wrap{padding-bottom:.4rem}
  .hero-copy{padding-top:2rem;padding-bottom:2.5rem}
}

/* production line strip under the hero: the DSD signature, a numbered sequence like a conveyor */
.line-strip{background:var(--slate-deep);color:#fff}
.line-strip .wrap{padding-top:2.5rem;padding-bottom:2.5rem}
.line-strip h2{color:#fff;font-size:1.35rem;max-width:none}
.line-strip p{color:var(--on-dark)}
.stages{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;grid-template-columns:repeat(8,1fr);counter-reset:s}
.stages li{counter-increment:s;border-top:4px solid var(--gear);padding-top:.9rem;padding-inline-end:.75rem;font-weight:600;line-height:1.3}
.stages li::before{content:counter(s);display:block;font:800 1.6rem/1 var(--display);color:var(--amber);margin-bottom:.4rem}
.stages li:first-child,.stages li:hover{border-top-color:var(--amber)}
.line-strip .more{color:#fff;margin-top:1.5rem}
@media (max-width:980px){.stages{grid-template-columns:repeat(4,1fr);row-gap:1.25rem}}
@media (max-width:520px){.stages{grid-template-columns:repeat(2,1fr)}}

/* sections */
.section{padding-top:clamp(3.5rem,7vw,6rem);padding-bottom:clamp(3.5rem,7vw,6rem)}  /* top/bottom only: keeps .wrap's side gutter when both classes meet */
.section-alt{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
@media (max-width:860px){.split{grid-template-columns:1fr}}
.intro-grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(1.5rem,5vw,5rem);align-items:start}
@media (max-width:860px){.intro-grid{grid-template-columns:1fr}}
.section-head{display:grid;grid-template-columns:1fr 1fr;gap:1rem 3rem;align-items:end;margin-bottom:2.25rem}
.section-head h2,.section-head p{margin:0}
.section-head p{color:var(--ink-2)}
@media (max-width:760px){.section-head{grid-template-columns:1fr}}
ul.plain{margin:0;padding-inline-start:1.1rem}
ul.plain li{margin:.3rem 0}
ul.plain li::marker{color:var(--amber-strong)}

/* category cards (Home "What we supply" and the Products index) */
.cat-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1rem,2vw,1.5rem)}
@media (max-width:700px){.cat-cards{grid-template-columns:1fr}}
.cat-card{display:flex;flex-direction:column;height:100%;background:var(--white);border:1px solid var(--line);color:var(--ink);text-decoration:none;transition:border-color .2s,box-shadow .2s}
.cat-card:hover{border-color:var(--amber-strong);box-shadow:0 14px 28px -22px rgba(43,47,56,.6)}
.cat-media{display:block;overflow:hidden;clip-path:var(--chamfer-path);background:var(--slate-deep)}
.cat-media img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .6s var(--ease)}
.cat-card:hover .cat-media img{transform:scale(1.04)}
.cat-body{display:flex;flex-direction:column;gap:.5rem;padding:1.15rem 1.25rem 1.35rem;flex:1}
.cat-title{font:700 1.2rem/1.3 var(--display);font-stretch:108%}
.cat-title::after{content:"";display:block;width:2.25rem;height:3px;margin-top:.7rem;background:var(--amber);transition:width .35s var(--ease)}
.cat-card:hover .cat-title::after{width:4rem}
.cat-count{color:var(--ink-2);font-size:.95rem;margin-top:auto}

/* alternating photo and text rows */
.features{display:grid;gap:clamp(3.5rem,7vw,6rem)}
.feature{display:grid;grid-template-columns:7fr 5fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.feature-flip{grid-template-columns:5fr 7fr}
.feature-flip .feature-media{order:2}
.feature-media img{width:100%;aspect-ratio:4/3;object-fit:cover}
.feature h2{font-size:clamp(1.5rem,2.6vw,2rem)}
.feature .plain{margin-bottom:1.25rem}
@media (max-width:860px){.feature,.feature-flip{grid-template-columns:1fr}.feature-flip .feature-media{order:0}}

.reasons{display:grid;grid-template-columns:repeat(4,1fr);gap:2.25rem 2rem;margin-top:2.25rem}
.reasons div{border-top:2px solid var(--line);padding-top:1rem}
.reasons h3{margin-bottom:.35rem;font-size:1.12rem}
.reasons p{margin:0;color:var(--ink-2)}
@media (max-width:1000px){.reasons{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.reasons{grid-template-columns:1fr}}

.cta-band{background:var(--amber);color:var(--ink)}
.cta-band .wrap{padding-top:3.5rem;padding-bottom:3.5rem;display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:center}
.cta-band p{margin:0}
@media (max-width:760px){.cta-band .wrap{grid-template-columns:1fr}}

/* free-consultation band on every page (customer's text, black on the logo's amber) */
.consult{background:var(--amber);color:#000;border-bottom:2px solid rgba(0,0,0,.16)}
.consult .wrap{padding-top:clamp(2.5rem,5vw,3.5rem);padding-bottom:clamp(2.5rem,5vw,3.5rem)}
.consult p{margin:0;max-width:62ch;color:#000;font-size:clamp(1.15rem,1.8vw,1.35rem);line-height:1.5}
.consult .motto{margin-top:1rem;font:800 clamp(1.15rem,2vw,1.45rem)/1.35 var(--display);font-stretch:108%}
.consult strong{font-weight:800}

/* page intro (contact, privacy) and photo banner (products, mission) */
.page-intro{padding:clamp(3rem,6vw,4.5rem) 0 2.5rem;border-bottom:1px solid var(--line);background:var(--white)}
.page-banner{position:relative;color:#fff;background:var(--slate-ink);isolation:isolate;overflow:hidden}
.page-banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.page-banner::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(43,47,56,.95) 0%,rgba(43,47,56,.88) 48%,rgba(43,47,56,.4) 100%)}
.page-banner .wrap{padding-top:clamp(3.5rem,8vw,6rem);padding-bottom:clamp(3.5rem,8vw,6rem)}
.page-banner h1{color:#fff;margin-bottom:.5em}
.page-banner .lead{color:#E3E6EB;margin:0}
@media (max-width:760px){.page-banner::before{background:rgba(43,47,56,.88)}}

/* products catalogue: index -> category (parts as text) -> part (photos, click to zoom) */
.catalogue>*+*{margin-top:clamp(3rem,6vw,4.5rem)}
.is-routed>*+*{margin-top:0}
.crumbs{font-size:.95rem;color:var(--ink-2);margin:0 0 1rem}
.crumbs a{font-weight:600}
.crumbs .sep{margin-inline:.45rem;color:var(--gear)}
.cat-view h2,.part-view h2{max-width:34ch}
.cat-view .lead{margin-bottom:1.75rem}
.part-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:0 2.5rem;border-top:2px solid var(--ink)}
@media (max-width:700px){.part-list{grid-template-columns:1fr}}
.part-list li{border-bottom:1px solid var(--line)}
.part-list a{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:52px;padding:.8rem .2rem;color:var(--ink);text-decoration:none;font-weight:600;font-size:1.08rem}
.part-list a::after{content:"";flex:none;width:.55rem;height:.55rem;border-top:2px solid var(--amber-strong);border-inline-end:2px solid var(--amber-strong);transform:rotate(45deg);transition:transform .2s var(--ease)}
.part-list a:hover{text-decoration:underline;text-decoration-color:var(--amber)}
.part-list a:hover::after{transform:translateX(3px) rotate(45deg)}
.part-list .no-photo{font-weight:400;font-size:.9rem;color:var(--ink-2)}
.also{margin-top:2rem;background:var(--white);border:1px solid var(--line);border-radius:4px}
.also summary{cursor:pointer;padding:1rem 1.25rem;font-weight:700;min-height:48px}
.also summary:hover{color:var(--ink);text-decoration:underline;text-decoration-color:var(--amber)}
.also-groups{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.5rem 2.5rem;padding:.25rem 1.25rem 1.5rem}
.also h3{font-size:1rem;border-bottom:2px solid var(--ink);padding-bottom:.4rem;margin-bottom:.5rem}
.gallery{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem}
@media (max-width:700px){.gallery{grid-template-columns:repeat(3,1fr)}}
.gallery li:first-child{grid-column:1/-1}
.gallery button{position:relative;display:block;width:100%;padding:0;border:1px solid var(--line);background:var(--white);cursor:zoom-in}
.gallery button:hover{border-color:var(--amber-strong)}
.gallery img{width:100%;height:auto}
.gallery li:not(:first-child) img{aspect-ratio:4/3;object-fit:cover}
/* first photo keeps its own shape (reserved from its width/height attributes before it loads) */
.gallery li:first-child img{max-height:min(70vh,660px);object-fit:contain}
.zoom-hint{position:absolute;bottom:.75rem;inset-inline-end:.75rem;display:flex;align-items:center;gap:.4rem;padding:.35rem .65rem;border-radius:3px;background:rgba(43,47,56,.85);color:#fff;font-size:.88rem;font-weight:600}
.zoom-hint svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
.part-view .ph{min-height:260px;margin-top:1.5rem}
.part-nav{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.5rem;margin-top:2rem;padding-top:1.25rem;border-top:1px solid var(--line)}
.part-nav .btn{margin-inline-end:auto}
.part-nav a:not(.btn){font-weight:600;display:inline-block;padding:.5rem 0}

/* zoom viewer for part photos */
.lightbox{position:fixed;inset:0;width:100%;height:100%;max-width:100%;max-height:100%;margin:0;padding:0;border:0;background:#14161B;color:#fff}
.lightbox::backdrop{background:rgba(20,22,27,.92)}
.lb-stage{position:absolute;inset:0 0 4.75rem;overflow:hidden;display:grid;place-items:center;touch-action:none;cursor:zoom-in}
.lb-stage.is-zoomed{cursor:grab}
.lb-stage.is-dragging{cursor:grabbing}
.lb-img{max-width:100%;max-height:100%;transform-origin:center;user-select:none;-webkit-user-drag:none}
.lb-title{position:absolute;top:0;inset-inline:0;margin:0;padding:1rem 4.5rem 2rem 1.25rem;padding-inline:1.25rem 4.5rem;font-weight:600;background:linear-gradient(rgba(20,22,27,.85),rgba(20,22,27,0));pointer-events:none}
.lb-bar{position:absolute;inset-inline:0;bottom:0;height:4.75rem;display:flex;align-items:center;justify-content:center;gap:.35rem;background:#1B1E24;border-top:1px solid #2E323B}
.lb-btn{width:48px;height:48px;display:grid;place-items:center;padding:0;border:0;border-radius:4px;background:none;color:#fff;cursor:pointer}
.lb-btn:hover{background:rgba(255,255,255,.12)}
.lb-btn:disabled{opacity:.35;cursor:default;background:none}
.lb-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lb-count{min-width:5.5rem;margin:0 .5rem;text-align:center;color:var(--on-dark);font-variant-numeric:tabular-nums}
.lb-close{position:absolute;top:.6rem;inset-inline-end:.6rem;background:rgba(0,0,0,.45)}
.lb-sep{width:1px;height:28px;background:#3A3F49;margin:0 .35rem}

/* mission */
.split img{width:100%;aspect-ratio:4/3;object-fit:cover}
.values{display:grid;grid-template-columns:repeat(2,1fr);gap:0 3rem;margin-top:1.5rem}
.values dt{font:700 1.1rem var(--display);padding-top:1.1rem;border-top:1px solid var(--line)}
.values dd{margin:.3rem 0 1.1rem;color:var(--ink-2)}
@media (max-width:700px){.values{grid-template-columns:1fr}}
blockquote.commit{margin:0;font:600 clamp(1.3rem,2.6vw,1.75rem)/1.35 var(--display);max-width:34ch;border-inline-start:6px solid var(--amber);padding-inline-start:1.5rem}

/* contact */
.contact-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,5vw,4rem);align-items:start}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}
.contact-list{list-style:none;padding:0;margin:0}
.contact-list li{padding:1rem 0;border-bottom:1px solid var(--line)}
.contact-list strong{display:block;font-family:var(--display)}
.todo{background:#FDE7E4;padding:0 .3rem;border-radius:2px}
form.rfq{background:var(--white);border:1px solid var(--line);border-top:4px solid var(--amber);padding:clamp(1.25rem,3vw,2rem);border-radius:6px}
.field{margin-bottom:1.1rem}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
@media (max-width:560px){.field-row{grid-template-columns:1fr}}
label{display:block;font-weight:700;margin-bottom:.35rem}
.opt{font-weight:400;color:var(--ink-2)}
input,select,textarea{width:100%;font:inherit;color:var(--ink);background:#fff;border:1.5px solid #8F96A3;border-radius:4px;padding:.7rem .8rem;min-height:48px}
textarea{min-height:140px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--ink);outline:3px solid rgba(255,170,0,.55);outline-offset:0}
.hint{font-size:.9rem;color:var(--ink-2);margin-top:.3rem}
.err{color:var(--error);font-size:.92rem;font-weight:600;margin-top:.3rem}
[aria-invalid="true"]{border-color:var(--error)}
.form-status{margin-top:1rem;padding:1rem;border-radius:4px;display:none}
.form-status.show{display:block}
.form-status.ok{background:#E6F2EA;color:#14532D}
.form-status.bad{background:#FDECEA;color:var(--error)}
.consent{display:flex;gap:.6rem;align-items:flex-start;font-weight:400}
.consent input{width:22px;min-height:22px;height:22px;margin-top:.15rem;flex:none;accent-color:var(--amber-strong)}
/* product rows: product + quantity + remove; on phones the product takes the whole first line */
.products{border:0;padding:0;margin:0 0 1.1rem;min-width:0}
.products legend{font-weight:700;padding:0;margin-bottom:.1rem}
.products .hint{margin-top:0}
.product-rows{list-style:none;padding:0;margin:.6rem 0 .75rem}
.product-row{display:grid;grid-template-columns:1fr 11rem 48px;gap:.5rem;margin-bottom:.6rem}
.product-row .err{grid-column:1/-1;margin-top:0}
@media (max-width:560px){.product-row{grid-template-columns:1fr 48px}.product-row select{grid-column:1/-1}}
.row-remove{width:48px;height:48px;display:grid;place-items:center;padding:0;border:1.5px solid #8F96A3;border-radius:4px;background:#fff;color:var(--ink);cursor:pointer}
.row-remove:hover{border-color:var(--error);color:var(--error)}
.row-remove svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.product-row:only-child .row-remove{visibility:hidden}
.add-product{min-height:44px;padding:.45rem 1rem;gap:.4rem}
.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ts-slot{margin-bottom:1rem;min-height:65px}
/* "sent" window */
.sent-dialog{width:min(28rem,calc(100% - 2rem));padding:2rem 1.75rem 1.75rem;border:0;border-radius:6px;text-align:center;color:var(--ink);background:var(--white);box-shadow:0 20px 60px rgba(0,0,0,.3)}
.sent-dialog::backdrop{background:rgba(20,22,27,.6)}
.sent-check{display:block;width:72px;height:72px;margin:0 auto 1rem}
.sent-check circle{fill:var(--leaf-dark)}
.sent-check path{fill:none;stroke:#fff;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.sent-dialog h2{font-size:1.5rem;margin-bottom:.5rem}
.sent-dialog p{margin:0 0 1.5rem;overflow-wrap:anywhere}
.sent-dialog form{margin:0}
.sent-dialog .btn{min-width:8rem}
/* WhatsApp logo next to the number (footer and contact list) */
.wa-ico{width:1.2em;height:1.2em;fill:#25D366;vertical-align:-.25em;margin-inline-end:.4em}

/* footer, opening with the environment statement the customer asked for */
.site-foot{background:var(--slate-deep);color:var(--on-dark);font-size:.97rem}
.site-foot a{color:#fff}
.site-foot a:hover{text-decoration-color:#fff}
.eco{background:var(--slate-ink);border-bottom:1px solid #4E5462}
.eco .wrap{display:flex;align-items:center;gap:1rem;padding-top:1.6rem;padding-bottom:1.6rem}
.eco p{margin:0;color:#fff;font:700 clamp(1.2rem,2.2vw,1.5rem)/1.2 var(--display);font-stretch:112%}
.leaf{width:64px;height:64px;flex:none}
.leaf .l1{fill:var(--leaf)}
.leaf .l2{fill:var(--leaf-dark)}
.leaf .vein{fill:none;stroke:var(--leaf-vein);stroke-width:1.6;stroke-linecap:round;stroke-opacity:.8}
.leaf .stem{fill:none;stroke:var(--leaf-dark);stroke-width:3.2;stroke-linecap:round}
.site-foot>.wrap{padding-top:3rem;padding-bottom:1.5rem}
.foot-grid{display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr;gap:2rem}
.site-foot h2{font-size:1rem;color:#fff;margin-bottom:.6rem}
.site-foot ul{list-style:none;padding:0;margin:0}
.site-foot li{margin:.35rem 0}
.legal{border-top:1px solid #4E5462;margin-top:2.5rem;padding-top:1.25rem;font-size:.88rem;max-width:none}
@media (max-width:980px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.foot-grid{grid-template-columns:1fr}}

/* Arabic pages: readable Arabic type, then the few things that do not mirror on their own */
:root[lang="ar"]{--display:"IBM Plex Sans Arabic","Archivo",Arial,sans-serif;--body:"IBM Plex Sans Arabic","Source Sans 3",Arial,sans-serif}
[lang="ar"] body{font-size:1.125rem;line-height:1.85}
[lang="ar"] h1,[lang="ar"] h2,[lang="ar"] h3,[lang="ar"] .brand-name,[lang="ar"] .cat-title,[lang="ar"] .eco p,
[lang="ar"] .consult .motto,[lang="ar"] blockquote.commit{font-stretch:normal;letter-spacing:0}
[lang="ar"] h1,[lang="ar"] h2,[lang="ar"] h3{line-height:1.4;font-weight:700}
[lang="ar"] .hero-copy h1{max-width:21ch}
[lang="ar"] .brand-name{font-weight:700;font-size:1.08rem;line-height:1.35;text-transform:none}
[lang="ar"] .brand-name small{font-size:.85rem}
[lang="ar"] .consult p{line-height:1.8}
[lang="ar"] .ph::before{content:"مكان الصورة"}
[lang="ar"] .lead{line-height:1.8}
[dir="rtl"]{--chamfer-path:polygon(0 var(--chamfer),var(--chamfer) 0,100% 0,100% 100%,0 100%)}
[dir="rtl"] .nav a:not(.btn)::after{transform-origin:right}
[dir="rtl"] .sl-prev svg,[dir="rtl"] .sl-next svg,[dir="rtl"] .lb-prev svg,[dir="rtl"] .lb-next svg{transform:scaleX(-1)}
[dir="rtl"] .part-list a::after{transform:rotate(-45deg)}
[dir="rtl"] .part-list a:hover::after{transform:translateX(-3px) rotate(-45deg)}
[dir="rtl"] .lb-title{padding-inline:1.25rem 4.5rem}
.ltr{direction:ltr;unicode-bidi:isolate}
@media (min-width:761px){
  [dir="rtl"] .slide::after{background:linear-gradient(270deg,rgba(43,47,56,.95) 0%,rgba(43,47,56,.9) 36%,rgba(43,47,56,.55) 58%,rgba(43,47,56,.1) 84%),
                                       linear-gradient(0deg,rgba(43,47,56,.75) 0%,rgba(43,47,56,0) 28%)}
  [dir="rtl"] .page-banner::before{background:linear-gradient(270deg,rgba(43,47,56,.95) 0%,rgba(43,47,56,.88) 48%,rgba(43,47,56,.4) 100%)}
}

@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}