/* ==========================================================================
   ALUPAN — design system  v2
   White canvas, cobalt accent, Vazirmatn, RTL-first.
   Logical properties throughout, so the same sheet serves fa (rtl) and en (ltr).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Vazirmatn";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/Vazirmatn-Variable.woff2") format("woff2-variations"),
       url("https://cdn.jsdelivr.net/npm/vazirmatn@33.0.3/fonts/webfonts/Vazirmatn[wght].woff2") format("woff2-variations");
}

/* --------------------------------------------------------------------------
   2. ART DIRECTION
   The artwork below is generated entirely in CSS — no external image host, so
   it renders identically for a visitor in Tehran and a visitor in Milan.
   When real photography arrives, set the matching variable to a local file:

       --img-hero: url("../images/hero-facade.jpg");

   and the CSS artwork underneath becomes the fallback.
   -------------------------------------------------------------------------- */
:root {
  /* fine grain, keeps large gradients from banding and reads as material */
  --noise:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");

  /* A curtain wall seen at an angle: sun glint, panel-to-panel tint variation,
     sky reflection graduating into shadow at the base. */
  --glass-wall:
    linear-gradient(118deg,
      transparent 0 34%,
      rgba(255,255,255,.30) 41%,
      rgba(255,255,255,.10) 48%,
      transparent 58%),
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.055) 0 3.1%,
      rgba(3,14,38,.10) 3.1% 6.25%),
    repeating-linear-gradient(0deg,
      rgba(255,255,255,.045) 0 4.4%,
      rgba(3,14,38,.11) 4.4% 8.8%),
    linear-gradient(165deg,
      #B7CFEC 0%,
      #6C97D4 22%,
      #2F62B4 48%,
      #103A82 72%,
      #071B44 100%);

  /* Anodised aluminium: brushed highlights over a cool metal base. */
  --alu-brushed:
    repeating-linear-gradient(97deg,
      rgba(255,255,255,.10) 0 2px,
      rgba(255,255,255,0) 2px 5px,
      rgba(10,16,26,.10) 5px 7px),
    linear-gradient(150deg, #E4E9F0 0%, #AEB8C6 38%, #7C8798 68%, #3C4553 100%);

  /* Night elevation: the same wall, lit from inside, for the CTA band. */
  --glass-night:
    repeating-linear-gradient(90deg,
      rgba(120,170,255,.10) 0 3.1%,
      rgba(0,0,0,.24) 3.1% 6.25%),
    repeating-linear-gradient(0deg,
      rgba(255,214,140,.14) 0 2.2%,
      rgba(0,0,0,.28) 2.2% 8.8%),
    linear-gradient(140deg, #0B2A66 0%, #061634 55%, #04101F 100%);

  /* Set these to url("../images/...") when you have real photographs. */
  --img-hero:    none;
  --img-project: none;
  --img-story:   none;
  --img-cta:     none;
}

/* --------------------------------------------------------------------------
   3. Tokens
   -------------------------------------------------------------------------- */
:root {
  --paper:        #FFFFFF;
  --cobalt:       #0047AB;
  --cobalt-lift:  #1A62D6;
  --cobalt-deep:  #00337A;
  --cobalt-tint:  #EEF3FB;
  --cobalt-glow:  rgba(0, 71, 171, .22);

  --ink:          #070A0F;
  --ink-soft:     #333A44;
  --mute:         #6E7784;
  --line:         #E6E9EE;
  --line-strong:  #D2D7DF;
  --alu:          #C9CFD6;
  --wash:         #F6F8FA;

  --glass-bg:     rgba(255, 255, 255, .72);
  --glass-line:   rgba(255, 255, 255, .55);
  --glass-dark:   rgba(10, 13, 18, .34);
  --glass-dline:  rgba(255, 255, 255, .16);

  --font: "Vazirmatn", "Segoe UI", Tahoma, system-ui, sans-serif;

  --fs-display: clamp(3rem, 7.4vw, 8rem);
  --fs-h2:      clamp(2.1rem, 4.2vw, 4rem);
  --fs-h3:      clamp(1.35rem, 1.9vw, 1.9rem);
  --fs-lead:    clamp(1.06rem, 1.4vw, 1.35rem);
  --fs-body:    clamp(.97rem, 1.05vw, 1.06rem);
  --fs-small:   .875rem;
  --fs-eyebrow: .76rem;

  --lh-tight:   1.22;
  --lh-body:    1.95;

  --gutter:     clamp(1.25rem, 4vw, 4.5rem);
  --maxw:       1440px;
  --section-y:  clamp(5.5rem, 12vw, 12rem);

  --ease-out:   cubic-bezier(.22, 1, .36, 1);
  --ease-swap:  cubic-bezier(.76, 0, .24, 1);
  --dur:        .55s;

  --radius:     2px;
  --shadow-lift: 0 24px 60px -28px rgba(7, 10, 15, .32);
  --shadow-glow: 0 18px 44px -18px var(--cobalt-glow);
}

/* --------------------------------------------------------------------------
   4. Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body.is-loading { overflow: hidden; height: 100vh; }

h1, h2, h3, h4 { margin: 0; line-height: var(--lh-tight); font-weight: 700; letter-spacing: -.015em; text-wrap: balance; }
p  { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; transition: color var(--dur) var(--ease-out); }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; }
::selection { background: var(--cobalt); color: var(--paper); }

.ltr, .num { direction: ltr; unicode-bidi: isolate; }

/* --------------------------------------------------------------------------
   5. Layout primitives
   -------------------------------------------------------------------------- */
.container {
  inline-size: 100%;
  max-inline-size: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); position: relative; }
.section--tint { background: var(--wash); }
.section--flush { padding-block: 0; }

.skip-link {
  position: absolute;
  inset-block-start: -100%;
  inset-inline-start: 1rem;
  z-index: 999;
  padding: .75rem 1.25rem;
  background: var(--cobalt);
  color: var(--paper);
}
.skip-link:focus { inset-block-start: 1rem; }

/* Reusable glass surface */
.glass {
  background: var(--glass-bg);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border: 1px solid var(--glass-line);
  box-shadow: var(--shadow-lift);
}

/* --------------------------------------------------------------------------
   6. Typography helpers
   -------------------------------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: .18em;
  color: var(--cobalt);
  text-transform: uppercase;
}
.eyebrow::before {
  content: "";
  inline-size: 2.5rem;
  block-size: 1px;
  background: currentColor;
  flex: none;
}
.eyebrow--light { color: rgba(255, 255, 255, .82); }

.display {
  font-size: var(--fs-display);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.06;
}
.h2      { font-size: var(--fs-h2); font-weight: 700; letter-spacing: -.025em; }
.h3      { font-size: var(--fs-h3); font-weight: 600; }
.lead    { font-size: var(--fs-lead); color: var(--ink-soft); max-inline-size: 56ch; }
.muted   { color: var(--mute); }
.accent  { color: var(--cobalt); }

.line-mask { display: block; overflow: hidden; padding-block-end: .08em; }
.word      { display: inline-block; }
.word-mask { display: inline-block; overflow: hidden; vertical-align: bottom; padding-inline-end: .24em; }

/* --------------------------------------------------------------------------
   7. Buttons
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg:     var(--cobalt);
  --btn-fg:     var(--paper);
  --btn-sweep:  var(--ink);

  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  padding: 1.1rem 2.2rem;
  border-radius: var(--radius);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--fs-small);
  font-weight: 600;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--dur) var(--ease-swap),
              box-shadow var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out);
}
.btn:hover, .btn:focus-visible { box-shadow: var(--shadow-glow); transform: translateY(-2px); }

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--btn-sweep);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--dur) var(--ease-swap);
}
.btn:hover::before, .btn:focus-visible::before { transform: scaleY(1); }

.btn__icon { inline-size: .9rem; flex: none; transition: transform var(--dur) var(--ease-out); }
.btn:hover .btn__icon { transform: translateX(-.3rem); }
[dir="ltr"] .btn:hover .btn__icon { transform: translateX(.3rem); }

.btn--ghost {
  --btn-bg:    transparent;
  --btn-fg:    var(--ink);
  --btn-sweep: var(--cobalt);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.btn--ghost:hover, .btn--ghost:focus-visible {
  color: var(--paper);
  box-shadow: inset 0 0 0 1px var(--cobalt), var(--shadow-glow);
}

.btn--invert {
  --btn-bg:    var(--paper);
  --btn-fg:    var(--cobalt);
  --btn-sweep: var(--ink);
}
.btn--invert:hover, .btn--invert:focus-visible {
  color: var(--paper);
  box-shadow: 0 18px 44px -18px rgba(0, 0, 0, .5);
}

/* Glass button — sits on photography */
.btn--glass {
  --btn-bg:    rgba(255, 255, 255, .12);
  --btn-fg:    var(--paper);
  --btn-sweep: var(--paper);
  border: 1px solid var(--glass-dline);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.btn--glass:hover, .btn--glass:focus-visible { color: var(--ink); }

.link-line {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
  color: var(--cobalt);
  padding-block-end: .25rem;
}
.link-line::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  block-size: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: inline-end;
  transition: transform var(--dur) var(--ease-swap);
}
.link-line:hover::after { transform: scaleX(1); transform-origin: inline-start; }
.link-line--light { color: var(--paper); }

/* --------------------------------------------------------------------------
   8. Header — transparent over the hero photo, glass once stuck
   -------------------------------------------------------------------------- */
.header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 100;
  padding-block: 1.3rem;
  color: var(--paper);
  transition: background var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              padding var(--dur) var(--ease-out);
}
.header::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(7,10,15,.55) 0%, rgba(7,10,15,0) 100%);
  transition: opacity var(--dur) var(--ease-out);
}
.header__inner { display: flex; align-items: center; gap: clamp(1rem, 3vw, 3rem); }

.header.is-stuck {
  background: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  color: var(--ink);
  box-shadow: 0 1px 0 var(--line), 0 12px 30px -24px rgba(7,10,15,.5);
  padding-block: .85rem;
}
.header.is-stuck::after { opacity: 0; }

.brand { display: flex; align-items: baseline; gap: .6rem; font-weight: 800; letter-spacing: -.02em; }
.brand__fa { font-size: 1.45rem; }
.brand__en { font-size: .68rem; letter-spacing: .36em; opacity: .6; }

.nav { display: flex; gap: clamp(1rem, 2.2vw, 2.4rem); margin-inline-start: auto; }
.nav__link { position: relative; font-size: var(--fs-small); font-weight: 500; padding-block: .3rem; }
.nav__link::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  block-size: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: inline-end;
  transition: transform .45s var(--ease-swap);
}
.nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); transform-origin: inline-start; }
.header.is-stuck .nav__link:hover { color: var(--cobalt); }

.lang { display: flex; align-items: center; gap: .4rem; font-size: .74rem; font-weight: 600; letter-spacing: .08em; }
.lang__item { opacity: .55; transition: opacity var(--dur) var(--ease-out); }
.lang__item:hover, .lang__item.is-active { opacity: 1; }
.header.is-stuck .lang__item.is-active, .header.is-stuck .lang__item:hover { color: var(--cobalt); }

.header__cta { padding: .75rem 1.5rem; font-size: .78rem; }
.header:not(.is-stuck) .header__cta {
  background: rgba(255,255,255,.12);
  color: var(--paper);
  border: 1px solid var(--glass-dline);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  --btn-sweep: var(--paper);
}
.header:not(.is-stuck) .header__cta:hover { color: var(--ink); }

.burger { display: none; inline-size: 2.5rem; block-size: 2.5rem; place-items: center; }
.burger span { display: block; inline-size: 1.35rem; block-size: 1.5px; background: currentColor; margin-block: .22rem; transition: transform .4s var(--ease-swap); }

/* --------------------------------------------------------------------------
   9. HERO — full-bleed photography, cinematic type, floating glass specs
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-block-size: 100svh;
  display: grid;
  align-items: end;
  color: var(--paper);
  isolation: isolate;
  overflow: hidden;
  padding-block-start: clamp(7rem, 14vh, 10rem);
}

.hero__panel { position: absolute; inset: 0; z-index: -2; }

.hero__mask {
  position: absolute;
  inset: 0;
  overflow: hidden;
  clip-path: inset(100% 0 0 0);
}
.no-js .hero__mask, .hero__mask.is-open { clip-path: inset(0 0 0 0); }

.hero__art {
  position: absolute;
  inset: -9% 0;
  background:
    linear-gradient(180deg, rgba(4,10,22,.72) 0%, rgba(4,10,22,.20) 34%, rgba(4,10,22,.90) 100%),
    radial-gradient(120% 80% at 78% 8%, rgba(255,255,255,.30) 0%, transparent 55%),
    var(--facade-image, var(--img-hero)),
    var(--glass-wall);
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  will-change: transform;
}
.hero__art::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--noise);
  opacity: .16;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* Mullion grid drawn over the photo — a curtain wall, in CSS */
.hero__grid {
  position: absolute;
  inset: 0;
  opacity: .28;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.5) 0 1px, transparent 1px 8.333%),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.28) 0 1px, transparent 1px 14.285%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 68%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 68%, transparent 100%);
}

.hero__inner {
  display: grid;
  gap: clamp(1.25rem, 2.4vw, 2rem);
  padding-block-end: clamp(2rem, 5vh, 4rem);
}

.hero__title {
  max-inline-size: 17ch;
  color: var(--paper);
  text-shadow: 0 2px 40px rgba(0,0,0,.35);
}
.hero__title .accent {
  background: linear-gradient(100deg, #8FB7FF 0%, #FFFFFF 60%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__row { display: grid; justify-items: start; gap: clamp(1.5rem, 3vw, 2.25rem); }
.hero__lead { color: rgba(255,255,255,.86); max-inline-size: 46ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; }

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.25rem, 4vw, 3.5rem);
  margin-block-end: clamp(2rem, 5vh, 3.5rem);
  padding: clamp(1.1rem, 2.2vw, 1.6rem) clamp(1.4rem, 3vw, 2.2rem);
  border-radius: var(--radius);
  background: rgba(255,255,255,.08);
  border: 1px solid var(--glass-dline);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
}
.hero__meta div { display: grid; gap: .2rem; }
.hero__meta dt { font-size: .7rem; letter-spacing: .16em; color: rgba(255,255,255,.6); text-transform: uppercase; }
.hero__meta dd { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--paper); }

.scroll-cue {
  position: absolute;
  inset-block-end: 1.5rem;
  inset-inline-start: var(--gutter);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .72rem;
  letter-spacing: .14em;
  color: rgba(255, 255, 255, .8);
}
.scroll-cue__rail { position: relative; inline-size: 1px; block-size: 3.5rem; background: rgba(255,255,255,.3); overflow: hidden; }
.scroll-cue__dot  { position: absolute; inset-inline: 0; block-size: 1.2rem; background: var(--paper); animation: cue 2.1s var(--ease-out) infinite; }
@keyframes cue { 0% { transform: translateY(-120%); } 100% { transform: translateY(340%); } }

/* --------------------------------------------------------------------------
   10. Marquee credential strip
   -------------------------------------------------------------------------- */
.strip { border-block-end: 1px solid var(--line); background: var(--paper); overflow: hidden; }
.strip__track { display: flex; gap: 4rem; padding-block: 1.25rem; white-space: nowrap; will-change: transform; }
.strip__item { display: inline-flex; align-items: center; gap: .7rem; font-size: .8rem; letter-spacing: .1em; color: var(--mute); }
.strip__item::before { content: ""; inline-size: 5px; block-size: 5px; background: var(--cobalt); }

.section-head { margin-block-end: clamp(2.5rem, 5vw, 4.5rem); max-inline-size: 46rem; }
.section-head > * + * { margin-block-start: 1.25rem; }
.section-head--split {
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 3rem); max-inline-size: none;
}
.section-head--split .section-head__text { flex: 1 1 34rem; max-inline-size: 42rem; }
.section-head--split .section-head__text > * + * { margin-block-start: 1.25rem; }

/* --------------------------------------------------------------------------
   11. Stats
   -------------------------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); }
.stat  {
  background: var(--paper);
  padding: clamp(1.9rem, 3.2vw, 3rem) clamp(1.25rem, 2vw, 2rem);
  transition: background var(--dur) var(--ease-out);
}
.stat:hover { background: var(--cobalt-tint); }
.stat__value { white-space: nowrap; font-size: clamp(2.2rem, 4.4vw, 3.8rem); font-weight: 800; letter-spacing: -.04em; color: var(--cobalt); line-height: 1; }
.stat__suffix { font-size: .52em; }
.stat__label { margin-block-start: .7rem; font-size: var(--fs-small); color: var(--mute); }

/* --------------------------------------------------------------------------
   12. Scrollytelling — photographic sticky panel, diagram on glass
   -------------------------------------------------------------------------- */
.story { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }

.story__visual {
  position: sticky;
  inset-block-start: 12vh;
  block-size: 78vh;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(7,10,15,.42) 0%, rgba(0,71,171,.30) 100%),
    var(--img-story),
    var(--alu-brushed);
  background-size: cover;
  background-position: center;
}
.story__layer {
  grid-area: 1 / 1;
  inline-size: 100%;
  block-size: 100%;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.story__layer.is-active { opacity: 1; transform: scale(1); }

/* the diagram floats on a glass card over the photograph */
.story__layer svg {
  inline-size: min(74%, 420px);
  padding: clamp(1.25rem, 3vw, 2.25rem);
  border-radius: var(--radius);
  background: var(--glass-bg);
  border: 1px solid var(--glass-line);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  box-shadow: var(--shadow-lift);
}

.story__index {
  position: absolute;
  inset-block-start: 1.25rem;
  inset-inline-start: 1.25rem;
  z-index: 2;
  padding: .35rem .8rem;
  border-radius: var(--radius);
  font-size: .72rem;
  letter-spacing: .18em;
  color: var(--paper);
  background: rgba(255,255,255,.14);
  border: 1px solid var(--glass-dline);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.story__steps { display: grid; gap: clamp(4rem, 12vh, 9rem); padding-block: 12vh; }
.story__step  { max-inline-size: 46ch; }
.story__step h3 { margin-block-end: .9rem; }
.story__step .num-badge {
  display: inline-grid;
  place-items: center;
  inline-size: 2.6rem;
  block-size: 2.6rem;
  margin-block-end: 1.25rem;
  border: 1px solid var(--cobalt);
  color: var(--cobalt);
  font-size: .8rem;
  font-weight: 700;
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.story__step:hover .num-badge { background: var(--cobalt); color: var(--paper); }
.story__spec { display: flex; gap: 2rem; margin-block-start: 1.5rem; padding-block-start: 1.25rem; border-block-start: 1px solid var(--line); }
.story__spec div { display: grid; gap: .2rem; }
.story__spec dt { font-size: .72rem; letter-spacing: .1em; color: var(--mute); }
.story__spec dd { margin: 0; font-size: 1.2rem; font-weight: 700; color: var(--ink); }

/* --------------------------------------------------------------------------
   13. Project showcase — full-bleed parallax photography
   -------------------------------------------------------------------------- */
.project { position: relative; min-block-size: 96svh; display: grid; align-items: end; overflow: hidden; color: var(--paper); isolation: isolate; }
.project__media { position: absolute; inset: -12% 0; z-index: -2; will-change: transform; }
.project__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(7,10,15,.92) 0%, rgba(7,10,15,.3) 55%, rgba(7,10,15,.62) 100%);
}
.project__art {
  position: relative;
  block-size: 100%;
  background:
    radial-gradient(90% 70% at 18% 12%, rgba(255,255,255,.22) 0%, transparent 58%),
    var(--project-image, var(--img-project)),
    var(--glass-night);
  background-size: cover;
  background-position: center;
}
.project__art::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--noise);
  opacity: .2;
  mix-blend-mode: overlay;
}
.project__grid {
  position: absolute; inset: 0; z-index: -1; opacity: .35;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.14) 0 1px, transparent 1px 9.09%),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.09) 0 1px, transparent 1px 8.33%);
}
.project__inner { padding-block: clamp(4rem, 10vh, 7.5rem); display: grid; gap: 1.75rem; }
.project__title { max-inline-size: 16ch; }
.project__body  { color: rgba(255,255,255,.8); max-inline-size: 52ch; }
.project__facts {
  display: flex; flex-wrap: wrap; gap: clamp(1.25rem, 4vw, 3.5rem);
  padding: clamp(1.1rem, 2.2vw, 1.6rem) clamp(1.4rem, 3vw, 2.2rem);
  border-radius: var(--radius);
  background: rgba(255,255,255,.07);
  border: 1px solid var(--glass-dline);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
}
.project__facts div { display: grid; gap: .25rem; }
.project__facts dt { font-size: .72rem; letter-spacing: .12em; color: rgba(255,255,255,.58); }
.project__facts dd { margin: 0; font-size: clamp(1.1rem, 1.6vw, 1.5rem); font-weight: 700; }

/* --------------------------------------------------------------------------
   14. Parts grid — hover inversion + lift
   -------------------------------------------------------------------------- */
.parts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }

.part {
  position: relative;
  background: var(--paper);
  padding: clamp(1.9rem, 3vw, 3rem);
  min-block-size: clamp(17rem, 26vw, 22rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--dur) var(--ease-swap), box-shadow var(--dur) var(--ease-out);
}
.part:hover, .part:focus-within { color: var(--paper); box-shadow: var(--shadow-glow); z-index: 1; }

.part::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(160deg, var(--cobalt-lift) 0%, var(--cobalt) 45%, var(--cobalt-deep) 100%);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .62s var(--ease-swap);
}
.part:hover::before, .part:focus-within::before { transform: scaleY(1); }

.part__index { font-size: .74rem; letter-spacing: .18em; color: var(--mute); transition: color var(--dur) var(--ease-swap); }
.part:hover .part__index { color: rgba(255,255,255,.7); }

.part__icon { inline-size: 2.7rem; block-size: 2.7rem; color: var(--cobalt); transition: color var(--dur) var(--ease-swap), transform .6s var(--ease-out); }
.part:hover .part__icon { color: var(--paper); transform: translateY(-.3rem) scale(1.04); }

.part__title { font-size: var(--fs-h3); font-weight: 600; }
.part__text  { font-size: var(--fs-small); color: var(--mute); transition: color var(--dur) var(--ease-swap); }
.part:hover .part__text { color: rgba(255,255,255,.82); }

.part__arrow {
  margin-block-start: auto;
  align-self: flex-start;
  inline-size: 1.1rem;
  opacity: 0;
  transform: translateX(.6rem);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.part:hover .part__arrow { opacity: 1; transform: translateX(0); }

/* --------------------------------------------------------------------------
   15. CTA band — cobalt over photography
   -------------------------------------------------------------------------- */
.cta {
  position: relative;
  color: var(--paper);
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(120deg, rgba(0,51,122,.90) 0%, rgba(0,71,171,.78) 52%, rgba(4,10,22,.92) 100%),
    var(--img-cta),
    var(--glass-night);
  background-size: cover;
  background-position: center;
}
.cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--noise);
  opacity: .18;
  mix-blend-mode: overlay;
}
.cta__inner { display: grid; gap: 2rem; justify-items: start; }
.cta__title { max-inline-size: 20ch; }
.cta__lead  { color: rgba(255,255,255,.84); }

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */
.footer { background: var(--ink); color: rgba(255,255,255,.72); padding-block: clamp(3.5rem, 7vw, 6rem) 2rem; }
.footer__top { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: clamp(2rem, 4vw, 3.5rem); }
.footer h4 { font-size: .76rem; letter-spacing: .16em; color: rgba(255,255,255,.45); margin-block-end: 1.1rem; text-transform: uppercase; }
.footer li + li { margin-block-start: .6rem; }
.footer a:hover { color: var(--paper); }
.footer__brand .brand { color: var(--paper); margin-block-end: 1rem; }
.footer__bottom {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  margin-block-start: clamp(2.5rem, 5vw, 4rem);
  padding-block-start: 1.5rem;
  border-block-start: 1px solid rgba(255,255,255,.12);
  font-size: .78rem; color: rgba(255,255,255,.45);
}




/* --------------------------------------------------------------------------
   17. Reveal primitives
   -------------------------------------------------------------------------- */
[data-reveal]      { opacity: 0; transform: translateY(28px); }
[data-reveal-line] { opacity: 0; }
.no-js [data-reveal], .no-js [data-reveal-line], .is-revealed { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   18. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .story { grid-template-columns: 1fr; }
  .story__visual { position: relative; inset-block-start: auto; block-size: 54vh; }
  .story__steps { padding-block: 3rem 0; gap: 3.5rem; }
  .parts { grid-template-columns: repeat(2, 1fr); }
  .footer__top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .nav, .header__cta { display: none; }
  .burger { display: grid; margin-inline-start: auto; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .parts { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr; }
  .scroll-cue { display: none; }
  .hero__title { max-inline-size: 100%; }
  .hero { min-block-size: 92svh; }
  .hero__art { background-size: 160%; }
}

/* --------------------------------------------------------------------------
   19. Accessibility
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .hero__mask { clip-path: inset(0 0 0 0) !important; }
  [data-reveal], [data-reveal-line] { opacity: 1 !important; transform: none !important; }
  body.is-loading { overflow: auto; height: auto; }
}

@media print {
  .header, .scroll-cue, .strip, .cta { display: none; }
  .hero, .project { color: var(--ink); min-block-size: auto; }
  .hero__art, .project__art { display: none; }
}

/* ==========================================================================
   INNER PAGES — added with the site-wide design pass
   Everything below is scoped to classes the homepage does not use, so the
   landing page keeps rendering exactly as before.
   ========================================================================== */

/* --------------------------------------------------------------------------
   P1. Page head — the inner-page equivalent of the hero
   Carries id="hero" so main.js plays the same mask-open; sized to the content
   rather than the viewport, because an inner page has work to show below it.
   -------------------------------------------------------------------------- */
.pagehead {
  position: relative;
  isolation: isolate;
  color: var(--paper);
  display: grid;
  align-items: end;
  min-block-size: clamp(26rem, 52vh, 38rem);
  padding-block: clamp(7rem, 14vh, 11rem) clamp(3rem, 6vh, 5rem);
  overflow: hidden;
}
.pagehead__panel { position: absolute; inset: 0; z-index: -2; }
.pagehead__mask  { position: absolute; inset: 0; clip-path: inset(100% 0 0 0); }
.no-js .pagehead__mask, .pagehead__mask.is-open { clip-path: inset(0 0 0 0); }

.pagehead__art {
  position: absolute; inset: -6% 0;
  background-image: var(--img-hero), var(--glass-wall);
  background-size: cover;
  background-position: 50% 38%;
}
.pagehead__art::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(4, 8, 18, .92) 0%, rgba(4, 8, 18, .55) 46%, rgba(4, 8, 18, .28) 100%),
    var(--noise);
  background-blend-mode: normal, overlay;
}
/* Mullion grid — the same curtain-wall rhythm as the homepage hero */
.pagehead__grid {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, transparent 1px 12.5%),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.05) 0 1px, transparent 1px 25%);
  mask-image: linear-gradient(to top, transparent 0%, #000 55%);
}

.pagehead__inner { display: grid; gap: 1.35rem; justify-items: start; }
.pagehead__title {
  font-size: clamp(2.4rem, 5.6vw, 5.4rem);
  font-weight: 800;
  letter-spacing: -.03em;
  max-inline-size: 20ch;
}
.pagehead__lead { color: rgba(255,255,255,.84); max-inline-size: 52ch; }
.pagehead__meta { display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; margin: .5rem 0 0; }
.pagehead__meta dt { font-size: .7rem; letter-spacing: .16em; color: rgba(255,255,255,.6); }
.pagehead__meta dd { margin: 0; font-weight: 700; }

/* Brushed-aluminium variant, for pages that should read lighter */
.pagehead--alu .pagehead__art { background-image: var(--alu-brushed); }

.crumbs {
  display: flex; align-items: center; gap: .6rem;
  font-size: .78rem; letter-spacing: .04em; color: rgba(255,255,255,.62);
}
.crumbs a { color: inherit; transition: color var(--dur) var(--ease-out); }
.crumbs a:hover { color: var(--paper); }
.crumbs span { opacity: .5; }

/* --------------------------------------------------------------------------
   P2. Case hero — full-bleed project cover
   -------------------------------------------------------------------------- */
.casehero {
  position: relative; isolation: isolate; color: var(--paper);
  display: grid; align-items: end;
  min-block-size: min(92svh, 54rem);
  padding-block-end: clamp(3rem, 8vh, 6rem);
  overflow: hidden;
}
.casehero__panel { position: absolute; inset: 0; z-index: -2; }
.casehero__mask  { position: absolute; inset: 0; clip-path: inset(100% 0 0 0); }
.no-js .casehero__mask, .casehero__mask.is-open { clip-path: inset(0 0 0 0); }
.casehero__art {
  position: absolute; inset: -8% 0;
  background-image: var(--case-image, none), var(--glass-wall);
  background-size: cover; background-position: 50% 42%;
}
.casehero__art::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(3, 7, 16, .94) 4%, rgba(3, 7, 16, .42) 52%, rgba(3, 7, 16, .2) 100%), var(--noise);
  background-blend-mode: normal, overlay;
}
.casehero__grid {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px 10%);
  mask-image: linear-gradient(to top, transparent, #000 60%);
}
.casehero__inner { display: grid; gap: 1.4rem; justify-items: start; }
.casehero__title {
  font-size: clamp(2.6rem, 6.4vw, 6rem);
  font-weight: 800; letter-spacing: -.035em; max-inline-size: 18ch;
}
.casehero__facts {
  display: flex; flex-wrap: wrap; gap: 1.25rem 3.5rem;
  margin: 1rem 0 0; padding-block-start: 1.5rem;
  border-block-start: 1px solid rgba(255,255,255,.18);
  inline-size: 100%;
}
.casehero__facts div { display: grid; gap: .3rem; }
.casehero__facts dt { font-size: .7rem; letter-spacing: .16em; color: rgba(255,255,255,.58); }
.casehero__facts dd { margin: 0; font-size: 1.15rem; font-weight: 700; }

/* --------------------------------------------------------------------------
   P3. Filter bar — sticky, glass, horizontally scrollable on small screens
   -------------------------------------------------------------------------- */
.filterbar {
  /* clears the fixed header, which shrinks to ~4rem once stuck */
  position: sticky; inset-block-start: 4.1rem; z-index: 40;
  background: var(--glass-bg);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-block-end: 1px solid var(--line);
}
.filterbar__inner { display: flex; align-items: center; gap: 1.5rem; padding-block: .9rem; }
.filterbar__scroll {
  display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none;
  padding-block: .15rem;
}
.filterbar__scroll::-webkit-scrollbar { display: none; }
.filterbar__count { margin-inline-start: auto; font-size: var(--fs-small); color: var(--mute); }

.chip {
  flex: none;
  padding: .5rem 1.15rem;
  border: 1px solid var(--line-strong);
  border-radius: 100px;
  font-size: var(--fs-small);
  color: var(--ink-soft);
  white-space: nowrap;
  transition: color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              background var(--dur) var(--ease-out);
}
.chip:hover { border-color: var(--cobalt); color: var(--cobalt); }
.chip.is-active { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chip--link { background: var(--wash); border-color: var(--line); }

/* --------------------------------------------------------------------------
   P4. System cards
   -------------------------------------------------------------------------- */
.syscards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 1px;
  background: var(--line);
  margin-block: clamp(3rem, 7vw, 5.5rem);
  border-block: 1px solid var(--line);
}
.syscard {
  position: relative;
  display: grid; grid-template-rows: auto 1fr;
  background: var(--paper);
  transition: background var(--dur) var(--ease-out);
}
.syscard:hover { background: var(--cobalt-tint); }

.syscard__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.syscard__media img { inline-size: 100%; block-size: 100%; object-fit: contain; transition: transform 1.1s var(--ease-out); }
.syscard:hover .syscard__media img { transform: scale(1.07); }

.syscard__art {
  position: absolute; inset: 0;
  background-image: var(--glass-wall);
  background-size: 140%; background-position: 40% 45%;
  transition: transform 1.1s var(--ease-out);
}
.syscard:hover .syscard__art { transform: scale(1.07); }

/* a single travelling highlight — the glint on anodised metal */
.syscard__sheen {
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.28) 50%, transparent 58%);
  transform: translateX(-120%);
  transition: transform 1.1s var(--ease-out);
}
.syscard:hover .syscard__sheen { transform: translateX(120%); }

.badge {
  position: absolute; inset-block-start: .85rem; inset-inline-start: .85rem;
  padding: .3rem .75rem;
  font-size: .68rem; letter-spacing: .1em;
  background: var(--glass-dark); color: var(--paper);
  border: 1px solid var(--glass-dline);
  backdrop-filter: blur(10px);
}

.syscard__body { display: grid; gap: .75rem; align-content: start; padding: clamp(1.4rem, 2.4vw, 2rem); }
.syscard__head { display: flex; align-items: center; gap: .75rem; font-size: .72rem; letter-spacing: .1em; }
.syscard__code { color: var(--cobalt); font-weight: 700; }
.syscard__cat  { color: var(--mute); }
.syscard__title { font-size: 1.3rem; font-weight: 700; letter-spacing: -.01em; }
.syscard__text  { font-size: var(--fs-small); color: var(--mute); line-height: 1.85; }

.syscard__spec { display: flex; flex-wrap: wrap; gap: 1.25rem; margin: .25rem 0 0; padding-block-start: 1rem; border-block-start: 1px solid var(--line); }
.syscard__spec div { display: grid; gap: .15rem; }
.syscard__spec dt { font-size: .68rem; letter-spacing: .08em; color: var(--mute); }
.syscard__spec dd { margin: 0; font-weight: 700; font-size: .98rem; }
.syscard__spec small { font-weight: 400; color: var(--mute); font-size: .78em; }

.syscard__go {
  display: inline-flex; align-items: center; gap: .45rem;
  margin-block-start: .5rem; font-size: var(--fs-small); font-weight: 600; color: var(--cobalt);
}
.syscard__go svg { inline-size: .85rem; transition: transform var(--dur) var(--ease-out); }
.syscard:hover .syscard__go svg { transform: translateX(-.35rem); }

/* --------------------------------------------------------------------------
   P5. Spec bar (system detail)
   -------------------------------------------------------------------------- */
.specbar { background: var(--ink); color: var(--paper); }
.specbar__inner {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 1px; background: rgba(255,255,255,.12);
}
.specbar__item { background: var(--ink); padding: clamp(1.5rem, 3vw, 2.4rem) 0; display: grid; gap: .4rem; }
.specbar__item dt { font-size: .7rem; letter-spacing: .14em; color: rgba(255,255,255,.55); }
.specbar__item dd { margin: 0; font-size: clamp(1.3rem, 2vw, 1.8rem); font-weight: 800; letter-spacing: -.02em; }
.specbar__item small { font-size: .5em; font-weight: 500; color: rgba(255,255,255,.6); }

/* --------------------------------------------------------------------------
   P6. Detail layout — content + sticky rail
   -------------------------------------------------------------------------- */
.detail { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.detail__rail { position: sticky; inset-block-start: 6.5rem; display: grid; gap: 1.25rem; }

.railcard { padding: clamp(1.4rem, 2.4vw, 2rem); display: grid; gap: 1rem; border-radius: var(--radius); }
.railcard__rule { border: 0; border-block-start: 1px solid var(--line); margin: .25rem 0; }
.railcard__ask  { font-size: var(--fs-small); color: var(--ink-soft); line-height: 1.9; }
.railcard__note { font-size: var(--fs-small); }
.railcard__dl   { justify-content: space-between; }
.railcard__dl svg { inline-size: 1rem; }
.railcard__list { display: grid; gap: .1rem; }
.railcard__list a {
  display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
  padding-block: .7rem; border-block-end: 1px solid var(--line);
  font-size: var(--fs-small); transition: color var(--dur) var(--ease-out);
}
.railcard__list li:last-child a { border-block-end: 0; }
.railcard__list a:hover { color: var(--cobalt); }

.prose { max-inline-size: 68ch; }
.prose--wide { max-inline-size: 74ch; margin-inline: auto; }
.prose p { margin-block-end: 1.4em; color: var(--ink-soft); line-height: var(--lh-body); }
.prose p:last-child { margin-block-end: 0; }
.prose h2, .prose h3 { margin-block: 2.2em .8em; }
.prose a { color: var(--cobalt); text-decoration: underline; text-underline-offset: .25em; }

/* --------------------------------------------------------------------------
   P7. Gallery
   -------------------------------------------------------------------------- */
.gallery {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2vw, 1.75rem);
  margin-block-start: clamp(3rem, 6vw, 5rem);
}
.gallery__item { margin: 0; }
.gallery__item.is-wide { grid-column: 1 / -1; }
.gallery__frame { overflow: hidden; background: var(--wash); aspect-ratio: 16 / 10; }
.gallery__item.is-wide .gallery__frame { aspect-ratio: 16 / 8; }
.gallery__frame img {
  inline-size: 100%; block-size: 100%; object-fit: contain;
  transition: transform 1.2s var(--ease-out), filter 1.2s var(--ease-out);
}
.gallery__item:hover .gallery__frame img { transform: scale(1.045); }
.gallery figcaption { margin-block-start: .7rem; font-size: var(--fs-small); color: var(--mute); }

/* --------------------------------------------------------------------------
   P8. Mini grid — related cards
   -------------------------------------------------------------------------- */
.minigrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); }
.minicard { display: grid; gap: .7rem; align-content: start; }
.minicard__media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--wash); }
.minicard__media img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); }
.minicard:hover .minicard__media img { transform: scale(1.06); }
.minicard__art { position: absolute; inset: 0; background-image: var(--glass-wall); background-size: 150%; }
.minicard__title { font-size: 1.1rem; font-weight: 700; }
.minicard__meta { font-size: var(--fs-small); color: var(--mute); }

/* --------------------------------------------------------------------------
   P9. Pager + empty state
   -------------------------------------------------------------------------- */
.pager { display: flex; align-items: center; justify-content: center; gap: 2rem; padding-block: clamp(2.5rem, 5vw, 4rem); }
.pager__step { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--fs-small); font-weight: 600; }
.pager__step svg { inline-size: .85rem; }
.pager__step.is-off { color: var(--mute); opacity: .45; }
.pager__step:not(.is-off):hover { color: var(--cobalt); }
.pager__count { display: inline-flex; gap: .5rem; font-weight: 700; }
.pager__slash { color: var(--mute); }

.empty {
  display: grid; gap: 1rem; justify-items: center; text-align: center;
  padding-block: clamp(4rem, 10vw, 8rem);
  border: 1px dashed var(--line-strong);
}
.empty .btn { margin-block-start: .5rem; }

/* --------------------------------------------------------------------------
   P10. Showcase — the portfolio.  Alternating editorial rows: an oversized
   photograph in a clipped frame that drifts on scroll, a cobalt duotone wash
   that lifts on hover, and a caption block that rises to meet the cursor.
   -------------------------------------------------------------------------- */
.showcase { display: grid; gap: clamp(5rem, 12vw, 11rem); }

.workcard__link {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  color: inherit;
}
.workcard--b .workcard__link { grid-template-columns: .85fr 1.15fr; }
.workcard--b .workcard__frame { order: 2; }
.workcard--b .workcard__body  { order: 1; }

.workcard__frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--ink);
  isolation: isolate;
  transition: box-shadow .9s var(--ease-out);
  will-change: transform;   /* GSAP owns transform here (data-tilt) */
}
.workcard__link:hover .workcard__frame { box-shadow: var(--shadow-lift); }

/* The media is intentionally oversized: data-parallax slides it inside the frame. */
.workcard__media { position: absolute; inset: -12% 0; will-change: transform; }
.workcard__media img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform 1.4s var(--ease-out); }
.workcard__link:hover .workcard__media img { transform: scale(1.06); }
.workcard__art { position: absolute; inset: 0; background-image: var(--glass-wall); background-size: cover; background-position: 45% 40%; }

/* Duotone wash: cobalt over the shadows, lifted slightly on hover so the
   photograph gains colour instead of losing it. */
.workcard__wash {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to top, rgba(4, 10, 26, .72) 0%, rgba(4, 10, 26, .12) 55%, transparent 100%),
    linear-gradient(140deg, rgba(0, 71, 171, .34), transparent 60%);
  opacity: .78;
  transition: opacity .9s var(--ease-out);
}
.workcard__link:hover .workcard__wash { opacity: .45; }

.workcard__grid {
  position: absolute; inset: 0; z-index: 2;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.10) 0 1px, transparent 1px 16.66%);
  opacity: 0; transition: opacity .9s var(--ease-out);
}
.workcard__link:hover .workcard__grid { opacity: 1; }

.workcard__index {
  position: absolute; z-index: 3;
  inset-block-end: 1.2rem; inset-inline-start: 1.4rem;
  font-size: .78rem; letter-spacing: .22em; font-weight: 700;
  color: rgba(255,255,255,.78);
}

.workcard__body { display: grid; gap: 1.1rem; align-content: center; }
.workcard__sector {
  font-size: var(--fs-eyebrow); letter-spacing: .18em; color: var(--cobalt);
  display: inline-flex; align-items: center; gap: .6rem;
}
.workcard__sector::before { content: ""; inline-size: 1.8rem; block-size: 1px; background: currentColor; }

.workcard__title {
  font-size: clamp(1.8rem, 3.4vw, 3.1rem);
  font-weight: 800; letter-spacing: -.03em; line-height: 1.15;
  max-inline-size: 16ch;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px; background-position: 100% 100%; background-repeat: no-repeat;
  transition: background-size .8s var(--ease-out);
  padding-block-end: .12em;
}
.workcard__link:hover .workcard__title { background-size: 100% 1px; background-position: 0 100%; }

.workcard__text { color: var(--mute); max-inline-size: 46ch; }

.workcard__facts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 2rem; margin: .35rem 0 0;
  padding-block-start: 1.4rem; border-block-start: 1px solid var(--line);
  max-inline-size: 30rem;
}
.workcard__facts div { display: grid; gap: .2rem; }
.workcard__facts dt { font-size: .7rem; letter-spacing: .1em; color: var(--mute); }
.workcard__facts dd { margin: 0; font-weight: 700; }

.workcard__go { margin-block-start: .5rem; justify-self: start; }

/* --------------------------------------------------------------------------
   P11. Custom cursor — a small disc that follows with easing and swells into
   a labelled bubble over anything carrying data-cursor.  Pointer devices only.
   -------------------------------------------------------------------------- */
.cursor {
  /* Physical top/left: JS positions this with clientX/clientY, which are
     always measured from the LEFT edge.  inset-inline-start resolves to the
     RIGHT edge under dir="rtl" and threw the whole pointer off-screen. */
  position: fixed; top: 0; left: 0; z-index: 90;
  pointer-events: none;
  will-change: transform;   /* GSAP owns this element's transform */
}
.cursor__disc {
  display: grid; place-items: center;
  min-inline-size: 4.75rem; block-size: 4.75rem;
  padding-inline: .6rem;
  margin-top: -2.375rem; margin-left: -2.375rem;
  border-radius: 100px;
  background: var(--cobalt); color: var(--paper);
  font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-align: center;
  opacity: 0; transform: scale(.2);
  transition: opacity .35s var(--ease-out), transform .45s var(--ease-out);
}
.cursor.is-on .cursor__disc { opacity: 1; transform: scale(1); }
.cursor__label { max-inline-size: 7rem; line-height: 1.3; }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* --------------------------------------------------------------------------
   P12. News
   -------------------------------------------------------------------------- */
.tag {
  display: inline-flex; align-items: center;
  font-size: .68rem; letter-spacing: .14em; color: var(--cobalt);
  padding: .25rem 0;
}
.leadstory {
  display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center; margin-block-end: clamp(3rem, 7vw, 5.5rem);
}
.leadstory__media { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: var(--ink); }
.leadstory__media img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform 1.3s var(--ease-out); }
.leadstory:hover .leadstory__media img { transform: scale(1.05); }
.leadstory__art { position: absolute; inset: 0; background-image: var(--glass-wall); background-size: cover; }
.leadstory__wash { position: absolute; inset: 0; background: linear-gradient(140deg, rgba(0,71,171,.22), transparent 55%); }
.leadstory__body { display: grid; gap: .9rem; align-content: center; }
.leadstory__title { font-size: clamp(1.6rem, 2.8vw, 2.5rem); font-weight: 800; letter-spacing: -.025em; }
.leadstory__text  { color: var(--mute); max-inline-size: 44ch; }
.leadstory__meta  { font-size: var(--fs-small); color: var(--mute); }

.postgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: clamp(1.75rem, 3.5vw, 3rem); }
.post { display: grid; gap: .7rem; align-content: start; }
.post__media { position: relative; overflow: hidden; aspect-ratio: 3 / 2; background: var(--wash); }
.post__media img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); }
.post:hover .post__media img { transform: scale(1.06); }
.post__art { position: absolute; inset: 0; background-image: var(--alu-brushed); background-size: cover; }
.post__title { font-size: 1.2rem; font-weight: 700; letter-spacing: -.01em; }
.post__text  { font-size: var(--fs-small); color: var(--mute); }
.post__date  { font-size: .78rem; color: var(--mute); }

.article__meta {
  display: flex; flex-wrap: wrap; gap: 1.25rem 3rem;
  padding-block-end: 2rem; margin-block-end: clamp(2rem, 5vw, 3.5rem);
  border-block-end: 1px solid var(--line);
}
.article__meta div { display: grid; gap: .25rem; }
.article__meta dt { font-size: .7rem; letter-spacing: .12em; color: var(--mute); }
.article__meta dd { margin: 0; font-weight: 600; }
.article__cover { margin: 0 0 clamp(2rem, 5vw, 3.5rem); }

.relatedsys { margin-block-start: clamp(3rem, 6vw, 4.5rem); padding-block-start: 2rem; border-block-start: 1px solid var(--line); display: grid; gap: 1rem; }
.relatedsys__list { display: flex; flex-wrap: wrap; gap: .6rem; }

/* --------------------------------------------------------------------------
   P13. About
   -------------------------------------------------------------------------- */
.about__intro { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.about__copy > * + * { margin-block-start: 1.4rem; }
.about__copy p { color: var(--ink-soft); line-height: var(--lh-body); }

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
.steps__item { background: var(--paper); padding: clamp(1.75rem, 3vw, 2.75rem); display: grid; gap: .75rem; align-content: start; transition: background var(--dur) var(--ease-out); }
.steps__item:hover { background: var(--cobalt-tint); }
.steps__num { font-size: .8rem; font-weight: 800; letter-spacing: .2em; color: var(--cobalt); }
.steps__item p { font-size: var(--fs-small); line-height: 1.9; }

.creds { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: clamp(1rem, 2.5vw, 2rem); }
.cred { display: grid; gap: .5rem; padding: clamp(1.25rem, 2.5vw, 2rem); background: var(--paper); border: 1px solid var(--line); }
.cred__code { font-size: 1.05rem; font-weight: 800; letter-spacing: .04em; color: var(--cobalt); }
.cred p { font-size: var(--fs-small); color: var(--mute); }

/* --------------------------------------------------------------------------
   P14. Contact
   -------------------------------------------------------------------------- */
.contact { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.contact__form form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1.5rem; }
.field { display: grid; gap: .5rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: var(--fs-small); font-weight: 600; }
.field .req { color: var(--cobalt); }
.field__hint { font-size: .78rem; color: var(--mute); }
.field__error { font-size: .78rem; color: #B00020; }

.contact__form input[type="text"],
.contact__form input[type="email"],
.contact__form input[type="tel"],
.contact__form input[type="url"],
.contact__form select,
.contact__form textarea {
  inline-size: 100%;
  padding: .95rem 1.1rem;
  font: inherit; font-size: var(--fs-small);
  color: var(--ink);
  background: var(--wash);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.contact__form textarea { min-block-size: 11rem; resize: vertical; line-height: 1.9; }
.contact__form select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--mute) 50%), linear-gradient(135deg, var(--mute) 50%, transparent 50%); background-size: 5px 5px, 5px 5px; background-position: calc(1.1rem) calc(50% + 1px), calc(1.1rem + 5px) calc(50% + 1px); background-repeat: no-repeat; }
.contact__form :is(input, select, textarea):focus-visible {
  outline: none; background: var(--paper);
  border-color: var(--cobalt); box-shadow: 0 0 0 3px var(--cobalt-glow);
}
.contact__form input[type="file"] { font-size: var(--fs-small); color: var(--mute); }
.btn--wide { inline-size: 100%; justify-content: center; }

.formnote { padding: 1rem 1.25rem; border-inline-start: 3px solid var(--cobalt); background: var(--cobalt-tint); font-size: var(--fs-small); margin-block-end: 1.5rem; }
.formnote--error { border-inline-start-color: #B00020; background: #FDF0F2; }

.contact__side { display: grid; gap: 1.25rem; position: sticky; inset-block-start: 6.5rem; }
.contact__list { display: grid; gap: .1rem; }
.contact__list li { display: grid; gap: .2rem; padding-block: .8rem; border-block-end: 1px solid var(--line); font-size: var(--fs-small); }
.contact__list li:last-child { border-block-end: 0; }
.contact__label { font-size: .7rem; letter-spacing: .12em; color: var(--mute); }
.hours { padding: clamp(1.25rem, 2.4vw, 1.75rem); border: 1px solid var(--line); display: grid; gap: .6rem; font-size: var(--fs-small); color: var(--ink-soft); line-height: 1.9; }

.thanks__inner { display: grid; justify-items: center; text-align: center; gap: 1.25rem; padding-block: clamp(4rem, 12vh, 9rem); }
.thanks__mark { color: var(--cobalt); inline-size: 3.5rem; }
.thanks__mark svg { inline-size: 100%; }
.thanks__actions { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; margin-block-start: 1rem; }

/* --------------------------------------------------------------------------
   P15. Footer — rebuilt.  Three bands: an invitation, the matrix, the legal
   bar.  The old flat black box is replaced by a night-elevation ground with
   a hairline aluminium edge, so it reads as the base of the building.
   -------------------------------------------------------------------------- */
.footer {
  position: relative;
  background: var(--ink);
  color: rgba(255, 255, 255, .70);
  padding-block-end: 2rem;
  isolation: isolate;
}
.footer::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background-image: var(--glass-night);
  opacity: .5;
}
/* the brushed edge where the page meets the footer */
.footer::after {
  content: "";
  position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
}
.footer a { transition: color var(--dur) var(--ease-out); }
.footer a:hover { color: var(--paper); }
.footer h4 {
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.42); margin-block-end: 1.2rem; font-weight: 600;
}
.footer li + li { margin-block-start: .7rem; }

/* --- band 1: invitation --- */
.footer__invite { border-block-end: 1px solid rgba(255,255,255,.12); }
.footer__invite-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding-block: clamp(3rem, 7vw, 5rem);
}
.footer__pitch {
  margin-block-start: 1rem;
  font-size: clamp(1.5rem, 3vw, 2.6rem);
  font-weight: 800; letter-spacing: -.03em; line-height: 1.25;
  color: var(--paper); max-inline-size: 18ch;
}
.footer__invite-actions { display: flex; flex-wrap: wrap; gap: .9rem; }

/* --- band 2: matrix --- */
.footer__top {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-block: clamp(3rem, 6vw, 4.5rem);
}
.footer__brand .brand { color: var(--paper); }
.footer__blurb { margin-block-start: 1.1rem; font-size: var(--fs-small); line-height: 1.95; max-inline-size: 34ch; }
.footer__social { display: flex; gap: .6rem; margin-block-start: 1.6rem; }
.footer__social li + li { margin-block-start: 0; }
.footer__social a {
  display: grid; place-items: center;
  inline-size: 2.6rem; block-size: 2.6rem;
  border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.72);
  transition: border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.footer__social svg { inline-size: 1.05rem; block-size: 1.05rem; }
.footer__social a:hover { background: var(--cobalt); border-color: var(--cobalt); color: var(--paper); }

/* each nav link gets a sweep underline rather than a colour change alone */
.footer__col a {
  position: relative; font-size: var(--fs-small);
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px; background-position: 100% 100%; background-repeat: no-repeat;
  transition: background-size .5s var(--ease-out), color var(--dur) var(--ease-out);
  padding-block-end: 2px;
}
.footer__col a:hover { background-size: 100% 1px; background-position: 0 100%; }
.footer__addr { line-height: 1.95; }
.footer__contact { font-style: normal; }

/* --- external links --- */
.footer__external {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  padding-block: clamp(2rem, 4vw, 3rem);
  border-block-start: 1px solid rgba(255,255,255,.12);
}
.footer__external ul { display: flex; flex-wrap: wrap; gap: .6rem 1.75rem; }
.footer__external li + li { margin-block-start: 0; }
.footer__external a { display: inline-flex; align-items: center; gap: .55rem; font-size: var(--fs-small); }
.footer__external img { block-size: 26px; inline-size: auto; opacity: .7; transition: opacity var(--dur) var(--ease-out); }
.footer__external a:hover img { opacity: 1; }

/* --- band 3: legal --- */
.footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 2rem;
  padding-block-start: 1.75rem;
  border-block-start: 1px solid rgba(255,255,255,.12);
  font-size: .78rem; color: rgba(255,255,255,.48);
}
.footer__creds { letter-spacing: .06em; }
.footer__tm { margin-inline-start: auto; }
.footer__top-link { display: inline-flex; align-items: center; gap: .45rem; }
.footer__top-link svg { inline-size: .8rem; }

/* --------------------------------------------------------------------------
   P16. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .detail  { grid-template-columns: 1fr; }
  .detail__rail { position: static; }
  .contact { grid-template-columns: 1fr; }
  .contact__side { position: static; }
  .about__intro { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .workcard__link,
  .workcard--b .workcard__link { grid-template-columns: 1fr; gap: 1.5rem; }
  .workcard--b .workcard__frame { order: 0; }
  .workcard--b .workcard__body  { order: 0; }
  .workcard__frame { aspect-ratio: 3 / 2; }
  .leadstory { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr; }
  .gallery__item.is-wide { grid-column: auto; }
  .contact__form form { grid-template-columns: 1fr; }
  .pagehead { min-block-size: 22rem; }
}

@media (max-width: 600px) {
  .footer__top { grid-template-columns: 1fr; }
  .footer__tm { margin-inline-start: 0; }
  .specbar__inner { grid-template-columns: repeat(2, 1fr); }
  .workcard__facts { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   P17. Reduced motion — keep the design, drop the movement
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .cursor { display: none; }
  .syscard__sheen { display: none; }
  .workcard__frame,
  .workcard__media img,
  .syscard__media img,
  .minicard__media img,
  .gallery__frame img,
  .post__media img,
  .leadstory__media img { transition: none; transform: none !important; }
}

/* ==========================================================================
   E — ELEVATION LAYER  (v3)
   Appended deliberately: everything here overrides the base rules above it,
   so the original design system stays readable and this pass can be reviewed
   — or reverted — as one block.

   Principle: no interaction is a bare colour swap.  Every hover moves mass
   (scale, translate), changes material (blur, sheen, shadow) or reveals
   something that was masked.  Durations sit between .45s and .9s on
   --ease-out so motion decelerates the way physical objects do.
   ========================================================================== */

:root {
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-fast:    .35s;
  --dur-slow:    .9s;

  --shell-bg:    rgba(255, 255, 255, .78);
  --shell-line:  rgba(255, 255, 255, .55);
  --shell-glow:  0 20px 50px -26px rgba(7, 10, 15, .42);
  --radius-pill: 999px;
  --radius-lg:   4px;
}

/* --------------------------------------------------------------------------
   E1. Header — a floating glass capsule
   -------------------------------------------------------------------------- */
.header {
  padding-block: clamp(.9rem, 1.6vw, 1.5rem);
  background: none;
  box-shadow: none;
  transition: padding var(--dur-slow) var(--ease-out), color var(--dur) var(--ease-out);
}
.header.is-stuck {
  padding-block: .55rem;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}
.header::after {
  background: linear-gradient(180deg, rgba(7,10,15,.62) 0%, rgba(7,10,15,0) 100%);
  block-size: 190%;
}

/* Scroll-progress hairline — the only thing pinned to the very top edge. */
.header__progress {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 2px;
  overflow: hidden;
  pointer-events: none;
}
.header__progress i {
  display: block;
  block-size: 100%;
  inline-size: 100%;
  transform: scaleX(0);
  transform-origin: inline-start;
  background: linear-gradient(90deg, var(--cobalt), var(--cobalt-lift));
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
}
.header.is-stuck .header__progress i { opacity: 1; }

.header__shell {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(.75rem, 2.4vw, 2.5rem);
  padding: .5rem .5rem .5rem 1rem;
  border-radius: var(--radius-pill);
  isolation: isolate;
}
/* The glass itself is a pseudo-element so it can fade and scale independently
   of the content, instead of the whole bar snapping between two states. */
.header__shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--shell-bg);
  border: 1px solid var(--shell-line);
  box-shadow: var(--shell-glow);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  opacity: 0;
  transform: scale(.97);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.header.is-stuck .header__shell::before { opacity: 1; transform: scale(1); }

.header__aside { display: flex; align-items: center; gap: clamp(.6rem, 1.4vw, 1.4rem); }

/* --- brand ---------------------------------------------------------------- */
.brand { gap: .7rem; align-items: center; }
.brand__mark {
  display: grid; place-items: center;
  inline-size: 2.35rem; block-size: 2.35rem;
  border-radius: var(--radius-lg);
  background: var(--cobalt);
  color: var(--paper);
  box-shadow: 0 10px 24px -12px var(--cobalt-glow);
  transition: transform .7s var(--ease-spring), box-shadow var(--dur) var(--ease-out);
}
.brand__mark svg { inline-size: 1.35rem; block-size: 1.35rem; }
.brand:hover .brand__mark { transform: rotate(-8deg) scale(1.06); box-shadow: 0 16px 34px -12px var(--cobalt-glow); }
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__fa { font-size: 1.22rem; }
.brand__en { font-size: .58rem; letter-spacing: .34em; opacity: .55; }

/* --- nav: a pill that scales in under a flipping label -------------------- */
.nav { gap: .15rem; margin-inline-start: auto; align-items: center; }
.nav__link {
  position: relative;
  padding: .62rem 1.05rem;
  border-radius: var(--radius-pill);
  overflow: hidden;
  isolation: isolate;
  font-weight: 600;
}
.nav__link::after { content: none; }          /* retire the old underline */
.nav__link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: currentColor;
  opacity: 0;
  transform: scale(.72);
  transition: opacity var(--dur) var(--ease-out), transform .6s var(--ease-spring);
}
.nav__link:hover::before,
.nav__link:focus-visible::before { opacity: .1; transform: scale(1); }
.nav__link.is-current::before { opacity: .14; transform: scale(1); }

.nav__flip { position: relative; display: block; overflow: hidden; }
.nav__flip > span {
  display: block;
  transition: transform .62s var(--ease-swap);
}
.nav__flip > span + span {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 100%;
  transform: translateY(112%);
  color: var(--cobalt);
}
.header:not(.is-stuck) .nav__flip > span + span { color: var(--paper); }
.nav__link:hover .nav__flip > span,
.nav__link:focus-visible .nav__flip > span { transform: translateY(-112%); }
.nav__link:hover .nav__flip > span + span,
.nav__link:focus-visible .nav__flip > span + span { transform: translateY(0); }

/* --- language: a true segmented control ----------------------------------- */
.lang {
  gap: .1rem;
  padding: .22rem;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.12);
  border: 1px solid var(--glass-dline);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.header.is-stuck .lang { background: rgba(7,10,15,.05); border-color: var(--line); }
.lang__item {
  position: relative;
  padding: .34rem .6rem;
  border-radius: var(--radius-pill);
  opacity: .62;
  transition: opacity var(--dur) var(--ease-out), background var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.lang__item:hover { opacity: 1; transform: translateY(-1px); }
.lang__item.is-active {
  opacity: 1;
  background: var(--paper);
  color: var(--cobalt);
  box-shadow: 0 4px 12px -6px rgba(7,10,15,.5);
}
.header.is-stuck .lang__item.is-active { background: var(--cobalt); color: var(--paper); }

/* --- CTA: sheen sweep on top of the existing fill -------------------------- */
.btn { border-radius: var(--radius-pill); }
.btn__label { position: relative; z-index: 1; }
.btn::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: -60%;
  inline-size: 40%;
  z-index: 0;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-18deg);
  transition: inset-inline-start .85s var(--ease-out);
  pointer-events: none;
}
.btn:hover::after, .btn:focus-visible::after { inset-inline-start: 120%; }
.btn:hover, .btn:focus-visible { transform: translateY(-3px); }
.btn:active { transform: translateY(-1px) scale(.985); }
.header__cta { padding: .7rem 1.3rem; }

/* --- burger: two bars that cross ------------------------------------------ */
.burger { display: none; inline-size: 2.75rem; block-size: 2.75rem; border-radius: var(--radius-pill); }
/* `.burger span` in the base sheet also matches this wrapper — which is itself
   a <span> — and collapsed it to a single 1.5px bar.  Reset it, then style
   only the direct children. */
.burger > .burger__box {
  display: grid; gap: .4rem; place-items: center;
  inline-size: auto; block-size: auto; background: none; margin: 0;
}
.burger > .burger__box > span {
  inline-size: 1.4rem; block-size: 1.5px; background: currentColor; margin: 0;
  transition: transform .5s var(--ease-spring), opacity .3s linear;
}
.burger[aria-expanded="true"] > .burger__box > span:first-child { transform: translateY(.47rem) rotate(45deg); }
.burger[aria-expanded="true"] > .burger__box > span:last-child  { transform: translateY(-.47rem) rotate(-45deg); }

/* --------------------------------------------------------------------------
   E2. Mobile sheet
   -------------------------------------------------------------------------- */
.menu {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: grid;
  background: rgba(7, 10, 15, .82);
  backdrop-filter: saturate(160%) blur(26px);
  -webkit-backdrop-filter: saturate(160%) blur(26px);
  color: var(--paper);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease-out);
}
.menu.is-open { opacity: 1; pointer-events: auto; }
.menu__inner {
  align-self: center;
  display: grid;
  gap: clamp(2rem, 6vw, 3.5rem);
  padding-block: 6rem 3rem;
}
.menu__nav { display: grid; }
.menu__link {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-block: clamp(.7rem, 2.2vw, 1.1rem);
  border-block-end: 1px solid rgba(255,255,255,.12);
  font-size: clamp(1.7rem, 7vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -.03em;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out), color var(--dur) var(--ease-out);
}
.menu.is-open .menu__link { opacity: 1; transform: none; }
.menu.is-open .menu__link:nth-child(1) { transition-delay: .06s; }
.menu.is-open .menu__link:nth-child(2) { transition-delay: .12s; }
.menu.is-open .menu__link:nth-child(3) { transition-delay: .18s; }
.menu.is-open .menu__link:nth-child(4) { transition-delay: .24s; }
.menu.is-open .menu__link:nth-child(5) { transition-delay: .30s; }
.menu__link:hover { color: var(--cobalt-lift); }
.menu__idx { font-size: .8rem; font-weight: 600; letter-spacing: .18em; opacity: .45; }
.menu__foot { display: grid; gap: 1.25rem; justify-items: start; }
.menu__creds { font-size: .74rem; letter-spacing: .1em; opacity: .5; }
body.menu-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   E3. Pointer — a lagging ring around a precise dot
   The ring lerps behind the dot, so the pointer has weight; over anything
   interactive it swells and inverts.  Fine pointers only, JS-gated, so a
   touch device or a blocked CDN never loses its cursor.
   -------------------------------------------------------------------------- */
.cursor { z-index: 9999; mix-blend-mode: difference; }
.cursor__ring {
  position: absolute;
  top: 0; left: 0;
  inline-size: 2.4rem; block-size: 2.4rem;
  margin-block-start: -1.2rem;
  margin-inline-start: -1.2rem;
  border: 1.5px solid rgba(255,255,255,.85);
  border-radius: 50%;
  transition: inline-size .45s var(--ease-spring), block-size .45s var(--ease-spring),
              margin .45s var(--ease-spring), background .45s var(--ease-out),
              opacity .35s var(--ease-out);
}
.cursor__dot {
  position: absolute;
  top: 0; left: 0;
  inline-size: .32rem; block-size: .32rem;
  margin-block-start: -.16rem;
  margin-inline-start: -.16rem;
  border-radius: 50%;
  background: #fff;
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out);
}
html.cursor-hot .cursor__ring {
  inline-size: 4rem; block-size: 4rem;
  margin: -2rem 0 0 -2rem;
  background: rgba(255,255,255,.14);
}
html.cursor-hot .cursor__dot { opacity: 0; transform: scale(.2); }
html.cursor-down .cursor__ring { transform: scale(.82); }

/* The labelled bubble kept from v2, now nested in the same element. */
.cursor__disc { mix-blend-mode: normal; }

/* Native cursor is hidden only once the custom one is actually on screen. */
html.has-cursor, html.has-cursor a, html.has-cursor button { cursor: none; }
html.has-cursor input, html.has-cursor textarea, html.has-cursor select { cursor: auto; }
@media (hover: none), (pointer: coarse) { html.has-cursor, html.has-cursor * { cursor: auto; } }

/* --------------------------------------------------------------------------
   E4. Stat unit — the piece that used to render "م²" on English pages
   -------------------------------------------------------------------------- */
.stat__unit { font-size: .38em; font-weight: 600; margin-inline-start: .35em; color: var(--mute); }
.stat { position: relative; overflow: hidden; }
.stat::before {
  content: "";
  position: absolute;
  inset-inline: 0; inset-block-end: 0;
  block-size: 2px;
  background: var(--cobalt);
  transform: scaleX(0);
  transform-origin: inline-start;
  transition: transform .7s var(--ease-out);
}
.stat:hover::before { transform: scaleX(1); }
.stat__value { transition: transform .6s var(--ease-out); }
.stat:hover .stat__value { transform: translateY(-2px); }

/* --------------------------------------------------------------------------
   E5. FEATURED PROJECTS — a snap rail that scales from 6 cards to 12+
   Layout is CSS scroll-snap, so it works with the CDN blocked, with JS off,
   with a trackpad, with a touch swipe and with the keyboard.  GSAP only adds
   the entrance stagger and the drag-to-scroll.
   -------------------------------------------------------------------------- */
.featured { position: relative; overflow: hidden; padding-block: var(--section-y); }
.featured::before {
  content: "";
  position: absolute;
  inset-block-start: 0; inset-inline: 0;
  block-size: 1px;
  background: var(--line);
}

.featured__head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 1.5rem clamp(1.5rem, 4vw, 3rem);
  margin-block-end: clamp(2.25rem, 4vw, 3.25rem);
}
.featured__intro { flex: 1 1 34rem; max-inline-size: 60ch; display: grid; gap: .9rem; }
.featured__intro .lead { max-inline-size: 52ch; }
.featured__tools { display: flex; align-items: center; gap: .6rem; }

.rail-btn {
  display: grid; place-items: center;
  inline-size: 3rem; block-size: 3rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong);
  color: var(--ink);
  background: var(--paper);
  transition: transform .5s var(--ease-spring), background var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
}
.rail-btn svg { inline-size: 1rem; block-size: 1rem; }
.rail-btn:hover:not(:disabled) {
  background: var(--cobalt); border-color: var(--cobalt); color: var(--paper);
  transform: scale(1.08); box-shadow: var(--shadow-glow);
}
.rail-btn:disabled { opacity: .3; cursor: default; }
[dir="ltr"] .rail-btn svg { transform: scaleX(-1); }

.featured__rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(min(78vw, 25rem), 1fr);
  gap: clamp(1rem, 1.8vw, 1.75rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  padding-block-end: 1.25rem;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%);
}
.featured__rail::-webkit-scrollbar { display: none; }
.featured__rail.is-dragging { cursor: grabbing; scroll-snap-type: none; }

/* --- the card ------------------------------------------------------------- */
.work {
  position: relative;
  scroll-snap-align: start;
  display: grid;
  align-content: end;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--radius-lg);
  aspect-ratio: 3 / 4;
  color: var(--paper);
  background: var(--ink);
  transition: transform .85s var(--ease-out), box-shadow .85s var(--ease-out);
}
.work:hover { transform: translateY(-8px); box-shadow: 0 40px 80px -40px rgba(7,10,15,.6); }

.work__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.work__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.work__art {
  position: absolute; inset: -2%;
  background-image: var(--glass-wall);
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
  transition: transform 1.4s var(--ease-out), filter 1.4s var(--ease-out);
}
.work:hover .work__art, .work:hover .work__media img { transform: scale(1.09); }
/* Each card is tinted a few degrees off the last so a rail of placeholders
   reads as six different buildings rather than one repeated swatch. */
.work:nth-child(6n+2) .work__art { filter: hue-rotate(-18deg) saturate(1.1); }
.work:nth-child(6n+3) .work__art { background-image: var(--alu-brushed); }
.work:nth-child(6n+4) .work__art { filter: hue-rotate(22deg) brightness(.95); }
.work:nth-child(6n+5) .work__art { background-image: var(--glass-night); }
.work:nth-child(6n+6) .work__art { filter: hue-rotate(-34deg) saturate(.9); }

.work__veil {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(178deg, rgba(7,10,15,0) 34%, rgba(7,10,15,.72) 78%, rgba(7,10,15,.9) 100%);
  transition: opacity .8s var(--ease-out);
}
.work:hover .work__veil { opacity: .92; }

.work__index {
  position: absolute;
  inset-block-start: 1.15rem;
  inset-inline-start: 1.25rem;
  font-size: .7rem; font-weight: 700; letter-spacing: .2em;
  padding: .35rem .6rem;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.14);
  border: 1px solid var(--glass-dline);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background var(--dur) var(--ease-out), transform .6s var(--ease-spring);
}
.work:hover .work__index { background: var(--cobalt); transform: translateY(-2px); }

.work__body {
  display: grid;
  gap: .45rem;
  padding: clamp(1.25rem, 2vw, 1.75rem);
  transform: translateY(clamp(1.5rem, 2.6vw, 2.4rem));
  transition: transform .8s var(--ease-out);
}
.work:hover .work__body, .work:focus-visible .work__body { transform: translateY(0); }

.work__sector { font-size: .7rem; letter-spacing: .18em; opacity: .75; }
.work__title  { font-size: clamp(1.15rem, 1.7vw, 1.5rem); font-weight: 700; letter-spacing: -.02em; }
.work__meta   { font-size: var(--fs-small); opacity: .72; }

/* The "view project" line is masked out of the layout until hover. */
.work__go {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-block-start: .35rem;
  font-size: var(--fs-small); font-weight: 600;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .55s var(--ease-out) .05s, transform .55s var(--ease-out) .05s;
}
.work:hover .work__go, .work:focus-visible .work__go { opacity: 1; transform: none; }
.work__go svg { inline-size: .85rem; }
[dir="ltr"] .work__go svg { transform: scaleX(-1); }

.work__line {
  position: absolute;
  inset-block-end: 0; inset-inline: 0;
  block-size: 3px;
  background: var(--cobalt);
  transform: scaleX(0);
  transform-origin: inline-start;
  transition: transform .8s var(--ease-out);
}
.work:hover .work__line, .work:focus-visible .work__line { transform: scaleX(1); }

/* --- rail progress -------------------------------------------------------- */
.featured__progress {
  position: relative;
  block-size: 2px;
  background: var(--line);
  margin-block-start: clamp(1.5rem, 3vw, 2.25rem);
  overflow: hidden;
}
.featured__progress i {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 22%;
  background: var(--cobalt);
  transform: translateX(0);
}
.featured__foot { display: flex; justify-content: flex-end; margin-block-start: 1.25rem; }

/* --------------------------------------------------------------------------
   E6. Magnetic elements — JS moves them, CSS only declares the easing back
   -------------------------------------------------------------------------- */
[data-magnetic] { will-change: transform; }

/* --------------------------------------------------------------------------
   E7. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .nav__link { padding-inline: .8rem; }
  .brand__en { display: none; }
}

@media (max-width: 900px) {
  .nav, .header__cta { display: none; }
  .burger { display: grid; margin-inline-start: auto; }
  .header__aside { margin-inline-start: auto; }
  .header__shell { padding-inline: .9rem; }
}

@media (max-width: 768px) {
  .header__shell::before { opacity: 1; transform: scale(1); }
  .header:not(.is-stuck) { color: var(--ink); }
  .header:not(.is-stuck) .lang { background: rgba(7,10,15,.05); border-color: var(--line); }
  .header:not(.is-stuck) .lang__item.is-active { background: var(--cobalt); color: var(--paper); }
  .featured__rail { grid-auto-columns: minmax(80vw, 1fr); }
  .featured__tools { display: none; }
  .work { aspect-ratio: 4 / 5; }
  .work__body { transform: none; }
  .work__go { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   E8. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .cursor { display: none; }
  html.has-cursor, html.has-cursor * { cursor: auto; }
  .work, .work__art, .work__body, .work__go, .work__veil,
  .nav__flip > span, .header__shell::before, .brand__mark, .btn::after {
    transition: none !important;
    transform: none !important;
  }
  .work__go { opacity: 1; }
  .menu__link { opacity: 1; transform: none; transition: none; }
}

/* Preview banner on placeholder project URLs (see ProjectPreviewView). */
.notice {
  display: flex; align-items: center; gap: .7rem;
  margin-block-start: clamp(2rem, 4vw, 3rem);
  padding: .9rem 1.2rem;
  border-radius: var(--radius-lg);
  border: 1px dashed var(--line-strong);
  background: var(--cobalt-tint);
  color: var(--ink-soft);
  font-size: var(--fs-small);
}
.notice::before {
  content: "";
  inline-size: .5rem; block-size: .5rem; flex: none;
  border-radius: 50%;
  background: var(--cobalt);
}


/* --------------------------------------------------------------------------
   E9. Direction corrections
   The chevrons in this design point "forward" in Persian, which is leftward.
   On an English page every one of them has to be mirrored, or the CTA reads
   as a back button.  Collected here so the whole set stays consistent.
   -------------------------------------------------------------------------- */
[dir="ltr"] .btn__icon,
[dir="ltr"] .link-line svg,
[dir="ltr"] .part__arrow,
[dir="ltr"] .crumbs svg,
[dir="ltr"] .pager__step svg { transform: scaleX(-1); }
[dir="ltr"] .btn:hover .btn__icon,
[dir="ltr"] .btn:focus-visible .btn__icon { transform: scaleX(-1) translateX(-.3rem); }

/* The Persian and Latin wordmarks say the same thing on an English page
   ("Alupan" / "ALUPAN"), so only one of them belongs there. */
[dir="ltr"] .brand__en { display: none; }

/* On a white page the glass capsule needs an edge, or it disappears. */
.header.is-stuck .header__shell::before {
  border-color: rgba(7, 10, 15, .07);
  box-shadow: 0 1px 2px rgba(7, 10, 15, .04), 0 22px 55px -30px rgba(7, 10, 15, .5);
}