/* =========================================================
   Rowad Rafal Iraq — "Sun on steel"
   Dark base, signage yellow, oversized display type
   ========================================================= */
:root{
  --void:#0C1216;
  --ink:#131C22;
  --ink-2:#1B262E;
  --steel:#28363F;
  --line:rgba(255,255,255,.11);
  --sun:#FFC115;
  --sun-hot:#FF9A0C;
  --sun-deep:#A86B00;
  --haze:#9BADBA;
  --paper:#F4F7F8;
  --paper-2:#E7EDF0;
  --white:#fff;

  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --body:"IBM Plex Sans","Segoe UI",Arial,sans-serif;

  --wrap:1240px;
  --gutter:26px;
  --sect:120px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--void)}
body{
  margin:0;background:var(--void);color:var(--haze);
  font-family:var(--body);font-size:17px;line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:var(--sun);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--sun);outline-offset:3px}

h1,h2,h3,h4{
  font-family:var(--display);font-weight:800;font-stretch:112%;
  color:var(--white);letter-spacing:-.028em;line-height:.98;margin:0 0 .42em;
}
h1{font-size:clamp(3rem,8.4vw,7.2rem)}
h2{font-size:clamp(2.3rem,5.4vw,4.4rem);text-wrap:balance}
h3{font-size:1.3rem;line-height:1.2;letter-spacing:-.015em;font-weight:700}
p{margin:0 0 1.15em;max-width:66ch}
ul{margin:0 0 1.15em;padding-left:1.15em}
li{margin-bottom:.42em}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.lead{font-size:1.2rem;line-height:1.6;color:#B8C7D2}
/* Visually hidden until focused. Clipping rather than an off-screen
   offset, so it never counts as scrollable overflow in right-to-left. */
.skip{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0;
}
.skip:focus{
  position:fixed;top:14px;inset-inline-start:14px;width:auto;height:auto;margin:0;
  clip-path:none;z-index:300;background:var(--sun);color:var(--void);padding:12px 18px;
}

/* ===================== Header ===================== */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:80;
  background:transparent;border-bottom:1px solid transparent;
  transition:background .35s ease,border-color .35s ease,backdrop-filter .35s ease;
}
.site-header.solid{background:rgba(12,18,22,.92);border-bottom-color:var(--line);backdrop-filter:blur(10px)}
.site-header .bar{display:flex;align-items:center;justify-content:space-between;gap:22px;min-height:92px;transition:min-height .3s ease}
.site-header.solid .bar{min-height:70px}

.brand{display:flex;align-items:center;gap:13px}
.brand:hover{text-decoration:none}
.brand img{height:48px;width:auto;transition:height .3s ease}
.site-header.solid .brand img{height:40px}
.brand__txt{display:flex;flex-direction:column;line-height:1}
.brand__txt b{font-family:var(--display);font-weight:800;font-stretch:112%;font-size:1.24rem;color:var(--white);letter-spacing:-.03em}
.brand__txt i{font-style:normal;font-size:.7rem;color:var(--sun);letter-spacing:.09em;margin-top:6px;text-transform:none}

.nav-list{display:flex;align-items:center;gap:38px;list-style:none;margin:0;padding:0}
.nav-list a{
  font-family:var(--display);font-weight:600;font-stretch:110%;font-size:.97rem;
  color:#CFDAE2;padding:8px 0;display:inline-block;position:relative;
}
.nav-list a::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--sun);
  transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.22,.61,.36,1);
}
.nav-list a:hover{color:var(--white);text-decoration:none}
.nav-list a:hover::after{transform:scaleX(1)}
.nav-list a[aria-current="page"]{color:var(--sun)}
.nav-list a[aria-current="page"]::after{transform:scaleX(1)}

.nav-toggle{
  display:none;border:1px solid var(--line);background:rgba(255,255,255,.06);
  width:48px;height:46px;cursor:pointer;align-items:center;justify-content:center;
}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{
  content:"";display:block;width:20px;height:2px;background:var(--white);position:relative;
}
.nav-toggle span::before{position:absolute;top:-6px}
.nav-toggle span::after{position:absolute;top:6px}

/* ===================== Buttons ===================== */
.btn{
  display:inline-block;font-family:var(--display);font-weight:700;font-stretch:110%;
  font-size:1rem;padding:17px 32px;border:2px solid transparent;cursor:pointer;
  transition:background .22s,color .22s,border-color .22s,transform .2s,box-shadow .25s;
}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--sun{background:var(--sun);color:var(--void);border-color:var(--sun)}
.btn--sun:hover{background:var(--white);border-color:var(--white);box-shadow:0 16px 34px -18px rgba(255,193,21,.85)}
.btn--line{background:transparent;color:var(--white);border-color:rgba(255,255,255,.4)}
.btn--line:hover{border-color:var(--sun);color:var(--sun)}
.btn--dark{background:var(--void);color:var(--white);border-color:var(--void)}
.btn--dark:hover{background:var(--steel);border-color:var(--steel);color:var(--white)}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px}

/* ===================== Hero ===================== */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--void)}
.hero__media{position:absolute;inset:0;overflow:hidden}
.hero__media img{width:100%;height:110%;object-fit:cover;will-change:transform}
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(120% 85% at 78% 18%,rgba(255,154,12,.34) 0%,rgba(255,154,12,0) 58%),
    linear-gradient(180deg,rgba(12,18,22,.86) 0%,rgba(12,18,22,.42) 34%,rgba(12,18,22,.93) 88%,var(--void) 100%);
}
.hero__inner{position:relative;z-index:2;padding-block:170px 60px;width:100%}
.hero h1{max-width:14ch;margin-bottom:0;text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--sun);display:block}
.hero__sub{max-width:52ch;margin-top:30px;font-size:1.22rem;color:#C6D4DE}
.hero__facts{
  display:flex;flex-wrap:wrap;gap:0;margin-top:62px;border-top:1px solid var(--line);
}
.hero__fact{padding:22px 34px 4px;border-right:1px solid var(--line);flex:1 1 190px}
.hero__fact:first-child{padding-left:0}
.hero__fact:last-child{border-right:0}
.hero__fact b{display:block;font-family:var(--display);font-weight:800;font-stretch:112%;font-size:1.06rem;color:var(--white);letter-spacing:-.02em}
.hero__fact span{font-size:.92rem;color:var(--haze);display:block;margin-top:5px;line-height:1.45}

/* ===================== Yellow ticker ===================== */
.ticker{background:var(--sun);color:var(--void);overflow:hidden;padding:20px 0;position:relative}
.ticker__track{display:flex;width:max-content;animation:tick 38s linear infinite}
.ticker span{
  font-family:var(--display);font-weight:800;font-stretch:112%;
  font-size:clamp(1.5rem,3.1vw,2.5rem);letter-spacing:-.03em;
  padding:0 26px;white-space:nowrap;display:inline-flex;align-items:center;gap:26px;
}
.ticker span::after{content:"";width:11px;height:11px;background:var(--void);border-radius:50%;display:inline-block}
.ticker:hover .ticker__track{animation-play-state:paused}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ===================== Sections ===================== */
.sect{padding:var(--sect) 0;position:relative}
.sect--paper{background:var(--paper);color:#3D4A54}
.sect--paper h1,.sect--paper h2,.sect--paper h3{color:var(--void)}
.sect--paper .lead{color:#5A6B77}
.sect--ink{background:var(--ink)}
.sect--tight{padding:88px 0}
.sect--glow{overflow:hidden}
.sect--glow::before{
  content:"";position:absolute;left:50%;top:-140px;width:900px;height:520px;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(255,154,12,.16) 0%,rgba(255,154,12,0) 70%);
}
.sect__head{max-width:34ch;margin-bottom:64px}
.sect__head p{margin-bottom:0;max-width:52ch}
.sect__head:not(.sect__head--wide) p{max-width:50ch}
.sect__head--wide{max-width:none;display:grid;grid-template-columns:1.1fr 1fr;gap:52px;align-items:end}
.sect__head--wide h2{margin-bottom:0;max-width:14ch}

/* ===================== Page head ===================== */
.page-head{position:relative;padding:190px 0 96px;overflow:hidden;background:var(--ink)}
.page-head::before{
  content:"";position:absolute;right:-8%;top:-60%;width:56%;height:220%;
  background:linear-gradient(160deg,rgba(255,193,21,.16),rgba(255,154,12,0) 62%);
  transform:skewX(-13deg);
}
.page-head .wrap{position:relative;z-index:2}
.page-head h1{font-size:clamp(2.6rem,6.4vw,5.2rem);margin-bottom:20px}
.page-head p{max-width:58ch;margin:0;font-size:1.14rem;color:#C0CFD9}
.crumb{font-family:var(--display);font-weight:600;font-size:.9rem;color:var(--sun);margin:0 0 22px}
.crumb a{color:var(--haze)}
.crumb a:hover{color:var(--sun)}

/* ===================== Split ===================== */
.split{display:grid;grid-template-columns:1fr 1.08fr;gap:80px;align-items:center}
.split h2,.visit h2{font-size:clamp(2rem,3.6vw,3.1rem)}
.split__media{position:relative;overflow:hidden}
.split__media img{width:100%;aspect-ratio:4/3;object-fit:cover;will-change:transform}
.split__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(200deg,rgba(255,193,21,.16),rgba(0,0,0,0) 55%);
  pointer-events:none;
}
.split__tag{
  position:absolute;left:0;bottom:0;z-index:2;background:var(--sun);color:var(--void);
  font-family:var(--display);font-weight:800;font-stretch:112%;font-size:1.02rem;
  padding:16px 24px;max-width:74%;line-height:1.25;
}

/* ===================== Horizontal product rail ===================== */
.rail{
  display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:6px var(--gutter) 34px;margin-inline:calc(var(--gutter) * -1);
  scrollbar-width:thin;scrollbar-color:var(--sun) rgba(255,255,255,.09);
}
.rail::-webkit-scrollbar{height:5px}
.rail::-webkit-scrollbar-track{background:rgba(255,255,255,.09)}
.rail::-webkit-scrollbar-thumb{background:var(--sun)}
.pcard{
  flex:0 0 clamp(280px,32vw,400px);scroll-snap-align:start;
  background:var(--ink-2);position:relative;overflow:hidden;
  transition:transform .38s cubic-bezier(.22,.61,.36,1);
}
.pcard:hover{transform:translateY(-8px)}
.pcard__img{aspect-ratio:1/1;overflow:hidden;position:relative}
.pcard__img img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.22,.61,.36,1)}
.pcard:hover .pcard__img img{transform:scale(1.07)}
.pcard__img::after{
  content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,18,22,0) 40%,rgba(12,18,22,.85) 100%);
}
.pcard__label{
  position:absolute;left:24px;bottom:20px;z-index:2;
  font-family:var(--display);font-weight:800;font-stretch:112%;
  font-size:1.55rem;color:var(--white);letter-spacing:-.03em;line-height:1.05;
}
.pcard__body{padding:26px 24px 30px;border-top:3px solid var(--sun)}
.pcard__body p{font-size:.99rem;margin:0;color:var(--haze)}
.pcard__tags{list-style:none;padding:0;margin:16px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.pcard__tags li{
  margin:0;font-family:var(--display);font-weight:600;font-size:.8rem;
  color:var(--sun);border:1px solid rgba(255,193,21,.45);padding:4px 12px;
}
.rail-hint{font-size:.9rem;color:var(--haze);margin:0}

/* ===================== Reasons (big list) ===================== */
.reasons{border-top:1px solid var(--line)}
.reason{
  display:grid;grid-template-columns:auto 1fr 1.15fr;gap:40px;align-items:baseline;
  padding:36px 0;border-bottom:1px solid var(--line);position:relative;
}
.reason::before{
  content:"";position:absolute;left:0;right:0;top:0;bottom:0;
  background:linear-gradient(90deg,rgba(255,193,21,.10),rgba(255,193,21,0) 60%);
  opacity:0;transition:opacity .35s ease;pointer-events:none;
}
.reason:hover::before{opacity:1}
.reason__mark{width:26px;height:4px;background:var(--sun);display:block;transition:width .35s cubic-bezier(.22,.61,.36,1)}
.reason:hover .reason__mark{width:44px}
.reason h3{margin:0;font-size:clamp(1.35rem,2.5vw,2rem);font-weight:800;font-stretch:112%;letter-spacing:-.028em}
.reason p{margin:0;font-size:1rem}

/* ===================== Timeline ===================== */
.process{display:grid;grid-template-columns:1.05fr .9fr;gap:76px;align-items:start}
.process__media{position:sticky;top:120px;overflow:hidden}
.process__media img{width:100%;aspect-ratio:3/4;object-fit:cover}
.timeline{position:relative;padding-left:78px}
.timeline__rail{position:absolute;left:26px;top:12px;bottom:12px;width:2px;background:rgba(255,255,255,.14)}
.sect--paper .timeline__rail{background:rgba(0,0,0,.12)}
.timeline__fill{position:absolute;left:0;top:0;width:100%;height:0;background:var(--sun);transition:height .18s linear}
.tstep{position:relative;padding:0 0 58px}
.tstep:last-child{padding-bottom:0}
.tstep__dot{
  position:absolute;left:-64px;top:2px;width:54px;height:54px;
  display:grid;place-items:center;background:var(--paper-2);color:var(--void);
  font-family:var(--display);font-weight:800;font-size:1.02rem;border-radius:50%;
  transition:background .35s ease,color .35s ease,transform .35s ease;
}
.tstep.lit .tstep__dot{background:var(--sun);transform:scale(1.06)}
.tstep h3{font-size:clamp(1.25rem,2.2vw,1.8rem);font-weight:800;font-stretch:112%;margin-bottom:10px}
.tstep p{margin:0;font-size:1.03rem;max-width:52ch}

/* ===================== Mosaic ===================== */
.mosaic{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:230px;gap:14px}
.mosaic a{display:block;overflow:hidden;position:relative;background:var(--ink-2)}
.mosaic img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.22,.61,.36,1)}
.mosaic a::after{
  content:"";position:absolute;inset:0;background:rgba(255,193,21,0);transition:background .35s ease;
}
.mosaic a:hover img{transform:scale(1.07)}
.mosaic a:hover::after{background:rgba(255,193,21,.14)}
.mosaic .tall{grid-row:span 2}
.mosaic .wide{grid-column:span 2}

/* ===================== Gallery (projects page) ===================== */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.shot{position:relative;overflow:hidden;background:var(--ink-2)}
.shot__img{aspect-ratio:4/3;overflow:hidden}
.shot__img img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.22,.61,.36,1)}
.shot:hover .shot__img img{transform:scale(1.06)}
.shot figcaption{padding:22px 24px 26px;border-top:3px solid var(--sun)}
.shot figcaption b{display:block;font-family:var(--display);font-weight:800;font-stretch:112%;color:var(--white);font-size:1.1rem;margin-bottom:6px;letter-spacing:-.02em}
.shot figcaption span{font-size:.94rem;color:var(--haze);line-height:1.55}

/* ===================== Showroom marquee ===================== */
.marquee{position:relative;overflow:hidden;padding:8px 0}
.marquee::before,.marquee::after{content:"";position:absolute;top:0;bottom:0;width:110px;z-index:2;pointer-events:none}
.marquee::before{left:0;background:linear-gradient(90deg,var(--ink),rgba(27,38,46,0))}
.marquee::after{right:0;background:linear-gradient(270deg,var(--ink),rgba(27,38,46,0))}
.marquee__track{display:flex;gap:18px;width:max-content;animation:marq 56s linear infinite}
.marquee:hover .marquee__track,.marquee:focus-within .marquee__track{animation-play-state:paused}
.marquee figure{margin:0;flex:0 0 auto;width:330px}
.marquee img{width:100%;height:240px;object-fit:cover;display:block}
.marquee figcaption{font-size:.88rem;color:var(--haze);margin-top:12px;line-height:1.45}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 9px))}}

/* ===================== Visit ===================== */
.visit{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.visit__media{position:relative;overflow:hidden}
.visit__media img{width:100%;aspect-ratio:4/3;object-fit:cover}

/* ===================== Detail rows (products page) ===================== */
.detail{
  display:grid;grid-template-columns:1fr 1fr;gap:76px;align-items:center;
  padding:84px 0;border-bottom:1px solid var(--line);
}
.detail:last-child{border-bottom:0}
.detail:nth-child(even) .detail__media{order:2}
.detail__media{position:relative;overflow:hidden}
.detail__media img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .9s cubic-bezier(.22,.61,.36,1)}
.detail:hover .detail__media img{transform:scale(1.04)}
.detail__no{
  font-family:var(--display);font-weight:800;font-stretch:112%;font-size:.92rem;
  color:var(--sun);margin:0 0 14px;
}
.detail h2{font-size:clamp(1.9rem,3.6vw,3rem)}
.detail__list{list-style:none;padding:0;margin:24px 0 0}
.detail__list li{position:relative;padding-left:26px;margin-bottom:11px;font-size:1.02rem}
.detail__list li::before{content:"";position:absolute;left:0;top:.66em;width:12px;height:2px;background:var(--sun);transition:width .3s}
.detail:hover .detail__list li::before{width:18px}

/* ===================== Gold CTA ===================== */
.cta{background:var(--sun);color:var(--void);position:relative;overflow:hidden}
.cta .wrap{padding-block:110px;position:relative;z-index:2}
.cta h2{color:var(--void);max-width:15ch;font-size:clamp(2.5rem,6.2vw,5rem)}
.cta p{color:rgba(12,18,22,.78);max-width:50ch;font-size:1.16rem}
.cta .btn--dark{border-color:var(--void)}
.cta__ghost{
  position:absolute;right:-2%;top:50%;translate:0 -50%;
  font-family:var(--display);font-weight:800;font-stretch:112%;
  font-size:clamp(6rem,17vw,15rem);color:rgba(12,18,22,.08);line-height:.8;
  pointer-events:none;user-select:none;
}

/* ===================== Contact ===================== */
.contact-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:76px;align-items:start}
.field{margin-bottom:20px}
.field label{display:block;font-family:var(--display);font-weight:600;font-size:.93rem;color:var(--white);margin-bottom:8px}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--body);font-size:1rem;color:var(--white);
  padding:15px 17px;border:1px solid var(--line);background:var(--ink-2);
}
.field textarea{min-height:160px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:#6D808D}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--sun);outline:2px solid rgba(255,193,21,.25)}
.form-note{font-size:.9rem;color:var(--haze);margin-top:16px}
.alert{padding:16px 20px;margin-bottom:24px;font-size:.98rem;border-left:4px solid}
.alert--ok{background:rgba(60,160,90,.14);border-color:#4CAF6D;color:#B6E8C6}
.alert--err{background:rgba(200,60,60,.14);border-color:#D9534F;color:#F3B9B7}

.info-card{background:var(--ink-2);border-top:4px solid var(--sun);padding:40px 36px}
.info-row{padding:20px 0;border-bottom:1px solid var(--line)}
.info-row:last-child{border-bottom:0;padding-bottom:0}
.info-row:first-child{padding-top:0}
.info-row b{display:block;font-family:var(--display);font-weight:700;color:var(--sun);font-size:.86rem;letter-spacing:.06em;margin-bottom:7px}
.info-row span,.info-row a{font-size:1.03rem;color:#CBD8E1;display:block;line-height:1.55}
.info-row a:hover{color:var(--sun)}

/* ===================== Footer ===================== */
.site-footer{background:var(--void);color:var(--haze);padding:96px 0 0;font-size:.97rem;border-top:1px solid var(--line)}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1.3fr;gap:60px;padding-bottom:62px}
.fbrand{display:inline-flex;align-items:center;gap:13px;margin-bottom:24px}
.fbrand:hover{text-decoration:none}
.fbrand img{height:54px;width:auto}
.fbrand span{display:flex;flex-direction:column;line-height:1}
.fbrand b{font-family:var(--display);font-weight:800;font-stretch:112%;font-size:1.24rem;color:var(--white);letter-spacing:-.03em}
.fbrand i{font-style:normal;font-size:.7rem;color:var(--sun);letter-spacing:.09em;margin-top:6px}
.site-footer p{max-width:44ch;margin-bottom:0}
.site-footer h4{font-family:var(--display);color:var(--white);font-size:.86rem;letter-spacing:.09em;margin:0 0 20px;font-weight:700}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin-bottom:12px}
.site-footer a{color:var(--haze)}
.site-footer a:hover{color:var(--sun);text-decoration:none}
.footer-bottom{border-top:1px solid var(--line);padding:24px 0 30px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.9rem}
.footer-bottom a{color:var(--sun);font-weight:600}

/* ===================== Lightbox ===================== */
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(8,12,15,.97);display:none;align-items:center;justify-content:center;padding:34px}
.lightbox.open{display:flex}
.lightbox img{max-width:min(1150px,94vw);max-height:86vh;width:auto}
.lightbox__close{position:absolute;top:20px;right:24px;background:transparent;border:0;color:var(--sun);font-size:2.6rem;line-height:1;cursor:pointer;padding:8px 12px}

/* ===================== Motion ===================== */
@keyframes riseIn{from{opacity:0;translate:0 26px}to{opacity:1;translate:0 0}}
@keyframes ruleGrow{from{width:0}to{width:100%}}

.js .hero h1,.js .hero__sub,.js .hero .btn-row,.js .hero__facts{opacity:0;animation:riseIn .9s cubic-bezier(.22,.61,.36,1) forwards}
.js .hero h1{animation-delay:.12s}
.js .hero__sub{animation-delay:.36s}
.js .hero .btn-row{animation-delay:.5s}
.js .hero__facts{animation-delay:.64s}
.js .page-head .crumb,.js .page-head h1,.js .page-head p{opacity:0;animation:riseIn .75s cubic-bezier(.22,.61,.36,1) forwards}
.js .page-head .crumb{animation-delay:.06s}
.js .page-head h1{animation-delay:.16s}
.js .page-head p{animation-delay:.3s}

.js .sect__head,.js .pcard,.js .reason,.js .tstep,.js .shot,.js .mosaic a,
.js .split > div,.js .detail > div,.js .info-card,.js .contact-grid > div,
.js .visit > div,.js .cta .wrap > *{
  opacity:0;translate:0 26px;
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),translate .7s cubic-bezier(.22,.61,.36,1);
}
.js .is-in{opacity:1 !important;translate:0 0 !important}

.js .rail > :nth-child(2),.js .gallery > :nth-child(2),.js .mosaic > :nth-child(2){transition-delay:.08s}
.js .rail > :nth-child(3),.js .gallery > :nth-child(3),.js .mosaic > :nth-child(3){transition-delay:.16s}
.js .rail > :nth-child(4),.js .gallery > :nth-child(4),.js .mosaic > :nth-child(4){transition-delay:.24s}
.js .rail > :nth-child(5),.js .gallery > :nth-child(5),.js .mosaic > :nth-child(5){transition-delay:.32s}
.js .gallery > :nth-child(6){transition-delay:.4s}
.js .split > :nth-child(2),.js .detail > :nth-child(2),
.js .contact-grid > :nth-child(2),.js .visit > :nth-child(2){transition-delay:.14s}
.js .reason:nth-child(2){transition-delay:.06s}
.js .reason:nth-child(3){transition-delay:.12s}
.js .reason:nth-child(4){transition-delay:.18s}
.js .reason:nth-child(5){transition-delay:.24s}

/* ===================== Responsive ===================== */
@media (max-width:1080px){
  :root{--sect:92px}
  .sect__head--wide{grid-template-columns:1fr;gap:26px;align-items:start}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr;gap:44px}
  .reason{grid-template-columns:auto 1fr;gap:16px 28px}
  .reason p{grid-column:2}
  .reason__mark{margin-top:.7em}
  .mosaic{grid-auto-rows:190px}
}
@media (max-width:900px){
  .nav-toggle{display:flex}
  .site-nav{
    position:fixed;inset:92px 0 auto;background:rgba(12,18,22,.98);backdrop-filter:blur(12px);
    border-bottom:1px solid var(--line);padding:8px 0 24px;display:none;
  }
  .site-header.solid .site-nav{inset-block-start:70px}
  .site-nav.open{display:block}
  .nav-list{flex-direction:column;align-items:stretch;gap:0;padding:0 var(--gutter)}
  .nav-list li{border-bottom:1px solid var(--line)}
  .nav-list a{padding:17px 0;font-size:1.1rem;width:100%}
  .split,.detail,.contact-grid,.visit,.process{grid-template-columns:1fr;gap:42px}
  .process__media{position:static;order:-1}
  .process__media img{aspect-ratio:16/9}
  .detail:nth-child(even) .detail__media{order:0}
  .detail{padding:58px 0}
  .hero__inner{padding-block:140px 48px}
  .hero__fact{padding:20px 24px 4px}
  .hero__fact:first-child{padding-left:0}
  .mosaic{grid-template-columns:repeat(2,1fr);grid-auto-rows:165px}
  .marquee figure{width:250px}
  .marquee img{height:180px}
  .marquee::before,.marquee::after{width:50px}
  .cta .wrap{padding-block:80px}
}
@media (max-width:600px){
  :root{--sect:72px;--gutter:20px}
  body{font-size:16px}
  h1{font-size:clamp(2.6rem,11vw,3.6rem)}
  .site-header .bar{min-height:76px}
  .site-nav{inset-block-start:76px}
  .brand img{height:40px}
  .brand__txt b{font-size:1.05rem}
  .brand__txt i{display:none}
  .gallery{grid-template-columns:1fr}
  .btn{width:100%;text-align:center}
  .hero__facts{flex-direction:column;margin-top:44px}
  .hero__fact{border-right:0;border-bottom:1px solid var(--line);padding:18px 0}
  .hero__fact:last-child{border-bottom:0}
  .timeline{padding-left:56px}
  .timeline__rail{left:18px}
  .tstep__dot{left:-56px;width:40px;height:40px;font-size:.88rem}
  .info-card{padding:32px 26px}
  .footer-grid{grid-template-columns:1fr;gap:38px;padding-bottom:44px}
  .reason{grid-template-columns:1fr;gap:10px;padding:28px 0}
  .reason p,.reason__mark{grid-column:auto}
  .process__media{display:none}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  .js .hero h1,.js .hero__sub,.js .hero .btn-row,.js .hero__facts,
  .js .page-head .crumb,.js .page-head h1,.js .page-head p{opacity:1}
  .js .sect__head,.js .pcard,.js .reason,.js .tstep,.js .shot,.js .mosaic a,
  .js .split > div,.js .detail > div,.js .info-card,.js .contact-grid > div,
  .js .visit > div,.js .cta .wrap > *{opacity:1;translate:none}
  .marquee__track,.ticker__track{animation:none;flex-wrap:wrap;width:auto}
  .marquee::before,.marquee::after{display:none}
}

/* ===================== Direct contact actions ===================== */
.cactions{display:grid;gap:14px;margin-top:38px}
.caction{
  display:block;padding:26px 30px;background:var(--ink-2);
  border-left:4px solid var(--sun);position:relative;overflow:hidden;
  transition:transform .3s cubic-bezier(.22,.61,.36,1),background .3s ease;
}
.caction::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(255,193,21,.14),rgba(255,193,21,0) 65%);
  opacity:0;transition:opacity .3s ease;
}
.caction:hover{transform:translateX(6px);background:var(--steel);text-decoration:none}
.caction:hover::after{opacity:1}
.caction b{
  display:block;font-family:var(--display);font-weight:800;font-stretch:112%;
  font-size:1.35rem;color:var(--white);letter-spacing:-.025em;position:relative;z-index:2;
}
.caction span{display:block;font-size:1rem;color:var(--haze);margin-top:6px;position:relative;z-index:2}
.caction:hover span{color:#CBD8E1}
@media (max-width:600px){.caction{padding:22px 22px}.caction b{font-size:1.15rem}}

/* =========================================================
   Arabic / right-to-left
   ========================================================= */
[dir="rtl"]{
  --display:"Almarai","Segoe UI",Tahoma,sans-serif;
  --body:"Almarai","Segoe UI",Tahoma,sans-serif;
}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4{
  font-weight:800;font-stretch:normal;letter-spacing:0;line-height:1.24;
}
[dir="rtl"] h1{font-size:clamp(2.5rem,7vw,5.6rem)}
[dir="rtl"] h2{font-size:clamp(2rem,4.6vw,3.6rem)}
[dir="rtl"] body{line-height:1.85}
[dir="rtl"] .lead{line-height:1.8}
/* Arabic has no case distinction and reads wider — give lines more room. */
[dir="rtl"] p{max-width:60ch}
[dir="rtl"] .hero h1{max-width:18ch}
[dir="rtl"] .sect__head{max-width:40ch}
[dir="rtl"] .sect__head--wide{max-width:none}
[dir="rtl"] .sect__head--wide h2{max-width:22ch}
[dir="rtl"] .cta h2{max-width:18ch}

/* Latin fragments inside Arabic (numbers, product codes, email) */
[dir="rtl"] [dir="ltr"]{display:inline-block;font-family:"IBM Plex Sans",Arial,sans-serif}
[dir="rtl"] .pcard__tags li{font-family:var(--body)}

/* ---- mirrored structure ---- */
[dir="rtl"] .hero__fact:first-child{padding-left:34px;padding-right:0}
[dir="rtl"] .hero__fact{border-right:0;border-left:1px solid var(--line)}
[dir="rtl"] .hero__fact:last-child{border-left:0}
[dir="rtl"] .hero__media::after{
  background:
    radial-gradient(120% 85% at 22% 18%,rgba(255,154,12,.34) 0%,rgba(255,154,12,0) 58%),
    linear-gradient(180deg,rgba(12,18,22,.86) 0%,rgba(12,18,22,.42) 34%,rgba(12,18,22,.93) 88%,var(--void) 100%);
}
[dir="rtl"] .page-head::before{right:auto;left:-8%;transform:skewX(13deg)}
[dir="rtl"] .nav-list a::after{left:auto;right:0;transform-origin:right}
[dir="rtl"] .split__tag{left:auto;right:0}
[dir="rtl"] .split__media::after{
  background:linear-gradient(160deg,rgba(255,193,21,.16),rgba(0,0,0,0) 55%);
}
[dir="rtl"] .pcard__label{left:auto;right:24px}
[dir="rtl"] .badge{left:auto;right:10px}
[dir="rtl"] .reason::before{
  background:linear-gradient(270deg,rgba(255,193,21,.10),rgba(255,193,21,0) 60%);
}
[dir="rtl"] .cta__ghost{right:auto;left:-2%}
[dir="rtl"] .info-card,[dir="rtl"] .caction{border-left:0}
[dir="rtl"] .caction{border-right:4px solid var(--sun)}
[dir="rtl"] .caction::after{
  background:linear-gradient(270deg,rgba(255,193,21,.14),rgba(255,193,21,0) 65%);
}
[dir="rtl"] .caction:hover{transform:translateX(-6px)}
[dir="rtl"] .detail__list li{padding-left:0;padding-right:26px}
[dir="rtl"] .detail__list li::before{left:auto;right:0}
[dir="rtl"] .timeline{padding-left:0;padding-right:78px}
[dir="rtl"] .timeline__rail{left:auto;right:26px}
[dir="rtl"] .tstep__dot{left:auto;right:-64px}
[dir="rtl"] .rail{
  padding-inline:var(--gutter);
  margin-inline:calc(var(--gutter) * -1);
}

/* The looping strips stay left-to-right in both languages: the track is
   wider than the screen, and in RTL it would otherwise be anchored to the
   right edge and slide out of view. Only the motion is reversed, and each
   item is set back to RTL so its own text reads correctly. */
[dir="rtl"] .ticker,
[dir="rtl"] .marquee,
[dir="rtl"] .ticker__track,
[dir="rtl"] .marquee__track{direction:ltr}
[dir="rtl"] .ticker__track > span,
[dir="rtl"] .marquee__track > figure{direction:rtl}
[dir="rtl"] .ticker__track{animation-name:tickRtl}
[dir="rtl"] .marquee__track{animation-name:marqRtl}
@keyframes tickRtl{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@keyframes marqRtl{from{transform:translateX(calc(-50% - 9px))}to{transform:translateX(0)}}

/* Scroll reveal slides from the correct side. */
[dir="rtl"] .js .split > :nth-child(2),
[dir="rtl"] .js .detail > :nth-child(2),
[dir="rtl"] .js .contact-grid > :nth-child(2),
[dir="rtl"] .js .visit > :nth-child(2){transition-delay:.14s}

@media (max-width:900px){
  [dir="rtl"] .timeline{padding-right:78px}
  [dir="rtl"] .hero__fact:first-child{padding-right:0;padding-left:24px}
}
@media (max-width:600px){
  [dir="rtl"] h1{font-size:clamp(2.2rem,9vw,3.2rem)}
  [dir="rtl"] .hero__fact{border-left:0;border-bottom:1px solid var(--line);padding-inline:0}
  [dir="rtl"] .hero__fact:last-child{border-bottom:0}
  [dir="rtl"] .timeline{padding-left:0;padding-right:56px}
  [dir="rtl"] .timeline__rail{right:18px}
  [dir="rtl"] .tstep__dot{right:-56px;left:auto}
}

/* =========================================================
   Language switcher
   ========================================================= */
.lang-btn{
  font-family:var(--display);font-weight:700;font-size:.92rem;
  color:var(--void);background:var(--sun);
  padding:9px 18px;border-radius:3px;white-space:nowrap;line-height:1.4;
  transition:background .2s,transform .18s;
}
.lang-btn:hover{background:var(--white);text-decoration:none;transform:translateY(-1px)}
[dir="rtl"] .lang-btn{font-family:"Archivo",sans-serif}
.nav-lang{display:none}

@media (max-width:900px){
  .lang-btn{display:none}
  .nav-lang{display:block}
  .nav-lang a{color:var(--sun) !important;font-weight:700}
}