:root{
  --hero-h:clamp(420px,58vh,560px);
  --band:clamp(4rem,7vw,7rem);         
  --scrim-1:rgba(11,58,65,.86);        
  --scrim-2:rgba(11,58,65,.38);        
}

.hdr1{position:sticky;top:0;z-index:60;background:var(--white);
  border-block-end:1px solid var(--rule)}
.hdr1 .hdr-in{min-height:var(--hdr)}
.hdr1 .nav{margin-inline:clamp(1rem,2.4vw,2.6rem) auto}
.hdr1 .nav .top{padding:.6rem .275rem;font-size:15px;font-weight:600}
.hdr-a .nav .top{gap:.28rem}
.hdr-a .nav .top svg{inline-size:12px;block-size:12px}
.hdr-a .hdr-act{gap:6px}
html[lang="ar"] .hdr1 .nav .top{font-size:16px}

.hdr-a .item--minor .top,
.hdr-a .item--home .top{font-size:14px;font-weight:500;color:var(--fg-2)}
html[lang="ar"] .hdr-a .item--minor .top,
html[lang="ar"] .hdr-a .item--home .top{font-size:15px}
.hdr-a .item--minor .top:hover,.hdr-a .item--home .top:hover{color:var(--teal)}

.hdr1 .iconbtn{border-color:transparent;color:var(--fg-2)}
.hdr1 .iconbtn:hover{border-color:transparent;color:var(--teal);
  background:color-mix(in srgb,var(--teal) 8%,transparent)}
.hdr1 .iconbtn:focus-visible{border-color:var(--teal)}

.hdr1 .btn-cta{min-height:44px;padding:.55rem .8rem;font-size:14px}
html[lang="ar"] .hdr1 .btn-cta{font-size:15px}

.hdr-a .hdr-in{max-inline-size:none;
  padding-inline:clamp(var(--logo-clear),2.2vw,2.25rem)}
.hdr-a .nav{margin-inline:clamp(.7rem,1.5vw,1.6rem) auto}

.langwrap{position:relative;display:inline-flex}
.lang-menu{position:absolute;inset-block-start:calc(100% + .35rem);inset-inline-end:0;
  z-index:70;margin:0;padding:.3rem;list-style:none;min-inline-size:11rem;
  background:var(--white);border:1px solid var(--rule);
  box-shadow:0 14px 34px -14px rgba(11,58,65,.45)}
.lang-menu[hidden]{display:none}
.lang-menu a{display:flex;align-items:center;gap:.7rem;min-block-size:44px;
  padding:.5rem .7rem;text-decoration:none;color:var(--fg);font-size:15px}
.lang-menu a:hover{background:var(--mineral);color:var(--teal)}
.lang-menu a[aria-current="true"]{color:var(--teal);font-weight:600}
.lm-code{font:700 13px/1 var(--f-latin);letter-spacing:.1em;color:var(--fg-2);
  min-inline-size:2.2em}    
.lang-menu a[aria-current="true"] .lm-code{color:var(--teal)}


.mega-corp{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);
  margin-inline-start:auto;align-items:center}
.mega-corp a{display:inline-flex;align-items:center;min-block-size:24px;
  font-size:14px;color:var(--fg-2);text-decoration:none}
.mega-corp a:hover,.mega-corp a:focus-visible{color:var(--petrol);text-decoration:underline}
html[dir="rtl"] .mega-corp{margin-inline-start:auto}
@media (max-width:900px){
  .mega-corp{margin-inline-start:0;inline-size:100%;
    padding-block-start:var(--s-3);border-block-start:1px solid var(--rule)}
}

.hdr-c .hdr-in{max-inline-size:none;
  padding-inline:clamp(var(--logo-clear),2vw,1.75rem)}
.hdr-c .nav{margin-inline:clamp(.75rem,1.6vw,1.5rem) auto}
.hdr-c .nav .top{padding:.6rem .34rem;font-size:14px;letter-spacing:.005em}
html[lang="ar"] .hdr-c .nav .top{font-size:15px;letter-spacing:0}
.hdr-c .nav{align-self:stretch;align-items:center}
.hdr-c .nav .item{position:relative}
.hdr-c .nav > .item:not([hidden])::after{content:"";position:absolute;inset-inline:.34rem;
  bottom:.15rem;block-size:1px;background:color-mix(in srgb,var(--petrol) 14%,transparent);
  opacity:0;transition:opacity .16s ease}
.hdr-c .nav > .item:hover::after,
.hdr-c .nav > .item:focus-within::after{opacity:1}

.more-panel{position:absolute;inset-block-start:100%;inset-inline-end:0;
  inline-size:min(320px,86vw);background:var(--white);border:1px solid var(--rule);
  border-block-start:0;box-shadow:0 18px 44px -18px rgba(11,58,65,.34);
  padding:var(--s-3);z-index:70}
.more-panel[hidden]{display:none}
.more-panel a{display:block;padding:.7rem .8rem;text-decoration:none;font-size:15px;
  border-radius:2px}
.more-panel a:hover{background:var(--mineral);color:var(--teal)}
.more-panel .sub{list-style:none;margin:0 0 .3rem;padding-inline-start:var(--s-4);
  border-inline-start:1px solid var(--rule)}
.more-panel .sub a{font-size:14px;color:var(--fg-2);padding:.4rem .8rem}

.index-panel{position:fixed;inset:var(--hdr) 0 0;background:var(--white);z-index:58;
  overflow-y:auto;padding-block:var(--s-7) var(--s-8)}
.index-panel[hidden]{display:none}
.index-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-6)}
@media (max-width:900px){ .index-grid{grid-template-columns:1fr} }
.index-card{display:block;text-decoration:none;color:inherit}
.index-card .shot{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--petrol)}
.index-card .shot img{width:100%;height:100%;object-fit:cover;
  transition:transform 600ms var(--out)}
.index-card:hover .shot img{transform:scale(1.04)}
.index-card h3{margin-block:var(--s-4) var(--s-2);font-size:20px}
.index-card ul{list-style:none;margin:0;padding:0;columns:2;column-gap:var(--s-5)}
.index-card li a{display:block;padding:.28rem 0;font-size:14px;color:var(--fg-2);
  text-decoration:none}
.index-card li a:hover{color:var(--teal)}
.index-rest{margin-block-start:var(--s-7);padding-block-start:var(--s-5);
  border-block-start:1px solid var(--rule);display:flex;gap:var(--s-5);flex-wrap:wrap}
.index-rest a{font-weight:600;text-decoration:none;font-size:16px}
.index-rest a:hover{color:var(--teal)}

.hero{position:relative;background:var(--petrol);color:var(--white)}
.hero-stage{position:relative;overflow:hidden;
  block-size:clamp(520px,calc(100svh - var(--hdr) - 2rem),820px)}
.slide{position:absolute;inset:0;opacity:0;visibility:hidden;
  transition:opacity 900ms var(--out),visibility 0s linear 900ms}
.slide[data-on]{opacity:1;visibility:visible;transition-delay:0s,0s}
.slide picture,.slide img,.slide video{position:absolute;inset:0;
  inline-size:100%;block-size:100%}
.slide img,.slide video{object-fit:cover;object-position:var(--focal,50% 50%);
  transform:scale(1.06);transition:transform 9s linear}
.slide[data-on] img,.slide[data-on] video{transform:scale(1)}
video{display:block}

.slide::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(11,58,65,.52) 0%, rgba(11,58,65,.18) 26%,
                    rgba(11,58,65,0) 42%),
    linear-gradient(var(--veil-dir,to top), rgba(11,58,65,.94) 0%,
                    rgba(11,58,65,.86) 26%, rgba(11,58,65,.58) 58%,
                    rgba(11,58,65,.34) 100%)}
.slide[data-anchor="start"]::after{--veil-dir:to bottom}

.hero-in{position:relative;z-index:2;block-size:100%;display:flex}
.hero-grid{inline-size:100%;display:grid;align-content:end;
  padding-block:clamp(2rem,4vh,3.5rem)}
.slide[data-anchor="start"] .hero-grid{align-content:start}
.hero-panel{max-inline-size:min(44rem,64%)}
@media (max-width:820px){ .hero-panel{max-inline-size:100%} }

.hero-num{display:inline-flex;align-items:baseline;gap:.6rem;margin-block-end:var(--s-4);
  align-self:start;padding:.3rem .55rem;border-radius:2px;
  background:rgba(11,58,65,.78);
  font:700 14px/1 var(--f-latin);font-variant-numeric:tabular-nums;color:var(--mint);
  letter-spacing:.08em;direction:ltr;unicode-bidi:isolate}
html[dir="rtl"] .hero-num{align-self:end}
html[dir="rtl"] .hero-num{justify-content:flex-end}
.hero-num .of{color:var(--mineral);font-weight:400}
.hero h1,.hero .d1{font-size:clamp(34px,5.2vw,68px);line-height:1.02;color:var(--white);
  font-family:var(--f-display);font-weight:700;font-stretch:87.5%;letter-spacing:-.018em;
  margin:0;text-wrap:balance;max-inline-size:18ch}
html[lang="ar"] .hero h1,html[lang="ar"] .hero .d1{font-size:clamp(30px,4.4vw,56px);
  line-height:1.32;font-stretch:normal;letter-spacing:0;max-inline-size:22ch}
.hero h1,.hero .d1{min-block-size:2.04em}
html[lang="ar"] .hero h1,html[lang="ar"] .hero .d1{min-block-size:2.64em}
.hero-panel p{margin:var(--s-4) 0 0;font-size:clamp(16px,1.25vw,19px);line-height:1.65;
  color:var(--mineral);max-inline-size:52ch}
html[lang="ar"] .hero-panel p{font-size:clamp(17px,1.3vw,20px);line-height:1.9}
.hero-panel > p.hero-copy{min-block-size:4.95em}
html[lang="ar"] .hero-panel > p.hero-copy{min-block-size:5.70em}
@media (max-width:440px){
  .hero-panel > p.hero-copy{min-block-size:6.60em}
}
@media (max-width:400px){
  html[lang="ar"] .hero-panel > p.hero-copy{min-block-size:7.60em}
}
.hero-cta{display:flex;gap:var(--s-3);flex-wrap:wrap;margin-block-start:var(--s-6)}
.btn-ghost{background:transparent;color:var(--white);border-color:rgba(255,255,255,.55)}
.btn-ghost:hover{background:var(--white);color:var(--petrol);border-color:var(--white)}

.hero-foot{background:var(--petrol);border-block-start:1px solid
  color-mix(in srgb,var(--mint) 22%,transparent)}
.hero-foot-in{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s-5) var(--s-7);flex-wrap:wrap;padding-block:var(--s-4)}
.hero-slogan{margin:0;color:var(--white);font-size:clamp(20px,1.8vw,26px);
  line-height:1.3;font-family:var(--f-display);font-weight:600;font-stretch:87.5%;
  letter-spacing:.005em;text-wrap:balance}
html[lang="ar"] .hero-slogan{font-family:var(--f-kufi);font-weight:600;
  font-stretch:normal;letter-spacing:0;line-height:1.7;
  font-size:clamp(20px,1.8vw,26px)}
.hero-ui{display:flex;align-items:center;gap:var(--s-4)}
.dots{display:flex;gap:var(--s-1);margin:0;padding:0;list-style:none}
.dot{min-inline-size:44px;block-size:44px;display:grid;place-items:center;
  background:none;border:0;cursor:pointer;padding:0 .4rem;
  font:600 13px/1 var(--f-latin);font-variant-numeric:tabular-nums;
  color:var(--aluminium);letter-spacing:.06em}           
.dot::after{content:"";position:absolute}
.dot .dot-n{position:relative;padding-block-end:.5rem}
.dot .dot-n::after{content:"";position:absolute;inset-inline:0;inset-block-end:0;
  block-size:2px;background:var(--slate)}
.dot[aria-current="true"]{color:var(--white)}
.dot[aria-current="true"] .dot-n::after{background:var(--mint);block-size:3px}
.hero-arrows{display:flex;gap:var(--s-2)}
.arw{inline-size:44px;block-size:44px;display:grid;place-items:center;cursor:pointer;
  background:transparent;border:1px solid rgba(255,255,255,.4);color:var(--white)}
.arw:hover{background:var(--white);color:var(--petrol);border-color:var(--white)}
html[dir="rtl"] .arw svg{transform:scaleX(-1)}
.hero-prog{position:absolute;inset-inline:0;inset-block-end:0;block-size:3px;
  background:rgba(255,255,255,.2);z-index:3}
.hero-prog i{display:block;block-size:100%;inline-size:0;background:var(--mint)}
@media (max-width:700px){
  .hero-foot-in{flex-direction:column;align-items:flex-start;gap:var(--s-4)}
  .hero-ui{inline-size:100%;justify-content:space-between}

  .hero-stage{block-size:clamp(460px,72svh,600px)}
  .slide img,.slide video{object-position:var(--focal-m,var(--focal,50% 50%))}
}
@media (max-width:1200px){
  .hero.ui-float .hero-ui{
    position:absolute;z-index:4;
    inset-inline:var(--gutter);
    inset-block-start:calc(var(--stage-h,460px) - var(--ui-h,44px) - var(--s-4));
    inline-size:auto;justify-content:space-between}
  .hero.ui-float .hero-grid{
    padding-block-end:calc(var(--ui-h,44px) + var(--s-4) * 2)}
}
@media (prefers-reduced-motion:reduce){
  .slide,.slide img{transition:none}
  .hero-prog{display:none}
}

.sec{padding-block:var(--band)}
.sec--sunk{background:var(--bg-sunk)}
.sec--dark{background:var(--petrol);color:var(--white)}
.sec--dark h2{color:var(--white)}
.sec--dark .lede{color:var(--aluminium)}
.sec-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:var(--s-5) var(--s-7);align-items:end;
  margin-block-end:var(--s-7);padding-block-end:var(--s-5);
  border-block-end:1px solid var(--rule)}
.sec-head--solo{grid-template-columns:minmax(0,1fr)}
.sec-head-l{min-inline-size:0}
.sec-head-r{min-inline-size:0}
.sec-head h2{margin:0;font-size:clamp(28px,3.4vw,46px);line-height:1.08;
  letter-spacing:-0.015em;text-wrap:balance}
html[lang="ar"] .sec-head h2{font-size:clamp(26px,3vw,40px);line-height:1.4;
  letter-spacing:0}
.sec-head .lede{margin:0;max-inline-size:44ch}

.sec-ix{display:inline-flex;align-items:baseline;gap:.4em;
  font:600 13px/1 var(--f-latin);letter-spacing:.14em;
  font-variant-numeric:tabular-nums;color:var(--teal);
  direction:ltr;unicode-bidi:isolate}
html[lang="ar"] .sec-ix{font-family:var(--f-latin)}
.sec-ix-of{color:var(--fg-3,var(--fg-2));letter-spacing:.1em;opacity:.7}
.sec--dark .sec-ix,
#produce .sec-ix,#occasions .sec-ix{color:var(--mint)}             
.sec--dark .sec-ix-of,
#produce .sec-ix-of,#occasions .sec-ix-of{color:var(--aluminium)}  
#produce .sec-kick,#occasions .sec-kick{color:var(--aluminium)}
.sec-kick{display:block;margin-block-start:.35em;
  font:600 13px/1.2 var(--f-body);letter-spacing:.1em;text-transform:uppercase;
  color:var(--fg-2)}
html[lang="ar"] .sec-kick{font-family:var(--f-ar);text-transform:none;letter-spacing:0}

.sec-head-l::before{content:"";display:block;inline-size:56px;block-size:6px;
  background:var(--teal);margin-block-end:var(--s-4)}
.sec--dark .sec-head-l::before{background:var(--mint)}
.sec--dark .sec-head{border-block-end-color:color-mix(in srgb,var(--mint) 24%,transparent)}

@media (max-width:860px){
  .sec-head{grid-template-columns:minmax(0,1fr);align-items:start}
  .sec-head .lede{max-inline-size:none}
}

.slogan{background:var(--petrol);color:var(--white);padding-block:clamp(3rem,5vw,5rem);
  text-align:center}
.slogan p{margin:0 auto;max-inline-size:26ch;font-family:var(--f-display);font-weight:600;
  font-size:clamp(26px,3.4vw,42px);line-height:1.25}
html[lang="ar"] .slogan p{font-family:var(--f-kufi);font-weight:600;line-height:1.6;
  font-size:clamp(26px,3.4vw,40px)}
.slogan .sub{margin-block-start:var(--s-5);font-family:var(--f-body);font-weight:400;
  font-size:16px;line-height:1.7;color:var(--aluminium);max-inline-size:56ch}
html[lang="ar"] .slogan .sub{font-family:var(--f-ar);font-size:17px}

.caps{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s-5)}
.caps > :nth-child(1){grid-column:span 5}
.caps > :nth-child(2){grid-column:span 7}
.caps > :nth-child(3){grid-column:span 7}
.caps > :nth-child(4){grid-column:span 5}
@media (max-width:1100px){
  .caps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .caps > *{grid-column:span 1 !important}
}
@media (max-width:620px){
  .caps{grid-template-columns:1fr}
}
.cap{position:relative;display:block;text-decoration:none;color:var(--white);
  overflow:hidden;background:var(--petrol);isolation:isolate;
  min-block-size:clamp(380px,34vw,520px)}
.cap .shot{position:absolute;inset:0}
.cap img{inline-size:100%;block-size:100%;object-fit:cover;
  object-position:var(--cap-focus,50% 50%);
  transition:transform 700ms var(--out)}
.cap:hover img{transform:scale(1.04)}
.cap .shot::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(11,58,65,.97) 0%,rgba(11,58,65,.90) 26%,
                             rgba(11,58,65,.30) 52%,rgba(11,58,65,0) 78%)}
.cap-txt{position:absolute;inset-inline:0;inset-block-end:0;z-index:2;
  padding:var(--s-6) var(--s-5) var(--s-5)}
.cap-ix{display:block;margin-block-end:var(--s-2);
  font:700 13px/1 var(--f-latin);font-variant-numeric:tabular-nums;
  letter-spacing:.16em;color:var(--mint)}
.cap h3{margin:0;font-size:clamp(22px,2.1vw,30px);line-height:1.12;color:var(--white);
  font-family:var(--f-display);font-weight:700;font-stretch:87.5%;letter-spacing:-.01em}
html[lang="ar"] .cap h3{font-size:clamp(21px,2vw,28px);line-height:1.45;
  font-stretch:normal;letter-spacing:0;font-family:var(--f-kufi)}   
.cap p{margin:var(--s-3) 0 0;font-size:15px;line-height:1.55;color:var(--mineral);
  max-inline-size:52ch}
.cap-fam{display:flex;flex-wrap:wrap;gap:.35rem .5rem;margin:var(--s-4) 0 0;padding:0;
  list-style:none}
.cap-fam li{font-size:13px;line-height:1.3;color:var(--aluminium);
  padding:.28rem .5rem;border:1px solid rgba(255,255,255,.22);border-radius:2px}
html[lang="ar"] .cap-fam li{font-size:14px}
.cap-fam .fam-more{border-color:transparent;color:var(--mint);padding-inline:.2rem}
.cap .go{display:inline-flex;align-items:center;gap:.45rem;margin-block-start:var(--s-5);
  padding-block-start:var(--s-4);border-block-start:1px solid rgba(255,255,255,.22);
  inline-size:100%;font-weight:600;font-size:15px;color:var(--mint)}
.cap:hover .go{color:var(--white)}
html[dir="rtl"] .cap .go svg{transform:scaleX(-1)}
@media (max-width:620px){
  .cap-fam li:nth-child(n+5){display:none}
}

.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--s-6) var(--s-5)}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}
.step .shot{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--petrol)}
.step .shot img{inline-size:100%;block-size:100%;object-fit:cover}
.step .n{position:absolute;inset-block-start:0;inset-inline-start:0;z-index:2;
  min-inline-size:52px;block-size:52px;display:grid;place-items:center;
  background:var(--petrol);color:var(--mint);
  font:700 18px/1 var(--f-latin);font-variant-numeric:tabular-nums}
.step h3{margin-block:var(--s-4) var(--s-2);font-size:19px}
.step p{margin:0;font-size:15px;line-height:1.65;color:var(--fg-2)}
html[lang="ar"] .step p{font-size:16px;line-height:1.9}
.sec--dark .step p{color:var(--aluminium)}

.mat{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);
  gap:clamp(2rem,4vw,3.5rem);align-items:start}
@media (max-width:980px){ .mat{grid-template-columns:1fr} }
.mat-swatches{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--s-4)}
.mat-panels{display:grid}
.mat-panels > .mat-detail{grid-area:1 / 1;block-size:100%;
  display:flex;flex-direction:column}
.mat-detail .mat-uses{margin-block-start:auto}
.mat-panels > .mat-detail[hidden]{display:block;visibility:hidden;pointer-events:none}

@media (min-width:981px){ .mat-detail{position:sticky;inset-block-start:calc(var(--hdr) + var(--s-5))} }
@media (max-width:560px){ .mat-swatches{grid-template-columns:repeat(2,minmax(0,1fr))} }
.sw{position:relative;padding:0;border:0;cursor:pointer;background:var(--petrol);
  overflow:hidden;aspect-ratio:1/1}
.sw img{inline-size:100%;block-size:100%;object-fit:cover;
  transition:transform 600ms var(--out)}
.sw:hover img{transform:scale(1.06)}
.sw::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 0 var(--mint);
  transition:box-shadow var(--dur)}
.sw[aria-selected="true"]::after{box-shadow:inset 0 0 0 3px var(--mint)}
.sw .nm{position:absolute;inset-inline:0;inset-block-end:0;z-index:2;
  padding:.55rem .6rem;background:rgba(11,58,65,.88);color:var(--white);
  font:600 14px/1.3 var(--f-body);text-align:start}
html[lang="ar"] .sw .nm{font-family:var(--f-ar);font-size:15px}
.sw[aria-selected="true"] .nm{background:var(--teal)}
.mat-detail{background:var(--white);border:0;padding:clamp(1.5rem,3vw,2.5rem);
  box-shadow:0 1px 0 var(--rule),0 12px 40px -28px rgba(15,36,38,.55)}
.sec--sunk .mat-detail{background:var(--white)}
.mat-detail h3{font-size:clamp(22px,2.2vw,30px);line-height:1.25}
.mat-detail p{margin:var(--s-4) 0 0;font-size:16px;line-height:1.7;color:var(--fg-2)}
html[lang="ar"] .mat-detail p{font-size:17px;line-height:1.95}
.mat-uses{list-style:none;margin:var(--s-5) 0 0;padding:0;display:flex;gap:var(--s-2);
  flex-wrap:wrap}
.mat-uses li{padding:.35rem .7rem;background:var(--bg-sunk);border:1px solid var(--rule);
  font-size:14px;color:var(--fg-2)}

.work{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  gap:var(--s-5) var(--s-4)}
.work > *{grid-column:span 4}
.work > :nth-child(1){grid-column:span 8}
.work > :nth-child(1) .shot{aspect-ratio:16/9}
.work > :nth-child(2){grid-column:span 4;display:flex;flex-direction:column}
.work > :nth-child(2) .shot{aspect-ratio:auto;flex:1 1 auto;min-block-size:0}
@media (max-width:980px){
  .work{grid-template-columns:repeat(2,minmax(0,1fr))}
  .work > *,.work > :nth-child(1),.work > :nth-child(2){grid-column:span 1}
  .work > :nth-child(1){grid-column:span 2}
}
@media (max-width:620px){
  .work{grid-template-columns:1fr}
  .work > *,.work > :nth-child(1){grid-column:span 1}
}
.piece{position:relative;display:block;overflow:hidden;background:var(--petrol);
  text-decoration:none;color:var(--white);margin:0}
.piece .shot{position:relative;aspect-ratio:3/2}
.piece img{inline-size:100%;block-size:100%;object-fit:cover;
  transition:transform 700ms var(--out)}
.piece:hover img{transform:scale(1.04)}
.piece .shot::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(11,58,65,.9) 0,rgba(11,58,65,.1) 58%)}
.piece figcaption{position:absolute;inset-inline:0;inset-block-end:0;z-index:2;
  padding:var(--s-4) var(--s-5)}
.piece .k{font-size:14px;color:var(--mint);font-weight:600}
.piece .ttl{display:block;margin-block-start:.3rem;font-weight:700;font-size:18px;
  line-height:1.3}
.gen-mark{position:absolute;inset-block-start:var(--s-3);inset-inline-start:var(--s-3);
  z-index:3;background:var(--warn);color:var(--white);padding:.28rem .5rem;
  font:700 12px/1.25 var(--f-latin);letter-spacing:.04em;text-transform:uppercase;
  max-inline-size:14rem}

.vid{position:relative;overflow:hidden;background:var(--petrol)}
.vid .shot{position:relative;aspect-ratio:16/9}
.vid img{inline-size:100%;block-size:100%;object-fit:cover}
.vid .shot::after{content:"";position:absolute;inset:0;background:var(--scrim-2)}
.vid-in{position:absolute;inset:0;z-index:2;display:grid;place-items:center;
  text-align:center;padding:var(--s-6)}
.vid h2{color:var(--white);font-size:clamp(22px,2.4vw,32px)}
.vid p{margin:var(--s-4) auto 0;max-inline-size:52ch;color:var(--mineral);font-size:16px;
  line-height:1.7}
.play{inline-size:84px;block-size:84px;border-radius:50%;display:grid;place-items:center;
  margin:0 auto var(--s-5);background:rgba(255,255,255,.14);
  border:2px solid rgba(255,255,255,.75);color:var(--white);cursor:pointer}
.play:hover{background:var(--white);color:var(--petrol)}
html[dir="rtl"] .play svg{transform:scaleX(-1)}
.need{display:inline-block;margin-block-start:var(--s-5);background:var(--warn);
  color:var(--white);padding:.4rem .7rem;font:700 13px/1.4 var(--f-latin);
  letter-spacing:.03em}

.occ{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  grid-auto-rows:clamp(280px,23vw,352px);
  gap:var(--s-5) var(--s-4);align-items:stretch}
.occ > *{min-block-size:0}
.occ > :nth-child(1){grid-column:span 2;grid-row:span 2}
@media (max-width:1100px){
  .occ{grid-template-columns:repeat(2,minmax(0,1fr))}
  .occ > :nth-child(1){grid-column:span 2;grid-row:auto}
}
@media (max-width:620px){
  .occ{grid-template-columns:1fr;grid-auto-rows:clamp(260px,62vw,340px)}
  .occ > :nth-child(1){grid-column:span 1}
}
.oc{position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:var(--petrol);text-decoration:none;color:var(--white)}
.oc .shot{position:absolute;inset:0}
.oc img{inline-size:100%;block-size:100%;object-fit:cover;
  transition:transform 700ms var(--out)}
.oc:hover img{transform:scale(1.04)}
.oc .shot::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(11,58,65,.95) 0,rgba(11,58,65,.80) 32%,
                             rgba(11,58,65,.30) 66%,rgba(11,58,65,.06) 100%)}
.oc-txt{position:relative;z-index:2;margin-block-start:auto;padding:var(--s-5)}
.oc h3{margin:0;font-size:clamp(18px,1.6vw,22px);line-height:1.2;color:var(--white);
  font-family:var(--f-display);font-weight:700;font-stretch:87.5%}
html[lang="ar"] .oc h3{font-size:clamp(20px,1.7vw,23px);line-height:1.5;
  font-family:var(--f-kufi);font-stretch:normal}    
.oc-when{display:inline-block;margin-block-start:var(--s-3);
  font:600 13px/1 var(--f-latin);letter-spacing:.09em;text-transform:uppercase;
  font-variant-numeric:tabular-nums;color:var(--mint)}
html[lang="ar"] .oc-when{font-family:var(--f-ar);text-transform:none;letter-spacing:0;
  font-size:14px}
.oc-when[data-kind="hijri"]{color:var(--aluminium);letter-spacing:.04em;
  text-transform:none;font-weight:400}
.oc-drives{margin:var(--s-2) 0 0;font-size:14px;line-height:1.55;color:var(--mineral);
  max-inline-size:34ch}
html[lang="ar"] .oc-drives{font-size:15px;line-height:1.8}
.oc .go{display:inline-flex;align-items:center;gap:.45rem;margin-block-start:var(--s-4);
  font-weight:600;font-size:14px;color:var(--mint)}
.oc:hover .go{color:var(--white)}
html[dir="rtl"] .oc .go svg{transform:scaleX(-1)}
.oc--lead h3{font-size:clamp(24px,2.4vw,34px);line-height:1.1}
html[lang="ar"] .oc--lead h3{font-size:clamp(23px,2.3vw,32px);line-height:1.4}
.oc--lead .oc-drives{font-size:16px;max-inline-size:38ch}

.rfq{position:relative;background:var(--teal);color:var(--white)}
.rfq-in{position:relative;z-index:2;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  column-gap:clamp(2rem,5vw,5rem);row-gap:clamp(2.5rem,4vw,3.5rem);
  align-items:start;padding-block:0 clamp(4.5rem,8vw,8rem)}
.rfq-head{grid-column:1 / -1;max-inline-size:62ch}
.rfq .sec-ix--rfq{display:none;color:var(--mineral);margin-block-end:var(--s-4)}       
.rfq .sec-ix--rfq .sec-ix-of{color:var(--mineral);opacity:.78}
.rfq h2{margin:0;color:var(--white);font-size:clamp(30px,4.2vw,56px);line-height:1.05;
  letter-spacing:-.018em;text-wrap:balance}
html[lang="ar"] .rfq h2{font-size:clamp(28px,3.6vw,46px);line-height:1.35;letter-spacing:0}
.rfq-lede{margin:var(--s-5) 0 0;color:var(--mineral);font-size:clamp(17px,1.4vw,19px);
  line-height:1.7;max-inline-size:58ch}
html[lang="ar"] .rfq-lede{font-size:clamp(18px,1.5vw,20px);line-height:1.95}

.rfq-ask{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-5);align-content:start}
.rfq-ask li{display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:var(--s-4);row-gap:.15rem;
  padding-block-start:var(--s-4);border-block-start:1px solid rgba(255,255,255,.28)}
.ask-n{grid-row:1 / span 2;font:700 14px/1.6 var(--f-latin);
  font-variant-numeric:tabular-nums;letter-spacing:.1em;color:var(--mineral)}
.rfq-ask h3{margin:0;font-size:clamp(17px,1.5vw,20px);line-height:1.25;color:var(--white)}
html[lang="ar"] .rfq-ask h3{font-size:clamp(18px,1.6vw,21px);line-height:1.5}
.rfq-ask p{margin:.3rem 0 0;color:var(--mineral);font-size:15px;line-height:1.6;max-inline-size:44ch}
html[lang="ar"] .rfq-ask p{font-size:16px;line-height:1.85}

.rfq-side{display:grid;gap:var(--s-6);align-content:start}
.rfq-acts{display:flex;gap:var(--s-3);flex-wrap:wrap;margin:0}
.btn-white{background:var(--white);color:var(--petrol)}
.btn-white:hover{background:var(--mineral)}
.rfq-card{background:rgba(11,58,65,.42);border:1px solid rgba(255,255,255,.28);
  padding:var(--s-6)}
.rfq-card h3{margin:0;font-size:16px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--mint)}
html[lang="ar"] .rfq-card h3{letter-spacing:0;text-transform:none;font-size:17px}
.rfq-card ul{list-style:none;margin:var(--s-4) 0 0;padding:0;display:flex;
  flex-direction:column;gap:var(--s-3)}
.rfq-card a{display:flex;align-items:center;gap:.7rem;color:var(--white);
  text-decoration:none;font-size:16px;min-block-size:44px;
  min-inline-size:0;overflow-wrap:anywhere}
.rfq-card a > span,.rfq-card a > bdi{min-inline-size:0;overflow-wrap:anywhere}
.rfq-card a{flex-wrap:wrap;row-gap:.1rem}
.rfq-card a > .lat{flex:1 1 auto}
.rfq-card a:hover{color:var(--mint)}
.rfq-card svg{inline-size:20px;block-size:20px;flex:none}
.rfq-card .lat{unicode-bidi:isolate;direction:ltr;font-family:var(--f-latin);
  font-variant-numeric:tabular-nums}
@media (max-width:900px){
  .rfq-in{grid-template-columns:1fr}
}

.hub[hidden]{display:none}
.hub{position:fixed;
  --hub-free:calc((100vw - min(100vw, var(--shell,1440px)))/2 + var(--gutter,1.5rem));
  inset-block-end:calc(clamp(1rem,3vw,2rem) + var(--hub-lift,0px));
  z-index:80;inset-inline-end:clamp(0px, calc(var(--hub-free) - 48px), 2rem);
  display:flex;flex-direction:column;align-items:flex-end;gap:var(--s-3);
  transition:inset-block-end 180ms var(--out)}
@media (prefers-reduced-motion:reduce){ .hub{transition:none} }
html[dir="rtl"] .hub{align-items:flex-start}

.hub-dock{display:flex;align-items:center;gap:var(--s-3)}
html[dir="rtl"] .hub-dock{flex-direction:row-reverse}
.hub-ask{display:flex;align-items:stretch;background:var(--white);
  border:1px solid var(--rule);box-shadow:0 10px 26px -12px rgba(11,58,65,.45);
  animation:ask-in 420ms var(--out) 900ms both}
.hub-ask[hidden]{display:none}
.hub-ask-btn{min-block-size:46px;padding:.5rem .9rem;border:0;background:none;
  cursor:pointer;font:600 15px/1 var(--f-body);color:var(--petrol);white-space:nowrap}
html[lang="ar"] .hub-ask-btn{font-family:var(--f-ar);font-size:16px}
.hub-ask-btn:hover{color:var(--teal)}
.hub-ask-x{flex:none;inline-size:44px;min-inline-size:44px;min-block-size:46px;display:grid;place-items:center;
  border:0;border-inline-start:1px solid var(--rule);background:none;cursor:pointer;
  color:var(--slate)}
.hub-ask-x:hover{color:var(--petrol)}
.hub-ask-x svg{inline-size:14px;block-size:14px}
@keyframes ask-in{from{opacity:0;transform:translateY(6px) scale(.97)}
                  to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){ .hub-ask{animation:none} }
@media (max-width:640px){
  .hub-dock{flex-direction:column;align-items:flex-end;gap:var(--s-2)}
  html[dir="rtl"] .hub-dock{flex-direction:column;align-items:flex-start}
  .hub-ask-btn{padding:.5rem .7rem;font-size:14px}
}
.hub-list{display:grid;justify-items:stretch;gap:var(--s-3);margin:0;padding:0;
  list-style:none;inline-size:max-content;min-inline-size:11.5rem}
.hub-list[hidden]{display:none}
.hub-item{display:flex;align-items:center;gap:.6rem;min-block-size:48px;inline-size:100%;
  padding:.6rem .95rem;background:var(--white);color:var(--fg);text-decoration:none;
  border:1px solid var(--rule);box-shadow:0 10px 26px -12px rgba(11,58,65,.45);
  font:600 15px/1 var(--f-body);white-space:nowrap;
  animation:hub-in 260ms var(--out) both}
.hub-item:hover{border-color:var(--teal);color:var(--teal)}
.hub-item svg{inline-size:20px;block-size:20px;flex:none;color:var(--teal)}
@keyframes hub-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){ .hub-item{animation:none} }
.hub-btn{inline-size:48px;block-size:48px;border-radius:50%;border:0;cursor:pointer;
  display:grid;place-items:center;background:var(--teal);color:var(--white);
  box-shadow:0 12px 30px -10px rgba(11,58,65,.6)}
.hub-btn:hover{background:var(--petrol)}
.hub-btn svg{inline-size:26px;block-size:26px}
.hub-btn .x{display:none}
.hub-btn[aria-expanded="true"] .x{display:block}
.hub-btn[aria-expanded="true"] .o{display:none}
.hub--rail{inset-block-end:0;inset-inline-end:0;inset-block-start:auto;
  flex-direction:row;gap:0}
.hub--rail .hub-item{border-radius:0;border-block-end:0;border-inline-end:0;
  min-block-size:56px;box-shadow:0 -8px 24px -14px rgba(11,58,65,.5)}
@media (max-width:760px){
  .hub{inset-block-end:calc(64px + 1rem + var(--hub-lift,0px))}
}

.mrfq{display:none}
.mrfq-i{border:0;background:none;cursor:pointer;color:var(--white)}
@media (max-width:1200px){
  .mrfq{display:flex;position:fixed;inset-inline:0;inset-block-end:0;z-index:79;
    background:var(--petrol);border-block-start:1px solid rgba(255,255,255,.18);
    padding-block-end:env(safe-area-inset-bottom,0px)}
  .mrfq-i{flex:1 1 0;min-inline-size:0;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:.25rem;
    min-block-size:60px;color:var(--white);text-decoration:none;
    font:600 13px/16px var(--f-body);text-align:center}
  .mrfq-i + .mrfq-i{border-inline-start:1px solid rgba(255,255,255,.18)}
  .mrfq-i.pri{background:var(--teal);flex:1.35 1 0;font-weight:700}
  .mrfq-i span{display:block;max-inline-size:100%;padding-block:2px;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mrfq svg{inline-size:20px;block-size:20px;flex:none}
  body{padding-block-end:0}
  .ftr::after{content:"";display:block;block-size:calc(60px + env(safe-area-inset-bottom,0px))}
  .hub{display:none !important}
  .ovl{padding-block-end:calc(72px + env(safe-area-inset-bottom,0px))}
  body.bar-off .mrfq{transform:translateY(105%)}
  .mrfq{transition:transform 180ms var(--out,ease)}
}
@supports (height: 100dvh){
  @media (max-width:760px){
    .mrfq{transition:transform 160ms ease}
    body.kbd .mrfq{transform:translateY(100%)}
    body.kbd{padding-block-end:0}
  }
}
@media (prefers-reduced-motion:reduce){.mrfq{transition:none}}

.orabi-dot{inline-size:8px;block-size:8px;border-radius:50%;background:var(--ok);
  flex:none;display:inline-block}
.hub-ask-btn .orabi-dot{margin-inline-end:.5em;vertical-align:middle}
@media (prefers-reduced-motion:no-preference){
  .orabi-dot{animation:orabi-halo 2600ms ease-in-out infinite}
}
@keyframes orabi-halo{
  0%,100%{box-shadow:0 0 0 0 rgba(31,122,77,.45)}
  50%    {box-shadow:0 0 0 4px rgba(31,122,77,0)}
}

.revbar{background:var(--ink);color:var(--white);padding:.6rem 0;font-size:14px}
.revbar .shell{display:flex;gap:var(--s-4);flex-wrap:wrap;align-items:center}
.revbar b{color:var(--mint)}
.revbar a{color:var(--white)}

.oc--blocked .shot{display:grid;place-content:center;gap:var(--s-3);
  background:repeating-linear-gradient(135deg,#0B3A41 0 14px,#0F2426 14px 28px);
  padding:var(--s-5);text-align:center}
.blocked-mark{background:var(--warn);color:var(--white);padding:.35rem .6rem;
  font:700 12px/1.35 var(--f-latin);letter-spacing:.03em}
.blocked-body{color:var(--aluminium);font:400 13px/1.5 var(--f-latin);
  font-variant-numeric:tabular-nums}
.oc--blocked h3{background:linear-gradient(to top,rgba(11,58,65,.92) 0,transparent 100%)}

.film{margin:0 auto var(--s-7);max-inline-size:860px}
.film .shot,.vidfeat .shot{position:relative;overflow:hidden;background:var(--ink)}
.film video,.vidfeat video{inline-size:100%;block-size:auto;display:block}
.film figcaption{margin-block-start:var(--s-3);font-size:14px;color:var(--aluminium)}
html[lang="ar"] .film figcaption{font-size:15px}
.vidfeat{margin:0 auto;max-inline-size:980px}
.vidfeat figcaption{margin-block-start:var(--s-4)}
.piece--film .shot{aspect-ratio:3/2}
.piece--film video{inline-size:100%;block-size:100%;object-fit:cover}
.piece--film .shot::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(11,58,65,.9) 0,rgba(11,58,65,.1) 58%)}

.ftr .ftr-social{list-style:none;margin:var(--s-5) 0 0;padding:0;
  display:flex;flex-direction:row;flex-wrap:wrap;gap:.45rem var(--s-4)}
.ftr .ftr-social a{font-size:14px;color:var(--aluminium)}
.ftr .ftr-social a:hover{color:var(--mint)}

.procmsg{margin-block:calc(var(--s-6) * -1) var(--s-6);font-size:19px;font-weight:600;
  color:var(--mint);letter-spacing:.01em}
html[lang="ar"] .procmsg{font-size:20px;font-family:var(--f-ar)}
.ftr-btm .lat{unicode-bidi:isolate;direction:ltr;font-family:var(--f-latin)}
.lat{unicode-bidi:isolate;direction:ltr}


.rfq-card{background:rgba(11,58,65,.74)}

.gen-mark,.real-mark,.blocked-mark{font-size:13px}

.ftr .ftr-social a{min-inline-size:24px}
.ftr li > a,
.ftr .ftr-social a,
.ftr-brand p a,
.more-panel a,
.more-panel .sub a,
.mega li > a,
.mega .sub a,
.mega-grp > a,
.index-card li a,
.index-rest a{display:flex;align-items:center;min-block-size:24px}
.mega-grp > a{align-items:baseline}
.ftr-btm a{display:inline-flex;align-items:center;min-block-size:24px}

@media (max-width:760px){
  .hdr-act [data-index]{display:none}
}

@media (min-width:641px){
  .hdr1 .hdr-act .lang{display:inline-flex}
}



.cmp{margin-block:var(--s-8) 0;padding-block-start:var(--s-7);border-block-start:1px solid var(--rule)}
.cmp-row{margin-block:var(--s-6);border-block:1px solid var(--rule);background:var(--bg)}
.cmp-frame{display:block;inline-size:100%;block-size:112px;border:0;background:var(--bg)}
.cmp .lede,.cmp-claim,.demo-note--wide{max-inline-size:72ch}
.cmp-tbl{max-inline-size:72ch}
.cmp-claim{margin-block:var(--s-2) 0;font-size:clamp(1.15rem,1.6vw,1.45rem);
  line-height:1.3;color:var(--petrol);font-weight:600;max-inline-size:52ch;
  text-wrap:balance}
.cmp-shown{display:inline-block;margin-inline-start:var(--s-3);vertical-align:middle;
  padding:.2em .6em;border:1px solid var(--rule);border-radius:2px;
  font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--fg-2);background:var(--mineral)}
html[lang="ar"] .cmp-shown{text-transform:none;letter-spacing:0;
  font-family:var(--f-ar),system-ui,sans-serif;font-size:13px}
.cmp h2{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap}
.cmp .rec{background:var(--teal);color:var(--white);padding:.25rem .55rem;
  font:700 13px/1.3 var(--f-latin);letter-spacing:.05em;text-transform:uppercase}
html[lang="ar"] .cmp .rec{font-family:var(--f-ar);letter-spacing:0;text-transform:none}
.cmp-row{margin-block:var(--s-5);border:1px solid var(--rule);overflow:hidden}
.cmp-row .hdr1{position:static;border-block-end:0}
.cmp-row .mega,.cmp-row .more-panel,.cmp-row .index-panel{display:none}
.cmp-tbl{width:100%;border-collapse:collapse;font-size:15px;max-width:76ch}
.cmp-tbl th,.cmp-tbl td{text-align:start;vertical-align:top;padding:.6rem .8rem;
  border-block-end:1px solid var(--rule)}
.cmp-tbl th{width:15rem;font-weight:600;color:var(--fg-2);background:var(--bg-sunk)}
.cmp-tbl td{font-variant-numeric:tabular-nums}
.cmp-link{margin-block-start:var(--s-4)}
.cmp-link a{display:inline-flex;align-items:center;min-block-size:24px;font-weight:600;color:var(--link)}

.step .n,
.hdr .qbasket .n,
.blocked-body{direction:ltr;unicode-bidi:isolate}

.cmp-tbl bdi{font-variant-numeric:tabular-nums;white-space:nowrap}
html[dir="rtl"] .cmp-tbl td{text-align:right}

.gen-mark{position:absolute;inset-block-start:var(--s-3);inset-inline-start:var(--s-3);
  z-index:4;background:var(--warn);color:var(--white);padding:.22rem .45rem;
  font:700 13px/1.25 var(--f-latin);letter-spacing:.04em;text-transform:uppercase;
  pointer-events:none;max-inline-size:14rem}
html[lang="ar"] .gen-mark{font-family:var(--f-ar);letter-spacing:0;text-transform:none}
.gen-mark--hero{inset-block-start:calc(var(--hdr) + var(--s-3));z-index:3}
.gen-mark--sw{inset-block-start:4px;inset-inline-start:4px;padding:3px .3rem;
  font-size:13px;max-inline-size:calc(100% - 8px);inline-size:max-content;
  overflow:hidden;white-space:normal;text-overflow:clip;line-height:1.22}
.real-mark{position:absolute;inset-block-start:var(--s-3);inset-inline-start:var(--s-3);
  z-index:4;background:var(--ok);color:var(--white);padding:.22rem .45rem;
  font:700 13px/1.25 var(--f-latin);letter-spacing:.04em;text-transform:uppercase;
  pointer-events:none;max-inline-size:14rem}
html[lang="ar"] .real-mark{font-family:var(--f-ar);letter-spacing:0;text-transform:none}
html[data-marks="off"] .real-mark{display:none}
html[lang="ar"] .gen-mark,
html[lang="ar"] .real-mark,
html[lang="ar"] .blocked-mark{line-height:21px}
@media (max-width:1200px){
  html[lang="ar"] .mrfq-i{line-height:24px}
  html[lang="ar"] .mrfq-i span{line-height:24px}
}

.revbar-t{margin-inline-start:auto;background:none;border:1px solid rgba(255,255,255,.45);
  color:var(--white);font:600 13px/1 var(--f-body);padding:.45rem .7rem;cursor:pointer;
  min-block-size:28px;border-radius:2px}
.revbar-t:hover{border-color:var(--mint);color:var(--mint)}

.unver{display:inline-block;margin-inline-start:.5rem;background:var(--warn);
  color:var(--white);padding:.16rem .4rem;font:700 13px/1.3 var(--f-latin);
  letter-spacing:.03em;vertical-align:middle}
html[lang="ar"] .unver{font-family:var(--f-ar);letter-spacing:0}
.rfq-card .unver{display:block;margin:.3rem 0 0}
.ftr-brand .unver{margin:.4rem 0 0;display:block}

.cap .shot,.step .shot,.sw,.piece .shot,.oc .shot,.index-card .shot{position:relative}
.slides{position:absolute;inset:0}

.op{position:fixed;inset-block-start:50%;inset-inline-start:0;transform:translateY(-50%);
  z-index:95;display:flex;align-items:stretch;font-family:var(--f-body);max-inline-size:96vw}
@media (max-width:1200px){
  .op{inset-block-start:300px;inset-block-end:auto;transform:none}
}

.op-tab{flex:none;inline-size:40px;min-block-size:132px;padding:.7rem .2rem;
  background:var(--ink);color:var(--white);border:0;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;
  font:700 13px/1 var(--f-body);letter-spacing:.09em;text-transform:uppercase}
.op-tab span{writing-mode:vertical-rl;text-orientation:mixed}
html[lang="ar"] .op-tab{font-family:var(--f-ar);letter-spacing:0;text-transform:none;font-size:13px}
html[dir="rtl"] .op-tab span{writing-mode:vertical-rl;transform:rotate(180deg)}
.op-tab svg{transform:rotate(-90deg);transition:transform var(--dur)}
html[dir="rtl"] .op-tab svg{transform:rotate(90deg)}
.op-tab[aria-expanded="true"] svg{transform:rotate(90deg)}
html[dir="rtl"] .op-tab[aria-expanded="true"] svg{transform:rotate(-90deg)}
.op-body{inline-size:min(86vw,352px);background:var(--ink);color:var(--white);
  padding:var(--s-4);max-block-size:82vh;overflow-y:auto}
.op-body[hidden]{display:none}
.op-note{margin:0 0 var(--s-4);font-size:13px;color:var(--mint)}
html[lang="ar"] .op-note{font-size:14px}
.op-row{display:grid;grid-template-columns:4.8rem 1fr;gap:.4rem var(--s-3);
  align-items:start;margin-block-end:.5rem}
html[lang="ar"] .op-row{grid-template-columns:5.4rem 1fr}
.op-lab{font-size:13px;color:var(--aluminium);padding-block-start:.4rem}
.op-set{display:flex;flex-wrap:wrap;gap:.3rem}
.op-b{display:inline-flex;align-items:center;justify-content:center;gap:.3rem;
  min-block-size:30px;min-inline-size:30px;padding:.3rem .55rem;
  background:transparent;color:var(--white);border:1px solid rgba(255,255,255,.4);
  font:600 13px/1 var(--f-body);text-decoration:none;cursor:pointer;
  font-variant-numeric:tabular-nums;white-space:nowrap}
html[lang="ar"] .op-b{font-family:var(--f-ar)}
.op-b i{font-style:normal;font-size:11px;opacity:.75}
.op-b:hover{border-color:var(--mint);color:var(--mint)}
.op-b[aria-current="true"],.op-b[aria-pressed="true"]{background:var(--teal);
  border-color:var(--teal);color:var(--white)}
.op-b:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
.op-standing{margin:var(--s-4) 0 0;padding-block-start:var(--s-3);
  border-block-start:1px solid rgba(255,255,255,.22);
  font-size:13px;line-height:1.5;color:var(--white);
  border-inline-start:3px solid var(--mint);padding-inline-start:var(--s-3)}
html[lang="ar"] .op-standing{font-size:14px}

html[data-embed="1"] .op{display:none}

.gen-mark--hero{inset-block-start:var(--s-4);inset-block-end:auto;
  inset-inline-start:auto;inset-inline-end:var(--s-4);z-index:3}

.dev{padding-block:var(--s-7)}
.dev h2{font-size:17px;margin-block:var(--s-5) var(--s-3)}
.dev-bar{display:flex;gap:.4rem;flex-wrap:wrap}
.dev-bar a{display:inline-flex;align-items:center;min-block-size:32px;padding:.3rem .7rem;
  direction:ltr;unicode-bidi:isolate;
  border:1px solid var(--control-border);text-decoration:none;font:600 14px/1 var(--f-body);
  font-variant-numeric:tabular-nums;color:var(--fg)}
.dev-bar a:hover{border-color:var(--teal);color:var(--teal)}
.dev-bar a[aria-current="true"]{background:var(--teal);border-color:var(--teal);color:var(--white)}
.dev-stage{margin-block-start:var(--s-5);background:var(--bg-sunk);padding:var(--s-5);
  overflow-x:auto}
.dev-frame{display:block;margin-inline:auto;border:0;
  outline:1px solid var(--rule);outline-offset:0;
  background:var(--white);block-size:min(76vh,860px);max-inline-size:none}
.dev .lede a{display:inline-flex;align-items:center;min-block-size:24px}
.dev-meta{margin-block-start:var(--s-3);font-size:14px;color:var(--fg-2);
  font-variant-numeric:tabular-nums;text-align:center}


@media (min-width:761px){
  .hdr1 .nav{display:flex}
  .hdr1 .burger{display:none}
  .hdr1[data-concept="A"] .nav{display:flex}
  .hdr1[data-concept="A"] .burger{display:none}
  .hdr1 .hdr-act{margin-inline-start:0}
}
@media (max-width:760px){
  .hdr1 .nav{display:none}
  .hdr1 .burger{display:inline-grid}
  .hdr1 .hdr-act{margin-inline-start:auto}
}
.nav-ovf[hidden]{display:none}
.hdr1 .nav{flex:0 0 auto;min-inline-size:0}
.hdr1 .nav .top{white-space:nowrap}
.nav .item[hidden]{display:none}

.hdr1 .nav.nav--yield{display:none}
.hdr1 .nav.nav--yield ~ .hdr-act .burger{display:inline-grid}
.hdr1 .nav.nav--yield ~ .hdr-act{margin-inline-start:auto}
.hdr1 .nav.nav--yield ~ .hdr-act [data-index]{display:none}


.mnav{z-index:70;inset-block-start:var(--mnav-top,var(--hdr))}
body:has(#mnav:not([hidden])) .mrfq{display:none}

@media (max-width:760px){
  .revbar{font-size:13px;line-height:1.4;padding:.4rem 0}
  .revbar .shell{display:block}
}

@media (max-width:620px){
  .hero-arrows{margin-inline-start:0}
  .dots{flex:1 1 100%}
  .dot{inline-size:36px}
}

.sec--about{background:var(--mineral);padding-block:clamp(5rem,11vw,9rem)}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);
  align-items:center}
.about-txt{max-inline-size:44ch}
.sec--about .sec-head{margin-block-end:var(--s-5)}
.about-lead{font-family:var(--f-display);font-weight:600;
  font-size:clamp(26px,3.4vw,42px);line-height:1.18;letter-spacing:-.01em;
  color:var(--petrol);margin-block:0 var(--s-5);text-wrap:balance}
.about-sub{font-size:clamp(15px,1.35vw,17px);line-height:1.75;color:var(--slate);
  margin-block:0 var(--s-4);text-wrap:pretty}
.about-note{margin-block:0 var(--s-6);font-weight:600;color:var(--teal);
  font-size:clamp(14px,1.2vw,16px)}
.about-shot{margin:0;position:relative}
.about-shot .shot,.about-shot picture{display:block}
.about-shot img{inline-size:100%;block-size:100%;object-fit:cover;
  aspect-ratio:4/5;display:block}
.about-shot .real-mark,.about-shot .gen-mark{inset-block-start:var(--s-3)}
@media (max-width:900px){
  .about-grid{grid-template-columns:1fr;gap:var(--s-6)}
  .about-txt{max-inline-size:none}
  .about-shot img{aspect-ratio:16/10}
}
.sec--about .btn-ghost{border-color:var(--petrol);color:var(--petrol);background:none}
.sec--about .btn-ghost:hover{background:var(--petrol);color:var(--white)}
.sec--about .btn-ghost svg{stroke:currentColor}
html[lang="ar"] .about-lead{font-family:var(--f-kufi);line-height:1.4}

:root{--seam:clamp(3.5rem,7vw,7rem)}

#produce{padding-block-start:0;
  background:linear-gradient(var(--petrol) 0 var(--band),transparent var(--band))}
#produce > .shell{padding-block-start:0}
#produce .sec-head,#occasions .sec-head{color:var(--white);background:var(--petrol);
  padding-block:var(--band) calc(var(--band) + var(--seam));
  margin-block-start:0;border-block-end:0;
  box-shadow:0 0 0 100vmax var(--petrol);clip-path:inset(0 -100vmax)}
#produce .sec-head h2,#occasions .sec-head h2{color:var(--white)}
#produce .sec-head .lede,#occasions .sec-head .lede{color:var(--aluminium)}
#produce .sec-head-l::before,#occasions .sec-head-l::before{background:var(--mint)}
#produce .caps,#occasions .occ{position:relative;z-index:2;
  margin-block-start:calc((var(--band) + var(--seam)) * -0.62)}

.seam-img{position:relative;margin-block-start:var(--band);
  block-size:clamp(220px,26vw,380px);overflow:hidden;background:var(--petrol)}
.seam-img img{inline-size:100%;block-size:100%;object-fit:cover;display:block}
.seam-img .real-mark,.seam-img .gen-mark{inset-block-start:auto;
  inset-block-end:var(--s-3);inset-inline-start:auto;inset-inline-end:var(--s-3)}
#work{padding-block-start:0}
#work > .shell{padding-block-start:0}
#work .sec-head{position:relative;z-index:2;background:var(--white);
  margin-block-start:calc(var(--seam) * -1);padding:var(--s-6) var(--s-6) var(--s-5) 0;
  padding-inline-start:var(--s-6);max-inline-size:min(72ch,66%);
  grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
html[dir="rtl"] #work .sec-head{padding-inline:var(--s-6) 0}
@media (max-width:620px){
  #work .sec-head{margin-block-start:calc(var(--seam) * -0.6);
    padding:var(--s-5);max-inline-size:100%}
}

#work{position:relative;z-index:1;padding-block-end:0}
#work .work{position:relative;z-index:2;padding-block-end:var(--seam)}
#process{margin-block-start:calc(var(--seam) * -1);
  padding-block-start:calc(var(--band) + var(--seam));
  padding-block-end:calc(var(--band) + var(--seam))}

#about{margin-block-start:calc(var(--seam) * -1);position:relative;z-index:2;
  border-start-start-radius:2px;border-start-end-radius:2px}

#materials{margin-block-start:calc(var(--seam) * -0.55);position:relative}
#materials .mat-swatches{position:relative;z-index:2}

#film{position:relative;isolation:isolate}
#materials{padding-block-end:var(--band);
  background:linear-gradient(to bottom,
    var(--mineral) 0 calc(100% - var(--band) * 1.35),
    var(--petrol) calc(100% - var(--band) * 1.35) 100%)}
#materials .mat-swatches{position:relative;z-index:2}

#occasions{padding-block-start:0}
#occasions > .shell{padding-block-start:var(--band)}
#occasions{margin-block-start:0}

#occasions{padding-block-end:calc(var(--band) * 0.35);position:relative;z-index:3;
  background:linear-gradient(to bottom,
    var(--bg-sunk) 0 calc(100% - var(--band)),
    transparent calc(100% - var(--band)) 100%)}
#rfq{margin-block-start:0;position:relative;z-index:2}
.rfq-head{position:relative;background:var(--teal);
  margin-block-start:calc(var(--band) * -1);
  padding-block:var(--band) var(--s-5);
  box-shadow:0 0 0 100vmax var(--teal);clip-path:inset(0 -100vmax)}

body.home .ftr{margin-block-start:0}
.rfq{padding-block-end:var(--band)}
.rfq::after{content:"";position:absolute;inset-block-end:0;inset-inline:0;
  block-size:var(--band);background:var(--petrol);z-index:1}

body.home .ftr::after{content:"";position:absolute;inset-block-start:0;
  inset-inline-start:0;inline-size:clamp(56px,7vw,96px);block-size:4px;
  background:var(--mint)}

@media (max-width:620px){
  :root{--seam:2.25rem}
}

.hub-item[disabled]{opacity:.55;cursor:not-allowed}
.hub-note{margin-block-start:calc(var(--s-3) * -1);padding:.45rem .7rem;
  font-size:13px;line-height:1.35;color:var(--slate);
  background:var(--mineral);border:1px solid var(--rule);border-block-start:0;
  box-shadow:0 10px 26px -12px rgba(11,58,65,.45)}
.hub--rail .hub-note{display:none}

.cyc{display:grid;grid-template-columns:1fr;gap:var(--s-6)}
.cyc-stage{position:relative}
.cyc-panel{margin:0;display:none;grid-template-columns:1.5fr 1fr;
  gap:clamp(1.5rem,3vw,3rem);align-items:center}
.cyc-panel[data-on]{display:grid}
.cyc-panel .shot{position:relative;aspect-ratio:3/2;overflow:hidden;
  background:var(--ink)}
.cyc-panel img{inline-size:100%;block-size:100%;object-fit:cover;display:block}
.cyc-panel figcaption .n,.cyc-step .n{unicode-bidi:isolate}
.cyc-panel figcaption .n{display:block;font:700 clamp(30px,4vw,54px)/1 var(--f-latin);
  color:var(--mint);margin-block-end:var(--s-3)}
.cyc-panel figcaption h3{font-size:clamp(20px,2.2vw,28px);color:var(--white);
  margin:0 0 var(--s-3)}
.cyc-panel figcaption p{margin:0;color:var(--aluminium);max-inline-size:38ch;
  line-height:1.7}
.cyc-nav{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  border-block-start:1px solid rgba(255,255,255,.18)}
.cyc-step{appearance:none;background:none;border:0;cursor:pointer;text-align:start;
  padding:var(--s-4) var(--s-3) var(--s-3);color:var(--aluminium);
  border-block-start:3px solid transparent;margin-block-start:-1px;
  min-block-size:44px;transition:color 200ms var(--out),border-color 200ms var(--out)}
.cyc-step .n{display:block;font:700 13px/1 var(--f-latin);letter-spacing:.06em;
  opacity:.7;margin-block-end:.3rem}
.cyc-step .lbl{display:block;font-weight:600;font-size:clamp(13px,1.1vw,15px);
  line-height:1.3}
.cyc-step:hover{color:var(--white)}
.cyc-step[aria-selected="true"]{color:var(--white);border-block-start-color:var(--mint)}
.cyc-step:focus-visible{outline:2px solid var(--mint);outline-offset:-2px}
html[lang="ar"] .cyc-step .lbl{font-family:var(--f-ar)}
@media (max-width:900px){
  .cyc-nav{display:none}
  .cyc-panel,.cyc-panel[data-on]{display:grid;grid-template-columns:1fr;
    gap:var(--s-4);margin-block-end:var(--s-7)}
  .cyc-panel figcaption .n{font-size:28px}
}

.sec--signature{padding-block-end:var(--band)}
.vband{--v-inset:clamp(0px,5.5vw,104px);
  padding-inline:var(--v-inset);
  display:grid;gap:clamp(1.75rem,3.4vw,3rem)}
.vstand{margin:0;color:var(--aluminium);line-height:1.8;
  font-size:clamp(15px,1.3vw,18px);max-inline-size:62ch}
html[lang="ar"] .vstand{font-size:clamp(16px,1.4vw,19px);line-height:2}

.sec--signature .sec-head{align-items:end}
.sec--signature .sec-head .lede{color:var(--white);font-family:var(--f-display);
  font-weight:600;font-stretch:87.5%;letter-spacing:-.01em;
  font-size:clamp(20px,2.2vw,30px);line-height:1.2;text-wrap:balance;
  max-inline-size:26ch}
html[lang="ar"] .sec--signature .sec-head .lede{font-family:var(--f-kufi);
  font-stretch:normal;letter-spacing:0;line-height:1.5;
  font-size:clamp(20px,2vw,27px)}      

.vidfeat{margin:0;position:relative;z-index:2}
.vidfeat .shot{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--ink);
  box-shadow:0 30px 70px -30px rgba(15,36,38,.75)}
.vidfeat video{inline-size:100%;block-size:100%;object-fit:cover;display:block}
/* The caption row is aligned to the film's own edges, which is what stops the
   licence chip reading as an orphan floating in the band. */
.vcap{display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--s-4) var(--s-6);flex-wrap:wrap;padding-block-start:var(--s-4);
  border-block-start:1px solid color-mix(in srgb,var(--mint) 22%,transparent)}
.vcap-t{color:var(--white);font-weight:600;font-size:clamp(15px,1.4vw,18px)}
.vcap .need{margin-block-start:0}

.vsubs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.5rem,2.6vw,2.5rem);
  padding-block-start:clamp(1.5rem,2.6vw,2.5rem);
  border-block-start:1px solid color-mix(in srgb,var(--aluminium) 22%,transparent)}
.vsub{margin:0}
.vsub .shot{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--ink)}
.vsub video{inline-size:100%;block-size:100%;object-fit:cover;display:block}
.vsub figcaption{padding-block-start:var(--s-3)}
.vsub figcaption h3{margin:0 0 .25rem;color:var(--white);font-size:clamp(15px,1.4vw,18px)}
.vsub figcaption p{margin:0;color:var(--aluminium);font-size:14px;line-height:1.6}

.vplay-wrap{position:relative;display:block;block-size:100%}
.vplay{position:absolute;inset:0;z-index:2;inline-size:100%;block-size:100%;
  display:flex;align-items:flex-end;justify-content:flex-start;
  gap:var(--s-3);padding:var(--s-5);cursor:pointer;
  background:linear-gradient(to top,rgba(15,36,38,.72) 0%,rgba(15,36,38,.12) 46%,
                             rgba(15,36,38,0) 72%);
  border:0;color:var(--white);text-align:start;
  transition:background 240ms var(--out)}
.vplay:hover{background:linear-gradient(to top,rgba(15,36,38,.82) 0%,
                                        rgba(15,36,38,.22) 52%,rgba(15,36,38,.04) 78%)}
.vplay-ic{inline-size:56px;block-size:56px;flex:none;display:grid;place-items:center;
  border-radius:50%;background:var(--white);color:var(--petrol);
  transition:transform 240ms var(--out)}
.vplay:hover .vplay-ic{transform:scale(1.06)}
.vplay-tx{font-weight:600;font-size:clamp(15px,1.3vw,17px);padding-block-end:.55rem}
html[dir="rtl"] .vplay-ic svg{transform:none}    
.vsub .vplay{padding:var(--s-4)}
.vsub .vplay-ic{inline-size:44px;block-size:44px}
.vsub .vplay-tx{font-size:14px;padding-block-end:.35rem}
.vplay[hidden]{display:none}

@media (max-width:900px){
  .vsubs{grid-template-columns:1fr}
}
@media (max-width:620px){
  .vband{--v-inset:0px}
}

body.rc-page{background:var(--bg-sunk)}
.rc{padding:0}
.rc-shell{display:grid;grid-template-columns:minmax(320px,380px) minmax(0,1fr);
  min-block-size:100svh;align-items:start}
.rc-side{position:sticky;inset-block-start:0;max-block-size:100svh;overflow:auto;
  padding:var(--s-6) var(--s-5) var(--s-7);background:var(--petrol);color:var(--white);
  display:grid;gap:var(--s-5);align-content:start}
.rc-side h1{margin:0;color:var(--white);font-size:clamp(20px,1.9vw,26px);line-height:1.2}
.rc-lede{margin:0;color:var(--aluminium);font-size:14px;line-height:1.7}
html[lang="ar"] .rc-lede{font-size:15px;line-height:1.9}
.rc-row{display:grid;gap:var(--s-2)}
.rc-lab{font:700 11px/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;
  color:var(--mint)}
html[lang="ar"] .rc-lab{font-family:var(--f-ar);text-transform:none;letter-spacing:0;
  font-size:13px}
.rc-bar{display:flex;flex-wrap:wrap;gap:.35rem}
.rc-bar button{min-block-size:36px;padding:.45rem .7rem;cursor:pointer;
  background:transparent;color:var(--white);border:1px solid var(--slate);
  font:600 13px/1.2 var(--f-body)}
.rc-bar button:hover{border-color:var(--mint)}
.rc-bar button[aria-current="true"]{background:var(--mint);color:var(--petrol);
  border-color:var(--mint)}
.rc-stops{display:grid;gap:.25rem}
.rc-stop{display:flex;align-items:center;gap:.6rem;min-block-size:38px;
  padding:.4rem .6rem;cursor:pointer;text-align:start;
  background:transparent;color:var(--white);border:1px solid transparent;
  font:500 14px/1.3 var(--f-body)}
.rc-stop:hover{border-color:var(--slate)}
.rc-stop[aria-current="true"]{background:rgba(120,207,188,.14);border-color:var(--mint)}
.rc-n{font:700 11px/1 var(--f-latin);font-variant-numeric:tabular-nums;
  letter-spacing:.1em;color:var(--mint);flex:none}
.rc-links{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.rc-links a{color:var(--mineral);font-size:14px;line-height:1.5;
  display:inline-flex;min-block-size:32px;align-items:center}
.rc-links a:hover{color:var(--mint)}
.rc-stage{padding:var(--s-5);display:grid;justify-items:center;gap:var(--s-3)}
.rc-meta{font:600 12px/1 var(--f-latin);letter-spacing:.08em;color:var(--slate);
  font-variant-numeric:tabular-nums}
.rc-stage{overflow:hidden}
.rc-scale{transform-origin:top center;will-change:transform}
.rc-frame{box-sizing:content-box;inline-size:1440px;block-size:calc(100svh - 5.5rem);
  border:1px solid var(--aluminium);background:var(--white);display:block}
@media (max-width:1100px){
  .rc-shell{grid-template-columns:1fr}
  .rc-side{position:static;max-block-size:none}
  .rc-frame{block-size:78svh}
}

.hub :where(a,button):focus-visible,
.mrfq :where(a,button):focus-visible,
.hub-btn:focus-visible{
  outline:2px solid var(--white);outline-offset:2px;
  box-shadow:0 0 0 5px var(--petrol)}


#produce{padding-block-end:calc(var(--band) * .45)}
.seam-img{margin-block-start:calc(var(--seam) * -.5)}

#process{padding-block-start:calc(var(--band) * .55 + var(--seam))}

#about{margin-block-start:calc(var(--seam) * -1.55)}

#materials{margin-block-start:calc(var(--seam) * -1.05)}

#film{padding-block-start:calc(var(--band) * .5)}

#occasions{position:relative;overflow:hidden}
#occasions > .shell{padding-block-start:0}
#occasions .sec-head{position:relative;isolation:isolate;color:var(--white);
  padding-block:calc(var(--band) * .42) calc(var(--band) * .5);
  margin-block-end:0}
#occasions .occ{margin-block-start:calc(var(--band) * -.3)}
#occasions .sec-head::before{content:"";position:absolute;z-index:-1;
  inset-block:0;inset-inline:-100vw;background:var(--petrol)}
#occasions .sec-head h2{color:var(--white)}
#occasions .sec-head .sec-kick{color:var(--mint)}
#occasions .sec-head .lede,
#occasions .sec-head .sec-ix{color:var(--aluminium)}
#occasions .sec-head{border-block-end-color:rgba(234,240,238,.28)}


@media (max-width:860px){
  #produce{padding-block-end:calc(var(--band) * .55)}
  .seam-img{margin-block-start:calc(var(--seam) * -.3)}
  #about{margin-block-start:calc(var(--seam) * -1.35)}
  #materials{margin-block-start:calc(var(--seam) * -1.0)}
  #occasions .sec-head{padding-block:calc(var(--band) * .3) calc(var(--band) * .35)}
}

#process{padding-block-start:calc(var(--band) * .15 + var(--seam))}
#about{padding-block-start:calc(var(--band) * .3)}
#materials{padding-block-start:calc(var(--band) * .95)}
#film{padding-block-start:calc(var(--band) * .1)}

@media (max-width:860px){
  #process{padding-block-start:calc(var(--band) * .15 + var(--seam) * .25)}
  #about{padding-block-start:calc(var(--band) * .2)}
  #materials{padding-block-start:calc(var(--band) * .4)}
  #film{padding-block-start:0}
}


.ovl[hidden]{display:none}
.ovl{position:fixed;inset:0;z-index:120;display:grid;place-items:start center;
  padding:clamp(1rem,6vh,5rem) var(--s-4);
  padding-block-start:max(clamp(1rem,6vh,5rem),env(safe-area-inset-top,0px));
  background:rgba(11,58,65,.62);backdrop-filter:blur(3px);overflow-y:auto}
.ovl-card{inline-size:min(560px,100%);background:var(--white);color:var(--ink);
  border-radius:3px;padding:var(--s-5);box-shadow:0 24px 60px -24px rgba(11,58,65,.55);
  display:grid;gap:var(--s-4)}
.ovl-card--search{inline-size:min(680px,100%)}
.ovl-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4)}
.ovl-top h2{margin:0;font-size:clamp(20px,2.4vw,26px);letter-spacing:-.01em}
.ovl-x{inline-size:44px;block-size:44px;display:grid;place-items:center;border:0;
  background:none;color:var(--slate);cursor:pointer;border-radius:2px}
.ovl-x:hover{color:var(--petrol);background:var(--mineral)}
.ovl-input{inline-size:100%;font:inherit;font-size:17px;padding:.75rem .9rem;
  border:1px solid var(--rule);border-radius:2px;background:var(--bg);color:var(--ink)}
.ovl-input:focus-visible{outline:2px solid var(--teal);outline-offset:1px;border-color:var(--teal)}
.ovl-n{margin:0;font-size:13px;color:var(--slate)}
.ovl-out{list-style:none;margin:0;padding:0;display:grid;gap:2px;max-block-size:46vh;overflow-y:auto}
.ovl-out li{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-4)}
.ovl-out a{flex:1 1 auto;min-inline-size:0;padding:.6rem .7rem;text-decoration:none;
  color:var(--ink);border-radius:2px;font-size:15.5px;min-block-size:44px;display:flex;align-items:center}
.ovl-out a:hover{background:var(--mineral);color:var(--petrol)}
.ovl-k{flex:none;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--slate);padding-inline-end:.7rem}
.ovl-empty{margin:0;color:var(--slate);font-size:15px}

.bk-badge{position:absolute;inset-block-start:2px;inset-inline-end:2px;
  min-inline-size:17px;block-size:17px;padding:0 4px;border-radius:9px;
  background:var(--teal);color:var(--white);font:700 11px/17px var(--f-latin);
  text-align:center;font-variant-numeric:tabular-nums}
.iconbtn.qbasket{position:relative}
.bk-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-3)}
.bk-list li{display:grid;grid-template-columns:1fr 84px auto;gap:var(--s-3);
  align-items:center;padding-block-end:var(--s-3);border-block-end:1px solid var(--hairline,var(--rule))}
.bk-t{min-inline-size:0;font-size:15px}
.bk-q{inline-size:100%;font:inherit;font-size:15px;padding:.45rem .5rem;text-align:center;
  border:1px solid var(--rule);border-radius:2px;background:var(--bg);color:var(--ink);
  font-variant-numeric:tabular-nums}
.bk-x{border:0;background:none;color:var(--slate);font:inherit;font-size:13px;cursor:pointer;
  min-block-size:44px;padding-inline:.6rem;border-radius:2px;text-decoration:underline}
.bk-x:hover{color:var(--petrol);background:var(--mineral)}
@media (max-width:480px){.bk-list li{grid-template-columns:1fr 72px auto}}

.rfq-form{display:grid;gap:var(--s-4);margin-block-end:var(--s-5)}
.rfq-form .f{display:grid;gap:.35rem}
.rfq-form label{font-size:13.5px;font-weight:600;letter-spacing:.01em;color:var(--white)}
.f-req,.f-opt{font-weight:400;font-size:13px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--mineral);padding-inline-start:.45em}
.f-opt{color:var(--mineral);opacity:.94}    
.f-help{margin:0;font-size:13px;color:var(--mineral)}
.rfq-form input,.rfq-form textarea{inline-size:100%;font:inherit;font-size:16px;
  padding:.7rem .8rem;border:1px solid rgba(234,240,238,.4);border-radius:2px;
  background:rgba(255,255,255,.08);color:var(--white);min-block-size:44px}
.rfq-form textarea{resize:vertical;line-height:1.55}
.rfq-form input::placeholder,.rfq-form textarea::placeholder{color:rgba(234,240,238,.6)}
.rfq-form input:focus-visible,.rfq-form textarea:focus-visible{
  outline:2px solid var(--white);outline-offset:1px;background:rgba(255,255,255,.14)}
.f-file-row{position:relative;display:block}
.rfq-form .f-file{inline-size:100%;min-block-size:44px;padding:.45rem .5rem;
  border:1px solid rgba(234,240,238,.4);border-radius:2px;
  background:rgba(255,255,255,.08);color:transparent;cursor:pointer}
.rfq-form .f-file::file-selector-button{display:none}
.rfq-form .f-file:focus-visible{outline:2px solid var(--white);outline-offset:1px;
  background:rgba(255,255,255,.14)}
.f-file-face{position:absolute;inset:0;display:flex;align-items:center;gap:.6rem;
  padding:.45rem .5rem;pointer-events:none}
.f-file-btn{flex:none;min-block-size:32px;display:inline-flex;align-items:center;
  padding:.25rem .7rem;border:1px solid var(--white);border-radius:2px;
  color:var(--white);font-weight:600;font-size:14px;line-height:1.6}
.f-file-n{flex:1 1 auto;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;color:var(--white);font-size:14px;line-height:22px;padding-block:2px}
html[lang="ar"] .f-file-n{line-height:26px}
.f-file-row:hover .f-file-btn{background:var(--white);color:var(--teal)}
.f--bad .f-file{border-color:var(--mineral);background:rgba(179,38,30,.22)}
.f--bad input,.f--bad textarea{border-color:var(--mineral);background:rgba(179,38,30,.22)}
.f-err{margin:0;font-size:13px;color:var(--mineral);font-weight:700}
.f-errs{padding:var(--s-4);border:1px solid var(--mineral);border-radius:2px;
  background:rgba(179,38,30,.3);color:var(--white)}
.f-errs ul{margin:.5rem 0 0;padding-inline-start:1.1rem;display:grid;gap:.3rem}
.f-errs a{color:var(--white)}
.f-errs:focus-visible{outline:2px solid var(--white);outline-offset:2px}
.hp{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);
  white-space:nowrap}
.rfq-basket{margin:0;font-size:13.5px;color:var(--mint);font-weight:600}
.rfq-basket .bk-n{font-variant-numeric:tabular-nums}
.f-send{justify-self:start;min-block-size:48px}
.rfq-done{display:grid;gap:var(--s-3);padding:var(--s-5);border-radius:3px;
  background:var(--petrol);border:1px solid rgba(234,240,238,.35);
  margin-block-end:var(--s-5)}
.rfq-done:focus-visible{outline:2px solid var(--white);outline-offset:2px}
.rfq-done{min-inline-size:0;grid-template-columns:minmax(0,1fr)}
#rfq-copy{white-space:normal;text-align:center;overflow-wrap:anywhere;max-inline-size:100%}
.rfq-copytext{inline-size:100%;max-inline-size:100%;min-inline-size:0;box-sizing:border-box;
  resize:vertical;font:inherit;font-size:14px;line-height:1.5;padding:var(--s-3);
  border:1px solid currentColor;border-radius:3px;background:rgba(255,255,255,.12);
  color:inherit;overflow-wrap:anywhere;direction:ltr;text-align:start}
html[lang="ar"] .rfq-copytext{direction:ltr;text-align:left}
.rfq-done h3{margin:0;font-size:22px}
.rfq-ref{margin:0;font-size:17px;font-weight:700}
.rfq-ref .lat{letter-spacing:.06em}
.rfq-blocked{margin:0;padding:var(--s-3);border-radius:2px;font-size:13.5px;font-weight:600;
  background:var(--warn);border:1px solid var(--warn);color:var(--white)}
.vh{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);
  white-space:nowrap}

@media (prefers-reduced-motion:reduce){.ovl{backdrop-filter:none}}

.work > :last-child:nth-child(3n){grid-column:span 12}
.work > :last-child:nth-child(3n) .shot{aspect-ratio:21/9}
@media (max-width:980px){
  .work > :last-child:nth-child(3n){grid-column:span 2}
  .work > :last-child:nth-child(3n) .shot{aspect-ratio:16/9}
}
@media (max-width:620px){
  .work > :last-child:nth-child(3n){grid-column:span 1}
}

@media (max-width:860px){
  #work .sec-head{grid-template-columns:minmax(0,1fr);gap:var(--s-3)}
  #work .sec-head-r{grid-column:1}
}

.oc--typo .shot{display:grid;place-items:center;background:var(--petrol);
  position:relative;overflow:hidden}
.oc--typo .shot::before{content:"";position:absolute;inset:0;
  background:url("brand/construction-lines-restrained-dark.svg") center/cover no-repeat;
  opacity:.5}
.oc--typo .shot::after{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 50% 20%,rgba(120,207,188,.14) 0,transparent 64%)}
.oc-field{position:relative;z-index:1;display:grid;place-items:center}
.oc-field .star{inline-size:16px;block-size:16px}


.slide::after{
  background:
    linear-gradient(var(--veil-dir,to top), rgba(0,0,0,.88) 0%,
                    rgba(0,0,0,.82) 30%, rgba(0,0,0,.66) 55%,
                    rgba(0,0,0,.42) 75%, rgba(0,0,0,.14) 92%,
                    rgba(0,0,0,0) 100%)}
@media (max-width:620px){
  .slide::after{
    background:
      linear-gradient(var(--veil-dir,to top), rgba(0,0,0,.92) 0%,
                      rgba(0,0,0,.86) 40%, rgba(0,0,0,.62) 64%,
                      rgba(0,0,0,.34) 82%, rgba(0,0,0,.10) 95%,
                      rgba(0,0,0,0) 100%)}
}

.cap .shot::after,
.piece .shot::after,
.oc .shot::after{
  background:linear-gradient(to top,rgba(0,0,0,.90) 0%,rgba(0,0,0,.84) 30%,
                             rgba(0,0,0,.66) 55%,rgba(0,0,0,.42) 75%,
                             rgba(0,0,0,.16) 90%,rgba(0,0,0,0) 100%)}

.real-mark,.gen-mark{background-color:rgba(0,0,0,.82)}
.gen-mark{background-color:var(--warn)}

.oc,.piece,.cap{background-color:var(--ink)}


#occasions .oc .shot{position:absolute;inset:0}

.rfq-done[hidden]{display:none}
.rfq-form[hidden]{display:none}

.skip{position:absolute;inset-inline-start:-9999px;inset-block-start:0;z-index:200}
.skip:focus{inset-inline-start:0;inline-size:auto;padding:.7rem 1.1rem;
  background:var(--petrol);color:var(--white);text-decoration:none;
  outline:2px solid var(--petrol);outline-offset:2px;
  box-shadow:0 0 0 2px var(--white)}


@media (max-width:400px){
  :root{--logo-w:167px}
  .hdr-a .hdr-act{gap:0}
  .hero-ui{flex-wrap:wrap;row-gap:var(--s-2)}
  .dots{min-inline-size:0}
  .hero-arrows{min-inline-size:0}
  .rfq-head,.rfq-ask,.rfq-side,.rfq-form{min-inline-size:0;overflow-wrap:anywhere}
}

@media (max-width:344px){
  .hdr-in{gap:4px;flex-wrap:wrap;row-gap:4px}
  .hdr-a .hdr-act{margin-inline-start:auto}
}


:where([id]){scroll-margin-block-start:calc(var(--hdr) + var(--s-4))}

.nav .item > a,.more-panel a,.more-panel .sub a,.mega a,.mega-grp > a,
.hero h1,.hero .d1,.hero-panel > p.hero-copy,
.ovl-card h2,.ovl-card label,.ovl-card li,.bk-list li,.bk-nm,
#rfq h2,#rfq h3,#rfq p,#rfq label,.rfq-ask li,
#materials h3,#materials p,#materials li,.mat-detail h3,.mat-detail p,.mat-uses li,.sw-nm,
.oc h3,.oc-drives,
.hub-item,.hub-ask,
.ftr h3,.ftr li > a,.ftr-brand p{overflow-wrap:anywhere}

@media (max-width:834px){
  body{position:relative}
  .op{position:absolute;inset-block-start:0;inset-inline-end:0;inset-inline-start:auto;
    transform:none;max-inline-size:100%;inline-size:auto;display:block;z-index:96}
  .op-tab{inline-size:auto;min-block-size:44px;flex-direction:row;justify-content:center;
    gap:.5rem;padding:.5rem .8rem}
  .op-tab span{writing-mode:horizontal-tb;transform:none}
  html[dir="rtl"] .op-tab span{writing-mode:horizontal-tb;transform:none}
  .op-tab svg,html[dir="rtl"] .op-tab svg,
  .op-tab[aria-expanded="true"] svg,html[dir="rtl"] .op-tab[aria-expanded="true"] svg{transform:none}
  .op-body{inline-size:100%;max-block-size:none}
}

.hero.slogan-down .hero-slogan{display:none}
.hero.ui-float.slogan-down .hero-grid{
  padding-block-start:0;
  padding-block-end:calc(var(--ui-h,44px) + var(--s-4))}

.ovl-all{display:inline-flex;align-items:center;min-block-size:44px;margin-block-start:var(--s-3);color:var(--teal);font-weight:600;text-decoration:none}
.ovl-all:hover{text-decoration:underline}
.ovl-all[hidden]{display:none}

body.home[class*="page-"] .rfq-head{margin-block-start:0;padding-block-start:var(--s-7)}

.bk-v,.bk-note{grid-column:1 / -1;inline-size:100%;min-block-size:44px;font:inherit;font-size:14px;padding:.5rem .6rem;border:1px solid var(--rule);border-radius:2px;background:var(--bg);color:var(--ink)}
.bk-note::placeholder{color:var(--slate)}
.bk-v:focus-visible,.bk-note:focus-visible{outline:3px solid var(--teal);outline-offset:2px}

.hdr-a .nav .top,
.hdr-a .nav-ovf .top,
.hdr-a .item--home .top,
.hdr-a .item--minor .top{font-size:15px;font-weight:600;line-height:1.3;letter-spacing:0}
.hdr-a .item--home .top,
.hdr-a .item--minor .top{color:var(--fg)}
html[lang="ar"] .hdr-a .nav .top,
html[lang="ar"] .hdr-a .nav-ovf .top,
html[lang="ar"] .hdr-a .item--home .top,
html[lang="ar"] .hdr-a .item--minor .top{font-size:16px}
.hdr-a .nav{gap:2px;margin-inline:clamp(.5rem,1vw,1.1rem) auto}
.hdr-a .hdr-in{column-gap:1rem}

@media (min-width:1201px){
  .hub{inset-inline-end:max(16px,env(safe-area-inset-right,0px));align-items:flex-end;gap:var(--s-2)}
  html[dir="rtl"] .hub{inset-inline-end:max(16px,env(safe-area-inset-left,0px));align-items:flex-end}
  .hub-dock,html[dir="rtl"] .hub-dock{flex-direction:column;align-items:flex-end;gap:6px}
  .hub-ask{border-color:var(--rule);box-shadow:0 10px 26px -12px rgba(11,58,65,.5)}
  .hub-ask-btn{display:inline-flex;align-items:center;gap:.55rem;min-block-size:46px;padding:.5rem .95rem;font:700 15px/1 var(--f-body);letter-spacing:0;color:var(--ink,#0F2426)}
  html[lang="ar"] .hub-ask-btn{font:700 16px/1 var(--f-ar)}
  .hub-ask-btn .orabi-dot,.hub-ask-btn .orabi-dot--tab{margin:0;inline-size:12px;block-size:12px;box-shadow:0 0 0 3px rgba(31,122,77,.2);animation:none}
  .hub-ask-btn:hover{color:var(--teal)}
  .hub-ask-x{flex:none;inline-size:44px;min-inline-size:44px}
  .hub-btn{inline-size:auto;block-size:auto;min-block-size:52px;border-radius:0;padding:0 1.4rem;
    display:inline-flex;align-items:center;justify-content:center;background:var(--petrol);color:var(--white);
    outline:1px solid rgba(255,255,255,.55);outline-offset:-5px;font:700 16px/1 var(--f-body);letter-spacing:0;
    box-shadow:0 12px 30px -10px rgba(11,58,65,.6);touch-action:manipulation;-webkit-tap-highlight-color:transparent}
  html[lang="ar"] .hub-btn{font:700 17px/1 var(--f-ar)}
  .hub-btn:hover{background:var(--teal)}
  .hub-btn .o,.hub-btn .x{display:inline-flex;align-items:center;gap:.65rem;white-space:nowrap}
  .hub-btn .x,.hub-btn[aria-expanded="true"] .o{display:none}
  .hub-btn[aria-expanded="true"] .x{display:inline-flex}
  .hub-btn svg{inline-size:22px;block-size:22px;flex:none}
  .hub-ask-btn{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
  .hub-btn:focus-visible{outline:2px solid var(--white);outline-offset:2px;box-shadow:0 0 0 5px var(--petrol)}
}
@media (min-width:1201px) and (pointer:coarse){ .hub-ask-x{inline-size:44px} .hub-btn{min-block-size:56px} }

.mega{--n:var(--c,3);--col:208px;--gap:28px;
  inset-inline:auto;inset-inline-start:0;
  inline-size:calc(var(--n) * var(--col) + (var(--n) - 1) * var(--gap) + 44px);max-inline-size:calc(100vw - 32px);
  padding:var(--s-4) 22px var(--s-3);max-block-size:calc(100vh - var(--hdr) - 24px)}
@media (max-width:1180px){ .mega{--n:var(--c1,var(--c,3))} }
@media (max-width:900px){ .mega{--n:var(--c2,var(--c,2))} }
.mega-grid{display:block;column-count:var(--n);column-gap:var(--gap)}
.mega-grp{break-inside:avoid;margin-block-end:var(--s-3)}
.mega-grp:last-child{margin-block-end:0}
.mega-grp > a{padding-block:.2rem;gap:.45rem;font-weight:600;min-block-size:28px;align-items:center}
.mega-grp--leaf > a{font-weight:600}
.mega ul{gap:0}
.mega li > a,.mega .sub a{padding:.2rem .5rem;min-block-size:28px;display:flex;align-items:center;font-size:14px;font-weight:400;color:var(--fg-2);line-height:1.3}
html[lang="ar"] .mega li > a,html[lang="ar"] .mega .sub a{font-size:15px}
.mega .sub{margin:.1rem 0 0;padding-inline-start:var(--s-3)}
.mega li > a:hover,.mega .sub a:hover,.mega-grp > a:hover{background:var(--mineral);color:var(--teal)}
.mega li > a:focus-visible,.mega-grp > a:focus-visible{outline:2px solid var(--teal);outline-offset:-2px}
.mega-foot{margin-block-start:var(--s-3);padding-block-start:var(--s-3);gap:var(--s-2) var(--s-4);justify-content:space-between}
.mega-foot .btn{min-block-size:36px;padding:.35rem .9rem;font-size:14px;font-weight:600}
.mega-corp{gap:var(--s-1) var(--s-4)}
.mega-corp a{font-size:13px}
html[lang="ar"] .mega-corp a{font-size:14px}
@media (pointer:coarse){ .mega li > a,.mega .sub a,.mega-grp > a{min-block-size:40px} }
.more-panel{inline-size:max-content;min-inline-size:200px;max-inline-size:min(320px,calc(100vw - 32px));padding:var(--s-2)}
.more-panel a{padding:.4rem .75rem;min-block-size:36px;display:flex;align-items:center;font-size:15px;font-weight:600;color:var(--fg)}
html[lang="ar"] .more-panel a{font-size:16px}
@media (pointer:coarse){ .more-panel a{min-block-size:44px} }
html[lang="ar"] .mega{--col:226px}
.mega-grp--leaf{margin-block-end:2px}
.mega--s .mega-corp{display:none}

.hub--tight .hub-ask{display:none}
#rfq-ref{display:inline-block;direction:ltr;unicode-bidi:isolate;white-space:nowrap}