/* =========================================================================
   ICED CORNER — HVAC & Electromechanical
   Design system: "Cold Room"
   Palette derived from the company profile's brand blues, pushed onto a
   cold graphite base rather than pure black.
   ========================================================================= */

:root{
  /* Surfaces */
  --ink:        #0A1822;
  --ink-2:      #0E2130;
  --steel:      #14303F;
  --steel-2:    #1A3B4D;
  --line:       #1E4356;
  --line-soft:  rgba(184,228,245,.10);

  /* Type */
  --frost:      #EAF3F8;
  --muted:      #8BA7B8;
  --dim:        #5F7E90;

  /* Brand */
  --cyan:       #2BB0E6;
  --deep:       #0F5FA8;
  --rime:       #B8E4F5;

  /* Type scale */
  --display:  'Archivo', 'Archivo Expanded', 'Helvetica Neue', Arial, sans-serif;
  --body:     'IBM Plex Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --mono:     'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --arabic:   'Cairo', 'Tajawal', 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;

  /* Rhythm */
  --gutter: clamp(1.25rem, 4vw, 4.5rem);
  --maxw: 1440px;
  --rail: 84px;

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

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--ink);
  color:var(--frost);
  font-family:var(--body);
  font-size:clamp(.95rem, .35vw + .85rem, 1.0625rem);
  line-height:1.68;
  font-weight:350;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Guard rail against sideways drift, and it has to sit *after* the body rule
   above or that `hidden` wins on source order.

   `clip` rather than `hidden` on purpose. `overflow-x:hidden` on body only
   propagates to the viewport while html is `visible`; the moment html stops
   being visible, body becomes a real scroll container, and the two
   position:sticky columns (.scope__pin, .hpin__vp) stick to a scrollport that
   never moves. `clip` clips without creating a scroll container, so sticky
   survives. Browsers with no `clip` support keep the body-only `hidden`, which
   is the behaviour this file always had. */
@supports (overflow:clip){
  html,body{ overflow-x:clip; }
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }

::selection{ background:var(--cyan); color:#04121B; }

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

/* ---------- Type primitives ---------- */

.display{
  font-family:var(--display);
  hyphens:none;
  overflow-wrap:normal;
  font-weight:700;
  line-height:.95;
  letter-spacing:-.03em;
  margin:0;
  text-wrap:balance;
}
.d-xl{ font-size:clamp(2.75rem, 8.5vw, 8rem); }
.d-lg{ font-size:clamp(2.1rem, 5.4vw, 4.5rem); }
.d-md{ font-size:clamp(1.6rem, 3.1vw, 2.6rem); letter-spacing:-.02em; }
.d-sm{ font-size:clamp(1.15rem, 1.5vw, 1.4rem); letter-spacing:-.01em; line-height:1.2; }

.eyebrow{
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--cyan);
  margin:0 0 1.4rem;
  display:flex;
  align-items:center;
  gap:.75rem;
  font-weight:450;
}
.eyebrow::before{
  content:"";
  width:26px; height:1px;
  background:var(--cyan);
  flex:none;
}
.eyebrow--plain::before{ display:none; }

.lede{
  font-size:clamp(1.05rem, .6vw + .95rem, 1.35rem);
  line-height:1.6;
  color:var(--rime);
  font-weight:300;
  max-width:60ch;
}

.muted{ color:var(--muted); }
.mono{ font-family:var(--mono); font-size:.78rem; letter-spacing:.06em; }
.ar{ font-family:var(--arabic); direction:rtl; text-align:right; line-height:1.95; }

/* ---------- Layout ---------- */

.shell{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.section{
  position:relative;
  padding-block:clamp(4.5rem, 11vh, 9rem);
}
.section--tight{ padding-block:clamp(3rem, 7vh, 5rem); }
.section--flush{ padding-block:0; }
.section--panel{ background:var(--ink-2); }

.rule{
  height:1px;
  background:var(--line-soft);
  border:0;
  margin:0;
}

.grid{ display:grid; gap:clamp(1.5rem, 3vw, 3rem); }
.g-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.g-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.g-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.g-split{ grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); align-items:start; }

@media (max-width:1024px){
  .g-4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .g-3{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .g-split{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .g-2,.g-3,.g-4{ grid-template-columns:1fr; }
}

/* =========================================================================
   Brand mark — hex lattice, drawn from the company snowflake
   ========================================================================= */

.mark{ width:34px; height:34px; flex:none; overflow:visible; }
.mark path, .mark polygon{ fill:currentColor; }

.wordmark{
  display:flex; align-items:center; gap:.7rem;
  color:var(--frost);
}
.wordmark__text{ display:flex; flex-direction:column; line-height:1; }
.wordmark__en{
  font-family:var(--display);
  font-weight:700;
  font-size:.95rem;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.wordmark__sub{
  font-family:var(--mono);
  font-size:.53rem;
  letter-spacing:.2em;
  color:var(--dim);
  text-transform:uppercase;
  margin-top:.28rem;
}

/* =========================================================================
   Navigation
   ========================================================================= */

.nav{
  position:fixed; inset:0 0 auto 0;
  z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem;
  padding:1.15rem var(--gutter);
  transition:background .45s var(--ease), padding .45s var(--ease),
             border-color .45s var(--ease), backdrop-filter .45s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(10,24,34,.86);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--line-soft);
  padding-block:.7rem;
}

.nav__links{
  display:flex; align-items:center; gap:clamp(1rem,2.2vw,2.2rem);
  list-style:none; margin:0; padding:0;
}
.nav__link{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  position:relative;
  padding-block:.3rem;
  transition:color .3s var(--ease);
}
.nav__link::after{
  content:"";
  position:absolute; inset-inline-start:0; bottom:0;
  width:100%; height:1px;
  background:var(--cyan);
  transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease);
}
.nav__link:hover{ color:var(--frost); }
.nav__link:hover::after{ transform:scaleX(1); }
.nav__link.is-current{ color:var(--frost); }
.nav__link.is-current::after{ transform:scaleX(1); }

.nav__end{ display:flex; align-items:center; gap:1rem; }

.burger{
  display:none;
  width:44px; height:44px;
  background:none; border:1px solid var(--line);
  border-radius:2px;
  cursor:pointer;
  position:relative;
}
.burger span{
  position:absolute; left:12px; right:12px; height:1.5px;
  background:var(--frost);
  transition:transform .4s var(--ease), opacity .25s var(--ease);
}
.burger span:nth-child(1){ top:16px; }
.burger span:nth-child(2){ bottom:16px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ transform:translateY(-5.5px) rotate(-45deg); }

.drawer{
  position:fixed; inset:0;
  z-index:55;
  background:var(--ink);
  padding:6rem var(--gutter) 3rem;
  display:flex; flex-direction:column; gap:.25rem;
  clip-path:inset(0 0 100% 0);
  visibility:hidden;
  transition:clip-path .7s var(--ease-out), visibility .7s;
  overflow-y:auto;
}
.drawer.is-open{ clip-path:inset(0 0 0 0); visibility:visible; }
.drawer a{
  font-family:var(--display);
  font-size:clamp(1.75rem,7vw,2.75rem);
  font-weight:700;
  letter-spacing:-.02em;
  padding-block:.5rem;
  border-bottom:1px solid var(--line-soft);
  color:var(--muted);
  /* the hover moves padding-inline-start, so the transition has to name the
     logical property — padding-left never animates in the RTL build */
  transition:color .3s var(--ease), padding-inline-start .35s var(--ease-out);
}
.drawer a:hover,.drawer a:focus-visible{ color:var(--frost); padding-inline-start:.5rem; }
.drawer__meta{ margin-top:auto; padding-top:2.5rem; color:var(--dim); }

@media (max-width:900px){
  .nav__links{ display:none; }
  .burger{ display:block; }
}

/* =========================================================================
   Buttons
   ========================================================================= */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.65rem;
  font-family:var(--mono);
  font-size:.78rem;
  line-height:1.25;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:1rem 1.65rem;
  min-height:50px;
  border:1px solid var(--cyan);
  border-radius:2px;
  background:none;
  color:var(--frost);
  cursor:pointer;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  transition:color .35s var(--ease), border-color .35s var(--ease);
}
.btn::before{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background:var(--cyan);
  transform:translateY(101%);
  transition:transform .5s var(--ease-out);
}
.btn:hover{ color:#04121B; }
.btn:hover::before{ transform:translateY(0); }
.btn__arrow{ transition:transform .4s var(--ease); }
.btn:hover .btn__arrow{ transform:translateX(4px); }

.btn--solid{ background:var(--cyan); color:#04121B; border-color:var(--cyan); }
.btn--solid::before{ background:var(--frost); }
.btn--solid:hover{ color:#04121B; border-color:var(--frost); }

.btn--ghost{ border-color:var(--line); }
.btn--ghost::before{ background:var(--steel-2); }
.btn--ghost:hover{ color:var(--frost); border-color:var(--steel-2); }

.btn--sm{ padding:.72rem 1.15rem; font-size:.72rem; min-height:44px; }

@media (max-width:900px){ .nav .btn{ display:none; } }

/* =========================================================================
   SIGNATURE 1 — Duct-run rail (scroll progress)
   A vertical run with flanged joints at each section, the way a duct
   run threads a building. Fills as you descend.
   ========================================================================= */

.rail{
  position:fixed;
  inset-inline-start:0;
  top:0; bottom:0;
  width:var(--gutter);
  z-index:40;
  pointer-events:none;
  display:flex; align-items:center;
}
.rail__track{
  position:relative;
  width:2px;
  height:52vh;
  margin-inline:auto;
  background:var(--line);
}
.rail__fill{
  position:absolute; inset:0 0 auto 0;
  width:100%; height:0%;
  background:linear-gradient(180deg,var(--cyan),var(--rime));
  box-shadow:0 0 14px rgba(43,176,230,.55);
}
.rail__flange{
  position:absolute; left:50%;
  width:11px; height:2px;
  background:var(--line);
  transform:translateX(-50%);
  transition:background .4s var(--ease), width .4s var(--ease);
}
.rail__flange.is-passed{ background:var(--cyan); width:17px; }

.rail__label{
  position:absolute;
  left:50%; bottom:-4.5rem;
  transform:translateX(-50%) rotate(-90deg);
  transform-origin:center;
  font-family:var(--mono);
  font-size:.6rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--dim);
  white-space:nowrap;
}

@media (max-width:1180px){ .rail{ display:none; } }

/* =========================================================================
   SIGNATURE 2 — Hex frost field (hero canvas)
   Lattice geometry taken from the company's snowflake mark. Cells rime
   over as the pointer nears them, and the field cools as you scroll.
   ========================================================================= */

.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:flex-end;
  overflow:hidden;
  padding-block:clamp(7rem,16vh,10rem) clamp(5.5rem,10vh,7rem);
  isolation:isolate;
}
.hero__media{
  position:absolute; inset:0; z-index:-3;
  overflow:hidden;
}
.hero__media img{
  width:100%; height:120%;
  object-fit:cover;
  object-position:center 30%;
  filter:grayscale(.35) contrast(1.06) brightness(.62) saturate(.85);
  will-change:transform;
}
.hero__scrim{
  position:absolute; inset:0; z-index:-2;
  background:
    linear-gradient(180deg, rgba(10,24,34,.92) 0%, rgba(10,24,34,.55) 34%, rgba(10,24,34,.97) 92%),
    radial-gradient(120% 80% at 78% 18%, rgba(15,95,168,.34), transparent 62%);
}
.hero__lattice{
  position:absolute; inset:0; z-index:-1;
  width:100%; height:100%;
  opacity:.9;
}
.hero__inner{ position:relative; width:100%; }

.hero h1{ margin-bottom:1.6rem; }

/* per-character reveal */
.split{ display:inline-block; }
.js .split .ch{
  display:inline-block;
  white-space:nowrap;
  transform:translateY(1.05em) rotate(3deg);
  opacity:0;
  transition:transform 1s var(--ease-out), opacity .8s var(--ease-out);
}
.split .ch--space{ width:.28em; }
.is-lit .split .ch{ transform:none; opacity:1; }

/* RTL headings animate as one block — see splitHeadings() in main.js */
.js .split-block{
  opacity:0;
  transform:translateY(.35em);
  transition:opacity .9s var(--ease-out), transform 1.1s var(--ease-out);
}
.is-lit .split-block{ opacity:1; transform:none; }

.hero__row{
  display:flex; flex-wrap:wrap; align-items:flex-end;
  justify-content:space-between; gap:2.5rem;
  margin-top:clamp(2rem,5vh,3.5rem);
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:.75rem; }

.hero__spec{
  display:grid;
  grid-template-columns:repeat(2,auto);
  gap:.35rem 2.25rem;
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.1em;
  color:var(--muted);
}
.hero__spec dt{ color:var(--dim); text-transform:uppercase; font-size:.62rem; letter-spacing:.2em; }
.hero__spec dd{ margin:0; color:var(--rime); }

.scrollcue{
  position:absolute;
  left:50%; transform:translateX(-50%);
  bottom:clamp(2.5rem,6vh,4rem);
  white-space:nowrap;
  display:flex; flex-direction:column; align-items:center; gap:.7rem;
  font-family:var(--mono); font-size:.58rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--dim);
}
.scrollcue__line{
  width:1px; height:56px;
  background:linear-gradient(180deg,var(--cyan),transparent);
  position:relative; overflow:hidden;
}
.scrollcue__line::after{
  content:""; position:absolute; left:0; top:-100%;
  width:100%; height:100%;
  background:var(--rime);
  animation:drip 2.4s var(--ease) infinite;
}
@keyframes drip{ 0%{top:-100%} 60%,100%{top:100%} }
@media (max-width:900px){ .scrollcue{ display:none; } }

/* =========================================================================
   Marquee — standards strip
   ========================================================================= */

.marquee{
  border-block:1px solid var(--line-soft);
  background:var(--ink-2);
  padding-block:1.15rem;
  overflow:hidden;
  display:flex;
  user-select:none;
}
.marquee__track{
  display:flex; flex:none; gap:3.5rem;
  padding-inline-end:3.5rem;
  animation:slide 34s linear infinite;
}
.marquee__item{
  display:flex; align-items:center; gap:3.5rem;
  font-family:var(--mono);
  font-size:.76rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
  white-space:nowrap;
}
.marquee__item::after{
  content:""; width:5px; height:5px;
  background:var(--cyan);
  transform:rotate(45deg);
  flex:none;
}
@keyframes slide{ to{ transform:translateX(-100%); } }
.marquee:hover .marquee__track{ animation-play-state:paused; }

/* =========================================================================
   Reveal on scroll
   ========================================================================= */

.js .reveal{
  opacity:0;
  transform:translateY(34px);
  transition:opacity .9s var(--ease-out), transform 1.1s var(--ease-out);
}
.reveal.is-in{ opacity:1; transform:none; }
.reveal[data-delay="1"]{ transition-delay:.09s; }
.reveal[data-delay="2"]{ transition-delay:.18s; }
.reveal[data-delay="3"]{ transition-delay:.27s; }
.reveal[data-delay="4"]{ transition-delay:.36s; }
.reveal[data-delay="5"]{ transition-delay:.45s; }

/* frost wipe for imagery */
.frostwipe{ overflow:hidden; }
.js .frostwipe img{
  transform:scale(1.16);
  filter:blur(9px) brightness(.7);
  transition:transform 1.5s var(--ease-out), filter 1.3s var(--ease-out);
}
.frostwipe.is-in img{ transform:scale(1); filter:none; }

/* =========================================================================
   Section headers
   ========================================================================= */

.shead{
  display:flex; flex-wrap:wrap; align-items:flex-end;
  justify-content:space-between; gap:1.75rem;
  padding-bottom:clamp(2rem,4.5vh,3.25rem);
  margin-bottom:clamp(2rem,4.5vh,3.25rem);
  border-bottom:1px solid var(--line-soft);
}
.shead__index{
  font-family:var(--mono);
  font-size:.68rem; letter-spacing:.24em;
  color:var(--dim);
}
.shead__lede{ max-width:44ch; color:var(--muted); margin:0; }

/* =========================================================================
   Figures / media
   ========================================================================= */

.fig{
  position:relative;
  background:var(--ink-2);
  border:1px solid var(--line-soft);
  overflow:hidden;
}
.fig img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform 1.1s var(--ease-out), filter .6s var(--ease);
}
.fig--4x3{ aspect-ratio:4/3; }
.fig--3x2{ aspect-ratio:3/2; }
.fig--1x1{ aspect-ratio:1/1; }
.fig--tall{ aspect-ratio:3/4; }
.fig__cap{
  position:absolute; inset:auto 0 0 0;
  padding:.85rem 1rem;
  background:linear-gradient(0deg,rgba(10,24,34,.94),transparent);
  font-family:var(--mono); font-size:.63rem;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--rime);
}
.parallax{ will-change:transform; }

/* Parallax frame: image is oversized so travel never exposes an edge. */
.fig--px{ position:relative; overflow:hidden; }
.fig--px img{
  position:absolute;
  inset:-16% 0 auto 0;
  width:100%; height:132%;
  object-fit:cover;
  will-change:transform;
}

/* =========================================================================
   Scope — sticky pinned column
   ========================================================================= */

.scope{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:clamp(2rem,5vw,5rem); align-items:start; }
.scope__pin{ position:sticky; top:clamp(6rem,14vh,9rem); }
.scope__viz{
  position:relative;
  aspect-ratio:4/5;
  max-height:72vh;
  border:1px solid var(--line-soft);
  background:var(--ink-2);
  overflow:hidden;
}
.js .scope__viz img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:0;
  transform:scale(1.08);
  filter:grayscale(.25) brightness(.85);
  transition:opacity .8s var(--ease), transform 1.4s var(--ease-out);
}
.scope__viz img.is-active{ opacity:1; transform:scale(1); }
.scope__count{
  position:absolute; inset-inline-start:1.1rem; bottom:1rem;
  font-family:var(--mono); font-size:.66rem;
  letter-spacing:.2em; color:var(--rime);
  background:rgba(10,24,34,.8);
  padding:.4rem .7rem;
  border:1px solid var(--line-soft);
}

.scope__list{ list-style:none; margin:0; padding:0; }
.scope__item{
  border-top:1px solid var(--line-soft);
  padding-block:clamp(1.6rem,3.5vh,2.4rem);
}
.scope__item:last-child{ border-bottom:1px solid var(--line-soft); }
.scope__item h3{
  font-family:var(--display);
  font-size:clamp(1.3rem,2.4vw,1.95rem);
  font-weight:700; letter-spacing:-.02em;
  margin:.5rem 0 .7rem;
  color:var(--dim);
  transition:color .5s var(--ease);
}
.scope__item.is-active h3{ color:var(--frost); }
.scope__item p{ margin:0; color:var(--muted); max-width:50ch; }
.scope__no{
  font-family:var(--mono); font-size:.64rem;
  letter-spacing:.22em; color:var(--dim);
}
.scope__item.is-active .scope__no{ color:var(--cyan); }

@media (max-width:960px){
  .scope{ grid-template-columns:1fr; }
  .scope__pin{ position:relative; top:auto; }
  .scope__viz{ aspect-ratio:16/10; }
}

/* =========================================================================
   Horizontal project rail (scroll-driven)
   ========================================================================= */

.hpin{ position:relative; }
.hpin__vp{
  position:sticky; top:0;
  height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  gap:clamp(1rem,2.5vh,2rem);
  padding-block:clamp(5.5rem,13vh,7.5rem) clamp(2.5rem,6vh,4rem);
  overflow:hidden;
}
.hpin__track{
  flex:none;
  display:flex; gap:clamp(1rem,2vw,1.75rem);
  padding-inline:var(--gutter);
  will-change:transform;
}
.hcard{
  flex:none;
  width:clamp(200px,21vw,290px);
}
.hcard__fig{
  position:relative;
  aspect-ratio:4/5;
  max-height:50vh;
  overflow:hidden;
  border:1px solid var(--line-soft);
  background:var(--ink-2);
}
.hcard__fig img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(.4) brightness(.82);
  transition:filter .6s var(--ease), transform 1s var(--ease-out);
}
.hcard:hover .hcard__fig img{ filter:none; transform:scale(1.05); }
.hcard__meta{
  display:flex; justify-content:space-between; gap:1rem;
  padding-top:.85rem;
  font-family:var(--mono); font-size:.64rem;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--dim);
  border-top:1px solid var(--line-soft);
  margin-top:.85rem;
}
.hcard__meta strong{ color:var(--frost); font-weight:450; }

.hpin__head{
  flex:none;
  padding-inline:var(--gutter);
  pointer-events:none;
}
.hpin__bar{
  flex:none;
  margin-inline:var(--gutter);
  width:min(320px,40vw); height:1px;
  background:var(--line);
}
.hpin__bar i{
  display:block; height:100%; width:0%;
  background:var(--cyan);
}
@media (max-width:900px){
  .hpin{ height:auto !important; }
  .hpin__vp{
    position:relative; height:auto;
    display:block; overflow:visible;
    padding-block:1.5rem;
  }
  .hpin__head{ padding-inline:var(--gutter); margin-bottom:1.25rem; }
  .hpin__track{
    transform:none !important;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .hpin__track::-webkit-scrollbar{ display:none; }
  .hcard{ scroll-snap-align:center; width:72vw; }
  .hcard__fig{ max-height:none; }
  .hpin__bar{ display:none; }
}

/* =========================================================================
   Cards / tiles
   ========================================================================= */

.card{
  position:relative;
  padding:clamp(1.5rem,2.4vw,2.1rem);
  background:var(--ink-2);
  border:1px solid var(--line-soft);
  transition:border-color .5s var(--ease), background .5s var(--ease), transform .6s var(--ease-out);
  height:100%;
}
.card:hover{ border-color:rgba(43,176,230,.45); background:var(--steel); transform:translateY(-4px); }
.card h3{
  font-family:var(--display); font-weight:700;
  font-size:1.15rem; letter-spacing:-.01em;
  margin:.9rem 0 .6rem;
}
.card p{ margin:0; color:var(--muted); font-size:.95rem; }
.card__icon{
  width:38px; height:38px;
  color:var(--cyan);
}
.card__no{
  position:absolute; top:1.2rem; inset-inline-end:1.3rem;
  font-family:var(--mono); font-size:.64rem;
  letter-spacing:.18em; color:var(--dim);
}

.checks{ list-style:none; margin:0; padding:0; display:grid; gap:.85rem; }
.checks li{
  display:grid; grid-template-columns:auto 1fr; gap:.85rem;
  align-items:start;
  color:var(--muted);
}
.checks li::before{
  content:"";
  width:6px; height:6px; margin-top:.62em;
  background:var(--cyan);
  transform:rotate(45deg);
  flex:none;
}

.speclist{
  list-style:none; margin:0; padding:0;
  font-family:var(--mono); font-size:.76rem;
  letter-spacing:.05em;
  columns:2; column-gap:2.5rem;
}
.speclist li{
  padding-block:.6rem;
  border-bottom:1px solid var(--line-soft);
  color:var(--muted);
  break-inside:avoid;
}
.speclist li span{ color:var(--dim); margin-inline-end:.6rem; }
@media (max-width:640px){ .speclist{ columns:1; } }

/* ---------- Stats ---------- */

.stats{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;
  background:var(--line-soft);
  border:1px solid var(--line-soft);
}
.stat{ background:var(--ink); padding:clamp(1.5rem,3vw,2.4rem); }
.stat__n{
  font-family:var(--display);
  font-size:clamp(2.4rem,5.5vw,4rem);
  font-weight:700; line-height:1;
  letter-spacing:-.04em;
  color:var(--frost);
}
.stat__l{
  font-family:var(--mono); font-size:.66rem;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--dim); margin-top:.9rem;
}
@media (max-width:768px){ .stats{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* ---------- Pull quote ---------- */

.pull{
  border-inline-start:2px solid var(--cyan);
  padding:clamp(1.5rem,3vw,2.5rem) 0 clamp(1.5rem,3vw,2.5rem) clamp(1.5rem,3vw,2.5rem);
}
.pull blockquote{
  margin:0;
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(1.4rem,3.4vw,2.5rem);
  line-height:1.14;
  letter-spacing:-.025em;
}
.pull blockquote em{ color:var(--cyan); font-style:normal; }
.pull figcaption{
  margin-top:1.4rem;
  font-family:var(--mono); font-size:.66rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--dim);
}

/* =========================================================================
   Client roster
   ========================================================================= */

.roster{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:1px;
  background:var(--line-soft);
  border:1px solid var(--line-soft);
}
.roster div{
  background:var(--ink);
  padding:1.35rem 1.15rem;
  font-family:var(--mono); font-size:.72rem;
  letter-spacing:.08em;
  color:var(--muted);
  display:flex; align-items:center;
  min-height:74px;
  transition:background .4s var(--ease), color .4s var(--ease);
}
.roster div:hover{ background:var(--steel); color:var(--frost); }

/* =========================================================================
   Certificates
   ========================================================================= */

.certs{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1.25rem,2.5vw,2rem); }
@media (max-width:900px){ .certs{ grid-template-columns:1fr; } }

.cert{
  border:1px solid var(--line-soft);
  background:var(--ink-2);
  padding:1.1rem;
  display:flex; flex-direction:column; gap:1.1rem;
  transition:border-color .5s var(--ease);
}
.cert:hover{ border-color:rgba(43,176,230,.45); }
.cert__doc{
  position:relative;
  aspect-ratio:3/4;
  overflow:hidden;
  background:#fff;
  padding:2px;
  border:1px solid var(--line-soft);
  cursor:zoom-in;
}
.cert__doc img{
  width:100%; height:100%; object-fit:contain; object-position:center;
  transition:transform 1s var(--ease-out);
}
.cert__doc:hover img{ transform:scale(1.04); }
.cert__zoom{
  position:absolute; inset-inline-end:.6rem; bottom:.6rem;
  font-family:var(--mono); font-size:.58rem;
  letter-spacing:.16em; text-transform:uppercase;
  background:rgba(10,24,34,.9);
  color:var(--rime);
  padding:.35rem .6rem;
  border:1px solid var(--line-soft);
}
.cert__std{
  font-family:var(--display); font-weight:700;
  font-size:1.3rem; letter-spacing:-.01em;
}
.cert__body{ display:flex; flex-direction:column; gap:.55rem; }
.cert__meta{
  font-family:var(--mono); font-size:.66rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--cyan);
}
.cert p{ margin:0; color:var(--muted); font-size:.92rem; }

.lightbox{
  position:fixed; inset:0; z-index:90;
  background:rgba(4,12,18,.95);
  backdrop-filter:blur(8px);
  display:grid; place-items:center;
  padding:clamp(1rem,4vw,3rem);
  opacity:0; visibility:hidden;
  transition:opacity .45s var(--ease), visibility .45s;
}
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox img{
  max-width:100%; max-height:86vh;
  object-fit:contain;
  border:1px solid var(--line-soft);
  transform:scale(.96);
  transition:transform .55s var(--ease-out);
}
.lightbox.is-open img{ transform:scale(1); }
.lightbox__close{
  position:absolute; top:clamp(1rem,3vw,2rem); inset-inline-end:clamp(1rem,3vw,2rem);
  width:46px; height:46px;
  background:none; border:1px solid var(--line);
  color:var(--frost); cursor:pointer; border-radius:2px;
  font-family:var(--mono); font-size:1rem;
}
.lightbox__cap{
  position:absolute; left:0; right:0; bottom:clamp(1rem,3vw,2rem);
  text-align:center;
  font-family:var(--mono); font-size:.66rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
}

/* =========================================================================
   Gallery grid (projects page)
   ========================================================================= */

.gal{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(.5rem,1.2vw,1rem);
}
.gal__cell{
  position:relative;
  aspect-ratio:1/1;
  overflow:hidden;
  border:1px solid var(--line-soft);
  background:var(--ink-2);
  cursor:zoom-in;
}
.gal__cell img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(.35) brightness(.84);
  transition:filter .55s var(--ease), transform 1.1s var(--ease-out);
}
.gal__cell:hover img{ filter:none; transform:scale(1.06); }
.gal__cell--wide{ grid-column:span 2; aspect-ratio:2/1; }
.gal__cell--tall{ grid-row:span 2; aspect-ratio:1/2; }
.gal__tag{
  position:absolute; inset-inline-start:0; bottom:0;
  padding:.55rem .8rem;
  font-family:var(--mono); font-size:.58rem;
  letter-spacing:.16em; text-transform:uppercase;
  background:rgba(10,24,34,.86);
  color:var(--rime);
  transform:translateY(101%);
  transition:transform .45s var(--ease-out);
}
.gal__cell:hover .gal__tag{ transform:none; }
@media (max-width:900px){ .gal{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* =========================================================================
   Page hero (interior pages)
   ========================================================================= */

.phero{
  position:relative;
  padding-block:clamp(9rem,22vh,14rem) clamp(3.5rem,8vh,5.5rem);
  border-bottom:1px solid var(--line-soft);
  overflow:hidden;
}
.phero::after{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background:radial-gradient(90% 130% at 88% -10%, rgba(15,95,168,.3), transparent 60%);
}
.phero__crumb{
  font-family:var(--mono); font-size:.66rem;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--dim); margin-bottom:1.5rem;
}
.phero__crumb a:hover{ color:var(--cyan); }

/* =========================================================================
   Contact
   ========================================================================= */

.field{ display:flex; flex-direction:column; gap:.55rem; margin-bottom:1.4rem; }
.field label{
  font-family:var(--mono); font-size:.64rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--dim);
}
.field input,.field textarea,.field select{
  background:var(--ink-2);
  border:1px solid var(--line);
  border-radius:2px;
  color:var(--frost);
  padding:.9rem 1rem;
  font-family:var(--body); font-size:.95rem;
  transition:border-color .35s var(--ease), background .35s var(--ease);
  width:100%;
}
.field textarea{ resize:vertical; min-height:140px; }
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none; border-color:var(--cyan); background:var(--steel);
}
.field__err{
  font-family:var(--mono); font-size:.64rem;
  letter-spacing:.1em; color:#FF8A7A;
  min-height:1em;
}
.field.is-bad input,.field.is-bad textarea{ border-color:#FF8A7A; }

.formnote{
  font-family:var(--mono); font-size:.64rem;
  letter-spacing:.1em; color:var(--dim);
  margin-top:1rem; line-height:1.8;
}
.formdone{
  border:1px solid var(--cyan);
  background:rgba(43,176,230,.09);
  padding:1.25rem 1.4rem;
  display:none;
  margin-bottom:1.5rem;
}
.formdone.is-on{ display:block; }

.contactlist{ list-style:none; margin:0; padding:0; }
.contactlist li{
  display:grid; grid-template-columns:auto 1fr; gap:1.1rem;
  padding-block:1.25rem;
  border-bottom:1px solid var(--line-soft);
  align-items:start;
}
.contactlist svg{ width:20px; height:20px; color:var(--cyan); margin-top:.3rem; flex:none; }
.contactlist .cl__k{
  font-family:var(--mono); font-size:.62rem;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--dim); margin-bottom:.35rem;
}
.contactlist .cl__v{ margin:0; font-size:1.02rem; }
.contactlist a:hover{ color:var(--cyan); }

/* =========================================================================
   CTA band + footer
   ========================================================================= */

.cta{
  position:relative;
  padding-block:clamp(4.5rem,12vh,8rem);
  border-top:1px solid var(--line-soft);
  overflow:hidden;
  text-align:center;
}
.cta::after{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background:radial-gradient(70% 120% at 50% 120%, rgba(15,95,168,.4), transparent 65%);
}

.foot{
  border-top:1px solid var(--line-soft);
  background:var(--ink-2);
  padding-block:clamp(3rem,7vh,4.5rem) 2rem;
}
.foot__grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1.2fr;
  gap:clamp(1.75rem,4vw,3.5rem);
  padding-bottom:3rem;
}
@media (max-width:900px){ .foot__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .foot__grid{ grid-template-columns:1fr; } }

.foot h4{
  font-family:var(--mono); font-size:.62rem;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--dim); margin:0 0 1.2rem; font-weight:450;
}
.foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:.7rem; }
.foot a{ color:var(--muted); transition:color .3s var(--ease); }
.foot a:hover{ color:var(--cyan); }
.foot__bar{
  border-top:1px solid var(--line-soft);
  padding-top:1.75rem;
  display:flex; flex-wrap:wrap; gap:1rem;
  justify-content:space-between;
  font-family:var(--mono); font-size:.62rem;
  letter-spacing:.14em; color:var(--dim);
}

/* =========================================================================
   Custom cursor (fine pointers only)
   ========================================================================= */

.cursor{
  position:fixed; top:0; left:0;
  width:28px; height:28px;
  margin:-14px 0 0 -14px;
  border:1px solid var(--cyan);
  border-radius:50%;
  pointer-events:none;
  z-index:100;
  transition:transform .22s var(--ease), opacity .3s, background .3s;
  display:none;
}
.cursor.is-hot{ transform:scale(1.9); background:rgba(43,176,230,.14); }
@media (hover:hover) and (pointer:fine){
  .cursor{ display:block; }
}

/* =========================================================================
   Accessibility
   ========================================================================= */

/* The skip link must never be parked with a large negative offset.
   In an RTL document that offset counts as real scrollable overflow, which
   widens the scroll area by ~10,000px, pins the layout at a horizontal scroll
   position the user cannot undo (the viewport inherits overflow-x from body),
   and leaves the fixed header floating over an empty page. Park it with a
   transform instead: transforms never contribute to scrollable overflow. */
.skip{
  position:fixed;
  inset-block-start:1rem;
  inset-inline-start:1rem;
  z-index:200;
  background:var(--cyan); color:#04121B;
  padding:.8rem 1.2rem;
  font-family:var(--mono); font-size:.72rem;
  transform:translateY(-260%);
  transition:transform .3s var(--ease-out);
}
.skip:focus{ transform:none; }

.sr{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1 !important; transform:none !important; }
  .split .ch{ opacity:1 !important; transform:none !important; }
  .frostwipe img{ filter:none !important; transform:none !important; }
  .hpin__vp{ position:relative; height:auto; display:block; overflow:visible; }
  .hpin__track{ overflow-x:auto; }
  .hpin{ height:auto !important; }
  .hpin__track{ transform:none !important; }
  .cursor{ display:none !important; }
  .hero__lattice{ display:none; }
}

/* =========================================================================
   Brand mark — hover / focus
   The mark is a hexagonal snowflake, so a 60° turn maps it onto itself:
   it reads as the crystal settling rather than as an arbitrary spin.
   ========================================================================= */

.wordmark{ position:relative; }
.wordmark__mark{
  position:relative;
  width:38px; height:38px;
  flex:none;
  display:grid; place-items:center;
}
.wordmark__mark img{
  width:38px; height:38px;
  transition:transform .85s var(--ease-out), filter .5s var(--ease);
}
/* frost bloom */
.wordmark__mark::before{
  content:"";
  position:absolute; inset:-9px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(43,176,230,.38), transparent 68%);
  opacity:0; transform:scale(.55);
  transition:opacity .5s var(--ease), transform .65s var(--ease-out);
}
/* hex halo, clipped to a hexagon rather than a circle */
.wordmark__mark::after{
  content:"";
  position:absolute; inset:-7px;
  border:1px solid rgba(43,176,230,.55);
  clip-path:polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  opacity:0; transform:rotate(0deg) scale(.82);
  transition:opacity .45s var(--ease), transform .9s var(--ease-out);
}
.wordmark__en,.wordmark__sub{
  transition:color .4s var(--ease), letter-spacing .55s var(--ease);
}
.wordmark__sub--latin{ direction:ltr; }

.wordmark:hover .wordmark__mark img,
.wordmark:focus-visible .wordmark__mark img{
  transform:rotate(60deg) scale(1.06);
  filter:drop-shadow(0 0 11px rgba(43,176,230,.8));
}
.wordmark:hover .wordmark__mark::before,
.wordmark:focus-visible .wordmark__mark::before{ opacity:1; transform:scale(1); }
.wordmark:hover .wordmark__mark::after,
.wordmark:focus-visible .wordmark__mark::after{ opacity:1; transform:rotate(30deg) scale(1); }
.wordmark:hover .wordmark__en,
.wordmark:focus-visible .wordmark__en{ color:var(--rime); }
.wordmark:hover .wordmark__sub,
.wordmark:focus-visible .wordmark__sub{ color:var(--cyan); letter-spacing:.26em; }

/* =========================================================================
   Language switcher
   ========================================================================= */

.langsw{
  display:inline-flex; align-items:center;
  direction:ltr;
  font-family:var(--mono);
  font-size:.68rem; letter-spacing:.14em;
  padding:.55rem .75rem;
  border:1px solid var(--line);
  border-radius:2px;
  color:var(--dim);
  transition:color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.langsw span{ color:var(--frost); }
.langsw span::after{ content:"/"; margin:0 .42rem; color:var(--line); }
.langsw:hover{ color:var(--frost); border-color:var(--cyan); background:var(--steel); }
@media (max-width:900px){ .langsw{ margin-inline-start:auto; } }

/* =========================================================================
   Right-to-left
   Arabic is the default language, so these are load-bearing, not a bolt-on.
   Two rules matter most: letter-spacing must be neutralised (tracking
   mangles Arabic joining), and the display face has no Arabic coverage, so
   headings fall back to IBM Plex Sans Arabic with a looser leading.
   ========================================================================= */

[dir="rtl"] body{ font-family:var(--arabic); line-height:1.85; }

[dir="rtl"] body, [dir="rtl"] body *{ letter-spacing:0; }

[dir="rtl"] .display{
  font-family:var(--arabic);
  font-weight:700;
  line-height:1.3;
}
[dir="rtl"] .d-xl{ font-size:clamp(2.3rem, 7vw, 6rem); }
[dir="rtl"] .d-lg{ font-size:clamp(1.9rem, 4.6vw, 3.6rem); }
[dir="rtl"] .d-md{ font-size:clamp(1.5rem, 2.8vw, 2.3rem); }

[dir="rtl"] .eyebrow,
[dir="rtl"] .nav__link,
[dir="rtl"] .btn,
[dir="rtl"] .stat__l,
[dir="rtl"] .shead__index,
[dir="rtl"] .foot h4,
[dir="rtl"] .field label,
[dir="rtl"] .cl__k,
[dir="rtl"] .cert__meta,
[dir="rtl"] .hcard__meta,
[dir="rtl"] .gal__tag,
[dir="rtl"] .fig__cap,
[dir="rtl"] .scope__no,
[dir="rtl"] .roster div,
[dir="rtl"] .speclist,
[dir="rtl"] .formnote,
[dir="rtl"] .phero__crumb,
[dir="rtl"] .lightbox__cap,
[dir="rtl"] .drawer__meta,
[dir="rtl"] .foot__bar,
[dir="rtl"] .scrollcue,
[dir="rtl"] .hero__spec,
[dir="rtl"] .pull figcaption,
[dir="rtl"] .cert__zoom,
[dir="rtl"] .scope__count{ font-family:var(--arabic); }

/* Latin-only runs keep their tracking */
[dir="rtl"] .marquee__item{ font-family:var(--mono); letter-spacing:.2em; }
[dir="rtl"] .wordmark__en{ letter-spacing:0; }
[dir="rtl"] .wordmark__sub--latin{ font-family:var(--mono); letter-spacing:.2em; }
[dir="rtl"] .langsw{ font-family:var(--mono); letter-spacing:.14em; }
[dir="rtl"] .rail__label{ font-family:var(--arabic); }
[dir="rtl"] [dir="ltr"]{ font-family:var(--mono); }

/* mirrored chrome */
/* .rail uses inset-inline-start, so it mirrors on its own */
[dir="rtl"] .rail__label{ transform:translateX(-50%) rotate(90deg); }
[dir="rtl"] .nav__link::after{ transform-origin:right; }
[dir="rtl"] .nav__link:hover::after,
[dir="rtl"] .nav__link.is-current::after{ transform:scaleX(1); }
[dir="rtl"] .btn:hover .btn__arrow{ transform:translateX(-4px); }
[dir="rtl"] .hero__media img{ object-position:center 30%; }
[dir="rtl"] .hero__scrim{
  background:
    linear-gradient(180deg, rgba(10,24,34,.92) 0%, rgba(10,24,34,.55) 34%, rgba(10,24,34,.97) 92%),
    radial-gradient(120% 80% at 22% 18%, rgba(15,95,168,.34), transparent 62%);
}
[dir="rtl"] .phero::after{
  background:radial-gradient(90% 130% at 12% -10%, rgba(15,95,168,.3), transparent 60%);
}
[dir="rtl"] .marquee__track{ animation-name:slide-rtl; }
@keyframes slide-rtl{ to{ transform:translateX(100%); } }

/* Arabic numerals in the stat blocks read better slightly tighter */
[dir="rtl"] .stat__n{ font-family:var(--display); letter-spacing:-.03em; }

/* Archivo has no Arabic coverage — every element that reaches for the display
   face directly (rather than via .display) needs the Arabic face in RTL. */
[dir="rtl"] .pull blockquote,
[dir="rtl"] .card h3,
[dir="rtl"] .scope__item h3,
[dir="rtl"] .drawer a,
[dir="rtl"] .wordmark__en{
  font-family:var(--arabic);
  font-weight:700;
  line-height:1.35;
  letter-spacing:0;
}
/* digits and Latin standard codes stay on the display face */
[dir="rtl"] .stat__n,
[dir="rtl"] .cert__std{ font-family:var(--display); }

/* =========================================================================
   Arabic refinements (round 2)
   Cairo is a friendlier, more familiar face for Saudi readers than the
   IBM Plex Arabic used previously, and it needs different sizing.
   ========================================================================= */

[dir="rtl"] body{ font-weight:400; }

[dir="rtl"] .display{ font-weight:700; line-height:1.42; }
[dir="rtl"] .d-xl{ font-size:clamp(1.95rem, 5vw, 4.2rem); }
[dir="rtl"] .d-lg{ font-size:clamp(1.7rem, 3.9vw, 3rem); }
[dir="rtl"] .d-md{ font-size:clamp(1.4rem, 2.5vw, 2.05rem); }
[dir="rtl"] .d-sm{ font-size:clamp(1.1rem, 1.4vw, 1.3rem); line-height:1.5; }
[dir="rtl"] .lede{ font-weight:400; line-height:1.85; }

/* Arabic has no uppercase, and small tracked caps sizing reads tiny.
   Buttons and labels need real size to stay legible and tappable. */
[dir="rtl"] .btn{
  font-family:var(--arabic);
  font-size:1rem;
  font-weight:600;
  line-height:1.5;
  text-transform:none;
  padding:1.05rem 1.9rem;
  min-height:54px;
}
[dir="rtl"] .btn--sm{ font-size:.9rem; padding:.8rem 1.35rem; min-height:46px; }
[dir="rtl"] .btn__arrow{ font-size:1.05em; }

[dir="rtl"] .eyebrow{ font-size:.82rem; text-transform:none; font-weight:600; }
[dir="rtl"] .shead__index{ font-size:.85rem; }
[dir="rtl"] .stat__l{ font-size:.8rem; text-transform:none; }
[dir="rtl"] .foot h4{ font-size:.8rem; text-transform:none; font-weight:600; }
[dir="rtl"] .field label{ font-size:.85rem; text-transform:none; }
[dir="rtl"] .cl__k{ font-size:.8rem; text-transform:none; }
[dir="rtl"] .cert__meta{ font-size:.8rem; text-transform:none; }
[dir="rtl"] .roster div{ font-size:.9rem; }
[dir="rtl"] .speclist{ font-size:.9rem; }
[dir="rtl"] .formnote{ font-size:.8rem; line-height:1.9; }
[dir="rtl"] .scope__no{ font-size:.8rem; }
[dir="rtl"] .gal__tag,[dir="rtl"] .fig__cap,[dir="rtl"] .hcard__meta{
  font-size:.75rem; text-transform:none;
}
[dir="rtl"] .phero__crumb{ font-size:.82rem; text-transform:none; }
[dir="rtl"] .drawer__meta{ font-size:.85rem; }
[dir="rtl"] .foot__bar{ font-size:.78rem; }
[dir="rtl"] .rail__label{ font-size:.72rem; }
[dir="rtl"] .scrollcue{ font-size:.75rem; text-transform:none; }
[dir="rtl"] .lightbox__cap{ font-size:.8rem; text-transform:none; }
[dir="rtl"] .checks li{ line-height:1.9; }
[dir="rtl"] .scope__item p,[dir="rtl"] .card p,[dir="rtl"] .cert p{ line-height:1.85; }

/* the standards strip is Latin — keep it reading left to right */
[dir="rtl"] .marquee{ direction:ltr; }

/* =========================================================================
   Language switcher — the two codes were running together as "AREN"
   ========================================================================= */

.langsw{
  display:inline-flex; align-items:center; gap:.5rem;
  direction:ltr;
  font-family:var(--mono);
  font-size:.75rem; letter-spacing:.1em;
  padding:.6rem .85rem;
  min-height:44px;
  border:1px solid var(--line);
  border-radius:2px;
  color:var(--dim);
  transition:color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.langsw span{ color:var(--frost); }
.langsw span::after{ content:none; }
.langsw__sep{ color:var(--line); }
.langsw:hover{ color:var(--frost); border-color:var(--cyan); background:var(--steel); }
[dir="rtl"] .langsw{ font-family:var(--mono); letter-spacing:.1em; }

/* =========================================================================
   WhatsApp
   ========================================================================= */

.wa{
  position:fixed;
  inset-inline-end:clamp(1rem,2.5vw,1.75rem);
  bottom:clamp(1rem,2.5vw,1.75rem);
  z-index:70;
  display:inline-flex; align-items:center; gap:.7rem;
  padding:.85rem 1.15rem;
  border-radius:999px;
  background:#1FA855;
  color:#fff;
  box-shadow:0 10px 30px rgba(0,0,0,.42);
  transition:transform .35s var(--ease-out), background .3s var(--ease), box-shadow .3s var(--ease);
}
.wa:hover{ background:#25D366; transform:translateY(-3px); box-shadow:0 14px 34px rgba(0,0,0,.5); }
.wa svg{ width:26px; height:26px; flex:none; fill:currentColor; }
.wa__label{
  font-family:var(--mono);
  font-size:.74rem; letter-spacing:.12em; text-transform:uppercase;
  white-space:nowrap;
}
[dir="rtl"] .wa__label{
  font-family:var(--arabic);
  font-size:.92rem; font-weight:600; letter-spacing:0; text-transform:none;
}
@media (max-width:620px){
  .wa{ padding:.85rem; }
  .wa__label{ display:none; }
}

/* =========================================================================
   Mobile
   ========================================================================= */

@media (max-width:900px){
  .langsw{ order:-1; }
  .drawer__lang{
    display:flex; gap:.75rem; align-items:center;
    padding-block:1.5rem .5rem;
  }
  .drawer__lang .langsw{ font-size:.85rem; }
}
@media (min-width:901px){ .drawer__lang{ display:none; } }

@media (max-width:560px){
  .hero__spec{ grid-template-columns:1fr; gap:.1rem; }
  .hero__spec dt{ margin-top:.6rem; }
  .hero__row{ gap:1.75rem; }
  .hero__cta{ width:100%; }
  .hero__cta .btn{ flex:1 1 auto; }
  .d-xl{ font-size:clamp(2.2rem, 7.6vw, 8rem); }
  [dir="rtl"] .d-xl{ font-size:clamp(1.8rem, 7.4vw, 4.2rem); }
  .stats{ grid-template-columns:1fr; }
  .cta .btn{ width:100%; }
}

@media (max-width:900px){
  /* the pinned gallery becomes a swipeable carousel — restore normal flow */
  .hpin__vp{
    padding-block:0;
    gap:1.25rem;
    justify-content:flex-start;
  }
  .hcard__fig{ max-height:none; }
  .hpin__bar{ display:none; }
}

/* tap targets */
@media (hover:none){
  .nav__link{ padding-block:.6rem; }
  .cert__doc,.gal__cell{ cursor:pointer; }
}

/* hide the WhatsApp button while the mobile menu is open */
body.is-navopen .wa{ opacity:0; pointer-events:none; transform:translateY(8px); }

/* Explicit tracking reset for the selectors that outrank (or tie with) the
   general RTL reset. Found by auditing the cascade rather than by eye —
   .contactlist .cl__k in particular was still tracking Arabic labels. */
[dir="rtl"] .drawer a,
[dir="rtl"] .hero__spec dt,
[dir="rtl"] .scope__item h3,
[dir="rtl"] .card h3,
[dir="rtl"] .pull blockquote,
[dir="rtl"] .pull figcaption,
[dir="rtl"] .roster div,
[dir="rtl"] .field label,
[dir="rtl"] .contactlist .cl__k,
[dir="rtl"] .foot h4,
[dir="rtl"] .cert__std,
[dir="rtl"] .shead__index,
[dir="rtl"] .scope__no,
[dir="rtl"] .gal__tag,
[dir="rtl"] .fig__cap,
[dir="rtl"] .hcard__meta,
[dir="rtl"] .cert__meta,
[dir="rtl"] .stat__l,
[dir="rtl"] .eyebrow,
[dir="rtl"] .btn,
[dir="rtl"] .nav__link{ letter-spacing:0; }

/* =========================================================================
   Definitive tracking reset for Arabic.
   `html[dir="rtl"] body *` scores (0,1,2), which outranks every single-class
   rule in this file, so nothing can leak tracking onto Arabic text. The few
   Latin-only runs are then re-declared above it.
   ========================================================================= */
html[dir="rtl"] body *{ letter-spacing:0; word-spacing:normal; }

html[dir="rtl"] .marquee__item{ letter-spacing:.2em; }
html[dir="rtl"] .langsw{ letter-spacing:.1em; }
html[dir="rtl"] .wordmark__sub--latin{ letter-spacing:.2em; }
html[dir="rtl"] .stat__n{ letter-spacing:-.03em; }
html[dir="rtl"] [dir="ltr"]{ letter-spacing:.04em; }


/* =========================================================================
   ==  MOTION LAYER  =======================================================
   Added pass: richer hover, focus and scroll behaviour.

   Three rules held throughout:
     1. Every :hover has a :focus-visible twin. A keyboard user should see
        the same affordance a mouse user sees.
     2. Only transform / opacity / filter are animated. Nothing here can
        trigger layout, so none of it costs scroll performance.
     3. Coarse pointers get the resting state, not a stuck hover state.
        Hover-only flourishes live inside (hover:none) overrides below.
   The site-wide prefers-reduced-motion block earlier in this file already
   neutralises every transition and animation declared here.
   ========================================================================= */

:root{
  --frost-sheen: linear-gradient(115deg,
    transparent 0%, rgba(184,228,245,.02) 38%,
    rgba(184,228,245,.20) 50%,
    rgba(184,228,245,.02) 62%, transparent 100%);
}

/* ---------- Shared keyframes ---------- */

@keyframes sheen      { from{ transform:translateX(-120%); } to{ transform:translateX(120%); } }
@keyframes breathe    { 0%,100%{ opacity:.55; transform:scale(1); } 50%{ opacity:1; transform:scale(1.06); } }
@keyframes haloring   { 0%{ transform:scale(1); opacity:.5; } 70%,100%{ transform:scale(1.8); opacity:0; } }
@keyframes driftfield { 0%,100%{ transform:translate3d(0,0,0) scale(1); } 50%{ transform:translate3d(2%,-2%,0) scale(1.08); } }
@keyframes riseup     { from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
@keyframes ticker     { 0%{ transform:translateY(0); } 45%{ transform:translateY(-.16em); } 100%{ transform:translateY(0); } }

/* =========================================================================
   Buttons — the existing fill stays; a frost sheen crosses it on hover and
   the border picks up a cold glow.
   ========================================================================= */

/* --mx/--my carry the magnetic offset published by main.js. Every transform
   below composes them in, so the pull, the hover lift and the active squash
   coexist instead of overwriting one another. The transition stays short —
   the offset is rewritten each frame while the cursor is over the control,
   and a long ease would read as lag rather than weight. */
.btn,.langsw,.burger,.wa{ --mx:0px; --my:0px; }

.btn{
  transform:translate(var(--mx),var(--my));
  transition:color .35s var(--ease), border-color .35s var(--ease),
             transform .18s var(--ease-out), box-shadow .45s var(--ease);
}
.btn::after{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background:var(--frost-sheen);
  transform:translateX(-120%);
  pointer-events:none;
}
.btn:hover::after,
.btn:focus-visible::after{ animation:sheen .85s var(--ease-out); }

.btn:hover,
.btn:focus-visible{ transform:translate(var(--mx),calc(var(--my) - 2px)); }
.btn:active{ transform:translate(var(--mx),var(--my)) scale(.985); transition-duration:.09s; }

.btn--solid:hover,
.btn--solid:focus-visible{ box-shadow:0 10px 30px -8px rgba(43,176,230,.55); }
.btn--ghost:hover,
.btn--ghost:focus-visible{ box-shadow:0 10px 26px -12px rgba(0,0,0,.7); }

.btn:focus-visible .btn__arrow{ transform:translateX(4px); }
[dir="rtl"] .btn:focus-visible .btn__arrow{ transform:translateX(-4px); }

/* =========================================================================
   Navigation
   ========================================================================= */

.nav__link{ transition:color .3s var(--ease); }
.nav__link:focus-visible{ color:var(--frost); }
.nav__link:focus-visible::after{ transform:scaleX(1); }

/* a frost dot settles above the active item */
.nav__link::before{
  content:"";
  position:absolute; top:-.35rem; inset-inline-start:50%;
  width:3px; height:3px;
  margin-inline-start:-1.5px;
  background:var(--cyan);
  transform:rotate(45deg) scale(0);
  transition:transform .45s var(--ease-out);
}
.nav__link.is-current::before,
.nav__link:hover::before,
.nav__link:focus-visible::before{ transform:rotate(45deg) scale(1); }

/* the mark settles slightly as the bar sticks */
.nav.is-stuck .wordmark__mark img{ transform:scale(.94); }

.langsw{
  transform:translate(var(--mx),var(--my));
  transition:color .3s var(--ease), border-color .3s var(--ease),
             background .3s var(--ease), transform .18s var(--ease-out);
}
.langsw:focus-visible{ color:var(--frost); border-color:var(--cyan); background:var(--steel); }
.langsw span{ transition:color .3s var(--ease); }
.langsw:hover span,
.langsw:focus-visible span{ color:var(--cyan); }

/* burger: the two rules spread slightly before committing to the X */
.burger{
  transform:translate(var(--mx),var(--my));
  transition:border-color .35s var(--ease), background .35s var(--ease),
             transform .18s var(--ease-out);
}
.burger:hover,
.burger:focus-visible{ border-color:var(--cyan); background:rgba(43,176,230,.08); }
.burger:hover span:nth-child(1){ transform:translateY(-1.5px); }
.burger:hover span:nth-child(2){ transform:translateY(1.5px); }
.burger[aria-expanded="true"]:hover span:nth-child(1){ transform:translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"]:hover span:nth-child(2){ transform:translateY(-5.5px) rotate(-45deg); }

/* drawer links arrive in sequence once the panel has opened */
.js .drawer a{ opacity:0; transform:translateY(12px); }
.drawer.is-open a{ animation:riseup .55s var(--ease-out) forwards; }
.drawer.is-open a:nth-of-type(1){ animation-delay:.16s; }
.drawer.is-open a:nth-of-type(2){ animation-delay:.22s; }
.drawer.is-open a:nth-of-type(3){ animation-delay:.28s; }
.drawer.is-open a:nth-of-type(4){ animation-delay:.34s; }
.drawer.is-open a:nth-of-type(5){ animation-delay:.40s; }
.drawer.is-open a:nth-of-type(6){ animation-delay:.46s; }
.drawer.is-open a:nth-of-type(n+7){ animation-delay:.52s; }
.drawer__meta{ opacity:0; transition:opacity .5s var(--ease) .55s; }
.drawer.is-open .drawer__meta{ opacity:1; }

/* the drawer language switcher is an <a> too — keep it visible */
/* .js prefix is load-bearing: `.js .drawer a` scores (0,2,1), so a bare
   `.drawer__lang .langsw` at (0,2,0) would lose the tie and the language
   switcher inside the mobile menu would stay invisible. */
.js .drawer__lang .langsw{ opacity:1; transform:none; animation:none; }

/* =========================================================================
   Brand mark
   ========================================================================= */

.wordmark:active .wordmark__mark img{ transform:rotate(60deg) scale(.98); }

/* =========================================================================
   Cards — engineering-drawing corner brackets draw themselves in
   ========================================================================= */

.card::before,
.card::after{
  content:"";
  position:absolute;
  width:16px; height:16px;
  border:0 solid var(--cyan);
  opacity:0;
  transition:opacity .4s var(--ease), transform .55s var(--ease-out);
  pointer-events:none;
}
.card::before{
  top:-1px; inset-inline-start:-1px;
  border-top-width:1px; border-left-width:1px;
  transform:translate(6px,6px);
}
[dir="rtl"] .card::before{ border-left-width:0; border-right-width:1px; transform:translate(-6px,6px); }
.card::after{
  bottom:-1px; inset-inline-end:-1px;
  border-bottom-width:1px; border-right-width:1px;
  transform:translate(-6px,-6px);
}
[dir="rtl"] .card::after{ border-right-width:0; border-left-width:1px; transform:translate(6px,-6px); }
.card:hover::before,
.card:hover::after,
.card:focus-within::before,
.card:focus-within::after{ opacity:1; transform:none; }

.card__icon{ transition:transform .7s var(--ease-out), filter .45s var(--ease); }
.card:hover .card__icon,
.card:focus-within .card__icon{
  transform:rotate(60deg);
  filter:drop-shadow(0 0 10px rgba(43,176,230,.65));
}
.card h3{ transition:color .35s var(--ease); }
.card:hover h3{ color:var(--rime); }
.card__no{ transition:color .35s var(--ease), transform .45s var(--ease-out); }
.card:hover .card__no{ color:var(--cyan); transform:translateY(-2px); }
.card:focus-within{ border-color:rgba(43,176,230,.45); background:var(--steel); }

/* =========================================================================
   Lists
   ========================================================================= */

.checks li{ transition:color .35s var(--ease); }
.checks li::before{ transition:transform .6s var(--ease-out), box-shadow .4s var(--ease); }
.checks li:hover{ color:var(--rime); }
.checks li:hover::before{
  transform:rotate(135deg) scale(1.25);
  box-shadow:0 0 10px rgba(43,176,230,.8);
}

.speclist li{
  padding-inline-start:0;
  transition:color .3s var(--ease), padding-inline-start .35s var(--ease-out),
             border-color .3s var(--ease);
}
.speclist li:hover{
  color:var(--frost);
  padding-inline-start:.5rem;
  border-color:rgba(43,176,230,.4);
}
.speclist li span{ transition:color .3s var(--ease); }
.speclist li:hover span{ color:var(--cyan); }

/* roster tiles fill from the reading edge */
.roster div{ position:relative; overflow:hidden; isolation:isolate; }
.roster div::before{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to right, rgba(43,176,230,.16), transparent);
  transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--ease-out);
}
[dir="rtl"] .roster div::before{
  background:linear-gradient(to left, rgba(43,176,230,.16), transparent);
  transform-origin:right;
}
.roster div:hover::before{ transform:scaleX(1); }

/* =========================================================================
   Stats — the figure lifts and a rule sweeps beneath it
   ========================================================================= */

.stat{ position:relative; overflow:hidden; transition:background .4s var(--ease); }
.stat::after{
  content:"";
  position:absolute; inset:auto 0 0 0;
  height:2px;
  background:var(--cyan);
  transform:scaleX(0); transform-origin:left;
  transition:transform .55s var(--ease-out);
}
[dir="rtl"] .stat::after{ transform-origin:right; }
.stat:hover{ background:var(--ink-2); }
.stat:hover::after{ transform:scaleX(1); }
.stat__n{ transition:transform .5s var(--ease-out), color .4s var(--ease); }
.stat:hover .stat__n{ transform:translateY(-3px); color:var(--rime); }
.stat__l{ transition:color .4s var(--ease); }
.stat:hover .stat__l{ color:var(--muted); }
/* the counter gives one small tick as it lands */
.stat.is-in .stat__n{ animation:ticker .9s var(--ease-out) .35s; }

/* =========================================================================
   Figures and imagery — a sheen crosses the frame, the caption rises
   ========================================================================= */

.fig{ isolation:isolate; }
.fig::after{
  content:"";
  position:absolute; inset:0; z-index:2;
  background:var(--frost-sheen);
  transform:translateX(-120%);
  pointer-events:none;
}
.fig:hover::after{ animation:sheen 1.1s var(--ease-out); }
/* parallax images carry a per-frame inline transform from main.js — scaling
   them here would be dead code at best and a fight with the loop at worst */
.fig:hover img:not([data-parallax]){ transform:scale(1.045); }

.fig__cap{
  transform:translateY(102%);
  opacity:0;
  transition:transform .5s var(--ease-out), opacity .4s var(--ease);
}
.fig:hover .fig__cap,
.fig:focus-within .fig__cap{ transform:none; opacity:1; }

/* gallery: a cyan frame draws inside the cell */
.gal__cell{ transition:transform .5s var(--ease-out); }
.gal__cell::after{
  content:"";
  position:absolute; inset:8px; z-index:2;
  border:1px solid rgba(43,176,230,.75);
  opacity:0; transform:scale(1.04);
  transition:opacity .4s var(--ease), transform .55s var(--ease-out);
  pointer-events:none;
}
.gal__cell:hover{ transform:translateY(-2px); }
.gal__cell:hover::after,
.gal__cell:focus-visible::after{ opacity:1; transform:none; }
.gal__cell:focus-visible img{ filter:none; transform:scale(1.06); }
.gal__cell:focus-visible .gal__tag{ transform:none; }

/* horizontal project cards */
.hcard__fig{ isolation:isolate; }
.hcard__fig::after{
  content:"";
  position:absolute; inset:0; z-index:2;
  background:var(--frost-sheen);
  transform:translateX(-120%);
  pointer-events:none;
}
.hcard:hover .hcard__fig::after{ animation:sheen 1.1s var(--ease-out); }
.hcard__meta{ transition:border-color .4s var(--ease), color .4s var(--ease); }
.hcard:hover .hcard__meta{ border-color:rgba(43,176,230,.5); color:var(--muted); }

/* =========================================================================
   Certificates
   ========================================================================= */

.cert{ transition:border-color .5s var(--ease), transform .5s var(--ease-out), background .5s var(--ease); }
.cert:hover,
.cert:focus-within{
  transform:translateY(-4px);
  border-color:rgba(43,176,230,.45);
  background:var(--ink-2);
}
.cert__doc::after{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(60% 50% at 50% 50%, rgba(43,176,230,.18), transparent 70%);
  opacity:0;
  transition:opacity .5s var(--ease);
  pointer-events:none;
}
.cert:hover .cert__doc::after{ opacity:1; }
.cert__zoom{
  transform:translateY(6px);
  opacity:0;
  transition:transform .45s var(--ease-out), opacity .35s var(--ease);
}
.cert:hover .cert__zoom,
.cert__doc:focus-visible .cert__zoom{ transform:none; opacity:1; }
.cert__std{ transition:color .4s var(--ease); }
.cert:hover .cert__std{ color:var(--rime); }

/* =========================================================================
   Scope list — the active row is ruled off in cyan
   ========================================================================= */

.scope__item{ position:relative; }
.scope__item::before{
  content:"";
  position:absolute; top:-1px; left:0;
  width:100%; height:1px;
  background:var(--cyan);
  transform:scaleX(0); transform-origin:left;
  transition:transform .7s var(--ease-out);
}
[dir="rtl"] .scope__item::before{ transform-origin:right; }
.scope__item.is-active::before{ transform:scaleX(1); }
.scope__item p{ transition:color .5s var(--ease); }
.scope__item.is-active p{ color:var(--rime); }
.scope__no{ transition:color .5s var(--ease); }

/* =========================================================================
   Section headers — the index number is underscored as it arrives
   ========================================================================= */

.shead__index{ position:relative; display:inline-block; padding-bottom:.4rem; }
.js .shead__index::after{
  content:"";
  position:absolute; inset:auto 0 0 0;
  height:1px;
  background:linear-gradient(to right,var(--cyan),transparent);
  transform:scaleX(0); transform-origin:left;
  transition:transform 1s var(--ease-out) .2s;
}
[dir="rtl"] .shead__index::after{
  background:linear-gradient(to left,var(--cyan),transparent);
  transform-origin:right;
}
.shead.is-in .shead__index::after{ transform:scaleX(1); }

/* the eyebrow rule draws itself out */
.js .eyebrow::before{ transform:scaleX(0); transform-origin:left; transition:transform .9s var(--ease-out) .25s; }
[dir="rtl"] .eyebrow::before{ transform-origin:right; }
.is-lit .eyebrow::before,
.is-in .eyebrow::before{ transform:scaleX(1); }

/* =========================================================================
   Standards marquee — individual items respond to the pointer
   ========================================================================= */

.marquee__item{ transition:color .3s var(--ease); }
.marquee__item:hover{ color:var(--rime); }
.marquee__item::after{ transition:background .3s var(--ease), transform .5s var(--ease-out); }
.marquee__item:hover::after{ background:var(--rime); transform:rotate(135deg); }

/* =========================================================================
   Footer and contact links
   ========================================================================= */

.foot ul a{
  position:relative;
  display:inline-block;
  transition:color .3s var(--ease), transform .35s var(--ease-out);
}
.foot ul a::before{
  content:"";
  position:absolute; inset-inline-start:-.85rem; top:50%;
  width:5px; height:1px; margin-top:-.5px;
  background:var(--cyan);
  transform:scaleX(0); transform-origin:right;
  transition:transform .35s var(--ease-out);
}
[dir="rtl"] .foot ul a::before{ transform-origin:left; }
.foot ul a:hover::before,
.foot ul a:focus-visible::before{ transform:scaleX(1); }
.foot ul a:focus-visible{ color:var(--cyan); }
[dir="rtl"] .foot ul a:hover,
[dir="rtl"] .foot ul a:focus-visible{ transform:translateX(-.35rem); }
[dir="ltr"] .foot ul a:hover,
[dir="ltr"] .foot ul a:focus-visible{ transform:translateX(.35rem); }

.contactlist li{ transition:background .4s var(--ease); }
.contactlist li:hover{ background:rgba(43,176,230,.04); }
.contactlist svg{ transition:transform .5s var(--ease-out), color .35s var(--ease); }
.contactlist li:hover svg{ transform:scale(1.15) rotate(-6deg); color:var(--rime); }
.contactlist a{ transition:color .3s var(--ease); }
.contactlist a:focus-visible{ color:var(--cyan); }

.phero__crumb a{ transition:color .3s var(--ease); }
.phero__crumb a:focus-visible{ color:var(--cyan); }

/* =========================================================================
   Form fields — a cold ring on focus rather than a bare border change
   ========================================================================= */

.field input,.field textarea,.field select{
  transition:border-color .35s var(--ease), background .35s var(--ease),
             box-shadow .35s var(--ease);
}
.field input:hover,.field textarea:hover,.field select:hover{ border-color:var(--steel-2); }
.field input:focus,.field textarea:focus,.field select:focus{
  box-shadow:0 0 0 3px rgba(43,176,230,.16);
}
.field label{ transition:color .3s var(--ease); }
.field:focus-within label{ color:var(--cyan); }

/* =========================================================================
   Ambient background motion — very slow, very low contrast
   ========================================================================= */

.phero::after{ animation:driftfield 26s var(--ease) infinite; }
.cta::after{ animation:driftfield 34s var(--ease) infinite; }

/* =========================================================================
   WhatsApp — one expanding ring so the button reads as live
   ========================================================================= */

.wa{
  isolation:isolate;
  transform:translate(var(--mx),var(--my));
  transition:transform .18s var(--ease-out), background .3s var(--ease), box-shadow .3s var(--ease);
}
.wa:hover,
.wa:focus-visible{ transform:translate(var(--mx),calc(var(--my) - 3px)); }
.wa::before{
  content:"";
  position:absolute; inset:0; z-index:-1;
  border-radius:inherit;
  background:#1FA855;
  animation:haloring 3.2s var(--ease-out) infinite;
}
.wa:hover::before,
.wa:focus-visible::before{ animation-play-state:paused; opacity:0; }
.wa:focus-visible{ background:#25D366; box-shadow:0 14px 34px rgba(0,0,0,.5); }
.wa svg{ transition:transform .5s var(--ease-out); }
.wa:hover svg{ transform:scale(1.1) rotate(-8deg); }

/* =========================================================================
   Lightbox close
   ========================================================================= */

.lightbox__close{ transition:border-color .3s var(--ease), background .3s var(--ease), transform .4s var(--ease-out); }
.lightbox__close:hover,
.lightbox__close:focus-visible{
  border-color:var(--cyan);
  background:rgba(43,176,230,.12);
  transform:rotate(90deg);
}

/* =========================================================================
   Scroll reveal — variants keyed off classes already in the markup, so no
   template changes were needed to get differentiated entrances.
   ========================================================================= */

/* Scoped with :not(.is-in) deliberately. Writing the pair as
   `.card.reveal{...}` + `.card.reveal.is-in{transform:none}` looks equivalent,
   but the second selector scores (0,3,0) and so beats `.card:hover` (0,2,0) —
   which silently kills the hover lift on every revealed card. Constraining the
   entrance to the pre-reveal state leaves the settled element with no transform
   rule of mine at all, so the hover states own it outright. */
.fig.reveal:not(.is-in),
.frostwipe.reveal:not(.is-in){ transform:translateY(24px) scale(.985); }

.stat.reveal:not(.is-in){ transform:translateY(20px); }
.card.reveal:not(.is-in){ transform:translateY(28px) scale(.99); }

.pull{ position:relative; }
.pull::before{
  content:"";
  position:absolute; inset-block:0; inset-inline-start:-2px;
  width:2px;
  background:var(--rime);
  transform:scaleY(0); transform-origin:top;
  transition:transform 1.1s var(--ease-out) .15s;
}
.pull.is-in::before{ transform:scaleY(1); }

/* =========================================================================
   Pointer-quality gates
   Coarse pointers keep the resting state; nothing sticks after a tap.
   ========================================================================= */

@media (hover:none){
  .fig .fig__cap{ transform:none; opacity:1; }
  .cert__zoom{ transform:none; opacity:1; }
  .gal__tag{ transform:none; }
  .btn:hover{ transform:none; }
  .card:hover{ transform:none; }
  .cert:hover{ transform:none; }
  .gal__cell:hover{ transform:none; }
  .wa::before{ animation:none; }
}

/* the custom cursor warms up over interactive targets */
@media (hover:hover) and (pointer:fine){
  .cursor{ transition:transform .22s var(--ease), opacity .3s, background .3s, border-color .3s; }
  .cursor.is-hot{ border-color:var(--rime); }
}

/* Reduced motion: kill the ambient loops outright rather than running them
   at 0.001ms, which would otherwise leave them stuck mid-keyframe. */
@media (prefers-reduced-motion:reduce){
  .phero::after,.cta::after,.wa::before,.stat.is-in .stat__n,
  .drawer.is-open a{ animation:none !important; }
  .js .drawer a{ opacity:1; transform:none; }
  .fig__cap,.cert__zoom{ opacity:1; transform:none; }
}