/* ============================================================
   Kareem Ahmed — Applied AI Engineer
   Design system: DM Serif Display / Space Grotesk / JetBrains Mono
   ============================================================ */

:root {
  --ground:      #FFF9F1;
  --ground-2:    #F0EBE0;
  --sand:        #E7D6BD;
  --ink:         #060606;
  --ink-soft:    #6B675E;
  --line:        #DDD6C8;
  --display-c:   #FFF9E9;
  --sky-from:    #71B7F4;
  --sky-to:      #5788B3;
  --accent:      #F5C542;
  --card:        #FFFFFF;

  --f-display: "DM Serif Display", Georgia, serif;
  --f-body:    "Space Grotesk", system-ui, sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, monospace;

  --pad: clamp(1.25rem, 4vw, 4.5rem);
  --ease: cubic-bezier(.22,1,.36,1);
  --radius: 28px;
  color-scheme: light;
}

html[data-theme="night"] {
  --ground:    #10151F;
  --ground-2:  #0B1220;
  --sand:      #16202F;
  --ink:       #F2EFE8;
  --ink-soft:  #9AA3B2;
  --line:      #2A3446;
  --card:      #161E2C;
  color-scheme: dark;
}

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

/* A component `display` beats the UA stylesheet's [hidden] rule, which silently
   leaves fixed overlays on top of the page swallowing every click. */
[hidden] { display: none !important; }

html { scrollbar-gutter: stable; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.6;
  overflow-x: clip;
  transition: background .6s var(--ease), color .6s var(--ease);
}
body.is-loading { height: 100vh; overflow: hidden; }

img { display: block; width: 100%; height: auto; }
h1, h2, h3, p, dl, dd, ol, ul, figure, blockquote { margin: 0; }
ul, ol { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

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

.skip-link {
  position: fixed; top: -100px; left: 1rem; z-index: 99;
  background: var(--ink); color: var(--ground); padding: .6rem 1rem; border-radius: 8px;
}
.skip-link:focus { top: 1rem; }

/* ---------- grain ---------- */
.grain {
  position: fixed; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 60; opacity: .035; mix-blend-mode: multiply;
}
html[data-theme="night"] .grain { mix-blend-mode: screen; opacity: .05; }

/* ---------- typography roles ---------- */
.eyebrow {
  font-family: var(--f-mono);
  font-size: 12px; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--ink-soft);
  display: flex; align-items: center; gap: .55rem;
}
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }

.h1-serif, .h2-serif {
  font-family: var(--f-display); font-weight: 400; line-height: 1.05;
  letter-spacing: .5px;
}
.h1-serif { font-size: clamp(40px, 6.5vw, 92px); }
.h2-serif { font-size: clamp(30px, 4.4vw, 62px); }
.h2-serif.big { font-size: clamp(36px, 6vw, 86px); }

.text-link {
  font-family: var(--f-mono); font-size: 12px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase;
  border-bottom: 1px solid currentColor; padding-bottom: 2px;
  transition: opacity .3s var(--ease);
}
.text-link:hover { opacity: .55; }

.btn-solid {
  font-family: var(--f-mono); font-size: 12px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase;
  background: var(--ink); color: var(--ground);
  padding: 1.05rem 2.1rem; border-radius: 999px;
  transition: transform .3s var(--ease);
}
.btn-solid:hover { transform: translateY(-2px); }

/* ---------- loader ---------- */
.loader {
  position: fixed; inset: 0; z-index: 90;
  background: var(--ground);
  display: grid; place-items: center;
  transition: transform .9s var(--ease);
}
.loader.is-done { transform: translateY(-100%); }
.loader-inner { width: min(420px, 78vw); text-align: center; }
.loader-mark {
  font-family: var(--f-display); font-size: clamp(48px, 10vw, 76px); display: block; margin-bottom: 1.4rem;
}
.loader-bar { height: 2px; background: var(--line); overflow: hidden; }
.loader-bar i { display: block; height: 100%; width: 0; background: var(--ink); }
.loader-meta {
  display: flex; justify-content: space-between; margin-top: .7rem;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase;
}

/* ---------- route curtain ---------- */
.curtain { position: fixed; inset: 0; z-index: 80; pointer-events: none; }
.curtain span {
  position: absolute; inset: 0; background: var(--ink);
  transform: scaleY(0); transform-origin: bottom;
}
.curtain.is-in span { animation: curtainIn .5s var(--ease) forwards; }
.curtain.is-out span { animation: curtainOut .5s var(--ease) forwards; }
@keyframes curtainIn  { from { transform: scaleY(0); transform-origin: bottom } to { transform: scaleY(1); transform-origin: bottom } }
@keyframes curtainOut { from { transform: scaleY(1); transform-origin: top }    to { transform: scaleY(0); transform-origin: top } }

/* ---------- nav ---------- */
.nav-place {
  position: fixed; top: 1.1rem; left: 0; right: 0; z-index: 70;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--pad); pointer-events: none;
}
.nav-place > * { pointer-events: auto; }

.nav-loc {
  font-family: var(--f-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 1.3px; text-transform: uppercase;
  display: flex; align-items: center; gap: .45rem;
  color: var(--ink);
}
.nav-loc .pin { width: 8px; height: 8px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); border: 2px solid currentColor; }

.nav-pill {
  display: flex; align-items: center; gap: .3rem;
  background: color-mix(in srgb, var(--ground) 72%, transparent);
  backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  border-radius: 999px; padding: .38rem .38rem .38rem .42rem;
  box-shadow: 0 8px 30px -12px rgba(0,0,0,.28);
  transition: gap .5s var(--ease), padding .5s var(--ease);
}
.nav-avatar {
  width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex: none;
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
}
.nav-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }

.nav-links { display: flex; align-items: center; gap: .2rem; margin: 0 .3rem; }
.nav-links a {
  padding: .55rem .95rem; border-radius: 999px; font-size: 15px; font-weight: 500;
  color: var(--ink-soft); transition: color .3s var(--ease), background .3s var(--ease);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a.is-active { color: var(--ink); background: color-mix(in srgb, var(--ink) 7%, transparent); }

.nav-cta {
  display: flex; align-items: center; gap: .5rem;
  background: var(--card); color: var(--ink);
  padding: .62rem 1.1rem; border-radius: 999px; font-size: 15px; font-weight: 500;
  box-shadow: 0 2px 10px -4px rgba(0,0,0,.25);
  transition: transform .3s var(--ease);
}
.nav-cta:hover { transform: translateY(-1px); }
.nav-cta-ico {
  width: 20px; height: 20px; flex: none; display: grid; place-items: center;
}
.nav-cta-ico svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nav-cta-ico circle { fill: currentColor; stroke: none; }

.theme-toggle { display: flex; align-items: center; }
.tt-track {
  width: 62px; height: 30px; border-radius: 999px;
  background: color-mix(in srgb, var(--ground) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  backdrop-filter: blur(18px);
  display: flex; align-items: center; padding: 3px; position: relative;
  direction: ltr;
}
.tt-thumb {
  width: 22px; height: 22px; border-radius: 50%; background: var(--accent);
  transition: transform .45s var(--ease), background .45s var(--ease);
  position: relative; z-index: 1;
}
html[data-theme="night"] .tt-thumb { transform: translateX(32px); background: #F3EEDF; }
.tt-icon {
  position: absolute; top: 50%; z-index: 2; width: 14px; height: 14px;
  transform: translateY(-50%); pointer-events: none;
  transition: color .35s var(--ease), opacity .35s var(--ease);
}
.tt-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tt-sun { left: 7px; color: #362B08; }
.tt-moon { right: 7px; color: var(--ink); opacity: .45; }
html[data-theme="night"] .tt-sun { color: var(--ink-soft); opacity: .45; }
html[data-theme="night"] .tt-moon { color: #10151F; opacity: 1; }

/* burger — only where the inline links are not available */
.nav-burger { display: none; width: 40px; height: 40px; border-radius: 50%; place-items: center; }
.nav-burger span, .nav-burger span::before, .nav-burger span::after {
  display: block; width: 17px; height: 2px; background: var(--ink); border-radius: 2px;
}
.nav-burger span { position: relative; }
.nav-burger span::before, .nav-burger span::after { content: ""; position: absolute; left: 0; }
.nav-burger span::before { top: -6px; }
.nav-burger span::after  { top: 6px; }

/* mobile menu */
.menu {
  position: fixed; inset: 0; z-index: 78; background: var(--ground);
  display: grid; align-content: center; justify-items: center; gap: 2rem;
  opacity: 0; transition: opacity .4s var(--ease);
}
.menu.in { opacity: 1; }
.menu-close { position: absolute; top: 1.2rem; right: 1.6rem; font-size: 34px; line-height: 1; }
.menu-nav { display: grid; gap: .4rem; justify-items: center; }
.menu-nav a { font-family: var(--f-display); font-size: clamp(34px, 9vw, 56px); line-height: 1.15; }
.menu-nav a.is-active { color: var(--ink-soft); }

/* ---------- HERO ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-content: center;
  padding: 0 var(--pad);
  overflow: hidden;
  isolation: isolate;
}

.hero-sky { position: absolute; inset: 0; z-index: -1; }
.sky-day {
  position: absolute; inset: 0;
  background: radial-gradient(900px 1200px at 70% 20%, var(--sky-from) 0%, var(--sky-to) 100%);
  transition: opacity .8s var(--ease);
}
.sky-night {
  position: absolute; inset: 0; opacity: 0;
  background:
    radial-gradient(800px 620px at 72% 14%, rgba(108, 137, 180, .62), transparent 58%),
    radial-gradient(900px 1000px at 14% 82%, rgba(28, 55, 88, .7), transparent 64%),
    linear-gradient(155deg, #273b61 0%, #172740 48%, #09111f 100%);
  transition: opacity .8s var(--ease);
}
.stars {
  position: absolute; inset: 0; opacity: 0; transition: opacity .8s var(--ease);
  background-image:
    radial-gradient(1.6px 1.6px at 12% 18%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 32% 42%, #fff, transparent),
    radial-gradient(1.8px 1.8px at 58% 12%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 78% 34%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 88% 8%,  #fff, transparent),
    radial-gradient(1.2px 1.2px at 45% 62%, #fff, transparent),
    radial-gradient(1.6px 1.6px at 68% 52%, #fff, transparent);
}
.stars::before,
.stars::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 8% 58%, rgba(255,255,255,.9), transparent),
    radial-gradient(1px 1px at 22% 8%, rgba(255,255,255,.75), transparent),
    radial-gradient(1.3px 1.3px at 39% 27%, rgba(255,255,255,.9), transparent),
    radial-gradient(1px 1px at 52% 73%, rgba(255,255,255,.72), transparent),
    radial-gradient(1.2px 1.2px at 72% 68%, rgba(255,255,255,.85), transparent),
    radial-gradient(1px 1px at 94% 49%, rgba(255,255,255,.75), transparent);
  animation: twinkle 5.5s ease-in-out infinite alternate;
}
.stars::after { opacity: .55; transform: scaleX(-1); animation-delay: -2.8s; }
@keyframes twinkle { from { opacity: .35; } to { opacity: 1; } }
html[data-theme="night"] .sky-day { opacity: 0; }
html[data-theme="night"] .sky-night,
html[data-theme="night"] .stars { opacity: 1; }

.sun, .moon {
  position: absolute; top: 9%; right: 12%;
  width: clamp(110px, 13vw, 190px); height: auto;
  transition: opacity .8s var(--ease);
  will-change: transform;
  transform: translate3d(0, var(--sy, 0px), 0);
}
.moon { opacity: 0; }
html[data-theme="night"] .sun { opacity: 0; }
html[data-theme="night"] .moon { opacity: 1; filter: drop-shadow(0 0 28px rgba(234, 240, 255, .3)); }

/* The layer carries gentle scroll depth; the cloud inside it drifts on its own. */
.cloud-layer {
  position: absolute; will-change: transform;
  transform: translate3d(var(--sx, 0px), var(--sy, 0px), 0);
}
.cloud { width: clamp(150px, 20vw, 300px); will-change: transform; }
.layer-a { top: 20%; left: -14%; }
.layer-b { top: 11%; left: -10%; opacity: .72; }
.layer-c { top: 33%; left: -18%; opacity: .55; }
.layer-a .cloud { animation: drift 68s linear infinite; }
.layer-b .cloud { animation: drift 104s linear infinite; animation-delay: -34s; }
.layer-c .cloud { animation: drift 86s linear infinite; animation-delay: -61s; }
@keyframes drift { from { transform: translateX(0) } to { transform: translateX(140vw) } }
html[data-theme="night"] .cloud-layer { opacity: .12; }

/* sun turns slowly, so its stripes are always alive */
.sun { animation: spin 150s linear infinite; }
@keyframes spin { to { rotate: 360deg } }

/* plane + contrail */
.flight {
  position: absolute; top: 26%; left: 0;
  display: flex; align-items: center;
  animation: fly 26s linear infinite; animation-delay: 4s;
  will-change: transform;
}
.contrail {
  display: block; width: clamp(60px, 9vw, 130px); height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,249,233,.75));
  border-radius: 2px;
}
.plane-sprite { width: 22px; height: 22px; margin-left: -2px; rotate: -8deg; }
@keyframes fly {
  from { transform: translate3d(-16vw, 0, 0) }
  to   { transform: translate3d(118vw, -7vh, 0) }
}
html[data-theme="night"] .flight { opacity: .35; }

/* birds — body + two wings hinged at the shoulder, not a single stroke */
.bird { position: absolute; width: 34px; opacity: .72; will-change: transform; }
.bird-1 { top: 40%; animation: glide 38s linear infinite; }
.bird-2 { top: 44%; width: 26px; opacity: .6; animation: glide 46s linear infinite; animation-delay: -12s; }
.bird-3 { top: 36%; width: 21px; opacity: .5; animation: glide 54s linear infinite; animation-delay: -28s; }

/* fill-box keeps each wing's origin at its own shoulder, not the SVG corner */
.bird .wing { transform-box: fill-box; animation: flap 1.5s ease-in-out infinite; }
.bird .wing-l { transform-origin: 100% 50%; }
.bird .wing-r { transform-origin: 0% 50%; }
.bird-2 .wing { animation-duration: 1.25s; animation-delay: -.4s; }
.bird-3 .wing { animation-duration: 1.05s; animation-delay: -.8s; }

@keyframes glide { from { transform: translate3d(-12vw, 0, 0) } to { transform: translate3d(118vw, -6vh, 0) } }
/* wings rotate through the downstroke and squash slightly at the top */
@keyframes flap {
  0%, 100% { transform: rotate(0deg)   scaleY(1) }
  30%      { transform: rotate(-26deg) scaleY(.86) }
  62%      { transform: rotate(20deg)  scaleY(1.04) }
}
.bird .wing-r { animation-name: flapR; }
@keyframes flapR {
  0%, 100% { transform: rotate(0deg)   scaleY(1) }
  30%      { transform: rotate(26deg)  scaleY(.86) }
  62%      { transform: rotate(-20deg) scaleY(1.04) }
}
html[data-theme="night"] .bird { opacity: .3; }

.hero-rail {
  position: absolute; left: calc(var(--pad) - .35rem); top: 50%;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-family: var(--f-mono); font-size: 12px; font-weight: 700;
  letter-spacing: 2.6px; color: var(--display-c); opacity: .85;
}

.hero-content { position: relative; z-index: 2; padding-left: clamp(1.6rem, 4vw, 3.4rem); }
.hero-eyebrow { color: var(--display-c); margin-bottom: 1rem; }

.hero-display {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(58px, 11vw, 152px);
  line-height: .96; letter-spacing: 2.7px;
  color: var(--display-c);
  display: grid;
}
.hero-display .line { display: block; }
.hero-display .line-2 {
  padding-left: clamp(5rem, 32vw, 30rem);
  font-size: .82em;
  white-space: nowrap;
}

.hero-display .ch {
  display: inline-block;
  transform-origin: 50% 100%;
  will-change: transform, opacity;
  transition: transform .4s cubic-bezier(.34, 1.56, .64, 1), color .25s;
}
body.is-loading .hero-display .ch { opacity: 0; transform: translateY(.42em); }
.hero-display .ch.in { animation: chIn .85s var(--ease) forwards; }
@keyframes chIn { from { opacity: 0; transform: translateY(.42em) } to { opacity: 1; transform: none } }

/* Once the entrance has played, drop the animation. A finished `forwards`
   animation keeps overriding the :hover transform otherwise, and the hover
   silently does nothing. */
.hero-display.is-settled .ch { animation: none; opacity: 1; }

/* Per-letter hover: lift, tilt, recolour. Each glyph is its own hit target,
   so the colour travels through the word as the pointer crosses it. */
.hero-display.is-settled .ch:hover {
  transform: translateY(-.16em) rotate(-7deg);
  color: #F4D24A;
}

.swap { position: relative; display: inline-block; }
.swap i { font-style: normal; display: block; }
.phrase-word { display: inline-block; white-space: nowrap; }
.swap i.out { position: absolute; inset: 0; }
.swap i.on  { animation: swapIn .55s var(--ease) both; }
.swap i.out { animation: swapOut .55s var(--ease) both; }
@keyframes swapIn  { from { opacity: 0; transform: translateY(.3em) } to { opacity: 1; transform: none } }
@keyframes swapOut { from { opacity: 1; transform: none } to { opacity: 0; transform: translateY(-.3em) } }

.hero-wave { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: clamp(90px, 14vw, 200px); z-index: 1; }

/* ---------- Bilingual Console ---------- */
.console {
  position: absolute; z-index: 3;
  left: clamp(1.5rem, 10vw, 11rem);
  top: 57%;
  width: min(520px, 44vw);
  display: flex; align-items: center; gap: clamp(.5rem, 1.4vw, 1.1rem);
  background: linear-gradient(180deg, #F7F3EA 0%, #E6E0D2 100%);
  border-radius: 26px;
  padding: clamp(.7rem, 1.4vw, 1rem);
  box-shadow: 0 26px 50px -18px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.85);
  width: min(560px, 88vw);
}
.dial {
  width: clamp(74px, 9vw, 104px); height: clamp(74px, 9vw, 104px); flex: none;
  border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(from 180deg, #121212 0%, #121212 8.76%, #272727 10%, #121212 12%, #202020 25%, #121212 40%, #262626 55%, #121212 70%, #242424 85%, #121212 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.09), 0 6px 16px -8px rgba(0,0,0,.7);
  transition: transform .5s var(--ease);
}
.dial:hover { transform: rotate(14deg); }
.dial-face {
  width: 42%; height: 42%; border-radius: 50%;
  background: var(--ground); display: grid; place-items: center;
  box-shadow: 0 0 0 3px rgba(0,0,0,.35);
  transition: background .4s var(--ease);
}
.dial.is-on .dial-face { background: var(--accent); }
.dial-label { font-family: var(--f-mono); font-size: 11px; font-weight: 700; letter-spacing: .5px; color: #121212; }
.dial-label.ar { font-family: "IBM Plex Sans Arabic", sans-serif; font-size: 15px; letter-spacing: 0; }

.console-screen {
  flex: 1; min-width: 0;
  background: #14171C; border-radius: 12px;
  padding: .7rem .85rem;
  box-shadow: inset 0 2px 8px rgba(0,0,0,.6);
  min-height: clamp(74px, 9vw, 104px);
  display: flex; flex-direction: column; gap: .35rem;
}
.console-cap {
  font-family: var(--f-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: 1.3px; text-transform: uppercase; color: #6D7A8A;
}
.console-out {
  font-family: var(--f-mono); font-size: 11px; line-height: 1.5; color: #C6D3E2;
  flex: 1; overflow: hidden;
}
.console-out .ok { color: var(--accent); }
.console-out .cur { border-right: 6px solid var(--accent); }
.console-bar { height: 3px; background: #262C36; border-radius: 2px; overflow: hidden; }
.console-bar i { display: block; height: 100%; width: 0; background: var(--accent); }

/* ---------- shared sections ---------- */
.story, .strip, .home-work, .contact-band, .page-head,
.featured, .plane-section, .about-intro, .services, .certs, .process, .testimonials {
  padding: clamp(4rem, 9vw, 9rem) var(--pad);
  position: relative;
}

.sec-head { max-width: 60ch; margin-bottom: clamp(2.4rem, 5vw, 4rem); display: grid; gap: 1rem; }

.story { max-width: 66rem; margin: 0 auto; text-align: center; display: grid; gap: 2rem; }
.story-lead { font-size: clamp(21px, 2.5vw, 32px); line-height: 1.45; font-weight: 500; }
.story-serif { font-family: var(--f-display); font-size: clamp(26px, 3.4vw, 46px); line-height: 1.2; }
.role-chip {
  justify-self: center; display: inline-flex; align-items: center; gap: .8rem;
  border: 1px solid var(--line); border-radius: 999px; padding: .55rem 1.2rem;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 1.1px; text-transform: uppercase;
}
.role-chip em { font-style: normal; color: var(--ink-soft); }

/* strips */
.strip { background: linear-gradient(var(--ground) 0%, var(--sand) 100%); display: grid; gap: 1rem; }
.strip-label { justify-content: center; margin-top: 1.4rem; }
.strip-label:first-child { margin-top: 0; }
.strip-list { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 1.6rem; }
.strip-clients li { font-family: var(--f-display); font-size: clamp(22px, 3vw, 40px); }
.strip-creds li, .strip-stack li {
  font-family: var(--f-mono); font-size: 12px; letter-spacing: 1.1px; text-transform: uppercase;
  border: 1px solid var(--line); border-radius: 999px; padding: .4rem 1rem; color: var(--ink-soft);
}

/* cards */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(1rem, 2vw, 1.6rem); }
.card-grid-home { grid-template-columns: repeat(2, 1fr); }
.card {
  background: var(--card); border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line);
  display: flex; flex-direction: column;
  opacity: 0; transform: translateY(26px) scale(.985);
  transition: opacity .7s var(--ease), transform .7s var(--ease), box-shadow .4s var(--ease);
}
.card.in { opacity: 1; transform: none; }
.card:hover { box-shadow: 0 22px 44px -22px rgba(0,0,0,.35); }
.card figure { aspect-ratio: 16/11; overflow: hidden; background: var(--ground-2); }
.card figure img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.card:hover figure img { transform: scale(1.04); }
.card-meta { padding: 1.4rem 1.5rem 1.6rem; display: grid; gap: .5rem; align-content: start; }
.card-meta.pad { padding: 1.8rem 1.6rem; }
.card-meta h3 { font-family: var(--f-display); font-size: clamp(22px, 2.2vw, 30px); font-weight: 400; }
.card-meta p { color: var(--ink-soft); font-size: 15.5px; }
.card-tall { grid-row: span 2; }
.card-tall figure { aspect-ratio: 4/5; }
.card-wide { grid-column: span 2; }
.card-wide figure { aspect-ratio: 21/7; }

/* ---------- project covers ----------
   No project photography. Each cover is authored: a ground colour, a pattern
   that encodes what kind of thing the project is, and the name in display type. */
.cover {
  position: relative; aspect-ratio: 16/11; overflow: hidden;
  /* Lit from the top-left and falling off into shadow, so the ground reads as a
     surface rather than a flat swatch of colour. */
  /* Vignette layered over a lit gradient. Both live in `background` because
     ::after is already spoken for by the mirror/phone/window motifs. */
  background:
    radial-gradient(130% 110% at 50% 0%, transparent 42%, rgba(8,6,10,.30) 100%),
    radial-gradient(125% 105% at 18% -10%,
      color-mix(in srgb, var(--c, #1E3A5F) 74%, #FFFFFF 26%) 0%,
      var(--c, #1E3A5F) 52%,
      color-mix(in srgb, var(--c, #1E3A5F) 76%, #08060A 24%) 100%);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 1.15rem 1.25rem;
  isolation: isolate;
}
.cover::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  opacity: .34;
  transition: transform 1s var(--ease);
}
.card:hover .cover::before { transform: scale(1.08) rotate(1.5deg); }

.cover-kind {
  font-family: var(--f-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase;
  color: rgba(255,255,255,.72);
}
.cover-mark {
  font-family: var(--f-display); font-weight: 400; line-height: .95;
  font-size: clamp(30px, 3.6vw, 52px); color: #FFF9E9;
  letter-spacing: .5px;
}
.cover-mark em { font-style: normal; opacity: .5; padding: 0 .12em; }
.cover-lg { aspect-ratio: 4/3; border-radius: var(--radius); padding: 2rem 2.2rem; }
.cover-lg .cover-mark { font-size: clamp(48px, 6vw, 86px); }
.cover-tall { aspect-ratio: 4/5; }
.cover-flat { aspect-ratio: 21/7; flex-direction: row; align-items: center; }
.cover-flat .cover-mark { font-size: clamp(26px, 3vw, 42px); }
.cover-arrow { font-size: 32px; color: #FFF9E9; }

/* pattern vocabulary — each says something true about the build */
.cover[data-pattern="grid"]::before {                 /* platform: structured rows + columns */
  background-image: linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px);
  background-size: 34px 34px; opacity: .16;
}
.cover[data-pattern="stripe"]::before {               /* web: the sun's diagonal rhythm */
  background-image: repeating-linear-gradient(45deg, #fff 0 8px, transparent 8px 20px); opacity: .18;
}
.cover[data-pattern="dots"]::before {                 /* AI service: a token field */
  background-image: radial-gradient(#fff 1.6px, transparent 1.7px);
  background-size: 20px 20px; opacity: .22;
}
.cover[data-pattern="bridge"]::before {               /* backend: two systems, one span */
  background-image: linear-gradient(90deg, transparent 0 12%, #fff 12% 13%, transparent 13% 87%, #fff 87% 88%, transparent 88%),
                    linear-gradient(#fff 1px, transparent 1px);
  background-size: 100% 100%, 100% 30px; opacity: .2;
}
.cover[data-pattern="mirror"]::before {               /* bilingual: the axis of the flip */
  background-image: repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 26px);
  opacity: .16;
}
.cover[data-pattern="mirror"]::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px;
  background: rgba(255,255,255,.6); z-index: -1;
}
.cover[data-pattern="phone"]::before {                /* mobile: device proportion */
  background-image: linear-gradient(#fff 2px, transparent 2px);
  background-size: 100% 46px; opacity: .12;
}
.cover[data-pattern="phone"]::after {
  content: ""; position: absolute; right: 8%; top: 14%; bottom: -18%; width: 26%;
  border: 2px solid rgba(255,255,255,.5); border-radius: 22px; z-index: -1;
}
.cover[data-pattern="qr"]::before {                   /* check-in: scannable blocks */
  background-image:
    linear-gradient(90deg, #fff 0 20px, transparent 20px 40px),
    linear-gradient(#fff 0 20px, transparent 20px 40px);
  background-size: 40px 40px; opacity: .14; mix-blend-mode: overlay;
}
.cover[data-pattern="window"]::before {               /* desktop: chrome + title bar */
  background-image: linear-gradient(#fff 0 26px, transparent 26px);
  background-size: 100% 100%; opacity: .18;
}
.cover[data-pattern="window"]::after {
  content: ""; position: absolute; inset: 12% 10%; border: 2px solid rgba(255,255,255,.45);
  border-top-width: 18px; border-radius: 8px; z-index: -1;
}
.cover[data-pattern="bar"]::before {                  /* menu bar: a thin strip up top */
  background-image: linear-gradient(rgba(255,255,255,.55) 0 10px, transparent 10px);
  opacity: .5;
}
.cover[data-pattern="bar"]::after {
  content: ""; position: absolute; left: 10%; right: 10%; top: 46%; height: 6px;
  border-radius: 3px; background: rgba(255,255,255,.28);
  box-shadow: 0 16px 0 rgba(255,255,255,.2), 0 32px 0 rgba(255,255,255,.12); z-index: -1;
}
.cover[data-pattern="arch"]::before {                 /* on-device worship: repeating arches */
  background-image: radial-gradient(circle at 50% 100%, transparent 0 22px, #fff 22px 24px, transparent 24px);
  background-size: 56px 56px; opacity: .2;
}
.cover[data-pattern="frames"]::before {               /* 300-frame sequence: a film strip */
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.35) 0 2px, transparent 2px 30px),
                    linear-gradient(transparent 0 14%, rgba(255,255,255,.14) 14% 86%, transparent 86%);
  opacity: .7;
}

/* The cover already carries the project name in display type. Keep the real
   heading in the DOM for screen readers and search, just don't print it twice. */
.card:has(.cover) .card-meta h3 {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* card kind label */
.card-meta .kind {
  font-family: var(--f-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-soft);
}
.card-cta .card-meta { display: none; }

/* page head */
.page-head { padding-top: clamp(7rem, 14vw, 12rem); display: grid; gap: 1.2rem; max-width: 70rem; }
.page-lede { color: var(--ink-soft); font-size: clamp(17px, 1.6vw, 21px); max-width: 55ch; }

/* featured */
.featured { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(1.6rem, 4vw, 4rem); align-items: center; }
.featured-fig { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.featured-fig img { aspect-ratio: 4/3; object-fit: cover; }
.featured-copy { display: grid; gap: 1.1rem; }
.project-case { padding: clamp(2rem, 5vw, 5rem) var(--pad); }
.project-case-coachflow { padding-top: clamp(1rem, 3vw, 3rem); }
.featured-reverse .cover { order: 2; }
.project-features {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  background: var(--line);
}
.project-features li, .project-feature-inline {
  background: var(--card); padding: clamp(1.2rem, 2.6vw, 2rem);
  display: grid; gap: .65rem; align-content: start;
}
.project-features h3, .project-feature-inline h3 {
  font-family: var(--f-display); font-size: clamp(21px, 2vw, 29px); font-weight: 400;
}
.project-features p, .project-feature-inline p { color: var(--ink-soft); font-size: 15px; }
.feature-index {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 1.2px;
  color: var(--ink-soft);
}
.project-feature-inline {
  grid-template-columns: auto 1fr; border: 1px solid var(--line); border-radius: 18px;
}
.other-projects { padding-top: clamp(3rem, 6vw, 6rem); }
.tags { display: flex; flex-wrap: wrap; gap: .5rem; }
.tags li {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
  border: 1px solid var(--line); border-radius: 999px; padding: .35rem .85rem; color: var(--ink-soft);
}
.links { display: flex; flex-wrap: wrap; gap: 1.4rem; margin-top: .4rem; }

/* plane */
.plane-section { position: relative; overflow: clip; }
.plane-trail { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; opacity: .55; }
.plane-trail path { stroke-dasharray: 10 12; }
.plane {
  position: absolute; width: 26px; height: 26px; z-index: 1; pointer-events: none;
  offset-path: path("M600,0 C300,300 900,600 600,900 C300,1200 900,1500 600,1800 C420,1990 700,2200 600,2400");
  offset-rotate: auto; opacity: .8;
}
.plane-section .card-grid { position: relative; z-index: 2; }

/* about */
.about-intro { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(1.6rem, 4vw, 4rem); align-items: center; }
.about-portrait { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.about-portrait img { aspect-ratio: 4/5; object-fit: cover; }
.about-copy { display: grid; gap: 1.6rem; }
.about-copy > p { font-size: clamp(18px, 1.9vw, 24px); line-height: 1.5; }
.signals { display: grid; gap: .9rem; }
.signals div { display: grid; grid-template-columns: 8rem 1fr; gap: 1rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.signals dt { font-family: var(--f-mono); font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-soft); }

/* accordion */
.acc { border-top: 1px solid var(--line); }
.acc-item { border-bottom: 1px solid var(--line); }
.acc-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.5rem 0; text-align: left; }
.acc-btn strong { font-family: var(--f-display); font-size: clamp(20px, 2.4vw, 32px); font-weight: 400; }
.acc-ico { width: 14px; height: 14px; position: relative; flex: none; }
.acc-ico::before, .acc-ico::after { content: ""; position: absolute; background: var(--ink); transition: transform .4s var(--ease); }
.acc-ico::before { inset: 6px 0 6px 0; height: 2px; }
.acc-ico::after  { inset: 0 6px 0 6px; width: 2px; }
.acc-item.is-open .acc-ico::after { transform: scaleY(0); }
.acc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.acc-item.is-open .acc-body { grid-template-rows: 1fr; }
.acc-body > p { overflow: hidden; color: var(--ink-soft); max-width: 62ch; }
.acc-item.is-open .acc-body > p { padding-bottom: 1.6rem; }

/* credentials */
.certs { padding-top: 0; }
.cert-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 0 clamp(1.5rem, 4vw, 3.5rem);
}
.cert {
  display: flex; align-items: center; gap: 1.1rem;
  padding: 1.25rem 0; border-top: 1px solid var(--line);
}
.cert-badge {
  width: 42px; height: 42px; flex: none; border-radius: 12px;
  display: grid; place-items: center;
  font-family: var(--f-display); font-size: 21px; color: #FFF9E9;
  background: var(--ink-soft);
}
.cert-badge-logo { background: #F3EEDF !important; border: 1px solid var(--line); }
.cert-logo { width: 24px; height: 24px; overflow: visible; }
.cert-logo-claude { fill: none; stroke: #C4623A; stroke-width: 2.7; stroke-linecap: round; }
.cert-logo-google .google-blue { fill: #4285F4; }
.cert-logo-google .google-green { fill: #34A853; }
.cert-logo-google .google-yellow { fill: #FBBC05; }
.cert-logo-google .google-red { fill: #EA4335; }
.cert-logo-openai { fill: #111820; }
.cert-logo-figma { width: 18px; height: 27px; }
.cert[data-issuer="anthropic"] .cert-badge { background: #C4623A; }
.cert[data-issuer="google"]    .cert-badge { background: #1E3A5F; }
.cert[data-issuer="anthropic"] .cert-badge-logo,
.cert[data-issuer="google"] .cert-badge-logo { background: #F3EEDF; }
.cert-meta { display: grid; gap: .1rem; min-width: 0; }
.cert-meta strong { font-weight: 500; font-size: 16px; }
.cert-issuer {
  font-family: var(--f-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 1.3px; text-transform: uppercase; color: var(--ink-soft);
}
.cert-verify {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 1.2px;
  text-transform: uppercase; border-bottom: 1px solid currentColor;
  justify-self: start; margin-top: .3rem;
}
html[dir="rtl"] .cert-issuer, html[dir="rtl"] .cert-verify {
  text-transform: none; letter-spacing: 0; font-weight: 500;
}

/* process */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(1.4rem, 3vw, 2.6rem); }
.steps li { display: grid; gap: .6rem; align-content: start; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.step-n { font-family: var(--f-mono); font-size: 11px; letter-spacing: 1.4px; color: var(--ink-soft); }
.steps h3 { font-family: var(--f-display); font-size: clamp(22px, 2.4vw, 32px); font-weight: 400; }
.steps p { color: var(--ink-soft); font-size: 15.5px; }

/* testimonials */
.testimonials { background: var(--ground-2); }
.t-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.4rem; margin-top: 2.4rem; }
.t-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem; display: grid; gap: 1.2rem; }
.t-card p { font-family: var(--f-display); font-size: clamp(19px, 2vw, 26px); line-height: 1.35; }
.t-card footer { font-family: var(--f-mono); font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-soft); }
.t-card[data-approved="false"] { display: none; }

/* contact band */
.contact-band {
  background: linear-gradient(var(--ground) 0%, var(--sand) 100%);
  display: grid; gap: 1.6rem; justify-items: center; text-align: center;
}
.contact-band .h2-serif { max-width: 18ch; }
.contact-band .btn-solid { margin-top: .6rem; }

/* footer */
.site-footer {
  padding: 3rem var(--pad); border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--ink-soft);
}
.site-footer strong { color: var(--ink); letter-spacing: 2px; }

/* drawer */
/* Above the mobile menu (78) — the drawer can be opened from inside it. */
.scrim { position: fixed; inset: 0; background: rgba(6,6,6,.5); z-index: 84; opacity: 0; transition: opacity .4s var(--ease); backdrop-filter: blur(3px); }
.scrim.in { opacity: 1; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 85;
  width: min(480px, 92vw); background: var(--ground);
  padding: clamp(2rem, 5vw, 3.4rem); display: grid; gap: 1.4rem; align-content: center;
  transform: translateX(100%); transition: transform .55s var(--ease);
  border-left: 1px solid var(--line);
}
.drawer.in { transform: none; }
.drawer > p { color: var(--ink-soft); }
.drawer-close { position: absolute; top: 1.4rem; right: 1.6rem; font-size: 30px; line-height: 1; }
.drawer-links { display: grid; gap: .8rem; margin-top: .6rem; }
.drawer-links a {
  border: 1px solid var(--line); border-radius: 999px; padding: .95rem 1.5rem;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.drawer-links a:hover { background: var(--ink); color: var(--ground); }

/* ---------- card go label ---------- */
.card-go {
  font-family: var(--f-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink);
  display: inline-flex; align-items: center; gap: .4rem; margin-top: .3rem;
}
.card-go::after { content: "→"; transition: transform .35s var(--ease); }
.card:hover .card-go::after { transform: translateX(5px); }

/* ---------- custom cursor ---------- */
@media (hover: hover) and (pointer: fine) {
  html.cursor-on, html.cursor-on * { cursor: none !important; }

  .cursor {
    position: fixed; top: 0; left: 0; z-index: 95; pointer-events: none;
    width: 12px; height: 12px; border-radius: 50%;
    background: #080b10;
    border: 1px solid rgba(255, 249, 241, .92);
    box-shadow: 0 2px 10px rgba(8, 11, 16, .28);
    transform: translate3d(-50px, -50px, 0) translate(-50%, -50%);
    transition: width .28s var(--ease), height .28s var(--ease),
                background .28s var(--ease), opacity .28s var(--ease);
    mix-blend-mode: normal;
  }
  .cursor.on-sky { background: #FFF9E9; border-color: rgba(8, 11, 16, .7); }
  .cursor.is-link { width: 54px; height: 54px; background: var(--accent); mix-blend-mode: normal; }
  .cursor.is-link .cursor-label { opacity: 1; }
  .cursor.is-down { width: 30px; height: 30px; }

  .cursor-label {
    position: absolute; inset: 0; display: grid; place-items: center;
    font-family: var(--f-mono); font-size: 9px; font-weight: 700;
    letter-spacing: .6px; color: var(--ink); opacity: 0;
    transition: opacity .25s var(--ease);
  }
}
@media not all and (hover: hover) { .cursor { display: none; } }

/* rosette cursor — replaces the dot over the garden */
.cursor-rosette {
  position: absolute; left: 50%; top: 50%;
  width: 54px; height: 54px; margin: -27px 0 0 -27px;
  max-width: none;
  overflow: visible;
  opacity: 0; pointer-events: none;
  transform: scale(.3) rotate(-40deg);
  transition: opacity .28s var(--ease), transform .5s cubic-bezier(.34, 1.56, .64, 1);
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.22));
}
.cursor.is-garden { background: transparent; mix-blend-mode: normal; width: 0; height: 0; }
.cursor.is-garden .cursor-label { opacity: 0; }
.cursor.is-garden .cursor-rosette { opacity: 1; transform: scale(1) rotate(0deg); }
.cursor.is-garden.is-down .cursor-rosette { transform: scale(.82) rotate(14deg); }
.cursor.is-garden .ros-spin { transform-origin: 32px 32px; animation: rosSpin 14s linear infinite; }
@keyframes rosSpin { to { rotate: 360deg } }

/* (The .ch transition lives with the hero display rules above. A duplicate here
   used to override the springy hover easing purely by source order.) */

/* ---------- sound toggle ---------- */
.sound-toggle {
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--ground) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  backdrop-filter: blur(18px);
  transition: background .3s var(--ease);
}
.sound-toggle:hover { background: color-mix(in srgb, var(--ground) 92%, transparent); }
.snd-ico svg {
  width: 19px; height: 19px; display: block;
  fill: none; stroke: var(--ink); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.snd-ico .snd-spk { fill: var(--ink); stroke-width: 1.2; }
/* waves show only when sound is on; the cross shows only when off */
.snd-w1, .snd-w2 { opacity: 0; transform-origin: 13px 12px; transition: opacity .3s var(--ease); }
.sound-toggle[aria-pressed="true"] .snd-w1 { opacity: 1; animation: sndPulse 2s ease-in-out infinite; }
.sound-toggle[aria-pressed="true"] .snd-w2 { opacity: 1; animation: sndPulse 2s ease-in-out infinite .28s; }
.sound-toggle[aria-pressed="true"] .snd-off { opacity: 0; }
.sound-toggle[aria-pressed="false"] .snd-off { opacity: .85; }
@keyframes sndPulse { 0%,100% { opacity: .35 } 50% { opacity: 1 } }
.sound-toggle.is-loading .snd-ico { animation: sndSpin 1s linear infinite; }
@keyframes sndSpin { to { rotate: 360deg } }

/* ---------- footer garden ---------- */
.garden-defs { position: absolute; width: 0; height: 0; }
.site-footer { position: relative; overflow: clip; }
.ft-garden {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;                 /* clicks belong to the footer itself */
  overflow: clip visible;
}
.ft-inner {
  position: relative; z-index: 1;
  display: grid; gap: clamp(2.2rem, 5vw, 4rem);
  /* room at the bottom so a fully grown flower is never clipped by the edge */
  padding-bottom: clamp(9rem, 16vw, 15rem);
}
.ft-top {
  display: grid; grid-template-columns: 1.25fr .85fr;
  gap: clamp(1.6rem, 4vw, 4rem); align-items: end;
}
.ft-lead {
  font-family: var(--f-display); font-size: clamp(30px, 5vw, 68px);
  line-height: 1.08; max-width: 16ch;
  /* .site-footer is mono/uppercase for its legal strip; the lead is not. */
  text-transform: none; letter-spacing: normal; color: var(--ink);
}
.ft-actions { display: grid; gap: 1.2rem; justify-items: start; }
.ft-sub {
  font-family: var(--f-body); font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.55; letter-spacing: normal; text-transform: none;
  color: var(--ink-soft); max-width: 34ch;
}
.ft-credit { text-transform: none; letter-spacing: .2px; }
.ft-bar {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center;
  justify-content: space-between; padding-top: 1.4rem; border-top: 1px solid var(--line);
}

@media (max-width: 860px) {
  .ft-top { grid-template-columns: 1fr; align-items: start; }
  .ft-lead { max-width: 100%; }
}
.ft-cue {
  font-family: var(--f-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 1.6px; text-transform: uppercase; color: var(--ink-soft);
  opacity: .75; transition: opacity .4s var(--ease);
}
.ft-cue.is-hidden { opacity: 0; }
.ft-credit {
  font-family: var(--f-mono); font-size: 10px; line-height: 1.7;
  color: var(--ink-soft); max-width: 70ch;
}
.ft-credit a { border-bottom: 1px solid currentColor; }

.plant {
  position: absolute; bottom: 0;
  transform: translateX(-50%) scale(var(--g, 0));
  transform-origin: center bottom;
  transition: transform 1.15s cubic-bezier(.22, 1, .36, 1);
}
.plant svg { display: block; overflow: visible; }
.plant .sway {
  transform-origin: center bottom;
  animation: ftSway var(--sway, 5s) ease-in-out infinite alternate;
  animation-delay: var(--sway-d, 0s);
}
.plant .head { transform-box: fill-box; transform-origin: center center; }
.plant.bloomed .head { animation: ftBloom .7s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes ftSway  { from { rotate: calc(var(--swayA, 2deg) * -1) } to { rotate: var(--swayA, 2deg) } }
@keyframes ftBloom { from { scale: 0 } to { scale: 1 } }

/* hitting full height: the plant pops and throws a ring */
.plant.bursting .sway { animation: ftPop .75s cubic-bezier(.34, 1.56, .64, 1), ftSway var(--sway, 5s) ease-in-out infinite alternate .75s; }
@keyframes ftPop { 0% { scale: 1 } 34% { scale: 1.16 .9 } 62% { scale: .95 1.05 } 100% { scale: 1 } }

.plant.maxed::after {
  content: ""; position: absolute; left: 50%; bottom: 78%;
  width: 12px; height: 12px; margin-left: -6px; border-radius: 50%;
  border: 2px solid var(--accent); opacity: 0;
}
.plant.bursting::after { animation: ftRing .85s var(--ease) both; }
@keyframes ftRing {
  from { opacity: .9; transform: scale(.4) }
  to   { opacity: 0;  transform: scale(4.2) }
}

/* every flower full — the whole strip lifts once */
.site-footer.is-full .ft-garden { animation: ftCheer 1.5s var(--ease); }
@keyframes ftCheer { 0%,100% { transform: translateY(0) } 40% { transform: translateY(-9px) } }
.site-footer.is-full .ft-cue { color: var(--ink); opacity: 1; }

html[dir="rtl"] .ft-cue, html[dir="rtl"] .ft-credit { letter-spacing: 0; text-transform: none; }

/* reveal */
.rv { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.rv.in { opacity: 1; transform: none; }

/* ============================================================
   RTL / Arabic
   ============================================================ */
html[dir="rtl"] {
  --f-display: "Aref Ruqaa", Georgia, serif;
  --f-body: "IBM Plex Sans Arabic", system-ui, sans-serif;
  --f-mono: "IBM Plex Sans Arabic", system-ui, sans-serif;
}
/* Arabic is joined script: no uppercase, no tracking — weight carries the role instead. */
html[dir="rtl"] .eyebrow,
html[dir="rtl"] .text-link,
html[dir="rtl"] .btn-solid,
html[dir="rtl"] .strip-creds li,
html[dir="rtl"] .strip-stack li,
html[dir="rtl"] .tags li,
html[dir="rtl"] .role-chip,
html[dir="rtl"] .step-n,
html[dir="rtl"] .signals dt,
html[dir="rtl"] .t-card footer,
html[dir="rtl"] .site-footer,
html[dir="rtl"] .drawer-links a,
html[dir="rtl"] .console-cap,
html[dir="rtl"] .loader-meta,
html[dir="rtl"] .nav-loc {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}
/* Never split Arabic into per-glyph spans — shaping would break. Wipe instead. */
html[dir="rtl"] .hero-display .ch { display: inline; opacity: 1; transform: none; animation: none; }
html[dir="rtl"] .hero-display .line {
  clip-path: inset(0 0 0 0);
  animation: wipeRtl 1s var(--ease) both;
}
@keyframes wipeRtl { from { clip-path: inset(0 0 0 100%) } to { clip-path: inset(0 0 0 0) } }
/* Aref Ruqaa carries tall ascenders and deep descenders; the Latin 0.96
   line-height collides. Arabic display needs real leading. */
html[dir="rtl"] .hero-display { line-height: 1.5; letter-spacing: 0; }
html[dir="rtl"] .h1-serif, html[dir="rtl"] .h2-serif { line-height: 1.4; letter-spacing: 0; }
html[dir="rtl"] .cover-mark { line-height: 1.35; }
html[dir="rtl"] .hero-display .line-2 { padding-left: 0; padding-right: clamp(2rem, 20vw, 16rem); }
html[dir="rtl"] .hero-rail { left: auto; right: calc(var(--pad) - .35rem); transform: translateY(-50%); }
html[dir="rtl"] .hero-content { padding-left: 0; padding-right: clamp(1.6rem, 4vw, 3.4rem); }
html[dir="rtl"] .drawer { right: auto; left: 0; border-left: 0; border-right: 1px solid var(--line); transform: translateX(-100%); }
html[dir="rtl"] .drawer.in { transform: none; }
html[dir="rtl"] .drawer-close { right: auto; left: 1.6rem; }
html[dir="rtl"] .signals div { grid-template-columns: 8rem 1fr; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 900px) {
  .featured, .about-intro { grid-template-columns: 1fr; }
  .featured-reverse .cover { order: initial; }
  .project-features { grid-template-columns: 1fr; }
  .card-grid-home { grid-template-columns: 1fr; }
  .card-wide, .card-tall { grid-column: auto; grid-row: auto; }
  .card-tall figure, .card-wide figure { aspect-ratio: 16/11; }
  .plane-trail, .plane { display: none; }
}

@media (max-width: 980px) {
  /* Below this the display type and the console cannot share a row — the
     console drops into flow underneath instead of floating over the words. */
  .hero { align-content: center; gap: 2rem; padding-top: 6rem; padding-bottom: 3rem; }
  .console {
    position: static; width: 100%; max-width: 520px;
    justify-self: start; margin-top: 1.6rem;
  }
  .hero-display .line-2 { padding-left: clamp(2rem, 12vw, 8rem); }
}

@media (max-width: 760px) {
  .nav-loc { display: none; }
  .nav-links { display: none; }
  .nav-burger { display: grid; }
  .nav-cta { width: 44px; height: 44px; padding: 0; gap: 0; justify-content: center; }
  .nav-cta > [data-i18n="nav.contact_chip"] { display: none; }
  .hero-rail { display: none; }
  .hero-content { padding-left: 0; }
  .hero-display .line-2 { padding-left: 0; font-size: 1em; }
  .dial { width: 62px; height: 62px; }
  .console-screen { min-height: 62px; }
  .console-out { font-size: 10px; }
  .site-footer { justify-content: flex-start; }
  .cover-lg { padding: 1.4rem 1.5rem; }
}

/* ============================================================
   2026 organic editorial refresh
   A photographic, earth-toned system replaces the synthetic sky treatment.
   ============================================================ */
:root {
  --ground: #F8F3EB;
  --ground-2: #EEE5D8;
  --sand: #D5BFA4;
  --ink: #292722;
  --ink-soft: #746C60;
  --line: color-mix(in srgb, #746C60 28%, transparent);
  --display-c: #FFF9E9;
  --accent: #C66B3D;
  --card: #FFFDF9;
  --f-display: "Epilogue", system-ui, sans-serif;
  --f-body: "Epilogue", system-ui, sans-serif;
  --f-mono: "Epilogue", system-ui, sans-serif;
  --radius: 24px;
}

html[data-theme="night"] {
  --ground: #151A20;
  --ground-2: #202832;
  --sand: #35404A;
  --ink: #F3EEE5;
  --ink-soft: #B8B1A6;
  --line: color-mix(in srgb, #F3EEE5 30%, transparent);
  --card: #202832;
}

body {
  background:
    radial-gradient(1000px 700px at 105% 20%, color-mix(in srgb, #C08E3A 22%, transparent), transparent 70%),
    var(--ground);
}

.grain { opacity: .02; }
html[data-theme="night"] .grain { opacity: .025; mix-blend-mode: soft-light; }

.h1-serif, .h2-serif, .story-serif, .card-meta h3, .acc-btn strong,
.steps h3, .strip-clients li, .menu-nav a {
  font-family: var(--f-display);
  font-weight: 700;
  letter-spacing: -.045em;
}

.eyebrow, .text-link, .btn-solid, .role-chip, .cover-kind, .card-meta .kind,
.cert-issuer, .cert-verify, .step-n, .site-footer, .signals dt {
  font-family: var(--f-body);
  letter-spacing: .08em;
}

.loader.is-done {
  pointer-events: none;
  visibility: hidden;
  transition: transform .9s var(--ease), visibility 0s .9s;
}

.nav-pill, .tt-track {
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  border-color: color-mix(in srgb, var(--ink) 18%, transparent);
  box-shadow: 0 14px 36px -24px color-mix(in srgb, var(--ink) 70%, transparent);
}

.nav-avatar img { object-position: 70% 35%; }
.nav-cta, .btn-solid {
  min-height: 44px;
  background: var(--ink);
  color: var(--ground);
}
.nav-cta:active, .btn-solid:active { transform: translateY(1px) scale(.99); }
.tt-track { width: 58px; }
html[data-theme="night"] .tt-thumb { transform: translateX(28px); background: #C08E3A; }

.icon-button {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 9%, transparent);
}
.icon-button svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.menu-close, .drawer-close { font-size: inherit; }

.hero {
  min-height: calc(100svh - 1.5rem);
  margin: .75rem;
  padding: clamp(6.5rem, 12vh, 9rem) clamp(1.25rem, 5vw, 5rem) clamp(7.5rem, 16vh, 11rem);
  border-radius: 32px;
  align-content: center;
}
.hero-sky {
  background-image: url('../assets/kareem-hero-v2.jpg');
  background-size: cover;
  background-position: 62% 45%;
  transform: scale(1.01);
}
.hero-sky::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(57,67,38,.92) 0%, rgba(57,67,38,.78) 35%, rgba(57,67,38,.12) 68%, transparent 100%),
    linear-gradient(0deg, rgba(57,67,38,.35), transparent 45%);
}
.hero-sky > * { display: none; }
.hero-wave { display: none; }
.hero-content { max-width: min(730px, 56vw); padding-left: 0; }
.hero-eyebrow, .hero-rail { color: #E8DCC7; }
.hero-display {
  font-weight: 700;
  font-size: clamp(54px, 8.4vw, 118px);
  line-height: .94;
  letter-spacing: -.065em;
  color: #E8DCC7;
}
.hero-display .line { white-space: nowrap; }
.hero-display .line-2 { padding-left: 0; color: #C08E3A; }
.hero-rail { left: 1.2rem; opacity: .72; }

.console {
  left: clamp(1.5rem, 5vw, 5rem);
  top: auto;
  bottom: clamp(1.25rem, 3vw, 2.5rem);
  width: min(530px, 48vw);
  background: color-mix(in srgb, #D4B895 92%, transparent);
  border: 1px solid color-mix(in srgb, #E8DCC7 44%, transparent);
  box-shadow: 0 28px 56px -34px #394326;
  backdrop-filter: blur(16px);
}
.dial {
  background: conic-gradient(from 180deg, #394326, #606C38 20%, #C66B3D 21%, #394326 28%, #606C38 55%, #C08E3A 56%, #394326 66%, #606C38);
  box-shadow: inset 0 0 0 1px rgba(232,220,199,.25), 0 8px 18px -12px #394326;
}
.dial-face { background: #D4B895; box-shadow: 0 0 0 3px rgba(57,67,38,.32); }
.dial-label { color: #394326; }
.console-screen { background: #394326; box-shadow: none; }
.console-cap { color: #D4B895; }
.console-out { color: #E8DCC7; }
.console-bar { background: #606C38; }

.story { text-align: left; }
.story-lead { max-width: 34ch; }
.story-serif { max-width: 24ch; color: var(--ink-soft); }
.role-chip { justify-self: start; }

.strip { background: linear-gradient(145deg, var(--ground-2), var(--sand)); }
.strip-label, .strip-list { justify-content: flex-start; }
.strip-creds li, .strip-stack li, .tags li { background: color-mix(in srgb, var(--ground) 35%, transparent); }

.card { background: var(--card); border-color: var(--line); }
.card:hover { box-shadow: 0 30px 56px -38px #394326; }
.cover { background: #606C38; }
.cover[data-pattern="stripe"], .cover[data-pattern="qr"] { background: #C66B3D; }
.cover[data-pattern="dots"], .cover[data-pattern="frames"] { background: #C08E3A; }
.cover[data-pattern="bridge"], .cover[data-pattern="window"] { background: #B08B6E; }
.cover[data-pattern="mirror"], .cover[data-pattern="phone"],
.cover[data-pattern="bar"], .cover[data-pattern="arch"] { background: #8B9D83; }
.cover-kind, .cover-mark, .cover-arrow { color: #E8DCC7; }
.cover-mark { font-family: var(--f-display); font-weight: 700; letter-spacing: -.055em; }
.cover[data-pattern]::before { color: #E8DCC7; }
.cover[data-pattern="grid"]::before { background-image: linear-gradient(#E8DCC7 1px, transparent 1px), linear-gradient(90deg, #E8DCC7 1px, transparent 1px); }
.cover[data-pattern="stripe"]::before { background-image: repeating-linear-gradient(45deg, #E8DCC7 0 8px, transparent 8px 20px); }
.cover[data-pattern="dots"]::before { background-image: radial-gradient(#E8DCC7 1.6px, transparent 1.7px); }
.cover[data-pattern="bridge"]::before { background-image: linear-gradient(90deg, transparent 0 12%, #E8DCC7 12% 13%, transparent 13% 87%, #E8DCC7 87% 88%, transparent 88%), linear-gradient(#E8DCC7 1px, transparent 1px); }
.cover[data-pattern="mirror"]::before { background-image: repeating-linear-gradient(90deg, #E8DCC7 0 2px, transparent 2px 26px); }
.cover[data-pattern="phone"]::before { background-image: linear-gradient(#E8DCC7 2px, transparent 2px); }
.cover[data-pattern="qr"]::before { background-image: linear-gradient(90deg, #E8DCC7 0 20px, transparent 20px 40px), linear-gradient(#E8DCC7 0 20px, transparent 20px 40px); }
.cover[data-pattern="window"]::before { background-image: linear-gradient(#E8DCC7 0 26px, transparent 26px); }
.cover[data-pattern="bar"]::before { background-image: linear-gradient(rgba(232,220,199,.55) 0 10px, transparent 10px); }
.cover[data-pattern="arch"]::before { background-image: radial-gradient(circle at 50% 100%, transparent 0 22px, #E8DCC7 22px 24px, transparent 24px); }
.cover[data-pattern="frames"]::before { background-image: repeating-linear-gradient(90deg, rgba(232,220,199,.45) 0 2px, transparent 2px 30px), linear-gradient(transparent 0 14%, rgba(232,220,199,.18) 14% 86%, transparent 86%); }

.about-portrait { border: 0; box-shadow: 0 34px 70px -48px #394326; }
.about-portrait img { object-position: 50% 35%; }
.cert-list { gap: 0 2.2rem; }
.cert { min-height: 94px; }
.cert-badge { color: #E8DCC7; background: #606C38; }
.cert[data-issuer="anthropic"] .cert-badge { background: #C66B3D; }
.cert[data-issuer="google"] .cert-badge { background: #606C38; }

.contact-band {
  background: linear-gradient(145deg, #B08B6E, #C08E3A);
  justify-items: start;
  text-align: left;
  border-radius: 32px 32px 0 0;
}
.contact-band .h2-serif { max-width: 16ch; }
.drawer-links a { min-height: 50px; display: flex; align-items: center; }

@media (max-width: 980px) {
  .hero { align-content: end; padding-bottom: 8.5rem; }
  .hero-content { max-width: 76vw; }
  .console { position: absolute; width: min(520px, calc(100% - 2.5rem)); margin: 0; left: 1.25rem; bottom: 1.25rem; }
  .hero-display .line-2 { padding-left: 0; }
}

@media (max-width: 760px) {
  .hero { min-height: 820px; margin: .45rem; border-radius: 24px; padding: 6.5rem 1.1rem 9rem; }
  .hero-sky { background-position: 68% center; }
  .hero-sky::after { background: linear-gradient(180deg, rgba(57,67,38,.38), rgba(57,67,38,.88) 58%, rgba(57,67,38,.96)); }
  .hero-content { max-width: 100%; padding-left: 0; }
  .hero-display { font-size: clamp(42px, 11.5vw, 54px); line-height: .98; }
  .hero-display .line { white-space: nowrap; }
  .console { gap: .55rem; padding: .65rem; border-radius: 20px; }
  .dial { width: 58px; height: 58px; }
  .console-screen { min-height: 58px; }
  .story { text-align: left; }
  .role-chip { display: grid; border-radius: 20px; }
  .strip-label, .strip-list { justify-content: flex-start; }
  .strip-clients { display: grid; }
  .cert-list { grid-template-columns: 1fr; }
  .contact-band { border-radius: 24px 24px 0 0; }
}

/* The live reference is the requested visual source of truth. These final
   overrides retain its measured palette, type hierarchy, sky, and motion. */
:root {
  --ground: #FFF9F1;
  --ground-2: #F0EBE0;
  --sand: #E7D6BD;
  --ink: #060606;
  --ink-soft: #6B675E;
  --line: #DDD6C8;
  --display-c: #FFF9E9;
  --sky-from: #71B7F4;
  --sky-to: #5788B3;
  --accent: #F5C542;
  --card: #FFFFFF;
  --f-display: "DM Serif Display", Georgia, serif;
  --f-body: "Space Grotesk", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, monospace;
  --radius: 28px;
}
html[data-theme="night"] {
  --ground: #10151F;
  --ground-2: #0B1220;
  --sand: #16202F;
  --ink: #F2EFE8;
  --ink-soft: #9AA3B2;
  --line: #2A3446;
  --card: #161E2C;
}
body { background: var(--ground); }
.grain { opacity: .035; }
.h1-serif, .h2-serif, .story-serif, .card-meta h3, .acc-btn strong,
.steps h3, .strip-clients li, .menu-nav a {
  font-family: var(--f-display); font-weight: 400; letter-spacing: .5px;
}
.eyebrow, .text-link, .btn-solid, .role-chip, .cover-kind, .card-meta .kind,
.cert-issuer, .cert-verify, .step-n, .site-footer, .signals dt {
  font-family: var(--f-mono); letter-spacing: 1.2px;
}
.nav-pill, .tt-track {
  background: color-mix(in srgb, var(--ground) 72%, transparent);
  border-color: color-mix(in srgb, var(--ink) 10%, transparent);
}
.nav-avatar img { object-position: 68% 35%; }
.nav-cta { background: var(--card); color: var(--ink); }
.btn-solid { background: var(--ink); color: var(--ground); }
html[data-theme="night"] .tt-thumb { transform: translateX(28px); background: #F3EEDF; }

/* The theme switch is intentionally more tactile than the navigation pill.
   Each celestial icon sits inside a full 36px disc instead of touching it. */
.theme-toggle {
  border-radius: 999px;
  transition: transform .3s var(--ease), filter .3s var(--ease);
}
.theme-toggle:hover { transform: translateY(-1px); filter: brightness(1.02); }
.theme-toggle:active { transform: translateY(0) scale(.98); }
.tt-track {
  width: 82px; height: 46px; padding: 4px;
  background: #E8E0C0;
  border: 1px solid rgba(6, 6, 6, .2);
  box-shadow: 0 9px 22px -15px rgba(6, 6, 6, .7), inset 0 1px 0 rgba(255,255,255,.72);
}
.tt-thumb {
  width: 36px; height: 36px;
  background: #F5C542;
  box-shadow: 0 3px 9px -4px rgba(6, 6, 6, .7), inset 0 1px 0 rgba(255,255,255,.55);
}
html[data-theme="night"] .tt-track {
  background: #182231;
  border-color: rgba(243, 238, 223, .22);
  box-shadow: 0 9px 24px -15px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.08);
}
html[data-theme="night"] .tt-thumb { transform: translateX(36px); background: #F3EEDF; }
.tt-icon { width: 18px; height: 18px; }
.tt-sun { left: 13px; }
.tt-moon { right: 13px; }

/* Theme changes use one composited crossfade. Keeping the grain blend mode and
   sky layers stable avoids a full-viewport repaint during every toggle. */
body { transition: none; }
.grain,
html[data-theme="night"] .grain { opacity: .035; mix-blend-mode: soft-light; }
.sky-day, .sky-night, .stars {
  will-change: opacity;
  transform: translateZ(0);
  transition-duration: .5s;
}
.sun, .moon { will-change: transform, opacity; transition-duration: .5s; }
html[data-theme="night"] .moon { filter: none; }

.hero {
  min-height: 100svh; margin: 0; padding: 0 var(--pad); border-radius: 0;
  align-content: center;
}
.hero-sky { background: none; transform: none; }
.hero-sky::after { content: none; }
.hero-sky > * { display: block; }
.hero-sky .sky-day, .hero-sky .sky-night, .hero-sky .stars { display: block; }
.hero-wave { display: block; }
.hero-content { max-width: none; padding-left: clamp(1.6rem, 4vw, 3.4rem); }
.hero-eyebrow, .hero-rail { color: var(--display-c); }
.hero-display {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(58px, 11vw, 152px); line-height: .96;
  letter-spacing: 2.7px; color: var(--display-c);
}
.hero-display .line { white-space: normal; }
.hero-display .line-2 {
  padding-left: clamp(7rem, 42vw, 40rem);
  font-size: .52em;
  white-space: normal;
  color: var(--display-c);
}
.hero-rail { left: calc(var(--pad) - .35rem); opacity: .85; }
.console {
  left: clamp(1.5rem, 10vw, 11rem); top: 57%; bottom: auto;
  width: min(560px, 88vw); background: linear-gradient(180deg, #F7F3EA, #E6E0D2);
  border: 0; box-shadow: 0 26px 50px -18px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.85);
  backdrop-filter: none;
}
.dial {
  background: conic-gradient(from 180deg, #121212 0%, #121212 8.76%, #272727 10%, #121212 12%, #202020 25%, #121212 40%, #262626 55%, #121212 70%, #242424 85%, #121212 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.09), 0 6px 16px -8px rgba(0,0,0,.7);
}
.dial-face { background: var(--ground); box-shadow: 0 0 0 3px rgba(0,0,0,.35); }
.dial-label { color: #121212; }
html[data-theme="night"] .dial:not(.is-on) .dial-label { color: #F3EEDF; }
.console-screen { background: #14171C; box-shadow: inset 0 2px 8px rgba(0,0,0,.6); }
.console-cap { color: #6D7A8A; }
.console-out { color: #C6D3E2; }
.console-bar { background: #262C36; }

.story { text-align: center; }
.story-lead, .story-serif { max-width: none; }
.role-chip { justify-self: center; }
.story-portrait {
  width: min(100%, 980px); margin: clamp(2rem, 5vw, 4rem) auto 0;
  border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line);
  opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.story-portrait.in { opacity: 1; transform: none; }
.story-portrait img {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  height: auto;
  object-fit: cover;
  object-position: center 28%;
  transform: scale(calc(1 + (1 - var(--sc-reveal-progress, 1)) * .035));
  transform-origin: 50% 50%;
  will-change: transform;
}
.strip { background: linear-gradient(var(--ground), var(--sand)); }
.strip-label, .strip-list { justify-content: center; }
.card { background: var(--card); }
.card:hover { box-shadow: 0 22px 44px -22px rgba(0,0,0,.35); }
.cover { background: var(--c, #1E3A5F); }
.cover[data-pattern="stripe"], .cover[data-pattern="qr"],
.cover[data-pattern="dots"], .cover[data-pattern="frames"],
.cover[data-pattern="bridge"], .cover[data-pattern="window"],
.cover[data-pattern="mirror"], .cover[data-pattern="phone"],
.cover[data-pattern="bar"], .cover[data-pattern="arch"] { background: var(--c, #1E3A5F); }
.cover-kind { color: rgba(255,255,255,.72); }
.cover-mark, .cover-arrow { color: #FFF9E9; font-family: var(--f-display); font-weight: 400; letter-spacing: .5px; }
.about-portrait { border: 1px solid var(--line); box-shadow: none; }
.contact-band { background: linear-gradient(var(--ground), var(--sand)); justify-items: center; text-align: center; border-radius: 0; }

/* Keep the language console in document flow across phone and tablet widths.
   In tablet landscape it otherwise sits over the second headline line and
   visually removes words when the copy changes between English and Arabic. */
@media (max-width: 1200px) {
  .hero { align-content: center; gap: 2rem; padding: 6rem var(--pad) 3rem; }
  .hero-content { max-width: none; }
  .console { position: static; width: 100%; max-width: 520px; margin-top: 1.6rem; }
  .hero-display .line-2 { padding-left: clamp(2rem, 12vw, 8rem); }
}
@media (max-width: 760px) {
  .hero { min-height: 100svh; margin: 0; border-radius: 0; padding: 6rem var(--pad) 3rem; }
  .hero-content { max-width: none; }
  .hero-display { font-size: clamp(48px, 14vw, 66px); line-height: .96; }
  .hero-display .line { white-space: normal; }
  .hero-display .line-2 { padding-left: 0; font-size: .82em; }
  .console { position: static; width: 100%; margin-top: 1.2rem; }
  .dial { width: 62px; height: 62px; }
  .story, .contact-band { text-align: center; }
  .role-chip { justify-self: center; }
  .strip-label, .strip-list { justify-content: center; }
  .cert-list { grid-template-columns: 1fr; }
}

/* Arabic needs its own display rhythm. The English art direction relies on a
   very large offset second line; applying that geometry to joined Arabic
   script makes the phrase sprawl behind the console and outside the viewport. */
html[dir="rtl"] .hero-display {
  /* Reserve the left side for the language console on desktop. The available
     text column grows with the viewport and becomes full-width once the
     console drops into flow at the tablet breakpoint. */
  width: min(100%, 72rem, calc(90vw - 720px));
  margin-left: auto;
  font-size: clamp(68px, 7.4vw, 116px);
  line-height: 1.18;
  text-align: right;
}
html[dir="rtl"] .hero-display .line-2 {
  width: min(100%, 24ch);
  margin-left: auto;
  padding: 0;
  font-family: "IBM Plex Sans Arabic", system-ui, sans-serif;
  font-size: clamp(34px, 3.25vw, 52px);
  font-weight: 500;
  line-height: 1.45;
}
@media (max-width: 1200px) {
  html[dir="rtl"] .hero-display {
    width: 100%;
    font-size: clamp(56px, 9vw, 88px);
  }
  html[dir="rtl"] .hero-display .line-2 {
    font-size: clamp(30px, 4.8vw, 46px);
  }
}
@media (max-width: 760px) {
  html[dir="rtl"] .hero-display {
    font-size: clamp(44px, 12vw, 58px);
    line-height: 1.22;
  }
  html[dir="rtl"] .hero-display .line-2 {
    width: 100%;
    font-size: clamp(25px, 7vw, 34px);
    line-height: 1.5;
  }
}

/* The project cover, not its readable label, carries the depth movement. */
[data-view="home"] .card { transform-style: preserve-3d; }
[data-view="home"] .card-meta { position: relative; z-index: 2; background: var(--card); }
.story-portrait[data-sc-reveal] {
  opacity: 1;
  transform: none;
  transition: none;
}

[data-view="home"] .home-work[data-sc-act="pan"] { padding: 0; }
.home-work-stage {
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--ground);
}
.home-work-rail {
  width: max-content;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(19rem, 36vw, 32rem);
  align-items: stretch;
  gap: clamp(1rem, 2.3vw, 2rem);
  padding: clamp(5rem, 9vh, 7rem) var(--pad);
  will-change: transform;
}
.work-rail-intro {
  min-height: min(66vh, 38rem);
  margin: 0;
  padding: clamp(1.5rem, 4vw, 3rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.work-rail-intro .h2-serif { font-size: clamp(42px, 5vw, 74px); }
.home-work-rail .card {
  width: 100%;
  min-height: min(66vh, 38rem);
  grid-column: auto;
  grid-row: auto;
}
.home-work-rail .cover,
.home-work-rail .cover-tall,
.home-work-rail .cover-flat {
  min-height: 0;
  flex: 1 1 auto;
  aspect-ratio: auto;
}
.home-work-rail .card-meta { flex: 0 0 auto; }
.home-work-rail .card-cta .cover { min-height: 100%; }

@media (max-width: 760px) {
  .home-work-rail {
    grid-auto-columns: min(82vw, 21rem);
    gap: 1rem;
    padding-block: 5.5rem;
  }
  .work-rail-intro,
  .home-work-rail .card { min-height: 64svh; }
  .work-rail-intro .h2-serif { font-size: clamp(38px, 11vw, 52px); }
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .hero-display .ch { opacity: 1 !important; transform: none !important; }
  .story-portrait img { transform: none !important; }
  .card, .rv { opacity: 1 !important; transform: none !important; }
  .sun, .moon, .cloud, .cloud-layer, .plane { transform: none !important; rotate: none !important; }
  /* Ambient sky motion is removed outright rather than fast-forwarded. */
  .flight, .bird, .bird path, .layer-a .cloud, .layer-b .cloud, .layer-c .cloud, .sun {
    animation: none !important;
  }
  .flight { display: none; }
  .home-work[data-sc-act="pan"] { height: auto !important; }
  .home-work-stage { height: auto; overflow-x: auto; }
  .home-work-rail {
    width: auto;
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-block: var(--pad);
    transform: none !important;
  }
  .work-rail-intro { grid-column: 1 / -1; min-height: auto; }
  .home-work-rail .card { min-height: 28rem; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 760px) {
  .home-work-rail { grid-template-columns: 1fr; }
}