/* GulfEx home v2: "Editorial Big Type". Tokens in tokens.css; layout and components here. */

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;background:var(--grey-10);color:var(--black-6);font-family:"Dubai","Dubai Fallback",Arial,sans-serif;font-size:1.0625rem;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,picture,video,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,p,figure,dl,dd,ul{margin:0}
ul{list-style:none;padding:0}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
:focus-visible{outline:2px solid var(--plum);outline-offset:3px}
.skip{position:absolute;left:16px;top:-60px;z-index:100;background:var(--black-6);color:#fff;padding:10px 16px;text-decoration:none}
.skip:focus{top:12px}

:root{--header-h:80px;--t-fast:200ms;--t-panel:300ms;--t-line:280ms;--rise:24px}

/* ---------- Grid ---------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
.section{padding-block:clamp(96px,11vw,168px)}

/* ---------- Type ---------- */
.eyebrow{font-size:.8125rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--plum);line-height:1.2;margin-bottom:20px}
.h2{font-size:clamp(2rem,3.6vw,3.5rem);font-weight:700;line-height:1.08;letter-spacing:-.01em}
.h2--xl{font-size:clamp(2.25rem,4.4vw,4.25rem);line-height:1.04;letter-spacing:-.015em}
.tone-1,.tone-2{display:block}
.h2 .tone-2{color:var(--slate)}
.intro{font-size:1.1875rem;line-height:1.6;max-width:52ch;color:var(--slate)}
figcaption{font-size:.875rem;line-height:1.4;color:var(--slate);margin-top:14px;display:flex;gap:12px;align-items:center}
figcaption::before{content:"";width:24px;height:1px;background:var(--grey-100)}

/* ---------- Chamfered frames ---------- */
.frame{position:relative;overflow:hidden;background:var(--grey-50)}
.frame--cut{clip-path:polygon(0 0,calc(100% - var(--cut-m)) 0,100% var(--cut-m),100% 100%,0 100%)}
.frame picture{position:absolute;inset:0}
.frame img{width:100%;height:100%;object-fit:cover}

/* ---------- Buttons and links ---------- */
.btn{--fill:var(--plum);position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:10px;height:48px;padding-inline:22px;font-size:.9375rem;font-weight:500;line-height:1;white-space:nowrap;text-decoration:none;color:#fff}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--fill);clip-path:polygon(0 0,calc(100% - var(--cut-s)) 0,100% var(--cut-s),100% 100%,0 100%);transition:background-color var(--t-fast)}
.btn--primary:hover{--fill:var(--plum-deep)}
.btn--secondary{--fill:transparent;--edge:var(--black-6);color:var(--black-6)}
.btn--secondary::before{background:none;
  /* 1.5px outline that follows the cut corner */
  background:linear-gradient(var(--edge),var(--edge)) top left/calc(100% - var(--cut-s)) 1.5px no-repeat,
    linear-gradient(var(--edge),var(--edge)) bottom/100% 1.5px no-repeat,
    linear-gradient(var(--edge),var(--edge)) left/1.5px 100% no-repeat,
    linear-gradient(var(--edge),var(--edge)) right bottom/1.5px calc(100% - var(--cut-s)) no-repeat,
    linear-gradient(to top right,transparent calc(50% - 1px),var(--edge) calc(50% - .75px),var(--edge) calc(50% + .75px),transparent calc(50% + 1px)) top right/var(--cut-s) var(--cut-s) no-repeat}
.btn--on-dark{--edge:#fff;color:#fff}
.btn--secondary:hover::before{background-color:rgba(16,24,32,.06)}
.btn--on-dark:hover::before{background-color:rgba(255,255,255,.12)}
.arrow{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--t-fast) var(--ease-out)}
.btn:hover .arrow,.link:hover .arrow,.link:focus-visible .arrow{transform:translateX(3px)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}
.link{position:relative;display:inline-flex;align-items:center;gap:8px;font-weight:500;font-size:1rem;line-height:1.4;text-decoration:none;color:var(--black-6);padding-bottom:4px}
.link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--plum);transform:scaleX(0);transform-origin:left;transition:transform var(--t-line) var(--ease-out)}
.link:hover::after,.link:focus-visible::after{transform:scaleX(1)}

/* ---------- 3.0 Header ---------- */
.site-header{position:fixed;inset:0 0 auto;z-index:50;height:var(--header-h);color:#fff;background:transparent;transition:background-color var(--t-fast),color var(--t-fast),box-shadow var(--t-fast)}
.site-header.is-solid,.site-header.is-open{background:var(--grey-10);color:var(--black-6);box-shadow:0 1px 0 var(--grey-50)}
.site-header__inner{height:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);display:flex;align-items:center;gap:clamp(16px,2.4vw,40px)}
.logo{position:relative;flex:none;width:96px;aspect-ratio:900/414;display:block}
.logo img,.logo__grey{position:absolute;inset:0;width:100%;height:100%;transition:opacity var(--t-fast)}
.logo__grey{background:var(--grey-100);-webkit-mask:url(../assets/logos/logo-black-900w.png) center/contain no-repeat;mask:url(../assets/logos/logo-black-900w.png) center/contain no-repeat;opacity:0}
.is-solid .logo img,.is-open .logo img{opacity:0}
.is-solid .logo__grey,.is-open .logo__grey{opacity:1}
.nav{margin-left:auto}
.nav ul{display:flex;gap:clamp(18px,2vw,32px)}
.nav a,.header-phone{position:relative;font-size:.9375rem;font-weight:500;text-decoration:none;line-height:1;padding-block:8px}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform var(--t-line) var(--ease-out)}
.is-solid .nav a::after{background:var(--plum)}
.nav a:hover::after,.nav a:focus-visible::after{transform:scaleX(1)}
.header-phone{display:none;font-weight:400;opacity:.9}
.header-cta{flex:none}
.menu-btn{display:none;align-items:center;gap:10px;height:48px;padding-inline:4px;font-size:.9375rem;font-weight:500}
.menu-btn__bars{position:relative;width:22px;height:12px;border-block:1.5px solid currentColor;transition:border-color var(--t-fast)}
.menu-btn__bars::before,.menu-btn__bars::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;margin-top:-.75px;background:currentColor;opacity:0;transition:transform var(--t-fast),opacity var(--t-fast)}
.is-open .menu-btn__bars{border-color:transparent}
.is-open .menu-btn__bars::before{opacity:1;transform:rotate(45deg)}
.is-open .menu-btn__bars::after{opacity:1;transform:rotate(-45deg)}
.menu-sheet{position:fixed;inset:var(--header-h) 0 0;background:var(--grey-10);color:var(--black-6);padding:32px var(--gutter) 40px;overflow-y:auto;display:flex;flex-direction:column;justify-content:space-between}
.menu-sheet[hidden]{display:none}
.menu-sheet li{border-bottom:1px solid var(--grey-50)}
.menu-sheet nav a{display:block;font-size:clamp(1.75rem,7vw,2.5rem);font-weight:500;line-height:1.1;padding-block:14px;text-decoration:none}
.menu-sheet__phone{margin-top:32px;font-size:1.5rem;font-weight:300;text-decoration:none}
.menu-sheet__phone span{display:block;font-size:.8125rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--slate)}
@media (min-width:1280px){.header-phone{display:inline-block}}
@media (max-width:1023.98px){
  .nav,.header-phone{display:none}
  .header-cta{margin-left:auto}
  .menu-btn{display:inline-flex}
}
@media (max-width:479.98px){
  .header-cta{height:40px;padding-inline:16px}
  .menu-btn__label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .logo{width:84px}
}

/* ---------- 3.1 Hero ---------- */
.hero{position:relative;height:100vh;height:100svh;min-height:640px;max-height:1000px;color:#fff;background:var(--black-6);overflow:hidden;display:flex;align-items:flex-end}
.hero__media,.hero__shade{position:absolute;inset:0}
.hero__video{width:100%;height:100%;object-fit:cover}
.hero__shade{background:
  linear-gradient(to top,rgba(16,24,32,.82) 0%,rgba(16,24,32,.56) 30%,rgba(16,24,32,0) 58%),
  linear-gradient(to right,rgba(16,24,32,.35) 0%,rgba(16,24,32,0) 60%),
  linear-gradient(to bottom,rgba(16,24,32,.45) 0,rgba(16,24,32,0) 160px)}
.hero__content{position:relative;width:100%;padding-bottom:clamp(48px,7vh,96px);align-items:end;row-gap:28px}
.hero__title{grid-column:1/9;font-size:clamp(2.75rem,6vw,6.25rem);font-weight:700;line-height:1;letter-spacing:-.025em}
.hero__title .tone-2{color:var(--grey-75)} /* grey-100 measured 2.7–3.2:1 over bright frames; grey-75 keeps the two-tone and clears 3:1 */
.hero__side{grid-column:9/13;display:flex;flex-direction:column;gap:28px;padding-bottom:.08em}
.hero__sub{font-size:1.0625rem;line-height:1.6;max-width:40ch}
.video-toggle{position:absolute;z-index:2;right:calc((var(--gutter) - 40px)/2);bottom:clamp(48px,7vh,96px);width:40px;height:40px;display:grid;place-items:center;border-radius:50%;color:#fff;background:rgba(16,24,32,.35);box-shadow:inset 0 0 0 1px rgba(255,255,255,.55);transition:background-color var(--t-fast)}
.video-toggle:hover{background:rgba(16,24,32,.6)}
.video-toggle svg{width:14px;height:14px;fill:currentColor;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.video-toggle .i-play,.video-toggle.is-paused .i-pause{display:none}
.video-toggle.is-paused .i-play{display:block}
@media (max-width:1279.98px){.video-toggle{right:var(--gutter);top:calc(var(--header-h) + 16px);bottom:auto}}
@media (max-width:1023.98px){
  .hero__title{grid-column:1/-1}
  .hero__side{grid-column:1/9}
}
@media (max-width:767.98px){
  .hero{align-items:flex-end}
  .hero__shade{background:linear-gradient(to top,rgba(16,24,32,.85) 0%,rgba(16,24,32,.6) 45%,rgba(16,24,32,0) 75%),linear-gradient(to bottom,rgba(16,24,32,.45) 0,rgba(16,24,32,0) 140px)}
  .hero__title{font-size:clamp(2.25rem,9vw,2.75rem);line-height:1.02}
  .hero__side{grid-column:1/-1;gap:24px}
  .hero__content{row-gap:20px;padding-bottom:40px}
  .hero .btn-row .btn{flex:1 1 auto;justify-content:center}
}

/* Load motion: once, then static (no scroll link) */
.js [data-load]{animation:rise 700ms var(--ease-out) both}
.js .hero__sub[data-load]{animation-delay:120ms}
.js .btn-row[data-load]{animation-delay:240ms}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ---------- 3.2 About ---------- */
.about{background:var(--grey-10)}
.about__head{grid-column:1/7}
.about__text{grid-column:8/13;padding-top:34px}
.about__text p{max-width:62ch;color:var(--slate)}
.about__text p+p{margin-top:20px}
.about__text .link{margin-top:32px}
.about__body{margin-top:clamp(64px,7vw,104px);row-gap:clamp(48px,6vw,88px)}
.about__aerial{grid-column:1/8;grid-row:1}
.about__aerial .frame{aspect-ratio:16/10}
.stats{grid-column:8/13;grid-row:1;align-self:start}
.stat{display:grid;grid-template-columns:auto 1fr;align-items:end;column-gap:20px;padding-block:20px;border-top:1px solid var(--grey-50)}
.stat dd{grid-column:1;grid-row:1;font-weight:300;font-size:clamp(3rem,6vw,5.5rem);line-height:.82;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--black-6)}
.stat dt{grid-column:2;grid-row:1;justify-self:end;text-align:right;font-size:.9375rem;line-height:1.35;color:var(--slate);max-width:24ch;padding-bottom:2px;text-wrap:balance}
.stat--lead{border-top:0;padding-top:0}
.stat--lead dd{font-size:clamp(6rem,13vw,12rem);line-height:.78;letter-spacing:-.045em}
.stat--lead dt{justify-self:end;text-align:right;font-size:1.0625rem;color:var(--black-6);max-width:18ch;padding-bottom:10px}
.stat:last-child{border-bottom:1px solid var(--grey-50)}
.about__workers{grid-column:1/-1;grid-row:2}
.about__workers .frame{aspect-ratio:21/9}
@media (max-width:1023.98px){
  .about__head,.about__text{grid-column:1/-1}
  .about__text{padding-top:28px}
  .about__aerial,.stats,.about__workers{grid-column:1/-1;grid-row:auto}
}
@media (max-width:767.98px){
  .stats{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--gap)}
  .stat{grid-template-columns:1fr;row-gap:10px;align-content:start;padding-block:20px 22px}
  .stat dd{font-size:clamp(3rem,13vw,4rem)}
  .stat dt{grid-column:1;grid-row:2;justify-self:start;text-align:left;font-size:.875rem}
  .stat--lead{grid-column:1/-1;grid-template-columns:auto 1fr;padding-bottom:24px}
  .stat--lead dd{font-size:clamp(6rem,30vw,8rem)}
  .stat--lead dt{grid-column:2;grid-row:1}
  .stat:last-child{grid-column:1/-1;grid-template-columns:auto 1fr;align-items:end}
  .stat:last-child dt{grid-column:2;grid-row:1;justify-self:end;text-align:right}
  .about__workers .frame{aspect-ratio:16/9}
}

/* ---------- 3.3 Products ---------- */
.products{background:var(--grey-25)}
.products__title{grid-column:1/8;max-width:16ch}
.products__intro{grid-column:8/13;align-self:end}
.products__body{margin-top:clamp(56px,6vw,88px);align-items:start}
.products__photo{grid-column:1/8;aspect-ratio:4/3}
.products__photo picture{position:absolute;inset:0;opacity:0;transition:opacity var(--t-panel) ease}
.products__photo picture.is-active{opacity:1}
.sectors{grid-column:8/13;border-top:1px solid var(--grey-100)}
.sector{position:relative;border-bottom:1px solid var(--grey-100)}
.sector::before{content:"";position:absolute;left:0;top:-1px;bottom:-1px;width:3px;background:var(--plum);transform:scaleY(0);transform-origin:top;transition:transform var(--t-panel) var(--ease-out)}
.sector--green::before{background:var(--green)}
.sector.is-active::before{transform:scaleY(1)}
.sector__h{font:inherit}
.sector__btn{width:100%;display:flex;align-items:baseline;gap:20px;padding:22px 0 22px 0;text-align:left;transition:padding-left var(--t-panel) var(--ease-out)}
.sector.is-active .sector__btn{padding-left:24px}
.sector__btn:focus-visible{outline-offset:-2px}
.sector__i{font-size:.875rem;line-height:1;color:var(--slate);font-variant-numeric:tabular-nums;min-width:2ch}
.sector__name{font-size:clamp(1.5rem,2.4vw,2.25rem);font-weight:500;line-height:1.1;color:var(--slate);transition:color var(--t-fast)}
.sector__btn:hover .sector__name,.sector.is-active .sector__name{color:var(--black-6)}
.sector__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t-panel) var(--ease-out)}
.sector.is-active .sector__panel{grid-template-rows:1fr}
.sector__inner{overflow:hidden;min-height:0;padding-left:calc(24px + 2ch + 20px)}
.sector__inner p{max-width:44ch;color:var(--slate);padding-top:2px}
.sector__inner .link{margin:18px 0 26px}
@media (max-width:1023.98px){
  .products__title,.products__intro{grid-column:1/-1}
  .products__intro{margin-top:24px}
  .products__photo,.sectors{grid-column:1/-1}
  .sectors{margin-top:32px}
}
@media (max-width:767.98px){
  .sector__inner{padding-left:24px}
  .sector__btn{gap:14px;padding-block:18px}
}

/* ---------- Reveal (once, 15% in view) ---------- */
.js .reveal{opacity:0;transform:translateY(var(--rise));transition:opacity 700ms var(--ease-out),transform 700ms var(--ease-out);transition-delay:var(--d,0ms)}
.js .reveal.is-in{opacity:1;transform:none}

/* ---------- Reduced motion: everything instant ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal{opacity:1;transform:none}
}