/* ============================================================
   START OVER CONTRACTING COMPANY (SOCC)
   Landing page — layout modelled on el-seif.com.sa,
   palette and content from the SOCC company profile.
   ============================================================ */

:root{
  /* Brand — constant across both colour schemes */
  --navy-900:#0B1D33;
  --navy-800:#12284C;
  --navy-700:#1B3B66;
  --navy-600:#234C80;
  --blue-500:#2E75B6;
  --blue-400:#4E92CE;

  /* Surfaces and text. These are the only values the dark scheme overrides,
     so every component below stays scheme-agnostic. */
  --tint-100:#EAF1F8;   /* raised tint (check circles, quote chips) */
  --tint-50:#F5F8FC;    /* alternating band */
  --ink:#16202E;        /* body text */
  --ink-mid:#4A5768;    /* secondary text */
  --ink-soft:#7B8798;   /* tertiary text */
  --line:#DFE6EF;       /* hairlines and card borders */
  --white:#FFFFFF;      /* default band + card background */
  --heading:var(--navy-800);
  --card:#FFFFFF;

  /* Always-dark surfaces (hero, stats, Vision 2030, footer) */
  --dark:#152437;
  --dark-2:#1C3049;

  --wrap:1180px;
  --pad:24px;
  --header-h:76px;
  --r:4px;

  --ease:cubic-bezier(.22,.61,.36,1);
}


/* ---------- dark colour scheme ----------
   Bands that are already dark stay as they are; the light bands invert.
   Applied via data-color-scheme so it never collides with the per-section
   data-theme attribute used for header/rail contrast. */
:root[data-color-scheme="dark"]{
  --white:#0F1B2B;
  --card:#152437;
  --tint-50:#101D2E;
  --tint-100:#1C3049;
  --ink:#E8EEF6;
  --ink-mid:#A9B8CB;
  --ink-soft:#7E8EA3;
  --line:#26384F;
  --heading:#EAF1F8;
  --blue-500:#5697D6;
  --dark:#0C1726;
  --dark-2:#152437;
  --navy-800:#101D2E;
  --navy-900:#080F1A;
  --navy-700:#1B3B66;
  color-scheme:dark;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
/* Elements waiting to slide in from the right sit 34px outside the viewport.
   body alone cannot contain that, so the root clips too. */
html{scroll-behavior:smooth;scroll-padding-top:var(--header-h);-webkit-text-size-adjust:100%;overflow-x:hidden}
body{
  margin:0;
  font-family:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px;line-height:1.7;
  color:var(--ink);background:var(--white);
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{margin:0;line-height:1.15;font-weight:700;letter-spacing:-.01em}
p{margin:0 0 1em}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
input,select,textarea{font:inherit;color:inherit}
address{font-style:normal}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.muted{color:var(--ink-soft)}

/* Unbreakable strings (emails, URLs) must not push the layout wider than the screen */
body{overflow-wrap:break-word}
.ctc-meta a,.ftr-contact a,.nav-foot a,address{overflow-wrap:anywhere}

/* ---------- geometric watermark ----------
   One triangular line pattern reused across every band. Lighter grey lines on the
   dark bands, very pale grey on the light ones; always background, never foreground. */
.tri-bg,
.hero-panel,
.stats,
.vision2030,
.md-message,
.services,
.projects{
  position:relative;
}
.hero-panel::before,
.stats::before,
.vision2030::before,
.md-message::before,
.services::before,
.projects::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(60deg,transparent 49.6%,currentColor 49.6%,currentColor 50.4%,transparent 50.4%),
    linear-gradient(-60deg,transparent 49.6%,currentColor 49.6%,currentColor 50.4%,transparent 50.4%),
    linear-gradient(0deg,transparent 49.6%,currentColor 49.6%,currentColor 50.4%,transparent 50.4%);
  background-size:120px 208px;
}
/* dark bands */
.hero-panel::before{
  color:#fff;opacity:.15;
  /* concentrated toward the lower-right, fading out before it reaches the copy */
  -webkit-mask-image:linear-gradient(315deg,#000 0%,rgba(0,0,0,.5) 48%,transparent 82%);
  mask-image:linear-gradient(315deg,#000 0%,rgba(0,0,0,.5) 48%,transparent 82%);
}
.stats::before{color:#fff;opacity:.07}
.vision2030::before{color:#fff;opacity:.06}
/* light bands */
.md-message::before{color:var(--navy-700);opacity:.05}
.services::before{color:var(--navy-700);opacity:.04}
.projects::before{color:var(--navy-700);opacity:.04}
/* keep content above the pattern on the light bands */
.services > .wrap,.projects > .wrap,.md-message > .wrap{position:relative;z-index:2}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  padding:.85em 1.9em;border-radius:var(--r);
  font-size:.9rem;font-weight:600;letter-spacing:.02em;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease);
  border:1.5px solid transparent;white-space:nowrap;
}
.btn-solid{background:var(--blue-500);color:#fff;border-color:var(--blue-500)}
.btn-solid:hover{background:var(--navy-700);border-color:var(--navy-700)}
.btn-ghost{border-color:rgba(255,255,255,.55);color:#fff}
.btn-ghost:hover{background:#fff;color:var(--navy-800);border-color:#fff}
.btn-block{width:100%}

/* ---------- typography scale ---------- */
.eyebrow{
  font-size:.95rem;font-weight:600;color:var(--blue-500);
  margin:0 0 .6em;letter-spacing:.01em;
}
.display{
  font-size:clamp(1.85rem,4.6vw,3.15rem);
  font-weight:800;text-transform:uppercase;letter-spacing:-.015em;
  line-height:1.08;margin:0 0 .55em;color:var(--heading);
}
.h2{font-size:clamp(1.5rem,3vw,2.1rem);color:var(--heading);margin:0 0 .6em}
.section-lede{
  font-size:1.05rem;color:var(--ink-mid);max-width:70ch;margin:0 0 2.6em;
}
.section{padding:clamp(64px,9vw,120px) 0}

/* ============================================================
   HEADER
   ============================================================ */
/* The header adapts to whatever band is passing underneath it. Both themes
   transition on the same 300ms curve so the flip reads as one movement. */
.site-header{
  position:fixed;inset:0 0 auto;z-index:60;
  --hdr-fg:#fff;
  background:rgba(21,36,55,.30);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:background 300ms ease,box-shadow 300ms ease,color 300ms ease;
  color:var(--hdr-fg);
}
.site-header.is-stuck{
  background:rgba(18,40,76,.94);
  box-shadow:0 2px 24px rgba(11,29,51,.28);
}
/* over a light band */
.site-header.on-light{
  --hdr-fg:var(--navy-800);
  background:rgba(255,255,255,.72);
}
.site-header.on-light.is-stuck{
  background:rgba(255,255,255,.95);
  box-shadow:0 2px 24px rgba(18,40,76,.12);
}
.site-header.on-light .brand-text{color:var(--navy-800)}
.site-header.on-light .burger span{background:var(--navy-800)}
.site-header.on-light .icon-btn{color:var(--navy-800)}
.site-header.on-light .icon-btn:hover{background:rgba(18,40,76,.09)}
.header-inner{
  max-width:var(--wrap);margin-inline:auto;padding:0 var(--pad);
  height:var(--header-h);display:flex;align-items:center;justify-content:space-between;gap:16px;
}

.brand{display:flex;align-items:center;gap:14px;min-width:0}
.brand-mark{flex:0 0 auto;width:64px;height:46px;display:block}
/* min-width:0 lets the lockup shrink on a phone, but both lines are nowrap —
   without overflow:hidden they spill out of the box and land on top of the
   nav links rather than being clipped. */
.brand-text{display:flex;flex-direction:column;min-width:0;overflow:hidden;color:#fff}
.brand-ar{font-size:1.02rem;font-weight:600;line-height:1.25;direction:rtl;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-en{font-size:.7rem;font-weight:500;letter-spacing:.03em;text-transform:uppercase;opacity:.9;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.header-actions{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.icon-btn{
  width:44px;height:44px;display:grid;place-items:center;border-radius:var(--r);
  color:var(--hdr-fg,#fff);
  transition:background .2s var(--ease),color 300ms ease;
}
.icon-btn:hover{background:rgba(255,255,255,.14)}
.icon-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

/* ---------- colour-scheme toggle ---------- */
#themeToggle svg{grid-area:1/1;stroke-linejoin:round}
#themeToggle .ico-moon{display:none}
:root[data-color-scheme="dark"] #themeToggle .ico-sun{display:none}
:root[data-color-scheme="dark"] #themeToggle .ico-moon{display:block}

/* ---------- language toggle ---------- */
.lang-btn{
  height:44px;padding:0 12px;border-radius:var(--r);
  display:inline-flex;align-items:center;gap:3px;
  font-size:.82rem;font-weight:600;letter-spacing:.03em;
  color:var(--hdr-fg,#fff);
  transition:background .2s var(--ease),color 300ms ease;
}
.lang-btn:hover{background:rgba(255,255,255,.14)}
.site-header.on-light .lang-btn{color:var(--navy-800)}
.site-header.on-light .lang-btn:hover{background:rgba(18,40,76,.09)}
.lang-sep{opacity:.45;font-weight:400}
.lang-next{opacity:.6}
.lang-btn:hover .lang-next{opacity:1}
.burger{flex-direction:column;gap:5px}
.burger span{display:block;width:24px;height:2px;background:#fff;border-radius:2px;transition:transform .3s var(--ease),opacity .2s var(--ease)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.search-bar{background:var(--navy-800);border-top:1px solid rgba(255,255,255,.12)}
.search-form{
  max-width:var(--wrap);margin-inline:auto;padding:14px var(--pad);
  display:flex;gap:10px;
}
.search-form input{
  flex:1;padding:.8em 1em;border-radius:var(--r);
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);color:#fff;
}
.search-form input::placeholder{color:rgba(255,255,255,.55)}
.search-form input:focus{outline:2px solid var(--blue-400);outline-offset:1px}

/* ---------- nav drawer ---------- */
.nav-overlay{position:fixed;inset:0;z-index:70;background:rgba(11,29,51,.6);backdrop-filter:blur(2px)}
.nav-drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:80;
  width:min(380px,86vw);background:var(--navy-800);color:#fff;
  padding:88px 36px 36px;display:flex;flex-direction:column;
  box-shadow:-20px 0 60px rgba(0,0,0,.35);
  transform:translateX(100%);transition:transform .4s var(--ease);
}
.nav-drawer.is-open{transform:translateX(0)}
.nav-close{position:absolute;top:10px;inset-inline-end:18px;font-size:2rem;line-height:1;color:#fff;opacity:.75;padding:4px 8px}
.nav-close:hover{opacity:1}
.nav-list li+li{margin-top:2px}
.nav-list a{
  display:block;padding:.72em 0;font-size:1.12rem;font-weight:500;
  border-bottom:1px solid rgba(255,255,255,.12);
  transition:color .2s var(--ease),padding-left .25s var(--ease);
}
.nav-list a:hover{color:var(--blue-400);padding-left:8px}
.nav-foot{margin-top:auto;padding-top:28px;display:flex;flex-direction:column;gap:6px;font-size:.9rem;opacity:.8}
.nav-foot a:hover{color:var(--blue-400)}

/* ---------- section dot rail ----------
   Six fixed dots. Inactive = small solid dot; active = outer ring with a small
   solid centre. Colour flips with the theme of the band currently behind it. */
.dot-nav[hidden]{display:none}
.dot-nav{
  position:fixed;right:16px;top:50%;transform:translateY(-50%);z-index:40;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  --dot:rgba(255,255,255,.55);
  --dot-on:#fff;
  transition:none;
}
.dot-nav button{
  width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;position:relative;
  background:none;border:0;padding:0;
  -webkit-tap-highlight-color:transparent;
}
/* the visible dot */
.dot-nav button::before{
  content:"";width:12px;height:12px;border-radius:50%;
  background:var(--dot);
  transition:background 300ms cubic-bezier(.4,0,.2,1),
             width 300ms cubic-bezier(.4,0,.2,1),
             height 300ms cubic-bezier(.4,0,.2,1);
}
/* the ring, only drawn for the active dot */
.dot-nav button::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:1.5px solid var(--dot-on);
  opacity:0;transform:scale(.55);
  transition:opacity 300ms cubic-bezier(.4,0,.2,1),
             transform 300ms cubic-bezier(.4,0,.2,1),
             border-color 300ms cubic-bezier(.4,0,.2,1);
}
.dot-nav button.is-active::before{width:8px;height:8px;background:var(--dot-on)}
.dot-nav button.is-active::after{opacity:1;transform:scale(1)}
.dot-nav button:hover::before{background:var(--dot-on)}

/* light band behind the rail */
.dot-nav.on-light{--dot:rgba(27,59,102,.38);--dot-on:var(--navy-700)}

.dot-nav button span{
  position:absolute;right:30px;top:50%;transform:translateY(-50%);
  font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .2s var(--ease);
  background:var(--navy-800);color:#fff;padding:3px 9px;border-radius:3px;
}
.dot-nav button:hover span{opacity:1}

/* ============================================================
   HERO  — media panel on top, dark title panel below
   ============================================================ */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;background:var(--dark);overflow:hidden}
/* media fills the whole hero; the copy sits on top of it */
.hero-media{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--navy-900)}

/* One muted autoplay video. Scene cuts come from the footage, not from JS.
   Hidden until JS confirms it can actually play, so a missing file degrades
   to the still sequence rather than to a black box. */
.hero-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:none;background:var(--navy-900);
}
.hero-video::-webkit-media-controls{display:none!important}
.hero.has-video .hero-video{display:block}
.hero.has-video .hero-stills{display:none}
/* the footage blends down into the dark panel below */
.hero-media::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  /* lighter through the middle so the photography reads, with a stronger
     scrim bottom-left where the statement sits */
  background:
    linear-gradient(180deg,rgba(11,29,51,.46) 0%,rgba(11,29,51,.12) 34%,rgba(11,29,51,.62) 74%,rgba(11,29,51,.90) 100%),
    linear-gradient(90deg,rgba(11,29,51,.68) 0%,rgba(11,29,51,.16) 58%,transparent 100%);
}

/* ---------- mute / unmute ---------- */
.hero-sound{
  position:absolute;left:24px;top:calc(var(--header-h) + 18px);z-index:3;
  width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;
  /* display:grid would otherwise beat the UA [hidden] rule */
  background:#C0392B;color:#fff;
  box-shadow:0 4px 16px rgba(0,0,0,.28);
  transition:transform 180ms var(--ease),opacity 180ms var(--ease),background 180ms var(--ease);
}
.hero-sound:hover{background:#D04536}
.hero-sound:active{transform:scale(.92);opacity:.85}
.hero-sound svg{
  width:23px;height:23px;grid-area:1/1;
  fill:currentColor;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
}
.hero-sound[hidden]{display:none}
.hero-sound .ico-live{display:none}
.hero-sound[aria-pressed="true"] .ico-muted{display:none}
.hero-sound[aria-pressed="true"] .ico-live{display:block}
.hero-slide{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  opacity:0;transition:opacity 1.1s var(--ease),transform 7s linear;
  transform:scale(1.06);
}
.hero-slide.is-active{opacity:1;transform:scale(1)}
.hero-caption{
  position:absolute;right:56px;bottom:14px;z-index:2;
  font-size:.78rem;letter-spacing:.05em;color:rgba(255,255,255,.8);
}

.hero-panel{
  position:relative;z-index:2;
  flex:1;display:flex;flex-direction:column;justify-content:flex-end;
  background:none;color:#fff;
  padding:clamp(32px,6vw,72px) 0 clamp(28px,4vw,48px);
}
.hero-panel-inner{
  position:relative;z-index:2;
  width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad);
}
.hero-eyebrow{
  font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue-400);margin:0 0 1.1em;
}
.hero-title{
  font-size:clamp(2.6rem,9vw,5.4rem);font-weight:700;line-height:1.04;
  letter-spacing:-.025em;margin:0 0 .35em;
}
.hero-title span{display:block}
.hero-title span:nth-child(2){color:var(--blue-400)}
.hero-tag{
  font-size:clamp(1rem,2.2vw,1.3rem);font-weight:300;
  color:rgba(255,255,255,.82);margin:0 0 2em;max-width:36ch;
}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}

.scroll-down{
  position:absolute;right:max(var(--pad),calc((100vw - var(--wrap))/2 + var(--pad)));
  bottom:clamp(28px,4vw,48px);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  color:rgba(255,255,255,.7);transition:color .25s var(--ease);
}
.scroll-down:hover{color:#fff}
.mouse{
  width:52px;height:52px;border-radius:50%;border:1.5px solid currentColor;
  display:grid;place-items:center;
}
/* only the arrow moves — the capsule stays put */
.mouse svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;animation:arrow-bob 1.6s ease-in-out infinite}
@keyframes arrow-bob{
  0%,100%{transform:translateY(0);opacity:.75}
  50%{transform:translateY(7px);opacity:1}
}
.scroll-label{font-size:.82rem;line-height:1.25;text-align:center;letter-spacing:.03em}

/* ---------- hero entrance ----------
   The statement settles in once and then stays put while the footage cuts. */
.hero-enter{
  opacity:0;transform:translateY(20px);
  transition:opacity 800ms cubic-bezier(.22,1,.36,1),
             transform 800ms cubic-bezier(.22,1,.36,1);
}
.hero.is-ready .hero-enter{opacity:1;transform:none}
.hero.is-ready .hero-enter:nth-child(2){transition-delay:110ms}
.hero.is-ready .hero-enter:nth-child(3){transition-delay:220ms}
.hero.is-ready .hero-enter:nth-child(4){transition-delay:310ms}

/* ============================================================
   STATISTICS
   ============================================================ */
.stats{background:var(--navy-800);color:#fff;overflow:hidden}
.stat-grid{
  position:relative;z-index:2;
  display:grid;gap:20px;
  grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));
}
.stat-card{
  border:1px solid rgba(255,255,255,.22);border-radius:var(--r);
  padding:38px 26px;text-align:center;background:rgba(255,255,255,.02);
}
.stat-num{
  font-size:clamp(2.6rem,8vw,3.6rem);font-weight:700;line-height:1;
  margin:0 0 .35em;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.stat-pre{color:var(--blue-400)}
.stat-label{
  margin:0;font-size:.95rem;color:rgba(255,255,255,.76);line-height:1.5;
}
.stat-note{
  position:relative;z-index:2;
  margin:28px 0 0;text-align:center;
  font-size:.82rem;color:rgba(255,255,255,.5);
}

/* ============================================================
   ABOUT
   ============================================================ */
.about{background:var(--white)}
.about-figure{margin:0 0 clamp(32px,5vw,56px)}
.about-figure img{width:100%;height:clamp(240px,38vw,440px);object-fit:cover;border-radius:var(--r)}
.lede{max-width:74ch;color:var(--ink-mid);font-size:1.05rem;margin-bottom:2.6em}

.check-list{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
.check-list li{display:flex;align-items:flex-start;gap:16px;color:var(--ink);font-size:1rem}
.check{
  flex:0 0 auto;width:44px;height:44px;border-radius:50%;
  background:var(--tint-100);display:grid;place-items:center;
  transition:background .25s var(--ease);
}
.check-list li:hover .check{background:var(--blue-500)}
.check svg{width:22px;height:22px;fill:none;stroke:var(--navy-700);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:stroke .25s var(--ease)}
.check-list li:hover .check svg{stroke:#fff}
.check-list strong{font-weight:600;color:var(--heading)}

/* ============================================================
   VISION / MISSION BAND
   ============================================================ */
.vm-band{background:var(--tint-50);border-block:1px solid var(--line);padding-block:clamp(48px,7vw,84px)}
.vm-grid{display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
.vm-card{
  background:var(--card);border:1px solid var(--line);border-left:4px solid var(--blue-500);
  border-radius:var(--r);padding:34px 32px;
}
.vm-card h3{font-size:1.25rem;color:var(--heading);margin-bottom:.6em}
.vm-card p{margin:0;color:var(--ink-mid)}

/* ============================================================
   MANAGEMENT MESSAGE
   ============================================================ */
.md-message{background:var(--white);overflow:hidden}
.md-grid{position:relative;z-index:2;display:grid;gap:clamp(32px,5vw,64px);grid-template-columns:minmax(0,300px) minmax(0,1fr);align-items:start}
.md-photo{margin:0}
.md-photo img{
  display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:50% 20%;
  border-radius:var(--r);background:var(--tint-50);
}
/* the signature at the end of the message names him, so the portrait needs no caption */
.md-body blockquote{
  margin:0 0 1.6em;padding-left:26px;border-left:3px solid var(--blue-500);
  color:var(--ink-mid);font-size:1.05rem;
}
.md-body blockquote p:last-child{margin-bottom:0}
.md-sign{display:flex;flex-direction:column;margin:0}
.md-sign strong{color:var(--heading);font-size:1.05rem}
.md-sign span{color:var(--ink-soft);font-size:.9rem}

/* ============================================================
   SERVICES
   ============================================================ */
.services{background:var(--tint-50)}
.svc-grid{display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr))}
.svc-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
}
.svc-card:hover{transform:translateY(-6px);box-shadow:0 18px 44px rgba(18,40,76,.13);border-color:transparent}
.svc-img{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--navy-900)}
.svc-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.svc-card:hover .svc-img img{transform:scale(1.07)}
.svc-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(11,29,51,.5) 100%)}
.svc-body{padding:28px 28px 32px;flex:1;display:flex;flex-direction:column}
.svc-body h3{font-size:1.2rem;color:var(--heading);margin-bottom:.25em}
.svc-sub{color:var(--blue-500);font-size:.9rem;font-weight:600;margin:0 0 1.2em}
.svc-body ul{display:flex;flex-direction:column;gap:9px;font-size:.93rem;color:var(--ink-mid)}
.svc-body ul li{position:relative;padding-left:20px}
.svc-body ul li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:7px;height:7px;background:var(--blue-500);
  clip-path:polygon(50% 0,100% 100%,0 100%);
}
.svc-body ul strong{color:var(--heading);font-weight:600}
.svc-foot{
  margin:clamp(36px,5vw,56px) 0 0;text-align:center;
  font-size:1.02rem;color:var(--ink-mid);max-width:76ch;margin-inline:auto;
}

/* ============================================================
   VISION 2030
   ============================================================ */
.vision2030{background:var(--navy-800);color:#fff;overflow:hidden}
.vision2030 .eyebrow{color:var(--blue-400)}
.vision2030 .display{color:#fff}
.vision2030 .section-lede{color:rgba(255,255,255,.78);margin-bottom:2em}
.v30-grid{position:relative;z-index:2;display:grid;gap:clamp(36px,5vw,72px);grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));align-items:start}
.v30-logo{
  width:200px;background:#fff;padding:10px 14px;border-radius:var(--r);margin-top:8px;
}
.v30-list{display:flex;flex-direction:column;gap:2px}
.v30-list li{
  display:flex;align-items:flex-start;gap:20px;
  padding:20px 0;border-bottom:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.9);font-size:1rem;
  transition:padding-left .3s var(--ease);
}
.v30-list li:first-child{border-top:1px solid rgba(255,255,255,.14)}
.v30-list li:hover{padding-left:10px}
.v30-list .num{
  flex:0 0 auto;font-size:.85rem;font-weight:700;letter-spacing:.06em;
  color:var(--blue-400);padding-top:.2em;
}

/* ============================================================
   ASSURANCE (Quality / HSE / Sustainability)
   ============================================================ */
.assurance{background:var(--white)}
.asr-grid{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(min(310px,100%),1fr))}
.asr-card{
  background:var(--tint-50);border:1px solid var(--line);border-radius:var(--r);
  padding:34px 30px;transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.asr-card:hover{border-color:var(--blue-400);box-shadow:0 14px 36px rgba(18,40,76,.1)}
.asr-card h3{font-size:1.18rem;color:var(--heading);margin-bottom:.2em}
.asr-sub{color:var(--blue-500);font-size:.88rem;font-weight:600;margin:0 0 1.1em}
.asr-card > p{color:var(--ink-mid);font-size:.96rem;margin-bottom:1.3em}
.asr-card ul{display:flex;flex-direction:column;gap:8px;font-size:.92rem;color:var(--ink-mid)}
.asr-card ul li{position:relative;padding-left:18px}
.asr-card ul li::before{content:"";position:absolute;left:0;top:.7em;width:6px;height:6px;border-radius:50%;background:var(--blue-500)}

.qcycle{
  margin-top:clamp(36px,5vw,60px);
  display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
}
.qstep{padding:28px 26px;border-right:1px solid var(--line);background:var(--card)}
.qstep:last-child{border-right:0}
.qnum{
  display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:#fff;background:var(--navy-700);padding:.35em 1em;border-radius:2px;margin-bottom:.9em;
}
.qstep p{margin:0;font-size:.93rem;color:var(--ink-mid)}

/* ============================================================
   PEOPLE
   ============================================================ */
.people{background:var(--tint-50)}
.ppl-grid{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));margin-bottom:clamp(40px,6vw,72px)}
.ppl-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:28px 26px;border-top:3px solid var(--blue-500);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.ppl-card:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(18,40,76,.11)}
.ppl-card h3{font-size:1.05rem;color:var(--heading);margin-bottom:.45em}
.ppl-card p{margin:0;font-size:.93rem;color:var(--ink-mid)}

.org{display:flex;flex-direction:column;gap:10px}
.org-row{display:grid;gap:10px}
.org-row span{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:14px 16px;text-align:center;font-size:.88rem;font-weight:500;color:var(--heading);
}
.org-top span{background:var(--navy-700);color:#fff;border-color:var(--navy-700);font-weight:600}
.org-top:nth-child(2) span{background:var(--navy-600);border-color:var(--navy-600)}
.org-top:nth-child(3) span{background:var(--blue-500);border-color:var(--blue-500)}
.org-five{grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr))}
.org-four{grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr))}

/* ============================================================
   PROJECTS
   ============================================================ */
.projects{background:var(--white)}
.prj-grid{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(min(310px,100%),1fr))}
.prj-card{
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--card);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.prj-card:hover{transform:translateY(-5px);box-shadow:0 16px 40px rgba(18,40,76,.12)}
.prj-img{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--navy-900)}
.prj-img img{width:100%;height:100%;object-fit:cover}
.prj-badge{
  position:absolute;left:14px;top:14px;
  font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  background:rgba(11,29,51,.82);color:#fff;padding:.4em .85em;border-radius:2px;
}
.prj-body{padding:24px 24px 26px}
.prj-body h3{font-size:1.1rem;color:var(--ink-soft);margin-bottom:.9em;font-weight:600}
.prj-body dl{margin:0;display:flex;flex-direction:column;gap:8px}
.prj-body dl > div{display:flex;gap:12px;font-size:.9rem;border-bottom:1px dashed var(--line);padding-bottom:8px}
.prj-body dl > div:last-child{border-bottom:0;padding-bottom:0}
.prj-body dt{flex:0 0 92px;color:var(--heading);font-weight:600}
.prj-body dd{margin:0;color:var(--ink-soft)}
.prj-note{
  margin:clamp(32px,4vw,48px) 0 0;padding:20px 24px;
  background:var(--tint-50);border-left:3px solid var(--blue-500);border-radius:var(--r);
  font-size:.93rem;color:var(--ink-mid);
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact{background:var(--tint-50)}
.ctc-grid{display:grid;gap:clamp(36px,5vw,64px);grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr));align-items:start}
.ctc-intro address{margin-bottom:1.8em;color:var(--ink-mid);line-height:1.9}
.ctc-intro address strong{color:var(--heading)}
.ctc-meta{display:flex;flex-direction:column;gap:2px}
.ctc-meta li{
  display:flex;flex-wrap:wrap;gap:4px 18px;align-items:baseline;
  padding:14px 0;border-bottom:1px solid var(--line);
}
.ctc-meta li:first-child{border-top:1px solid var(--line)}
.ctc-meta li > span:first-child{
  flex:0 0 90px;font-size:.78rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-soft);
}
.ctc-meta a{color:var(--heading);font-weight:500;border-bottom:1px solid transparent;transition:border-color .2s var(--ease),color .2s var(--ease)}
.ctc-meta a:hover{color:var(--blue-500);border-bottom-color:var(--blue-500)}

.ctc-form{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:34px 32px 36px}
.ctc-form h3{font-size:1.2rem;color:var(--heading);margin-bottom:1.2em}
.field{margin-bottom:16px}
.field label{display:block;font-size:.82rem;font-weight:600;color:var(--ink-mid);margin-bottom:6px}
.field input,.field select,.field textarea{
  width:100%;padding:.78em .95em;border:1px solid var(--line);border-radius:var(--r);
  background:var(--card);transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.field textarea{resize:vertical;min-height:110px}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0;border-color:var(--blue-500);box-shadow:0 0 0 3px rgba(46,117,182,.15);
}
.field input:user-invalid{border-color:#C0392B}
.form-note{margin:12px 0 0;font-size:.87rem;min-height:1.3em}
.form-note.ok{color:#1E7B4D}
.form-note.err{color:#C0392B}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{background:var(--navy-900);color:rgba(255,255,255,.72);padding-top:clamp(56px,7vw,88px)}
.ftr-grid{
  display:grid;gap:40px;
  grid-template-columns:minmax(220px,1.3fr) repeat(auto-fit,minmax(min(170px,100%),1fr));
  padding-bottom:clamp(40px,5vw,64px);
}
.ftr-brand .brand-mark{width:72px;height:52px;margin-bottom:16px}
.ftr-name{color:#fff;font-weight:600;margin:0 0 .3em}
.ftr-tag{font-size:.92rem;color:var(--blue-400);margin:0}
.site-footer h4{
  font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;margin-bottom:1.3em;
}
.ftr-links ul,.ftr-contact ul{display:flex;flex-direction:column;gap:11px;font-size:.93rem}
.site-footer a{transition:color .2s var(--ease)}
.site-footer a:hover{color:var(--blue-400)}
.ftr-news p{font-size:.9rem;margin-bottom:1.2em}
.news-form{display:flex;flex-direction:column;gap:10px}
.news-form input{
  padding:.78em .95em;border-radius:var(--r);
  border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.07);color:#fff;
}
.news-form input::placeholder{color:rgba(255,255,255,.45)}
.news-form input:focus{outline:0;border-color:var(--blue-400);box-shadow:0 0 0 3px rgba(78,146,206,.2)}

.ftr-bar{
  border-top:1px solid rgba(255,255,255,.12);
  max-width:var(--wrap);margin-inline:auto;padding:22px var(--pad);
  display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;
  font-size:.85rem;
}
.ftr-bar p{margin:0}
.social{display:flex;gap:10px}
.social a{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.2);transition:background .25s var(--ease),border-color .25s var(--ease);
}
.social a:hover{background:var(--blue-500);border-color:var(--blue-500)}
.social svg{width:17px;height:17px;fill:currentColor}


/* ============================================================
   ARABIC / RTL
   Only direction-dependent things are mirrored; the grid and spacing
   scale are logical already, so most of the layout flips for free.
   ============================================================ */
:root[lang="ar"] body,
:root[lang="ar"] :root[lang="ar"]{ --ease:cubic-bezier(.22,.61,.36,1); }

/* Arabic has no case, so uppercase transforms are meaningless and
   letter-spacing actively breaks the joined script */
:root[lang="ar"] .display,
:root[lang="ar"] .hero-eyebrow,
:root[lang="ar"] .brand-en,
:root[lang="ar"] .qnum,
:root[lang="ar"] .prj-badge,
:root[lang="ar"] .site-footer h4,
:root[lang="ar"] .ctc-meta li > span:first-child{
  text-transform:none;letter-spacing:0;
}
:root[lang="ar"] .hero-title{letter-spacing:0;line-height:1.3}
:root[lang="ar"] .display{line-height:1.3}
:root[lang="ar"] h1,:root[lang="ar"] h2,
:root[lang="ar"] h3,:root[lang="ar"] h4{letter-spacing:0;line-height:1.35}
:root[lang="ar"] .brand-ar{font-size:1.12rem}

/* the fixed rail and the hero controls swap sides */
[dir="rtl"] .dot-nav{right:auto;left:16px}
[dir="rtl"] .dot-nav button span{right:auto;left:30px}
[dir="rtl"] .hero-sound{left:auto;right:24px}
[dir="rtl"] .hero-caption{right:auto;left:56px}
[dir="rtl"] .scroll-down{
  right:auto;
  left:max(var(--pad),calc((100vw - var(--wrap))/2 + var(--pad)));
}
[dir="rtl"] .nav-drawer{right:auto;left:0;transform:translateX(-100%);box-shadow:20px 0 60px rgba(0,0,0,.35)}
[dir="rtl"] .nav-drawer.is-open{transform:translateX(0)}
[dir="rtl"] .nav-close{right:auto;left:22px}
[dir="rtl"] .nav-list a:hover{padding-left:0;padding-right:8px}

/* borders and list markers that were pinned to one side */
[dir="rtl"] .vm-card{border-left:1px solid var(--line);border-right:4px solid var(--blue-500)}
[dir="rtl"] .md-body blockquote{padding-left:0;padding-right:26px;border-left:0;border-right:3px solid var(--blue-500)}
[dir="rtl"] .prj-note,[dir="rtl"] .stat-note{border-left:0;border-right:3px solid var(--blue-500)}
[dir="rtl"] .svc-body ul li,[dir="rtl"] .asr-card ul li{padding-left:0;padding-right:20px}
[dir="rtl"] .svc-body ul li::before,[dir="rtl"] .asr-card ul li::before{left:auto;right:0}
[dir="rtl"] .svc-body ul li::before{clip-path:polygon(50% 0,100% 100%,0 100%)}
[dir="rtl"] .v30-list li:hover{padding-left:0;padding-right:10px}
[dir="rtl"] .qstep{border-right:0;border-left:1px solid var(--line)}
[dir="rtl"] .qstep:last-child{border-left:0}
[dir="rtl"] .ppl-card{border-top:3px solid var(--blue-500)}
[dir="rtl"] .prj-badge{left:auto;right:14px}

/* the hero pattern leans the other way in RTL */
[dir="rtl"] .hero-panel::before{
  -webkit-mask-image:linear-gradient(45deg,#000 0%,rgba(0,0,0,.5) 48%,transparent 82%);
  mask-image:linear-gradient(45deg,#000 0%,rgba(0,0,0,.5) 48%,transparent 82%);
}
[dir="rtl"] .hero-media::after{
  background:
    linear-gradient(180deg,rgba(11,29,51,.46) 0%,rgba(11,29,51,.12) 34%,rgba(11,29,51,.62) 74%,rgba(11,29,51,.90) 100%),
    linear-gradient(270deg,rgba(11,29,51,.68) 0%,rgba(11,29,51,.16) 58%,transparent 100%);
}

/* numerals stay LTR inside Arabic text */
[dir="rtl"] .stat-num,[dir="rtl"] .v30-list .num,
[dir="rtl"] .ftr-bar p,[dir="rtl"] .nav-foot{direction:ltr;text-align:right}
[dir="rtl"] .stat-num{text-align:center}

@media (max-width:760px){
  [dir="rtl"] .dot-nav{right:auto;left:14px}
}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */


/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .md-grid{grid-template-columns:1fr}
  .md-photo{max-width:260px}
  .qstep{border-right:0;border-bottom:1px solid var(--line)}
  .qstep:last-child{border-bottom:0}
}
@media (max-width:760px){
  :root{--header-h:66px;--pad:18px}
  .brand{gap:10px}
  .brand-mark{width:52px;height:38px}
  .brand-ar{font-size:.9rem}
  .brand-en{font-size:.58rem;letter-spacing:.02em}
  .hero-eyebrow{font-size:.68rem;letter-spacing:.1em}
  .hero-caption{right:34px;font-size:.7rem;max-width:calc(100% - 52px);text-align:right}
  /* rail keeps its ring geometry on mobile — only the inset and pitch tighten */
  .dot-nav{right:14px;gap:0}
  .dot-nav button span{display:none}
  .stat-grid{grid-template-columns:1fr}   /* one stat card per row on mobile */
  .stat-card{padding:32px 22px}
  .scroll-down{right:var(--pad)}
  .mouse{width:44px;height:44px}
  .hero-tag{margin-bottom:1.6em}
  .check-list{grid-template-columns:1fr}
  .ftr-grid{grid-template-columns:1fr 1fr}
  .ftr-brand{grid-column:1/-1}
  .ftr-news{grid-column:1/-1}
}
@media (max-width:560px){
  /* The lockup cannot be legible beside the controls at this width — at 8px it
     wrapped to three lines. The mark already carries the name, so show it alone
     and give it room. */
  .brand-text{display:none}
  .brand-mark{width:58px;height:42px}
  .brand{gap:0}
  .brand-en{font-size:.56rem;letter-spacing:.03em}
  .brand-mark{width:46px;height:34px}
  /* the mouse indicator would sit on top of the stacked CTAs, and a scroll
     affordance earns nothing on a touch screen */
  .scroll-down{display:none}
  .hero-panel{padding-bottom:clamp(32px,7vw,48px)}
  /* the dot rail is hidden at this width, so the copy gets the full gutter */
  .vm-card,.asr-card,.ppl-card,.ctc-form{padding-inline:22px}
  .svc-body{padding:24px 22px 26px}
  .prj-body{padding:20px}
  .qstep{padding:24px 22px}
}
@media (max-width:460px){
  .brand-en{font-size:.5rem}
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .btn{width:100%}
  .ftr-grid{grid-template-columns:1fr}
  .prj-body dt{flex-basis:80px}
  .prj-body dl > div{flex-direction:column;gap:2px}
  .ctc-meta li > span:first-child{flex-basis:100%}
}
@media (max-width:380px){
  :root{--pad:14px}
  .hero-title{font-size:2.3rem}
  .display{font-size:1.65rem}
  .check{width:38px;height:38px}
  .check svg{width:19px;height:19px}
}

/* Landscape phones: 100svh leaves almost nothing for the hero copy, so let the
   hero grow with its content instead of being pinned to the viewport. */
@media (max-height:560px) and (orientation:landscape){
  .hero{min-height:440px;height:auto}
  .hero-panel{padding-block:40px 32px}
  .hero-title{font-size:clamp(2rem,6vw,3rem)}
  .hero-tag{margin-bottom:1.2em}
  .scroll-down{display:none}
  .dot-nav{display:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .reveal{opacity:1;transform:none}
  .hero-slide{transform:none}
}

/* ============================================================
   MULTI-PAGE ADDITIONS
   ============================================================ */

/* active page in the nav drawer and footer */
.nav-list a.is-here{color:var(--blue-400)}
.nav-list a.is-here::before{content:"";display:inline-block;width:14px;height:1px;background:currentColor;vertical-align:middle;margin-inline-end:9px}

/* service card as a whole-card link on the services index */
.svc-link{display:flex;flex-direction:column;height:100%}
.svc-more{
  margin-top:auto;padding-top:1.1em;
  font-size:.82rem;font-weight:600;letter-spacing:.04em;
  color:var(--blue-500);display:inline-flex;align-items:center;gap:.5em;
}
.svc-more::after{content:"→";transition:transform .25s var(--ease)}
.svc-card:hover .svc-more::after{transform:translateX(4px)}
[dir="rtl"] .svc-more::after{content:"←"}
[dir="rtl"] .svc-card:hover .svc-more::after{transform:translateX(-4px)}
/* the index cards carry no bullet lists, so let them size to their content */
.svc-link .svc-body{flex:1}

/* ---------- service detail page ---------- */
.svc-detail{background:var(--white);padding-top:calc(var(--header-h) + clamp(48px,7vw,96px))}
.svc-detail .eyebrow a{border-bottom:1px solid transparent;transition:border-color .2s var(--ease)}
.svc-detail .eyebrow a:hover{border-bottom-color:currentColor}
.svc-detail h1.display{margin-bottom:.35em}
.detail-list{
  display:grid;gap:0;margin-top:clamp(28px,4vw,44px);
  grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));
  border-top:1px solid var(--line);
}
.detail-list li{
  position:relative;padding:15px 0 15px 22px;
  border-bottom:1px solid var(--line);color:var(--ink-mid);
}
.detail-list li::before{
  content:"";position:absolute;inset-inline-start:0;top:1.42em;
  width:8px;height:8px;background:var(--blue-500);
  clip-path:polygon(50% 0,100% 100%,0 100%);
}
[dir="rtl"] .detail-list li{padding-left:0;padding-right:22px}
.detail-list li strong{color:var(--navy-800);font-weight:600}
.svc-detail .svc-foot{text-align:start;margin-inline:0}

/* the inner pages start under the fixed header rather than behind a hero */
.about:first-of-type,
.services:first-of-type,
.assurance:first-of-type,
.projects:first-of-type,
.contact:first-of-type{padding-top:calc(var(--header-h) + clamp(48px,7vw,96px))}

/* ============================================================
   GALLERY
   ============================================================ */
.gallery{background:var(--white);padding-top:calc(var(--header-h) + clamp(48px,7vw,96px))}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(28px,4vw,44px)}
.chip{
  padding:.56em 1.1em;border:1px solid var(--line);border-radius:999px;
  font-size:.84rem;font-weight:500;color:var(--ink-mid);background:var(--card);
  transition:background .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease);
}
.chip:hover{border-color:var(--blue-400);color:var(--heading)}
.chip.is-on{background:var(--navy-800);border-color:var(--navy-800);color:#fff}

.tiles{
  display:grid;gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr));
}
.tile{
  margin:0;position:relative;overflow:hidden;border-radius:var(--r);
  background:var(--tint-50);cursor:zoom-in;aspect-ratio:4/3;
}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease)}
.tile:hover img{transform:scale(1.05)}
.tile figcaption{
  position:absolute;inset:auto 0 0 0;padding:26px 12px 9px;
  font-size:.72rem;letter-spacing:.03em;color:#fff;
  background:linear-gradient(transparent,rgba(11,29,51,.82));
  opacity:0;transition:opacity .25s var(--ease);
}
.tile:hover figcaption,.tile:focus-visible figcaption{opacity:1}
.tile.is-hidden{display:none}

/* video tiles get a play badge */
.tile .play{
  position:absolute;inset:0;margin:auto;width:52px;height:52px;border-radius:50%;
  background:rgba(11,29,51,.62);border:1.5px solid rgba(255,255,255,.85);
  transition:background .25s var(--ease),transform .25s var(--ease);
}
.tile .play::after{
  content:"";position:absolute;inset:0;margin:auto;width:0;height:0;
  border-left:15px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent;
  transform:translateX(3px);
}
.tile.is-video:hover .play{background:var(--blue-500);transform:scale(1.08)}

.gal-count{
  margin:clamp(24px,3vw,36px) 0 0;font-size:.82rem;color:var(--ink-soft);
}

/* ---------- lightbox ---------- */
.lb{
  position:fixed;inset:0;z-index:120;background:rgba(8,16,28,.96);
  display:grid;place-items:center;padding:clamp(40px,6vw,72px) clamp(16px,5vw,80px);
}
.lb[hidden]{display:none}
.lb-stage{max-width:100%;max-height:100%;display:grid;place-items:center}
.lb-stage img,.lb-stage video{
  max-width:100%;max-height:78vh;width:auto;height:auto;
  border-radius:var(--r);background:#000;
}
.lb-cap{
  position:absolute;left:0;right:0;bottom:18px;margin:0;text-align:center;
  font-size:.82rem;color:rgba(255,255,255,.72);
}
.lb-x,.lb-nav{
  position:absolute;z-index:2;display:grid;place-items:center;
  color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);
  border-radius:50%;transition:background .2s var(--ease);
}
.lb-x:hover,.lb-nav:hover{background:rgba(255,255,255,.26)}
.lb-x{top:18px;right:18px;width:44px;height:44px;font-size:1.7rem;line-height:1}
.lb-nav{top:50%;transform:translateY(-50%);width:48px;height:48px;font-size:2rem;line-height:1;padding-bottom:4px}
.lb-prev{left:14px}
.lb-next{right:14px}
[dir="rtl"] .lb-prev{left:auto;right:14px}
[dir="rtl"] .lb-next{right:auto;left:14px}
[dir="rtl"] .lb-x{right:auto;left:18px}

@media (max-width:560px){
  .tiles{grid-template-columns:repeat(auto-fill,minmax(min(150px,100%),1fr));gap:7px}
  .tile figcaption{opacity:1;font-size:.64rem;padding:18px 8px 6px}
  .lb{padding:56px 8px 48px}
  .lb-nav{width:40px;height:40px;font-size:1.6rem}
  .tile .play{width:42px;height:42px}
}

/* ============================================================
   TOP NAV  (links live in the bar; the drawer is the mobile fallback)
   ============================================================ */
.top-nav{margin-inline-start:auto;margin-inline-end:6px;flex:0 0 auto}
.top-nav ul{display:flex;align-items:center;gap:9px}
.top-nav a{
  display:block;padding:8px 2px;position:relative;
  font-size:.72rem;font-weight:500;letter-spacing:.02em;text-transform:uppercase;
  color:var(--hdr-fg,#fff);opacity:.82;
  transition:opacity .22s var(--ease),color 300ms ease;
  white-space:nowrap;
}
.top-nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;
  background:currentColor;transform:scaleX(0);transform-origin:center;
  transition:transform .3s var(--ease);
}
.top-nav a:hover{opacity:1}
.top-nav a:hover::after{transform:scaleX(1)}
.top-nav a.is-here{opacity:1;color:var(--blue-400)}
.top-nav a.is-here::after{transform:scaleX(1)}
.site-header.on-light .top-nav a{color:var(--navy-800)}
.site-header.on-light .top-nav a.is-here{color:var(--blue-500)}

/* The burger is only needed once the links no longer fit.
   Eleven labels (nine pages plus the profile and the quotation button) with
   the bilingual lockup and the two controls need about 1420px of bar. The bar is capped at --wrap (1180px), so the links never fit
   however wide the window is — raising the breakpoint alone did nothing, and
   the Arabic line ran under the nav. Above the breakpoint the bar alone takes
   the extra width; the content below keeps its 1180px column. */
@media (min-width:1500px){
  .burger{display:none}
  .header-inner{max-width:1440px}
}
@media (max-width:1499px){
  .top-nav{display:none}
}

/* ============================================================
   ENTRANCE ANIMATIONS
   One base class plus a direction, so any element can opt in with
   class="reveal" data-anim="up|fade|left|right|zoom" data-delay="2".
   ============================================================ */
.reveal{
  opacity:0;
  transition:opacity 700ms var(--ease),transform 700ms var(--ease);
  will-change:opacity,transform;
}
.reveal,
.reveal[data-anim="up"]   {transform:translateY(26px)}
.reveal[data-anim="fade"] {transform:none}
.reveal[data-anim="down"] {transform:translateY(-22px)}
.reveal[data-anim="left"] {transform:translateX(-34px)}
.reveal[data-anim="right"]{transform:translateX(34px)}
.reveal[data-anim="zoom"] {transform:scale(.94)}
.reveal.is-in{opacity:1;transform:none}

/* stagger steps, used by data-delay */
.reveal[data-delay="1"]{transition-delay:80ms}
.reveal[data-delay="2"]{transition-delay:160ms}
.reveal[data-delay="3"]{transition-delay:240ms}
.reveal[data-delay="4"]{transition-delay:320ms}
.reveal[data-delay="5"]{transition-delay:400ms}

/* RTL mirrors the horizontal slides */
[dir="rtl"] .reveal[data-anim="left"] {transform:translateX(34px)}
[dir="rtl"] .reveal[data-anim="right"]{transform:translateX(-34px)}
[dir="rtl"] .reveal.is-in{transform:none}

/* header settles in on first paint */
.site-header{opacity:0;transform:translateY(-100%)}
.site-header.is-up{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .55s var(--ease),background 300ms ease,box-shadow 300ms ease,color 300ms ease}

/* gallery tiles fade and lift as they scroll in */
.tile.reveal{transition-duration:520ms}

@media (prefers-reduced-motion:reduce){
  .reveal,.reveal[data-anim]{opacity:1;transform:none}
  .site-header{opacity:1;transform:none}
}


/* ============================================================
   CERTIFICATIONS
   ============================================================ */
.certs{background:var(--tint-50)}
.cert-grid{display:grid;gap:clamp(20px,3vw,32px);grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
.cert{
  display:flex;flex-direction:column;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.cert:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(18,40,76,.12)}
.cert-shot{display:block;background:#fff;padding:18px 18px 0;overflow:hidden}
.cert-shot img{
  width:100%;height:auto;display:block;border:1px solid var(--line);
  transition:transform .5s var(--ease);
}
.cert:hover .cert-shot img{transform:scale(1.02)}
.cert-body{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1}
.cert-std{
  margin:0 0 .25em;font-size:.78rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--blue-500);
}
.cert-body h3{font-size:1.14rem;color:var(--heading);margin-bottom:.9em}
.cert-body dl{margin:0 0 1.4em;display:grid;gap:7px}
.cert-body dl > div{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:.88rem;border-bottom:1px dashed var(--line);padding-bottom:7px}
.cert-body dl > div:last-child{border-bottom:0}
.cert-body dt{flex:0 0 112px;color:var(--ink-soft);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;padding-top:2px}
.cert-body dd{margin:0;color:var(--ink);font-weight:500}
.cert-body .btn{margin-top:auto;align-self:flex-start}

.cert-scope{
  margin-top:clamp(30px,4vw,48px);padding:clamp(22px,3vw,32px);
  background:var(--card);border:1px solid var(--line);
  border-inline-start:3px solid var(--blue-500);border-radius:var(--r);
}
.cert-scope h3{font-size:1.02rem;color:var(--heading);margin-bottom:.7em}
.cert-scope p{color:var(--ink-mid);font-size:.95rem;margin-bottom:1em}
.cert-verify{font-size:.88rem;color:var(--ink-soft);margin:0}
.cert-verify a{color:var(--blue-500);border-bottom:1px solid transparent;transition:border-color .2s var(--ease)}
.cert-verify a:hover{border-bottom-color:currentColor}
.prj-note a{color:var(--blue-500);border-bottom:1px solid transparent;transition:border-color .2s var(--ease)}
.prj-note a:hover{border-bottom-color:currentColor}

@media (max-width:480px){
  .cert-body dt{flex-basis:100%}
}

/* ============================================================
   LANDING PAGE SECTIONS
   ============================================================ */
.home-about{background:var(--white)}
.ha-grid{display:grid;gap:clamp(30px,5vw,64px);grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center}
.ha-fig{margin:0;overflow:hidden;border-radius:var(--r)}
.ha-fig img{width:100%;aspect-ratio:4/3;object-fit:cover}
.ha-copy .lede{margin-bottom:1.6em}
.ha-vals{
  display:grid;gap:10px 18px;grid-template-columns:repeat(auto-fit,minmax(min(140px,45%),1fr));
  margin:0 0 2em;
}
.ha-vals li{
  position:relative;padding-inline-start:22px;
  font-weight:500;color:var(--heading);font-size:.96rem;
}
.ha-vals li::before{
  content:"";position:absolute;inset-inline-start:0;top:.56em;
  width:9px;height:9px;background:var(--blue-500);
  clip-path:polygon(50% 0,100% 100%,0 100%);
}


/* ---------- certification band ---------- */
.home-certs{background:var(--white)}
.hc-grid{display:grid;gap:clamp(28px,4vw,56px);grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
.hc-copy p{color:var(--ink-mid);margin-bottom:1.8em;max-width:52ch}
.hc-badges{display:grid;gap:14px}
.hc-badge{
  display:block;padding:22px 24px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--card);border-inline-start:3px solid var(--blue-500);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.hc-badge:hover{transform:translateX(4px);box-shadow:0 12px 30px rgba(18,40,76,.1)}
[dir="rtl"] .hc-badge:hover{transform:translateX(-4px)}
.hc-iso{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;color:var(--heading)}
.hc-yr{font-size:1.5rem;font-weight:300;color:var(--ink-soft)}
.hc-sys{display:block;margin-top:.35em;font-size:.88rem;color:var(--blue-500);font-weight:500}

/* ---------- closing call to action ---------- */
.home-cta{background:var(--navy-800);color:#fff;overflow:hidden}
.hcta{position:relative;z-index:2;text-align:center;max-width:720px}
.home-cta .display{color:#fff}
.hcta p{color:rgba(255,255,255,.78);margin-bottom:2em}
.hcta-act{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

@media (max-width:860px){
  .ha-grid,.hc-grid{grid-template-columns:1fr}
  .ha-fig{order:-1}
}
@media (max-width:460px){
  .hp-act .btn,.hcta-act .btn{width:100%}
}
/* teaser cards preview a few disciplines so they are not mostly empty */
.svc-peek{display:grid;gap:6px;margin:0 0 1.2em;font-size:.88rem;color:var(--ink-mid)}
.svc-peek li{position:relative;padding-inline-start:16px}
.svc-peek li::before{
  content:"";position:absolute;inset-inline-start:0;top:.62em;
  width:6px;height:6px;background:var(--blue-500);
  clip-path:polygon(50% 0,100% 100%,0 100%);
}
/* the full cards on the Services page get their own link */
.svc-body > .svc-more{margin-top:1.3em;align-self:flex-start}
.svc-card:has(> .svc-body) .svc-more{color:var(--blue-500)}

/* ============================================================
   MOBILE HEADER AND DRAWER
   ============================================================ */
@media (max-width:1259px){
  /* the rail duplicates the drawer on small screens and crowds the edge */
  .dot-nav{display:none}
}
@media (max-width:560px){
  .icon-btn{width:46px;height:46px}          /* comfortable tap targets */
  .lang-btn{height:46px;padding:0 12px;font-size:.84rem}
  .header-actions{gap:2px}
  .burger span{width:22px}
}

/* ---------- drawer ---------- */
.nav-brand{
  display:flex;align-items:center;gap:12px;padding-top:30px;
  padding-bottom:22px;margin-bottom:10px;
  border-bottom:1px solid rgba(255,255,255,.14);
}
.nav-brand .brand-mark{width:54px;height:39px;flex:0 0 auto}
.nav-brand-txt{display:flex;flex-direction:column;min-width:0}
.nav-brand-txt b{font-size:.95rem;font-weight:600;line-height:1.3;direction:rtl;white-space:nowrap}
.nav-brand-txt i{
  font-style:normal;font-size:.58rem;letter-spacing:.04em;text-transform:uppercase;
  color:rgba(255,255,255,.62);line-height:1.45;white-space:nowrap;
}
:root[lang="ar"] .nav-brand-txt i{text-transform:none;letter-spacing:0}

.nav-drawer{padding:26px 28px 28px}
.nav-list a{
  display:flex;align-items:center;justify-content:space-between;
  padding:.82em 0;font-size:1.06rem;
}
.nav-list a::after{
  content:"→";opacity:0;transform:translateX(-6px);
  transition:opacity .25s var(--ease),transform .25s var(--ease);
  color:var(--blue-400);
}
[dir="rtl"] .nav-list a::after{content:"←";transform:translateX(6px)}
.nav-list a:hover::after,.nav-list a.is-here::after{opacity:1;transform:none}
.nav-list a.is-here::before{display:none}
.nav-foot{
  padding-top:22px;margin-top:22px;
  border-top:1px solid rgba(255,255,255,.14);
  gap:10px;font-size:.95rem;opacity:1;
}
.nav-foot a{color:rgba(255,255,255,.8);display:flex;align-items:center;gap:9px}
.nav-foot a:hover{color:var(--blue-400)}

/* ============================================================
   PROJECT CARDS
   ============================================================ */
.prj-group{margin-bottom:clamp(36px,5vw,60px)}
.prj-head{
  font-size:1.02rem;color:var(--blue-500);font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;
  padding-bottom:.8em;margin-bottom:clamp(18px,2.4vw,26px);
  border-bottom:2px solid var(--line);
}
.prj-cards{
  display:grid;gap:clamp(18px,2.4vw,26px);
  grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));
}
.prj{
  display:flex;flex-direction:column;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
}
.prj:hover{transform:translateY(-4px);box-shadow:0 16px 38px rgba(18,40,76,.12);border-color:transparent}
.prj-shot{aspect-ratio:16/10;overflow:hidden;background:var(--tint-50)}
.prj-shot img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.prj:hover .prj-shot img{transform:scale(1.05)}
.prj-text{padding:18px 20px 22px;flex:1;display:flex;flex-direction:column}
.prj-text h4{font-size:1rem;color:var(--heading);line-height:1.35;margin-bottom:.55em}
.prj-text p{margin:0;font-size:.9rem;color:var(--ink-mid);line-height:1.6}

.prj-note{
  margin:clamp(30px,4vw,46px) 0 0;padding:20px 24px;
  background:var(--tint-50);border-inline-start:3px solid var(--blue-500);
  border-radius:var(--r);font-size:.9rem;color:var(--ink-mid);
}
.prj-note a{color:var(--blue-500);border-bottom:1px solid transparent;transition:border-color .2s var(--ease)}
.prj-note a:hover{border-bottom-color:currentColor}

@media (max-width:560px){
  .prj-text{padding:16px 18px 20px}
  .prj-text h4{font-size:.98rem}
}

/* ---------- work preview ---------- */
.home-projects{background:var(--tint-50)}
.hw-grid{
  display:grid;gap:clamp(30px,4vw,56px);
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:start;
}
.hw-copy .lede{margin-bottom:1.2em}
.hw-copy > p{color:var(--ink-mid)}
.hw-stats{
  display:grid;gap:0;grid-template-columns:repeat(3,auto);
  margin:1.8em 0 2em;border-top:1px solid var(--line);
}
.hw-stats li{padding:18px 26px 0 0;position:relative}
.hw-stats li+li{padding-inline-start:26px}
.hw-stats li+li::before{content:"";position:absolute;inset-inline-start:0;top:18px;bottom:2px;width:1px;background:var(--line)}
.hw-stats b{
  display:block;font-size:clamp(1.7rem,3vw,2.3rem);font-weight:700;
  line-height:1;color:var(--heading);letter-spacing:-.02em;margin-bottom:.25em;
}
.hw-stats span{font-size:.82rem;color:var(--ink-soft)}
.hw-act{display:flex;flex-wrap:wrap;gap:10px}

.hw-shots{display:grid;gap:16px}
.hw-shots figure{margin:0}
.hw-shots img{
  width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r);
  transition:transform .6s var(--ease);
}
.hw-shots figure{overflow:hidden;border-radius:var(--r)}
.hw-shots figure:hover img{transform:scale(1.04)}
.hw-shots figcaption{
  padding-top:9px;font-size:.78rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-soft);
}
.btn-line{border-color:var(--line);color:var(--heading)}
.btn-line:hover{background:var(--navy-800);border-color:var(--navy-800);color:#fff}

@media (max-width:860px){
  .hw-grid{grid-template-columns:1fr}
  .hw-shots{grid-template-columns:1fr 1fr;gap:12px}
}
@media (max-width:560px){
  .hw-stats{grid-template-columns:1fr 1fr 1fr}
  .hw-stats li{padding-inline-end:12px}
  .hw-stats li+li{padding-inline-start:12px}
  .hw-act .btn{width:100%}
}


/* ============================================================
   COMPANY AT A GLANCE  (About)
   The factbox from page 4 of the company profile. Two columns of
   label/value pairs that collapse to one on a phone.
   ============================================================ */
.about-sub{
  font-size:1.15rem;color:var(--heading);
  margin:clamp(34px,5vw,56px) 0 1.1em;
}
.glance{
  margin-top:clamp(34px,5vw,56px);
  background:var(--tint-50);border:1px solid var(--line);
  border-top:3px solid var(--blue-500);border-radius:var(--r);
  padding:clamp(26px,4vw,38px);
}
.glance h3{font-size:1.1rem;color:var(--heading);margin-bottom:1.1em}
.glance dl{
  display:grid;gap:0;margin:0;
  grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
}
.glance dl > div{
  display:flex;flex-wrap:wrap;gap:4px 18px;align-items:baseline;
  padding:13px 0;border-top:1px solid var(--line);
}
.glance dt{
  flex:0 0 140px;font-size:.78rem;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-soft);
}
.glance dd{margin:0;font-weight:500;color:var(--heading);font-size:.95rem}
.glance-foot{margin:1.6em 0 0}

/* ============================================================
   REGISTRATIONS & COMPLIANCE
   Every figure here comes off an original certificate, so the
   numbers are set in tabular figures and never wrapped mid-number.
   ============================================================ */
.compliance{background:var(--white)}

.reg-keys{
  margin-top:clamp(34px,5vw,56px);
  background:var(--tint-50);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(26px,4vw,38px);
}
.reg-keys h2{font-size:1.1rem;color:var(--heading);margin-bottom:1.1em}
.reg-keys dl{
  display:grid;gap:0 32px;margin:0;
  grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));
}
.reg-keys dl > div{
  display:flex;flex-wrap:wrap;gap:4px 18px;align-items:baseline;
  padding:12px 0;border-top:1px solid var(--line);
}
.reg-keys dt{
  flex:0 0 130px;font-size:.78rem;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-soft);
}
.reg-keys dd{
  margin:0;font-weight:600;color:var(--heading);
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere;
}

/* The table is wide by nature — five columns of certificate data. Rather
   than crush it, it scrolls inside its own frame on narrow screens. */
.reg-wrap{
  margin-top:clamp(28px,4vw,44px);
  border:1px solid var(--line);border-radius:var(--r);
  overflow-x:auto;-webkit-overflow-scrolling:touch;
}
.reg-table{width:100%;border-collapse:collapse;min-width:820px;font-size:.92rem}
.reg-table th,.reg-table td{
  padding:15px 18px;text-align:start;vertical-align:top;
  border-bottom:1px solid var(--line);
}
.reg-table thead th{
  background:var(--navy-800);color:#fff;font-size:.74rem;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;
}
.reg-table tbody th{font-weight:600;color:var(--heading);font-size:.93rem}
.reg-table td{color:var(--ink-mid)}
.reg-table tbody tr:last-child th,.reg-table tbody tr:last-child td{border-bottom:0}
.reg-table tbody tr:nth-child(even){background:var(--tint-50)}
.reg-no{
  font-variant-numeric:tabular-nums;font-weight:600;color:var(--heading);
  white-space:nowrap;
}
.reg-live{
  display:inline-block;padding:.2em .7em;border-radius:2px;
  background:var(--tint-100);color:var(--navy-700);
  font-size:.78rem;font-weight:600;letter-spacing:.04em;white-space:nowrap;
}

.reg-cards{
  margin-top:clamp(34px,5vw,56px);
  display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
}
.reg-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:30px 28px;border-top:3px solid var(--blue-500);
}
.reg-fig{
  font-size:clamp(1.9rem,4vw,2.5rem);font-weight:700;line-height:1;
  letter-spacing:-.02em;color:var(--blue-500);margin:0 0 .45em;
  font-variant-numeric:tabular-nums;
}
.reg-card h3{font-size:1.02rem;color:var(--heading);margin-bottom:.6em}
.reg-card p{margin:0;font-size:.93rem;color:var(--ink-mid)}
.reg-card a{color:var(--blue-500);border-bottom:1px solid transparent}
.reg-card a:hover{border-bottom-color:var(--blue-500)}

.reg-verify{margin-top:clamp(34px,5vw,56px)}
.reg-verify h3{font-size:1.1rem;color:var(--heading);margin-bottom:1em}
.reg-verify ul{display:flex;flex-direction:column;gap:12px;max-width:72ch}
.reg-verify li{
  position:relative;padding-inline-start:20px;
  font-size:.95rem;color:var(--ink-mid);
}
.reg-verify li::before{
  content:"";position:absolute;inset-inline-start:0;top:.65em;
  width:7px;height:7px;border-radius:50%;background:var(--blue-500);
}
.reg-verify strong{color:var(--heading)}
.reg-verify a{color:var(--blue-500);border-bottom:1px solid transparent}
.reg-verify a:hover{border-bottom-color:var(--blue-500)}
.reg-note{
  margin:1.6em 0 0;padding-inline-start:16px;border-inline-start:3px solid var(--blue-500);
  font-size:.92rem;color:var(--ink-soft);
}

/* ============================================================
   PLANT & EQUIPMENT
   Selectors follow src/blocks/plant.html: .plant-card with a <span>
   carrying the capacity.
   ============================================================ */
.plant{background:var(--white)}
.plant-grid{
  display:grid;gap:clamp(20px,2.6vw,30px);
  grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr));
}
.plant-card{
  background:var(--card);border:1px solid var(--line);
  border-top:3px solid var(--blue-500);border-radius:var(--r);
  padding:20px 22px 22px;
}
.plant-card h3{
  font-size:1rem;color:var(--heading);font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;
  padding-bottom:.7em;margin-bottom:.3em;border-bottom:1px solid var(--line);
}
.plant-card ul{display:grid}
.plant-card li{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;
  padding:10px 0;border-bottom:1px solid var(--line);
  font-size:.92rem;color:var(--ink);
}
.plant-card li:last-child{border-bottom:0}
.plant-card li span{
  font-size:.74rem;color:var(--ink-soft);
  border:1px solid var(--line);border-radius:999px;padding:1px 9px;
}
.plant-note{
  margin:clamp(24px,3vw,36px) 0 0;padding:18px 22px;
  background:var(--tint-50);border-inline-start:3px solid var(--blue-500);
  border-radius:var(--r);font-size:.9rem;color:var(--ink-mid);max-width:80ch;
}

/* ============================================================
   ASSURANCE ADDITIONS — ISO tags, named QMS flow, stop-work
   ============================================================ */
.asr-iso{
  display:inline-block;margin:0 0 1.1em;
  padding:.22em .75em;border-radius:2px;
  background:var(--tint-100);color:var(--navy-700);
  font-size:.76rem;font-weight:600;letter-spacing:.05em;
}
.qflow-head{
  font-size:1.15rem;color:var(--heading);
  margin:clamp(40px,6vw,64px) 0 1.1em;
}
.qcycle .qstep h4{font-size:1rem;color:var(--heading);margin-bottom:.6em}
.qdoc{
  display:inline-block;margin-top:.9em;
  font-size:.72rem;font-weight:700;letter-spacing:.1em;
  color:var(--blue-500);border:1px solid var(--blue-500);
  padding:.2em .6em;border-radius:2px;
}
.qflow-note{
  margin:1.6em 0 0;max-width:80ch;
  padding-inline-start:16px;border-inline-start:3px solid var(--blue-500);
  font-size:.93rem;color:var(--ink-mid);
}
.stopwork{
  margin-top:clamp(34px,5vw,56px);
  background:var(--navy-800);border-radius:var(--r);
  padding:clamp(30px,4vw,44px);text-align:center;
}
.stopwork-kicker{
  margin:0 0 .7em;font-size:.76rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--blue-400);
}
.stopwork-line{
  margin:0 auto .7em;max-width:46ch;
  font-size:clamp(1.15rem,2.6vw,1.5rem);font-weight:600;
  line-height:1.4;color:#fff;letter-spacing:-.01em;
}
.stopwork-sub{margin:0;font-size:.92rem;color:rgba(255,255,255,.72)}

/* ============================================================
   PEOPLE ADDITIONS — function teams, trades, authority note
   ============================================================ */
.org-head{
  font-size:1.15rem;color:var(--heading);
  margin:clamp(40px,6vw,64px) 0 1.1em;
}
.org-teams{
  margin-top:clamp(26px,4vw,40px);
  display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));
}
.org-teams > div{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:22px 22px 24px;
}
.org-teams h4{
  font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--blue-500);margin-bottom:.7em;
}
.org-teams p{margin:0;font-size:.92rem;color:var(--ink-mid)}
.org-trades{
  margin:clamp(26px,4vw,40px) 0 0;text-align:center;
  font-size:.92rem;color:var(--ink-mid);
}
.org-note{
  margin:1.1em 0 0;text-align:center;
  font-size:.88rem;font-weight:600;color:var(--heading);
}

/* ============================================================
   VISION 2030 ADDITIONS — certified figure, titled pillars
   ============================================================ */
.v30-fig{margin:0 0 .5em}
.v30-fig b{
  display:block;font-size:clamp(2.8rem,8vw,4rem);font-weight:700;
  line-height:1;letter-spacing:-.03em;color:#fff;
  font-variant-numeric:tabular-nums;
}
.v30-fig span{
  display:block;margin-top:.5em;
  font-size:.8rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--blue-400);
}
.v30-list b{
  display:block;margin-bottom:.3em;
  font-weight:600;color:#fff;
}
.v30-list li > span:last-child{font-size:.95rem;color:rgba(255,255,255,.76)}

/* ---------- stats: a figure that is not a counter ---------- */
.stat-suf{color:var(--blue-400)}
.stat-note a{color:#fff;border-bottom:1px solid rgba(255,255,255,.4)}
.stat-note a:hover{border-bottom-color:#fff}

/* ---------- contact additions ---------- */
.ctc-office{
  margin:0 0 .5em;font-size:.76rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);
}
.ctc-foot{
  margin:1.6em 0 0;font-size:.9rem;color:var(--ink-soft);
}
.ctc-foot a{color:var(--blue-500);border-bottom:1px solid transparent}
.ctc-foot a:hover{border-bottom-color:var(--blue-500)}

/* ---------- projects: assignments per discipline ---------- */
.prj-tally{
  margin:clamp(26px,4vw,40px) 0 0;
  display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(min(140px,45%),1fr));
  border-top:1px solid var(--line);
}
.prj-tally li{position:relative;padding:18px 20px 18px 0}
.prj-tally li+li{padding-inline-start:20px}
.prj-tally li+li::before{
  content:"";position:absolute;inset-inline-start:0;top:18px;bottom:18px;
  width:1px;background:var(--line);
}
.prj-tally b{
  display:block;font-size:clamp(1.5rem,3vw,2rem);font-weight:700;
  line-height:1;letter-spacing:-.02em;color:var(--heading);margin-bottom:.3em;
  font-variant-numeric:tabular-nums;
}
.prj-tally span{font-size:.8rem;color:var(--ink-soft)}

/* ---------- RTL for the additions above ---------- */
[dir="rtl"] .plant-card li::before,
[dir="rtl"] .reg-verify li::before{left:auto;right:0}

@media (max-width:620px){
  .glance dt,.reg-keys dt{flex-basis:100%}
  .stopwork{padding:26px 20px}
}

/* ============================================================
   ORGANIZATION CHART
   ============================================================ */
.orgchart{background:var(--tint-50)}
.oc{display:grid;gap:clamp(20px,2.6vw,30px)}
.oc-tier{position:relative;display:grid;gap:10px}
.oc-tag{
  font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--blue-500);
}
.oc-row{display:grid;gap:10px;justify-items:stretch}
.oc-row.four{grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr))}
.oc-row.six{grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))}

.oc-box{
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--card);padding:14px 18px;text-align:center;
}
.oc-box b{display:block;font-size:.92rem;color:var(--heading);font-weight:600}
.oc-box span{display:block;margin-top:.3em;font-size:.84rem;color:var(--ink-mid)}
.oc-box.lead{background:var(--navy-800);border-color:var(--navy-800)}
.oc-box.lead b{color:#fff}
.oc-box.lead span{color:rgba(255,255,255,.76)}
.oc-box.mid{background:var(--blue-500);border-color:var(--blue-500)}
.oc-box.mid b{color:#fff}
.oc-box.wide{text-align:center}
.oc-box.soft{background:transparent;border-style:dashed}

.oc-dept{
  border:1px solid var(--line);border-top:3px solid var(--blue-500);
  border-radius:var(--r);background:var(--card);padding:16px 18px 18px;
}
.oc-dept > b{
  display:block;font-size:.92rem;color:var(--heading);font-weight:600;
  padding-bottom:.6em;margin-bottom:.7em;border-bottom:1px solid var(--line);
}
.oc-dept ul{display:grid;gap:6px;font-size:.86rem;color:var(--ink-mid)}
.oc-dept li{position:relative;padding-inline-start:14px}
.oc-dept li::before{
  content:"";position:absolute;inset-inline-start:0;top:.66em;
  width:5px;height:5px;border-radius:50%;background:var(--line-2,var(--line));
}
.oc-note{
  margin:clamp(22px,3vw,34px) 0 0;padding:16px 20px;
  background:var(--card);border-inline-start:3px solid var(--blue-500);
  border-radius:var(--r);font-size:.9rem;color:var(--ink-mid);
}

/* ============================================================
   PLANT & EQUIPMENT
   ============================================================ */
.plant{background:var(--white)}
.plant-grid{display:grid;gap:clamp(22px,3vw,40px);grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.plant-col h3{
  font-size:1rem;color:var(--blue-500);font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;
  padding-bottom:.7em;margin-bottom:.4em;border-bottom:2px solid var(--line);
}
.plant-col ul{display:grid}
.plant-col li{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;
  padding:11px 0;border-bottom:1px solid var(--line);
  font-size:.94rem;color:var(--ink);
}
.plant-col li i{
  font-style:normal;font-size:.78rem;color:var(--ink-soft);
  border:1px solid var(--line);border-radius:999px;padding:1px 9px;
}
.plant-note{
  margin:clamp(24px,3vw,36px) 0 0;font-size:.88rem;color:var(--ink-soft);
}

/* ============================================================
   BRAND MARK
   Two files: the logo as supplied, and a variant whose grey gear is
   lifted so it still reads on the dark header and footer. Only one is
   ever shown, picked by the header's current theme.
   ============================================================ */
.brand-mark{position:relative;display:block;flex:0 0 auto}
.brand-mark img{width:100%;height:100%;object-fit:contain;display:block}
.brand-mark .logo-light{position:absolute;inset:0;opacity:0;transition:opacity 300ms ease}
.brand-mark .logo-dark{transition:opacity 300ms ease}
/* header sitting on a light band swaps to the supplied artwork */
.site-header.on-light .brand-mark .logo-light{opacity:1}
.site-header.on-light .brand-mark .logo-dark{opacity:0}
/* the drawer and footer are always dark, so they keep the light variant */
.nav-drawer .brand-mark .logo-light,
.site-footer .brand-mark .logo-light{display:none}

/* the artwork is 1.13:1, so the box follows it rather than the old triangle */
.brand-mark{width:52px;height:46px}
.ftr-brand .brand-mark,.site-footer .brand-mark{width:62px;height:55px;margin-bottom:16px}
.nav-brand .brand-mark{width:50px;height:44px}
@media (max-width:560px){
  .brand-mark{width:46px;height:41px}
}

/* honeypot: hidden from people, left in the DOM for bots to fill */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.form-note.ok{color:#1E7B4D}
.form-note.err{color:#C0392B}
button[disabled]{opacity:.65;cursor:default}


/* ============================================================
   LEADERSHIP — a person speaks beside their photograph
   Generated from src/team.json. One entry is the Managing Director's
   message as before; further entries stack, photograph alternating sides.
   ============================================================ */
.team .md-grid+.md-grid{margin-top:clamp(48px,7vw,96px);padding-top:clamp(48px,7vw,96px);border-top:1px solid var(--line)}
.voice.is-flipped{grid-template-columns:minmax(0,1fr) minmax(0,300px)}
.voice.is-flipped .md-photo{order:2}
@media (max-width:760px){
  .voice.is-flipped{grid-template-columns:1fr}
  .voice.is-flipped .md-photo{order:0}
}

/* org chart: a named person carries their photograph */
.oc-box.has-photo{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;align-items:center;text-align:start;padding:12px 20px 12px 12px;justify-self:center;min-width:min(320px,100%)}
.oc-box.has-photo img{grid-row:1/3;width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:top;border:2px solid rgba(255,255,255,.35);background:#fff}
.oc-box.has-photo b{align-self:end}
.oc-box.has-photo span{align-self:start;margin-top:0}

/* ============================================================
   EQUIPMENT & MACHINERY LIST — src/equipment.json
   A board with a title bar and one photo tile per machine, the
   quantity in the caption. Tiles without a photo show a placeholder.
   ============================================================ */
.eq-board{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;
}
.eq-title{
  margin:0;padding:16px 20px;text-align:center;
  font-size:clamp(1.1rem,2.2vw,1.45rem);font-weight:700;color:#fff;
  background:var(--navy-800);letter-spacing:.01em;
}
.eq-tiles{
  display:grid;gap:14px;padding:clamp(14px,2vw,22px);
  grid-template-columns:repeat(auto-fill,minmax(min(168px,100%),1fr));
}
.eq-tiles li{list-style:none}
.eq-tiles figure{
  margin:0;height:100%;display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--white);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.eq-tiles figure:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(18,40,76,.12)}
.eq-pic{aspect-ratio:1/1;overflow:hidden;background:var(--tint-50);display:grid;place-items:center}
.eq-pic img{width:100%;height:100%;object-fit:cover;display:block}
.eq-ph{display:grid;place-items:center;width:100%;height:100%;color:var(--blue-500);opacity:.55}
.eq-ph svg{width:46%;height:46%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.eq-tiles figcaption{
  flex:1;padding:9px 10px 10px;text-align:center;
  background:var(--navy-800);color:#fff;line-height:1.3;
}
.eq-tiles figcaption b{display:block;font-size:.82rem;font-weight:600}
.eq-tiles figcaption small{display:block;font-size:.7rem;font-weight:400;color:rgba(255,255,255,.7);margin-top:2px}
.eq-tiles figcaption span{display:block;margin-top:3px;font-size:.78rem;color:var(--blue-400);font-variant-numeric:tabular-nums}
@media print{
  .eq-tiles{grid-template-columns:repeat(6,1fr);gap:8px;padding:10px}
  .eq-tiles figcaption,.eq-title{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .eq-tiles figcaption b{font-size:.7rem}
  .eq-tiles figcaption span{font-size:.66rem}
}

/* ============================================================
   SELECTED PROJECTS — src/featured.json
   ============================================================ */
.featured{background:var(--tint-50)}
.featured .section-lede a{color:var(--blue-500);border-bottom:1px solid transparent}
.featured .section-lede a:hover{border-bottom-color:currentColor}
.feat-grid{
  display:grid;gap:clamp(16px,2.4vw,24px);
  grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));
}
.feat{margin:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.feat img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.feat:hover img{transform:scale(1.04)}
.feat figcaption{padding:14px 16px 16px}
.feat-label{
  display:block;margin-bottom:.35em;
  font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-500);
}
.feat figcaption b{display:block;font-size:.95rem;font-weight:600;line-height:1.35;color:var(--heading)}

/* ============================================================
   GET A QUOTE
   ============================================================ */
.quote{background:var(--tint-50);padding-top:calc(var(--header-h) + clamp(48px,7vw,96px))}
.qt-grid{display:grid;gap:clamp(36px,5vw,64px);grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:start}
.qt-intro .section-lede{margin-bottom:1.6em}
.qt-sub{font-size:1.05rem;color:var(--heading);margin:0 0 1em}
.qt-list{gap:14px;grid-template-columns:1fr}
.qt-list li{font-size:.95rem}
.qt-aside{
  margin-top:clamp(28px,4vw,40px);padding:22px 24px;
  background:var(--card);border:1px solid var(--line);border-inline-start:3px solid var(--blue-500);border-radius:var(--r);
}
.qt-aside h3{font-size:1rem;color:var(--heading);margin-bottom:.6em}
.qt-aside p{margin:0 0 .8em;font-size:.92rem;color:var(--ink-mid)}
.qt-aside p:last-child{margin-bottom:0}
.qt-aside a{color:var(--blue-500);border-bottom:1px solid transparent;transition:border-color .2s var(--ease)}
.qt-aside a:hover{border-bottom-color:currentColor}

.qt-form fieldset{border:0;padding:0;margin:0 0 clamp(22px,3vw,30px)}
.qt-form legend{
  display:block;width:100%;padding-bottom:.6em;margin-bottom:1.1em;
  font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-500);
  border-bottom:1px solid var(--line);
}
.field-row{display:grid;gap:0 16px;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}
.field label em,.qt-req em{font-style:normal;color:#C0392B}
.field-label{display:block;font-size:.82rem;font-weight:600;color:var(--ink-mid);margin-bottom:8px}
.choice-grid{display:grid;gap:8px 12px;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}
.field .choice{
  display:flex;align-items:flex-start;gap:10px;margin:0;padding:10px 12px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--white);
  font-size:.9rem;font-weight:500;color:var(--ink);cursor:pointer;
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.field .choice:hover{border-color:var(--blue-400)}
.field .choice:has(input:checked){border-color:var(--blue-500);background:var(--tint-100)}
.field .choice input{width:16px;height:16px;margin:2px 0 0;padding:0;border:0;box-shadow:none;accent-color:var(--blue-500);flex:0 0 auto}
.qt-form textarea::placeholder{color:var(--ink-soft);opacity:.85}
.qt-form input[type="month"],.qt-form input[type="date"]{min-height:46px}
.qt-req{margin:0 0 14px;font-size:.8rem;color:var(--ink-soft)}
.ctc-form-lede{margin:-.6em 0 1.4em;font-size:.9rem;color:var(--ink-mid)}
.ctc-form-lede a{color:var(--blue-500);border-bottom:1px solid transparent}
.ctc-form-lede a:hover{border-bottom-color:currentColor}

@media (max-width:900px){
  .qt-grid{grid-template-columns:1fr}
}

/* the quotation link reads as a button in the top bar and the drawer */
.top-nav a.is-cta{
  padding:.45em .95em;border:1px solid var(--blue-400);border-radius:999px;color:#fff;opacity:1;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
.top-nav a.is-cta::after{display:none}
.top-nav a.is-cta:hover,.top-nav a.is-cta.is-here{background:var(--blue-500);border-color:var(--blue-500);color:#fff}
.site-header.on-light .top-nav a.is-cta{color:var(--blue-500);border-color:var(--blue-500)}
.site-header.on-light .top-nav a.is-cta:hover,.site-header.on-light .top-nav a.is-cta.is-here{background:var(--blue-500);color:#fff}
.nav-list a.is-cta{color:var(--blue-400);font-weight:600}

/* ============================================================
   COMPANY PROFILE PAGE
   ============================================================ */
.pf-cover{
  position:relative;background:var(--navy-800);color:#fff;overflow:hidden;
  padding-top:calc(var(--header-h) + clamp(48px,7vw,96px));
}
.pf-cover::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.04),transparent 60%);
}
.pf-cover .wrap{position:relative;z-index:2}
.pf-cover-grid{display:grid;gap:clamp(32px,5vw,72px);grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);align-items:start}
.pf-cover .eyebrow{color:var(--blue-400)}
.pf-cover .display{color:#fff}
.pf-tag{font-size:1.05rem;font-weight:500;color:var(--blue-400);margin:0 0 1.2em}
.pf-lede{max-width:62ch;color:rgba(255,255,255,.8);margin-bottom:2em}
.pf-act{display:flex;flex-wrap:wrap;gap:12px}
.pf-facts{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--r);
  padding:clamp(22px,3vw,30px);
}
.pf-facts dl{margin:0 0 22px;display:grid;gap:0}
.pf-facts dl > div{display:flex;flex-wrap:wrap;gap:3px 16px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.pf-facts dl > div:last-child{border-bottom:0}
.pf-facts dt{flex:0 0 130px;font-size:.72rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--blue-400);padding-top:2px}
.pf-facts dd{margin:0;font-size:.93rem;font-weight:500;color:#fff;font-variant-numeric:tabular-nums}
.pf-qr{margin:0;display:flex;align-items:center;gap:18px}
.pf-qr img{width:120px;height:120px;background:#fff;padding:8px;border-radius:var(--r);flex:0 0 auto}
.pf-qr figcaption{font-size:.88rem;line-height:1.5;color:rgba(255,255,255,.8)}
.pf-qr figcaption span{display:block;color:#fff;font-weight:600;overflow-wrap:anywhere}
.pf-qr-lg{flex-direction:column;align-items:flex-start;gap:14px}
.pf-qr-lg img{width:200px;height:200px}

.pf-contact{background:var(--navy-900);color:#fff;position:relative}
.pf-ct-grid{display:grid;gap:clamp(32px,5vw,72px);grid-template-columns:minmax(0,1fr) auto;align-items:start}
.pf-contact .eyebrow{color:var(--blue-400)}
.pf-contact .display{color:#fff}
.pf-ct-cols{display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));margin:1.4em 0 2em}
.pf-ct-cols h4{font-size:.74rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-400);margin-bottom:.8em}
.pf-ct-cols p{margin:0 0 .7em;font-size:.95rem;line-height:1.7;color:rgba(255,255,255,.86)}
.pf-ct-cols p.muted{color:rgba(255,255,255,.6);font-size:.88rem}
.pf-ct-cols a{color:#fff;border-bottom:1px solid rgba(255,255,255,.3);transition:border-color .2s var(--ease)}
.pf-ct-cols a:hover{border-bottom-color:#fff}
.pf-ct-act{justify-content:flex-start}

@media (max-width:900px){
  .pf-cover-grid,.pf-ct-grid{grid-template-columns:1fr}
  .pf-qr-lg{flex-direction:row;align-items:center}
}
@media (max-width:460px){
  .pf-act .btn,.pf-ct-act .btn{width:100%}
  .pf-facts dt{flex-basis:100%}
}

/* ============================================================
   PRINT — the profile page becomes the company profile PDF
   Chrome/Edge: File → Print → Save as PDF. The chrome is dropped,
   reveals are forced visible and each section starts a new page.
   ============================================================ */
@media print{
  :root{--header-h:0px}
  .site-header,.nav-drawer,.nav-overlay,.dot-nav,.site-footer,.hero-sound,
  .pf-act,.hcta-act,.svc-more,.glance-foot,.btn{display:none!important}
  body{background:#fff;color:#000}
  .reveal,.reveal[data-anim]{opacity:1!important;transform:none!important;transition:none!important}
  .section{padding:24px 0;break-inside:auto}
  .section+.section{break-before:page}
  .md-grid{grid-template-columns:190px 1fr;gap:28px}
  .md-body blockquote{font-size:.88rem}
  .md-body blockquote p{margin-bottom:.7em}
  .svc-grid{grid-template-columns:repeat(3,1fr);gap:12px}
  .svc-body{padding:16px 16px 18px;font-size:.85rem}
  .ppl-grid{grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:0}
  .ppl-card{padding:14px 16px}
  .orgchart .wrap{font-size:.85rem}
  .oc{gap:12px}
  .oc-row.six{grid-template-columns:repeat(3,1fr)}
  .oc-dept{padding:10px 12px 12px}
  .oc-dept ul{gap:3px;font-size:.78rem}
  .display{font-size:1.7rem}
  .pf-cover,.pf-contact,.stats,.home-cta,[data-theme="dark"],.eq-table caption,.oc-box.lead,.oc-box.mid{
    -webkit-print-color-adjust:exact;print-color-adjust:exact;
  }
  .pf-cover{padding-top:28px}
  .svc-card,.prj,.feat,.oc-dept,.eq-board,.cert,.hc-badge,.md-grid{break-inside:avoid}
  .feat-grid{grid-template-columns:repeat(2,1fr)}
  .svc-img{display:none}
  a{text-decoration:none;color:inherit}
  .pf-qr img{padding:0}
}

/* anything marked data-lb opens in the lightbox */
[data-lb]{cursor:zoom-in}
[data-lb]:focus-visible{outline:2px solid var(--blue-500);outline-offset:3px}


/* ---------- headcount band closing the organization chart ---------- */
.oc-total{
  margin:clamp(22px,3vw,34px) 0 0;padding:clamp(40px,6vw,64px) 24px;text-align:center;
  background:var(--navy-800);border-radius:var(--r);color:#fff;
}
.oc-total .eyebrow{color:var(--blue-400);margin-bottom:.6em}
.wf-fig{margin:0;display:flex;align-items:baseline;justify-content:center;gap:.25em;line-height:1}
.wf-fig b{font-size:clamp(3.4rem,9vw,5.5rem);font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.wf-fig span{font-size:clamp(1.1rem,2.4vw,1.5rem);font-weight:500;color:var(--blue-400)}
.wf-label{margin:.4em 0 .5em;font-size:clamp(1.1rem,2.4vw,1.5rem);font-weight:600;letter-spacing:.02em}
.wf-sub{margin:0 auto;max-width:60ch;color:rgba(255,255,255,.72);font-size:.95rem}
.pf-qr figcaption a{color:#fff;font-weight:600;border-bottom:1px solid rgba(255,255,255,.4)}
.pf-qr figcaption a:hover{border-bottom-color:#fff}
@media print{.oc-total{-webkit-print-color-adjust:exact;print-color-adjust:exact}}

/* About opens on the leadership statement: clear the fixed header */
main > .md-message:first-child{padding-top:calc(var(--header-h) + clamp(48px,7vw,96px))}

/* ISO certificate thumbnails on Quality & HSE; open in the lightbox */
.iso-row{display:grid;gap:clamp(16px,2.4vw,28px);grid-template-columns:repeat(3,minmax(0,1fr));max-width:900px}
.iso-cert{margin:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.iso-cert:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(18,40,76,.12)}
.iso-cert img{width:100%;height:auto;display:block;border:1px solid var(--line)}
.iso-cert figcaption{padding-top:12px;text-align:center}
.iso-cert figcaption b{display:block;font-size:.95rem;color:var(--heading)}
.iso-cert figcaption span{display:block;font-size:.8rem;color:var(--ink-soft);margin-top:2px}
@media (max-width:560px){.iso-row{grid-template-columns:1fr;max-width:320px}}