/* =========================================================================
   ATHEER PHARMA — Design System 2026
   Built on the hexagon monogram: the route ends at the patient.
   ========================================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  /* Brand — sourced from the logo SVG, not guessed */
  --navy:#0C3B49;
  --navy-900:#072A34;
  --navy-800:#0A3340;
  --teal:#2A93AE;
  --teal-light:#7FCADB;
  --teal-mist:#8FBECB;
  --orange:#F59A18;
  --gold-2:#BB8224;
  --gold-3:#8A6426;
  --paper:#F7F9FB;
  --white:#fff;

  /* Derived */
  --ink:var(--navy);
  --ink-soft:#3D5A64;
  --ink-mute:#6B838C;
  --line:#E3EAEE;
  --line-dark:rgba(127,202,219,.18);
  --hex-grad:linear-gradient(135deg,var(--navy) 0%,var(--teal) 100%);

  /* Type */
  --f-latin:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-arabic:'IBM Plex Sans Arabic','Manrope',system-ui,sans-serif;

  /* Rhythm */
  --pad:clamp(20px,5vw,40px);
  --max:1240px;
  --sec:clamp(72px,10vw,132px);
  --r:14px;
  --r-lg:22px;

  /* Motion */
  --ease:cubic-bezier(.22,.61,.36,1);
  --t:.34s var(--ease);

  --shadow:0 1px 2px rgba(12,59,73,.05),0 12px 32px -12px rgba(12,59,73,.14);
  --shadow-lg:0 2px 4px rgba(12,59,73,.06),0 28px 64px -20px rgba(12,59,73,.28);
}

*,*::before,*::after{box-sizing:border-box}
/* overflow-x on html as well as body: iOS Safari lets the page pan sideways
   when only body is clipped. `clip` rather than `hidden` so neither element
   becomes a scroll container, which would break the sticky header. */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden;overflow-x:clip}
body{
  margin:0;font-family:var(--f-latin);font-size:17px;line-height:1.65;
  color:var(--ink);background:var(--white);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;overflow-x:clip;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:4px}

/* ---------- 2. Type scale ---------- */
h1,h2,h3,h4{margin:0;font-weight:800;line-height:1.08;letter-spacing:-.025em}
/* One accented word per heading — never italic, always the brand orange. */
h1 em,h2 em,h3 em{font-style:normal;color:var(--orange)}
h1{font-size:clamp(2.6rem,6.2vw,4.6rem)}
h2{font-size:clamp(2rem,4vw,3.15rem);letter-spacing:-.028em}
h3{font-size:clamp(1.2rem,1.9vw,1.55rem);font-weight:700;letter-spacing:-.015em;line-height:1.22}
h4{font-size:1.02rem;font-weight:700;letter-spacing:-.01em}
p{margin:0 0 1.05em}
.lede{font-size:clamp(1.08rem,1.5vw,1.26rem);line-height:1.6;color:var(--ink-soft)}
.ar{font-family:var(--f-arabic);direction:rtl}
.measure{max-width:68ch}

/* ---------- 3. Layout ---------- */
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.section{padding:var(--sec) 0;position:relative}
.section--paper{background:var(--paper)}
.section--navy{background:var(--navy);color:#DCEAEF}
.section--navy h1,.section--navy h2,.section--navy h3,.section--navy h4{color:#fff}
.section--navy .lede{color:rgba(220,234,239,.82)}
.section--deep{background:var(--navy-900);color:#DCEAEF}

.grid{display:grid;gap:clamp(20px,2.6vw,32px)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,76px);align-items:center}

/* ---------- 4. Eyebrow + rising dots (core motif) ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.75rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--teal);margin:0 0 18px;
}
.section--navy .eyebrow,.section--deep .eyebrow{color:var(--teal-light)}
.eyebrow::before{
  content:"";width:24px;height:8px;flex:none;
  background:
    radial-gradient(circle 3.4px at 3.4px 4px,var(--orange) 96%,transparent 0),
    radial-gradient(circle 2.6px at 12px 4px,var(--gold-2) 96%,transparent 0),
    radial-gradient(circle 1.9px at 20px 4px,var(--gold-3) 96%,transparent 0);
}
/* Standalone ascent mark */
.dots{display:inline-flex;align-items:flex-end;gap:6px}
.dots i{display:block;border-radius:50%;background:var(--orange)}
.dots i:nth-child(1){width:9px;height:9px}
.dots i:nth-child(2){width:7px;height:7px;background:var(--gold-2)}
.dots i:nth-child(3){width:5px;height:5px;background:var(--gold-3)}

.section-head{max-width:760px;margin:0 0 clamp(38px,5vw,60px)}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head.center .eyebrow{justify-content:center}
.section-head p{color:var(--ink-soft);font-size:1.08rem}
.section--navy .section-head p{color:rgba(220,234,239,.78)}

/* ---------- 5. Ground texture ----------
   The letterhead does NOT tile the hexagon — it places ONE large mark, bled off the
   corner, at a whisper. Tiling turns the brand into honeycomb. So: kill the tile,
   keep the container, and render a single oversized monogram watermark instead. */
.hexbg{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.hexbg svg{display:none}                 /* retires the tiled pattern site-wide */
.hexbg::after{
  content:"";position:absolute;
  /* Bled far enough to feel like a watermark, never so far that the silhouette
     stops reading as a hexagon — a cropped one just looks like a roof.
     Offsets are fixed px, not %: a percentage resolves against the section box,
     so a tall section would crop a third of the mark away. */
  right:-44px;bottom:-40px;width:min(42vw,470px);aspect-ratio:1;
  /* Driven by js/main.js — the watermark drifts with scroll and leans toward the cursor. */
  transform:translate3d(var(--hx-x,0px),var(--hx-y,0px),0) rotate(var(--hx-r,0deg));
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
  background:no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -20 120 130'%3E%3Cpath d='M60 22 90 39.5v35L60 92 30 74.5v-35L47 29.6' fill='none' stroke='%230C3B49' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='60' cy='57' r='8' fill='%230C3B49'/%3E%3Ccircle cx='52' cy='15' r='5.4' fill='%230C3B49'/%3E%3Ccircle cx='64' cy='4' r='4.1' fill='%230C3B49'/%3E%3Ccircle cx='77' cy='-7' r='3' fill='%230C3B49'/%3E%3C/svg%3E");
  opacity:.075;   /* light grounds need more than a whisper to register at all */
}
.section--paper .hexbg::after{opacity:.095}
.section--navy .hexbg::after,.section--deep .hexbg::after,.phero .hexbg::after,.hero .hexbg::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -20 120 130'%3E%3Cpath d='M60 22 90 39.5v35L60 92 30 74.5v-35L47 29.6' fill='none' stroke='%237FCADB' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='60' cy='57' r='8' fill='%237FCADB'/%3E%3Ccircle cx='52' cy='15' r='5.4' fill='%237FCADB'/%3E%3Ccircle cx='64' cy='4' r='4.1' fill='%237FCADB'/%3E%3Ccircle cx='77' cy='-7' r='3' fill='%237FCADB'/%3E%3C/svg%3E");
  opacity:.07;
}
/* Bottom-right on every section, as on the letterhead. Alternating to the left
   put the mark straight through the copy — every content column here is
   left-aligned — and variety is already covered by the hex swarm. */
.section>.wrap{position:relative;z-index:1}

/* ---------- 6. Buttons ---------- */
.btn{
  --bg:var(--orange);--fg:#fff;
  display:inline-flex;align-items:center;gap:11px;
  padding:15px 27px;border-radius:100px;border:1.5px solid transparent;
  background:var(--bg);color:var(--fg);
  font-weight:700;font-size:.95rem;letter-spacing:.005em;cursor:pointer;
  transition:transform var(--t),box-shadow var(--t),background var(--t),border-color var(--t),color var(--t);
  box-shadow:0 10px 24px -10px rgba(245,154,24,.6);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 34px -12px rgba(245,154,24,.7)}
.btn svg{width:16px;height:16px;transition:transform var(--t)}
.btn:hover svg{transform:translateX(4px)}
.btn--navy{--bg:var(--navy);box-shadow:0 10px 24px -12px rgba(12,59,73,.5)}
.btn--navy:hover{box-shadow:0 16px 34px -14px rgba(12,59,73,.6)}
.btn--ghost{--bg:transparent;--fg:var(--navy);border-color:rgba(12,59,73,.22);box-shadow:none}
.btn--ghost:hover{border-color:var(--navy);background:rgba(12,59,73,.04);box-shadow:none}
.section--navy .btn--ghost,.section--deep .btn--ghost,.hero .btn--ghost{--fg:#fff;border-color:rgba(255,255,255,.32)}
.section--navy .btn--ghost:hover,.section--deep .btn--ghost:hover,.hero .btn--ghost:hover{background:rgba(255,255,255,.08);border-color:#fff}
.btn--sm{padding:11px 20px;font-size:.87rem}

/* ---------- 7. Cards ---------- */
.card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(24px,2.6vw,34px);position:relative;overflow:hidden;
  transition:transform var(--t),box-shadow var(--t),border-color var(--t);
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#CFDEE4}
.card__n{
  font-size:.72rem;font-weight:800;letter-spacing:.16em;color:var(--teal);
  display:block;margin-bottom:14px;
}
.card h3{margin-bottom:9px}
.card p{color:var(--ink-soft);font-size:.98rem;margin:0}
.card--dark{background:rgba(255,255,255,.045);border-color:var(--line-dark);color:rgba(220,234,239,.8)}
.card--dark:hover{background:rgba(255,255,255,.075);border-color:rgba(127,202,219,.35);box-shadow:none}
.card--dark p{color:rgba(220,234,239,.72)}

/* Card with the route accent bar */
.card--route::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--hex-grad);transform:scaleY(0);transform-origin:top;
  transition:transform .5s var(--ease);
}
.card--route:hover::before{transform:scaleY(1)}

/* ---------- 8. Stats ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:clamp(18px,2.4vw,30px)}
.stat__num{
  font-size:clamp(2.3rem,4.4vw,3.5rem);font-weight:800;line-height:1;
  letter-spacing:-.04em;color:var(--navy);font-variant-numeric:tabular-nums;
}
.section--navy .stat__num,.section--deep .stat__num{color:#fff}
.stat__num em{font-style:normal;color:var(--orange)}
.stat__label{
  font-size:.83rem;color:var(--ink-mute);margin:10px 0 0;line-height:1.4;
  letter-spacing:.01em;
}
.section--navy .stat__label,.section--deep .stat__label{color:rgba(220,234,239,.62)}
.stat{padding-top:20px;border-top:1px solid var(--line)}
.section--navy .stat,.section--deep .stat{border-top-color:var(--line-dark)}

/* ---------- 9. Chips / pills ---------- */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 17px;border-radius:100px;border:1px solid var(--line);
  background:var(--white);font-size:.88rem;font-weight:600;color:var(--ink-soft);
  transition:all var(--t);
}
.chip:hover{border-color:var(--teal);color:var(--navy)}
.section--navy .chip,.section--deep .chip{
  background:rgba(255,255,255,.05);border-color:var(--line-dark);color:rgba(220,234,239,.85);
}
.section--navy .chip:hover{background:rgba(255,255,255,.1);border-color:var(--teal-light);color:#fff}

/* ---------- 10. Open-oval frame (from the wordmark) ---------- */
.oval{position:relative;padding:clamp(34px,4.5vw,56px) clamp(26px,4vw,64px);text-align:center}
.oval::before,.oval::after{
  content:"";position:absolute;left:2%;right:2%;height:64px;
  border-radius:50%/100%;pointer-events:none;
}
.oval::before{top:0;border-top:2px solid var(--teal-light);border-left:2px solid transparent;border-right:2px solid transparent}
.oval::after{bottom:0;border-bottom:2px solid var(--orange);border-left:2px solid transparent;border-right:2px solid transparent}
.oval q{
  display:block;font-size:clamp(1.3rem,2.6vw,2rem);font-weight:700;
  line-height:1.34;letter-spacing:-.02em;quotes:none;
}

/* =========================================================================
   HEADER
   ========================================================================= */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:100;
  transition:background .4s var(--ease),backdrop-filter .4s var(--ease),box-shadow .4s var(--ease);
}
.hdr.is-stuck{background:rgba(7,42,52,.9);backdrop-filter:blur(16px) saturate(1.4);box-shadow:0 1px 0 rgba(127,202,219,.14)}
.nav{
  max-width:var(--max);margin:0 auto;padding:16px var(--pad);
  display:flex;align-items:center;gap:clamp(16px,3vw,44px);
}
.nav__logo{flex:none;display:block}
/* Wordmark only — no hexagon, no fine arcs. It is a 12:1 lockup, so it is sized
   by width; height alone would leave it tiny. */
.nav__logo img{width:clamp(190px,17vw,260px);height:auto;transition:width var(--t)}
.hdr.is-stuck .nav__logo img{width:clamp(168px,14vw,220px)}
.nav__links{
  display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0;
  margin-inline-start:auto;
}
.nav__links>li{position:relative}
.nav__links a,.nav__trigger{
  display:flex;align-items:center;gap:6px;
  padding:9px 14px;border-radius:9px;background:none;border:0;cursor:pointer;
  font-size:.9rem;font-weight:600;color:rgba(255,255,255,.85);
  transition:color var(--t),background var(--t);white-space:nowrap;
}
.nav__links a:hover,.nav__trigger:hover,.nav__links a.active{color:#fff;background:rgba(255,255,255,.1)}
.nav__trigger svg{width:10px;height:10px;opacity:.65;transition:transform var(--t)}
.nav__links li.open .nav__trigger svg{transform:rotate(180deg)}

.drop{
  position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(-8px);
  min-width:250px;padding:10px;border-radius:16px;
  background:rgba(7,42,52,.97);backdrop-filter:blur(20px);
  border:1px solid rgba(127,202,219,.18);box-shadow:0 24px 56px -20px rgba(0,0,0,.6);
  opacity:0;visibility:hidden;transition:all .28s var(--ease);list-style:none;margin:0;
}
li.open>.drop{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.drop a{display:block;padding:11px 14px;border-radius:10px;font-weight:600}
.drop a small{display:block;font-size:.76rem;font-weight:500;color:rgba(220,234,239,.55);margin-top:2px;white-space:normal}

.nav__cta{display:flex;align-items:center;gap:10px;flex:none}
.nav__toggle{
  display:none;width:44px;height:44px;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.24);border-radius:11px;background:none;cursor:pointer;color:#fff;
}
.nav__toggle svg{width:20px;height:20px}
.lang{
  padding:9px 14px;border-radius:100px;border:1px solid rgba(255,255,255,.24);
  font-size:.8rem;font-weight:700;letter-spacing:.04em;color:#fff;background:none;cursor:pointer;
  transition:all var(--t);
}
.lang:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.5)}

/* =========================================================================
   HERO
   ========================================================================= */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:center;
  background:radial-gradient(120% 90% at 78% 12%,#12586E 0%,var(--navy) 42%,var(--navy-900) 100%);
  color:#fff;overflow:hidden;
  /* The audience rail is position:absolute, so it contributes nothing to layout.
     Reserve its measured height (js/main.js sets --rail-h, and re-measures on
     resize because the rail wraps to two rows on narrower screens) or the
     centred column grows straight through it on a short laptop screen. */
  padding:114px 0 calc(var(--rail-h, 89px) + 30px);
}
#hexCanvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.9}
.hero__glow{
  position:absolute;width:58vw;height:58vw;max-width:760px;max-height:760px;
  right:-10%;top:6%;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(245,154,24,.15) 0%,rgba(42,147,174,.1) 42%,transparent 68%);
  filter:blur(28px);
}
.hero .wrap{position:relative;z-index:2;width:100%}  /* .hero is a flex row; without this the wrap shrink-to-fits its content */
.hero__grid{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(30px,4vw,66px);align-items:center}

/* The company, named. The name and tagline only — the hexagon lives on the right,
   alive, and does not need repeating here. Pulled slightly left of the text column
   so the arcs, not the letters, line up with the headline. */
/* The mark and the tagline share one measure — that is what puts the tagline
   dead centre under the arcs instead of flush with the headline's left edge. */
.hero__brand{
  width:min(100%,clamp(268px,33vw,412px));
  margin-inline-start:clamp(-26px,-2vw,-10px);
  margin-bottom:clamp(20px,2.4vw,28px);
}
.hero__id{
  width:100%;height:auto;margin:0 0 clamp(10px,1.2vw,15px);
  filter:drop-shadow(0 0 26px rgba(42,147,174,.3));
}

/* The tagline is set exactly as the brand sets it: SAUDI carries the orange,
   each full stop carries the orange, the rest is quiet.
   It stays on ONE line — wrapping it costs the hero a whole row of height, and
   the hero has to fit the screen. */
.hero__tag{
  display:flex;align-items:baseline;justify-content:center;
  flex-wrap:nowrap;white-space:nowrap;gap:0 .5em;margin:0;
  font-size:clamp(.58rem,.8vw,.78rem);font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(220,234,239,.72);
  /* letter-spacing adds a trailing gap on the last glyph; pull it back so the
     line is optically centred, not merely mathematically centred. */
  padding-inline-start:.2em;
}
.hero__tag b{color:rgba(255,255,255,.94);font-weight:800}
.hero__tag em{color:var(--orange);font-style:normal;font-weight:800}
.hero__tag span{color:var(--orange);margin-inline-start:-.42em}

.hero h1{margin-bottom:18px}
/* Bilingual name lockup — Arabic and Latin at MATCHED WIDTH, as on the letterhead.
   The Arabic is never shrunk against the Latin; it sits above it and they share a
   common measure. Use this, or the official logo SVG. Never hand-shrink the Arabic. */
.lockup{display:inline-flex;flex-direction:column;align-items:center;line-height:1;text-align:center}
.lockup__ar{
  font-family:var(--f-arabic);direction:rtl;font-weight:600;
  font-size:2.6em;line-height:1.24;color:var(--navy);white-space:nowrap;
}
.lockup__en{
  font-weight:500;font-size:1em;letter-spacing:.06em;
  color:var(--teal);white-space:nowrap;
}
/* main.js fits the Latin tracking to the Arabic measure so the two share one width,
   exactly as the letterhead sets them. Both scripts read at full size — the Arabic
   is never shrunk to sit under the Latin. */
.lockup--light .lockup__ar{color:var(--teal-light)}
.lockup--light .lockup__en{color:#fff}
.lockup--start{align-items:flex-start;text-align:start}
.hero h1 em{font-style:normal;color:var(--orange)}
.hero__lede{
  font-size:clamp(1.04rem,1.35vw,1.2rem);line-height:1.62;
  color:rgba(220,234,239,.8);max-width:53ch;margin-bottom:26px;
}
.hero__actions{display:flex;flex-wrap:wrap;gap:13px;margin-bottom:22px}

/* Audience switcher — a rail along the foot of the hero, not a block in the column */
.hero__rail{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  border-top:1px solid rgba(127,202,219,.16);
  background:linear-gradient(transparent,rgba(7,42,52,.5));
  backdrop-filter:blur(6px);
}
.hero__rail-in{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:16px 34px;padding-block:18px;
}
.hero__rail-paths{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px}
/* The proof strip replaces the badges that used to float over the mark */
.hero__proof{
  display:flex;align-items:stretch;gap:0;list-style:none;margin:0;padding:0;
}
.hero__proof li{
  display:flex;flex-direction:column;gap:2px;
  padding:2px 20px;border-inline-start:1px solid rgba(127,202,219,.18);
  font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(220,234,239,.5);white-space:nowrap;
}
.hero__proof li:first-child{border:0;padding-inline-start:0}
.hero__proof b{
  font-size:1.02rem;font-weight:800;letter-spacing:-.01em;text-transform:none;color:#fff;
}
.hero__proof li:nth-child(2) b,.hero__proof li:nth-child(4) b{color:var(--orange)}
@media(max-width:1100px){.hero__proof{display:none}}
.paths{border-top:1px solid rgba(127,202,219,.2);padding-top:24px}
.paths__q{
  font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(220,234,239,.46);margin:0;
}
.paths__row{display:flex;flex-wrap:wrap;gap:9px}
@media(max-width:900px){
  /* The rail leaves the absolute layer here, which makes it a SECOND flex item
     inside .hero — side by side with the content, splitting the width in half.
     Stack the hero so it lands underneath instead. */
  /* rail is in normal flow here, so it needs no reserved space */
  .hero{flex-direction:column;align-items:stretch;justify-content:center;padding-bottom:46px}
  .hero__rail{position:static;background:none;backdrop-filter:none;margin-top:34px}
  .hero__rail-in{padding-inline:0;flex-direction:column;align-items:flex-start;gap:12px}
}
.path{
  padding:11px 19px;border-radius:100px;cursor:pointer;
  border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.045);
  font-size:.87rem;font-weight:600;color:rgba(220,234,239,.8);
  transition:all var(--t);
}
.path:hover{background:rgba(255,255,255,.1);color:#fff}
.path.on{background:var(--orange);border-color:var(--orange);color:#fff;box-shadow:0 8px 22px -10px rgba(245,154,24,.8)}

/* Hero core visual */
.core{
  position:relative;display:flex;align-items:center;justify-content:center;
  min-height:min(64vh,600px);cursor:crosshair;
}
.core svg{
  width:100%;max-width:640px;height:auto;overflow:visible;
  transform-style:preserve-3d;will-change:transform;
  filter:drop-shadow(0 0 42px rgba(42,147,174,.3)) drop-shadow(0 0 90px rgba(245,154,24,.12));
  transition:filter .5s var(--ease);
}
.core.is-near svg{
  filter:drop-shadow(0 0 56px rgba(42,147,174,.5)) drop-shadow(0 0 120px rgba(245,154,24,.26));
}
.core__badge{
  position:absolute;display:flex;align-items:center;gap:9px;
  padding:9px 15px;border-radius:100px;
  background:rgba(7,42,52,.72);backdrop-filter:blur(12px);
  border:1px solid rgba(127,202,219,.3);
  font-size:.76rem;font-weight:700;color:#fff;white-space:nowrap;
  animation:floaty 6s ease-in-out infinite;
}
.core__badge i{width:6px;height:6px;border-radius:50%;background:var(--orange);flex:none}
.core__badge--a{top:6%;left:-2%;animation-delay:0s}
.core__badge--b{bottom:14%;right:-4%;animation-delay:-2s}
.core__badge--c{bottom:2%;left:6%;animation-delay:-4s}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

.scroll-hint{
  position:absolute;bottom:28px;left:50%;transform:translateX(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(220,234,239,.4);
}
.scroll-hint span{width:1px;height:34px;background:linear-gradient(rgba(127,202,219,.5),transparent);animation:drop 2.2s var(--ease) infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}46%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* =========================================================================
   THE HEXAGON, EVERYWHERE
   The office in Dammam is built around this shape — the reception desk, the
   brass line in the floor, the workstations. On the site it earns the same
   role: not wallpaper, but the frame things actually sit in.
   ========================================================================= */
:root{
  --hex-poly:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
}

/* 1. Hexagon-framed media — portraits, product shots, anything worth framing */
.hexshot{
  position:relative;display:block;aspect-ratio:1/1.1547;   /* true hexagon ratio */
  clip-path:var(--hex-poly);background:var(--navy);
  transition:transform .5s var(--ease),filter .5s var(--ease);
}
.hexshot img{width:100%;height:100%;object-fit:cover;display:block}
.hexshot:hover{transform:translateY(-6px) scale(1.02)}
/* The teal edge is a second, slightly larger hexagon behind the media */
.hexframe{position:relative;display:inline-block;padding:3px;background:var(--hex-grad);clip-path:var(--hex-poly)}
.hexframe .hexshot{clip-path:var(--hex-poly)}

/* 2. Hexagon bullets — replaces the round dot in lists that want more structure */
.hexlist{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.hexlist li{position:relative;padding-inline-start:30px;color:var(--ink-soft)}
.hexlist li::before{
  content:"";position:absolute;inset-inline-start:0;top:.45em;
  width:13px;height:15px;background:var(--teal);clip-path:var(--hex-poly);
  transition:background .3s var(--ease),transform .3s var(--ease);
}
.hexlist li:hover::before{background:var(--orange);transform:rotate(30deg)}
.section--navy .hexlist li,.section--deep .hexlist li{color:rgba(220,234,239,.78)}
.section--navy .hexlist li::before{background:var(--teal-light)}

/* 3. Hexagon badge — for numbers, steps, icons */
.hexbadge{
  display:grid;place-items:center;width:64px;height:74px;flex:none;
  background:var(--hex-grad);color:#fff;font-weight:800;font-size:1.05rem;
  clip-path:var(--hex-poly);transition:transform .45s var(--ease);
}
.hexbadge--orange{background:linear-gradient(140deg,#F7B04A,var(--orange))}
.hexbadge--ghost{background:none;box-shadow:none;color:var(--teal);position:relative}
.hexbadge--ghost::before{
  content:"";position:absolute;inset:0;background:var(--teal);opacity:.16;clip-path:var(--hex-poly);
}
*:hover > .hexbadge{transform:rotate(-8deg) scale(1.06)}

/* 4. Hexagon rule — a section divider built from the mark */
.hexrule{
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:clamp(30px,4vw,48px) 0;
}
.hexrule i{
  width:11px;height:13px;background:var(--teal);clip-path:var(--hex-poly);opacity:.5;
  animation:hexRule 2.8s var(--ease) infinite;
}
.hexrule i:nth-child(2){animation-delay:.18s;background:var(--orange)}
.hexrule i:nth-child(3){animation-delay:.36s}
.hexrule::before,.hexrule::after{
  content:"";height:1px;flex:1;max-width:180px;
  background:linear-gradient(90deg,transparent,var(--line));
}
.hexrule::after{background:linear-gradient(270deg,transparent,var(--line))}
.section--navy .hexrule::before{background:linear-gradient(90deg,transparent,var(--line-dark))}
.section--navy .hexrule::after{background:linear-gradient(270deg,transparent,var(--line-dark))}
@keyframes hexRule{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-4px)}}

/* 5. Cards grow a hexagon corner mark on hover */
.card--hex::after{
  content:"";position:absolute;top:16px;inset-inline-end:16px;
  width:20px;height:23px;background:var(--teal);clip-path:var(--hex-poly);
  opacity:0;transform:translateY(6px) rotate(-14deg);
  transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.card--hex:hover::after{opacity:.9;transform:none;background:var(--orange)}

/* 6. A field of hexagons that reacts to the pointer (js/main.js drives --hx-*) */
.hexswarm{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.hexswarm i{
  position:absolute;display:block;background:var(--teal-light);
  clip-path:var(--hex-poly);opacity:.06;
  transition:transform .7s var(--ease),opacity .7s var(--ease);
}

@media(prefers-reduced-motion:reduce){
  .hexrule i{animation:none}
  .hexshot,.hexbadge,.hexswarm i{transition:none}
}

/* =========================================================================
   INNER-PAGE HERO
   ========================================================================= */
.phero{
  position:relative;padding:clamp(150px,17vw,200px) 0 clamp(56px,7vw,84px);
  background:radial-gradient(110% 130% at 82% 0%,#12586E 0%,var(--navy) 46%,var(--navy-900) 100%);
  color:#fff;overflow:hidden;
}
.phero .wrap{position:relative;z-index:1}
.phero #hexCanvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.85}
.phero h1{font-size:clamp(2.2rem,5vw,3.8rem);margin-bottom:20px}
.phero h1 em{font-style:normal;color:var(--orange)}
/* Page titles use English type or the hexagon mark — never a shrunken Arabic name. */
.phero p{color:rgba(220,234,239,.8);font-size:clamp(1.02rem,1.35vw,1.18rem);max-width:62ch;margin:0}
.phero .eyebrow{color:var(--teal-light)}
.crumb{
  display:flex;gap:9px;align-items:center;margin-bottom:20px;
  font-size:.79rem;color:rgba(220,234,239,.5);
}
.crumb a{transition:color var(--t)}
.crumb a:hover{color:var(--orange)}

/* Long-form prose */
.prose{max-width:70ch}
.prose h2{margin:2em 0 .6em;font-size:clamp(1.5rem,2.6vw,2.1rem)}
.prose h3{margin:1.8em 0 .5em}
.prose h2:first-child,.prose h3:first-child{margin-top:0}
.prose ul,.prose ol{margin:0 0 1.2em;padding-inline-start:0;list-style:none}
.prose ul li{position:relative;padding-inline-start:24px;margin-bottom:.6em;color:var(--ink-soft)}
.prose ul li::before{
  content:"";position:absolute;inset-inline-start:0;top:.62em;
  width:8px;height:8px;border-radius:50%;background:var(--orange);
}
.prose ol{counter-reset:n}
.prose ol li{counter-increment:n;position:relative;padding-inline-start:34px;margin-bottom:.7em;color:var(--ink-soft)}
.prose ol li::before{
  content:counter(n,decimal-leading-zero);position:absolute;inset-inline-start:0;top:.05em;
  font-size:.78rem;font-weight:800;color:var(--teal);letter-spacing:.06em;
}

/* Spec / definition rows */
.spec{border-top:1px solid var(--line)}
.spec__row{
  display:grid;grid-template-columns:minmax(150px,.34fr) 1fr;gap:14px 28px;
  padding:16px 0;border-bottom:1px solid var(--line);align-items:baseline;
}
.spec__row dt{
  font-size:.73rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin:0;
}
.spec__row dd{margin:0;color:var(--ink-soft);font-size:.98rem;overflow-wrap:anywhere}
.spec__row dd b{color:var(--ink);font-weight:700}
@media(max-width:620px){
  .spec__row{grid-template-columns:1fr;gap:6px;padding:14px 0}
}
.section--navy .spec,.section--deep .spec{border-top-color:var(--line-dark)}
.section--navy .spec__row,.section--deep .spec__row{border-bottom-color:var(--line-dark)}
.section--navy .spec__row dt{color:var(--teal-light)}
.section--navy .spec__row dd{color:rgba(220,234,239,.78)}
.section--navy .spec__row dd b{color:#fff}

/* Timeline */
.tl{position:relative;padding-inline-start:34px}
.tl::before{content:"";position:absolute;inset-inline-start:9px;top:8px;bottom:8px;width:2px;background:linear-gradient(var(--teal-light),var(--orange));opacity:.4}
.tl__i{position:relative;padding-bottom:38px}
.tl__i:last-child{padding-bottom:0}
.tl__i::before{
  content:"";position:absolute;inset-inline-start:-34px;top:6px;width:20px;height:20px;
  border-radius:50%;background:var(--white);border:2px solid var(--teal);
}
.section--navy .tl__i::before,.section--deep .tl__i::before{background:var(--navy);border-color:var(--teal-light)}
.tl__i:last-child::before{background:var(--orange);border-color:var(--orange)}
.tl__y{font-size:.76rem;font-weight:800;letter-spacing:.14em;color:var(--orange);display:block;margin-bottom:6px}
.tl__i h3{margin-bottom:7px}
.tl__i p{color:var(--ink-soft);margin:0;font-size:.98rem}
.section--navy .tl__i p{color:rgba(220,234,239,.72)}

/* Letter values (A-T-H-E-E-R) */
.letters{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.section--navy .letters,.section--deep .letters{background:var(--line-dark);border-color:var(--line-dark)}
.letter{background:var(--white);padding:28px 22px;transition:background var(--t)}
.section--navy .letter,.section--deep .letter{background:var(--navy)}
.letter:hover{background:var(--paper)}
.section--navy .letter:hover{background:rgba(255,255,255,.055)}
.letter b{
  display:block;font-size:2.6rem;font-weight:800;line-height:1;color:var(--teal);
  letter-spacing:-.04em;margin-bottom:12px;
}
.letter:hover b{color:var(--orange)}
.section--navy .letter b{color:var(--teal-light)}
.letter h4{margin-bottom:6px}
.letter p{font-size:.9rem;color:var(--ink-soft);margin:0}
.section--navy .letter p{color:rgba(220,234,239,.7)}

/* Forms */
.field{display:grid;gap:7px;margin-bottom:18px}
.field label{font-size:.79rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute)}
.field input,.field select,.field textarea{
  width:100%;padding:14px 16px;border-radius:12px;border:1px solid var(--line);
  background:var(--white);font:inherit;font-size:.97rem;color:var(--ink);
  transition:border-color var(--t),box-shadow var(--t);
}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--teal);box-shadow:0 0 0 4px rgba(42,147,174,.12);
}
.field--row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:620px){.field--row{grid-template-columns:1fr}}

/* Notice / callout */
.notice{
  border-inline-start:3px solid var(--orange);background:rgba(245,154,24,.07);
  padding:20px 24px;border-radius:0 var(--r) var(--r) 0;
}
.notice p:last-child{margin-bottom:0}
.notice--teal{border-color:var(--teal);background:rgba(42,147,174,.07)}

/* Filter bar */
.filters{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:34px}
.filters button{
  padding:10px 19px;border-radius:100px;cursor:pointer;
  border:1px solid var(--line);background:var(--white);
  font-size:.88rem;font-weight:600;color:var(--ink-soft);transition:all var(--t);
}
.filters button:hover{border-color:var(--teal);color:var(--navy)}
.filters button.on{background:var(--navy);border-color:var(--navy);color:#fff}

/* =========================================================================
   THE ROUTE (4 steps)
   ========================================================================= */
.route{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;counter-reset:step}
.route::before{
  content:"";position:absolute;left:6%;right:6%;top:34px;height:2px;
  background:linear-gradient(90deg,var(--teal-light),var(--teal),var(--orange));
  opacity:.28;
}
.route__step{position:relative;padding:0 clamp(10px,1.6vw,22px);text-align:center}
.route__dot{
  width:68px;height:68px;margin:0 auto 22px;border-radius:50%;
  display:grid;place-items:center;position:relative;
  background:var(--white);border:2px solid var(--line);
  font-weight:800;font-size:1.02rem;color:var(--teal);
  transition:all .45s var(--ease);
}
.section--navy .route__dot{background:var(--navy);border-color:rgba(127,202,219,.32);color:var(--teal-light)}
.route__step:hover .route__dot{border-color:var(--orange);color:var(--orange);transform:scale(1.07)}
.route__step:last-child .route__dot{background:var(--orange);border-color:var(--orange);color:#fff}
.route__step h3{margin-bottom:8px;font-size:1.1rem}
.route__step p{font-size:.92rem;color:var(--ink-soft);margin:0}
.section--navy .route__step p{color:rgba(220,234,239,.66)}

/* =========================================================================
   THE HEXAGON JOURNEY — the office film
   ========================================================================= */
.hexjourney__split{align-items:center}
.hexjourney__film{margin:0;position:relative}
.hexjourney__film video{
  width:100%;max-width:340px;height:auto;display:block;margin-inline:auto;
  border-radius:20px;background:#000;
  box-shadow:0 30px 70px -28px rgba(0,0,0,.8),0 0 0 1px rgba(127,202,219,.18);
}
.hexjourney__film figcaption{
  margin-top:16px;text-align:center;font-size:.82rem;letter-spacing:.02em;
  color:rgba(220,234,239,.6);
}
/* A hexagon sits behind the film, echoing what the film is about */
.hexjourney__film::before{
  content:"";position:absolute;z-index:0;
  width:118%;aspect-ratio:1/1.1547;left:-9%;top:50%;transform:translateY(-50%);
  background:var(--teal-light);opacity:.05;clip-path:var(--hex-poly);
  pointer-events:none;
}
@media(max-width:900px){
  .hexjourney__film video{max-width:300px}
  .hexjourney__film::before{display:none}
}

/* =========================================================================
   PROOF FIGURES — real photography, captioned like evidence
   ========================================================================= */
.proof__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2vw,24px)}
.proof__fig{margin:0;position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--navy)}
.proof__fig--wide{grid-column:1 / -1}
.proof__fig img{
  width:100%;height:100%;object-fit:cover;display:block;
  aspect-ratio:16/9;transition:transform 1.1s var(--ease),filter .5s var(--ease);
}
.proof__fig--wide img{aspect-ratio:21/9}
.proof__fig:hover img{transform:scale(1.035)}
.proof__fig figcaption{
  position:absolute;inset:auto 0 0 0;padding:44px 26px 22px;
  background:linear-gradient(transparent,rgba(7,42,52,.6) 34%,rgba(7,42,52,.94));
  color:rgba(220,234,239,.82);font-size:.88rem;line-height:1.5;
}
.proof__fig figcaption b{
  display:block;color:#fff;font-size:1.06rem;font-weight:800;
  letter-spacing:-.015em;margin-bottom:5px;
}
.proof__fig::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(127,202,219,.16);
}
@media(max-width:700px){.proof__grid{grid-template-columns:1fr}.proof__fig img{aspect-ratio:4/3}.proof__fig--wide img{aspect-ratio:16/10}}

/* =========================================================================
   COVERAGE MAP
   ========================================================================= */
.ksa{position:relative;display:grid;gap:clamp(18px,2.4vw,30px)}
.ksa__svg{width:100%;height:auto;display:block;overflow:visible}
.ksa__land{transition:stroke-opacity .4s var(--ease)}
.ksa .is-live .ksa__land,.ksa__svg .ksa__land{stroke-opacity:.5}

.ksa__city{cursor:pointer}
.ksa__city:focus{outline:none}
.ksa__city:focus-visible .ksa__dot{stroke:var(--orange);stroke-width:3}
.ksa__dot{transition:r .28s var(--ease),fill .28s var(--ease)}
.ksa__city:hover .ksa__dot,.ksa__city:focus-visible .ksa__dot{fill:var(--orange);r:6}
.ksa__lbl{
  font-family:var(--f-latin);font-size:13px;font-weight:600;
  fill:rgba(220,234,239,.62);pointer-events:none;
  transition:fill .28s var(--ease),font-size .28s var(--ease);
}
.ksa__city:hover .ksa__lbl,.ksa__city:focus-visible .ksa__lbl{fill:#fff}
.ksa__city.is-hub .ksa__lbl{fill:#fff;font-size:15px;font-weight:800;letter-spacing:.02em}
.ksa__city.is-dim{opacity:.2}
.ksa__city{transition:opacity .34s var(--ease)}
.ksa__routes path.is-dim{stroke-opacity:.05}
.ksa__pulse{transform-box:fill-box;transform-origin:center;animation:ksaPulse 3.4s ease-in-out infinite}
@keyframes ksaPulse{0%,100%{transform:scale(1);opacity:.28}50%{transform:scale(1.75);opacity:.05}}

.ksa__out{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;
  padding:16px 22px;border-radius:var(--r);
  background:rgba(255,255,255,.05);border:1px solid var(--line-dark);
}
.ksa__out b{font-size:1.12rem;font-weight:800;color:#fff;letter-spacing:-.015em}
.ksa__out span{font-size:.9rem;color:rgba(220,234,239,.68)}

@media(max-width:620px){
  .ksa__lbl{font-size:17px}
  .ksa__city.is-hub .ksa__lbl{font-size:20px}
}
@media(prefers-reduced-motion:reduce){.ksa__pulse{animation:none}}

/* =========================================================================
   PARTNER / CLIENT WALL
   ========================================================================= */
.wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.section--navy .wall,.section--deep .wall{background:var(--line-dark);border-color:var(--line-dark)}
.wall__i{
  background:var(--white);padding:26px 20px;text-align:center;
  transition:background var(--t);
}
.section--navy .wall__i,.section--deep .wall__i{background:var(--navy)}
.wall__i:hover{background:var(--paper)}
.section--navy .wall__i:hover{background:rgba(255,255,255,.05)}
.wall__i b{display:block;font-size:.98rem;font-weight:700;letter-spacing:-.01em}
.wall__i small{display:block;font-size:.75rem;color:var(--ink-mute);margin-top:5px;letter-spacing:.02em}
.section--navy .wall__i small{color:rgba(220,234,239,.5)}

/* =========================================================================
   FOOTER
   ========================================================================= */
.ftr{background:var(--navy-900);color:rgba(220,234,239,.7);padding:clamp(58px,7vw,86px) 0 0;position:relative;overflow:hidden}
.ftr__top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:clamp(28px,3.6vw,52px);padding-bottom:52px}
/* Sized by width, not height: this is the wide full lockup, and the brand column
   has room the old height-based sizing left empty. */
.ftr__brand img{width:min(90%,clamp(230px,25vw,330px));height:auto;margin-bottom:26px}
.ftr__brand p{font-size:.93rem;line-height:1.65;max-width:36ch;color:rgba(220,234,239,.62)}
.ftr h4{color:#fff;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:18px;font-weight:700}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.ftr li a,.ftr address a{font-size:.92rem;color:rgba(220,234,239,.68);transition:color var(--t)}
.ftr li a:hover,.ftr address a:hover{color:var(--orange)}
.ftr address{font-style:normal;font-size:.92rem;line-height:1.7;color:rgba(220,234,239,.62)}
.ftr address b{display:block;color:#fff;font-weight:700;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;margin:0 0 6px}
.ftr address+address{margin-top:20px}
.ftr__social{display:flex;gap:10px;margin-top:22px}
.ftr__social a{
  width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
  border:1px solid rgba(127,202,219,.2);color:rgba(220,234,239,.75);transition:all var(--t);
}
.ftr__social a:hover{background:var(--teal);border-color:var(--teal);color:#fff;transform:translateY(-2px)}
.ftr__social svg{width:17px;height:17px}
.ftr__tag{
  border-top:1px solid rgba(127,202,219,.14);padding:30px 0;text-align:center;
  font-size:clamp(.95rem,1.7vw,1.3rem);font-weight:800;letter-spacing:.06em;color:#fff;
}
.ftr__tag em{font-style:normal;color:var(--orange)}
.ftr__tag b{color:var(--orange);font-weight:800}
.ftr__legal{
  border-top:1px solid rgba(127,202,219,.14);padding:22px 0 30px;
  display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:space-between;
  font-size:.79rem;color:rgba(220,234,239,.45);
}
.ftr__legal span{display:inline-flex;gap:8px;flex-wrap:wrap}

/* =========================================================================
   REVEAL ANIMATION
   ========================================================================= */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal][data-d="1"]{transition-delay:.08s}
[data-reveal][data-d="2"]{transition-delay:.16s}
[data-reveal][data-d="3"]{transition-delay:.24s}
[data-reveal][data-d="4"]{transition-delay:.32s}
[data-reveal][data-d="5"]{transition-delay:.4s}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media(max-width:1080px){
  .ftr__top{grid-template-columns:1fr 1fr}
  .g-4{grid-template-columns:repeat(2,1fr)}
  .route{grid-template-columns:repeat(2,1fr);gap:44px 0}
  .route::before{display:none}
}
@media(max-width:900px){
  .nav__links{
    position:fixed;inset:0 0 0 auto;width:min(88vw,380px);
    flex-direction:column;align-items:stretch;gap:4px;
    background:var(--navy-900);padding:100px 22px 40px;
    transform:translateX(100%);transition:transform .42s var(--ease);
    overflow-y:auto;border-left:1px solid rgba(127,202,219,.16);
  }
  .nav__links.open{transform:none}
  .nav__links a,.nav__trigger{padding:14px 16px;font-size:1rem;width:100%;justify-content:space-between}
  .drop{
    position:static;transform:none;opacity:1;visibility:visible;
    min-width:0;background:none;border:0;box-shadow:none;padding:0 0 6px 14px;
    display:none;
  }
  li.open>.drop{display:block;transform:none}
  .nav__toggle{display:flex;order:3}
  .nav__cta .btn{display:none}
  .hero__grid,.split{grid-template-columns:1fr}
  /* Content first on a phone. Leading with the mark pushed the name, the
     headline and the call to action off the first screen entirely. */
  .core{min-height:0;margin-top:8px}
  .core svg{max-width:300px;margin-inline:auto}
  .core__badge{display:none}
  .scroll-hint{display:none}
}
@media(max-width:620px){
  body{font-size:16px}
  .g-2,.g-3,.g-4,.route{grid-template-columns:1fr}
  .ftr__top{grid-template-columns:1fr;gap:36px}
  .ftr__legal{justify-content:flex-start}
  .hero{min-height:auto;padding:104px 0 56px}
  .stats{grid-template-columns:repeat(2,1fr)}
}

/* Sticky mobile CTA */
.mcta{
  display:none;position:fixed;left:14px;right:14px;bottom:14px;z-index:90;
  padding:14px;border-radius:100px;text-align:center;font-weight:700;font-size:.94rem;
  background:var(--orange);color:#fff;box-shadow:0 14px 34px -12px rgba(245,154,24,.85);
}
@media(max-width:620px){.mcta{display:block}.ftr{padding-bottom:74px}}

/* =========================================================================
   REDUCED MOTION
   ========================================================================= */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  [data-reveal]{opacity:1;transform:none}
}

/* ==========================================================================
   PHONES AND TOUCH DEVICES — the decoration budget

   Everything below is ornament: backdrop blurs, large drop-shadows and a
   blurred glow layer. Each one is cheap once and expensive when the compositor
   has to redraw it on every scroll frame, which is exactly what a sticky
   header and a full-height hero make it do. Phones pay that cost on a much
   smaller GPU, so on a coarse pointer we keep the colour and drop the blur.
   The pointer-driven parallax is switched off in js/main.js for the same
   reason — there is no pointer to follow on a touchscreen.
   ========================================================================== */
@media (hover:none), (pointer:coarse), (max-width:900px){
  /* Repainted on every scroll frame while the header is stuck. */
  .hdr, .hdr.is-stuck{backdrop-filter:none;-webkit-backdrop-filter:none}
  .hdr.is-stuck{background:rgba(7,42,52,.96)}
  .nav__links{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--navy-900)}
  .core__badge{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(7,42,52,.94)}

  /* A blurred 58vw square composited behind the whole hero. The hero's own
     radial-gradient background already carries the same glow. */
  .hero__glow{display:none}

  /* Two large drop-shadows around an SVG that animates continuously. */
  .core svg, .core.is-near svg{filter:none}
  .core svg{will-change:auto}

  /* No parallax on touch, so the watermark never needs its own layer. */
  .hexbg::after{will-change:auto;transition:none}
}