/* ==========================================================================
   ADCC — Shared Design System
   Tokens, layout primitives and components reused across every page.
   ========================================================================== */

:root{
  --ink:#0A0C0F;
  --ink-2:#111419;
  --paper:#F6F6F3;
  --paper-2:#EAEBE4;
  --fg-on-dark:#F2F3F0;
  --fg-on-light:#12151A;
  --muted-dark:#878E9C;
  --muted-light:#585E67;
  --line-dark:#22262E;
  --line-light:#D7D9D0;
  --brand:#0B1F6B;
  --brand-2:#1A34A0;
  --amber:#C79A3E;
  --danger:#B23B3B;
  --header-h:72px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  background:var(--paper);
  color:var(--fg-on-light);
  font-family:'Inter',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
h1,h2,h3,h4,.font-head{ font-family:'Manrope',system-ui,sans-serif; }
.font-mono{ font-family:'IBM Plex Mono',monospace; }

::selection{ background:var(--brand); color:#fff; }
:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; }

/* ---------- Skip link (a11y) ---------- */
.skip-link{
  position:absolute; inset-inline-start:1rem; top:-3rem; z-index:100;
  background:var(--amber); color:#000; padding:.65rem 1.1rem; font-weight:600; font-size:.9rem;
  transition:top .2s ease;
}
.skip-link:focus{ top:1rem; }

/* ---------- Preloader ---------- */
#preloader{
  position:fixed; inset:0; z-index:200; background:var(--ink);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .5s ease, visibility .5s ease;
}
#preloader::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(199,154,62,0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(199,154,62,0.1) 1px, transparent 1px);
  background-size:56px 56px;
}
#preloader.pre-hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.pre-mark{ position:relative; display:flex; flex-direction:column; align-items:center; gap:1.25rem; }
.pre-mark img{ width:56px; height:auto; opacity:0; animation:pre-fade .4s ease forwards .1s; }
.pre-bar{ width:180px; height:2px; background:var(--line-dark); overflow:hidden; position:relative; }
.pre-bar::after{
  content:""; position:absolute; inset-inline-start:0; top:0; height:100%; width:40%;
  background:var(--amber); animation:pre-sweep 1.1s ease-in-out infinite;
}
.pre-label{ font-family:'IBM Plex Mono',monospace; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-dark); opacity:0; animation:pre-fade .4s ease forwards .2s; }
@keyframes pre-fade{ to{ opacity:1; } }
@keyframes pre-sweep{
  0%{ inset-inline-start:-40%; }
  100%{ inset-inline-start:100%; }
}
@media (prefers-reduced-motion: reduce){
  #preloader{ display:none; }
}

/* ---------- Section surfaces ---------- */
.section-dark{ background:var(--ink); color:var(--fg-on-dark); }
.section-dark-2{ background:var(--ink-2); color:var(--fg-on-dark); }
.section-light{ background:var(--paper); color:var(--fg-on-light); }
.section-light-2{ background:var(--paper-2); color:var(--fg-on-light); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  height:3.25rem; padding:0 1.75rem; font-weight:600; font-size:0.95rem;
  transition:background .2s ease, color .2s ease, border-color .2s ease, gap .2s ease;
  min-width:44px; cursor:pointer; white-space:nowrap;
}
.btn-primary{ background:var(--brand); color:#fff; border:1px solid var(--brand); }
.btn-primary:hover{ background:var(--brand-2); border-color:var(--brand-2); gap:.75rem; }
.btn-outline-dark{ border:1px solid var(--line-dark); color:var(--fg-on-dark); background:transparent; }
.btn-outline-dark:hover{ border-color:var(--amber); color:var(--amber); }
.btn-outline-light{ border:1px solid var(--line-light); color:var(--fg-on-light); background:transparent; }
.btn-outline-light:hover{ border-color:var(--brand); color:var(--brand); }
.btn-sm{ height:2.75rem; padding:0 1.25rem; font-size:.85rem; }

/* ---------- Typographic helpers ---------- */
.eyebrow{ font-family:'IBM Plex Mono',monospace; font-size:0.75rem; letter-spacing:0.14em; text-transform:uppercase; }
.kicker-line{ width:2.25rem; height:1px; background:var(--brand); flex-shrink:0; }
.kicker-line.on-dark{ background:var(--amber); }

/* ---------- Reveal-on-scroll ---------- */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; }
  *{ transition-duration:.01ms !important; animation-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* ---------- Blueprint grid texture (signature device) ---------- */
.blueprint{
  background-image:
    linear-gradient(rgba(199,154,62,0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(199,154,62,0.09) 1px, transparent 1px);
  background-size:56px 56px;
}
.blueprint-light{
  background-image:
    linear-gradient(rgba(11,31,107,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,31,107,0.06) 1px, transparent 1px);
  background-size:56px 56px;
}

/* ---------- Technical corner-frame (signature device) ---------- */
.tech-frame{ position:relative; }
.tf-c{ position:absolute; width:16px; height:16px; pointer-events:none; z-index:2; }
.tf-c.on-light{ border-color:var(--brand); }
.tf-c.on-dark{ border-color:var(--amber); }
.tf-tl{ top:-1px; left:-1px; border-top:2px solid; border-left:2px solid; }
.tf-tr{ top:-1px; right:-1px; border-top:2px solid; border-right:2px solid; }
.tf-bl{ bottom:-1px; left:-1px; border-bottom:2px solid; border-left:2px solid; }
.tf-br{ bottom:-1px; right:-1px; border-bottom:2px solid; border-right:2px solid; }

/* ---------- Header / Nav ---------- */
.nav-link{ position:relative; color:var(--fg-on-dark); opacity:.82; font-size:.88rem; white-space:nowrap; }
.nav-link:hover{ opacity:1; }
.nav-link[aria-current="page"]{ opacity:1; color:var(--amber); }
.nav-link::after{ content:""; position:absolute; inset-inline-start:0; bottom:-6px; width:0; height:1px; background:var(--amber); transition:width .2s ease; }
.nav-link:hover::after{ width:100%; }

/* ---------- Capability index rows ---------- */
.cap-row{ border-top:1px solid var(--line-light); transition:background .25s ease, padding-left .25s ease; }
.cap-row:hover, .cap-row:focus-within{ background:rgba(11,31,107,0.035); padding-inline-start:.75rem; }
.cap-row:hover .cap-arrow, .cap-row:focus-within .cap-arrow{ transform:translateX(4px); opacity:1; }
.cap-arrow{ transition:transform .25s ease, opacity .25s ease; opacity:.4; }

/* ---------- Project / media cards ---------- */
.proj-card{ position:relative; overflow:hidden; }
.proj-card img{ transition:transform .7s cubic-bezier(.2,.7,.2,1); }
.proj-card:hover img{ transform:scale(1.06); }
.proj-scan{ position:absolute; inset:0; background:linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.55) 100%); pointer-events:none; }

/* ---------- QHSE seal ---------- */
.iso-seal{
  width:64px; height:64px; border-radius:9999px; border:1.5px solid var(--brand);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; position:relative;
}
.iso-seal::before{ content:""; position:absolute; inset:5px; border-radius:9999px; border:1px dashed var(--line-light); }

/* ---------- Product badges ---------- */
.prod-badge{
  width:52px; height:52px; border:1.5px solid var(--brand); display:flex; align-items:center; justify-content:center;
  font-family:'IBM Plex Mono',monospace; font-weight:500; font-size:1.05rem; color:var(--brand); flex-shrink:0;
}

/* ---------- Forms ----------
   Field borders use a dedicated, lighter tone than structural dividers
   (var(--line-dark)/light) so inputs meet WCAG 1.4.11 (3:1 non-text
   contrast) against their surface, independent of decorative borders. */
:root{
  --field-border-dark:#454C57;
  --field-border-dark-hover:#5C6472;
  --field-border-light:#B7BBAE;
  --field-border-light-hover:#8D9280;
  --field-bg-dark:rgba(255,255,255,0.03);
  --field-bg-light:#FFFFFF;
}

.field-group{ display:flex; flex-direction:column; gap:.55rem; }

label.field-label{
  font-family:'IBM Plex Mono',monospace; font-size:0.72rem; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--muted-dark); display:flex; align-items:center; gap:.4rem;
}
.on-light-form label.field-label{ color:var(--muted-light); }
.field-optional{ font-family:'Inter',sans-serif; text-transform:none; letter-spacing:0; font-size:.72rem; color:var(--muted-dark); opacity:.8; }
.field-required{ color:var(--amber); }
.on-light-form .field-required{ color:var(--brand); }

input, textarea, select{
  background:var(--field-bg-dark); border:1.5px solid var(--field-border-dark); color:var(--fg-on-dark);
  padding:0.9rem 1rem; width:100%; font-family:'Inter',sans-serif; font-size:0.95rem; border-radius:0;
  transition:border-color .15s ease, background .15s ease, box-shadow .15s ease;
  min-height:44px;
}
.on-light-form input, .on-light-form textarea, .on-light-form select{
  border-color:var(--field-border-light); color:var(--fg-on-light); background:var(--field-bg-light);
}
input::placeholder, textarea::placeholder{ color:var(--muted-dark); opacity:.85; }
.on-light-form input::placeholder, .on-light-form textarea::placeholder{ color:var(--muted-light); opacity:.85; }

input:hover, textarea:hover, select:hover{ border-color:var(--field-border-dark-hover); }
.on-light-form input:hover, .on-light-form textarea:hover, .on-light-form select:hover{ border-color:var(--field-border-light-hover); }

input:focus, textarea:focus, select:focus{
  border-color:var(--amber); outline:none; box-shadow:0 0 0 3px rgba(199,154,62,0.22);
}
.on-light-form input:focus, .on-light-form textarea:focus, .on-light-form select:focus{
  border-color:var(--brand); box-shadow:0 0 0 3px rgba(11,31,107,0.14);
}

input:invalid:not(:placeholder-shown):not(:focus){ border-color:var(--danger); }
.field-error{ display:none; font-size:.78rem; color:var(--danger); font-family:'IBM Plex Mono',monospace; }
input:invalid:not(:placeholder-shown):not(:focus) ~ .field-error,
select:invalid:not(:focus) ~ .field-error{ display:block; }

select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C79A3E' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 0.9rem center; background-size:16px;
  padding-inline-end:2.5rem;
}
[dir="rtl"] select{ background-position:left 0.9rem center; }
.on-light-form select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B1F6B' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

input[type="file"]{
  padding:0.6rem; font-size:.85rem; cursor:pointer;
}
input[type="file"]::file-selector-button{
  font-family:'IBM Plex Mono',monospace; font-size:.75rem; text-transform:uppercase; letter-spacing:.05em;
  background:var(--amber); color:#000; border:none; padding:.55rem 1rem; margin-inline-end:1rem; cursor:pointer;
  transition:background .15s ease;
}
input[type="file"]::file-selector-button:hover{ background:#D6AE55; }
.on-light-form input[type="file"]::file-selector-button{ background:var(--brand); color:#fff; }
.on-light-form input[type="file"]::file-selector-button:hover{ background:var(--brand-2); }

input[type="checkbox"], input[type="radio"]{ width:auto; min-height:0; accent-color:var(--amber); }
.on-light-form input[type="checkbox"], .on-light-form input[type="radio"]{ accent-color:var(--brand); }

.field-hint{ font-size:.78rem; color:var(--muted-dark); }
.on-light-form .field-hint{ color:var(--muted-light); }

.form-note-success{
  border:1px solid var(--amber); background:rgba(199,154,62,0.08); padding:1rem 1.25rem; font-size:.9rem;
}
.on-light-form .form-note-success{ border-color:var(--brand); background:rgba(11,31,107,0.05); }

/* ---------- Breadcrumb ---------- */
.breadcrumb{ font-family:'IBM Plex Mono',monospace; font-size:.78rem; color:var(--muted-dark); }
.breadcrumb a{ color:var(--muted-dark); }
.breadcrumb a:hover{ color:var(--fg-on-dark); }

/* ---------- Timeline (History) ---------- */
.tl-item{ border-top:1px solid var(--line-light); padding-block:2rem; }
.tl-item:first-child{ border-top:none; }

/* ---------- Archive filter ---------- */
.filter-btn{
  font-family:'IBM Plex Mono',monospace; font-size:.78rem; padding:.55rem 1rem;
  border:1px solid var(--line-dark); color:var(--muted-dark); background:transparent; cursor:pointer;
  transition:all .2s ease;
}
.filter-btn:hover{ color:var(--fg-on-dark); border-color:var(--fg-on-dark); }
.filter-btn.active{ background:var(--amber); color:#000; border-color:var(--amber); }

/* ---------- Empty state ---------- */
.empty-state{ border:1px dashed var(--line-light); padding:3rem 2rem; text-align:center; }

/* ---------- Numbers ---------- */
.num-count{ font-variant-numeric:tabular-nums; }

/* ---------- Hero background (parallax target) ---------- */
.hero-bg{ will-change:transform; }

/* ---------- Table (technical / compliance) ---------- */
.tech-table{ width:100%; font-family:'IBM Plex Mono',monospace; font-size:.88rem; border-collapse:collapse; }
.tech-table td, .tech-table th{ padding:.9rem 0; text-align:left; }
.tech-table tr{ border-top:1px solid var(--line-dark); }
.on-light-table tr{ border-top:1px solid var(--line-light); }

/* ---------- Mobile sticky CTA ---------- */
@media (max-width:767px){
  .mobile-sticky-cta{ position:fixed; inset-inline:0; bottom:0; z-index:50; }
  body{ padding-bottom:64px; }
}

/* ---------- Utility: prevent horizontal overflow on small screens ---------- */
html, body{ overflow-x:hidden; }
.max-w-page{ max-width:1440px; margin-inline:auto; }

/* ---------- Arabic typography ---------- */
[lang="ar"] h1, [lang="ar"] h2, [lang="ar"] h3, [lang="ar"] h4, [lang="ar"] .font-head{
  font-family:'IBM Plex Sans Arabic','Inter',system-ui,sans-serif;
  letter-spacing:0; line-height:1.35;
}
[lang="ar"] body, [lang="ar"]{
  font-family:'IBM Plex Sans Arabic','Inter',system-ui,sans-serif;
}
[lang="ar"] .eyebrow, [lang="ar"] .breadcrumb, [lang="ar"] .field-label{
  font-family:'IBM Plex Sans Arabic','IBM Plex Mono',monospace;
  letter-spacing:0;
}
/* Numerals, ISO codes and standards references stay in their original Latin
   form even inside Arabic content — this matches real UAE industrial/technical
   documentation practice and keeps certification numbers unambiguous. */
[lang="ar"] .keep-ltr{ direction:ltr; unicode-bidi:isolate; font-family:'IBM Plex Mono',monospace; }

/* ---------- RTL icon mirroring ---------- */
[dir="rtl"] .dir-arrow{ transform:scaleX(-1); }