/* ============================================================
   SOUSSPROD — site stylesheet
   Design system carried over from the v4 single page (palette,
   Bodoni Moda × Manrope, grain, editorial grid) and extended with
   B2B components: spec sheets, availability calendar, product rows.
   ============================================================ */
:root{
  --green:#183324; --green-2:#0F2319; --moss:#6E8F62; --moss-soft:#9DB28E;
  --cream:#F2EDE3; --cream-2:#E9E2D4; --sand:#C4AD84; --sand-deep:#9C845B;
  --cold:#DCE5E6; --cold-deep:#B9CBCF; --char:#1A1A18; --ink:#141613;
  --line:rgba(20,22,19,.14); --line-light:rgba(242,237,227,.18);
  --display:"Bodoni Moda","Didot",Georgia,serif;
  --sans:"Manrope","Helvetica Neue",Arial,sans-serif;
  --gutter:clamp(20px,5vw,72px);
  --hdr:76px;
  --ease:cubic-bezier(.16,1,.3,1);
}
[dir="rtl"]{--display:"Tajawal","Bodoni Moda",serif;--sans:"Tajawal","Manrope",sans-serif}
[dir="rtl"] .display{line-height:1.15;letter-spacing:0}
[dir="rtl"] .d-xxl{line-height:1.08}
[dir="rtl"] .eyebrow,[dir="rtl"] .nav-links,[dir="rtl"] .btn,[dir="rtl"] .link{letter-spacing:0}

@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.32s}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hdr) + 16px)}
body{font-family:var(--sans);font-weight:400;font-size:16px;line-height:1.55;color:var(--ink);background:var(--cream);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video,svg,picture{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--moss);outline-offset:3px}
::selection{background:var(--sand);color:var(--ink)}
.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}
.skip{position:fixed;top:-60px;inset-inline-start:16px;z-index:9999;background:var(--ink);color:var(--cream);padding:10px 16px;font-size:.8rem}
.skip:focus{top:12px}

body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:9000;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");mix-blend-mode:multiply}

/* ---------- type ---------- */
.display{font-family:var(--display);font-weight:400;letter-spacing:-.01em;line-height:.98}
.d-xxl{font-size:clamp(3.4rem,11vw,11.5rem)}
.d-xl{font-size:clamp(2.5rem,6.2vw,6rem)}
.d-l{font-size:clamp(2rem,4.4vw,4.2rem)}
.d-m{font-size:clamp(1.6rem,2.8vw,2.6rem)}
.d-s{font-size:clamp(1.35rem,2vw,1.8rem)}
.eyebrow{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;font-weight:500;opacity:.75}
.lede{font-size:clamp(1.05rem,1.4vw,1.3rem);line-height:1.5;font-weight:300;max-width:34em}
.small{font-size:.86rem;line-height:1.6}
.muted{opacity:.64}
.num{font-family:var(--display);font-size:clamp(3rem,6vw,6rem);line-height:1;letter-spacing:-.02em}
.ph-text{border-bottom:1px dashed currentColor;padding-bottom:.05em;cursor:help}
.missing{border-bottom:1px dashed var(--sand-deep);opacity:.7;font-style:italic}

/* ---------- layout ---------- */
.wrap{padding-inline:var(--gutter)}
.section{position:relative;padding-block:clamp(80px,11vw,160px)}
.section--tight{padding-block:clamp(56px,7vw,100px)}
.section--dark{background:var(--green);color:var(--cream)}
.section--char{background:var(--char);color:var(--cream)}
.section--cold{background:var(--cold);color:var(--ink)}
.section--paper{background:var(--cream-2)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(16px,2vw,32px);row-gap:32px}
.rule{height:1px;background:var(--line)}
.section--dark .rule,.section--char .rule{background:var(--line-light)}
.head{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);align-items:end;margin-bottom:clamp(40px,6vw,80px)}
.head h2{margin-top:14px}
.head--solo{grid-template-columns:1fr}

/* ---------- buttons & links ---------- */
.btn{display:inline-flex;align-items:center;gap:14px;padding:16px 26px;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;border:1px solid currentColor;transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);position:relative}
.btn::after{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;transition:transform .35s var(--ease)}
.btn:hover::after{transform:translateX(4px)}
[dir="rtl"] .btn:hover::after{transform:translateX(-4px)}
.btn--solid{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.btn--solid:hover{background:var(--green);border-color:var(--green)}
.section--dark .btn--solid,.section--char .btn--solid,.hero .btn--solid{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.section--dark .btn--solid:hover,.section--char .btn--solid:hover,.hero .btn--solid:hover{background:var(--sand);border-color:var(--sand)}
.btn--ghost:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.section--dark .btn--ghost:hover,.section--char .btn--ghost:hover,.hero .btn--ghost:hover{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.btn-row{display:flex;gap:12px;flex-wrap:wrap}
.link{display:inline-flex;gap:10px;align-items:center;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;padding-bottom:6px;border-bottom:1px solid currentColor;transition:gap .3s var(--ease)}
.link::after{content:"→"}
[dir="rtl"] .link::after{content:"←"}
.link:hover{gap:16px}

/* ---------- images ---------- */
.ph{position:relative;overflow:hidden;background:var(--green-2);isolation:isolate}
.ph[data-ratio="16/9"]{aspect-ratio:16/9}.ph[data-ratio="4/5"]{aspect-ratio:4/5}.ph[data-ratio="3/4"]{aspect-ratio:3/4}
.ph[data-ratio="1/1"]{aspect-ratio:1/1}.ph[data-ratio="21/9"]{aspect-ratio:21/9}.ph[data-ratio="3/2"]{aspect-ratio:3/2}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.03);transition:transform 1.2s var(--ease)}
a:hover .ph img,.ph:hover img{transform:scale(1)}
.ph .ph-fill{position:absolute;inset:0;background:radial-gradient(120% 90% at 20% 90%,rgba(110,143,98,.55),transparent 60%),radial-gradient(90% 70% at 85% 10%,rgba(196,173,132,.35),transparent 55%),linear-gradient(160deg,#22402F 0%,#142A1E 60%,#0F2319 100%)}
.ph .ph-frame{position:absolute;inset:14px;border:1px solid rgba(242,237,227,.18);pointer-events:none}
.ph .ph-label{position:absolute;inset-inline:16px;bottom:14px;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(242,237,227,.75)}
.ph--video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
figcaption.cap{font-size:.74rem;letter-spacing:.04em;opacity:.62;margin-top:10px}
[data-parallax]{will-change:transform}

/* ============================================================
   HEADER — solid on every page; transparent over the home film
   ============================================================ */
.hdr{position:fixed;top:0;inset-inline:0;z-index:500;height:var(--hdr);display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 var(--gutter);
  color:var(--ink);background:rgba(242,237,227,.93);-webkit-backdrop-filter:saturate(1.2) blur(14px);backdrop-filter:saturate(1.2) blur(14px);border-bottom:1px solid var(--line);
  transition:background .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease),height .45s var(--ease)}
.over-hero .hdr:not(.solid){background:transparent;color:var(--cream);border-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.over-hero .hdr:not(.solid)::before{content:"";position:absolute;inset:0 0 -40px;background:linear-gradient(rgba(11,26,19,.55),transparent);pointer-events:none;z-index:-1}
.hdr.solid{height:64px}
.brand{font-family:var(--display);font-size:1.3rem;letter-spacing:.06em;display:flex;align-items:baseline;gap:10px;white-space:nowrap}
.brand{align-items:center}
.brand-mark{height:34px;width:auto;flex:none;margin-inline-end:2px}
.brand .on-dark{display:none}
.over-hero .hdr:not(.solid) .brand .on-light,.menu-open .brand .on-light{display:none}
.over-hero .hdr:not(.solid) .brand .on-dark,.menu-open .brand .on-dark{display:block}
.footer-logo{width:220px;height:auto}
.brand small{font-family:var(--sans);font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;opacity:.7}
.nav-links{display:flex;gap:clamp(18px,2.2vw,32px);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500}
.nav-links a{position:relative;padding-block:6px;white-space:nowrap}
.nav-links a::after{content:"";position:absolute;inset-inline:0 100%;bottom:0;height:1px;background:currentColor;transition:inset-inline-end .35s var(--ease)}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{inset-inline-end:0}
.nav-right{display:flex;align-items:center;gap:18px}
.lang{display:flex;gap:2px;font-size:.68rem;letter-spacing:.12em;font-weight:500}
.lang a{padding:6px 6px;opacity:.5;transition:opacity .2s}
.lang a:hover{opacity:.85}
.lang a[aria-current="true"]{opacity:1;text-decoration:underline;text-underline-offset:5px}
.hdr-cta{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;padding:12px 18px;background:var(--ink);color:var(--cream);border:1px solid var(--ink);white-space:nowrap;transition:background .3s,color .3s,border-color .3s}
.hdr-cta:hover{background:var(--green);border-color:var(--green)}
.over-hero .hdr:not(.solid) .hdr-cta{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.hdr-cta .short{display:none}
.burger{display:none;width:44px;height:44px;place-items:center}
.burger span{display:block;width:22px;height:1px;background:currentColor;margin:3px 0;transition:transform .4s var(--ease)}
.menu-open .burger span:first-child{transform:translateY(3.5px) rotate(45deg)}
.menu-open .burger span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.menu-open .hdr{background:transparent;color:var(--cream);border-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.menu-open .hdr::before{display:none}
.menu-open .hdr-cta{background:var(--cream);color:var(--ink);border-color:var(--cream)}

.mmenu{position:fixed;inset:0;z-index:450;background:var(--green);color:var(--cream);display:flex;flex-direction:column;justify-content:flex-end;padding:calc(var(--hdr) + 20px) var(--gutter) 32px;clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ease);visibility:hidden}
.menu-open .mmenu{clip-path:inset(0 0 0 0);visibility:visible}
.mmenu>nav a{display:block;font-family:var(--display);font-size:clamp(2.2rem,9vw,3.6rem);line-height:1.12;padding:4px 0;opacity:0;transform:translateY(18px);transition:opacity .5s,transform .6s var(--ease)}
.menu-open .mmenu>nav a{opacity:1;transform:none}
.mmenu>nav a[aria-current="page"]{font-style:italic;color:var(--sand)}
.mm-foot{margin-top:36px;padding-top:20px;border-top:1px solid var(--line-light);display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase}
.mm-foot .lang{gap:4px}.mm-foot .lang a{font-size:.8rem;padding:8px 10px;opacity:.6}.mm-foot .lang a[aria-current="true"]{opacity:1}

/* ============================================================
   HOME HERO (film)
   ============================================================ */
.hero{position:relative;height:100svh;min-height:640px;background:var(--green-2);color:var(--cream);overflow:hidden;display:flex;align-items:flex-end}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media video,.hero-media img{width:100%;height:100%;object-fit:cover}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,26,19,.3),transparent 30%,rgba(11,26,19,.25) 55%,rgba(11,26,19,.88))}
.hero-body{position:relative;z-index:1;width:100%;padding:0 var(--gutter) clamp(36px,6vh,72px)}
.hero-grid{display:grid;grid-template-columns:1fr auto;align-items:end;gap:40px}
.hero h1{margin:0 0 24px}
.hero h1 .kicker{display:block;font-family:var(--sans);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;font-weight:500;opacity:.85;margin-bottom:18px;animation:fade 1.2s .2s both}
[dir="rtl"] .hero h1 .kicker{letter-spacing:0;font-size:.9rem}
.hero h1 .line{display:block;overflow:hidden}
.hero h1 .line span{display:block;transform:translateY(110%);animation:rise 1.4s var(--ease) forwards}
.hero h1 .line:nth-child(3) span{animation-delay:.12s}
@keyframes rise{to{transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
.hero .lede{animation:fade 1.2s .55s both;max-width:36em}
.hero .btn-row{margin-top:32px;animation:fade 1.2s .75s both}
.hero-meta{display:grid;gap:14px;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;text-align:end;animation:fade 1.2s .9s both}
.hero-meta div{border-top:1px solid var(--line-light);padding-top:10px;min-width:210px}
.hero-meta span{display:block;opacity:.55;font-size:.62rem;margin-bottom:4px}
.scroll-cue{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);width:1px;height:56px;background:linear-gradient(var(--cream),transparent);opacity:.5;z-index:1}

/* ============================================================
   INNER PAGE HERO + BREADCRUMB
   ============================================================ */
.phero{padding:calc(var(--hdr) + clamp(48px,8vw,110px)) var(--gutter) clamp(44px,6vw,84px)}
.phero h1{margin:16px 0 26px;max-width:15em}
.phero .lede{max-width:40em}
.phero--dark{background:var(--green);color:var(--cream)}
.phero--split{display:grid;grid-template-columns:7fr 5fr;gap:clamp(24px,4vw,64px);align-items:end}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:.72rem;letter-spacing:.06em;margin-bottom:28px}
.crumbs li{display:flex;gap:8px;opacity:.62}
.crumbs li:last-child{opacity:1}
.crumbs li+li::before{content:"/";opacity:.6}
.crumbs a:hover{text-decoration:underline;text-underline-offset:4px}
.jump{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:34px}
.jump span{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;opacity:.6;margin-inline-end:6px}
.jump a{font-size:.8rem;padding:8px 14px;border:1px solid var(--line);transition:background .25s,color .25s,border-color .25s}
.jump a:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}

/* ============================================================
   PRODUCT CARDS (home / related)
   ============================================================ */
.pcards{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,28px);row-gap:clamp(36px,4vw,56px)}
.pcard{display:block}
.pcard .ph{margin-bottom:16px}
.pcard .eyebrow{font-size:.62rem}
.pcard h3{font-family:var(--display);font-weight:400;font-size:clamp(1.35rem,1.9vw,1.75rem);line-height:1.1;margin:6px 0 8px}
.pcard p{font-size:.84rem;opacity:.72}
.pcard .mbar{margin-top:12px}
.pcard:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}

/* month bar */
.mbar{display:grid;grid-template-columns:repeat(12,1fr);gap:2px;height:6px;max-width:260px}
.mbar i{background:rgba(20,22,19,.1)}
.mbar i.on{background:var(--green)}
.mbar i.late{background:linear-gradient(90deg,rgba(20,22,19,.1) 50%,var(--green) 50%)}
.mbar i.early{background:linear-gradient(90deg,var(--green) 50%,rgba(20,22,19,.1) 50%)}
[dir="rtl"] .mbar i.late{background:linear-gradient(270deg,rgba(20,22,19,.1) 50%,var(--green) 50%)}
[dir="rtl"] .mbar i.early{background:linear-gradient(270deg,var(--green) 50%,rgba(20,22,19,.1) 50%)}
.mbar-lbl{display:grid;grid-template-columns:repeat(12,1fr);max-width:260px;font-size:.56rem;letter-spacing:.04em;opacity:.55;margin-top:6px;text-transform:uppercase}
.mbar-lbl span{text-align:center}

/* ============================================================
   PRODUCTS PAGE — category blocks + product rows
   ============================================================ */
.cat{padding-top:clamp(56px,7vw,100px)}
.cat-head{display:flex;justify-content:space-between;align-items:baseline;gap:24px;flex-wrap:wrap;padding-bottom:22px;border-bottom:1px solid var(--ink)}
.cat-head p{font-size:.9rem;opacity:.7;max-width:34em}
.prow{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:clamp(20px,3vw,48px);padding-block:clamp(28px,3.5vw,44px);border-bottom:1px solid var(--line)}
.prow .ph{max-width:340px}
.prow h3{font-family:var(--display);font-weight:400;font-size:clamp(1.8rem,3vw,2.8rem);line-height:1.05}
.prow h3 a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:8px}
.prow .desc{margin:10px 0 22px;max-width:40em;opacity:.8}
.qspec{display:grid;grid-template-columns:1.1fr 1fr 1.3fr;gap:0;border-top:1px solid var(--line)}
.qspec>div{padding:16px 20px 4px 0}
.qspec>div+div{padding-inline-start:20px;border-inline-start:1px solid var(--line)}
.qspec dt{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;opacity:.55;margin-bottom:8px}
[dir="rtl"] .qspec dt{letter-spacing:0;font-size:.75rem}
.qspec dd{font-size:.92rem}
.qspec dd .mbar{margin-top:10px}
.prow .link{margin-top:22px}

.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-block;font-size:.82rem;padding:5px 10px;border:1px solid var(--line);font-variant-numeric:tabular-nums;white-space:nowrap}
.plist li{padding:3px 0}
.plist li::before{content:"— ";opacity:.4}

/* ============================================================
   AVAILABILITY CALENDAR
   ============================================================ */
.cal-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-top:1px solid var(--ink)}
.cal{width:100%;min-width:760px;border-collapse:collapse;font-size:.84rem}
.cal th,.cal td{padding:0;text-align:center}
.cal thead th{font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;font-weight:500;opacity:.6;padding:14px 0 12px}
[dir="rtl"] .cal thead th{letter-spacing:0;font-size:.72rem}
.cal tbody th{text-align:start;font-weight:400;padding:14px 16px 14px 0;white-space:nowrap;position:sticky;inset-inline-start:0;background:inherit;z-index:1;min-width:190px}
.cal tbody th a:hover{text-decoration:underline;text-underline-offset:4px}
.cal tbody tr{border-bottom:1px solid var(--line)}
.cal td{padding:0 1px}
.cal td i{display:block;height:14px}
.cal td.on i{background:var(--green)}
.cal td.late i{background:linear-gradient(90deg,transparent 50%,var(--green) 50%)}
.cal td.early i{background:linear-gradient(90deg,var(--green) 50%,transparent 50%)}
[dir="rtl"] .cal td.late i{background:linear-gradient(270deg,transparent 50%,var(--green) 50%)}
[dir="rtl"] .cal td.early i{background:linear-gradient(270deg,var(--green) 50%,transparent 50%)}
.cal .now{background:rgba(196,173,132,.22)}
.cal thead th.now{opacity:1;color:var(--sand-deep);font-weight:700}
.section--paper .cal tbody th{background:var(--cream-2)}
.cal-foot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:18px;font-size:.78rem;opacity:.72}
.cal-legend{display:flex;gap:18px;align-items:center}
.cal-legend i{display:inline-block;width:18px;height:8px;background:var(--green);margin-inline-end:6px;vertical-align:middle}
.cal-legend i.h{background:linear-gradient(90deg,transparent 50%,var(--green) 50%);outline:1px solid var(--line)}
.cal-legend i.n{background:rgba(196,173,132,.5)}

/* ============================================================
   PRODUCT PAGE
   ============================================================ */
.pp{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(28px,5vw,88px);align-items:start;padding:calc(var(--hdr) + clamp(28px,4vw,56px)) var(--gutter) clamp(60px,8vw,120px)}
.pp-media{position:sticky;top:calc(var(--hdr) + 20px)}
.pp-media .ph{max-height:calc(100svh - var(--hdr) - 60px)}
.pp-thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}
.pp-info h1{margin:12px 0 18px}
.pp-info .lede{margin-bottom:34px}
.spec{border-top:1px solid var(--ink)}
.spec>div{display:grid;grid-template-columns:minmax(120px,1fr) 2.4fr;gap:20px;padding:20px 0;border-bottom:1px solid var(--line);align-items:start}
.spec dt{font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;opacity:.6;padding-top:4px}
[dir="rtl"] .spec dt{letter-spacing:0;font-size:.8rem}
.spec dd{font-size:1rem}
.spec dd .mbar{margin-top:12px;max-width:340px;height:8px}
.spec dd .mbar-lbl{max-width:340px}
.pp-actions{margin-top:34px}
.pp-note{margin-top:18px;font-size:.8rem;opacity:.6}
.prep{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line-light)}
.prep a{padding:26px 22px 26px 0;border-inline-end:1px solid var(--line-light);display:flex;flex-direction:column;gap:14px}
.prep a+a{padding-inline-start:22px}
.prep a:last-child{border:0}
.prep b{font-family:var(--display);font-weight:400;font-size:1.5rem}
.prep a:hover b{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}

/* ============================================================
   HOME — buyer strip, proof, about teaser
   ============================================================ */
.strip{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line)}
.strip div{padding:26px 20px 26px 0;border-inline-end:1px solid var(--line)}
.strip div+div{padding-inline-start:20px}
.strip div:last-child{border:0}
.strip b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(1.3rem,2vw,1.8rem);line-height:1.1}
.strip span{display:block;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;opacity:.6;margin-bottom:10px}
[dir="rtl"] .strip span{letter-spacing:0;font-size:.78rem}
.points{margin-top:34px;border-top:1px solid var(--line)}
.points li{display:grid;grid-template-columns:40px 1fr;gap:14px;padding:18px 0;border-bottom:1px solid var(--line)}
.points li span{font-family:var(--display);opacity:.55}
.points b{font-weight:600;display:block;margin-bottom:3px}
.points p{font-size:.9rem;opacity:.75}
.certs{display:grid;grid-template-columns:1fr 2fr;gap:24px 40px;align-items:center;border-top:1px solid var(--line-light);padding-top:36px;margin-top:clamp(40px,6vw,80px)}
.certs--light{border-color:var(--line)}
.cert-slots{display:flex;gap:12px;flex-wrap:wrap}
.cert-slot{width:108px;height:108px;background:#fff;display:grid;place-items:center;padding:14px;transition:transform .4s var(--ease)}
.cert-slot img{width:100%;height:100%;object-fit:contain}
.cert-slot:hover{transform:translateY(-3px)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.stat{padding:30px 24px 30px 0;border-inline-end:1px solid var(--line)}
.stat+.stat{padding-inline-start:24px}
.stat:last-child{border:0}
.stat .num{color:var(--green)}
.section--dark .stat .num{color:var(--cream)}
.stat p{margin-top:12px;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;opacity:.7}

/* ============================================================
   JOURNEY — pinned horizontal (desktop) / stacked (mobile)
   ============================================================ */
.journey{position:relative;color:var(--cream);--jbg:#183324}
.journey-sticky{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--jbg);color:var(--cream);transition:background 1.1s ease,color 1.1s ease}
.journey-head{position:absolute;top:0;inset-inline:0;padding:calc(var(--hdr) + 20px) var(--gutter) 0;z-index:3;display:flex;justify-content:space-between;align-items:flex-start;gap:40px}
.journey-head h2{margin-top:12px;max-width:16em}
.journey-head .jh-sub{max-width:22em;text-align:end;padding-top:6px}
.route{position:absolute;top:calc(var(--hdr) + 210px);inset-inline:var(--gutter);height:2px;z-index:2}
.route-base{position:absolute;inset:0;background:currentColor;opacity:.18}
.route-fill{position:absolute;inset:0;background:currentColor;transform-origin:left;transform:scaleX(0)}
[dir="rtl"] .route-fill{transform-origin:right}
.route-dots{position:absolute;inset:-3px 0;display:flex;justify-content:space-between}
.route-dots i{width:8px;height:8px;border-radius:50%;border:1px solid currentColor;background:var(--jbg);transition:background .4s}
.route-dots i.on{background:currentColor}
.route .ends{position:absolute;top:-24px;inset-inline:0;display:flex;justify-content:space-between;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;opacity:.65}
.journey-track{display:flex;height:100%;align-items:flex-end;padding:0 var(--gutter) clamp(36px,6vh,72px);gap:clamp(60px,8vw,140px);will-change:transform}
.stage{flex:0 0 auto;width:min(78vw,900px);display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:end;padding-top:calc(var(--hdr) + 260px)}
.stage .stage-n{font-family:var(--display);font-size:.95rem;letter-spacing:.1em;opacity:.6}
.stage h3{margin:10px 0 18px;font-size:clamp(2.2rem,4.4vw,4rem)}
.stage p{max-width:26em;font-weight:300;font-size:1.02rem;opacity:.85}
.stage .ph{max-height:calc(100svh - var(--hdr) - 300px);aspect-ratio:4/5}
.stage-final{width:min(70vw,780px);grid-template-columns:1fr}
.stage-final h3{font-size:clamp(3rem,9vw,8rem)}
.stage-final .link{margin-top:26px}
.journey-progress{position:absolute;bottom:26px;inset-inline:var(--gutter);display:flex;justify-content:space-between;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;opacity:.6;z-index:3}

/* ============================================================
   APPROACH — editorial stage rows
   ============================================================ */
.srow{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(16px,2vw,32px);align-items:center;padding-block:clamp(48px,6vw,90px);border-top:1px solid var(--line)}
.srow figure{grid-column:1/span 5}
.srow .txt{grid-column:7/span 5}
.srow:nth-child(even) figure{grid-column:8/span 5;order:2}
.srow:nth-child(even) .txt{grid-column:2/span 5;order:1}
.srow .n{font-family:var(--display);font-size:clamp(3rem,6vw,5.5rem);line-height:1;opacity:.18;display:block;margin-bottom:10px}
.srow h2{margin-bottom:16px}
.qstep{display:grid;grid-template-columns:60px 1fr;gap:20px;padding:28px 0;border-top:1px solid var(--line-light)}
.qstep:last-child{border-bottom:1px solid var(--line-light)}
.qstep .n{font-family:var(--display);font-size:1.3rem;opacity:.6}
.qstep h3{font-family:var(--display);font-size:clamp(1.4rem,2.2vw,2rem);font-weight:400;margin-bottom:6px}
.qstep p{font-weight:300;opacity:.8;max-width:30em}
.vframe{position:relative;aspect-ratio:9/16;max-height:78vh;overflow:hidden;background:var(--green-2)}
.vframe video{width:100%;height:100%;object-fit:cover}

/* ============================================================
   EXPORT — chain, packaging table, globe, order steps
   ============================================================ */
.chain{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line)}
.chain div{padding:24px 18px 26px 0;border-inline-end:1px solid var(--line)}
.chain div+div{padding-inline-start:18px}
.chain div:last-child{border:0}
.chain .t{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;opacity:.5;display:block;margin-bottom:14px}
.chain b{display:block;font-family:var(--display);font-size:clamp(1.3rem,2vw,1.9rem);font-weight:400;margin-bottom:8px}
.chain small{font-size:.84rem;font-weight:300;opacity:.78;display:block;max-width:20em}
.ptable{width:100%;border-collapse:collapse;border-top:1px solid var(--ink)}
.ptable th{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;opacity:.6;text-align:start;padding:14px 0}
.ptable td{padding:16px 16px 16px 0;border-top:1px solid var(--line);vertical-align:top}
.ptable td:first-child{font-family:var(--display);font-size:1.25rem;white-space:nowrap;width:32%}
.ptable td a{text-decoration:underline;text-decoration-color:rgba(20,22,19,.3);text-underline-offset:4px}
.ptable td a:hover{text-decoration-color:currentColor}
.globe-stage{position:relative;width:100%;height:clamp(420px,52vw,580px)}
.globe-stage canvas{display:block}
.globe-label{position:absolute;top:0;left:0;opacity:0;pointer-events:none;white-space:nowrap;transform:translate(-50%,-50%);transition:opacity .4s var(--ease);z-index:2}
.globe-label b{font-family:var(--display);font-weight:500;font-size:15px;color:var(--cream)}
.globe-label small{display:block;margin-top:3px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--sand)}
.globe-label .gdot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--cream);margin-inline-end:7px;vertical-align:middle;box-shadow:0 0 8px var(--sand)}
.globe-label--eu b{color:var(--sand);font-style:italic;font-size:20px}
.globe-hint{position:absolute;bottom:6px;inset-inline-end:0;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(242,237,227,.4);pointer-events:none}
.dest-list{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;border-top:1px solid var(--line-light);padding-top:24px;font-size:.9rem}
.dest-list span{display:block;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;opacity:.55;margin-bottom:6px}
.steps5{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--ink);counter-reset:s}
.steps5 li{padding:24px 18px 10px 0;border-inline-end:1px solid var(--line)}
.steps5 li+li{padding-inline-start:18px}
.steps5 li:last-child{border:0}
.steps5 li::before{counter-increment:s;content:"0" counter(s);font-family:var(--display);font-size:1.1rem;opacity:.5;display:block;margin-bottom:22px}
.steps5 b{display:block;font-family:var(--display);font-weight:400;font-size:1.45rem;margin-bottom:8px}
.steps5 p{font-size:.86rem;opacity:.75}

/* ============================================================
   GALLERY
   ============================================================ */
.gal-stage{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--green-2)}
.gal-slides{position:absolute;inset:0}
.gal-stage figure{position:absolute;inset:0;opacity:0;transition:opacity 1s var(--ease);pointer-events:none}
.gal-stage figure.on{opacity:1;z-index:1;pointer-events:auto}
.gal-stage img{width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform 6.5s linear}
.gal-stage figure.on img{transform:scale(1.09)}
.gal-cap{position:absolute;inset-inline:0;bottom:0;padding:26px clamp(18px,3vw,34px);color:var(--cream);background:linear-gradient(transparent,rgba(11,26,19,.82));font-size:.82rem;display:flex;justify-content:space-between;gap:16px;align-items:flex-end}
.gal-cap b{font-family:var(--display);font-size:clamp(1.1rem,2vw,1.8rem);font-weight:400;display:block;margin-bottom:4px}
.gal-nav{position:absolute;inset-inline:0;top:50%;transform:translateY(-50%);display:flex;justify-content:space-between;padding:0 14px;pointer-events:none;z-index:3}
.gal-nav button{pointer-events:auto;width:46px;height:46px;border-radius:50%;background:rgba(242,237,227,.88);color:var(--ink);display:grid;place-items:center;font-size:1rem;transition:background .3s,transform .3s var(--ease)}
.gal-nav button:hover{background:var(--cream);transform:scale(1.08)}
.gal-bar{display:flex;gap:8px;margin-top:18px}
.gal-bar button{flex:1;height:2px;background:rgba(242,237,227,.22);position:relative;overflow:hidden;padding:0}
.gal-bar button i{position:absolute;inset:0;background:currentColor;transform:scaleX(0);transform-origin:left;display:block}
[dir="rtl"] .gal-bar button i{transform-origin:right}
.gal-bar button[aria-current="true"] i{animation:galfill 5.2s linear forwards}
@keyframes galfill{to{transform:scaleX(1)}}

/* ============================================================
   ABOUT / LEADER / FACTS
   ============================================================ */
.values{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.values div{padding:26px 22px 26px 0;border-inline-end:1px solid var(--line)}
.values div+div{padding-inline-start:22px}
.values div:last-child{border:0}
.values b{display:block;font-family:var(--display);font-weight:400;font-size:1.6rem;margin-bottom:8px}
.values p{font-size:.9rem;font-weight:300;opacity:.78}
.leader .grid{align-items:center}
.leader figure{grid-column:2/span 4}
.leader .txt{grid-column:7/span 5}
.leader blockquote{font-family:var(--display);font-size:clamp(1.6rem,2.8vw,2.6rem);line-height:1.2;margin:24px 0 28px;font-style:italic}
.leader .name{font-family:var(--display);font-size:1.4rem}
.leader .role{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;opacity:.6;margin-top:4px}
.facts{border-top:1px solid var(--ink)}
.facts>div{display:grid;grid-template-columns:minmax(140px,1fr) 3fr;gap:20px;padding:18px 0;border-bottom:1px solid var(--line)}
.facts dt{font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;opacity:.6;padding-top:3px}
[dir="rtl"] .facts dt{letter-spacing:0;font-size:.8rem}

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(32px,6vw,100px);align-items:start}
.direct{border-top:1px solid var(--ink)}
.direct>div{padding:16px 0;border-bottom:1px solid var(--line)}
.direct dt{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;opacity:.55;margin-bottom:4px}
.direct dd{font-size:1rem}
.direct dd a:hover{text-decoration:underline;text-underline-offset:4px}
.form{display:grid;grid-template-columns:1fr 1fr;gap:0 28px}
.field{position:relative;padding:26px 0 10px;border-bottom:1px solid var(--line)}
.field.full{grid-column:1/-1}
.field label,.field .lbl{display:block;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;opacity:.65;margin-bottom:8px}
[dir="rtl"] .field label,[dir="rtl"] .field .lbl{letter-spacing:0;font-size:.8rem}
.field input,.field select,.field textarea{width:100%;background:none;border:0;font:inherit;font-size:1.02rem;color:inherit;padding:4px 0;outline:none}
.field textarea{resize:vertical;min-height:90px}
.field select{appearance:none;cursor:pointer}
.field:focus-within{border-color:var(--ink)}
.req{color:var(--sand-deep)}
.checks{display:flex;flex-wrap:wrap;gap:8px;padding-top:4px}
.field .chk,.chk{position:relative;cursor:pointer;display:inline-block;margin:0;text-transform:none;letter-spacing:0;opacity:1;font-size:inherit}
.chk input{position:absolute;opacity:0;pointer-events:none}
.chk span{display:inline-block;padding:9px 14px;border:1px solid var(--line);font-size:.86rem;transition:background .2s,color .2s,border-color .2s}
.chk:hover span{border-color:var(--ink)}
.chk input:checked+span{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.chk input:focus-visible+span{outline:2px solid var(--moss);outline-offset:2px}
.form-actions{grid-column:1/-1;display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:34px}
.form-note{grid-column:1/-1;font-size:.8rem;opacity:.65;margin-top:14px}
.form-msg{font-size:.9rem;font-weight:500}
.form-msg.err{color:#8a2f1d}

/* ============================================================
   CTA, EVENT, FOOTER
   ============================================================ */
.cta{text-align:center}
.cta h2{margin:18px auto 22px;max-width:12em}
.cta p{margin:0 auto 34px}
.cta .btn-row{justify-content:center}
.next{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:end;border-top:1px solid var(--ink);padding-top:32px}
.event{display:none}.event.show{display:block}
.event .box{border:1px solid var(--line-light);padding:clamp(28px,4vw,56px);display:grid;grid-template-columns:1fr auto;gap:30px;align-items:end}
.event-meta{display:flex;gap:30px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;margin-top:20px}
.event-bar{display:none;position:fixed;bottom:0;inset-inline:0;z-index:400;background:var(--sand);color:var(--ink);padding:12px var(--gutter);font-size:.74rem;letter-spacing:.08em;align-items:center;justify-content:space-between;gap:16px;transform:translateY(100%);transition:transform .7s var(--ease)}
.event-bar.show{display:flex}.event-bar.in{transform:none}
.event-bar b{font-weight:600;text-transform:uppercase;letter-spacing:.14em}
.event-bar a{border-bottom:1px solid currentColor;white-space:nowrap}
.footer{background:var(--char);color:var(--cream);padding:clamp(60px,8vw,110px) var(--gutter) 30px}
.footer-top{display:grid;grid-template-columns:2fr 1fr 1fr 1.3fr;gap:30px;padding-bottom:50px;border-bottom:1px solid var(--line-light)}
.footer .brand{font-size:1.8rem}
.footer ul{display:grid;gap:9px;font-size:.84rem;font-weight:300}
.footer ul a{opacity:.85}.footer ul a:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}
.footer h2{font-family:var(--sans);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;opacity:.5;margin-bottom:16px;font-weight:500}
.footer-word{font-family:var(--display);font-size:clamp(3rem,13vw,14rem);line-height:.9;letter-spacing:-.02em;opacity:.1;margin:40px 0 -8px;white-space:nowrap;overflow:hidden}
.footer-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:22px;font-size:.7rem;letter-spacing:.06em;opacity:.55}
.footer-bottom a:hover{text-decoration:underline}

/* reveal — editorial blocks only, never on specs */
.reveal{opacity:0;transform:translateY(22px);transition:opacity 1s var(--ease),transform 1.1s var(--ease)}
.reveal.in{opacity:1;transform:none}
.no-js .reveal{opacity:1;transform:none}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1180px){
  .nav-links{display:none}
  .burger{display:grid}
  .hdr .lang{display:none}
  .pcards{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  :root{--hdr:64px}
  .hdr.solid{height:var(--hdr)}
  .brand small{display:none}
  .brand-mark{height:28px}
  .hdr-cta{padding:10px 14px}
  .hdr-cta .long{display:none}.hdr-cta .short{display:inline}
  .grid{grid-template-columns:1fr;row-gap:36px}
  .grid>*{grid-column:auto !important}
  .head,.phero--split{grid-template-columns:1fr}
  .hero-grid{grid-template-columns:1fr}
  .hero{height:auto;min-height:100svh;padding-top:calc(var(--hdr) + 48px)}
  .hero .btn-row .btn{flex:1 1 auto;justify-content:center}
  .cal tbody th{min-width:118px;max-width:130px;white-space:normal;font-size:.78rem;padding-inline-end:10px;line-height:1.25}
  .cal{min-width:640px}
  .hero-meta{display:none}
  .d-xxl{font-size:clamp(3rem,15vw,5.4rem)}
  .strip{grid-template-columns:1fr 1fr}
  .strip div{border:0;border-bottom:1px solid var(--line);padding:18px 0}
  .strip div+div{padding-inline-start:0}
  .strip div:nth-child(odd){padding-inline-end:14px}
  .prow{grid-template-columns:1fr}
  .prow .ph{max-width:none;aspect-ratio:3/2}
  .qspec{grid-template-columns:1fr}
  .qspec>div,.qspec>div+div{padding:14px 0;border-inline-start:0;border-bottom:1px solid var(--line)}
  .pp{grid-template-columns:1fr}
  .pp-media{position:static}
  .pp-media .ph{max-height:none}
  .spec>div{grid-template-columns:1fr;gap:8px}
  .prep{grid-template-columns:1fr}
  .prep a,.prep a+a{padding:20px 0;border:0;border-bottom:1px solid var(--line-light)}
  .journey-sticky{position:static;height:auto;overflow:visible;background:var(--green) !important;color:var(--cream) !important}
  .journey-head{position:static;padding:80px var(--gutter) 0;flex-direction:column}
  .journey-head .jh-sub{text-align:start}
  .route,.journey-progress{display:none}
  .journey-track{flex-direction:column;align-items:stretch;padding:36px var(--gutter) 64px;gap:52px;transform:none !important}
  .stage{width:auto;grid-template-columns:1fr;padding-top:0}
  .stage figure{order:-1}
  .stage .ph{max-height:none;aspect-ratio:3/2}
  .stage-final{width:auto}
  .stage-final h3{font-size:clamp(3rem,16vw,5rem)}
  .srow{grid-template-columns:1fr}
  .srow figure,.srow .txt,.srow:nth-child(even) figure,.srow:nth-child(even) .txt{grid-column:auto;order:0}
  .chain,.steps5{grid-template-columns:1fr}
  .chain div,.chain div+div,.steps5 li,.steps5 li+li{padding:18px 0;border:0;border-bottom:1px solid var(--line)}
  .steps5 li::before{margin-bottom:8px}
  .dest-list{grid-template-columns:1fr 1fr}
  .values{grid-template-columns:1fr 1fr}
  .values div,.values div+div{border:0;border-bottom:1px solid var(--line);padding:18px 0}
  .values div:nth-child(odd){padding-inline-end:14px}
  .stats{grid-template-columns:1fr}
  .stat,.stat+.stat{border:0;border-bottom:1px solid var(--line);padding:20px 0;display:flex;align-items:baseline;justify-content:space-between;gap:16px}
  .stat p{margin:0;text-align:end}
  .certs{grid-template-columns:1fr}
  .cert-slot{width:84px;height:84px;padding:10px}
  .contact-grid{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
  .facts>div{grid-template-columns:1fr;gap:4px}
  .event .box,.next{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr 1fr}
  .footer-top>div:first-child{grid-column:1/-1}
  .gal-stage{aspect-ratio:4/5}
  .gal-nav button{width:38px;height:38px}
  .ptable td:first-child{white-space:normal;font-size:1.05rem}
}
@media (max-width:480px){.pcards{grid-template-columns:1fr 1fr;gap:14px}.pcard h3{font-size:1.2rem}.pcard p{font-size:.78rem}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
  .hero h1 .line span{transform:none}
  .reveal{opacity:1;transform:none}
  .journey-sticky{position:static;height:auto}
  .journey-track{flex-direction:column;transform:none !important;padding:40px var(--gutter)}
  .stage{width:auto;padding-top:0}.route,.journey-progress{display:none}
}
@media print{.hdr,.mmenu,.event-bar,.scroll-cue,body::before,.hero-media video{display:none}.phero,.pp{padding-top:20px}}