/* Nile Wool: THE CLOTH ROOM. Hajjo 1991 / Group language: Cinzel capitals, EB Garamond text, Jost labels,
   warm limestone paper, espresso, Nile navy. Minimal: few words, big pictures, ruled lists. */
:root{
  --lime:#F0EEE9; --lime-2:#E4E3E0; --paper:#F7F6F2;
  --esp:#18202E; --esp-2:#3C4A63; --hole:#0F1520; --wood:#2B3547; --deep:#121824;
  --clay:#5F7190; --navy:#1F2633; --navy-soft:#3C4A63;
  --rule:rgba(24,32,46,.16); --rule-2:rgba(24,32,46,.32);
  --on-dark:#F2F0EB; --on-dark-dim:rgba(242,240,235,.74);
  --f-cap:'Newsreader',Georgia,'Times New Roman',serif;
  --f-mark:'Cinzel',Georgia,'Times New Roman',serif;
  --f-text:'Newsreader',Georgia,'Times New Roman',serif;
  --f-label:'Jost',Helvetica,Arial,sans-serif;
  --gut:clamp(20px,4vw,56px);
  --max:1360px;
  --head-h:88px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--lime);color:var(--esp);font:400 18px/1.6 var(--f-text);-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.skip{position:absolute;inset-inline-start:16px;top:-200px;background:var(--esp);color:var(--on-dark);padding:10px 16px;z-index:100}
.skip:focus{inset-inline-start:16px;top:16px}
.label{font:400 12px/1.4 var(--f-label);letter-spacing:.2em;text-transform:uppercase}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
h1,h2,h3{font-family:var(--f-cap);font-weight:300;letter-spacing:-.01em;margin:0;text-wrap:balance}

/* header: centred NW over the wordmark, nav split either side */
.head{position:fixed;top:0;left:0;right:0;z-index:50;color:var(--on-dark);background:var(--navy);border-bottom:1px solid rgba(242,240,235,.08);
  transition:background .35s,color .35s,border-color .35s,transform .35s}
.head-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:var(--head-h);max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
.head nav{display:flex;gap:30px}
.head nav.r{justify-content:flex-end}
.head nav a{text-decoration:none;padding-block:6px;border-bottom:1px solid transparent}
.head nav a:hover,.head nav a[aria-current="page"]{border-bottom-color:currentColor}
.brand{display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none}
.brand img{width:46px;height:auto}
.brand b{font:400 12px/1 var(--f-mark);letter-spacing:.42em;text-indent:.42em}
.menu-btn{display:none}
/* over the film, before the first scroll */
.head.over{background:transparent;color:var(--on-dark);border-bottom-color:transparent}
.head .brand img{filter:brightness(0) invert(1)}
body.inner{padding-top:var(--head-h)}

/* hero film */
.hero{position:relative;height:100svh;min-height:560px;max-height:1100px;background:var(--navy);color:var(--on-dark);overflow:hidden}
.hero video,.hero .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,14,22,.62),rgba(10,14,22,0) 55%),linear-gradient(to bottom,rgba(10,14,22,.4),rgba(10,14,22,0) 22%)}
.hero-text{position:absolute;left:0;right:0;bottom:0;z-index:2;padding-bottom:clamp(40px,7vh,80px)}
.hero h1{font-size:clamp(40px,5.4vw,78px);line-height:1.02;max-width:17ch}
.hero p{margin:16px 0 0;font-style:italic;font-size:clamp(19px,1.7vw,24px);color:var(--on-dark-dim)}
.film-toggle{position:absolute;inset-inline-end:var(--gut);bottom:clamp(40px,7vh,80px);z-index:3;background:none;border:1px solid rgba(241,236,227,.5);color:var(--on-dark);
  font:400 11px/1 var(--f-label);letter-spacing:.2em;text-transform:uppercase;padding:10px 14px;cursor:pointer}
.film-toggle:hover{border-color:var(--on-dark)}

/* inner page title */
.ptitle{padding-block:clamp(56px,9vw,120px) clamp(36px,5vw,64px)}
.ptitle .label{color:var(--clay);display:block;margin-bottom:18px}
.ptitle h1{font-size:clamp(34px,4.4vw,60px);line-height:1.08}
.ptitle p{margin:16px 0 0;font-style:italic;font-size:clamp(20px,1.8vw,26px);color:var(--navy-soft);max-width:40ch}

/* sections */
.sec{padding-block:clamp(64px,9vw,128px)}
.sec + .sec{padding-top:0}
.lede{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(20px,5vw,72px)}
.lede .label{color:var(--clay);padding-top:12px}
.lede p{margin:0;font-size:clamp(24px,2.35vw,34px);line-height:1.35;max-width:34ch}
.lede p i{color:var(--navy)}
.h2{font-size:clamp(24px,2.4vw,34px);margin-bottom:28px}

/* photo with list: the cabinet on home */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:center}
.split figure{margin:0}
.split img{width:100%;aspect-ratio:4/5;object-fit:cover}
.rlist{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule-2)}
.rlist li{border-bottom:1px solid var(--rule)}
.rlist a,.rlist .row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:baseline;padding:18px 0;text-decoration:none}
.rlist .n{font:300 clamp(22px,2vw,28px)/1.2 var(--f-cap);letter-spacing:-.01em}
.rlist .s{font-style:italic;color:var(--navy-soft)}
.rlist a:hover .n{color:var(--navy)}
.more{display:inline-block;margin-top:28px;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:3px}
.more:hover{color:var(--navy)}

/* mills row */
.mills-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--rule-2)}
.mills-row a{padding-block:22px;padding-inline:0 20px;text-decoration:none;border-bottom:1px solid var(--rule)}
.mills-row b{display:block;font:300 19px/1.25 var(--f-cap);letter-spacing:-.01em}
.mills-row span{display:block;font-style:italic;color:var(--navy-soft);margin-top:4px}
.mills-row a:hover b{color:var(--navy)}

/* wide photo band */
.band{position:relative}
.band img{width:100%;height:clamp(320px,52vw,720px);object-fit:cover}
.band figcaption{margin-top:14px;font-style:italic;color:var(--esp-2)}

/* closing contact strip */
.strip{background:var(--navy);color:var(--on-dark)}
.strip .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px;padding-block:clamp(48px,6vw,80px)}
.strip h2{font-size:clamp(24px,2.6vw,36px)}
.strip p{margin:8px 0 0;font-style:italic;color:var(--on-dark-dim)}
.btns{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-block;font:400 12px/1 var(--f-label);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;padding:16px 24px;border:1px solid currentColor}
.btn.solid{background:var(--esp);color:var(--lime);border-color:var(--esp)}
.strip .btn.solid{background:var(--on-dark);color:var(--navy);border-color:var(--on-dark)}
.btn:hover{opacity:.85}

/* the cabinet */
.cab{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start}
.switch{display:inline-flex;flex-wrap:wrap;border:1px solid var(--esp);margin-bottom:24px}
.switch button{all:unset;cursor:pointer;font:400 12px/1 var(--f-label);letter-spacing:.18em;text-transform:uppercase;padding:13px 18px}
.switch button[aria-pressed="true"]{background:var(--esp);color:var(--lime)}
.switch button:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.wall{background:var(--wood);padding:14px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.hole{all:unset;box-sizing:border-box;cursor:pointer;background:var(--hole);aspect-ratio:1/.92;padding:clamp(10px,1.2vw,16px);display:flex;flex-direction:column;gap:10px;
  box-shadow:inset 0 12px 16px rgba(0,0,0,.45);transition:opacity .25s}
.fold{flex:1;background:var(--stack);box-shadow:0 2px 0 rgba(0,0,0,.35);transition:transform .3s}
.hole span{font:400 12px/1 var(--f-label);letter-spacing:.2em;text-transform:uppercase;color:#E6E9EF}
.hole[aria-pressed="true"]{outline:2px solid #AFC0D8;outline-offset:-2px}
.hole[aria-pressed="true"] .fold{transform:translateY(-6px) scale(1.03)}
.hole.dim{opacity:.3}
.hole:focus-visible{outline:2px solid #E6E9EF;outline-offset:-2px}
.drawer{border-top:3px double var(--esp);padding-top:24px;min-height:420px}
.drawer h2{font-size:clamp(30px,3vw,42px)}
.drawer .sub{font-style:italic;font-size:22px;color:var(--navy-soft);margin:4px 0 18px}
.drawer p{margin:0 0 22px;max-width:44ch}
.drawer dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 24px;margin:0}
.drawer dt{font:400 11px/1.4 var(--f-label);letter-spacing:.2em;text-transform:uppercase;color:var(--clay);padding-top:6px}
.drawer dd{margin:0;border-bottom:1px solid var(--rule);padding-bottom:8px}
.note{font-size:16px;font-style:italic;color:var(--esp-2);margin-top:18px}

/* mills page */
.mills{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,56px) clamp(20px,3vw,40px)}
.mill{margin:0;scroll-margin-top:calc(var(--head-h) + 24px)}
.mill img{width:100%;aspect-ratio:1;object-fit:cover;background:var(--lime-2)}
.mill h2{font-size:24px;margin-top:20px}
.mill .where{font-style:italic;color:var(--navy-soft);margin-top:4px}
.mill .tie{display:block;margin-top:14px;color:var(--clay)}
.mill p{margin:10px 0 0;font-size:18px}
.mill.ask{border:1px solid var(--rule-2);padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;justify-content:flex-end;aspect-ratio:auto;min-height:280px}

/* services */
.ways{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule-2)}
.ways li{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.3fr);gap:20px;align-items:baseline;padding:24px 0;border-bottom:1px solid var(--rule)}
.ways .n{font:300 clamp(22px,2vw,28px)/1.2 var(--f-cap);letter-spacing:-.01em}
.ways .q{color:var(--navy);font-size:21px}
.ways .d,.ways .w{font-style:italic;color:var(--esp-2)}
.ways .d .label,.ways .w .label{display:block;font-style:normal;color:var(--clay);margin-bottom:4px;font-size:11px}
.pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:start}
.pair img{width:100%;aspect-ratio:3/4;object-fit:cover}
.pair h3{font-size:22px;margin-bottom:10px}
.pair p{margin:0}

/* house */
.road{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--rule-2)}
.road li{padding-block:22px 0;padding-inline:0 22px}
.road .yr{font:300 22px/1.2 var(--f-cap);color:var(--navy);letter-spacing:-.01em}
.road p{margin:8px 0 0;font-size:18px;line-height:1.4}
.road.steps{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:28px}
.road.steps li{padding-inline:0 40px}
.road.steps p{font-size:20px}
.steps + .note{margin-top:28px}
.quote{font-size:clamp(26px,2.8vw,40px);line-height:1.3;font-style:italic;max-width:30ch;margin:0}
.clients{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(20px,5vw,72px)}
.clients .label{color:var(--clay);padding-top:6px}
.clients dl{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px 32px}
.clients dt{font:300 18px/1.4 var(--f-cap);letter-spacing:0}
.clients dd{margin:0;font-style:italic}

/* contact */
.offices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,56px);border-top:1px solid var(--rule-2);padding-top:28px}
.offices h2{font-size:22px}
.offices .label{color:var(--clay);display:block;margin-bottom:10px}
.offices address{font-style:normal;margin-top:10px}
.offices a{text-decoration:none;border-bottom:1px solid var(--rule-2)}
.direct{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.direct div{border-top:1px solid var(--rule-2);padding-top:16px}
.direct .label{color:var(--clay);display:block;margin-bottom:8px}
.direct a{text-decoration:none;font-size:21px}
.direct a:hover{color:var(--navy)}
.direct .ppl{font-size:17px;line-height:1.7}
.direct .ppl a{font-size:inherit}

/* footer */
.foot{background:var(--navy);color:#E6E9EF;border-top:1px solid rgba(242,240,235,.12)}
.foot-in{max-width:var(--max);margin:0 auto;padding:clamp(48px,6vw,80px) var(--gut) 32px;display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));gap:32px}
.foot .brand{align-items:flex-start}
.foot .brand img{filter:brightness(0) invert(.9);width:52px}
.foot .brand b{text-indent:0}
.foot p{margin:14px 0 0;color:rgba(230,233,239,.72);font-size:17px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:17px}
.foot a{text-decoration:none;color:rgba(230,233,239,.85)}
.foot a:hover{color:#fff}
.foot .label{color:rgba(230,233,239,.55);margin-bottom:14px;display:block}
.foot-base{max-width:var(--max);margin:0 auto;padding:18px var(--gut) 28px;border-top:1px solid rgba(230,233,239,.14);font:400 11px/1.6 var(--f-label);letter-spacing:.16em;text-transform:uppercase;color:rgba(230,233,239,.5)}

/* reveal: visible at rest, a small lift once the page is scripted */
.js .rv{opacity:0;transform:translateY(14px);transition:opacity .8s,transform .8s}
.js .rv.in{opacity:1;transform:none}

/* phone */
@media (max-width:900px){
  :root{--head-h:68px}
  .head-in{grid-template-columns:auto 1fr auto}
  .head nav{display:none}
  .brand{grid-column:2;flex-direction:row;justify-self:center;gap:10px}
  .brand img{width:34px}
  .menu-btn{display:block;grid-column:3;justify-self:end;background:none;border:0;color:inherit;font:400 12px/1 var(--f-label);letter-spacing:.2em;text-transform:uppercase;padding:12px 0;cursor:pointer}
  .head-in::before{content:"";grid-column:1}
  .lede,.clients{grid-template-columns:minmax(0,1fr);gap:14px}
  .lede .label{padding-top:0}
  .split,.cab{grid-template-columns:minmax(0,1fr)}
  .mills-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mills{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ways li{grid-template-columns:minmax(0,1fr) minmax(0,1fr);row-gap:10px}
  .pair{grid-template-columns:minmax(0,1fr)}
  .road{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .road li{padding-bottom:18px}
  .offices,.direct{grid-template-columns:minmax(0,1fr)}
  .foot-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .foot-in > div:first-child{grid-column:1 / -1}
  .drawer{min-height:0}
  .film-toggle{bottom:auto;top:calc(var(--head-h) + 12px)}
}
@media (max-width:560px){
  body{font-size:18px}
  .mills{grid-template-columns:minmax(0,1fr)}
  .wall{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:10px}
  .ways li{grid-template-columns:minmax(0,1fr)}
  .road,.road.steps{grid-template-columns:minmax(0,1fr)}
  .clients dl{grid-template-columns:minmax(0,1fr);gap:2px}
  .clients dd{margin-bottom:14px}
  .btn{flex:1;text-align:center}
}
/* phone menu */
.mnav{position:fixed;inset:0;z-index:60;background:var(--navy);color:var(--on-dark);display:flex;flex-direction:column;padding:calc(var(--head-h) + 24px) var(--gut) 32px}
.mnav[hidden]{display:none}
.mnav a{font:300 30px/1.2 var(--f-cap);letter-spacing:-.01em;text-decoration:none;padding:14px 0;border-bottom:1px solid rgba(242,240,235,.14)}
.mnav .close{position:absolute;top:0;inset-inline-end:var(--gut);height:var(--head-h);background:none;border:0;font:400 12px/1 var(--f-label);letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark);cursor:pointer}
.mnav .meta{margin-top:auto;font-style:italic;color:var(--on-dark-dim)}
body.locked{overflow:hidden}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}.js .rv{opacity:1;transform:none}}

/* navy quote band (house) */
.qband{background:var(--navy);color:var(--on-dark)}
.qband .wrap{padding-block:clamp(72px,10vw,140px)}
.qband .quote{color:var(--on-dark);margin-inline:auto;text-align:center}

/* ---------- Arabic: right to left, Amiri for headings and text, IBM Plex Sans Arabic for labels ---------- */
[dir="rtl"]{--f-cap:'Amiri',Georgia,serif;--f-text:'Amiri',Georgia,serif;--f-label:'IBM Plex Sans Arabic',Tahoma,Arial,sans-serif}
[dir="rtl"] body{line-height:1.85}
[dir="rtl"] *{letter-spacing:0!important;font-style:normal!important}
[dir="rtl"] .label,[dir="rtl"] .btn,[dir="rtl"] .switch button,[dir="rtl"] .hole span,[dir="rtl"] .film-toggle,[dir="rtl"] .menu-btn,[dir="rtl"] .mnav .close{text-transform:none;font-size:14px}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3{font-weight:700;line-height:1.35}
[dir="rtl"] .hero h1{line-height:1.3}
[dir="rtl"] .lede p,[dir="rtl"] .quote{line-height:1.6}
[dir="rtl"] .brand b{font-family:var(--f-mark);letter-spacing:.42em!important}
[dir="rtl"] .brand{direction:ltr}
[dir="rtl"] .rlist .s,[dir="rtl"] .mills-row span,[dir="rtl"] .mill .where,[dir="rtl"] .ptitle p,[dir="rtl"] .drawer .sub,[dir="rtl"] .hero p{font-family:var(--f-label);font-size:.9em}
[dir="rtl"] .clients dd{direction:ltr;text-align:right}
[dir="rtl"] .head nav{gap:26px}
[dir="rtl"] .head nav a{font-size:15px}
[dir="rtl"] .foot .brand{align-items:flex-end}

/* services, 1 Oct 2026: four ways to buy, the brief band, beyond the cloth */
a[href^="tel"]{white-space:nowrap}
.buy{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--rule-2)}
.way{padding:clamp(28px,3.4vw,48px) clamp(20px,3vw,48px) clamp(32px,3.6vw,52px) 0;border-bottom:1px solid var(--rule)}
.way:nth-child(even){padding-inline:clamp(20px,3vw,48px) 0;border-inline-start:1px solid var(--rule)}
.way .big{font:300 clamp(72px,8.6vw,132px)/.9 var(--f-cap);letter-spacing:-.03em;color:var(--navy)}
.way .big small{font-size:.34em;letter-spacing:0;margin-inline-start:.14em;color:var(--clay)}
.way h2{font-size:clamp(26px,2.4vw,34px);margin-top:22px}
.way p{margin:10px 0 0;max-width:40ch}
.way dl{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:22px 0 0;font-size:16px}
.way dt{font:400 11px/1.9 var(--f-label);letter-spacing:.2em;text-transform:uppercase;color:var(--clay)}
.way dd{margin:0;font-style:italic}
.brief{background:var(--navy);color:var(--on-dark);padding-block:clamp(64px,8vw,120px)}
.brief .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:center}
.brief figure{margin:0}
.brief img{width:100%;height:auto;display:block}
.brief .label{color:var(--on-dark-dim)}
.brief h2{font-size:clamp(30px,3.2vw,46px);line-height:1.1;margin:14px 0 30px;max-width:18ch}
.brief ol{list-style:none;margin:0;padding:0;border-top:1px solid rgba(242,240,235,.2)}
.brief li{display:grid;grid-template-columns:56px 1fr;gap:12px;padding:20px 0;border-bottom:1px solid rgba(242,240,235,.2)}
.brief .no{font:300 34px/1 var(--f-cap);color:var(--on-dark-dim)}
.brief h3{font-size:22px}
.brief li p{margin:6px 0 0;color:var(--on-dark-dim)}
.brief .note{color:var(--on-dark-dim);margin:22px 0 28px}
.brief .btn{color:var(--on-dark)}
.brief .btn:hover{background:var(--on-dark);color:var(--navy)}
.beyond{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,5vw,80px)}
.beyond > div{border-top:1px solid var(--rule-2);padding-top:22px}
.beyond h3{font-size:24px;margin-bottom:10px}
.beyond p{margin:0;max-width:44ch}
@media (max-width:900px){
  .brief .wrap{grid-template-columns:minmax(0,1fr)}
  .brief figure{max-width:420px}
}
@media (max-width:640px){
  .buy,.beyond{grid-template-columns:minmax(0,1fr)}
  .way,.way:nth-child(even){padding-inline:0;border-inline-start:0}
}
[dir="rtl"] .way .big{line-height:1.15}
[dir="rtl"] .way .big .word{font-size:.62em}
[dir="rtl"] .way dl,[dir="rtl"] .way dd{font-family:var(--f-label);font-style:normal}

/* filiera imagery, 1 Oct 2026 (Zegna manner): half-bleed, openers, the fibre to cloth strip, pairs */
.hb{display:grid;grid-template-columns:minmax(0,11fr) minmax(0,9fr);align-items:center;padding-block:clamp(56px,8vw,120px) 0}
.hb figure{margin:0}
.hb img{width:100%;height:auto;display:block;aspect-ratio:4/5;object-fit:cover}
.hb-txt{padding-inline:clamp(32px,6vw,96px) max(var(--gut),calc((100vw - var(--max)) / 2 + var(--gut)))}
.hb-txt .label{display:block;color:var(--clay);margin-bottom:22px}
.hb-txt p{margin:0;font-size:clamp(22px,2.1vw,30px);line-height:1.4;max-width:24ch}
.hb-txt p i{color:var(--navy)}
.opener{margin:0 0 clamp(40px,5vw,72px)}
.opener img{width:100%;height:auto;display:block;aspect-ratio:21/9;object-fit:cover}
.flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,24px)}
.flow img{width:100%;height:auto;display:block;aspect-ratio:1}
.flow .label{display:block;margin-top:14px;color:var(--clay)}
.pair2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.6vw,24px)}
.pair2 figure{margin:0}
.pair2 img{width:100%;height:auto;display:block}
.way > img{width:100%;height:auto;display:block;aspect-ratio:3/2;object-fit:cover;margin-bottom:26px}
.way .big{font-size:clamp(56px,6.4vw,100px)}
@media (max-width:900px){
  .hb{grid-template-columns:minmax(0,1fr)}
  .hb-txt{padding:32px var(--gut) 0}
  .flow{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* house imagery, 1 Oct 2026 */
.qband.qimg{background:linear-gradient(rgba(24,32,46,.72),rgba(24,32,46,.72)),url(img/filiera/lattice-band.jpg) center/cover no-repeat}
.hb-end{padding-block-end:clamp(56px,8vw,120px)}
.hb-txt.clients{display:block}
.hb-txt.clients .label{display:block;margin-bottom:22px}
.hb-txt.clients dl{margin-top:0}

/* ---------- language switch: EN | عربي at the top of every page, phones included ---------- */
.lang{display:inline-flex;align-items:center;border:1px solid rgba(242,240,235,.42);margin-inline-start:6px}
.head nav .lang a{padding:6px 11px;border-bottom:0;font:500 11px/1 var(--f-label);letter-spacing:.14em}
.head nav .lang a:hover{background:rgba(242,240,235,.12)}
.head nav .lang a[aria-current="true"]{background:var(--on-dark);color:var(--navy)}
.lang a[lang="ar"]{font-family:'IBM Plex Sans Arabic',Tahoma,'Geeza Pro',sans-serif!important;letter-spacing:0!important;font-size:13px!important}
@media (max-width:900px){
  .head-in::before{content:none}
  .head nav.l{display:none}
  .head nav.r{display:flex;grid-column:1;grid-row:1;justify-content:flex-start;gap:0}
  .head nav.r > a{display:none}
  .lang{margin-inline-start:0}
}

/* ---------- questions (services): same words as the FAQPage data ---------- */
.faq .wrap{max-width:900px}
.faq details{border-top:1px solid var(--rule)}
.faq details:last-child{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:18px 0;font:400 clamp(19px,1.6vw,22px)/1.35 var(--f-text)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:300 22px/1 var(--f-label);transition:transform .25s;flex:none}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--navy)}
.faq p{margin:0 0 22px;max-width:62ch;color:var(--esp-2)}