/* Imdad Cool — landing page
   Heart Aerospace grammar (band, headline, photograph, repeat) in Polar Precision colours.
   See ../CONTEXT.md for the reasoning behind every token. */

:root {
  /* Colour */
  --cold-front: #4F6B85;   /* atmospheric origin, replaces Heart's Stratosphere */
  --lyons: #15306D;        /* primary, outlined actions */
  --kings: #66A5C5;        /* secondary, lines and the logo core */
  --cerulian: #17495C;
  --indigo: #13151A;       /* text and footer, never pure black */
  --muted: #758183;
  --ice: #F0F4F8;
  --hairline: #D8DEE6;
  --white: #FFFFFF;
  --in-range: #2E8B57;     /* status only */

  --mark-frame: var(--lyons);
  --mark-core: var(--kings);

  /* Type */
  --sans: "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;
  --arabic: "IBM Plex Sans Arabic", "Noto Sans Arabic", "Segoe UI", sans-serif;
  --text-body: clamp(17px, 1.05vw + 10px, 19px);
  --text-lede: clamp(19px, 0.9vw + 13px, 24px);
  --text-h2: clamp(34px, 3.4vw + 8px, 64px);
  --text-display: clamp(52px, 8.2vw, 156px);

  /* Space */
  --gutter: clamp(16px, 2.8vw, 40px);
  --band: clamp(88px, 11vw, 176px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--white);
  color: var(--indigo);
  font-family: var(--sans);
  font-size: var(--text-body);
  line-height: 1.4;
  letter-spacing: -0.01em;
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

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

.skip {
  position: absolute; inset-inline-start: var(--gutter); top: -60px; z-index: 50;
  background: var(--white); color: var(--lyons); padding: 10px 16px; text-decoration: none;
}
.skip:focus { top: 12px; }

/* ---------- Shared type ---------- */
.h2 {
  font-size: var(--text-h2);
  font-weight: 600;
  font-stretch: 112%;
  line-height: 1;
  letter-spacing: -0.03em;
  max-width: 18ch;
}
.lede {
  font-size: var(--text-lede);
  line-height: 1.35;
  max-width: 34em;
  color: var(--cerulian);
  margin-top: 28px;
}
.wrap { padding: 0 var(--gutter); }

/* Outlined action: the only button style on the page */
.ghost {
  display: inline-flex; align-items: center;
  padding: 13px 22px;
  border: 1.5px solid var(--lyons);
  color: var(--lyons);
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease;
}
.ghost:hover { background: var(--lyons); color: var(--white); }
.ghost-light { border-color: rgba(255,255,255,.85); color: var(--white); }
.ghost-light:hover { background: var(--white); color: var(--lyons); }

/* ---------- Brand lockup ---------- */
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.brand-mark { width: 40px; height: 40px; flex: none; }
.brand-word { display: flex; flex-direction: column; line-height: 1; padding-inline-start: 12px; border-inline-start: 1.5px solid var(--kings); }
.brand-en { font-weight: 800; font-stretch: 125%; font-size: 19px; letter-spacing: -0.01em; text-transform: uppercase; }
.brand-ar { font-family: var(--arabic); font-weight: 600; font-size: 17px; margin-top: 4px; text-align: start; color: var(--kings); }

/* ---------- Navigation (transparent over hero) ---------- */
.nav {
  position: absolute; inset: 0 0 auto 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px var(--gutter);
  color: var(--white);
  --mark-frame: var(--white);
}
.nav .brand-ar { color: rgba(255,255,255,.8); }
.nav .brand-word { border-inline-start-color: rgba(255,255,255,.5); }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a:not(.ghost) { text-decoration: none; opacity: .92; }
.nav-links a:not(.ghost):hover { opacity: 1; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.nav-links .ghost { padding: 10px 18px; margin-inline-start: 8px; }

.menu-btn {
  display: none;
  font: inherit; color: inherit; background: none;
  border: 1.5px solid rgba(255,255,255,.85); padding: 9px 16px; cursor: pointer;
}
.menu {
  position: fixed; inset: 0; z-index: 9;
  background: var(--lyons); color: var(--white);
  padding: 120px var(--gutter) 40px;
}
.menu nav { display: flex; flex-direction: column; gap: 6px; }
.menu a { font-size: 40px; font-weight: 600; font-stretch: 112%; letter-spacing: -0.03em; text-decoration: none; line-height: 1.2; }
body.menu-open { overflow: hidden; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  color: var(--white);
  background: #0e2346;
  overflow: hidden;
}
.hero-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 55%;
}
.hero::after {
  /* quiet the ribbed ceiling under the headline and the roller floor under the foot copy,
     leaving the bright door at the vanishing point to carry the eye */
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(8,18,40,.6) 0%, rgba(8,18,40,.15) 55%, rgba(8,18,40,0) 75%),
    linear-gradient(180deg, rgba(8,18,40,.7) 0%, rgba(8,18,40,.2) 42%, rgba(8,18,40,0) 55%),
    linear-gradient(0deg, rgba(8,18,40,.75) 0%, rgba(8,18,40,.25) 28%, rgba(8,18,40,0) 45%);
}
.hero-inner {
  position: relative; z-index: 1;
  flex: 1;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(120px, 17vh, 190px) var(--gutter) clamp(28px, 5vh, 56px);
}
.hero-title {
  font-size: var(--text-display);
  font-weight: 600;
  font-stretch: 112%;
  line-height: .98;
  letter-spacing: -0.035em;
}
.hero-title .line { display: block; overflow: hidden; padding-bottom: .06em; }
.hero-title .line > span { display: inline-block; }
.hero-foot {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 32px;
  margin-top: 48px;
}
.hero-foot p { max-width: 30em; font-size: var(--text-lede); line-height: 1.3; }

/* One orchestrated page-load moment */
.js .hero-title .line > span { transform: translateY(105%); }
.js .hero-foot { opacity: 0; }
.js.loaded .hero-title .line > span { transform: none; transition: transform 1.1s cubic-bezier(.2,.7,0,1); }
.js.loaded .hero-title .line:nth-child(2) > span { transition-delay: .12s; }
.js.loaded .hero-foot { opacity: 1; transition: opacity .9s ease .55s; }
.js .hero-img { transform: scale(1.06); }
.js.loaded .hero-img { transform: scale(1); transition: transform 2.4s cubic-bezier(.2,.7,0,1); }

/* ---------- Statement ---------- */
.statement { padding: var(--band) var(--gutter); }
.statement-text {
  font-size: clamp(28px, 3vw + 8px, 58px);
  font-weight: 500;
  font-stretch: 106%;
  line-height: 1.08;
  letter-spacing: -0.025em;
  max-width: 24ch;
  color: var(--lyons);
}

/* ---------- Monument: 2–8°C ---------- */
.monument {
  position: relative;
  background: linear-gradient(180deg, var(--cold-front) 0%, #8FA6BB 42%, var(--ice) 78%, var(--ice) 100%);
  color: var(--white);
  padding: clamp(40px, 6vw, 80px) var(--gutter) var(--band);
  overflow: hidden;
}
.monument-word {
  font-size: clamp(110px, 27vw, 520px);
  font-weight: 600;
  font-stretch: 118%;
  line-height: .85;
  letter-spacing: -0.055em;
  white-space: nowrap;
  margin-inline-start: -0.04em;
  font-variant-numeric: lining-nums;
}
.uld-stage { margin-top: calc(clamp(110px, 27vw, 520px) * -0.38); position: relative; z-index: 1; }
.uld { width: 100%; height: auto; overflow: visible; }
.uld-faces path { stroke: none; }
.uld-faces .f-front { fill: rgba(240,244,248,.94); }
.uld-faces .f-top   { fill: rgba(255,255,255,.96); }
.uld-faces .f-side  { fill: rgba(222,231,240,.96); }
.uld-faces .f-slope { fill: rgba(206,218,230,.96); }
.uld-lines * { fill: none; stroke: var(--lyons); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.uld-lines .faint { stroke: var(--kings); opacity: .5; }
.uld-lines .vents { stroke: var(--kings); }
.uld-label, .uld-readout { font-family: var(--sans); font-weight: 600; font-variant-numeric: tabular-nums; fill: var(--lyons); }
.uld-label { font-size: 15px; }
.uld-readout { font-size: 15px; fill: var(--cerulian); }
.uld-status { fill: var(--in-range); }
.callouts path { stroke: var(--lyons); stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }
.callouts text { font-family: var(--sans); font-size: 21px; font-weight: 600; fill: var(--lyons); letter-spacing: -0.01em; }
.callouts text.sub { font-weight: 400; fill: var(--cerulian); font-size: 18px; }

.monument-foot {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px 64px;
  margin-top: 40px;
  color: var(--indigo);
}
.monument-copy { font-size: var(--text-lede); line-height: 1.35; max-width: 32em; }
.uld-parts { display: none; }
.uld-parts li { padding: 14px 0; border-top: 1px solid var(--hairline); color: var(--cerulian); }
.uld-parts strong { display: block; color: var(--lyons); font-weight: 600; }

/* draw-in, driven by main.js */
.js .uld-lines * { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .uld-faces, .js .uld-label, .js .uld-readout, .js .uld-status, .js .callouts { opacity: 0; }
.js .monument.drawn .uld-lines * { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s cubic-bezier(.5,0,.2,1); }
.js .monument.drawn .uld-faces { opacity: 1; transition: opacity 1s ease .9s; }
.js .monument.drawn .uld-label,
.js .monument.drawn .uld-readout,
.js .monument.drawn .uld-status { opacity: 1; transition: opacity .6s ease 1.4s; }
.js .monument.drawn .callouts { opacity: 1; transition: opacity .8s ease 1.7s; }
/* the container emerges from the stage floor: only the bottom edge clips */
.uld-stage { clip-path: inset(-100vh -100vw 0 -100vw); direction: ltr; }
.uld { transform: translateY(var(--rise, 0%)); will-change: transform; }

/* ---------- Chain ---------- */
.chain { background: var(--ice); padding: var(--band) 0; }
.route {
  position: relative;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-top: clamp(56px, 7vw, 96px);
  padding: 0 var(--gutter);
}
.route::before {
  /* the continuous custody line */
  content: ""; position: absolute; left: var(--gutter); right: var(--gutter); top: 7px;
  height: 2px; background: var(--kings);
}
.route li { position: relative; padding-inline-end: 24px; }
.route .node {
  display: block; width: 16px; height: 16px; border-radius: 50%;
  background: var(--ice); border: 2px solid var(--kings); position: relative;
}
.route .ours .node { background: var(--lyons); border-color: var(--lyons); }
.route .step { display: block; margin-top: 28px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--muted); }
.route h3 { margin-top: 6px; font-size: clamp(20px, 1.4vw + 4px, 26px); font-weight: 600; font-stretch: 108%; letter-spacing: -0.02em; line-height: 1.1; color: var(--indigo); }
.route .ours h3 { color: var(--lyons); }
.route p { margin-top: 10px; color: var(--cerulian); font-size: 16px; line-height: 1.4; max-width: 22ch; }

/* ---------- Split ---------- */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); background: var(--white); }
.split-img { position: relative; min-height: 640px; }
.split-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 88%; }
.split-body { padding: var(--band) var(--gutter); }
.owns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; margin-top: 56px; }
.owns h3 { font-size: 20px; font-weight: 600; padding-bottom: 14px; border-bottom: 2px solid var(--lyons); }
.owns div:last-child h3 { border-bottom-color: var(--kings); }
.owns li { padding: 12px 0; border-bottom: 1px solid var(--hairline); }
.billing { margin-top: 48px; font-size: var(--text-lede); line-height: 1.3; font-weight: 500; color: var(--lyons); max-width: 30em; }

/* ---------- Services ---------- */
.services { padding: var(--band) 0; border-top: 1px solid var(--hairline); }
.service-list { margin-top: clamp(40px, 5vw, 72px); border-top: 1px solid var(--indigo); }
.service-list > div {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 40px;
  align-items: baseline;
  padding: clamp(22px, 2.4vw, 34px) var(--gutter);
  border-bottom: 1px solid var(--hairline);
}
.service-list dt { font-size: clamp(28px, 2.6vw + 6px, 52px); font-weight: 600; font-stretch: 112%; letter-spacing: -0.03em; line-height: 1; color: var(--lyons); }
.service-list dd { color: var(--cerulian); max-width: 32em; }

/* ---------- Record ---------- */
.record { background: var(--ice); padding: var(--band) 0; }
.chart { margin-top: clamp(40px, 5vw, 72px); padding: 0 var(--gutter); }
.chart svg { width: 100%; height: auto; overflow: visible; direction: ltr; }
.chart .grid line { stroke: var(--hairline); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart .grid text, .chart .phases text { font-family: var(--sans); font-size: 16px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.chart .phases line { stroke: var(--hairline); stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; }
.chart .band { fill: rgba(102,165,197,.22); }
.chart .band-label { font-family: var(--sans); font-size: 16px; font-weight: 600; fill: var(--lyons); }
.chart .ambient { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 5 6; vector-effect: non-scaling-stroke; }
.chart .inside { fill: none; stroke: var(--lyons); stroke-width: 2.8; stroke-linejoin: round; stroke-linecap: round; }
.chart figcaption { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 24px; color: var(--cerulian); font-size: 16px; }
.key { display: inline-flex; align-items: center; gap: 10px; }
.key::before { content: ""; width: 28px; height: 0; border-top: 3px solid var(--lyons); }
.key-ambient::before { border-top: 2px dashed var(--muted); }
.chart .note { margin-inline-start: auto; color: var(--muted); }
.js .chart .inside { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .chart.drawn .inside { stroke-dashoffset: 0; transition: stroke-dashoffset 2.2s cubic-bezier(.4,0,.2,1); }

/* ---------- Stations ---------- */
.stations { position: relative; color: var(--white); background: #0b1630; overflow: hidden; }
.stations-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; }
.stations::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,22,48,.75) 0%, rgba(11,22,48,.25) 45%, rgba(11,22,48,.8) 100%); }
.stations-inner { position: relative; z-index: 1; padding: var(--band) var(--gutter); min-height: 100svh; display: flex; flex-direction: column; justify-content: space-between; gap: 64px; }
.codes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.codes li { display: flex; flex-direction: column; }
.code { font-size: clamp(84px, 10.4vw, 200px); font-weight: 600; font-stretch: 110%; letter-spacing: -0.05em; line-height: .85; margin-inline-start: -0.04em; }
.later .code { color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.85); }
.city { margin-top: 24px; font-size: var(--text-lede); font-weight: 600; }
.airport { color: rgba(255,255,255,.78); }
.phase { margin-top: 14px; align-self: flex-start; padding: 5px 12px; border: 1px solid rgba(255,255,255,.6); font-size: 15px; }

/* ---------- Contact ---------- */
.contact {
  padding: var(--band) var(--gutter);
  background: linear-gradient(180deg, var(--ice) 0%, var(--white) 70%);
}
.contact-title {
  font-size: clamp(44px, 6.4vw, 128px);
  font-weight: 600; font-stretch: 112%; line-height: .96; letter-spacing: -0.04em;
  color: var(--lyons); max-width: 15ch;
}
.contact-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-top: 64px; }
.contact-foot p { max-width: 30em; font-size: var(--text-lede); line-height: 1.3; color: var(--cerulian); }

/* ---------- Footer ---------- */
.footer { background: var(--indigo); color: var(--white); padding: 72px var(--gutter) 40px; --mark-frame: var(--white); }
.footer-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.footer h2 { font-size: 18px; font-weight: 600; margin-bottom: 16px; }
.footer li { padding: 8px 0; color: rgba(255,255,255,.75); }
.footer a { text-decoration: none; }
.footer a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 4px; }
.footer-base { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-top: 96px; padding-top: 32px; border-top: 1px solid #2A3040; }
.footer-base p { color: rgba(255,255,255,.55); font-size: 15px; }
.brand-footer .brand-word { border-inline-start-color: #2A3040; }

/* ---------- Language switch ---------- */
.lang-link { font-family: var(--arabic); }
.lang-link[lang="en"] { font-family: var(--sans); }

/* ---------- Arabic (RTL) ----------
   Archivo leads the stack so Latin, digits and station codes match the English page;
   Arabic glyphs fall through to IBM Plex Sans Arabic. Arabic never takes negative tracking
   and needs taller lines for its ascenders and marks. */
:lang(ar) { --sans: "Archivo", var(--arabic); }
:lang(ar) body,
:lang(ar) h1, :lang(ar) h2, :lang(ar) h3, :lang(ar) p, :lang(ar) dt, :lang(ar) a, :lang(ar) li, :lang(ar) span { letter-spacing: 0; }
:lang(ar) body { line-height: 1.7; }
:lang(ar) .hero-title { font-weight: 700; line-height: 1.22; }
:lang(ar) .hero-title .line { padding-bottom: .12em; }
:lang(ar) .h2,
:lang(ar) .contact-title,
:lang(ar) .service-list dt,
:lang(ar) .menu a { font-weight: 700; line-height: 1.25; }
:lang(ar) .statement-text { font-weight: 500; line-height: 1.45; max-width: 26ch; }
:lang(ar) .lede, :lang(ar) .hero-foot p, :lang(ar) .contact-foot p, :lang(ar) .monument-copy, :lang(ar) .billing { line-height: 1.7; }
:lang(ar) .route h3 { line-height: 1.4; }
:lang(ar) .h2 { max-width: 24ch; }
/* the time axis reads left to right in both languages; keep its scroll origin on the left */
:lang(ar) .chart { direction: ltr; }
:lang(ar) .chart figcaption { direction: rtl; }
:lang(ar) .route p { max-width: 24ch; }
:lang(ar) .callouts text { font-family: var(--arabic); font-size: 22px; }
:lang(ar) .callouts text.sub { font-size: 19px; }
:lang(ar) .monument-word,
:lang(ar) .code { letter-spacing: -0.05em; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .route { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 56px; }
  .route::before { display: none; }
  .route li { border-top: 2px solid var(--kings); padding-top: 0; }
  .route .node { margin-top: -9px; }
  .split { grid-template-columns: 1fr; }
  .split-img { min-height: 0; aspect-ratio: 4 / 3; }
}
@media (max-width: 860px) {
  .nav-links { display: none; }
  .menu-btn { display: inline-block; position: relative; z-index: 11; }
  .monument-foot { grid-template-columns: 1fr; }
  .callouts { display: none; }
  .uld-parts { display: block; }
  .uld { margin-left: -53%; width: 190%; max-width: none; }
  .uld-lines * { stroke-width: 3; }
  .service-list > div { grid-template-columns: 1fr; gap: 10px; }
  .codes { grid-template-columns: 1fr; gap: 48px; }
  .stations-inner { min-height: 0; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .brand-mark { width: 34px; height: 34px; }
  .brand-en { font-size: 16px; }
  .brand-ar { font-size: 15px; }
  .hero-foot, .contact-foot { flex-direction: column; align-items: flex-start; }
  .route { grid-template-columns: 1fr; row-gap: 0; }
  .route li { border-top: 0; border-inline-start: 2px solid var(--kings); padding: 0; padding-inline-start: 28px; padding-bottom: 36px; }
  .route li:last-child { padding-bottom: 0; }
  .route .node { position: absolute; inset-inline-start: -9px; top: 0; margin: 0; }
  .route .step { margin-top: 0; }
  .route p { max-width: none; }
  .owns { grid-template-columns: 1fr; }
  .footer-cols { grid-template-columns: 1fr; }
  .footer-base { flex-direction: column; align-items: flex-start; }
  .chart { overflow-x: auto; }
  .chart svg { min-width: 640px; }
  .chart .note { margin-inline-start: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .js .hero-title .line > span, .js .hero-img { transform: none; }
  .js .hero-foot, .js .uld-faces, .js .uld-label, .js .uld-readout, .js .uld-status, .js .callouts { opacity: 1; }
  .js .uld-lines *, .js .chart .inside { stroke-dashoffset: 0; }
  .uld { transform: none; }
}