/* Omari Solutions: editorial industrial identity. Shared across all four locales. */
:root{--bg:#f7f6f2;--surface:#fff;--surface-2:#eeeee8;--navy:#102831;--navy-2:#1d3c46;--navy-3:#2a4d57;--ink:#142c35;--ink-body:#46565b;--ink-soft:#606c70;--ink-faint:#646c6f;--line:#dce0da;--line-strong:#bac3bd;--teal:#ad4b27;--teal-2:#c35a30;--teal-bright:#efad83;--teal-soft:#f4e7db;--teal-ink:#97401f;--f-display:'Manrope',Arial,sans-serif;--f-body:'Manrope','Segoe UI',Arial,sans-serif;--r-s:8px;--r-m:14px;--r-l:22px;--r-pill:999px;--sh-sm:0 1px 2px #10283110,0 2px 6px #1028310a;--sh-md:0 6px 16px -6px #10283126,0 16px 40px -20px #1028312e;--sh-lg:0 20px 50px -18px #10283140,0 40px 90px -40px #10283133;--sh-teal:0 14px 34px -14px #ad4b2755;--maxw:1440px;--pad:64px;--e-travel:cubic-bezier(.16,.84,.28,1);--e-draw:cubic-bezier(.35,0,.15,1);--t-feedback:.25s;--t-travel:.6s;--t-draw:.9s}
body{font-size:15px}h1,h2,h3{letter-spacing:-.045em}/* ==============================================================
   HEADER

   The utility strip scrolls away with the page and the nav bar is
   the sticky element, at a height that never changes.

   It used to be the other way round: the whole header was sticky
   and collapsed from 132px to 68px past 12px of scroll. Because a
   sticky element is still in flow, that shrank the document under
   the reader, Chrome's scroll anchoring corrected for it by pulling
   scrollY back down, that dropped scroll below the 12px threshold,
   the header sprang open again — and the page shook and snapped
   back to the top. Measured: scrollY 14 -> 6 -> 0 in three frames.

   So the rule here is layout-invariance: nothing that sticks may
   change its own height on scroll. .scrolled now only paints a
   shadow. overflow-anchor is off on the header as a second belt.
   ============================================================== */
/* Sticky lives on the <header>, not on .navbar: a sticky element
   can only stick inside its own parent, and the header was
   exactly as tall as the bar — so the bar had nowhere to stick
   and scrolled away with the page. top:-38px parks the 38px
   utility strip just above the viewport and leaves the nav bar
   pinned. Height never changes on scroll, so no anchoring jump. */
header.site{position:sticky;top:-38px;z-index:60;background:transparent;border-bottom:0;box-shadow:none;
  overflow-anchor:none}
.navbar{position:relative;z-index:60;background:#f7f6f2f5;
  -webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);transition:box-shadow .3s ease;overflow-anchor:none}
header.site.scrolled .navbar{box-shadow:0 12px 30px -26px #10283155}.nav-inner{height:94px;gap:24px}nav.main{font-size:11.5px;gap:22px}.nav-right{gap:17px}.nav-right>.btn{font-size:11px;padding:12px 15px}.lang-mini{border:none;border-radius:0;font-size:10px}.lang-mini a{padding:5px}.lang-mini a.on{color:var(--navy);background:none;text-decoration:underline;text-underline-offset:6px}.btn{border-radius:var(--r-s);font-size:12px;padding:16px 23px;min-height:46px}.btn-primary{background:var(--teal)}.btn-primary:hover{background:#903b1e;box-shadow:none}.btn-ghost{border-color:var(--line-strong)}.eyebrow{font-size:10px;letter-spacing:.16em}.eyebrow:before{width:7px;height:7px;border-radius:50%;background:currentColor}.editorial-hero{position:relative;background:var(--navy);color:#fff;min-height:680px;overflow:hidden}.hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:72% 55%;filter:saturate(.4)}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,#0b222bf5 0%,#0b222be8 29%,#0b222b9c 53%,#0b222b08 85%),linear-gradient(0deg,#0b222bbf,transparent 35%)}.editorial-inner{position:relative;min-height:680px;padding-top:75px;padding-bottom:90px}.hero-copy{max-width:645px}.hero-copy .eyebrow{color:#e6b190}.hero-copy h1{font-size:clamp(40px,4.8vw,68px);font-weight:500;line-height:1.07;color:#fff;margin:25px 0 24px;max-width:650px;text-wrap:pretty}.hero-copy h1 em{color:#eab18c;font-style:normal}.hero-copy>p{font-size:14px;line-height:1.9;color:#d0dbdd;max-width:470px}.hero-actions{display:flex;gap:25px;align-items:center;flex-wrap:wrap;margin-top:32px}.hero-link{font-size:11px;color:#fff;display:inline-flex;align-items:center;gap:14px;border-bottom:1px solid #ffffff55;padding:12px 0}.hero-link span{font-size:20px}.hero-foot{position:absolute;bottom:26px;inset-inline:64px;display:flex;justify-content:space-between;border-top:1px solid #ffffff26;padding-top:19px;color:#bccbcc;font:9px var(--f-mono);letter-spacing:.09em}section.block{padding:100px 0}section.mt0{padding-top:0}.sec-head{max-width:760px;margin-bottom:42px}.sec-head h2{font-size:clamp(30px,3.5vw,47px);font-weight:500;margin-top:16px;line-height:1.16}.sec-head p{font-size:14px;max-width:610px;line-height:1.9}.ptag{font-size:9px;letter-spacing:.12em}.partners{padding:34px 0;background:#efefe9}.partners .lbl{font-size:9px;color:#5f6d6c;margin-bottom:25px}.marquee:before{background:linear-gradient(90deg,#efefe9,transparent)}.marquee:after{background:linear-gradient(270deg,#efefe9,transparent)}.mtrack{animation-duration:50s}.case{border-radius:0;box-shadow:none}.spec{grid-template-columns:95px 1fr;padding:22px 0;gap:20px}.spec .v{font-size:13px;line-height:1.9}.spec .k{font-size:9px}.post{border:none;border-radius:0;background:transparent}.post:hover{box-shadow:none;transform:translateY(-3px)}.post .thumb{height:210px;border:0;background:#e7ebe7}.post .thumb img{width:100%;height:100%;object-fit:cover;filter:saturate(.55)}.post .thumb .cat{border-radius:0;box-shadow:none;font-size:9px}.post .pbody{padding:23px 0}.post h4{font-size:20px;font-weight:500;letter-spacing:-.02em}.post p{font-size:12px}.post .meta{font-size:9px}.cta{background:#15333d;border-radius:0;padding:54px}.cta .bp{display:none}.cta h2{font-size:44px;font-weight:500}.cta p{font-size:13px;line-height:1.9}.form{border-radius:3px;box-shadow:none;padding:30px}.form h4{font-size:21px}.chan a{border-radius:2px;font-size:11px}.phero{background:#15333d;padding:80px 0}.phero .inner{max-width:var(--maxw)}.phero h1{font-size:clamp(35px,4.6vw,65px);font-weight:500;max-width:1000px;line-height:1.13}.phero p{font-size:15px;line-height:1.9;max-width:680px}.phero .bp{opacity:.35}.phero .tag{border-radius:0;margin-bottom:19px;background:transparent;border-color:#e3ac8066;font-size:10px}.phero .crumb{font-size:10px}.page-contact main>section.block>.wrap{grid-template-columns:1fr 1fr}.wa{background:#214b3c;box-shadow:none;width:46px;height:46px}footer.site{background:#eaece5;border-top:1px solid #d6dcd3;padding-top:65px}.foot-col h5{font-size:10px;letter-spacing:.1em}.foot-col a,.foot-brand p{font-size:12px}.foot-bottom{font-size:10px}.reveal.pending{opacity:1;transform:none}html{scroll-padding-top:106px}.thumb{isolation:isolate}html[dir=rtl] .hero-shade{transform:scaleX(-1)}html[dir=rtl] .hero-copy h1{line-height:1.5;font-size:clamp(34px,4vw,57px)}html[dir=rtl] .hero-photo{transform:scaleX(-1)}html[dir=rtl] .drawer-panel{right:auto;left:0}html[dir=rtl] .drawer:not(.open) .drawer-panel{transform:translateX(-100%)}@media(min-width:1101px) and (max-width:1300px){:root{--pad:40px}nav.main{gap:14px;font-size:10px}.nav-right>.btn{display:none}}@media(max-width:1100px){:root{--pad:32px}.nav-inner{height:80px}nav.main{display:none}.burger{display:flex}.editorial-inner{padding-top:65px;min-height:650px}.editorial-hero{min-height:650px}.hero-foot{inset-inline:32px}.hero-copy{max-width:590px}.hero-copy h1{font-size:56px}.cta{padding:36px}.cta-inner{gap:30px}.spec{grid-template-columns:1fr;gap:8px}.foot-top{gap:25px}}@media(max-width:760px){:root{--pad:22px}.nav-inner{height:76px;gap:12px}.nav-right{gap:12px}.nav-right>.btn{display:none}.brand{gap:8px}.lang-mini{font-size:9px}.lang-mini a{padding:5px 4px}.burger{width:37px;height:37px;min-width:37px}.editorial-inner{padding-top:55px;min-height:710px;padding-bottom:130px}.editorial-hero{min-height:710px}.hero-copy h1{font-size:clamp(39px,8.8vw,56px);margin-top:25px}.hero-copy>p{font-size:13px;line-height:1.85;max-width:450px}.hero-shade{background:linear-gradient(90deg,#0b222bea,#0b222bb5),linear-gradient(0deg,#0b222bcf,transparent)}.hero-photo{object-position:66% 50%}.hero-actions{gap:15px;align-items:flex-start;flex-direction:column;margin-top:26px}.hero-foot{inset-inline:22px;gap:14px;flex-wrap:wrap;font-size:8px;bottom:24px}section.block{padding:64px 0}section.mt0{padding-top:0}.posts,.case,.cta-inner{grid-template-columns:1fr}.sec-head h2{font-size:34px}.sec-head p{font-size:13px}.spec{grid-template-columns:1fr}.posts{gap:30px}.post .thumb{height:240px}.cta{padding:28px 22px}.cta h2{font-size:35px}.form{padding:22px}.phero{padding:55px 0}.phero h1{font-size:39px}.phero p{font-size:13px}.page-contact main>section.block>.wrap{grid-template-columns:1fr!important;gap:32px!important}.foot-top{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}.foot-bottom{gap:20px}.chan{gap:10px}.chan a{overflow-wrap:anywhere;font-size:10px}.form .frow{grid-template-columns:1fr}html{scroll-padding-top:88px}.hero-link{font-size:11px}.wa{bottom:17px;right:17px}.gallery{grid-template-columns:1fr 1fr}.gallery figcaption{font-size:10px}.prose{overflow-wrap:anywhere}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Keep locale selection accessible at every viewport. */
.nav-right .lang-mini{display:flex}
html[dir=rtl] .hero-photo{transform:none}@media(min-width:1101px) and (max-width:1180px){nav.main{display:flex}.burger{display:none}}@media(max-width:380px){.nav-right{gap:7px}.nav-inner{gap:7px}}

/* Gateway identity: fixed aspect ratio,independent of text direction. */
.brand{direction:ltr;flex-shrink:0}.brand-logo{display:block;width:210px;height:auto;max-width:none}.foot-brand .brand-logo{width:250px}@media(max-width:1300px){.brand-logo{width:190px}}@media(max-width:760px){.brand-logo{width:160px}.foot-brand .brand-logo{width:220px}}@media(max-width:380px){.brand-logo{width:135px}}

/* Authentic photography: neutral surfaces,full equipment silhouettes,natural colour. */
.hero-photo{filter:none;object-position:75% 65%}.hero-shade{background:linear-gradient(90deg,#0b222bf7 0%,#0b222bf0 27%,#0b222ba8 50%,#0b222b12 80%),linear-gradient(0deg,#0b222bbc,transparent 32%)}
.gallery .ph{aspect-ratio:4/3;cursor:zoom-in}.gallery .ph img{object-fit:contain;padding:14px;filter:none}.gallery figcaption{display:flex;justify-content:space-between;gap:12px}.gallery figcaption span{color:var(--teal)}
.post .thumb{background:#fff;border:1px solid var(--line)}.post .thumb img{object-fit:contain;padding:30px 15px 10px;filter:none}.post .thumb .cat{border:1px solid var(--line)}@media(max-width:760px){.hero-shade{background:linear-gradient(90deg,#0b222beb,#0b222bb0),linear-gradient(0deg,#0b222bcf,transparent)}}

/* Practical information: an editorial guide with native accessible FAQs. */.info-process{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:30px}.info-process li{border-top:1px solid var(--line);padding-top:25px}.info-step{font:11px var(--f-mono);color:var(--teal)}.info-process h3{font-size:23px;font-weight:500;margin:22px 0 15px}.info-process p{font-size:13px;line-height:1.85}.info-faq{background:#eeefe9}.info-faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px}.info-faq .sec-head{margin-bottom:20px}.info-faq details{border-bottom:1px solid #cbd3cb}.info-faq details:first-child{border-top:1px solid #cbd3cb}.info-faq summary{padding:23px 0;display:flex;justify-content:space-between;align-items:center;gap:22px;list-style:none;cursor:pointer;font-size:15px;font-weight:600;color:var(--navy)}.info-faq summary::-webkit-details-marker{display:none}.info-faq summary span{font-size:25px;color:var(--teal);font-weight:400}.info-faq details[open] summary span{transform:rotate(45deg)}.info-faq details p{font-size:13px;line-height:1.95;padding:0 30px 25px 0}@media(max-width:1100px){.info-faq-grid{gap:35px}}@media(max-width:760px){.info-faq-grid{grid-template-columns:1fr}.info-process{grid-template-columns:1fr 1fr;gap:28px 20px}.info-process h3{font-size:20px}.info-faq summary{font-size:14px}.info-faq details p{padding-inline:0}.info-faq-grid{gap:28px}}@media(min-width:1101px){header.site .nav-inner{gap:16px}nav.main{gap:16px}.nav-right{gap:12px}}

/* ============================================================
   Hero + statistics band — fluid rebuild.
   Fixes: dead vertical gap from fixed min-heights,low-contrast
   copy over the bright side of the photo between 760-1100px,and the hard 4>2>1 stat jumps. Content-driven heights and
   fluid type/space so it holds at every width.
   ============================================================ */
.editorial-hero{min-height:0}
.editorial-inner{
  min-height:clamp(440px,70vh,720px);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding-block:clamp(56px,9vw,104px) clamp(24px,4vw,40px);
  gap:clamp(26px,5vw,48px);
}
.hero-copy{max-width:min(660px,100%)}
.hero-copy h1{
  font-size:clamp(29px,5.2vw,66px);
  margin:clamp(14px,2.4vw,26px) 0 clamp(14px,2vw,24px);
  max-width:17ch;
}
.hero-copy>p{font-size:clamp(13px,1.25vw,15px);max-width:52ch}
.hero-actions{margin-top:clamp(20px,3vw,32px)}

/* Scrim must always cover the text column,whatever the width. */
.hero-shade{background:
  linear-gradient(90deg,#0b222bf7 0%,#0b222bef 40%,#0b222bb8 62%,#0b222b2e 88%),
  linear-gradient(0deg,#0b222bc4,transparent 40%)}

/* Below the desktop breakpoint the copy spans most of the width:
   darken across the whole frame so contrast never depends on layout. */@media(max-width:1100px){
  .hero-copy{max-width:min(580px,100%)}
  .hero-shade{background:
    linear-gradient(90deg,#0b222bf5 0%,#0b222bec 52%,#0b222bcf 100%),
    linear-gradient(0deg,#0b222bd6,transparent 46%)}}

/* Foot strip: in normal flow (no dead space),pinned only on wide screens. */
.hero-foot{
  position:static;inset:auto;
  display:flex;flex-wrap:wrap;gap:6px 22px;justify-content:space-between;
  border-top:1px solid #ffffff2e;padding-top:clamp(12px,1.6vw,18px);
}@media(min-width:1101px){
  .editorial-inner{padding-bottom:92px}
  .hero-foot{position:absolute;inset-inline:64px;bottom:26px;margin-top:0}}

/* Statistics: hairline grid that reflows at any width without special cases. */

/* The closed off-canvas drawer must never create horizontal scroll. */
.drawer{overflow:hidden}

/* Exactly four statistics: 2 columns on phones,4 from tablet up.
   minmax(0,1fr) keeps long labels from forcing the track wider. */

/* Footer external links must wrap on narrow phones. */
.foot-sites{flex-wrap:wrap;gap:8px 18px}

/* Honeypot: clipped rather than pushed off-canvas,so it cannot create
   horizontal scroll in RTL (left:-9999px inverts under dir="rtl"). */
.hp-field{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ============================================================
   REDESIGN — figures strip + divisions.
   The hero's navy carries down into a dark data strip,then the
   page opens into ivory for three full-width editorial rows.
   Motion is gated behind .js; static and complete without it.
   ============================================================ */

/* ---------- 1. Figures: dark strip continuing the masthead ---------- */

/* copper rule drawing beneath each figure{position:absolute;bottom:-1px;inset-inline-start:0;height:2px;width:0;
  background:var(--teal);transition:width .9s var(--e-travel),height .25s ease;
  transition-delay:calc(var(--i,0) * 130ms + 200ms),0s}
.js .statbar .stat[data-anim].in .stat-rule{width:100%}
html:not(.js) .stat-rule{width:100%}

/* ---------- 2. Divisions: alternating editorial rows ---------- */
.divisions-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;
  flex-wrap:wrap;margin-bottom:clamp(40px,5vw,64px);padding-bottom:24px;
  border-bottom:1px solid var(--line)}
.divisions-head .sec-head{margin-bottom:0;flex:1 1 420px}
.divisions-count{font:10px var(--f-mono);letter-spacing:.2em;color:var(--ink-soft);
  padding-bottom:6px;white-space:nowrap}

/* image wipes open on reveal */

/* ---------- shared reveal ---------- */
/* ============================================================
   MOTION — three tiers, replacing the uniform 30px fade-up.

   Tier 2 "lock": content does not rise, it TRAVELS ALONG THE
   DATUM and stops hard. The easing has a fast departure and a
   decisive settle, so a section reads as a part arriving on the
   line rather than a card fading in. Direction is logical, so
   Arabic travels the other way without a second rule.
   ============================================================ */
.js [data-anim]{opacity:0;transform:translate3d(var(--travel,-22px),0,0);
  transition:opacity var(--t-travel) var(--e-travel),transform var(--t-travel) var(--e-travel);
  transition-delay:calc(var(--i,0) * 90ms)}
.js [data-anim].in{opacity:1;transform:none}
html[dir=rtl] .js [data-anim],.js html[dir=rtl] [data-anim]{--travel:22px}

/* ---------- the datum ----------
   A hairline that opens every section head and draws copper as the
   section locks. It is the same reference line the hero assembles
   against, carried through the page so every block registers to
   one axis. */
.sec-line,.divisions-head{position:relative;padding-top:clamp(22px,2.4vw,34px)}
.sec-line::before,.divisions-head::before{content:"";position:absolute;top:0;
  inset-inline:0;height:1px;background:var(--line)}
.sec-line::after,.divisions-head::after{content:"";position:absolute;top:0;
  inset-inline-start:0;height:1px;width:0;background:var(--teal);
  transition:width var(--t-draw) var(--e-draw) .12s}
.js .sec-line.in::after,.js .divisions-head.in::after{width:clamp(72px,9vw,150px)}
html:not(.js) .sec-line::after,html:not(.js) .divisions-head::after{width:clamp(72px,9vw,150px)}

/* registration mark where the datum meets the copy column */
.sec-line::before{box-shadow:none}
.reg{position:absolute;top:-4px;inset-inline-start:0;width:9px;height:9px;pointer-events:none}
.reg::before,.reg::after{content:"";position:absolute;background:var(--teal);opacity:0;
  transition:opacity var(--t-feedback) linear var(--t-draw)}
.reg::before{inset-inline-start:4px;top:0;width:1px;height:9px}
.reg::after{inset-inline-start:0;top:4px;width:9px;height:1px}
.js .in>.reg::before,.js .in>.reg::after{opacity:1}
html:not(.js) .reg::before,html:not(.js) .reg::after{opacity:1}@media(prefers-reduced-motion:reduce){
  .js [data-anim]{opacity:1;transform:none;transition:none}
  .sec-line::after,.divisions-head::after{width:clamp(72px,9vw,150px);transition:none}
  .reg::before,.reg::after{opacity:1;transition:none}}@media(prefers-reduced-motion:reduce){
  .js [data-anim]{opacity:1;transform:none;transition:none}}@media(max-width:900px){
  .divisions-count{display:none}}

/* ============================================================
   HEADER REBUILD — two-tier bar + full-screen overlay menu.
   Desktop: utility strip (region / mail / language) above a main
   bar; the strip retracts on scroll. A MENU button is available at
   every width and opens the complete numbered index.
   Mobile: logo + large labelled MENU button; full-screen navy menu.
   ============================================================ */
header.site{border-bottom:0;background:transparent}


/* ---- utility strip ---- */
.topbar{background:var(--navy);color:#b7c6c9;height:38px;overflow:hidden}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;height:38px;gap:20px}
.topbar .tb-region,.topbar a{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.16em}
.topbar .tb-right{display:flex;align-items:center;gap:clamp(12px,2vw,28px)}
.topbar a{color:#dde6e7;transition:color .25s}
.topbar a:hover{color:var(--teal-bright)}@media(max-width:700px){.topbar .tb-region{display:none}
  .topbar-inner{justify-content:flex-end}}

/* ---- language: segmented control ---- */
.lang-mini{display:flex;border:1px solid #ffffff2e;border-radius:var(--r-s);overflow:hidden}
.lang-mini a{padding:5px 8px;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.1em;
  color:#c4d1d3;background:transparent;text-decoration:none;transition:background .25s,color .25s}
.lang-mini a:hover{background:#ffffff1a;color:#fff}
.lang-mini a.on{background:var(--teal);color:#fff;text-decoration:none}

/* ============================================================
   MAIN BAR

   The nav sat centred by space-between, which left a void beside
   the logo once the fifth link was retired. The links now hang
   off the wordmark and the action cluster is pushed right, so the
   bar reads left-to-right as identity → sections → action rather
   than as three islands.
   ============================================================ */
.nav-inner{height:78px;gap:clamp(16px,2.4vw,34px);border-bottom:1px solid var(--line);
  justify-content:flex-start}

nav.main{display:none;gap:clamp(18px,2.2vw,32px);font-size:13px;font-weight:500;
  margin-inline-start:clamp(24px,3.6vw,58px)}
.nav-right{margin-inline-start:auto}@media(min-width:1080px){nav.main{display:flex}}

nav.main a{position:relative;padding:8px 0;color:var(--ink-body);white-space:nowrap;transition:color .25s}
nav.main a::after{content:"";position:absolute;left:0;right:100%;bottom:2px;height:2px;
  background:var(--teal);transition:right .25s var(--e-travel)}
nav.main a:hover{color:var(--navy)}
nav.main a:hover::after{right:0}
nav.main a.active{color:var(--navy)}
nav.main a.active::after{right:0;background:var(--teal)}

.nav-right{display:flex;align-items:center;gap:clamp(10px,1.4vw,18px)}
.nav-cta{display:none}@media(min-width:900px){.nav-cta{display:inline-flex}}

/* ============================================================
   THE ACTION PAIR — CTA + MENU

   These two read as badly made because they were built to
   different specs: 46px vs 44px tall, 3px vs 2px radius, one
   padded by ems and one by a fixed inset. Two controls sitting
   1px apart have to agree exactly or the eye reads the gap as a
   mistake. They now share one height, one radius and one optical
   inset; only weight separates them — solid copper for the
   primary, hairline for the secondary.
   ============================================================ */
/* Sizing only — never `display` here. The CTA's visibility is
   owned by the responsive rules above (hidden under 900px), and
   re-declaring display in this shared rule overrode them, putting
   a 159px button back on a 320px screen and overflowing every
   page on the site. */
.nav-right>.btn,.burger{height:46px;min-height:46px;border-radius:var(--r-s);
  padding:0 18px;align-items:center;justify-content:center}
.nav-right>.btn{font-size:12px;font-weight:600;letter-spacing:-.005em}

.burger{display:inline-flex;gap:11px;width:auto;min-width:0;border:1px solid var(--line-strong);
  background:transparent;cursor:pointer;
  transition:background var(--t-feedback) ease,border-color var(--t-feedback) ease}
.burger:hover{background:var(--navy);border-color:var(--navy)}
.burger-bars{display:flex;flex-direction:column;justify-content:center;gap:4px;width:17px}
.burger-bars i{display:block;height:1.5px;background:var(--navy);
  transition:background var(--t-feedback) ease,width var(--t-feedback) ease}
.burger-bars i:nth-child(2){width:12px;margin-inline-start:auto}
.burger:hover .burger-bars i{background:#fff}
.burger:hover .burger-bars i:nth-child(2){width:17px}
.burger-text{font-family:var(--f-mono);font-size:10px;letter-spacing:.18em;color:var(--navy);
  transition:color var(--t-feedback) ease}
.burger:hover .burger-text{color:#fff}@media(max-width:520px){.burger-text{display:none}.burger{padding:0 13px}}

/* ---- copper scroll progress along the bar ---- */
.scroll-progress{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--teal);
  z-index:2;transition:width .1s linear}
html[dir=rtl] .scroll-progress{left:auto;right:0}

/* ---- full-screen overlay menu ---- */
.drawer{background:#0b1f26f2;backdrop-filter:blur(4px)}
.drawer-panel,html[dir=rtl] .drawer-panel{position:absolute;inset:0;width:100%;max-width:none;
  right:auto;left:auto;background:var(--navy);color:#fff;padding:0;gap:0;
  display:flex;flex-direction:column;
  transform:translateY(-14px);opacity:0;
  transition:transform .25s var(--e-travel),opacity .25s ease}
.drawer.open .drawer-panel,html[dir=rtl] .drawer.open .drawer-panel{transform:none;opacity:1}

.drawer-head{display:flex;align-items:center;justify-content:space-between;height:78px;
  border-bottom:1px solid #ffffff1f;flex:none}
.drawer-head .brand-logo{width:190px}
.drawer-head .brand-logo{filter:brightness(0) invert(1)}
.drawer-close{align-self:center;width:46px;height:46px;min-width:46px;margin:0;border:1px solid #ffffff33;
  border-radius:2px;background:transparent;color:#fff;font-size:26px;line-height:1;cursor:pointer;
  transition:background .25s,border-color .25s}
.drawer-close:hover{background:var(--teal);border-color:var(--teal)}

/* Eleven rows at the old height overflow a laptop viewport, and the
   clipped last row read as a broken layout rather than as "scroll".
   Rows are tied to viewport height so the whole menu fits on a
   900px-tall screen, and a fade marks the cut when it doesn't. */
.drawer-nav{flex:1;min-height:0;overflow-y:auto;display:block;padding:0;
  -webkit-mask-image:linear-gradient(#000 calc(100% - 34px),transparent);
  mask-image:linear-gradient(#000 calc(100% - 34px),transparent)}
.drawer-nav a{display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:clamp(14px,3vw,26px);padding:clamp(11px,1.55vh,19px) var(--pad);
  border-bottom:1px solid #ffffff14;color:#fff;text-decoration:none;
  font-size:clamp(19px,3.6vw,30px);font-weight:500;letter-spacing:-.025em;
  transition:background .25s ease,padding-inline-start .25s ease}
.drawer-nav a:hover,.drawer-nav a:focus-visible{background:#17333e;
  padding-inline-start:calc(var(--pad) + 12px)}
.drawer-nav a[aria-current=page]{background:#16323d}
.drawer-nav a[aria-current=page] .dn-label{color:var(--teal-bright)}
.dn-no{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;color:var(--teal-bright)}
.dn-go{color:var(--teal-bright);font-size:20px;opacity:0;transform:translateX(-8px);
  transition:opacity .25s ease,transform .25s ease}
html[dir=rtl] .dn-go{transform:translateX(8px) scaleX(-1)}
.drawer-nav a:hover .dn-go,.drawer-nav a:focus-visible .dn-go{opacity:1;transform:none}
html[dir=rtl] .drawer-nav a:hover .dn-go{transform:scaleX(-1)}

/* staggered entrance for the menu rows */
.drawer.open .drawer-nav a{animation:dnIn .5s var(--e-travel) both;
  animation-delay:calc(var(--n,0) * 42ms + 90ms)}
@keyframes dnIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.drawer-foot{flex:none;border-top:1px solid #ffffff1f;padding-top:20px;padding-bottom:24px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.drawer-actions{display:flex;align-items:center;gap:clamp(12px,2vw,22px);flex-wrap:wrap}
.drawer-mail{font-family:var(--f-mono);font-size:11px;color:#c4d1d3;text-decoration:none}
.drawer-mail:hover{color:var(--teal-bright)}
.lang-drawer a{padding:8px 12px;font-size:11px}@media(prefers-reduced-motion:reduce){
  .topbar,.drawer-panel,.drawer.open .drawer-nav a,.scroll-progress{transition:none;animation:none}}

/* Header menu refinements: breathing room on phones,grid alignment on desktop. */
.drawer-head{gap:16px}
.drawer-head .brand-logo{width:min(190px,52vw)}@media(max-width:520px){.drawer-head{height:70px}.drawer-head .brand-logo{width:150px}
  .drawer-close{width:42px;height:42px;min-width:42px;font-size:23px}}

/* align menu text with the page container on wide screens,keep hover full-bleed */@media(min-width:1080px){
  .drawer-nav a{padding-inline:max(var(--pad),calc((100% - 1180px) / 2))}
  .drawer-nav a:hover,.drawer-nav a:focus-visible{
    padding-inline-start:calc(max(var(--pad),(100% - 1180px) / 2) + 12px)}
  .drawer-head,.drawer-foot{max-width:1180px;margin-inline:auto;width:100%}}
.drawer-foot .btn{white-space:nowrap}@media(max-width:520px){
  .drawer-foot{flex-direction:column;align-items:stretch;gap:14px}
  .drawer-actions{flex-direction:column;align-items:stretch;gap:12px}
  .drawer-foot .btn{justify-content:center}
  .drawer-mail{text-align:center}}

/* ============================================================
   ARABIC (RTL) TYPOGRAPHY
   Manrope carries no Arabic glyphs,so Arabic was falling back to
   a system face and the negative heading tracking was damaging the
   script. Load IBM Plex Sans Arabic and reset the metrics.
   ============================================================ */
html[dir=rtl]{
  --f-display:'IBM Plex Sans Arabic','Manrope',Arial,sans-serif;
  --f-body:'IBM Plex Sans Arabic','Manrope',Arial,sans-serif;
}
html[dir=rtl] body{font-family:var(--f-body);line-height:1.9}
html[dir=rtl] h1,html[dir=rtl] h2,html[dir=rtl] h3,html[dir=rtl] h4,html[dir=rtl] h5{
  letter-spacing:0;line-height:1.45;font-family:var(--f-display)}
html[dir=rtl] .hero-copy h1{font-size:clamp(28px,4.1vw,56px);line-height:1.42}
html[dir=rtl] .sec-head h2{line-height:1.4}
html[dir=rtl] .founder-text blockquote{line-height:1.6;letter-spacing:0}
html[dir=rtl] .eyebrow,html[dir=rtl] .ptag,html[dir=rtl] .lbl{letter-spacing:.04em}
html[dir=rtl] .drawer-nav a{letter-spacing:0}
/* keep technical/Latin strings in the mono face even on RTL pages */
html[dir=rtl] .dn-no,html[dir=rtl] .tb-region,html[dir=rtl] .tb-mail,html[dir=rtl] .burger-text,html[dir=rtl] .divisions-count,html[dir=rtl] .hero-foot{
  font-family:var(--f-mono);direction:ltr}
html[dir=rtl] .hero-foot{direction:rtl}
html[dir=rtl] .hero-foot span,html[dir=rtl] .hero-shotcredit{direction:ltr}

/* ============================================================
   HERO FOOT — photo credit now sits in the flow strip,so it can
   never land on top of the call to action (it did in Arabic).
   ============================================================ */
.hero-foot{gap:10px clamp(16px,3vw,40px);align-items:baseline}
.hero-shotcredit{color:#dbe4e5;text-decoration:none;border-bottom:1px solid #ffffff3d;
  padding-bottom:2px;transition:color .25s,border-color .25s}
.hero-shotcredit:hover{color:var(--teal-bright);border-color:var(--teal-bright)}@media(max-width:760px){.hero-shotcredit{order:3}}

/* ============================================================
   FOUNDER — navy band,portrait bleeding to the page edge.
   Replaces the pale card; ties back to the figures strip.
   ============================================================ */
.founder-shot{margin:0;position:relative;min-height:clamp(360px,44vw,600px);background:#16323d}
.founder-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 32%}
.founder-shot figcaption{position:absolute;inset:auto 0 0;padding:44px 26px 20px;color:#fff;
  font:10px var(--f-mono);letter-spacing:.1em;
  background:linear-gradient(transparent,#0b1f26e6)}
.founder-text{padding:clamp(38px,5vw,86px) clamp(26px,5vw,90px);display:flex;flex-direction:column;justify-content:center}
.founder-text .eyebrow{color:var(--teal-bright)}
.founder-text .eyebrow::before{background:var(--teal-bright)}
.founder-text blockquote{margin:22px 0 0;font-family:var(--f-display);font-weight:400;
  font-size:clamp(23px,2.9vw,40px);line-height:1.32;letter-spacing:-.03em;color:#fff;
  position:relative;padding-inline-start:26px;border-inline-start:2px solid var(--teal)}
.founder-note{margin-top:24px;font-size:13.5px;line-height:1.95;color:#aebfc2;max-width:56ch}
.founder-text .plink{align-self:flex-start;margin-top:26px;color:#fff;font-size:11px;
  padding-bottom:8px;border-bottom:1px solid #ffffff4d;transition:color .25s,border-color .25s}
.founder-text .plink:hover{color:var(--teal-bright);border-color:var(--teal-bright)}
.founder-sign{margin-top:30px;padding-top:22px;border-top:1px solid #ffffff21}
.founder-sign b{display:block;font-family:var(--f-display);font-size:18px;font-weight:600;color:#fff}
.founder-sign span{font:10px var(--f-mono);letter-spacing:.15em;color:#93a7ab}
.founder-values{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 10px}
.founder-values li{font:9.5px var(--f-mono);letter-spacing:.13em;text-transform:uppercase;
  color:#cfdcde;border:1px solid #ffffff2b;padding:8px 13px;transition:border-color .25s,color .25s}
.founder-values li:hover{border-color:var(--teal);color:#fff}@media(max-width:900px){
  .founder-shot{min-height:clamp(280px,62vw,420px)}}

/* ============================================================
   THREE DIVISIONS — "sous un même toit", drawn literally.
   One hairline runs over the three division cards — the roof —
   and each card hangs from it by a copper node. That is the one
   loud idea; the cards themselves are the existing kit: navy
   plate with a cut-out machine, outlined numeral, mono tag,
   title, one line, three keywords, arrow. Below 900px the cards
   stack and the roof line steps back to a plain top rule.
   ============================================================ */
.divisions{padding:clamp(64px,7vw,104px) 0 clamp(56px,6vw,88px)}
.divisions-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;
  flex-wrap:wrap;margin-bottom:clamp(28px,3.2vw,46px);padding-bottom:0;border-bottom:0}
.divisions-head .sec-head{margin-bottom:0;flex:1 1 420px}
.divisions-count{font:10px var(--f-mono);letter-spacing:.2em;color:var(--ink-soft);padding-bottom:6px;white-space:nowrap}

.roof{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2.2vw,30px);padding-top:clamp(24px,2.8vw,38px)}
.roof::before{content:"";position:absolute;top:0;inset-inline:0;height:1px;background:var(--line-strong)}
.roof-card{position:relative;display:flex;flex-direction:column;min-width:0;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);
  overflow:hidden;text-decoration:none;color:inherit;box-shadow:var(--sh-sm);
  transition:transform var(--t-feedback) ease,box-shadow var(--t-feedback) ease,border-color var(--t-feedback) ease}
.roof-card:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:var(--line-strong)}
.roof-card:focus-visible{outline:3px solid var(--teal-bright);outline-offset:2px}
/* the node: a copper dot pinned to the roof line, and the short
   hairline that hangs the card from it */
.roof-node{position:absolute;top:calc(-1 * clamp(24px,2.8vw,38px));left:50%;transform:translateX(-50%);
  width:9px;height:9px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 4px var(--bg);z-index:2}
.roof-node::after{content:"";position:absolute;top:9px;left:4px;width:1px;
  height:calc(clamp(24px,2.8vw,38px) - 9px);background:var(--line-strong)}
.roof-plate{position:relative;height:clamp(170px,15vw,215px);margin:0;
  background:linear-gradient(160deg,#16323d,#0d222a)}
.roof-plate::after{content:"";position:absolute;inset:0;
  background:radial-gradient(58% 54% at 50% 44%,#7fb4c422,transparent 72%)}
.roof-plate img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  padding:20px 18px 30px;transition:transform .9s var(--e-travel)}
.roof-card:hover .roof-plate img{transform:scale(1.05)}
.roof-model{position:absolute;bottom:10px;inset-inline-start:14px;z-index:2;
  font:9px var(--f-mono);letter-spacing:.13em;color:#93aeb6}
.roof-no{position:absolute;top:10px;inset-inline-end:14px;z-index:2;
  font:600 clamp(30px,2.6vw,40px)/1 var(--f-display);letter-spacing:-.04em;
  color:transparent;-webkit-text-stroke:1px #ffffff3d;
  font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
.roof-body{padding:clamp(20px,2.2vw,28px) clamp(20px,2.2vw,28px) 0}
.roof-body .ptag{display:block;margin-bottom:12px}
.roof-body h3{font-size:clamp(21px,1.9vw,27px);font-weight:600;letter-spacing:-.03em;
  line-height:1.15;color:var(--ink);transition:color var(--t-feedback) ease}
.roof-card:hover .roof-body h3{color:var(--teal-ink)}
.roof-body p{margin-top:12px;font-size:13.5px;line-height:1.8;color:var(--ink-soft)}
.roof-foot{display:flex;flex-direction:column;gap:18px;margin-top:auto;
  padding:20px clamp(20px,2.2vw,28px) clamp(20px,2.2vw,28px)}
.roof-ticks{display:flex;flex-wrap:wrap;gap:7px 8px}
.roof-ticks span{font:10px var(--f-mono);letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-soft);padding:6px 10px;border:1px solid var(--line-strong);
  border-radius:var(--r-pill);transition:border-color var(--t-feedback) ease,color var(--t-feedback) ease}
.roof-card:hover .roof-ticks span{border-color:#ad4b2733;color:var(--navy)}
.roof-go{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-top:16px;border-top:1px solid var(--line)}
.roof-go i{font:10px var(--f-mono);font-style:normal;letter-spacing:.14em;
  text-transform:uppercase;color:var(--teal-ink)}
.roof-go svg{flex:none;width:17px;height:17px;padding:9px;box-sizing:content-box;
  border:1px solid var(--line-strong);border-radius:50%;color:var(--teal-ink);
  transition:background var(--t-feedback) ease,border-color var(--t-feedback) ease,color var(--t-feedback) ease}
.roof-card:hover .roof-go svg{background:var(--teal);border-color:var(--teal);color:#fff}
html[dir=rtl] .roof-go svg{transform:scaleX(-1)}@media(max-width:1100px){
  .roof-ticks span{letter-spacing:.08em}}@media(max-width:900px){
  .roof{grid-template-columns:1fr;gap:16px;padding-top:18px}
  .roof-node{display:none}
  .roof-plate{height:clamp(160px,38vw,230px)}
  .divisions-count{display:none}}

/* ============================================================
   PAGE SYSTEM — the home-page language applied site-wide.
   Everything here is built from the same four moves as the
   "trois pôles" index: outlined numerals,mono eyebrows,hairline dividers,and a navy plate whenever a cut-out
   machine has to read. Nothing depends on JS to be legible.
   ============================================================ */

/* ---------- 1. Page hero ---------- */
.phero{position:relative;overflow:hidden;background:#102831;
  padding:clamp(56px,7vw,104px) 0 0}
.phero .bp{opacity:.22}
.phero .inner{position:relative;z-index:1;max-width:var(--maxw)}
.phero-grid{display:grid;grid-template-columns:minmax(0,1fr) clamp(280px,30vw,460px);
  gap:clamp(28px,4vw,64px);align-items:center}
.phero .crumb{font:10px var(--f-mono);letter-spacing:.16em;color:#7f9aa4;margin-bottom:clamp(20px,3vw,34px)}
.phero .crumb a{color:#9db3bb}
.phero .crumb a:hover{color:var(--teal-bright)}
.phero .tag{display:inline-block;border:1px solid #e3ac8055;border-radius:0;background:transparent;
  color:var(--teal-bright);font:10px var(--f-mono);letter-spacing:.2em;text-transform:uppercase;
  padding:7px 12px;margin-bottom:18px}
.phero h1{font-size:clamp(34px,5vw,68px);font-weight:500;line-height:1.08;letter-spacing:-.035em;
  max-width:16ch;color:#fff}
.phero p{margin-top:clamp(18px,2vw,26px);font-size:15px;line-height:1.9;max-width:60ch;color:#b9cbd2}
.phero .actions{margin-top:clamp(24px,3vw,36px);display:flex;flex-wrap:wrap;gap:12px}

/* giant ghost numeral / wordmark behind the hero */
.phero-ghost{position:absolute;z-index:0;inset-inline-end:-.05em;bottom:-.44em;
  font:600 clamp(160px,26vw,420px)/.8 var(--f-display);letter-spacing:-.06em;
  color:transparent;-webkit-text-stroke:1px #ffffff10;pointer-events:none;user-select:none}
html[dir=rtl] .phero-ghost{inset-inline-end:auto;inset-inline-start:-.06em}

/* the machine plate that rides in the hero on product pages */
.phero-plate{position:relative;margin:0;aspect-ratio:5/4;background:linear-gradient(160deg,#17353f,#0c2028);
  border:1px solid #ffffff14;overflow:hidden}
.phero-plate::after{content:"";position:absolute;inset:0;
  background:radial-gradient(58% 54% at 50% 44%,#7fb4c42e,transparent 72%)}
.phero-plate img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  padding:clamp(20px,2.4vw,38px) clamp(18px,2.2vw,34px) clamp(32px,3.4vw,48px)}
.phero-plate figcaption{position:absolute;bottom:12px;inset-inline-start:16px;z-index:2;
  font:9px var(--f-mono);letter-spacing:.14em;color:#93aeb6}

/* hairline meta strip closing the hero */
.phero-foot{position:relative;z-index:1;margin-top:clamp(34px,4vw,58px);
  border-top:1px solid #ffffff1f;padding:16px 0 18px;
  display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:space-between;
  font:10px var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:#7f9aa4}
.phero-foot b{color:var(--teal-bright);font-weight:400}@media(max-width:900px){
  .phero-grid{grid-template-columns:1fr}
  .phero-plate{aspect-ratio:16/10;order:-1}
  .phero-ghost{display:none}}

/* ---------- 2. Numbered capability index (compact A+ variant) ---------- */
.cindex{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(28px,4vw,72px);border-top:1px solid var(--line)}
.cx{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:clamp(14px,1.6vw,24px);align-items:start;
  padding:clamp(22px,2.4vw,32px) 0;border-bottom:1px solid var(--line)}
.cx::before{content:"";position:absolute;inset:0 -14px;z-index:0;
  background:linear-gradient(90deg,#ad4b270d,transparent 70%);
  transform:scaleX(0);transform-origin:left center;transition:transform .6s var(--e-travel)}
html[dir=rtl] .cx::before{transform-origin:right center;
  background:linear-gradient(270deg,#ad4b270d,transparent 70%)}
.cx:hover::before{transform:scaleX(1)}
.cx>*{position:relative;z-index:1}
.cx-no{font:600 clamp(22px,2.2vw,32px)/1 var(--f-display);letter-spacing:-.03em;
  color:transparent;-webkit-text-stroke:1px var(--line-strong);
  transition:-webkit-text-stroke-color .25s ease}
.cx:hover .cx-no{-webkit-text-stroke-color:var(--teal)}
.cx h3{font-size:clamp(17px,1.5vw,21px);font-weight:600;letter-spacing:-.02em;line-height:1.25;
  transition:color .25s ease}
.cx:hover h3{color:var(--teal-ink)}
.cx p{margin-top:10px;font-size:13.5px;line-height:1.85;color:var(--ink-soft)}@media(max-width:820px){.cindex{grid-template-columns:1fr;column-gap:0}}

/* ---------- 3. Process rail ---------- */
.rail{position:relative;display:grid;gap:clamp(24px,3vw,40px);
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));padding-top:38px}
.rail::before{content:"";position:absolute;top:0;inset-inline:0;height:1px;background:var(--line)}
.rail::after{content:"";position:absolute;top:0;inset-inline-start:0;height:1px;width:0;
  background:var(--teal);transition:width 1.4s var(--e-travel) .25s}
.rail.in::after{width:100%}
.step{position:relative}
.step::before{content:"";position:absolute;top:-38px;inset-inline-start:0;width:9px;height:9px;
  transform:translateY(-4px) rotate(45deg);background:var(--surface);
  border:1px solid var(--line-strong);transition:background .25s ease,border-color .25s ease}
.rail.in .step::before{background:var(--teal);border-color:var(--teal)}
.step-no{display:block;font:600 clamp(34px,3.6vw,52px)/1 var(--f-display);letter-spacing:-.04em;
  color:transparent;-webkit-text-stroke:1px var(--line-strong);margin-bottom:14px}
.step .ptag{display:block;margin-bottom:8px}
.step h3{font-size:clamp(18px,1.7vw,23px);font-weight:600;letter-spacing:-.025em;line-height:1.25}
.step p{margin-top:12px;font-size:13.5px;line-height:1.85;color:var(--ink-soft);max-width:38ch}@media(prefers-reduced-motion:reduce){.rail::after{transition:none}}

/* ---------- 4. Product deck ---------- */
.deck{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  grid-template-columns:repeat(3,minmax(0,1fr))}@media(max-width:1080px){.deck{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:680px){.deck{grid-template-columns:1fr}}

.pcard{position:relative;display:flex;flex-direction:column;background:var(--surface);
  transition:background .25s ease}
.pcard:hover{background:#fbfaf7}
.pcard-plate{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;text-decoration:none;
  background:linear-gradient(160deg,#17353f,#0c2028);direction:ltr}
.pcard-plate::after{content:"";position:absolute;inset:0;opacity:.85;
  background:radial-gradient(58% 54% at 50% 44%,#7fb4c422,transparent 72%);
  transition:opacity .6s ease,transform .9s var(--e-travel)}
.pcard:hover .pcard-plate::after{opacity:1;transform:scale(1.15)}
.pcard-plate img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  padding:clamp(18px,2vw,30px) clamp(16px,1.8vw,28px) clamp(30px,3vw,42px);
  transition:transform .9s var(--e-travel)}
.pcard:hover .pcard-plate img{transform:scale(1.06) translateY(-4px)}
.pcard-no{position:absolute;top:0;inset-inline-start:0;z-index:2;background:var(--teal);color:#fff;
  font:10px var(--f-mono);letter-spacing:.16em;padding:8px 12px;transition:letter-spacing .25s ease}
.pcard:hover .pcard-no{letter-spacing:.26em}
.pcard-model{position:absolute;bottom:10px;inset-inline-start:14px;z-index:2;
  font:9px var(--f-mono);letter-spacing:.13em;color:#93aeb6}
.pcard-zoom{position:absolute;bottom:8px;inset-inline-end:12px;z-index:2;font-size:13px;color:#93aeb6;
  opacity:0;transform:translateY(4px);transition:opacity .25s ease,transform .25s ease}
.pcard:hover .pcard-zoom{opacity:1;transform:none}
.pcard-body{display:flex;flex-direction:column;flex:1;
  padding:clamp(22px,2vw,30px) clamp(20px,1.8vw,28px) clamp(24px,2.2vw,32px)}
.pcard-body .ptag{display:block;margin-bottom:10px}
.pcard-body h3{position:relative;font-size:clamp(19px,1.5vw,23px);font-weight:600;
  letter-spacing:-.025em;line-height:1.2;padding-bottom:14px;transition:color .25s ease}
.pcard-body h3::after{content:"";position:absolute;bottom:0;inset-inline-start:0;height:2px;width:24px;
  background:var(--line-strong);transition:width .6s var(--e-travel),background .25s ease}
.pcard:hover h3{color:var(--teal-ink)}
.pcard:hover h3::after{width:100%;background:var(--teal)}
.pcard-body>p{margin-top:14px;font-size:13px;line-height:1.85;color:var(--ink-soft)}

/* ---------- 5. Spec table ---------- */
.spectable{border-top:1px solid var(--line)}
.spectable .srow{display:grid;grid-template-columns:minmax(120px,.42fr) minmax(0,1fr);
  gap:clamp(14px,2vw,32px);padding:15px 0;border-bottom:1px solid var(--line);
  transition:background .25s ease}
.spectable .srow:hover{background:#ad4b2708}
.spectable .k{font:10px var(--f-mono);letter-spacing:.15em;text-transform:uppercase;color:var(--ink-soft);
  padding-top:3px}
.spectable .v{font-size:14px;line-height:1.75;color:var(--ink)}

/* ---------- 6. Editorial list (blog,offices,generic) ---------- */
.elist{border-top:1px solid var(--line)}
.eitem{position:relative;display:grid;align-items:center;
  grid-template-columns:clamp(112px,13vw,190px) minmax(0,1fr) auto;
  gap:clamp(16px,2.4vw,36px);padding:clamp(20px,2.4vw,30px) 0;
  border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
.eitem::before{content:"";position:absolute;inset:0 -14px;z-index:0;
  background:linear-gradient(90deg,#ad4b270d,transparent 70%);
  transform:scaleX(0);transform-origin:left center;transition:transform .6s var(--e-travel)}
html[dir=rtl] .eitem::before{transform-origin:right center;
  background:linear-gradient(270deg,#ad4b270d,transparent 70%)}
.eitem:hover::before{transform:scaleX(1)}
.eitem>*{position:relative;z-index:1}
.eitem-shot{aspect-ratio:4/3;overflow:hidden;position:relative;
  background:linear-gradient(160deg,#17353f,#0c2028)}
.eitem-shot::after{content:"";position:absolute;inset:0;
  background:radial-gradient(58% 54% at 50% 46%,#7fb4c422,transparent 72%)}
.eitem-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:12px 10px;
  transition:transform .9s var(--e-travel)}
.eitem:hover .eitem-shot img{transform:scale(1.06)}
.eitem-main .ptag{display:block;margin-bottom:9px}
.eitem-main h3{font-size:clamp(19px,2vw,28px);font-weight:600;letter-spacing:-.03em;line-height:1.2;
  transition:color .25s ease}
.eitem:hover .eitem-main h3{color:var(--teal-ink)}
.eitem-main p{margin-top:11px;font-size:13.5px;line-height:1.8;color:var(--ink-soft);max-width:62ch}
.eitem-meta{font:10px var(--f-mono);letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-soft);white-space:nowrap}@media(max-width:760px){
  .eitem{grid-template-columns:1fr;gap:16px}
  .eitem-shot{aspect-ratio:16/9}
  .eitem-meta{order:-1}}

/* ---------- 7. Partner wall ---------- */
.pwall{display:grid;background:var(--surface);
  border-top:1px solid var(--line);border-inline-start:1px solid var(--line);
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.pw{position:relative;background:var(--surface);padding:clamp(26px,2.6vw,38px);
  border-inline-end:1px solid var(--line);border-bottom:1px solid var(--line);
  min-height:210px;display:flex;flex-direction:column;transition:background .25s ease}
.pw:hover{background:#fbfaf7}
.pw-name{font-family:var(--f-display);font-weight:700;font-size:21px;color:var(--navy);letter-spacing:-.01em}
.pw .ptag{display:block;margin-top:22px}
.pw p{margin-top:10px;font-size:13px;line-height:1.8;color:var(--ink-soft)}
.pw-rule{position:absolute;bottom:0;inset-inline-start:0;height:2px;width:0;background:var(--teal);
  transition:width .6s var(--e-travel)}
.pw:hover .pw-rule{width:100%}

/* ---------- 8. Section head with counter (shared) ---------- */
.sec-line{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;
  margin-bottom:clamp(20px,2.2vw,32px)}
.sec-line .sec-head{margin-bottom:0;flex:1 1 420px}
.sec-count{font:10px var(--f-mono);letter-spacing:.2em;color:var(--ink-soft);
  padding-bottom:6px;white-space:nowrap}@media(max-width:760px){.sec-count{display:none}}

/* ---------- 9. Prose (legal pages) ---------- */
.prose{max-width:74ch;overflow-wrap:anywhere}
.prose h2{margin-top:clamp(34px,4vw,54px);padding-top:22px;border-top:1px solid var(--line);
  font-size:clamp(19px,1.9vw,25px);font-weight:600;letter-spacing:-.025em}
.prose h2:first-child{margin-top:0;padding-top:0;border-top:0}
.prose p{margin-top:14px;font-size:14.5px;line-height:1.9;color:var(--ink-body)}

/* rail children stagger inside the container reveal (JS-gated so a
   no-script visitor still sees every step) */
.js .rail[data-anim] .step{opacity:0;transform:translateY(20px);
  transition:opacity .9s var(--e-travel),transform .9s var(--e-travel);
  transition-delay:calc(var(--i,0) * 110ms + .15s)}
.js .rail[data-anim].in .step{opacity:1;transform:none}@media(prefers-reduced-motion:reduce){
  .js .rail[data-anim] .step{opacity:1;transform:none;transition:none}.cx::before,.eitem::before,.pw-rule,.pcard-plate img,.pcard-plate::after,.eitem-shot img{transition:none}}

/* ---------- 10. Plate strip ---------- */
.pstrip{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.pstrip-cell{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;text-decoration:none;
  background:linear-gradient(160deg,#17353f,#0c2028);direction:ltr}
.pstrip-cell::after{content:"";position:absolute;inset:0;opacity:.85;
  background:radial-gradient(58% 54% at 50% 44%,#7fb4c422,transparent 72%);
  transition:opacity .6s ease,transform .9s var(--e-travel)}
.pstrip-cell:hover::after{opacity:1;transform:scale(1.15)}
.pstrip-cell img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  padding:clamp(20px,2.4vw,36px) clamp(18px,2.2vw,32px) clamp(32px,3vw,44px);
  transition:transform .9s var(--e-travel)}
.pstrip-cell:hover img{transform:scale(1.06) translateY(-4px)}

/* ---------- 11. Feature block (TITAN X850) ---------- */
.feature{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  border:1px solid var(--line);background:var(--surface)}
.feature-plate{position:relative;margin:0;min-height:clamp(320px,36vw,470px);
  background:linear-gradient(160deg,#17353f,#0c2028);overflow:hidden}
.feature-plate::after{content:"";position:absolute;inset:0;
  background:radial-gradient(56% 52% at 50% 44%,#7fb4c42b,transparent 72%)}
.feature-plate img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  padding:clamp(26px,3vw,52px) clamp(24px,2.6vw,46px) clamp(46px,4vw,64px)}
.feature-plate figcaption{position:absolute;bottom:14px;inset-inline-start:20px;z-index:2;
  font:9px var(--f-mono);letter-spacing:.14em;color:#93aeb6}
.feature-plate figcaption span{color:var(--teal-bright)}
.feature-body{padding:clamp(28px,3vw,52px)}
.feature-body h2{margin-top:14px;font-size:clamp(24px,2.6vw,36px);font-weight:600;
  letter-spacing:-.03em;line-height:1.14}
.feature-sub{margin:12px 0 26px;font-size:13.5px;line-height:1.8;color:var(--ink-soft)}
.plate-gallery{margin-top:clamp(34px,4vw,56px)}
.plate-gallery .gallery{margin-top:18px}@media(max-width:900px){.feature{grid-template-columns:1fr}
  .feature-plate{min-height:clamp(240px,54vw,340px)}}

/* plates holding real photography rather than cut-outs */
.pcard-plate.is-photo img,.pstrip-cell.is-photo img,.phero-plate.is-photo img{
  object-fit:cover;padding:0;filter:saturate(.72) contrast(1.02)}
.pcard-plate.is-photo::after,.pstrip-cell.is-photo::after{
  background:linear-gradient(180deg,#0c202833,#0c2028aa)}

/* ---------- 12. Case numbers block (projets) ---------- */
.numbers{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(28px,4vw,72px);align-items:center;
  border-top:1px solid var(--line);padding-top:clamp(30px,3.4vw,48px)}
.numbers blockquote{margin:18px 0 0;font-size:clamp(19px,2.1vw,28px);font-weight:500;
  letter-spacing:-.025em;line-height:1.4;color:var(--navy)}
.numbers blockquote::before{content:"\201C";color:var(--teal);margin-inline-end:.12em}
.numbers blockquote::after{content:"\201D";color:var(--teal);margin-inline-start:.08em}
.numbers-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#ffffff18;
  background:var(--navy);border:1px solid var(--navy)}
.mini-stat{background:linear-gradient(160deg,#17353f,#0c2028);padding:clamp(22px,2.4vw,32px);
  transition:background .25s ease}
.mini-stat:hover{background:linear-gradient(160deg,#1c3f4b,#0f2731)}
.mini-stat b{display:block;font-family:var(--f-display);font-weight:600;
  font-size:clamp(26px,2.8vw,38px);letter-spacing:-.03em;color:var(--teal-bright)}
.mini-stat span{display:block;margin-top:8px;font:10px var(--f-mono);letter-spacing:.14em;
  text-transform:uppercase;color:#93aeb6;line-height:1.7}@media(max-width:900px){.numbers{grid-template-columns:1fr}}

/* ---------- 13. Notes under a wall / list ---------- */
.wall-note{margin-top:26px;font:10px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);text-align:center}

/* ---------- 14. Founder band additions ---------- */
.founder-h2{margin-top:14px;font-size:clamp(23px,2.4vw,34px);font-weight:600;
  letter-spacing:-.03em;line-height:1.16;color:#fff}
.founder-note + .founder-note{margin-top:14px}

/* ---------- 15. Contact ---------- */
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px,4vw,64px);align-items:start}
.contact-h2{margin-top:14px;font-size:clamp(23px,2.4vw,32px);font-weight:600;letter-spacing:-.03em}
.offices{margin-top:clamp(24px,2.6vw,34px);border-top:1px solid var(--line)}
.office{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(14px,1.6vw,22px);padding:20px 0;border-bottom:1px solid var(--line)}
.office-no{font:600 22px/1 var(--f-display);letter-spacing:-.03em;color:transparent;
  -webkit-text-stroke:1px var(--line-strong);transition:-webkit-text-stroke-color .25s ease}
.office:hover .office-no{-webkit-text-stroke-color:var(--teal)}
.office .ptag{display:block;margin-bottom:7px}
.office h3{font-size:17px;font-weight:600;letter-spacing:-.02em}
.office p{margin-top:8px;font-size:13px;line-height:1.8;color:var(--ink-soft)}
.contact-chan{margin-top:26px}@media(max-width:900px){.contact-grid{grid-template-columns:1fr}}

/* ---------- 16. Prose numerals ---------- */
.prose-no{display:inline-block;min-width:2.4em;font:600 12px/1 var(--f-mono);letter-spacing:.16em;
  color:var(--teal);vertical-align:middle}

/* contact channels read as real buttons on ivory */
.contact-chan a{border:1px solid var(--line-strong);color:var(--ink);
  transition:background .25s ease,color .25s ease,border-color .25s ease}
.contact-chan a:first-child{background:var(--navy);border-color:var(--navy);color:#fff}
.contact-chan a:first-child:hover{background:var(--teal);border-color:var(--teal)}
.contact-chan a:last-child:hover{border-color:var(--teal);color:var(--teal-ink)}

/* the case plate carries a drawing,not a photograph: this project
   was studied and costed but never built,so nothing here should
   suggest a finished factory. */

/* the practical-information hero uses the same navy plate as the
   rest of the site,so the machine reads the same way everywhere */

/* Dutch and German compounds are long: let the spec table stack on
   narrow screens and allow every body copy block to break a word
   rather than push the page sideways. */@media(max-width:640px){
  .spectable .srow{grid-template-columns:1fr;gap:7px}
  .spectable .k{padding-top:0}}.spectable .v,.cx p,.cx h3,.pcard-body p,.pcard-body h3,.eitem-main p,.eitem-main h3,.pw p,.step p,.step h3,.office p,.mini-stat span{overflow-wrap:break-word}

/* ============================================================
   COMPANY LEDGER — replaces the old navy stat slab.
   Two navy blocks stacked (hero + stats) muddied the top of the
   page,so the figures move to ivory: the hero ends on a clean
   edge and the numbers sit in the same ink as everything else.
   Five entries read as a ledger rather than four equal boxes,and the last one — the independence claim,which is the actual
   argument of the business — carries the copper.
   ============================================================ */
.ledger-bar{background:var(--surface);border-bottom:1px solid var(--line)}
.ledger{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.lg{position:relative;padding:clamp(26px,3vw,42px) clamp(16px,1.8vw,30px) clamp(24px,2.6vw,38px);
  border-inline-start:1px solid var(--line)}
.lg:first-child{border-inline-start:0;padding-inline-start:0}
.lg::before{content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg,#ad4b2700,#ad4b270a);
  opacity:0;transition:opacity .25s ease}
.lg:hover::before{opacity:1}
.lg>*{position:relative;z-index:1}

.lg-no{display:block;font:9px var(--f-mono);letter-spacing:.2em;color:var(--ink-faint);margin-bottom:14px}
.lg-fig{display:block;font-family:var(--f-display);font-weight:500;
  font-size:clamp(34px,4vw,58px);line-height:1;letter-spacing:-.05em;color:var(--navy);
  font-variant-numeric:tabular-nums;transition:color .25s ease}
.lg-fig .suf{color:var(--teal)}
.lg-rule{display:block;height:2px;width:26px;margin:16px 0 14px;background:var(--line-strong);
  transition:width .6s var(--e-travel),background .25s ease}
.lg:hover .lg-rule{width:100%;background:var(--teal)}
.lg-label{display:block;font:10px var(--f-mono);letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink);line-height:1.6}
.lg-note{display:block;margin-top:8px;font-size:12.5px;line-height:1.65;color:var(--ink-soft)}

/* Mobile: the strip becomes a data plate — a bordered 2x2 block
   with hairline cross rules,the way a rating plate is stamped on a
   machine. Four short cells on one screen beat four full-width rows
   you have to scroll past. */@media(max-width:1099px){
  .ledger-bar{padding:clamp(28px,6.5vw,48px) 0 clamp(30px,7vw,52px);border-bottom:0}
  .ledger{grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid var(--line)}
  .lg{border-inline-start:0;
    border-top:1px solid var(--line);border-inline-end:1px solid var(--line);
    padding:clamp(18px,4.6vw,26px) clamp(14px,3.8vw,20px) clamp(20px,5vw,28px)}
  .lg:nth-child(-n+2){border-top:0}
  .lg:nth-child(2n){border-inline-end:0}
  .lg:first-child{padding-inline-start:clamp(14px,3.8vw,20px)}
  .lg::before{inset:0}
  .lg-no{margin-bottom:12px}
  .lg-fig{font-size:clamp(31px,8.8vw,44px)}
  .lg-rule{width:20px;margin:13px 0 11px}
  .lg-label{font-size:9.5px;letter-spacing:.13em}
  .lg-note{font-size:11.5px;margin-top:6px;line-height:1.6}}
/* the narrowest phones: keep two columns but tighten the type so the
   labels stay on two lines instead of four */@media(max-width:400px){
  .lg{padding:16px 13px 18px}
  .lg-fig{font-size:30px}
  .lg-label{font-size:9px;letter-spacing:.1em}
  .lg-note{font-size:11px}}@media(prefers-reduced-motion:reduce){
  .lg-rule,.lg::before,.lg-fig{transition:none}}

/* In an RTL paragraph the "+" is a neutral character and bidi drops it
   to the left of the digits ("+11"). Isolate the figure as LTR so the
   suffix stays where it belongs,and keep it flush to the reading edge. */
html[dir=rtl] .lg-fig{direction:ltr;unicode-bidi:isolate;text-align:right}

/* ============================================================
   CONTRAST CORRECTIONS
   .cta p was written for the navy panel and reached into the
   white quote form nested inside it,painting 13px body text
   at 1.72:1. Scope it back to the panel's own copy.
   ============================================================ */
.cta .form p,.cta .form label,.cta .form .form-note{color:var(--ink-soft)}
.cta .form .form-note{color:var(--ink-soft)}
/* ============================================================
   CONVERSION BLOCK
   The datum runs through it like every other section, and the
   left column carries the four stages that follow a submission
   instead of empty navy.
   ============================================================ */
.cta{position:relative;padding-top:clamp(30px,3.4vw,46px)}
.cta::before{content:"";position:absolute;top:0;inset-inline:0;height:1px;background:#ffffff26}
.cta::after{content:"";position:absolute;top:0;inset-inline-start:0;height:1px;width:0;
  background:var(--teal);transition:width var(--t-draw) var(--e-draw) .12s}
.js .cta.in::after{width:clamp(72px,9vw,150px)}
html:not(.js) .cta::after{width:clamp(72px,9vw,150px)}
.cta .reg::before,.cta .reg::after{background:var(--teal-bright)}
.cta-copy .eyebrow{color:var(--teal-bright);margin-bottom:16px}
.cta-copy h2{margin:0}
.cta-copy>p{max-width:46ch}

.cta-stages{list-style:none;margin:clamp(26px,3vw,38px) 0 0;padding:0;
  display:grid;gap:0;border-top:1px solid #ffffff1f;max-width:430px}
.cta-stages li{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;
  gap:16px;padding:13px 0;border-bottom:1px solid #ffffff1f}
.cta-stages span{font:10px var(--f-mono);letter-spacing:.18em;color:var(--teal-bright)}
.cta-stages b{font-weight:500;font-size:14px;color:#dbe6e8;letter-spacing:-.01em}
.cta .chan{margin-top:clamp(24px,2.6vw,32px)}
.cta .chan a{border:1px solid #ffffff33;color:#e7eeef;background:transparent;
  transition:border-color var(--t-feedback) ease,color var(--t-feedback) ease,background var(--t-feedback) ease}
.cta .chan a:hover{border-color:var(--teal-bright);color:#fff;background:#ffffff0d}@media(max-width:900px){.cta-stages{max-width:none}}@media(prefers-reduced-motion:reduce){.cta::after{width:clamp(72px,9vw,150px);transition:none}}

/* ============================================================
   RADIUS & ELEVATION
   The build was zero-radius throughout, which read as severe
   rather than precise. A real radius scale plus restrained
   elevation keeps the engineering register but stops the page
   feeling like a technical drawing of itself. Hairlines stay —
   they are the structure; the radius is the finish.
   ============================================================ */
.btn{border-radius:var(--r-s)}.chan a,.tag,.pcard-no{border-radius:var(--r-pill)}.office-no{border-radius:50%}

/* plates and cards */.pcard,.pw,.eitem-shot,.pcard-plate,.pstrip-cell,.phero-plate,
.feature,.feature-plate,.mini-stat,.thumb{border-radius:var(--r-m)}
.deck,.pwall,.pstrip,.numbers-grid{border-radius:var(--r-m);overflow:hidden}
.pcard-plate,.pstrip-cell,.feature-plate{overflow:hidden}
.pcard{box-shadow:var(--sh-sm);transition:box-shadow var(--t-feedback) ease,
  transform var(--t-feedback) ease,background var(--t-travel) ease}
.pcard:hover{box-shadow:var(--sh-md);transform:translateY(-3px)}

/* the deck is a grid of separate objects now, not a hairline table */
.deck{background:transparent;border:0;gap:clamp(14px,1.6vw,22px)}
.pcard{border:1px solid var(--line)}
.pwall{background:transparent;border:0;gap:clamp(12px,1.4vw,18px);
  border-top:0;border-inline-start:0;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.pw{border:1px solid var(--line);border-radius:var(--r-m);box-shadow:var(--sh-sm);
  overflow:hidden;transition:box-shadow var(--t-feedback) ease,transform var(--t-feedback) ease}
.pw:hover{box-shadow:var(--sh-md);transform:translateY(-3px)}
.pstrip{background:transparent;border:0;gap:clamp(12px,1.4vw,18px)}

/* form controls */
.form{border-radius:var(--r-l);box-shadow:var(--sh-lg)}
.form input,.form select,.form textarea{border-radius:var(--r-s)}
.btn-block{border-radius:var(--r-s)}

/* dark surfaces */.cta,.numbers-grid{border-radius:var(--r-l)}.cta{overflow:hidden}
.cta{padding-inline:clamp(24px,3vw,54px)}
.founder-shot{border-radius:0}@media(max-width:900px){.cta{border-radius:var(--r-m)}}

/* ============================================================
   HERO — composition borrowed from the reference, mechanics not.
   A white card floats on the photograph and asks for three things.
   The reference asks for a donation amount; this asks what you
   make and how to reach you, because that is the actual first
   step of a six-month capital purchase.
   ============================================================ */
.editorial-hero{position:relative}
.editorial-hero .hero-photo{filter:saturate(.18) brightness(.52) contrast(1.05)}
.editorial-hero .hero-shade{background:
  linear-gradient(90deg,#0b222bfa 0%,#0b222bf0 38%,#0b222bc4 62%,#0b222b8f 100%),
  linear-gradient(0deg,#0b222bd4,transparent 46%)}
.editorial-inner{position:relative;z-index:2}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) clamp(330px,29vw,412px);
  gap:clamp(28px,4vw,64px);align-items:center}
.hero-copy{max-width:none}

/* pôle chips — the reference's category pills, pointing at real pages */
.hero-chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:clamp(20px,2.4vw,28px)}
.hchip{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;
  border:1px solid #ffffff2e;border-radius:var(--r-pill);background:#ffffff0f;
  color:#e4edee;font-size:12px;letter-spacing:.005em;text-decoration:none;
  backdrop-filter:blur(3px);
  transition:background var(--t-feedback) ease,border-color var(--t-feedback) ease,color var(--t-feedback) ease}
.hchip::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--teal-bright);
  transition:transform var(--t-feedback) ease}
.hchip:hover{background:#ffffff1c;border-color:var(--teal-bright);color:#fff}
.hchip:hover::before{transform:scale(1.5)}

/* the enquiry card */
.hero-quote{background:var(--surface);border-radius:var(--r-l);box-shadow:var(--sh-lg);
  padding:clamp(20px,2.2vw,28px);display:grid;gap:13px;align-content:start}
.hq-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:2px}
.hq-title{font-family:var(--f-display);font-weight:600;font-size:17px;letter-spacing:-.02em;color:var(--navy)}
.hq-badge{font:9px var(--f-mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--teal-ink);background:#ad4b2714;border-radius:var(--r-pill);padding:5px 10px;white-space:nowrap}
.hero-quote .fld{display:block}
.hero-quote .fld span{display:block;font:10px var(--f-mono);letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:6px}
.hero-quote input,.hero-quote select{width:100%;padding:12px 13px;font-size:13.5px;
  border:1px solid var(--line-strong);border-radius:var(--r-s);background:#fff;color:var(--ink);
  font-family:inherit;transition:border-color var(--t-feedback) ease,box-shadow var(--t-feedback) ease}
.hero-quote input:focus,.hero-quote select:focus{outline:none;border-color:var(--teal);
  box-shadow:0 0 0 3px #ad4b271f}
.hero-quote .btn{margin-top:4px;width:100%;justify-content:center}
.hq-more{text-align:center;font:10px var(--f-mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-soft);text-decoration:none;padding-top:2px}
.hq-more:hover{color:var(--teal-ink)}@media(max-width:1080px){
  .hero-grid{grid-template-columns:1fr;gap:30px}
  .hero-quote{max-width:520px}
  .editorial-hero,.editorial-inner{min-height:0}
  .editorial-inner{padding-top:clamp(38px,7vw,64px);padding-bottom:clamp(30px,5vw,54px)}
  .editorial-hero .hero-foot{position:static;margin-top:26px;inset-inline:auto}}

/* A full-bleed section spans the viewport, so travelling it sideways
   pushes it past the page edge — invisible in LTR (the browser clips
   a negative overflow) but 22px of horizontal scroll in RTL. Sections
   that reach the edges resolve in place; only content inside the grid
   travels. `clip` rather than `hidden` so it never becomes a scroll
   container and sticky positioning still works.
   (Deleted by accident once while removing an adjacent block — the
   RTL sweep is what caught it. Keep it.) */
main{overflow-x:clip}
main>[data-anim]{--travel:0px}

/* ============================================================
   CARD CONVERSION — every remaining hairline-row component
   becomes an object with edges, radius and elevation, so the
   whole site reads in one language rather than two.
   Hairlines survive only where they are structure (the datum,
   the section rules), never as the enclosure of content.
   ============================================================ */

/* ---------- 1. numbered capability index ---------- */
.cindex{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  column-gap:clamp(14px,1.6vw,20px);row-gap:clamp(14px,1.6vw,20px);border-top:0}
.cx{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);
  box-shadow:var(--sh-sm);padding:clamp(22px,2.4vw,30px);border-bottom:1px solid var(--line);
  transition:box-shadow var(--t-feedback) ease,transform var(--t-feedback) ease}
.cx:hover{box-shadow:var(--sh-md);transform:translateY(-3px)}
.cx::before{inset:0;border-radius:var(--r-m)}
.cx-no{font-size:clamp(20px,2vw,26px)}

/* ---------- 2. process rail ---------- */
.rail{padding-top:44px;gap:clamp(14px,1.6vw,20px)}
.step{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);
  box-shadow:var(--sh-sm);padding:clamp(20px,2.2vw,28px);
  transition:box-shadow var(--t-feedback) ease,transform var(--t-feedback) ease}
.step:hover{box-shadow:var(--sh-md);transform:translateY(-3px)}
.step::before{top:-44px;inset-inline-start:clamp(20px,2.2vw,28px)}
.step-no{font-size:clamp(30px,3.2vw,44px);margin-bottom:10px}
.step p{max-width:none}

/* ---------- 3. editorial list (blog, home posts) ---------- */
.elist{border-top:0;display:grid;gap:clamp(14px,1.6vw,20px);
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.eitem{display:flex;flex-direction:column;gap:0;padding:0;border-bottom:0;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);
  box-shadow:var(--sh-sm);overflow:hidden;
  transition:box-shadow var(--t-feedback) ease,transform var(--t-feedback) ease}
.eitem:hover{box-shadow:var(--sh-md);transform:translateY(-3px)}
.eitem::before{display:none}
.eitem-shot{aspect-ratio:16/10;border-radius:0;width:100%}
.eitem-main{padding:clamp(18px,2vw,24px) clamp(18px,2vw,24px) 0}
.eitem-main h3{font-size:clamp(18px,1.7vw,22px)}
.eitem-main p{max-width:none;font-size:13px}
.eitem-meta{padding:14px clamp(18px,2vw,24px) clamp(18px,2vw,24px);order:0;
  margin-top:auto;color:var(--ink-soft)}

/* ---------- 4. the three-pôle index ---------- */

/* ---------- 5. spec table lives in a card ---------- */
.spectable{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);
  padding:2px clamp(16px,1.8vw,22px);border-top:1px solid var(--line)}
.spectable .srow:last-child{border-bottom:0}

/* ---------- 6. contact offices ---------- */
.offices{border-top:0;display:grid;gap:clamp(12px,1.4vw,16px);
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.office{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);
  box-shadow:var(--sh-sm);padding:clamp(18px,2vw,24px);border-bottom:1px solid var(--line);
  transition:box-shadow var(--t-feedback) ease,transform var(--t-feedback) ease}
.office:hover{box-shadow:var(--sh-md);transform:translateY(-3px)}

/* ---------- 7. practical-information page ---------- */
.info-process{gap:clamp(14px,1.6vw,20px);grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.info-process li{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);
  box-shadow:var(--sh-sm);padding:clamp(18px,2vw,24px);border-top:1px solid var(--line);
  transition:box-shadow var(--t-feedback) ease,transform var(--t-feedback) ease}
.info-process li:hover{box-shadow:var(--sh-md);transform:translateY(-3px)}
.info-faq details{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);
  box-shadow:var(--sh-sm);margin-bottom:10px;padding:0 clamp(16px,1.8vw,22px)}
.info-faq details:first-child{border-top:1px solid var(--line)}
.info-faq details p{padding-inline-end:20px}

/* ---------- 8. partner marquee band ---------- */
.partners{background:transparent;padding:clamp(26px,3vw,40px) 0}
.partners>.wrap{max-width:var(--maxw)}
.partners .lbl{text-align:center}
.marquee{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-l);
  padding:18px 0;margin:0 var(--pad)}
.marquee:before,.marquee:after{background:linear-gradient(90deg,var(--surface-2),transparent)}
.marquee:after{background:linear-gradient(270deg,var(--surface-2),transparent)}

/* ---------- 9. legal prose reads as a document card ---------- */
.prose{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);
  box-shadow:var(--sh-sm);padding:clamp(24px,3.4vw,52px);max-width:82ch}
.prose section+section h2{margin-top:clamp(28px,3.4vw,44px)}@media(max-width:760px){
  .marquee{margin:0 20px}}

/* interior page heroes now open exactly like the home hero */
.phero-grid{align-items:center}
.phero .hero-chips{margin-top:clamp(18px,2.2vw,26px)}
.phero .hero-quote{margin:0}
.phero .actions{margin-top:clamp(20px,2.4vw,30px)}@media(max-width:900px){
  .phero-grid{grid-template-columns:1fr}
  .phero .hero-quote{max-width:520px;order:2}}

/* ============================================================
   FOUNDER — profile card.
   Was a full-bleed navy slab with the portrait bleeding off the
   page edge, which cropped his hands and left the copy stranded
   in a wide empty column. Now an inset navy card: the portrait is
   contained in its own plate, the quote sits at a readable
   measure, and the signature reads as a signature.
   ============================================================ */
.founder-sec{padding-top:0}
.founder-card{display:grid;grid-template-columns:clamp(260px,30%,380px) minmax(0,1fr);
  background:linear-gradient(155deg,#16323d,#0d222a);color:#e7eeef;
  border-radius:var(--r-l);overflow:hidden;box-shadow:var(--sh-lg);
  align-items:stretch}
.founder-shot{position:relative;margin:0;min-height:clamp(400px,35vw,540px)}
.founder-shot img{width:100%;height:100%;min-height:340px;object-fit:cover;
  object-position:50% 24%;display:block}
.founder-shot figcaption{position:absolute;inset-inline:0;bottom:0;
  padding:26px 18px 14px;font:9px var(--f-mono);letter-spacing:.14em;color:#cfdadd;
  background:linear-gradient(0deg,#0b1f27e6,transparent)}
.founder-text{padding:clamp(26px,3.4vw,54px);display:flex;flex-direction:column}
.founder-text .eyebrow{color:var(--teal-bright);display:block;margin-bottom:clamp(18px,2vw,26px)}

/* The interior is two columns so the copy occupies the full card width
   instead of stranding a third of it empty: the statement on the left,
   the substance on the right. Below 1040px they stack. */
.founder-cols{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(24px,3.2vw,50px);align-items:start}
.founder-text blockquote{margin:0;font-size:clamp(21px,2.3vw,31px);font-weight:500;
  line-height:1.3;letter-spacing:-.03em;color:#fff;max-width:none;
  padding-inline-start:clamp(16px,1.8vw,24px);border-inline-start:2px solid var(--teal)}
.founder-h2{margin:0;font-size:clamp(22px,2.3vw,31px);font-weight:600;
  letter-spacing:-.03em;line-height:1.18;color:#fff;
  padding-inline-start:clamp(16px,1.8vw,24px);border-inline-start:2px solid var(--teal)}
.founder-note{margin:0;font-size:14px;line-height:1.85;color:#b6c8cb;max-width:56ch}
.founder-note + .founder-note{margin-top:14px}
.founder-body > :first-child{margin-top:0}
.founder-text .plink{display:inline-flex;margin-top:22px;color:var(--teal-bright);
  border-bottom:1px solid #efad8355;padding-bottom:6px}
.founder-text .plink:hover{color:#fff;border-bottom-color:#fff}

/* Signature: name on one side, values on the other, on a single ruled
   line that spans the card — the row that closes it. margin-top:auto
   keeps it pinned to the bottom when the photo is the taller column. */
.founder-sign{position:relative;margin-top:auto;padding-top:22px;
  border-top:1px solid #ffffff1f;display:flex;flex-wrap:wrap;gap:18px 24px;
  align-items:flex-end;justify-content:space-between}
.founder-cols + .founder-sign{margin-top:clamp(30px,3.4vw,44px)}
.fs-mark{position:absolute;top:-1px;inset-inline-start:0;width:44px;height:2px;background:var(--teal)}
.founder-sign b{display:block;font-family:var(--f-display);font-weight:600;font-size:17px;
  letter-spacing:-.02em;color:#fff}
.fs-role{display:block;margin-top:4px;font:10px var(--f-mono);letter-spacing:.15em;
  text-transform:uppercase;color:#93aeb6}

.founder-values{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0;
  justify-content:flex-end}
.founder-values li{font:9.5px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;
  color:#cfe0e3;border:1px solid #ffffff2b;border-radius:var(--r-pill);padding:7px 13px;
  transition:border-color var(--t-feedback) ease,color var(--t-feedback) ease,background var(--t-feedback) ease}
.founder-values li:hover{border-color:var(--teal-bright);color:#fff;background:#ffffff0f}@media(max-width:1040px){
  .founder-cols{grid-template-columns:1fr;gap:22px}}@media(max-width:860px){
  .founder-card{grid-template-columns:1fr}
  .founder-shot{min-height:clamp(320px,92vw,430px)}
  .founder-shot img{min-height:0;object-position:50% 22%}
  .founder-values{justify-content:flex-start}}

/* ============================================================
   MARNOOR HAND-OFF — the panel that sends machine enquiries out.

   Navy, because it is a destination change and the page is
   otherwise ivory: the colour shift is the signal that you are
   about to leave. Every outbound link carries a ↗ so nobody
   clicks into another domain by surprise.
   ============================================================ */
.handoff{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(24px,3.4vw,56px);align-items:center;
  background:linear-gradient(155deg,#16323d,#0d222a);color:#e7eeef;
  border-radius:var(--r-l);box-shadow:var(--sh-lg);
  padding:clamp(28px,3.6vw,54px)}
.handoff .eyebrow{color:var(--teal-bright);display:block}
.handoff h2{margin:16px 0 0;color:#fff;font-size:clamp(24px,2.7vw,38px);font-weight:500;
  letter-spacing:-.03em;line-height:1.18;max-width:19ch}
.handoff p{margin:16px 0 0;font-size:14px;line-height:1.85;color:#b6c8cb;max-width:52ch}
.handoff-go{display:flex;flex-direction:column;align-items:stretch;gap:12px}
.handoff-go .btn{width:100%}
.handoff-note{font:9.5px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;
  color:#93aeb6;text-align:center;margin-top:4px}

/* Outbound marker — one mark, used everywhere a link leaves the site. */

.pcard-out{display:inline-flex;align-items:center;margin-top:16px;
  font:10px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--teal-ink);border-bottom:1px solid #ad4b2740;padding-bottom:6px;
  transition:color var(--t-feedback) ease,border-color var(--t-feedback) ease}
.pcard-out:hover{color:var(--navy);border-bottom-color:var(--navy)}@media(max-width:860px){
  .handoff{grid-template-columns:1fr;gap:26px;padding:clamp(24px,5vw,34px)}
  .handoff h2,.handoff p{max-width:none}
  .handoff-note{text-align:start}}

/* At 320 the address is wider than the strip and gets clipped off
   the leading edge. Below 430 the language switcher is the only
   thing that has to survive up there; the address is in the
   drawer and the footer. */@media(max-width:430px){.topbar .tb-mail{display:none}}

/* ============================================================
   DATABASE-BACKED PAGES — machine, article, catalogue.

   These reuse the existing card, plate and prose components, so
   a machine added from the admin is visually indistinguishable
   from the curated content beside it. Only the layouts that had
   no equivalent are new.
   ============================================================ */

/* ---- Catalogue filter tabs ----
   Server-rendered links, not a script. Every card stays in the
   DOM whichever tab is active, so the crawler always sees the
   whole catalogue and each filter is a real, shareable URL. */
.cattabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 clamp(24px,3vw,36px);
  padding-bottom:18px;border-bottom:1px solid var(--line)}
.cattab{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:var(--r-pill);
  border:1px solid var(--line-strong);font:10px var(--f-mono);letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-soft);background:var(--surface);
  transition:border-color var(--t-feedback) ease,color var(--t-feedback) ease,background var(--t-feedback) ease}
.cattab:hover{border-color:var(--navy);color:var(--navy)}
.cattab.on{background:var(--navy);border-color:var(--navy);color:#fff}
.cattab span{opacity:.6;font-size:9px}
.cattab.on span{opacity:.75}
/* Filtered-out cards are hidden, not removed: the markup a crawler
   receives is identical for every tab. */
.pcard.is-filtered{display:none}

/* ---- Machine page ---- */
.machine-grid{display:grid;grid-template-columns:minmax(0,1fr) clamp(300px,32%,420px);
  gap:clamp(28px,4vw,64px);align-items:start}
.spectable{width:100%;border-collapse:collapse}
.spectable th{text-align:start;font:10px var(--f-mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:400;padding:15px 18px 15px 0;width:38%;
  border-bottom:1px solid var(--line);vertical-align:top}
.spectable td{padding:15px 0;font-size:14px;line-height:1.8;color:var(--ink-body);
  border-bottom:1px solid var(--line)}
.machine-aside{position:sticky;top:118px}

/* ---- Article page ---- */
.article-wrap{max-width:74ch;margin-inline:auto}
.article-shot{margin:0 0 clamp(26px,3.4vw,40px);border-radius:var(--r-l);overflow:hidden}
.article-shot img{width:100%;height:auto;display:block}

/* ---- Page hero meta strip (dynamic pages) ---- */
.phero-meta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:clamp(24px,3vw,34px);
  padding-top:20px;border-top:1px solid #ffffff26}
.phero-meta > span{font:10px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:#bccbcc}
.phero-meta time{color:#fff}

/* ---- Quote form ----
   The honeypot must be genuinely unreachable — off-screen rather
   than display:none, which some autofillers still populate, and
   removed from the tab order and the accessibility tree. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.qform h4{margin:0 0 8px}
.qform > p{margin:0 0 20px}
.machine-aside .form{position:relative}@media(max-width:980px){
  .machine-grid{grid-template-columns:1fr;gap:34px}
  .machine-aside{position:static}}

/* ==============================================================
   ENQUIRY REPLY BANNER

   Shown by :target alone, so a visitor with JavaScript disabled
   still learns whether their enquiry arrived. quote.php sends
   them back to #devis-ok or #devis-err; the banner sits at the
   top of <main>, above the page they submitted from.

   Copper for success is deliberate: the palette has no green,
   and a green here would be the one colour on the site that
   belongs to no other element. The error state keeps the same
   plate and changes the rule, not the hue.
   ============================================================== */
.fstate{display:none}
.fstate:target,.fstate.shown{
  display:flex;flex-direction:column;gap:6px;
  max-width:var(--maxw);margin:0 auto;
  padding:22px 26px;
  background:var(--teal-soft);
  border-inline-start:3px solid var(--teal);
  outline:0}
.fstate b{font-size:15px;font-weight:600;color:var(--navy);letter-spacing:-.02em}
.fstate span{font-size:13px;line-height:1.8;color:var(--ink-body)}
.fstate a{color:var(--teal-ink);text-decoration:underline;text-underline-offset:3px}
.fstate-err:target,.fstate-err.shown{
  background:#f6ece7;border-inline-start-color:#9d3218}
.fstate:focus-visible{box-shadow:0 0 0 3px #ad4b2740}@media(max-width:760px){.fstate:target,.fstate.shown{padding:18px 22px;margin-inline:0}}

/* ---- Required-field marker ---------------------------------- */
.fld .req{color:var(--teal);font-weight:600;margin-inline-start:2px}

/* ---- Phone numbers -----------------------------------------
   A leading + is a neutral character: under dir="rtl" the bidi
   algorithm moves it to the wrong end of the number. Isolating
   each number as its own LTR run keeps +212 reading as +212 in
   Arabic. ------------------------------------------------------ */
.telnum{direction:ltr;unicode-bidi:isolate;display:inline-block;
  font:11px var(--f-mono);color:var(--ink-soft);margin-inline-start:8px}
.foot-col a:hover .telnum{color:var(--teal-ink)}@media(max-width:760px){.telnum{display:block;margin:3px 0 0}}

/* ---- Contact: address + hours -------------------------------
   Replaced a placeholder that read "map to be embedded". Two
   hairline columns rather than an embedded map: the address is
   the fact a visitor needs, and a third-party map frame would
   be the only element on the site loading from another origin. */
.office-tel{display:inline-block;margin-top:10px;
  border-bottom:1px solid var(--line-strong);padding-bottom:4px}
.office-tel:hover{border-bottom-color:var(--teal)}
.office-tel .telnum{font-size:12px;color:var(--navy);margin:0}
.office-tel:hover .telnum{color:var(--teal-ink)}
.contact-card{display:grid;grid-template-columns:1fr 1fr;gap:30px;
  margin-top:38px;padding-top:30px;border-top:1px solid var(--line)}
.contact-card .ptag{display:block;margin-bottom:14px;color:var(--teal-ink)}
.contact-card address{font-style:normal;font-size:13px;line-height:1.95;color:var(--ink-body);
  direction:ltr;unicode-bidi:isolate}
/* A Dutch postcode is "6665 HP Driel". Under dir=rtl the bidi
   algorithm reorders that to "HP Driel 6665", because the digits
   and the Latin run are separate directional runs. The address is
   entirely Latin, so it is isolated as one LTR run and only its
   alignment follows the page. */
html[dir=rtl] .contact-card address{text-align:right}
.cc-hours{margin:0}
.cc-hours div{display:flex;justify-content:space-between;gap:16px;
  padding:7px 0;border-bottom:1px solid var(--line);font-size:12px}
.cc-hours dt{color:var(--ink-soft)}
.cc-hours dd{margin:0;color:var(--navy)}@media(max-width:760px){.contact-card{grid-template-columns:1fr;gap:26px}}

/* ==============================================================
   DRAWING PLATE

   A commissioned schematic on the navy plate. Same plate as the
   machine cut-outs, because the drawings were keyed to true alpha
   for exactly that reason — one surface, two kinds of object on
   it, rather than a second visual system.

   The caption strip is the hairline the rest of the site uses,
   and it always carries the word SCHÉMA: these are illustrations,
   not as-built documents, and the page says so where it is read
   rather than in a note underneath.
   ============================================================== */
.drawplate{margin:0;background:linear-gradient(160deg,#17353f,#0c2028);position:relative;overflow:hidden}
.drawplate a{display:block;padding:38px 44px 30px}
.drawplate img{width:100%;height:auto;display:block}
.drawplate.is-tall a{max-width:520px;margin-inline:auto}
.drawplate figcaption{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;
  border-top:1px solid #ffffff26;margin:0 44px;padding:18px 0 22px}
.drawplate .dp-tag{font:10px var(--f-mono);letter-spacing:.2em;color:var(--teal-bright);flex:none}
.drawplate figcaption b{font-size:13px;font-weight:500;color:#d0dbdd;letter-spacing:-.01em}
.drawplate:after{content:'↗';position:absolute;top:26px;inset-inline-end:30px;
  font-size:20px;color:#e3ac80;opacity:.55;transition:opacity var(--t-feedback)}
.drawplate:hover:after{opacity:1}
.drawplate a:focus-visible{outline:2px solid var(--teal-bright);outline-offset:-6px}@media(max-width:760px){
  .drawplate a{padding:22px 20px 16px}
  .drawplate figcaption{margin:0 20px;padding:14px 0 18px;gap:8px}
  .drawplate figcaption b{font-size:12px}
  .drawplate:after{top:16px;inset-inline-end:18px;font-size:16px}}

/* ==============================================================
   PRODUCT LIGHTBOX

   The image on the navy plate it already lives on, its model name,
   and the next step. Sized so the machine is the largest thing on
   screen and the action bar is a hairline strip under it — the
   same relationship the cards already use.
   ============================================================== */
.lb{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:32px}
.lb[hidden]{display:none}
.lb-back{position:absolute;inset:0;background:#081920f2;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.lb-panel{position:relative;width:min(1120px,100%);max-height:calc(100vh - 64px);
  display:flex;flex-direction:column;background:linear-gradient(160deg,#17353f,#0c2028);
  border:1px solid #ffffff1f;animation:lbIn .22s var(--e-travel) both}
@keyframes lbIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.lb-stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:44px 56px 28px}
.lb-stage img{max-width:100%;max-height:min(62vh,620px);width:auto;height:auto;object-fit:contain}
.lb-bar{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  border-top:1px solid #ffffff26;margin:0 56px;padding:20px 0 26px}
.lb-meta{display:flex;align-items:baseline;gap:16px;min-width:0}
.lb-count{font:10px var(--f-mono);letter-spacing:.2em;color:var(--teal-bright);flex:none}
.lb-meta b{font-size:17px;font-weight:500;color:#fff;letter-spacing:-.02em;overflow-wrap:anywhere}
.lb-acts{display:flex;gap:12px;flex-wrap:wrap}
.lb-acts .btn{font-size:11px;padding:13px 18px;min-height:42px}
.lb-acts .btn-ghost{border-color:#ffffff3d;color:#d5dfe0}
.lb-acts .btn-ghost:hover{border-color:var(--teal-bright);color:#fff}
.lb-acts .btn[hidden]{display:none}
.lb-x{position:absolute;top:10px;inset-inline-end:14px;width:42px;height:42px;
  background:none;border:0;color:#cfdadd;font-size:30px;line-height:1;cursor:pointer;z-index:2}
.lb-x:hover{color:var(--teal-bright)}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:64px;
  background:#0e2831b3;border:1px solid #ffffff26;color:#e7eeef;font-size:26px;line-height:1;cursor:pointer}
.lb-nav:hover{background:var(--teal);border-color:var(--teal)}
.lb-nav[hidden]{display:none}
.lb-prev{inset-inline-start:8px}
.lb-next{inset-inline-end:8px}
html[dir=rtl] .lb-prev{transform:translateY(-50%) scaleX(-1)}
html[dir=rtl] .lb-next{transform:translateY(-50%) scaleX(-1)}
.lb :focus-visible{outline:2px solid var(--teal-bright);outline-offset:2px}@media(max-width:760px){
  .lb{padding:0}
  .lb-panel{max-height:100vh;height:100%;border:0}
  .lb-stage{padding:52px 16px 16px}
  .lb-stage img{max-height:48vh}
  .lb-bar{margin:0 18px;padding:16px 0 22px;gap:14px}
  .lb-acts{width:100%}
  .lb-acts .btn{flex:1;justify-content:center}
  .lb-nav{width:38px;height:52px;font-size:21px}}@media(prefers-reduced-motion:reduce){.lb-panel{animation:none}}

/* Owner's way in. Deliberately quiet — it is a door for one person,
   not a navigation item. robots.txt disallows /admin/ and the admin
   sends noindex headers of its own, so this is not a crawl path. */
.foot-admin{font:9px var(--f-mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-faint);opacity:.6;padding:4px 0}
.foot-admin:hover{opacity:1;color:var(--teal-ink)}

/* ==============================================================
   MACHINES — catalogue cards and the machine page.

   One idea carries both: the NAMEPLATE. Every PSS machine wears a
   riveted plate with its model and its figures; the site borrows
   it. On a card it is a small mono strip under the summary; on
   the page it is a full-width band with the model in outlined type
   and the key figures as large numerals. Everything else stays
   quiet — hairlines, mono labels, the navy plate for cut-outs.
   ============================================================== */

/* ---- Catalogue bar: tabs + search ---- */
.catbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;
  margin:0 0 clamp(24px,3vw,36px);padding-bottom:18px;border-bottom:1px solid var(--line)}
.catbar .cattabs{margin:0;padding:0;border:0;flex:1 1 420px}
.catq{position:relative;flex:0 1 300px;min-width:200px}
.catq input{width:100%;height:40px;padding:0 14px 0 38px;border:1px solid var(--line-strong);border-radius:var(--r-pill);
  background:var(--surface);font:12.5px var(--f-body);color:var(--ink);transition:border-color var(--t-feedback) ease,box-shadow var(--t-feedback) ease}
.catq input:focus{outline:0;border-color:var(--navy);box-shadow:0 0 0 3px #10283114}
.catq::before{content:"";position:absolute;inset-inline-start:15px;top:50%;width:11px;height:11px;margin-top:-7px;
  border:1.5px solid var(--ink-soft);border-radius:50%;pointer-events:none}
.catq::after{content:"";position:absolute;inset-inline-start:24px;top:50%;width:6px;height:1.5px;margin-top:3px;
  background:var(--ink-soft);transform:rotate(45deg);pointer-events:none}
html[dir=rtl] .catq input{padding:0 38px 0 14px}
html[dir=rtl] .catq::after{transform:rotate(-45deg)}
.cat-empty,.cat-none{font-size:14px;line-height:1.85;color:var(--ink-soft);max-width:60ch;padding:26px 0}
.cat-none{border-top:1px solid var(--line)}
.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}
.sec-link{text-decoration:none;color:var(--teal-ink);transition:color var(--t-feedback) ease}
.sec-link:hover{color:var(--navy)}

/* ---- Card additions ---- */
.pcard-machine .pcard-body>p{min-height:0}
.pcard-machine h3 a{color:inherit;text-decoration:none}
.pcard-feat{position:absolute;top:0;inset-inline-end:0;z-index:2;background:#ffffff14;color:var(--teal-bright);
  border-inline-start:1px solid #ffffff1a;border-bottom:1px solid #ffffff1a;
  font:9px var(--f-mono);letter-spacing:.2em;text-transform:uppercase;padding:9px 12px;border-radius:0 var(--r-m) 0 0}
html[dir=rtl] .pcard-feat{border-radius:var(--r-m) 0 0 0}
.pcard.is-featured{border-color:#d7997355}
.pcard.is-featured .pcard-no{background:var(--navy)}
.pcard-machine .pcard-out{margin-top:auto;padding-top:18px}
.pcard-machine .pcard-out span{display:inline-block;margin-inline-start:6px;transition:transform var(--t-feedback) ease}
.pcard-machine:hover .pcard-out span{transform:translateX(4px)}
html[dir=rtl] .pcard-machine .pcard-out span{transform:scaleX(-1)}
html[dir=rtl] .pcard-machine:hover .pcard-out span{transform:translateX(-4px) scaleX(-1)}
html[dir=rtl] .sec-link,html[dir=rtl] .brochure-go{unicode-bidi:isolate}

/* ---- The nameplate ---- */
.nameplate{margin:0;display:grid;gap:0}
.nameplate>div{margin:0;min-width:0}
.nameplate dt{font:9.5px var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.nameplate dd{margin:0;color:var(--ink)}
.nameplate-sm{margin-top:16px;border-top:1px solid var(--line);grid-template-columns:repeat(auto-fit,minmax(90px,1fr))}
.nameplate-sm>div{padding:12px 12px 0 0;border-inline-end:1px solid var(--line);margin-inline-end:12px}
.nameplate-sm>div:last-child{border-inline-end:0;margin-inline-end:0}
.nameplate-sm dd{margin-top:4px;font-size:15px;font-weight:600;letter-spacing:-.02em;line-height:1.25;
  font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate;overflow-wrap:anywhere}
html[dir=rtl] .nameplate-sm dd{text-align:end}

.nameplate-band{background:var(--bg);border-bottom:1px solid var(--line)}
.nameplate-lg{grid-template-columns:minmax(200px,1.2fr) repeat(auto-fit,minmax(160px,1fr));
  border-inline-start:1px solid var(--line)}
.nameplate-lg>div{position:relative;padding:clamp(26px,3vw,44px) clamp(18px,2vw,32px);border-inline-end:1px solid var(--line);
  opacity:0;transform:translateY(10px);transition:opacity var(--t-travel) var(--e-travel),transform var(--t-travel) var(--e-travel);
  transition-delay:calc(var(--i,0) * 90ms)}
.nameplate-lg.in>div,html:not(.js) .nameplate-lg>div{opacity:1;transform:none}
.nameplate-lg dd{margin-top:14px;font:500 clamp(22px,2.6vw,36px)/1.1 var(--f-display);letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate;overflow-wrap:anywhere}
html[dir=rtl] .nameplate-lg dd{text-align:end}
.nameplate-lg .np-id{background:var(--navy);color:#fff}
.nameplate-lg .np-id dt{color:#93aeb6}
.nameplate-lg .np-model{color:transparent;-webkit-text-stroke:1px var(--teal-bright);
  font-size:clamp(30px,3.6vw,52px);font-weight:600;letter-spacing:-.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nameplate-lg .np-id::after{content:"";position:absolute;inset-inline-end:12px;top:10px;width:6px;height:6px;border-radius:50%;
  border:1px solid #ffffff55}
.nameplate-lg .np-id::before{content:"";position:absolute;inset-inline-start:12px;top:10px;width:6px;height:6px;border-radius:50%;
  border:1px solid #ffffff55}@media(max-width:760px){
  .nameplate-lg{grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
  .nameplate-lg>div{border-bottom:1px solid var(--line);padding:24px 16px 20px}
  .nameplate-lg .np-id{grid-column:1 / -1}
  .nameplate-lg .np-model{white-space:normal;overflow:visible}}@media(prefers-reduced-motion:reduce){.nameplate-lg>div{opacity:1;transform:none;transition:none}}

/* ---- Machine hero ---- */
.phero-machine .phero-ghost{font-size:clamp(120px,18vw,300px);letter-spacing:-.04em}
.phero-tagline{font-size:clamp(16px,1.5vw,20px)!important;color:#e7eeef!important;font-weight:500;line-height:1.5!important;max-width:34ch!important}
.phero-tagline + p{margin-top:14px}
.phero-plate a{position:absolute;inset:0;z-index:1;display:block;color:inherit}
.phero-plate a img{padding:clamp(20px,2.4vw,38px) clamp(18px,2.2vw,34px) clamp(32px,3.4vw,48px)}
.phero-plate.is-photo a img{padding:0}
.plate-expand{position:absolute;bottom:12px;inset-inline-end:14px;z-index:2;width:30px;height:30px;display:grid;place-items:center;
  border:1px solid #ffffff2e;border-radius:50%;color:#d5dfe0;font-size:13px;background:#0c202899;
  transition:background var(--t-feedback) ease,color var(--t-feedback) ease,transform var(--t-feedback) ease}
.phero-plate a:hover .plate-expand{background:var(--teal);border-color:var(--teal);color:#fff;transform:translateY(-2px)}
.phero-plate a:focus-visible{outline:3px solid var(--teal-bright);outline-offset:-3px}
.btn-onnavy{border-color:#ffffff3d;color:#e7eeef}
.btn-onnavy:hover{border-color:var(--teal-bright);color:#fff}
.phero-foot .foot-link{color:inherit;text-decoration:none;border-bottom:1px solid #ffffff2e;transition:color var(--t-feedback) ease,border-color var(--t-feedback) ease}
.phero-foot .foot-link:hover{color:var(--teal-bright);border-color:var(--teal-bright)}

/* ---- Machine page body ---- */
.machine-sec{margin-top:clamp(34px,4vw,56px)}
.machine-main .prose{background:transparent;border:0;border-radius:0;padding:0;box-shadow:none;margin:0;max-width:74ch}
.machine-main .prose h3{margin-top:26px;font-size:clamp(18px,1.7vw,22px);font-weight:600;letter-spacing:-.025em}
.machine-main .prose ul,.machine-main .prose ol{margin-top:12px;padding-inline-start:20px}
.machine-main .prose li{font-size:14.5px;line-height:1.9;color:var(--ink-body)}
.machine-main .sec-line:first-child{margin-top:0;padding-top:0}
.machine-main .sec-line:first-child::before,.machine-main .sec-line:first-child::after{display:none}
.spectable tr.is-key th,.spectable tr.is-key td{background:#ad4b2708}
.spectable tr.is-key th::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--teal);
  margin-inline-end:8px;vertical-align:middle}
.spectable th{padding-inline-start:12px}
.spectable td{padding-inline-end:12px}
.spec-note{margin-top:14px;font-size:12.5px;line-height:1.8;color:var(--ink-soft);max-width:60ch}
.mgallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.2vw,16px)}
.mg-no{position:absolute;bottom:8px;inset-inline-start:12px;font:9px var(--f-mono);letter-spacing:.14em;color:#93aeb6}@media(max-width:600px){.mgallery{grid-template-columns:repeat(2,minmax(0,1fr))}}
.brochure{margin-top:clamp(28px,3vw,40px);display:flex;align-items:center;gap:18px;padding:18px 20px;
  border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface);color:var(--ink);text-decoration:none;
  transition:border-color var(--t-feedback) ease,box-shadow var(--t-feedback) ease}
.brochure:hover{border-color:var(--navy);box-shadow:var(--sh-md)}
.brochure-ic{flex:none;width:46px;height:46px;display:grid;place-items:center;background:var(--navy);color:var(--teal-bright);
  font:600 10px var(--f-mono);letter-spacing:.12em;border-radius:var(--r-s)}
.brochure b{display:block;font-size:15px;font-weight:600;letter-spacing:-.02em}
.brochure small{display:block;margin-top:3px;font:10px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.brochure-go{margin-inline-start:auto;color:var(--teal-ink);font-size:16px}
.aside-alt{margin-top:16px;font-size:12.5px;line-height:1.8;color:var(--ink-soft)}
.aside-alt a{color:var(--teal-ink)}
.machine-aside{scroll-margin-top:130px}

/* ---- Model families: variant chips + comparison table ---- */
.variants{list-style:none;margin:clamp(16px,2vw,22px) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.variants li{font:10px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:#e7eeef;
  border:1px solid #ffffff2e;padding:7px 11px;border-radius:var(--r-pill);direction:ltr;unicode-bidi:isolate}
.spec-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface)}
.spectable-x{min-width:100%;border-collapse:separate;border-spacing:0}
.spectable-x th,.spectable-x td{padding:12px 14px;border-bottom:1px solid var(--line);white-space:nowrap;font-variant-numeric:tabular-nums}
.spectable-x thead th{position:sticky;top:0;background:var(--navy);color:#fff;font:600 11px var(--f-mono);letter-spacing:.12em;
  text-transform:uppercase;text-align:center;border-bottom:0;direction:ltr;unicode-bidi:isolate}
.spectable-x thead th:first-child{text-align:start;color:#93aeb6;font-weight:400;position:sticky;inset-inline-start:0;z-index:2}
.spectable-x tbody th{position:sticky;inset-inline-start:0;background:var(--surface);z-index:1;width:auto;max-width:280px;white-space:normal;
  padding-inline-start:14px;font:10px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);
  border-inline-end:1px solid var(--line)}
.spectable-x tbody td{text-align:center;font-size:13.5px;color:var(--ink);direction:ltr;unicode-bidi:isolate}
.spectable-x tbody tr:last-child th,.spectable-x tbody tr:last-child td{border-bottom:0}
.spectable-x tr.is-key th,.spectable-x tr.is-key td{background:#ad4b2708}
.spectable-x tr.is-key th{background:#fbf5f1}
.spectable-x tbody tr:hover td{background:#10283108}@media(max-width:760px){.spectable-x th,.spectable-x td{padding:10px 10px;font-size:12.5px}.spectable-x tbody th{max-width:160px}}


/* ==============================================================
   THE MANDATE REGISTER — projets.html

   A portfolio usually earns trust by naming clients. This one is
   not allowed to, so it borrows the shape of a register instead:
   the lead mandate is opened for the reader, the rest are rows
   that unfold in place.

   The one loud element is the reference code, set in the outlined
   copper numerals the machine pages use for a model number. That
   is the whole idea in one detail — where a competitor prints a
   logo, this page prints a serial. Everything around it is
   hairlines and mono labels, deliberately quiet.

   Rows are <details>. No JavaScript is involved, so keyboard,
   no-JS and reduced-motion all work without a second code path.
   ============================================================== */
.mlead{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;background:var(--surface)}
.mlead-plate{position:relative;display:block;min-height:clamp(280px,32vw,430px);
  background:linear-gradient(160deg,#17353f,#0c2028)}
.mlead-plate img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  padding:clamp(18px,2vw,32px)}
.mlead-plate.is-photo img{padding:0;object-fit:cover}
.mlead-plate:focus-visible{outline:3px solid var(--teal-bright);outline-offset:-3px}
.mlead-plate .plate-expand{opacity:.85}
.mlead-plate:hover .plate-expand{background:var(--teal);border-color:var(--teal);color:#fff;opacity:1}
.mlead-body{padding:clamp(24px,3vw,46px);min-width:0}
.mlead-flags{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.mclient{font:10px var(--f-mono);letter-spacing:.11em;text-transform:uppercase;color:var(--ink-soft)}
.mclient b{color:var(--ink);font-weight:500}
.mlead-body h3{margin:18px 0 0;font-size:clamp(21px,2.3vw,31px);font-weight:500;line-height:1.2;
  letter-spacing:-.035em;color:var(--ink);text-wrap:pretty}
.mlead-sub{margin-top:13px;font-size:14px;line-height:1.85;color:var(--ink-body);max-width:62ch}
/* Two columns, not four: the band sits inside the body column of the
   card, so four cells would each get ~145px and the reference — the
   one element that has to be read — would be the first to ellipsis. */
.mlead .nameplate-lg{margin-top:clamp(22px,2.4vw,32px);border:1px solid var(--line);
  grid-template-columns:repeat(2,minmax(0,1fr))}
.mlead .nameplate-lg>div{padding:clamp(16px,1.7vw,24px) clamp(14px,1.5vw,20px)}
.mlead .nameplate-lg>div:nth-child(2n){border-inline-end:0}
.mlead .nameplate-lg>div:nth-child(n+2){border-top:1px solid var(--line)}
.mlead .nameplate-lg .np-id{grid-column:1 / -1;border-top:0}
.mlead .nameplate-lg dd{margin-top:9px;font-size:clamp(15px,1.5vw,20px);line-height:1.3}
.mlead .nameplate-lg .np-model{font-size:clamp(20px,2vw,28px);letter-spacing:-.02em;
  white-space:normal;overflow:visible;text-overflow:clip}
.mlead .spectable{margin-top:clamp(22px,2.4vw,32px)}
.mnote{margin-top:22px;padding-inline-start:16px;border-inline-start:2px solid var(--teal);
  font-size:13px;line-height:1.85;color:var(--ink-soft);max-width:62ch}
.mnote .eyebrow{display:block;margin-bottom:9px;color:var(--teal-ink)}

.mreg{margin-top:clamp(32px,4vw,54px);border-top:1px solid var(--line)}
.mreg-row{border-bottom:1px solid var(--line)}
.mreg-row>summary{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:clamp(14px,2vw,28px);padding:22px 4px;cursor:pointer;list-style:none}
.mreg-row>summary::-webkit-details-marker{display:none}
.mreg-row>summary::marker{content:''}
.mreg-row>summary:focus-visible{outline:3px solid var(--teal-bright);outline-offset:-3px}
.mreg-no{font:10px var(--f-mono);letter-spacing:.14em;color:var(--ink-faint);
  font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
.mreg-title{min-width:0}
.mreg-ref{display:block;font:10px var(--f-mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--teal-ink);direction:ltr;unicode-bidi:isolate}
html[dir=rtl] .mreg-ref{text-align:end}
.mreg-title b{display:block;margin-top:7px;font-size:16.5px;font-weight:500;letter-spacing:-.025em;
  color:var(--ink);transition:color var(--t-feedback) ease}
.mreg-client{display:block;margin-top:5px;font-size:12.5px;line-height:1.7;color:var(--ink-soft)}
.mreg-row:hover .mreg-title b,.mreg-row[open] .mreg-title b{color:var(--teal-ink)}
.mreg-side{display:flex;align-items:center;gap:14px}
.mreg-status{font:9.5px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);
  border:1px solid var(--line-strong);border-radius:var(--r-pill);padding:7px 13px;white-space:nowrap}
.mreg-go{flex:none;width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--line-strong);
  border-radius:50%;color:var(--teal);font-size:16px;line-height:1;
  transition:transform var(--t-feedback) ease,background var(--t-feedback) ease,color var(--t-feedback) ease,border-color var(--t-feedback) ease}
.mreg-row[open] .mreg-go{transform:rotate(45deg);background:var(--teal);border-color:var(--teal);color:#fff}
.mreg-panel{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);
  gap:clamp(20px,2.6vw,40px);padding:2px 4px 34px}
.mreg-main{min-width:0}
.mreg-sum{font-size:14px;line-height:1.85;color:var(--ink-body);max-width:62ch}
.mreg-main .nameplate-sm{margin-top:18px}
.mreg-main .spectable{margin-top:20px}
.mreg-main .mnote{margin-top:18px}
.mreg-foot{margin-top:26px;padding-top:18px;border-top:1px solid var(--line);
  font:10px var(--f-mono);letter-spacing:.09em;color:var(--ink-faint);max-width:70ch;line-height:1.9}@media(max-width:900px){
  .mlead{grid-template-columns:1fr}
  .mlead-plate{min-height:240px;aspect-ratio:3/2}
  .mreg-panel{grid-template-columns:1fr}}@media(max-width:640px){
  .mreg-row>summary{grid-template-columns:auto minmax(0,1fr);gap:12px;padding:18px 2px;
    grid-template-areas:"no title" ". side"}
  .mreg-no{grid-area:no;align-self:start;padding-top:2px}
  .mreg-title{grid-area:title}
  .mreg-side{grid-area:side;justify-content:space-between;margin-top:12px}
  .mlead .nameplate-lg{grid-template-columns:1fr 1fr}
  .mlead .nameplate-lg .np-id{grid-column:1 / -1}}
/* An odd number of axes would leave a half-empty cell beside the
   last one: it spans instead. */
.mlead .nameplate-lg>div:last-child:nth-child(even){grid-column:1 / -1;border-inline-end:0}


/* ==============================================================
   THE CHAIN, THE HOUSES, AND LEAVING THE SITE

   Three companies do this work and the visitor has to tell them
   apart fast. Everything that leaves omarisolutions.eu is a block
   with a logo, a domain in mono and an arrow — never a text link
   that differs from an internal one by a single glyph.
   ============================================================== */
/* ---- The house panel: whose page is this ---- */
.house{display:grid;grid-template-columns:minmax(160px,.5fr) minmax(0,1.4fr) minmax(230px,.75fr);
  gap:clamp(20px,2.4vw,40px);align-items:center;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-m);padding:clamp(22px,2.6vw,38px)}
.house-brand{display:flex;align-items:center;justify-content:center;min-height:76px;
  padding:16px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-s)}
.house-brand img{max-width:100%;max-height:64px;width:auto;height:auto;object-fit:contain}
.house-body h2{margin-top:12px;font-size:clamp(19px,1.9vw,26px);font-weight:600;letter-spacing:-.03em;
  line-height:1.25;color:var(--ink);text-wrap:pretty}
.house-body p{margin-top:12px;font-size:13.5px;line-height:1.85;color:var(--ink-body);max-width:60ch}
.house-go{display:flex;flex-direction:column;gap:10px;align-items:stretch}
.house-leave{font:9px var(--f-mono);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint);
  text-align:center}

/* ---- Leaving the site ---- */
.extlink{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"brand body" "foot foot";
  gap:4px 14px;align-items:center;padding:14px 16px;text-decoration:none;
  background:var(--navy);border:1px solid var(--navy);border-radius:var(--r-s);
  transition:background var(--t-feedback) ease,border-color var(--t-feedback) ease,transform var(--t-feedback) ease}
.extlink:hover{background:#17353f;border-color:var(--teal);transform:translateY(-2px)}
.extlink:focus-visible{outline:3px solid var(--teal-bright);outline-offset:2px}
.extlink-brand{grid-area:brand;display:flex;align-items:center;justify-content:center;
  width:52px;height:38px;background:#fff;border-radius:4px;padding:5px}
.extlink-brand img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.extlink-word{font:600 9px var(--f-mono);letter-spacing:.04em;color:var(--navy);text-align:center;line-height:1.1}
.extlink-body{grid-area:body;min-width:0}
.extlink-body b{display:block;font-size:13.5px;font-weight:600;color:#fff;letter-spacing:-.015em;
  line-height:1.35;text-wrap:pretty}
.extlink-sub{display:block;margin-top:3px;font-size:11.5px;line-height:1.55;color:#b9c9cc}
.extlink-foot{grid-area:foot;display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:8px;padding-top:9px;border-top:1px solid #ffffff1f}
.extlink-dom{font:9.5px var(--f-mono);letter-spacing:.11em;color:var(--teal-bright);
  direction:ltr;unicode-bidi:isolate;overflow-wrap:anywhere}
.extlink-go{flex:none;width:22px;height:22px;display:grid;place-items:center;border-radius:50%;
  border:1px solid #ffffff33;color:#fff;font-size:11px;
  transition:background var(--t-feedback) ease,border-color var(--t-feedback) ease}
.extlink:hover .extlink-go{background:var(--teal);border-color:var(--teal)}

/* Inline variant, for a card foot or a hero action. */
.extchip{display:inline-flex;align-items:center;gap:9px;flex-wrap:wrap;
  font-size:12px;font-weight:600;color:var(--teal-ink);text-decoration:none;
  padding:9px 0;border-bottom:1px solid var(--line-strong);transition:border-color var(--t-feedback) ease,color var(--t-feedback) ease}
.extchip:hover{border-color:var(--teal);color:var(--teal)}
.extchip-dom{font:9px var(--f-mono);letter-spacing:.11em;color:var(--ink-faint);
  direction:ltr;unicode-bidi:isolate}
.extchip .extlink-go{border-color:var(--line-strong);color:var(--teal-ink);width:20px;height:20px}
.extchip:hover .extlink-go{background:var(--teal);border-color:var(--teal);color:#fff}
.btn.extbtn{display:inline-flex;align-items:center;gap:10px;border-bottom:0;color:#fff;padding:15px 20px}
.btn.extbtn .extchip-dom{color:#ffffffbf}
.btn.extbtn .extlink-go{border-color:#ffffff4d;color:#fff}
.btn.extbtn:hover .extlink-go{background:#fff;border-color:#fff;color:var(--teal)}
.plink-onnavy{color:#e7eeef;border-bottom-color:#ffffff40}
.plink-onnavy:hover{color:var(--teal-bright);border-bottom-color:var(--teal-bright)}
.prep-list{margin:22px 0 0;padding:18px 0 0;border-top:1px solid var(--line);list-style:none;
  display:flex;flex-direction:column;gap:0}
.prep-list li{display:flex;align-items:baseline;gap:14px;padding:12px 0;font-size:13.5px;
  line-height:1.7;color:var(--ink-body);border-bottom:1px solid var(--line)}
.prep-list li:last-child{border-bottom:0}
.prep-no{flex:none;font:600 15px/1 var(--f-display);letter-spacing:-.02em;color:transparent;
  -webkit-text-stroke:1px var(--teal);font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}@media(max-width:1100px){
  .house{grid-template-columns:minmax(140px,.5fr) minmax(0,1fr);}
  .house-go{grid-column:1 / -1}}@media(max-width:760px){
  .house{grid-template-columns:1fr;text-align:start}
  .house-brand{max-width:220px}}
/* Machine page: the way on to what happens after the order. */
.aside-service{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 14px;
  margin-top:16px;padding:16px 18px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-s);text-decoration:none;
  transition:border-color var(--t-feedback) ease,transform var(--t-feedback) ease}
.aside-service:hover{border-color:var(--teal);transform:translateY(-2px)}
.aside-service:focus-visible{outline:3px solid var(--teal-bright);outline-offset:2px}
.aside-service b{font-size:13.5px;font-weight:600;color:var(--ink);letter-spacing:-.015em}
.aside-service span:not(.aside-go){grid-column:1;font-size:12px;line-height:1.6;color:var(--ink-soft)}
.aside-go{grid-row:1 / span 2;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--line-strong);color:var(--teal);font-size:13px}
.aside-service:hover .aside-go{background:var(--teal);border-color:var(--teal);color:#fff}
html[dir=rtl] .aside-go{transform:scaleX(-1)}
/* ============================================================
   SEPT 2026 REVISION — partner plates + case-study media.

   Partner logos: several marks are drawn in white or pale grey
   (Bolidt, STC, half of Fancom) and vanished on the ivory band.
   Every logo now sits on a white plate as a dark monochrome
   silhouette — guaranteed contrast for all of them — and gets its
   brand colours back on hover. .logo-color marks the one badge
   (Dutch Poultry Tech) whose silhouette would be a filled blob:
   it keeps its colours at rest.

   Case study: the navy placeholder block becomes real material —
   the process photograph on top, the register caption on navy
   under it, and the two technical drawings of the studied plant
   as lightboxed thumbnails. The "never built" note stays on the
   image, where it cannot be missed.
   ============================================================ */
.pchip.logo{padding:14px 26px;min-width:190px;justify-content:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-s)}
.pchip.logo .logo-img{height:30px;width:auto;max-width:150px;object-fit:contain;
  filter:grayscale(1) brightness(0);opacity:.72;
  transition:filter var(--t-feedback) ease,opacity var(--t-feedback) ease}
.pchip.logo:hover .logo-img,.pchip.logo.logo-color .logo-img{filter:none;opacity:1}

.pw-logo{height:46px;display:flex;align-items:center;
  filter:grayscale(1) brightness(0);opacity:.72;
  transition:filter .6s ease,opacity .6s ease}
.pw:hover .pw-logo,.pw-logo.logo-color,.pw:hover .pw-logo.logo-color{filter:none;opacity:1}
.pw-logo img{max-height:46px;max-width:170px;object-fit:contain}

.case-media{position:relative;margin:0;display:flex;flex-direction:column;
  background:linear-gradient(160deg,#16323d,#0d222a);min-height:100%}
.case-shot{position:relative;display:block;min-height:0;flex:1 1 300px}
.case-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.8);transition:transform .9s var(--e-travel)}
.case-shot:hover img{transform:scale(1.03)}
/* A technical drawing fills its plate edge to edge and must stay
   whole: paper background, contained, no crop, no zoom. */
.case-shot.is-paper{background:#f2efe7;margin:10px 10px 0;border-radius:var(--r-s);overflow:hidden}
.case-shot.is-paper img{object-fit:contain;padding:10px;filter:none}
.case-shot.is-paper:hover img{transform:none}
.case-shot .photo-expand{position:absolute;top:14px;inset-inline-end:14px}
.case-shot:focus-visible{outline:3px solid var(--teal-bright);outline-offset:-3px}
.case-media figcaption{position:relative;padding:24px clamp(22px,2.4vw,34px) 0}
.case-media .flag{font:10px var(--f-mono);letter-spacing:.1em;color:var(--teal-bright)}
.case-media h3{margin-top:12px;font-size:clamp(21px,2vw,27px);font-weight:600;
  letter-spacing:-.025em;line-height:1.25;color:#fff;text-wrap:pretty}
.case-note{display:block;margin-top:12px;font:11px/1.7 var(--f-mono);color:#a9bcc4}
.case-thumbs{display:grid;grid-template-columns:1fr 1fr;gap:10px;
  padding:18px clamp(22px,2.4vw,34px) clamp(22px,2.4vw,34px)}
.case-thumb{position:relative;display:block;border-radius:var(--r-s);overflow:hidden;
  border:1px solid #ffffff24;transition:border-color var(--t-feedback) ease,transform var(--t-feedback) ease}
.case-thumb:hover{border-color:var(--teal-bright);transform:translateY(-2px)}
.case-thumb:focus-visible{outline:3px solid var(--teal-bright);outline-offset:2px}
.case-thumb img{display:block;width:100%;aspect-ratio:16/10;height:auto;object-fit:cover;background:#f2efe7}
.case-thumb.is-paper img{object-fit:contain;padding:6px}@media(max-width:760px){
  .case-shot{flex-basis:0;min-height:230px}
  .case-media figcaption{padding-top:20px}
  .case-thumbs{padding-bottom:20px}}

/* ============================================================
   DOMAIN CARDS (conseil-negoce) — the mandate's index sheet.
   Six cards in the same family as the home roof cards: white
   plate, hairline, outlined copper numeral, copper rule that
   draws along the bottom on hover. Replaces the two-column
   text index on this page only.
   ============================================================ */
.dgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.dcell{position:relative;display:flex;flex-direction:column;min-width:0;overflow:hidden;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);
  padding:clamp(22px,2.4vw,32px);box-shadow:var(--sh-sm);
  transition:transform var(--t-feedback) ease,box-shadow var(--t-feedback) ease,border-color var(--t-feedback) ease}
.dcell:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:var(--line-strong)}
.dcell-no{font:600 clamp(28px,2.6vw,38px)/1 var(--f-display);letter-spacing:-.04em;
  color:transparent;-webkit-text-stroke:1px var(--line-strong);
  font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate;
  transition:-webkit-text-stroke-color var(--t-feedback) ease}
.dcell:hover .dcell-no{-webkit-text-stroke-color:var(--teal)}
.dcell-body h3{margin-top:16px;font-size:clamp(17px,1.5vw,20px);font-weight:600;
  letter-spacing:-.025em;line-height:1.3;color:var(--ink);text-wrap:pretty}
.dcell-body p{margin-top:10px;font-size:13px;line-height:1.8;color:var(--ink-soft);overflow-wrap:break-word}
.dcell-rule{position:absolute;bottom:0;inset-inline-start:0;height:2px;width:0;background:var(--teal);
  transition:width .6s var(--e-travel)}
.dcell:hover .dcell-rule{width:100%}
.dgrid.dgrid-2{grid-template-columns:repeat(2,minmax(0,1fr))}@media(max-width:1100px){.dgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:640px){.dgrid{grid-template-columns:1fr;gap:12px}}@media(prefers-reduced-motion:reduce){.dcell,.dcell-rule,.dcell-no{transition:none}}
/* ============================================================
   FAMILY TILES (machines-pss) — the catalogue's front door.
   One tile per machine family: the family's lead machine on a
   navy plate, the localised family name and its machine count.
   The last tile opens the flat catalogue (tabs + search). The
   single-family and ?cat=all views reuse the existing deck.
   ============================================================ */
.catgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.ccat{position:relative;display:flex;flex-direction:column;min-width:0;overflow:hidden;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);
  box-shadow:var(--sh-sm);text-decoration:none;color:inherit;
  transition:transform var(--t-feedback) ease,box-shadow var(--t-feedback) ease,border-color var(--t-feedback) ease}
.ccat:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:var(--line-strong)}
.ccat:focus-visible{outline:3px solid var(--teal-bright);outline-offset:2px}
.ccat-plate{position:relative;display:block;height:clamp(140px,12vw,180px);
  background:linear-gradient(160deg,#16323d,#0d222a)}
.ccat-plate::after{content:"";position:absolute;inset:0;
  background:radial-gradient(58% 54% at 50% 44%,#7fb4c422,transparent 72%)}
.ccat-plate img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  padding:16px 14px 20px;transition:transform .9s var(--e-travel)}
.ccat:hover .ccat-plate img{transform:scale(1.05)}
.ccat-body{display:flex;flex-direction:column;gap:5px;min-width:0;
  padding:16px 52px 18px clamp(16px,1.8vw,22px)}
.ccat-name{font-size:clamp(15.5px,1.35vw,18px);font-weight:600;letter-spacing:-.02em;
  line-height:1.3;color:var(--ink);text-wrap:pretty;transition:color var(--t-feedback) ease}
.ccat:hover .ccat-name{color:var(--teal-ink)}
.ccat-n{font:10px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.ccat-go{position:absolute;bottom:16px;inset-inline-end:16px;width:34px;height:34px;
  display:grid;place-items:center;border:1px solid var(--line-strong);border-radius:50%;
  color:var(--teal-ink);font-size:14px;
  transition:background var(--t-feedback) ease,border-color var(--t-feedback) ease,color var(--t-feedback) ease}
.ccat:hover .ccat-go{background:var(--teal);border-color:var(--teal);color:#fff}
html[dir=rtl] .ccat-go{transform:scaleX(-1)}
/* The "all machines" tile: no plate, navy card, same body. */
.ccat-all{justify-content:center;background:var(--navy);border-color:var(--navy);min-height:120px}
.ccat-all .ccat-name{color:#fff}
.ccat-all:hover .ccat-name{color:var(--teal-bright)}
.ccat-all .ccat-n{color:#93aeb6}
.ccat-all .ccat-go{border-color:#ffffff33;color:#fff}
.cat-back{margin:-10px 0 22px}
.cat-back .plink{font-size:12px}
@media(max-width:1100px){.catgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.catgrid{grid-template-columns:1fr;gap:12px}.ccat-plate{height:clamp(130px,34vw,170px)}}
@media(prefers-reduced-motion:reduce){.ccat,.ccat-plate img,.ccat-go,.ccat-name{transition:none}}

/* ============================================================
   SEPT 2026 — MOTION LAYER.

   More life, one grammar. Everything here obeys the three rules
   the site already lives by: gated on .js (a browser without
   JavaScript sees finished pages, never a hidden one), killed
   globally by prefers-reduced-motion, and one behaviour per
   component. The scroll reveal stays the only scroll system —
   these are entrances, draws and micro-feedback layered on it.
   ============================================================ */

/* ---- shared entrance ---- */
@keyframes riseIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes ghostIn{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}

/* ---- hero entrances (home) ---- */
.js .editorial-hero .hero-copy > *{animation:riseIn .7s var(--e-travel) both}
.js .editorial-hero .hero-copy > *:nth-child(1){animation-delay:.05s}
.js .editorial-hero .hero-copy > *:nth-child(2){animation-delay:.14s}
.js .editorial-hero .hero-copy > *:nth-child(3){animation-delay:.23s}
.js .editorial-hero .hero-copy > *:nth-child(4){animation-delay:.32s}
.js .editorial-hero .hero-copy > *:nth-child(5){animation-delay:.41s}
.js .editorial-hero .hero-foot{animation:riseIn .7s var(--e-travel) both .55s}
/* the photograph settles: a slow, one-off zoom-out. Animated with
   the standalone `scale` property so the RTL scaleX(-1) transform
   is untouched; browsers without `scale` simply skip it. */
@keyframes heroSettle{from{scale:1.06}to{scale:1}}
.js .hero-photo{animation:heroSettle 6s var(--e-travel) both}

/* ---- page-hero entrances (every phero) ---- */
.js .phero .phero-grid > div:first-child > *{animation:riseIn .65s var(--e-travel) both}
.js .phero .phero-grid > div:first-child > *:nth-child(1){animation-delay:.04s}
.js .phero .phero-grid > div:first-child > *:nth-child(2){animation-delay:.11s}
.js .phero .phero-grid > div:first-child > *:nth-child(3){animation-delay:.18s}
.js .phero .phero-grid > div:first-child > *:nth-child(4){animation-delay:.25s}
.js .phero .phero-grid > div:first-child > *:nth-child(5){animation-delay:.32s}
.js .phero .phero-grid > div:first-child > *:nth-child(6){animation-delay:.39s}
.js .phero .phero-grid > div:first-child > *:nth-child(7){animation-delay:.46s}
.js .phero .phero-plate{animation:riseIn .8s var(--e-travel) both .25s}
.js .phero-ghost{animation:ghostIn 1.1s var(--e-travel) both .2s;will-change:transform}
.js .phero .phero-foot{animation:riseIn .7s var(--e-travel) both .5s}

/* ---- the roof draws itself (home divisions) ---- */
@supports selector(:has(a)) {
  .js .roof::before{transform:scaleX(0);transform-origin:left center;
    transition:transform 1.1s var(--e-draw) .1s}
  html[dir=rtl] .js .roof::before{transform-origin:right center}
  .js .roof:has(.roof-card.in)::before{transform:scaleX(1)}
  .js .roof-node{scale:0;transition:scale .45s var(--e-travel)}
  .js .roof-card.in .roof-node{scale:1;transition-delay:calc(.55s + var(--i,0) * .18s)}
}

/* ---- ledger: the little rule draws in with its figure ---- */
.js .lg[data-anim] .lg-rule{width:0;transition:width .8s var(--e-draw) .35s,background var(--t-feedback) ease}
.js .lg[data-anim].in .lg-rule{width:26px}
.js .lg[data-anim].in:hover .lg-rule{width:100%}
@media(max-width:760px){.js .lg[data-anim].in .lg-rule{width:20px}}

/* ---- case study: the drawing wipes open, thumbs follow ---- */
.js .case .case-shot{clip-path:inset(0 100% 0 0);
  transition:clip-path 1s var(--e-draw) .15s}
html[dir=rtl] .js .case .case-shot{clip-path:inset(0 0 0 100%)}
.js .case:not(.pending) .case-shot{clip-path:inset(0 0 0 0)}
.js .case .case-thumb{opacity:0;transform:translateY(14px);
  transition:opacity .6s var(--e-travel),transform .6s var(--e-travel),border-color var(--t-feedback) ease}
.js .case .case-thumb:nth-child(2){transition-delay:.5s,.5s,0s}
.js .case .case-thumb:nth-child(1){transition-delay:.4s,.4s,0s}
.js .case:not(.pending) .case-thumb{opacity:1;transform:none}

/* ---- machine nameplate: figures take their places ---- */
.js .nameplate-lg[data-anim] > div{opacity:0;transform:translateY(14px);
  transition:opacity .55s var(--e-travel),transform .55s var(--e-travel);
  transition-delay:calc(var(--i,0) * 90ms)}
.js .nameplate-lg[data-anim].in > div{opacity:1;transform:none}

/* ---- micro-feedback: every arrow leans into its click ---- */
.btn svg,.plink svg,.roof-go svg{transition:transform .3s var(--e-travel)}
.btn:hover svg,.plink:hover svg{transform:translateX(3px)}
html[dir=rtl] .btn:hover svg,html[dir=rtl] .plink:hover svg{transform:translateX(-3px)}
html[dir=rtl] .roof-go svg,html[dir=rtl] .ccat-go{transition:transform .3s var(--e-travel)}
.info-faq summary span{transition:transform .35s var(--e-travel)}
.ccat-go,.prow-go{transition:background var(--t-feedback) ease,border-color var(--t-feedback) ease,color var(--t-feedback) ease,transform .3s var(--e-travel)}
.ccat:hover .ccat-go{transform:translateX(3px)}
html[dir=rtl] .ccat:hover .ccat-go{transform:scaleX(-1) translateX(3px)}

/* ---- safety nets ---- */
html:not(.js) .case .case-shot{clip-path:none}
@media(prefers-reduced-motion:reduce){
  .js .editorial-hero .hero-copy > *,.js .editorial-hero .hero-foot,.js .hero-photo,
  .js .phero .phero-grid > div:first-child > *,.js .phero .phero-plate,.js .phero-ghost,
  .js .phero .phero-foot{animation:none}
  .js .roof::before{transform:scaleX(1);transition:none}
  .js .roof-node{scale:1;transition:none}
  .js .lg[data-anim] .lg-rule{width:26px;transition:none}
  .js .case .case-shot{clip-path:none;transition:none}
  .js .case .case-thumb{opacity:1;transform:none;transition:none}
  .js .nameplate-lg[data-anim] > div{opacity:1;transform:none;transition:none}
}