/* ============================================================
   SUMOU S.C.C — شركة سمو للمقاولات والتوريدات
   Palette taken from the company mark: gold on deep warm brown.
   Layout uses logical properties so one sheet serves RTL and LTR.
   ============================================================ */

:root{
  /* brand */
  --gold-1:#F2DCA0;
  --gold:  #D4A94E;
  --gold-2:#B8892F;
  --gold-3:#7E5B1C;
  --gold-soft:rgba(212,169,78,.14);

  /* Real gold is not one colour — it is a band of light travelling across a
     warm base. Five stops give the highlight and the shadow that make a fill
     read as metal instead of mustard. Used for display type and rules only;
     large areas of it would cheapen the page. */
  --metal: linear-gradient(115deg,
            var(--gold-3) 0%,
            var(--gold-2) 16%,
            var(--gold) 33%,
            #FBF0CE 47%,
            var(--gold) 61%,
            var(--gold-2) 78%,
            var(--gold-1) 100%);
  --metal-soft: linear-gradient(115deg,
            var(--gold-2) 0%,
            var(--gold) 34%,
            #FBF0CE 50%,
            var(--gold) 66%,
            var(--gold-2) 100%);

  --ink:   #1A1410;
  --ink-2: #2A211A;
  --ink-3: #3C3126;

  --paper: #FFFFFF;
  --sand:  #F8F5EF;
  --sand-2:#EFE9DF;
  --line:  #E2DACD;

  --text:  #241C15;
  --muted: #7A6E60;
  --on-dark:#F3EDE3;
  --on-dark-muted:rgba(243,237,227,.62);

  /* system */
  --shell: 1280px;
  --head-h: 76px;

  /* Radius scale. Everything used to sit on one 4px value, which reads as a
     2015 corporate template; a three-step scale lets small controls stay crisp
     while panels and media get the softer edge current work expects. */
  --r-xs: 6px;
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 22px;
  --r-pill: 100px;

  /* Elevation. Warm-tinted rather than neutral black so shadows sit in the
     same colour world as the sand background instead of greying it out. */
  --sh-1: 0 1px 2px rgba(26,20,16,.05), 0 2px 8px rgba(26,20,16,.04);
  --sh-2: 0 2px 6px rgba(26,20,16,.05), 0 12px 28px rgba(26,20,16,.07);
  --sh-3: 0 6px 14px rgba(26,20,16,.07), 0 26px 56px rgba(26,20,16,.11);
  --sh-gold: 0 10px 30px rgba(184,137,47,.28);

  --ease: cubic-bezier(.2,.7,.3,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --f: "IBM Plex Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:var(--head-h); -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:var(--f);
  font-size:17px;
  line-height:1.75;
  font-weight:400;
  color:var(--text);
  background:var(--paper);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* A single fixed grain plate over the whole page. Flat digital colour is what
   makes a site read as cheap; a film of noise this faint is never consciously
   seen but it stops every large fill from looking like plastic. Generated
   inline so it costs no request, and it never eats a click. */
/* No blend mode on purpose: multiply would cancel the grain out over the dark
   sections, which is where it does the most work. Plain low-alpha speckle
   lightens dark ground and darkens light ground, the way real grain does. */
body::after{
  content:""; position:fixed; inset:0; z-index:999; pointer-events:none;
  opacity:.55;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }

:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:2px; }

.shell{ width:min(100% - 48px, var(--shell)); margin-inline:auto; }
@media (max-width:640px){ .shell{ width:calc(100% - 32px); } }

.skip{
  position:fixed; inset-block-start:-100px; inset-inline-start:16px; z-index:200;
  background:var(--ink); color:var(--on-dark); padding:10px 18px; border-radius:var(--r);
}
.skip:focus{ inset-block-start:12px; }

/* ── type ───────────────────────────────────────────────── */

/* Arabic is a joined script: letter-spacing prises connected glyphs apart and
   negative tracking crushes them, so every tracked rule below is written for
   the Latin build and neutralised here. Latin keeps its tracking unchanged. */
html[lang="ar"] .kicker,
html[lang="ar"] .eyebrow,
html[lang="ar"] .h2,
html[lang="ar"] .hero-title,
html[lang="ar"] .record-h,
html[lang="ar"] .rf-tag,
html[lang="ar"] .rf-meta dt,
html[lang="ar"] .c-h,
html[lang="ar"] .foot-social-t,
html[lang="ar"] .sector-txt .num,
html[lang="ar"] .ticker-row span,
html[lang="ar"] .stats b,
html[lang="ar"] .btn{ letter-spacing:normal; }

/* Latin digits and abbreviations inside Arabic copy still want their tracking,
   so the numeric kickers keep a hair of it through their own element. */
html[lang="ar"] .kicker,
html[lang="ar"] .eyebrow{ font-variant-numeric:tabular-nums; }

.h2{
  font-size:clamp(30px,4.4vw,52px);
  line-height:1.34;   /* room for tashkeel — see .hero-title */
  font-weight:600;
  letter-spacing:-.01em;
  margin:0 0 14px;
}
html[lang="en"] .h2{ line-height:1.15; }
/* Section kickers read as a numbered index rather than a coloured label: a
   short metal rule, then the text. It is the one device repeated in every
   section, so the page feels edited instead of assembled. */
.kicker{
  display:flex; align-items:center; gap:14px;
  margin:0 0 16px;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold-2);
}
.kicker::before{
  content:""; flex:none; width:38px; height:2px; border-radius:2px;
  background:var(--metal-soft);
}
.sec-dark .kicker,.sec-contact .kicker{ color:var(--gold); }
.sec-note{
  margin:6px 0 0;
  max-width:56ch;
  color:var(--muted);
  font-size:16px;
  font-weight:300;
}
.sec-dark .sec-note{ color:var(--on-dark-muted); }

/* Premium reads as room. The old ceiling of 130px was tight for a 1280px
   shell — this lets the sections breathe on large screens without changing
   anything on a phone. */
.sec{ padding-block:clamp(78px,10vw,160px); }
.sec-soft{ background:var(--sand); }
.sec-dark{ background:var(--ink); color:var(--on-dark); }
.sec-dark .h2{ color:var(--on-dark); }

.sec-head{ margin-block-end:clamp(36px,5vw,64px); max-width:78ch; }
.sec-head-row{
  display:flex; flex-wrap:wrap; gap:20px 48px;
  align-items:flex-end; justify-content:space-between; max-width:none;
}

/* ── buttons ────────────────────────────────────────────── */
.btn{
  position:relative; isolation:isolate; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 32px;
  border:1px solid transparent; border-radius:var(--r-pill);
  font-size:15.5px; font-weight:600; letter-spacing:.01em;
  transition:background .3s var(--ease), color .3s var(--ease),
             border-color .3s var(--ease), transform .3s var(--ease-out),
             box-shadow .3s var(--ease);
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); transition-duration:.08s; }
.btn-gold{
  background:var(--metal-soft);
  color:#2A1E0B;
  box-shadow:var(--sh-gold), inset 0 1px 0 rgba(255,255,255,.45);
}
.btn-gold:hover{ box-shadow:0 14px 38px rgba(184,137,47,.44); }
/* A light sweep on hover — the one flourish the gold button gets, so it reads
   as the primary action without another colour or a size change. */
.btn-gold::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);
  transform:translateX(-120%);
  transition:transform .7s var(--ease-out);
}
.btn-gold:hover::after{ transform:translateX(120%); }
.btn-ghost{ border-color:rgba(243,237,227,.4); color:var(--on-dark); backdrop-filter:blur(6px); }
.btn-ghost:hover{ background:rgba(243,237,227,.12); border-color:var(--on-dark); }
@media (prefers-reduced-motion:reduce){
  .btn:hover{ transform:none; }
  .btn-gold::after{ display:none; }
}

/* ═══════════════  HEADER  ═══════════════ */
.site-head{
  position:fixed; inset-block-start:0; inset-inline:0; z-index:100;
  height:var(--head-h);
  display:flex; align-items:center;
  background:transparent;
  transition:background .35s var(--ease), box-shadow .35s var(--ease), height .35s var(--ease);
}
.site-head::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to bottom, rgba(12,9,6,.62), transparent);
  transition:opacity .35s var(--ease);
}
.site-head.is-stuck{
  height:66px;
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(1.8) blur(20px);
  -webkit-backdrop-filter:saturate(1.8) blur(20px);
  box-shadow:0 1px 0 rgba(226,218,205,.9), 0 10px 34px rgba(26,20,16,.06);
}
/* Browsers without backdrop-filter get an opaque bar rather than washed-out
   text over a photo. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .site-head.is-stuck{ background:rgba(255,255,255,.97); }
}
.site-head.is-stuck::before{ opacity:0; }

/* Reading progress, pinned to the header's bottom edge. It only shows once the
   header has gone solid, so it never floats over the hero photo. */
.progress{
  position:absolute; inset-block-end:0; inset-inline:0;
  height:2px; pointer-events:none;
  opacity:0; transition:opacity .35s var(--ease);
}
.progress::after{
  content:""; display:block; height:100%;
  background:linear-gradient(to var(--dir,left),var(--gold-2),var(--gold) 50%,var(--gold-1));
  transform:scaleX(var(--p,0)); transform-origin:var(--to,right);
}
html[dir="ltr"] .progress::after{ --dir:right; --to:left; }
.site-head.is-stuck .progress{ opacity:1; }

.head-inner{ display:flex; align-items:center; gap:28px; width:min(100% - 48px, 1440px); }
@media (max-width:640px){ .head-inner{ width:calc(100% - 32px); gap:14px; } }

.brand{ display:flex; align-items:center; gap:12px; margin-inline-end:auto; }
.brand-mark{ width:38px; height:38px; object-fit:contain; flex:none; transition:width .35s var(--ease); }
.site-head.is-stuck .brand-mark{ width:34px; height:34px; }
.brand-text{ display:flex; flex-direction:column; line-height:1.25; }
.brand-text strong{ font-size:17px; font-weight:600; color:#fff; transition:color .35s var(--ease); }
.brand-text small{ font-size:11.5px; font-weight:300; letter-spacing:.04em; color:rgba(255,255,255,.72); transition:color .35s var(--ease); }
.site-head.is-stuck .brand-text strong{ color:var(--ink); }
.site-head.is-stuck .brand-text small{ color:var(--muted); }
@media (max-width:420px){ .brand-text small{ display:none; } }

.nav{ display:flex; align-items:center; gap:4px; }
.nav a{
  position:relative;
  padding:8px 13px; border-radius:var(--r);
  font-size:15px; font-weight:400;
  color:rgba(255,255,255,.86);
  white-space:nowrap;
  transition:color .25s var(--ease);
}
.nav a::after{
  content:""; position:absolute; inset-block-end:2px; inset-inline:13px;
  height:1.5px; background:var(--gold);
  transform:scaleX(0); transform-origin:var(--to,right);
  transition:transform .3s var(--ease);
}
html[dir="ltr"] .nav a::after{ --to:left; }
.nav a:hover::after,.nav a.is-active::after{ transform:scaleX(1); }
.nav a:hover,.nav a.is-active{ color:#fff; }
.site-head.is-stuck .nav a{ color:var(--ink-3); }
.site-head.is-stuck .nav a:hover,.site-head.is-stuck .nav a.is-active{ color:var(--ink); }

.head-tools{ display:flex; align-items:center; gap:10px; }

/* social icon button — header + footer */
.social-ico{
  display:grid; place-items:center; flex:none;
  width:38px; height:38px;
  border:1px solid rgba(255,255,255,.34); border-radius:50%;
  color:#fff;
  transition:background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.social-ico svg{ width:18px; height:18px; }
.social-ico:hover{ background:rgba(255,255,255,.14); transform:translateY(-2px); }
.site-head.is-stuck .social-ico{ border-color:var(--line); color:var(--ink-3); }
.site-head.is-stuck .social-ico:hover{ background:var(--sand); border-color:var(--gold); color:var(--gold-2); }
@media (max-width:420px){ .head-tools .social-ico{ display:none; } }

.lang{
  min-width:48px; padding:7px 12px;
  background:transparent; border:1px solid rgba(255,255,255,.34); border-radius:var(--r);
  font-size:12.5px; font-weight:600; letter-spacing:.1em; color:#fff;
  transition:background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.lang:hover{ background:rgba(255,255,255,.14); }
.site-head.is-stuck .lang{ border-color:var(--line); color:var(--ink); }
.site-head.is-stuck .lang:hover{ background:var(--sand); border-color:var(--gold); }

.burger{ display:none; width:42px; height:42px; background:none; border:0; padding:9px; }
.burger span{
  display:block; height:2px; background:#fff; border-radius:2px;
  transition:transform .3s var(--ease), opacity .2s var(--ease), background .35s var(--ease);
}
.burger span + span{ margin-block-start:6px; }
.site-head.is-stuck .burger span{ background:var(--ink); }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

@media (max-width:1080px){
  .burger{ display:block; }
  .nav{
    position:fixed; inset-block-start:var(--head-h); inset-inline:0;
    flex-direction:column; align-items:stretch; gap:0;
    padding:10px 20px 26px;
    background:rgba(255,255,255,.98);
    backdrop-filter:blur(14px);
    border-block-start:1px solid var(--line);
    box-shadow:0 22px 44px rgba(26,20,16,.14);
    transform:translateY(-14px); opacity:0; pointer-events:none;
    transition:transform .3s var(--ease), opacity .3s var(--ease);
  }
  .nav.is-open{ transform:none; opacity:1; pointer-events:auto; }
  .nav a{ color:var(--ink-3); padding:14px 6px; border-block-end:1px solid var(--line); border-radius:0; font-size:16px; }
  .nav a::after{ display:none; }
}

/* ═══════════════  HERO  ═══════════════ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:center;
  padding-block:calc(var(--head-h) + 40px) 120px;
  background:var(--ink);
  overflow:hidden;
}
.hero-stage{ position:absolute; inset:0; }
.hero-slide{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:0; transform:scale(1.08);
  transition:opacity 1.5s var(--ease), transform 8s linear;
}
.hero-slide.is-on{ opacity:1; transform:scale(1); }
/* Two passes: a vertical wash that keeps the header and the dots readable,
   and a side wash that sits under the copy. The side one carries the text
   contrast, so the vertical one stays light and lets the photo show. */
.hero-stage::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(12,9,6,.88) 4%, rgba(12,9,6,.24) 52%, rgba(12,9,6,.52)),
    linear-gradient(to var(--grad,left), rgba(12,9,6,.80), transparent 62%);
}
html[dir="ltr"] .hero-stage::after{ --grad:right; }

.hero-inner{ position:relative; z-index:2; color:#fff; }
.eyebrow{
  margin:0 0 20px; font-size:12.5px; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase; color:var(--gold);
}
.hero-title{
  margin:0 0 26px;
  font-size:clamp(38px,6.6vw,86px);
  /* Arabic display type needs headroom for tashkeel above and descenders
     below; 1.08 clips both. Latin gets the tighter figure it wants. */
  line-height:1.3;
  font-weight:600;
  letter-spacing:-.02em;
  max-width:18ch;
}
html[lang="en"] .hero-title{ line-height:1.1; }
.hero-title span{ display:block; }
.hero-title .gold{
  background:var(--metal); background-size:200% 100%;
  animation:sheen 9s var(--ease) infinite;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  /* background-clip:text paints only inside the padding box, so glyph parts
     reaching past it vanish. Pad it out, then pull the layout back. */
  padding-block:.16em; margin-block:-.16em;
}
/* The highlight band drifts across the fill rather than flashing — slow enough
   that it reads as light on a surface, not as an animation. */
@keyframes sheen{
  0%,100%{ background-position:0% 50% }
  50%    { background-position:100% 50% }
}
@media (prefers-reduced-motion:reduce){ .hero-title .gold{ animation:none; } }

.hero-lede{
  margin:0 0 38px; max-width:60ch;
  font-size:clamp(16px,1.45vw,19.5px);
  font-weight:300; line-height:1.85;
  color:rgba(255,255,255,.82);
}
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; }

.hero-dots{
  position:absolute; z-index:3;
  inset-block-end:42px; inset-inline-start:max(24px,calc((100vw - var(--shell))/2));
  display:flex; align-items:center; gap:10px;
}
/* Each dot is a track with a bar that fills across it while its slide is up,
   so the control tells you how long is left instead of only which one is on. */
.hero-dots button{
  position:relative; overflow:hidden;
  width:32px; height:3px; padding:0; border:0; border-radius:3px;
  background:rgba(255,255,255,.26);
  transition:width .45s var(--ease-out), background .3s var(--ease);
}
.hero-dots button::after{
  content:""; position:absolute; inset:0;
  background:var(--metal-soft); border-radius:3px;
  transform:scaleX(0); transform-origin:var(--to,right);
}
html[dir="ltr"] .hero-dots button::after{ --to:left; }
.hero-dots button.is-on{ width:64px; }
.hero-dots button.is-on::after{ animation:dotfill var(--dur,6s) linear forwards; }
@keyframes dotfill{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }
@media (prefers-reduced-motion:reduce){
  .hero-dots button.is-on::after{ animation:none; transform:scaleX(1); }
}

/* Slide counter — the small editorial tell that the hero is a curated set. */
.hero-count{
  position:absolute; z-index:3;
  inset-block-end:38px; inset-inline-end:max(24px,calc((100vw - var(--shell))/2));
  display:flex; align-items:baseline; gap:7px;
  font-size:13px; font-weight:300; color:rgba(255,255,255,.5);
  font-variant-numeric:tabular-nums;
}
.hero-count b{
  font-size:22px; font-weight:600; line-height:1;
  background:var(--metal-soft);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-count i{ font-style:normal; opacity:.45; }
@media (max-width:760px){ .hero-count{ display:none; } }

.scroll-cue{
  position:absolute; z-index:3; inset-block-end:38px;
  inset-inline-start:50%; transform:translateX(50%);
  width:26px; height:44px; border:1.5px solid rgba(255,255,255,.4); border-radius:14px;
  display:grid; place-items:start center; padding-block-start:8px;
}
html[dir="ltr"] .scroll-cue{ transform:translateX(-50%); }
.scroll-cue span{
  width:3px; height:8px; border-radius:2px; background:var(--gold);
  animation:cue 1.8s var(--ease) infinite;
}
@keyframes cue{ 0%,100%{ transform:translateY(0); opacity:1 } 50%{ transform:translateY(14px); opacity:.2 } }
@media (max-width:760px){ .scroll-cue{ display:none; } }

/* ═══════════════  TICKER  ═══════════════ */
.ticker{
  background:var(--ink-2); color:var(--on-dark);
  border-block:1px solid rgba(243,237,227,.1);
  overflow:hidden; padding-block:15px;
}
.ticker-row{
  display:flex; align-items:center; gap:34px; width:max-content;
  animation:slide 34s linear infinite;
}
html[dir="ltr"] .ticker-row{ animation-name:slide-ltr; }
.ticker-row span{ font-size:14.5px; font-weight:300; letter-spacing:.06em; white-space:nowrap; }
.ticker-row i{ color:var(--gold); font-style:normal; font-size:11px; }
@keyframes slide{ from{ transform:translateX(0) } to{ transform:translateX(50%) } }
@keyframes slide-ltr{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
@media (prefers-reduced-motion:reduce){ .ticker-row{ animation:none; } }

/* ═══════════════  ABOUT  ═══════════════ */
.grid-2{
  display:grid; grid-template-columns:minmax(220px,.8fr) minmax(0,1.6fr);
  gap:clamp(32px,6vw,90px);
  align-items:start;
}
@media (max-width:900px){ .grid-2{ grid-template-columns:1fr; } }

.col-head{ position:sticky; inset-block-start:calc(var(--head-h) + 28px); }
@media (max-width:900px){ .col-head{ position:static; } }
.about-mark{ width:72px; margin-block-start:28px; opacity:.9; }
@media (max-width:900px){ .about-mark{ display:none; } }

.prose p{ margin:0 0 22px; font-weight:300; font-size:17.5px; line-height:1.95; color:#413526; }
.prose blockquote{
  margin:34px 0 0; padding-inline-start:26px;
  border-inline-start:2px solid var(--gold);
  font-size:19px; font-weight:400; line-height:1.85; color:var(--ink-2);
}

.stats{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px; margin-block-start:clamp(48px,6vw,84px);
  background:var(--line); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; box-shadow:var(--sh-1);
}
@media (max-width:820px){ .stats{ grid-template-columns:repeat(2,1fr); } }
.stats li{
  background:var(--paper); padding:34px 26px; text-align:center;
  transition:background .3s var(--ease);
}
.stats li:hover{ background:var(--sand); }
.stats b{
  display:block; font-size:clamp(32px,3.8vw,50px); font-weight:600; line-height:1.3;
  letter-spacing:-.02em;
  background:var(--metal-soft);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  padding-block:.1em; margin-block:-.1em;   /* keep glyphs inside the painted box */
}
.stats span{ display:block; margin-block-start:8px; font-size:14px; font-weight:300; color:var(--muted); }

/* ═══════════════  SECTORS  ═══════════════ */
.sectors{ display:flex; flex-direction:column; gap:1px; background:rgba(243,237,227,.13); }
.sector{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(24px,4vw,60px); align-items:center;
  background:var(--ink); padding-block:clamp(30px,4vw,54px);
}
.sector:nth-child(even) .sector-img{ order:2; }
@media (max-width:860px){
  .sector{ grid-template-columns:1fr; gap:22px; }
  .sector:nth-child(even) .sector-img{ order:0; }
}
.sector-img{
  position:relative; overflow:hidden;
  border-radius:var(--r-lg); aspect-ratio:16/10;
  box-shadow:0 20px 50px rgba(0,0,0,.34);
}
.sector-img img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.82) contrast(1.06) brightness(.97);
  transition:transform 1.2s var(--ease), filter .7s var(--ease);
}
/* A warm scrim keyed to the brown ground, so site photography shot in every
   kind of light still sits in one palette. */
.sector-img::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(160deg, rgba(26,20,16,.18), transparent 46%, rgba(26,20,16,.30));
  mix-blend-mode:multiply;
  transition:opacity .7s var(--ease);
}
.sector:hover .sector-img img{ transform:scale(1.05); filter:saturate(1) contrast(1.04) brightness(1); }
.sector:hover .sector-img::after{ opacity:.45; }

.sector-txt .num{
  display:block; font-size:13px; font-weight:600; letter-spacing:.2em; color:var(--gold-2); margin-block-end:12px;
}
.sector-txt h3{ margin:0 0 14px; font-size:clamp(23px,2.6vw,32px); font-weight:600; line-height:1.25; }
.sector-txt p{ margin:0 0 20px; font-weight:300; line-height:1.9; color:var(--on-dark-muted); max-width:56ch; }

.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chips li{
  padding:6px 14px; border:1px solid rgba(243,237,227,.2); border-radius:100px;
  font-size:13px; font-weight:300; color:var(--on-dark-muted);
}

/* ═══════════════  PROJECTS  ═══════════════ */
.filters{ display:flex; flex-wrap:wrap; gap:8px; margin-block-end:32px; }
.filters button{
  padding:10px 22px; border:1px solid var(--line); border-radius:var(--r-pill);
  background:var(--paper); font-size:14.5px; font-weight:400; color:var(--muted);
  transition:background .25s var(--ease), border-color .25s var(--ease),
             color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease-out);
}
.filters button:hover{ border-color:var(--gold); color:var(--ink); box-shadow:var(--sh-1); }
.filters button.is-on{
  background:var(--ink); border-color:var(--ink); color:var(--on-dark);
  box-shadow:var(--sh-2);
}

.gallery{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:16px;
}
@media (max-width:560px){ .gallery{ grid-template-columns:1fr; } }

.card{
  position:relative; margin:0; overflow:hidden; border-radius:var(--r);
  aspect-ratio:4/3; background:var(--sand-2); cursor:zoom-in;
  box-shadow:var(--sh-1);
  transition:opacity .35s var(--ease), transform .45s var(--ease-out),
             box-shadow .45s var(--ease);
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--sh-3); }
.card-wide{ grid-column:span 2; aspect-ratio:16/9; }
@media (max-width:860px){ .card-wide{ grid-column:span 1; aspect-ratio:4/3; } }

.card img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1s var(--ease);
}
.card:hover img{ transform:scale(1.06); }
.card figcaption{
  position:absolute; inset-block-end:0; inset-inline:0;
  padding:56px 22px 20px; color:#fff;
  background:linear-gradient(to top, rgba(12,9,6,.92), rgba(12,9,6,.5) 48%, transparent);
  transform:translateY(8px); opacity:.94;
  transition:transform .45s var(--ease-out), opacity .4s var(--ease);
}
.card:hover figcaption{ transform:none; opacity:1; }
.card figcaption h3{ margin:0 0 4px; font-size:17px; font-weight:600; line-height:1.4; }
.card figcaption p{ margin:0; font-size:13.5px; font-weight:300; color:rgba(255,255,255,.72); }
/* A hairline that draws itself under the caption on hover — cheaper than a
   badge and it survives every image behind it. */
.card figcaption::before{
  content:""; position:absolute; inset-block-end:0; inset-inline:22px;
  height:2px; background:var(--gold); border-radius:2px;
  transform:scaleX(0); transform-origin:var(--to,right);
  transition:transform .5s var(--ease-out);
}
html[dir="ltr"] .card figcaption::before{ --to:left; }
.card:hover figcaption::before{ transform:scaleX(1); }
@media (prefers-reduced-motion:reduce){ .card:hover{ transform:none; } }

.card.is-hidden{ display:none; }
.card.is-in{ animation:pop .45s var(--ease) both; }
@keyframes pop{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }

/* ═══════════════  TRACK RECORD  ═══════════════ */
.record{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,3.4vw,52px); }
@media (max-width:900px){ .record{ grid-template-columns:1fr; } }

.record-h{
  margin:0 0 20px; padding-block-end:14px;
  border-block-end:1px solid rgba(243,237,227,.16);
  font-size:15px; font-weight:600; letter-spacing:.08em; color:var(--gold);
}
.record-list li{
  display:flex; align-items:baseline; justify-content:space-between; gap:18px;
  padding-block:13px; border-block-end:1px solid rgba(243,237,227,.09);
}
.record-list-plain li{ justify-content:flex-start; }
.record-list-plain li::before{
  content:"✕"; color:var(--gold-2); font-size:10px; flex:none;
}
.rl-name{ font-size:16px; font-weight:300; color:var(--on-dark); }
.rl-val{
  font-size:18px; font-weight:600; letter-spacing:-.01em; white-space:nowrap;
  color:var(--gold-1);
}
.rl-val i{ font-size:13.5px; font-weight:300; font-style:normal; color:var(--on-dark-muted); }
.record-note{ margin:20px 0 0; font-size:14.5px; font-weight:300; line-height:1.85; color:var(--on-dark-muted); }

/* Flagship programme — spans the whole grid so it reads as a headline, not a
   fourth column stranded on its own row. */
.record-feature{
  position:relative; overflow:hidden;
  grid-column:1 / -1; margin-block-start:clamp(12px,2vw,26px);
  padding:clamp(30px,3.4vw,46px);
  border:1px solid rgba(243,237,227,.14); border-radius:var(--r-lg);
  background:
    radial-gradient(120% 140% at var(--x,100%) 0%, rgba(212,169,78,.10), transparent 58%),
    rgba(243,237,227,.04);
}
html[dir="ltr"] .record-feature{ --x:0%; }
/* A metal rule along the top edge — the panel's one piece of hardware. */
.record-feature::before{
  content:""; position:absolute; inset-block-start:0; inset-inline:0;
  height:2px; background:var(--metal);
}
.rf-tag{
  margin:0 0 10px; font-size:12px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--gold);
}
.rf-h{ margin:0 0 10px; font-size:clamp(20px,2.2vw,26px); font-weight:600; color:var(--on-dark); }
.rf-patron{
  margin:0 0 16px; padding-inline-start:14px;
  border-inline-start:2px solid var(--gold);
  font-size:14.5px; font-weight:400; line-height:1.7; color:var(--gold-1);
}
.rf-lead{ margin:0; max-width:74ch; font-size:15.5px; font-weight:300; line-height:1.9; color:var(--on-dark-muted); }
.rf-meta{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.6vw,36px);
  margin:26px 0 0; padding-block-start:22px; border-block-start:1px solid rgba(243,237,227,.12);
}
.rf-meta dt{
  margin:0 0 8px; font-size:12.5px; font-weight:600;
  letter-spacing:.08em; color:var(--gold-2);
}
.rf-meta dd{ margin:0; font-size:14.5px; font-weight:300; line-height:1.8; color:var(--on-dark); }
@media (max-width:900px){ .rf-meta{ grid-template-columns:1fr; } }

/* ═══════════════  CLIENTS  ═══════════════ */
/* Hairlines live on the tiles, not on a coloured grid gap — so a row that
   does not fill completely reads as plain paper instead of a blank slab. */
/* Ten logos, so only 5- and 2-column grids come out even — anything between
   strands empty cells. */
.logos{
  display:grid; grid-template-columns:repeat(5,1fr);
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; box-shadow:var(--sh-1);
}
@media (max-width:1000px){ .logos{ grid-template-columns:repeat(2,1fr); } }
.logos li{
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:14px;
  padding:30px 20px; text-align:center;
  border-inline-end:1px solid var(--line);
  border-block-end:1px solid var(--line);
  transition:background .3s var(--ease);
}
.logos li:hover{ background:var(--sand); }
.logos img{
  height:62px; width:auto; max-width:100%; object-fit:contain;
  filter:grayscale(1); opacity:.62;
  transition:filter .45s var(--ease), opacity .45s var(--ease), transform .45s var(--ease-out);
}
.logos li:hover img{ filter:none; opacity:1; transform:scale(1.05); }
@media (prefers-reduced-motion:reduce){ .logos li:hover img{ transform:none; } }
.logos span{ font-size:12.5px; font-weight:300; line-height:1.55; color:var(--muted); }
.logo-text .lt-mark{ font-size:40px; line-height:62px; opacity:.28; filter:grayscale(1); }

.classify{
  position:relative; overflow:hidden;
  display:flex; align-items:center; gap:clamp(20px,3vw,44px); flex-wrap:wrap;
  margin-block-start:clamp(34px,4vw,56px);
  padding:clamp(28px,3.6vw,46px);
  background:
    radial-gradient(110% 160% at var(--x,100%) 0%, rgba(212,169,78,.13), transparent 62%),
    var(--sand);
  border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
}
html[dir="ltr"] .classify{ --x:0%; }
.classify::before{
  content:""; position:absolute; inset-block-start:0; inset-inline:0;
  height:2px; background:var(--metal);
}
.classify img{ height:92px; width:auto; flex:none; }
.classify h3{ margin:0 0 12px; font-size:clamp(19px,2.1vw,25px); font-weight:500; line-height:1.4; max-width:34ch; }
.classify .grade{ margin:0; }
.classify .grade b{
  display:inline-block; padding:8px 24px; border-radius:var(--r-pill);
  background:var(--metal-soft);
  box-shadow:var(--sh-gold), inset 0 1px 0 rgba(255,255,255,.45);
  color:#2A1E0B; font-size:15px; font-weight:600;
}

/* ═══════════════  STRUCTURE  ═══════════════ */
.org{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:clamp(28px,4vw,64px); align-items:start; }
@media (max-width:980px){ .org{ grid-template-columns:1fr; } }

.org-cols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; }
.org-card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:28px 26px; box-shadow:var(--sh-1);
  transition:box-shadow .35s var(--ease), transform .35s var(--ease-out), border-color .35s var(--ease);
}
.org-card:hover{ box-shadow:var(--sh-2); transform:translateY(-3px); border-color:rgba(212,169,78,.45); }
@media (prefers-reduced-motion:reduce){ .org-card:hover{ transform:none; } }
.org-card h3{
  margin:0 0 16px; padding-block-end:12px; border-block-end:1px solid var(--line);
  font-size:16px; font-weight:600; color:var(--ink);
}
.org-card li{
  position:relative; padding-block:6px; padding-inline-start:18px;
  font-size:14.5px; font-weight:300; color:var(--muted);
}
.org-card li::before{
  content:""; position:absolute; inset-inline-start:0; inset-block-start:15px;
  width:6px; height:6px; border-radius:50%; background:var(--gold);
}

/* The chart is a tall portrait infographic — capped so it sits beside the
   department cards instead of towering over them. */
.org-chart{ margin:0; }
.org-chart img{
  display:block; width:100%; max-width:420px; margin-inline:auto;
  border-radius:var(--r); border:1px solid var(--line); background:var(--paper);
}
@media (max-width:980px){ .org-chart img{ max-width:360px; } }
.org-chart figcaption{ margin-block-start:12px; font-size:13.5px; font-weight:300; color:var(--muted); text-align:center; }

/* ═══════════════  CONTACT  ═══════════════ */
.sec-contact{ background:var(--ink); color:var(--on-dark); }
.sec-contact .h2{ color:var(--on-dark); }
.sec-contact .kicker{ color:var(--gold); }

.contact-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(28px,3.4vw,56px); align-items:start; }
@media (max-width:980px){ .contact-grid{ grid-template-columns:repeat(2,1fr); } .contact-form-col{ grid-column:span 2; } }
@media (max-width:640px){ .contact-grid{ grid-template-columns:1fr; } .contact-form-col{ grid-column:span 1; } }

.c-h{
  margin:0 0 22px; padding-block-end:14px;
  border-block-end:1px solid rgba(243,237,227,.16);
  font-size:15px; font-weight:600; letter-spacing:.08em; color:var(--gold);
}
.c-item{ display:flex; align-items:flex-start; gap:14px; padding-block:14px; }
.c-link{ transition:transform .25s var(--ease); }
.c-link:hover{ transform:translateX(calc(var(--dx,-1) * 4px)); }
html[dir="ltr"] .c-link:hover{ --dx:1; }
.c-ico{
  flex:none; width:40px; height:40px; display:grid; place-items:center;
  border:1px solid rgba(243,237,227,.2); border-radius:50%; color:var(--gold);
  transition:background .25s var(--ease), border-color .25s var(--ease);
}
.c-ico svg{ width:19px; height:19px; }
.c-link:hover .c-ico{ background:var(--gold-soft); border-color:var(--gold); }
.c-item b{ display:block; font-size:16px; font-weight:500; line-height:1.5; }
.c-item p{ margin:2px 0 0; font-size:13.5px; font-weight:300; color:var(--on-dark-muted); }

.cform{ display:flex; flex-direction:column; gap:14px; }
.cform label{ display:flex; flex-direction:column; gap:7px; }
.cform label span{ font-size:13.5px; font-weight:300; color:var(--on-dark-muted); }
.cform input,.cform select,.cform textarea{
  width:100%; padding:12px 14px;
  font:inherit; font-size:15.5px; font-weight:300;
  color:var(--on-dark);
  background:rgba(243,237,227,.06);
  border:1px solid rgba(243,237,227,.18); border-radius:var(--r);
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.cform textarea{ resize:vertical; min-height:96px; }
.cform input:focus,.cform select:focus,.cform textarea:focus{
  outline:none; border-color:var(--gold); background:rgba(243,237,227,.1);
}
.cform select option{ background:var(--ink-2); color:var(--on-dark); }
.cform .btn{ margin-block-start:6px; }
.cform-note{ margin:0; font-size:12.5px; font-weight:300; line-height:1.7; color:rgba(243,237,227,.44); }

/* ═══════════════  FOOTER  ═══════════════ */
.site-foot{
  position:relative;
  background:#120E0A; color:var(--on-dark);
  padding-block:clamp(52px,6vw,84px) 0;
}
/* The page closes on the same metal rule the featured panels open with. */
.site-foot::before{
  content:""; position:absolute; inset-block-start:0; inset-inline:0;
  height:1px; background:var(--metal); opacity:.5;
}
.foot-inner{
  display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,4vw,56px); align-items:start;
  padding-block-end:clamp(34px,4vw,52px);
}
@media (max-width:860px){ .foot-inner{ grid-template-columns:1fr; } }

.foot-brand{ display:flex; align-items:flex-start; gap:22px; }
.foot-badge{ width:96px; flex:none; }
.foot-brand p{ margin:0; font-size:14.5px; font-weight:300; line-height:1.9; color:var(--on-dark-muted); max-width:46ch; }
@media (max-width:480px){ .foot-brand{ flex-direction:column; gap:16px; } }

.foot-nav{ display:flex; flex-direction:column; gap:11px; }
.foot-nav a{ font-size:14.5px; font-weight:300; color:var(--on-dark-muted); transition:color .25s var(--ease); }
.foot-nav a:hover{ color:var(--gold); }

.foot-meta{ display:flex; flex-direction:column; gap:11px; }
.foot-meta a{ font-size:14.5px; font-weight:300; color:var(--on-dark-muted); transition:color .25s var(--ease); }
.foot-meta a:hover{ color:var(--gold); }

.foot-social{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-block-start:7px; }
.foot-social-t{
  font-size:12px; font-weight:600; letter-spacing:.18em;
  color:rgba(243,237,227,.5); margin-inline-end:2px;
}
.foot-social .social-ico{
  width:40px; height:40px;
  border-color:rgba(243,237,227,.2); color:var(--gold);
}
.foot-social .social-ico:hover{ background:var(--gold-soft); border-color:var(--gold); color:var(--gold-1); }

.foot-bottom{
  display:flex; flex-wrap:wrap; gap:12px 28px; justify-content:space-between;
  padding-block:22px; border-block-start:1px solid rgba(243,237,227,.1);
}
.foot-bottom small{ font-size:12.5px; font-weight:300; color:rgba(243,237,227,.42); }

/* ═══════════════  LIGHTBOX  ═══════════════ */
.lightbox{
  position:fixed; inset:0; z-index:180;
  display:grid; place-items:center; padding:5vmin;
  background:rgba(10,7,5,.94); backdrop-filter:blur(6px);
  animation:fade .3s var(--ease);
}
.lightbox[hidden]{ display:none; }
@keyframes fade{ from{ opacity:0 } to{ opacity:1 } }
.lb-fig{ margin:0; max-width:min(1200px,100%); max-height:100%; display:flex; flex-direction:column; gap:14px; }
.lb-fig img{
  max-width:100%; max-height:78vh; width:auto; height:auto;
  margin-inline:auto; border-radius:var(--r); object-fit:contain;
}
.lb-fig figcaption{ color:rgba(255,255,255,.8); font-size:15px; font-weight:300; text-align:center; }
.lb-close,.lb-nav{
  position:absolute; z-index:2;
  display:grid; place-items:center;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18);
  color:#fff; border-radius:50%;
  transition:background .25s var(--ease);
}
.lb-close:hover,.lb-nav:hover{ background:rgba(255,255,255,.22); }
.lb-close{ inset-block-start:20px; inset-inline-end:20px; width:44px; height:44px; font-size:26px; line-height:1; }
.lb-nav{ inset-block-start:50%; transform:translateY(-50%); width:48px; height:48px; font-size:19px; }
.lb-prev{ inset-inline-start:20px; }
.lb-next{ inset-inline-end:20px; }
html[dir="rtl"] .lb-prev{ transform:translateY(-50%) scaleX(-1); }
html[dir="rtl"] .lb-next{ transform:translateY(-50%) scaleX(-1); }
@media (max-width:640px){ .lb-nav{ width:40px; height:40px; } .lb-prev{ inset-inline-start:8px } .lb-next{ inset-inline-end:8px } }

/* ═══════════════  WHATSAPP FAB  ═══════════════ */
.wa-float{
  position:fixed; z-index:90;
  inset-block-end:24px; inset-inline-end:24px;
  width:54px; height:54px; display:grid; place-items:center;
  background:#25D366; color:#fff; border-radius:50%;
  box-shadow:0 10px 30px rgba(37,211,102,.4);
  transition:transform .28s var(--ease), box-shadow .28s var(--ease);
}
.wa-float:hover{ transform:scale(1.08) translateY(-2px); box-shadow:0 14px 36px rgba(37,211,102,.52); }
.wa-float svg{ width:29px; height:29px; }
@media (max-width:640px){ .wa-float{ width:48px; height:48px; inset-block-end:18px; inset-inline-end:18px; } .wa-float svg{ width:26px; height:26px; } }

/* ═══════════════  REVEAL ON SCROLL  ═══════════════ */
/* Shorter throw and an ease-out curve: the old 26px/linear-ish move read as a
   page that was still loading. This settles instead of sliding. */
.reveal{ opacity:0; transform:translateY(18px); }
.reveal.is-vis{
  opacity:1; transform:none;
  transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; }
  .card.is-in{ animation:none; }
  .hero-slide{ transition:opacity .4s linear; transform:none; }
}

/* print */
@media print{
  .site-head,.wa-float,.hero-dots,.scroll-cue,.ticker,.filters,.lightbox{ display:none !important; }
  body{ color:#000; background:#fff; }
  .sec-dark,.sec-contact,.site-foot{ background:#fff !important; color:#000 !important; }
}