@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Outfit:wght@300;400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ==========================================================================
   NGX STUDIO — DESIGN SYSTEM TOKENS
   ========================================================================== */
:root {
  /* Surfaces */
  --bg: #060806;
  --bg-elev: #0a0d08;
  --bg-deep: #030402;
  --surface: rgba(255, 255, 255, 0.032);
  --surface-2: rgba(255, 255, 255, 0.055);
  --surface-glass: rgba(11, 15, 9, 0.72);

  /* Ink */
  --ink: #f3f6ef;
  --ink-2: #a7b79e;
  --ink-3: #6d7d64;

  /* Accents */
  --lime: #d2ff00;
  --lime-soft: #b8e600;
  --lime-glow: rgba(210, 255, 0, 0.38);
  --cyan: #00e5ff;
  --violet: #9d4edd;

  /* Lines */
  --line: rgba(255, 255, 255, 0.085);
  --line-2: rgba(255, 255, 255, 0.14);
  --line-accent: rgba(210, 255, 0, 0.26);

  /* Legacy aliases (kept so older selectors keep resolving) */
  --bg-primary: var(--bg);
  --bg-card: rgba(15, 20, 12, 0.7);
  --bg-card-hover: rgba(24, 32, 17, 0.86);
  --text-main: var(--ink);
  --text-muted: var(--ink-2);
  --text-dim: var(--ink-3);
  --accent-lime: var(--lime);
  --accent-lime-hover: var(--lime-soft);
  --accent-lime-glow: var(--lime-glow);
  --border-color: var(--line-accent);
  --border-dim: var(--line);

  /* Type — headlines pair a geometric sans in sentence case with a lowercase
     italic serif on the accent word. The serif is what carries the editorial
     feel; everything else stays quiet so it reads as the accent.
       display = headline sans        accent = italic serif accent word
       heading = UI chrome + numerals (Outfit has tabular figures, so animated
                 counters don't jitter mid-count)
       body    = running copy         mono   = HUD / telemetry labels          */
  --font-display: 'Outfit', 'Plus Jakarta Sans', sans-serif;
  --font-accent: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --font-heading: 'Outfit', 'Plus Jakarta Sans', sans-serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --track-display: -0.022em;
  --track-display-sm: -0.012em;

  /* Colour of the italic-serif accent word. Defaults to the brand lime so the
     headings stay consistent with the logo and the 3D artwork. The reference
     this style came from used a warm copper — to go that way, change these two
     values only:  --accent-serif: #e8ab86;  --accent-serif-glow: rgba(232,171,134,.3); */
  --accent-serif: var(--lime);
  --accent-serif-glow: rgba(210, 255, 0, 0.28);

  /* Metrics */
  --container-width: 1320px;
  --gutter: 3rem;
  /* Rendered height of .hero-ticker — keep in step with its padding/font */
  --ticker-h: 54px;
  --radius-xl: 28px;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 9px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.76, 0, 0.24, 1);
  --transition: 0.35s var(--ease-out);
}

/* ==========================================================================
   RESET & BASE
   ========================================================================== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

::selection { background-color: var(--lime); color: #000; }

/* NOTE: do not set `scroll-behavior: smooth` here. It makes every programmatic
   scroll asynchronous, so GSAP ScrollToPlugin's per-frame writes never land and
   nav links silently do nothing. Smooth scrolling is owned by script.js, which
   falls back to scrollIntoView({behavior:'smooth'}) when GSAP is unavailable. */
html {
  color-scheme: dark;
  background-color: var(--bg);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  color: var(--ink);
  background-color: var(--bg);
  overflow-x: hidden;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.is-loading { overflow: hidden; }
body.modal-open { overflow: hidden; }

img, svg { display: block; max-width: 100%; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
a { color: inherit; }

::-webkit-scrollbar { width: 9px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(210, 255, 0, 0.55), rgba(0, 229, 255, 0.35));
  border-radius: 99px;
  border: 2px solid var(--bg-deep);
}
::-webkit-scrollbar-thumb:hover { background: var(--lime); }

/* Shared mono label */
.hud-mono {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.hud-mono.hud-val { color: var(--lime); }

/* ==========================================================================
   GLOBAL OVERLAYS — GRAIN + SCROLL PROGRESS
   ========================================================================== */
.grain-overlay {
  position: fixed;
  inset: -50%;
  z-index: 9998;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainShift 8s steps(6) infinite;
}

@keyframes grainShift {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-2%, 3%); }
  40%  { transform: translate(3%, -2%); }
  60%  { transform: translate(-3%, -3%); }
  80%  { transform: translate(2%, 2%); }
  100% { transform: translate(0, 0); }
}

.scroll-progress-track {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 9997;
  background: rgba(255, 255, 255, 0.05);
  pointer-events: none;
}

.scroll-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--cyan), var(--lime));
  box-shadow: 0 0 12px var(--lime-glow);
  transform-origin: left center;
}

/* ==========================================================================
   PRELOADER — "PRESS SHEET"
   Prepress furniture rather than a tech boot screen. --progress and
   --plate-spread are written by script.js on every progress tick.
   ========================================================================== */
/* Background is painted by the paper strips so they can sweep the site into view */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 10001;
  overflow: hidden;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  --progress: 0%;
  --plate-spread: 1;
}

/* Paper strips — the sheet gets guillotined and lifted on exit */
.preloader-shutters {
  position: absolute;
  inset: 0;
  display: flex;
  z-index: 1;
}

.shutter {
  flex: 1;
  background: linear-gradient(180deg, #0b0f0a 0%, #030402 100%);
  /* a lit paper edge on each cut, so the strips read as stock, not panels */
  border-right: 1px solid rgba(255, 255, 255, 0.045);
  box-shadow: inset -8px 0 18px -14px rgba(0, 0, 0, 0.9);
  will-change: transform;
}
.shutter:last-child { border-right: none; }

/* Baseline grid, as in a page layout */
.preloader-grid {
  position: absolute;
  inset: -20%;
  z-index: 2;
  opacity: 0.55;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 100% 26px, 84px 100%;
  mask-image: radial-gradient(ellipse at center, #000 10%, transparent 68%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 10%, transparent 68%);
}

/* Margin / column guides — the cyan hairlines every layout app draws */
.press-guides { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.guide { position: absolute; background: rgba(0, 174, 239, 0.28); }
.guide-v { top: 0; bottom: 0; width: 1px; }
.guide-h { left: 0; right: 0; height: 1px; }

/* Ink roller sweeping down the sheet */
.preloader-scanline {
  position: absolute;
  left: 0; right: 0;
  height: 180px;
  z-index: 3;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.05) 45%,
              rgba(210, 255, 0, 0.07) 55%, transparent);
  pointer-events: none;
}

.preloader-aura {
  position: absolute;
  width: 780px;
  height: 780px;
  max-width: 130vw;
  max-height: 130vw;
  border-radius: 50%;
  z-index: 2;
  background: radial-gradient(circle, rgba(210, 255, 0, 0.1) 0%, rgba(0, 174, 239, 0.045) 40%, transparent 70%);
  filter: blur(40px);
}

/* --- Trim / crop marks ---------------------------------------------------- */
.crop-mark { position: absolute; width: 46px; height: 46px; z-index: 4; }
.crop-mark i { position: absolute; background: rgba(255, 255, 255, 0.3); }
.crop-mark i:first-child { left: 0; top: 50%; width: 26px; height: 1px; }
.crop-mark i:last-child { top: 0; left: 50%; width: 1px; height: 26px; }
.cm-tl { top: 34px; left: 34px; }
.cm-tr { top: 34px; right: 34px; transform: scaleX(-1); }
.cm-bl { bottom: 34px; left: 34px; transform: scaleY(-1); }
.cm-br { bottom: 34px; right: 34px; transform: scale(-1); }

/* --- Registration marks (circle + crosshair) ----------------------------- */
.reg-mark {
  position: absolute;
  z-index: 4;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.32);
}
.reg-mark::before,
.reg-mark::after {
  content: "";
  position: absolute;
  background: rgba(255, 255, 255, 0.32);
}
.reg-mark::before { left: -8px; right: -8px; top: 50%; height: 1px; }
.reg-mark::after { top: -8px; bottom: -8px; left: 50%; width: 1px; }
.reg-a { top: 12%; right: 13%; }
.reg-b { bottom: 12%; left: 13%; }

.preloader-hud {
  position: absolute;
  left: 0; right: 0;
  z-index: 6;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.6rem 2rem;
  flex-wrap: wrap;
}
.preloader-hud-top { top: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.preloader-hud-bottom { bottom: 0; border-top: 1px solid rgba(255, 255, 255, 0.05); }

.hud-dot-live { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--lime); }
.hud-dot-live i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 10px var(--lime);
  animation: pulseDot 1.4s ease-in-out infinite;
}

.preloader-stage {
  position: relative;
  z-index: 6;
  width: min(560px, 88vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* --- The mark ------------------------------------------------------------- */
/* margin leaves room for the wordmark's out-of-register C/M/Y ghosts below */
.preloader-logo-frame {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2.4rem;
}

/* --- Wordmark colour separation ------------------------------------------
   The C/M/Y ghosts are real text, not a masked image, so this renders
   identically everywhere. All four share type metrics by inheriting from
   .wordmark-stack, which is what keeps them in perfect register at 100%. */
.wordmark-stack {
  position: relative;
  display: inline-block;
  margin-bottom: 0.9rem;
  font-family: var(--font-display);
  line-height: 1;
}
.wordmark-stack .preloader-wordmark,
.wm-plate {
  font: inherit;
  letter-spacing: inherit;
  margin: 0;
  white-space: nowrap;
}
.wordmark-stack .preloader-wordmark { position: relative; z-index: 2; }

.wm-plate {
  position: absolute;
  inset: 0;
  display: block;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: calc(0.2 + 0.62 * var(--plate-spread));
  filter: blur(calc(var(--plate-spread) * 1.1px));
  will-change: transform, opacity;
}
/* flat process ink, so the accent word doesn't keep its lime serif treatment */
.wm-plate .title-accent {
  color: inherit;
  -webkit-text-fill-color: currentColor;
  text-shadow: none;
}

.wm-c { color: #00aeef; transform: translate(calc(var(--plate-spread) * -23px), calc(var(--plate-spread) * -10px)); }
.wm-m { color: #ec008c; transform: translate(calc(var(--plate-spread) * 21px), calc(var(--plate-spread) * -7px)); }
.wm-y { color: #fff200; transform: translate(calc(var(--plate-spread) * 3px), calc(var(--plate-spread) * 19px)); }

/* No ring, no glow — the artwork carries itself */
.preloader-logo {
  position: relative;
  z-index: 2;
  width: clamp(210px, 25vw, 330px);
  height: auto;
}

.preloader-wordmark {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2rem, 6vw, 3.1rem);
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
  background: linear-gradient(120deg, #ffffff 25%, var(--lime) 75%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 0.9rem;
}

/* Once script.js splits the wordmark into characters the parent's
   background-clip no longer reaches the text, so each glyph carries its own.
   The italic accent word is excluded — it keeps its solid serif treatment. */
.preloader-wordmark .split-char:not(.title-accent) {
  background: linear-gradient(150deg, #ffffff 20%, #e8f5b0 90%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.preloader-wordmark .title-accent {
  -webkit-text-fill-color: var(--accent-serif);
  background: none;
}

.preloader-roles {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 2.6rem;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  color: var(--ink-2);
  text-transform: uppercase;
}
.role-line { overflow: hidden; display: inline-block; }
.role-line > span { display: inline-block; }
.role-sep { color: var(--lime); opacity: 0.6; }

.preloader-counter {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0.15rem;
  font-family: var(--font-heading);
  font-weight: 900;
  line-height: 0.85;
  margin-bottom: 1.4rem;
}
.counter-value {
  font-size: clamp(4rem, 15vw, 7.5rem);
  letter-spacing: -0.04em;
  background: linear-gradient(180deg, #ffffff, #7d9400);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-variant-numeric: tabular-nums;
  /* background-clip:text paints only inside the box, and this box is tight on
     two counts: line-height 0.85 squashes it vertically, and -0.04em tracking
     pulls the right edge in past the last glyph. Both shave the digits — most
     visibly on "100". Pad the paint box out, then pull the same amount back off
     with margins so the layout is unchanged. */
  padding: 0.08em 0.09em 0.14em;
  margin: -0.08em -0.09em -0.14em;
}
.counter-unit {
  font-size: clamp(1rem, 3vw, 1.6rem);
  color: var(--lime);
  margin-top: 0.6rem;
}

/* --- Ink strip (the progress bar) ----------------------------------------
   One continuous band in the brand green, filled via --progress. The tick
   marks behind it read as a measuring rule rather than separate boxes. */
.press-strip {
  position: relative;
  width: 100%;
  height: 10px;
  margin-bottom: 1rem;
}

.strip-ticks,
.strip-fill {
  position: absolute;
  inset: 0;
  border-radius: 99px;
}

/* empty track + 5% rule marks */
.strip-ticks {
  background-color: rgba(255, 255, 255, 0.055);
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.16) 1px, transparent 1px);
  background-size: 5% 100%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* the inked band */
.strip-fill {
  width: var(--progress, 0%);
  background: linear-gradient(90deg, rgba(210, 255, 0, 0.5), var(--lime));
  box-shadow: 0 0 20px -2px var(--lime-glow), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* the wet edge of the ink */
.strip-head {
  position: absolute;
  top: -5px;
  bottom: -5px;
  left: 0;
  width: 2px;
  margin-left: -1px;
  border-radius: 99px;
  background: var(--lime);
  box-shadow: 0 0 14px 2px var(--lime-glow);
}

.preloader-status {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  flex-wrap: wrap;
}

/* ==========================================================================
   HEADER / NAVIGATION
   ========================================================================== */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 0.85rem var(--gutter);
  background: rgba(6, 8, 6, 0.78);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border-bottom: 1px solid var(--line);
  transition: background 0.45s ease, border-color 0.45s ease, backdrop-filter 0.45s ease, padding 0.4s ease;
}

.header.in-hero-animation {
  background: linear-gradient(180deg, rgba(3, 4, 2, 0.55), transparent);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}

.header.is-condensed { padding: 0.5rem var(--gutter); }

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
}

.brand-logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }

.brand-logo-img {
  height: 60px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 16px rgba(210, 255, 0, 0.5));
  transition: transform 0.4s var(--ease-out), filter 0.4s ease;
}
.header.is-condensed .brand-logo-img { height: 48px; }
.brand-logo:hover .brand-logo-img {
  transform: scale(1.07);
  filter: drop-shadow(0 0 24px rgba(210, 255, 0, 0.8));
}

.nav-links-shell { flex: 1; display: flex; justify-content: center; min-width: 0; }

.nav-links {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.3rem;
  border-radius: 99px;
  border: 1px solid var(--line);
  background: var(--surface);
}

.nav-pill {
  position: absolute;
  top: 0.3rem;
  left: 0;
  height: calc(100% - 0.6rem);
  width: 0;
  border-radius: 99px;
  background: rgba(210, 255, 0, 0.12);
  border: 1px solid var(--line-accent);
  pointer-events: none;
  opacity: 0;
}

.nav-link {
  position: relative;
  display: block;
  padding: 0.45rem 0.8rem;
  border-radius: 99px;
  color: var(--ink-2);
  text-decoration: none;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.775rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  transition: color 0.3s ease;
}
.nav-link:hover { color: var(--ink); }
.nav-link.active { color: var(--lime); font-weight: 800; }

.nav-actions { display: flex; align-items: center; gap: 0.9rem; flex-shrink: 0; }

/* Buttons */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.85rem 1.7rem;
  border-radius: 99px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  border: 1px solid transparent;
  transition: color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, background-color 0.35s ease;
}

/* Shine sweep */
.btn::after {
  content: "";
  position: absolute;
  top: 0; left: -120%;
  width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
}
.btn:hover::after { animation: btnShine 0.75s var(--ease-out) forwards; }

@keyframes btnShine {
  from { left: -120%; }
  to   { left: 160%; }
}

.btn-primary {
  background: var(--lime);
  color: #050703;
  box-shadow: 0 8px 26px -8px var(--lime-glow);
}
.btn-primary:hover { background: #fff; box-shadow: 0 12px 34px -8px rgba(255, 255, 255, 0.35); }

.btn-outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-accent);
}
.btn-outline:hover {
  background: rgba(210, 255, 0, 0.1);
  border-color: var(--lime);
  color: var(--lime);
}

.btn-nav-talk {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.25rem;
  background: var(--lime);
  color: #050703;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  border-radius: 99px;
  text-decoration: none;
  box-shadow: 0 6px 20px -6px var(--lime-glow);
  transition: background 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
  white-space: nowrap;
}
.btn-nav-talk:hover { background: #fff; box-shadow: 0 8px 26px -6px rgba(255, 255, 255, 0.45); }
.btn-nav-talk i { font-size: 0.7rem; transition: transform 0.3s ease; }
.btn-nav-talk:hover i { transform: translateX(3px); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--lime);
  text-decoration: none;
}
.link-arrow i { transition: transform 0.3s var(--ease-out); }
.link-arrow:hover i { transform: translate(3px, -3px); }

/* Burger */
.mobile-toggle {
  display: none;
  width: 42px; height: 42px;
  border-radius: 12px;
  border: 1px solid var(--line-accent);
  background: var(--surface);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.burger-line {
  display: block;
  width: 18px; height: 2px;
  background: var(--lime);
  border-radius: 2px;
  transition: transform 0.35s var(--ease-out), opacity 0.25s ease;
}
.mobile-toggle.is-open .burger-line:first-child { transform: translateY(3.5px) rotate(45deg); }
.mobile-toggle.is-open .burger-line:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* ==========================================================================
   LAYOUT PRIMITIVES
   ========================================================================== */
.scroll-container { position: relative; z-index: 2; }

.section {
  position: relative;
  z-index: 2;
  padding: 9rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}

.container {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
}

/* No max-width here: it would cap the display headline too, and a single long
   accent word (e.g. TRANSFORMATIONS) needs the full container. The paragraph
   is constrained on its own via .section-desc instead. */
.section-header { margin-bottom: 4rem; }
.section-header-center { margin-left: auto; margin-right: auto; text-align: center; }
.section-header-center .section-desc { margin-left: auto; margin-right: auto; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.42rem 1rem 0.42rem 0.8rem;
  border-radius: 99px;
  border: 1px solid var(--line-accent);
  background: rgba(210, 255, 0, 0.06);
  color: var(--lime);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 1.4rem;
}
.eyebrow-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 10px var(--lime);
  animation: pulseDot 1.8s ease-in-out infinite;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 6vw, 5rem);
  font-weight: 900;
  line-height: 0.94;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}

/* The accent word: lowercase serif against the sentence-case sans. Upright at
   rest, true italic on hover.
   The two styles have different widths, so script.js pins each accent's box to
   whichever is wider (see lockAccentWidths) and text-align keeps the italic
   starting on the same origin — the heading never reflows on hover.
   nowrap is the hard guarantee that the word stays on one line, and it also
   has to cancel the break-word/hyphens the heading passes down. */
.title-accent {
  display: inline-block;
  text-align: left;
  white-space: nowrap;
  overflow-wrap: normal;
  hyphens: none;
  font-family: var(--font-accent);
  font-style: normal;
  font-weight: 400;
  font-size: 1.1em;
  letter-spacing: 0.004em;
  color: var(--accent-serif);
  text-shadow: 0 0 40px var(--accent-serif-glow);
  /* the italic's top-right overhang would otherwise clip against the next word */
  padding-right: 0.07em;
  transition: text-shadow 0.35s ease;
}

.title-accent:hover {
  font-style: italic;
  text-shadow: 0 0 52px var(--accent-serif-glow);
}

/* The preloader is on screen for ~1s and its decorative C/M/Y ghost copies
   cannot follow a hover, so the wordmark there stays upright. */
.preloader-stage .title-accent { pointer-events: none; }

.section-desc {
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  color: var(--ink-2);
  max-width: 680px;
  line-height: 1.68;
}

.highlight-lime-bg {
  background: var(--lime);
  color: #050703;
  padding: 0.05rem 0.45rem;
  border-radius: 6px;
  font-weight: 900;
}

/* Split-text scaffolding (built by script.js) */
.split-line { display: block; overflow: hidden; }
.split-line > .split-inner { display: inline-block; will-change: transform; }
.split-char { display: inline-block; will-change: transform; }

/* Glass card base */
.card-surface {
  background: var(--surface-glass);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* Mouse-follow spotlight on hoverable cards */
[data-spotlight="true"] { position: relative; overflow: hidden; }
[data-spotlight="true"]::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.35s ease;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(210, 255, 0, 0.1), transparent 65%);
  pointer-events: none;
}
[data-spotlight="true"]:hover::before { opacity: 1; }

/* ==========================================================================
   HERO — PINNED 3D FRAME SEQUENCE
   ========================================================================== */
.hero-pinned-wrapper { position: relative; height: 320vh; }

.hero-sticky-frame {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-canvas-container { position: absolute; inset: 0; z-index: 1; }

#hero-canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  will-change: transform;
  transform: translateZ(0);
}

.canvas-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 45%, rgba(6, 8, 6, 0.15) 0%, rgba(6, 8, 6, 0.85) 88%),
    linear-gradient(180deg, rgba(6, 8, 6, 0.8) 0%, rgba(6, 8, 6, 0) 24%, rgba(6, 8, 6, 0) 68%, rgba(6, 8, 6, 0.97) 100%);
}

.canvas-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 220px 60px rgba(0, 0, 0, 0.75);
}

/* Offset clears the vertical social rail that sits on the same left edge */
.hero-overlay-content {
  position: absolute;
  bottom: 7.5rem;
  left: calc(var(--gutter) + 72px);
  z-index: 6;
  max-width: 560px;
  text-align: left;
}

.hero-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 1.15rem;
  border-radius: 99px;
  background: rgba(6, 8, 6, 0.68);
  border: 1px solid var(--line-accent);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  margin-bottom: 1.6rem;
  box-shadow: 0 0 34px -8px rgba(210, 255, 0, 0.3);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.live-pulse-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 12px var(--lime);
  animation: pulseDot 1.6s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(1.35); }
}

.hero-kicker {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.1vw, 2.5rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin-bottom: 1.8rem;
  text-transform: none;
}
/* Direct children only — the nested .title-accent must stay inline */
.hero-kicker > span,
.hero-kicker > .split-line { display: block; }

.hero-cta-group { display: flex; flex-wrap: wrap; gap: 0.85rem; }
.hero-cta-group .btn { padding: 0.75rem 1.5rem; font-size: 0.76rem; }

/* Vertical social rail */
.hero-social-rail {
  position: absolute;
  left: var(--gutter);
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
}
.rail-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  color: var(--ink-3);
  writing-mode: vertical-rl;
}
.rail-line { width: 1px; height: 46px; background: linear-gradient(180deg, var(--line-accent), transparent); }
.hero-social-rail a {
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 0.85rem;
  text-decoration: none;
  transition: var(--transition);
}
.hero-social-rail a:hover {
  color: #050703;
  background: var(--lime);
  border-color: var(--lime);
  transform: scale(1.12);
}

/* Hero HUD */
.hero-hud {
  position: absolute;
  right: var(--gutter);
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  width: 190px;
  padding: 1rem 1.1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: rgba(6, 8, 6, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.hud-row { display: flex; justify-content: space-between; gap: 0.6rem; }
.hud-meter {
  height: 2px;
  margin: 0.65rem 0;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 99px;
  overflow: hidden;
}
.hud-meter-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--cyan), var(--lime));
  box-shadow: 0 0 10px var(--lime-glow);
}

/* Scroll hint */
.scroll-down-hint {
  position: absolute;
  bottom: 7.5rem;
  right: var(--gutter);
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  color: var(--lime);
  text-transform: uppercase;
}
.hint-track {
  position: relative;
  width: 1px;
  height: 54px;
  background: rgba(210, 255, 0, 0.22);
  overflow: hidden;
}
.hint-thumb {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 40%;
  background: var(--lime);
  box-shadow: 0 0 12px var(--lime);
  animation: hintSlide 1.9s var(--ease-io) infinite;
}
@keyframes hintSlide {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(250%); }
}

/* Hero ticker — sticks to the bottom edge of the pinned hero frame. Its height
   is a token because two other things depend on it: its own sticky offset, and
   how far up the hero copy has to sit to clear it (it paints above the copy). */
.hero-ticker {
  position: sticky;
  top: calc(100vh - var(--ticker-h));
  margin-top: calc(var(--ticker-h) * -1);
  z-index: 7;
  padding: 0.9rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(3, 4, 2, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow: hidden;
}
.ticker-track { display: flex; align-items: center; gap: 2.6rem; width: max-content; }
.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 2.6rem;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
}
.ticker-item i { font-size: 0.55rem; color: var(--lime); }

/* ==========================================================================
   ABOUT — BENTO
   ========================================================================== */
.about-bento {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1.4rem;
}

.bento {
  position: relative;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--surface-glass);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  overflow: hidden;
  transition: border-color 0.35s ease, transform 0.45s var(--ease-out), box-shadow 0.45s ease;
}
.bento::after {
  content: "";
  position: absolute;
  top: 0; left: 12%; right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(210, 255, 0, 0.4), transparent);
  opacity: 0.5;
}
.bento:hover { border-color: var(--line-accent); }

.bento-portrait { grid-column: span 2; grid-row: span 2; padding: 0; display: flex; flex-direction: column; }
.portrait-frame { position: relative; flex: 1; min-height: 380px; overflow: hidden; }
/* 114% height gives the GSAP parallax drift room to move without exposing gaps */
.about-photo {
  width: 100%;
  height: 114%;
  min-height: 380px;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.9s var(--ease-out), filter 0.6s ease;
  filter: saturate(0.9) contrast(1.05);
}
.bento-portrait:hover .about-photo { transform: scale(1.05); filter: saturate(1.05) contrast(1.08); }

.portrait-corner {
  position: absolute;
  width: 20px; height: 20px;
  border: 2px solid var(--lime);
  opacity: 0.8;
  pointer-events: none;
}
.portrait-corner.tl { top: 14px; left: 14px; border-right: 0; border-bottom: 0; }
.portrait-corner.tr { top: 14px; right: 14px; border-left: 0; border-bottom: 0; }
.portrait-corner.bl { bottom: 14px; left: 14px; border-right: 0; border-top: 0; }
.portrait-corner.br { bottom: 14px; right: 14px; border-left: 0; border-top: 0; }

.portrait-caption {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.9rem 1.1rem;
  border-top: 1px solid var(--line);
  background: rgba(3, 4, 2, 0.6);
}

.bento-intro { grid-column: span 4; padding: 3rem 3rem 2.6rem; }

.about-hello-lead {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-heading);
  font-size: 1.45rem;
  font-weight: 600;
  font-style: italic;
  color: var(--lime);
  margin-bottom: 0.35rem;
}
.about-hello-lead .wave-hand {
  display: inline-block;
  font-style: normal;
  transform-origin: 70% 70%;
  animation: waveHand 2.4s infinite ease-in-out;
}
@keyframes waveHand {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(14deg); }
  40% { transform: rotate(-8deg); }
  60% { transform: rotate(14deg); }
  80% { transform: rotate(-4deg); }
}

.about-name-hero {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4.4vw, 3.5rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.about-name-hero .im-text { color: var(--ink-3); font-weight: 500; margin-right: 0.3rem; }

.about-subtitle-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 99px;
  margin-bottom: 1.6rem;
}
.about-subtitle-badge i { color: var(--lime); }

.about-lead {
  font-size: 1.06rem;
  color: var(--ink);
  line-height: 1.7;
  margin-bottom: 1rem;
  font-weight: 500;
}
.about-sub { font-size: 0.96rem; color: var(--ink-2); line-height: 1.7; margin-bottom: 1.4rem; }

.philosophy-quote {
  font-size: 1.15rem;
  font-style: italic;
  color: var(--ink);
  border-left: 2px solid var(--lime);
  padding-left: 1.3rem;
  font-weight: 500;
}
.philosophy-quote strong { color: var(--lime); font-style: normal; font-weight: 900; }

.bento-stat {
  grid-column: span 2;
  padding: 1.9rem 1.6rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 158px;
}
.bento-stat:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.9); }

.stat-num {
  display: flex;
  align-items: baseline;
  gap: 0.05rem;
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 4vw, 3.2rem);
  font-weight: 900;
  line-height: 1;
  color: var(--lime);
  font-variant-numeric: tabular-nums;
}
.stat-lbl {
  margin-top: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.stat-glyph {
  position: absolute;
  right: 1.2rem; bottom: 1rem;
  font-size: 2.4rem;
  color: rgba(210, 255, 0, 0.09);
  pointer-events: none;
}

.bento-availability {
  grid-column: span 4;
  padding: 1.9rem 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  justify-content: center;
}
.avail-top { display: flex; align-items: center; gap: 0.6rem; }
.avail-copy { font-size: 0.95rem; color: var(--ink-2); }

.bento-marquee {
  grid-column: span 6;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 0;
  min-height: 84px;
}
.mini-marquee { width: 100%; overflow: hidden; }
.mini-marquee-track {
  display: inline-flex;
  align-items: center;
  gap: 1.1rem;
  width: max-content;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  color: var(--ink-2);
  white-space: nowrap;
}
.mini-marquee-track span:nth-child(even) { color: var(--lime); }

/* ==========================================================================
   WORK / PORTFOLIO
   ========================================================================== */
.filter-bar {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 2.4rem;
}

.filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.62rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-family: var(--font-heading);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  border-radius: 99px;
  transition: var(--transition);
}
.filter-btn:hover { color: var(--ink); border-color: var(--line-accent); }
.filter-btn.active {
  background: var(--lime);
  color: #050703;
  border-color: var(--lime);
  box-shadow: 0 6px 22px -8px var(--lime-glow);
}
.filter-count {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  opacity: 0.7;
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.8rem;
  margin-top: 3rem;
}

.project-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--surface-glass);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.4s ease, box-shadow 0.5s ease;
  transform-style: preserve-3d;
}
.project-card:hover {
  border-color: var(--line-accent);
  box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.95), 0 0 40px -20px var(--lime-glow);
}

.project-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #000;
}
.project-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease-out), filter 0.5s ease;
  will-change: transform;
}
.project-card:hover .project-thumb img { transform: scale(1.08); filter: brightness(0.72); }

.project-index {
  position: absolute;
  top: 0.9rem; left: 1rem;
  z-index: 3;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  color: var(--lime);
  padding: 0.22rem 0.5rem;
  border-radius: 6px;
  background: rgba(3, 4, 2, 0.7);
  border: 1px solid var(--line-accent);
}

.project-tag {
  position: absolute;
  top: 0.9rem; right: 1rem;
  z-index: 3;
  background: var(--lime);
  color: #050703;
  padding: 0.24rem 0.7rem;
  border-radius: 6px;
  font-family: var(--font-heading);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.project-hover-veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, rgba(3, 4, 2, 0.1), rgba(3, 4, 2, 0.6));
  opacity: 0;
  transition: opacity 0.4s ease;
}
.project-card:hover .project-hover-veil { opacity: 1; }

.veil-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.2rem;
  border-radius: 99px;
  background: var(--lime);
  color: #050703;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  transform: translateY(12px) scale(0.95);
  transition: transform 0.45s var(--ease-out);
}
.project-card:hover .veil-cta { transform: translateY(0) scale(1); }

.project-tools-overlay {
  position: absolute;
  bottom: 0.85rem; left: 1rem;
  z-index: 3;
  display: flex;
  gap: 0.4rem;
}

.mini-tool-badge {
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  font-family: var(--font-heading);
  font-size: 0.62rem;
  font-weight: 900;
  color: #fff;
  background: rgba(3, 4, 2, 0.78);
  border: 1px solid var(--line-2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform 0.3s var(--ease-out), border-color 0.3s ease;
}
.project-card:hover .mini-tool-badge { transform: translateY(-3px); }
.mini-tool-badge.ps  { color: #31a8ff; border-color: rgba(49, 168, 255, 0.5); }
.mini-tool-badge.ai  { color: #ff9a00; border-color: rgba(255, 154, 0, 0.5); }
.mini-tool-badge.id  { color: #ff3f7f; border-color: rgba(255, 63, 127, 0.5); }
.mini-tool-badge.ae  { color: #9999ff; border-color: rgba(153, 153, 255, 0.5); }
.mini-tool-badge.pr  { color: #9999ff; border-color: rgba(153, 153, 255, 0.5); }
.mini-tool-badge.fg  { color: #a259ff; border-color: rgba(162, 89, 255, 0.5); }
.mini-tool-badge.c4d, .mini-tool-badge.cd { color: #00a651; border-color: rgba(0, 166, 81, 0.5); font-size: 0.52rem; }
.mini-tool-badge.bl  { color: #ff7f30; border-color: rgba(255, 127, 48, 0.5); }

.project-body { padding: 1.7rem 1.6rem; display: flex; flex-direction: column; flex: 1; }

.project-title {
  font-family: var(--font-display);
  font-size: 1.22rem;
  font-weight: 900;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.project-desc { font-size: 0.9rem; color: var(--ink-2); margin-bottom: 1.4rem; line-height: 1.6; }

.project-btn {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lime);
}
.project-btn i { transition: transform 0.35s var(--ease-out); }
.project-card:hover .project-btn i { transform: translateX(5px); }

/* ==========================================================================
   CASE STUDY SPOTLIGHT — PINNED HORIZONTAL
   ========================================================================== */
.section-spotlight { position: relative; z-index: 2; }

.spotlight-pin {
  position: relative;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2rem;
  padding: 4rem 0 2.5rem;
  overflow: hidden;
}

.spotlight-head { padding: 0 var(--gutter); max-width: var(--container-width); }
.spotlight-head .eyebrow { margin-bottom: 0.85rem; }
.spotlight-head .section-title { font-size: clamp(1.9rem, 3.8vw, 3.2rem); margin-bottom: 0.7rem; }
.spotlight-head .section-desc { max-width: 620px; font-size: 0.95rem; }

.spotlight-track {
  display: flex;
  gap: 1.6rem;
  padding: 0 var(--gutter);
  width: max-content;
  will-change: transform;
}

.spotlight-panel {
  display: grid;
  grid-template-columns: 0.95fr 1fr;
  gap: 0;
  width: min(900px, 84vw);
  height: clamp(330px, 50vh, 480px);
  border-radius: var(--radius-xl);
  border: 1px solid var(--line);
  background: var(--surface-glass);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  overflow: hidden;
  transition: border-color 0.4s ease;
}
.spotlight-panel:hover { border-color: var(--line-accent); }

.spotlight-visual { position: relative; overflow: hidden; min-height: 0; background: #000; }
.spotlight-visual img {
  width: 100%;
  height: 114%;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.06);
  transition: transform 1s var(--ease-out);
}
.spotlight-panel:hover .spotlight-visual img { transform: scale(1.05); }
.spotlight-visual::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(3, 4, 2, 0.15), rgba(6, 8, 6, 0.72));
}
.spotlight-num {
  position: absolute;
  bottom: 1rem; left: 1.2rem;
  z-index: 2;
  font-family: var(--font-heading);
  font-size: 4.5rem;
  font-weight: 900;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(210, 255, 0, 0.55);
}

.spotlight-copy {
  padding: 1.9rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  overflow: hidden;
}

.spot-chip {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  color: var(--lime);
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--line-accent);
  border-radius: 99px;
  background: rgba(210, 255, 0, 0.06);
}

.spotlight-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.spotlight-brief { font-size: 0.88rem; color: var(--ink-2); line-height: 1.62; }

.spot-facts { display: flex; flex-direction: column; gap: 0.4rem; }
.spot-facts li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px dashed var(--line);
}
.spot-fact-k {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.spot-fact-v { font-size: 0.85rem; font-weight: 700; color: var(--ink); text-align: right; }

.spot-result {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.8rem 1.05rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--line-accent);
  background: rgba(210, 255, 0, 0.05);
}
.spot-result-num {
  flex-shrink: 0;
  font-family: var(--font-heading);
  font-size: 2.1rem;
  font-weight: 900;
  line-height: 1;
  color: var(--lime);
  font-variant-numeric: tabular-nums;
}
.spot-result-num span { font-size: 1.05rem; }
.spot-result-lbl { font-size: 0.78rem; color: var(--ink-2); line-height: 1.45; }

.spotlight-rail {
  position: relative;
  margin: 0 var(--gutter);
  height: 2px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 99px;
}
.spotlight-rail-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 8%;
  background: linear-gradient(90deg, var(--cyan), var(--lime));
  border-radius: 99px;
  box-shadow: 0 0 12px var(--lime-glow);
}
.spotlight-rail-hint {
  position: absolute;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  white-space: nowrap;
}
.spotlight-rail-hint i { color: var(--lime); font-size: 0.6rem; }

/* ==========================================================================
   SERVICES
   ========================================================================== */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.4rem;
}

.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2.6rem 2rem 2.2rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--surface-glass);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition: border-color 0.4s ease, transform 0.45s var(--ease-out), box-shadow 0.45s ease;
}
.service-card:hover {
  border-color: var(--line-accent);
  transform: translateY(-6px);
  box-shadow: 0 26px 54px -26px rgba(0, 0, 0, 0.9);
}

.service-index {
  position: absolute;
  top: 1.4rem; right: 1.6rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  color: var(--ink-3);
}

.service-icon {
  width: 54px; height: 54px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-size: 1.3rem;
  margin-bottom: 1.5rem;
  color: var(--lime);
  background: rgba(210, 255, 0, 0.08);
  border: 1px solid var(--line-accent);
  transition: background 0.4s ease, color 0.4s ease, transform 0.5s var(--ease-out);
}
.service-card:hover .service-icon {
  background: var(--lime);
  color: #050703;
  transform: rotate(-8deg) scale(1.06);
}

.service-title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin-bottom: 0.7rem;
}
.service-desc { font-size: 0.92rem; color: var(--ink-2); line-height: 1.65; margin-bottom: 1.4rem; }

.service-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
}
.service-meta span {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 0.24rem 0.55rem;
  border-radius: 6px;
  border: 1px solid var(--line);
}

/* ==========================================================================
   SKILLS
   ========================================================================== */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.4rem;
}

.skill-3d-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2.1rem 1.6rem 1.7rem;
  text-align: center;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--surface-glass);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transform-style: preserve-3d;
  transition: border-color 0.35s ease, box-shadow 0.45s ease;
}
.skill-3d-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.4s ease;
  background: radial-gradient(circle at 50% 0%, var(--skill-glow, var(--lime-glow)), transparent 62%);
  pointer-events: none;
}
.skill-3d-card:hover {
  border-color: var(--skill-color, var(--lime));
  box-shadow: 0 26px 54px -26px rgba(0, 0, 0, 0.95), 0 0 34px -14px var(--skill-glow, var(--lime-glow));
}
.skill-3d-card:hover::before { opacity: 0.22; }

.skill-3d-logo {
  width: 82px; height: 82px;
  margin: 0 auto 1.3rem;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 12px 24px var(--skill-glow, var(--lime-glow)));
  transform: translateZ(28px);
  transition: transform 0.5s var(--ease-out);
}
.skill-3d-logo img { width: 100%; height: 100%; object-fit: contain; }
.skill-3d-card:hover .skill-3d-logo { transform: translateZ(46px) scale(1.1); }

.skill-name {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 0.25rem;
  /* Long single words (ILLUSTRATOR) must break rather than widen the tile */
  overflow-wrap: break-word;
}

.skill-desc-badge {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 1.2rem;
}

.skill-level-bar {
  width: 100%;
  height: 4px;
  margin-top: auto;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 99px;
  overflow: hidden;
}
.skill-level-fill {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--skill-color, var(--lime)), rgba(255, 255, 255, 0.85));
  box-shadow: 0 0 12px var(--skill-glow, var(--lime-glow));
}

.skill-level-text {
  display: flex;
  justify-content: space-between;
  margin-top: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.skill-level-text span:last-child { color: var(--skill-color, var(--lime)); }

/* ==========================================================================
   BEFORE / AFTER TRANSFORMATIONS
   ========================================================================== */
.transform-tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-bottom: 2.4rem;
}
.transform-tab {
  padding: 0.6rem 1.25rem;
  border-radius: 99px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-family: var(--font-heading);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
  transition: var(--transition);
}
.transform-tab:hover { color: var(--ink); border-color: var(--line-accent); }
.transform-tab.active {
  background: var(--lime);
  border-color: var(--lime);
  color: #050703;
  box-shadow: 0 6px 22px -8px var(--lime-glow);
}

.comparison-shell {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 1.6rem;
  align-items: stretch;
}

.comparison-slider {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: #000;
  aspect-ratio: 16 / 10;
  cursor: ew-resize;
  user-select: none;
  --cmp: 50%;
}

.img-after, .img-before { position: absolute; inset: 0; }
.img-after img, .img-before img {
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.img-before {
  clip-path: inset(0 calc(100% - var(--cmp)) 0 0);
  -webkit-clip-path: inset(0 calc(100% - var(--cmp)) 0 0);
}
/* Degrades the "before" half so the reveal reads clearly even when both
   sides point at the same file (see the note in index.html #transform). */
.img-before img { filter: grayscale(0.9) brightness(0.62) contrast(0.78) blur(0.6px); }

.cmp-badge {
  position: absolute;
  top: 1rem;
  z-index: 4;
  padding: 0.3rem 0.75rem;
  border-radius: 99px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.cmp-badge-before {
  left: 1rem;
  background: rgba(3, 4, 2, 0.78);
  border: 1px solid var(--line-2);
  color: var(--ink-2);
}
.cmp-badge-after {
  right: 1rem;
  background: rgba(210, 255, 0, 0.9);
  border: 1px solid var(--lime);
  color: #050703;
}

.cmp-handle {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--cmp);
  z-index: 5;
  width: 46px;
  margin-left: -23px;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: ew-resize;
  touch-action: none;
}
.cmp-handle-line {
  flex: 1;
  width: 2px;
  background: var(--lime);
  box-shadow: 0 0 16px var(--lime-glow);
}
.cmp-handle-grip {
  width: 46px; height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--lime);
  color: #050703;
  font-size: 0.9rem;
  box-shadow: 0 0 26px var(--lime-glow);
  transition: transform 0.3s var(--ease-out);
}
.cmp-handle:hover .cmp-handle-grip { transform: scale(1.1); }

.transform-notes {
  padding: 2.2rem 1.9rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--surface-glass);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.transform-note-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.transform-note-list { display: flex; flex-direction: column; gap: 0.8rem; }
.transform-note-list li {
  display: flex;
  gap: 0.7rem;
  font-size: 0.9rem;
  color: var(--ink-2);
  line-height: 1.55;
}
.transform-note-list i { color: var(--lime); font-size: 0.75rem; margin-top: 0.32rem; }

.transform-metric {
  margin-top: auto;
  padding-top: 1.3rem;
  border-top: 1px solid var(--line);
}
.transform-metric-num {
  display: block;
  font-family: var(--font-heading);
  font-size: 2.6rem;
  font-weight: 900;
  line-height: 1;
  color: var(--lime);
  font-variant-numeric: tabular-nums;
}
.transform-metric-lbl { font-size: 0.84rem; color: var(--ink-2); }

.transform-swap-note {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  line-height: 1.7;
  padding: 0.7rem 0.85rem;
  border-radius: var(--radius-sm);
  border: 1px dashed var(--line-2);
  background: rgba(255, 255, 255, 0.02);
  text-transform: none;
  letter-spacing: 0.04em;
}
.transform-swap-note i { color: var(--lime); margin-top: 0.2rem; }

/* ==========================================================================
   EXPERIENCE TIMELINE
   ========================================================================== */
.timeline-wrapper {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  padding-left: 3.2rem;
}

.timeline-laser-track {
  position: absolute;
  left: 8px; top: 6px; bottom: 6px;
  width: 2px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 99px;
  overflow: hidden;
}
.timeline-laser-progress {
  width: 100%;
  height: 0%;
  background: linear-gradient(180deg, var(--cyan), var(--lime));
  box-shadow: 0 0 18px var(--lime-glow);
  border-radius: 99px;
}

.timeline-item { position: relative; margin-bottom: 1.6rem; }
.timeline-item:last-child { margin-bottom: 0; }

.timeline-dot {
  position: absolute;
  left: -3.2rem;
  top: 1.9rem;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--lime);
  box-shadow: 0 0 0 4px rgba(6, 8, 6, 1), 0 0 18px var(--lime-glow);
}
.timeline-dot::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--lime);
}

.timeline-card {
  padding: 1.8rem 1.9rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--surface-glass);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition: border-color 0.35s ease, transform 0.45s var(--ease-out);
}
.timeline-card:hover { border-color: var(--line-accent); transform: translateX(6px); }

.timeline-year {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding: 0.3rem 0.7rem;
  border-radius: 99px;
  border: 1px solid var(--line);
  margin-bottom: 0.85rem;
}
.timeline-year.is-current {
  color: #050703;
  background: var(--lime);
  border-color: var(--lime);
  font-weight: 700;
}
.timeline-year.is-current .live-pulse-dot { background: #050703; box-shadow: none; }

.timeline-title {
  font-family: var(--font-display);
  font-size: 1.22rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin-bottom: 0.3rem;
}

.timeline-company {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink-2);
  margin-bottom: 0.8rem;
}
.timeline-company i { color: var(--lime); font-size: 0.78rem; }
.timeline-copy { font-size: 0.9rem; color: var(--ink-2); line-height: 1.65; }

/* ==========================================================================
   AWARDS & METRICS
   ========================================================================== */
.awards-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.4rem;
}

.award-card {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  padding: 1.9rem 1.7rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--surface-glass);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition: border-color 0.35s ease, transform 0.45s var(--ease-out), box-shadow 0.45s ease;
}
.award-card:hover {
  border-color: var(--line-accent);
  transform: translateY(-6px);
  box-shadow: 0 26px 54px -26px rgba(0, 0, 0, 0.9);
}

.award-badge-icon {
  width: 52px; height: 52px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-size: 1.35rem;
  color: var(--lime);
  background: rgba(210, 255, 0, 0.08);
  border: 1px solid var(--line-accent);
  box-shadow: 0 0 24px -10px var(--lime-glow);
}

.award-year {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  color: var(--lime);
  margin-bottom: 0.3rem;
}
.award-title {
  font-family: var(--font-display);
  font-size: 1.14rem;
  font-weight: 900;
  margin-bottom: 0.2rem;
}
.award-org { font-size: 0.82rem; font-weight: 700; color: var(--ink-2); margin-bottom: 0.55rem; }
.award-desc { font-size: 0.83rem; color: var(--ink-3); line-height: 1.6; }

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.2rem;
  margin-top: 3.4rem;
}

.metric-card {
  position: relative;
  padding: 2.1rem 1.4rem;
  text-align: center;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: linear-gradient(160deg, rgba(20, 27, 15, 0.8), rgba(6, 8, 6, 0.92));
  overflow: hidden;
  transition: border-color 0.35s ease, transform 0.45s var(--ease-out), box-shadow 0.45s ease;
}
.metric-card::after {
  content: "";
  position: absolute;
  inset: auto -20% -60% -20%;
  height: 120px;
  background: radial-gradient(ellipse at center, var(--lime-glow), transparent 70%);
  opacity: 0.18;
  pointer-events: none;
}
.metric-card:hover {
  border-color: var(--lime);
  transform: translateY(-6px);
  box-shadow: 0 22px 46px -22px var(--lime-glow);
}

.metric-num {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.05rem;
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 4vw, 3.1rem);
  font-weight: 900;
  line-height: 1;
  color: var(--lime);
  margin-bottom: 0.6rem;
  font-variant-numeric: tabular-nums;
}
.metric-label { font-size: 0.95rem; font-weight: 800; color: #fff; margin-bottom: 0.2rem; }
.metric-sub {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ==========================================================================
   PROCESS — STICKY STEP SCROLLER
   ========================================================================== */
.section-process .container { max-width: var(--container-width); }

.process-layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 4rem;
  align-items: start;
}

.process-sticky { position: sticky; top: 22vh; }
.process-sticky .section-title { margin-bottom: 1rem; }

.process-bignum {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-top: 2.6rem;
  font-family: var(--font-heading);
  font-weight: 900;
  line-height: 1;
}
.process-bignum > span:first-child {
  font-size: clamp(4rem, 9vw, 7rem);
  color: var(--lime);
  font-variant-numeric: tabular-nums;
}
.process-bignum-total { font-size: 1.4rem; color: var(--ink-3); }

.process-progress {
  margin-top: 1.4rem;
  height: 3px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
  max-width: 280px;
}
.process-progress-fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--cyan), var(--lime));
  box-shadow: 0 0 12px var(--lime-glow);
}

.process-steps { display: flex; flex-direction: column; gap: 1.2rem; }

.process-card {
  padding: 2rem 1.9rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--surface-glass);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition: border-color 0.35s ease, background 0.35s ease, transform 0.45s var(--ease-out);
}
.process-card.is-active {
  border-color: var(--line-accent);
  background: rgba(24, 32, 17, 0.8);
  transform: translateX(8px);
}

.process-card-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.8rem; }

.process-num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--lime);
  padding: 0.3rem 0.6rem;
  border-radius: 8px;
  border: 1px solid var(--line-accent);
  background: rgba(210, 255, 0, 0.06);
  flex-shrink: 0;
}

.process-step-title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.process-card p { font-size: 0.92rem; color: var(--ink-2); line-height: 1.68; }

.process-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1.2rem; }
.process-tags span {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 0.24rem 0.55rem;
  border-radius: 6px;
  border: 1px solid var(--line);
}

/* ==========================================================================
   PRICING
   ========================================================================== */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.6rem;
  align-items: stretch;
}

.pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2.4rem 2rem;
  border-radius: var(--radius-xl);
  border: 1px solid var(--line);
  background: var(--surface-glass);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition: border-color 0.35s ease, transform 0.45s var(--ease-out), box-shadow 0.45s ease;
}
.pricing-card:hover {
  border-color: var(--line-accent);
  transform: translateY(-8px);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.95);
}

.pricing-featured {
  border-color: var(--lime);
  background: linear-gradient(165deg, rgba(30, 40, 18, 0.92), rgba(9, 13, 7, 0.96));
  box-shadow: 0 0 44px -18px var(--lime-glow);
}
.pricing-featured::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(140deg, var(--lime), transparent 45%, var(--cyan));
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.pricing-badge-top {
  align-self: flex-start;
  padding: 0.32rem 0.85rem;
  border-radius: 99px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--surface-2);
  color: var(--ink-2);
  margin-bottom: 1.3rem;
}
.featured-badge { background: var(--lime); color: #050703; font-weight: 700; }

.pricing-title {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin-bottom: 0.45rem;
}

.pricing-price {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  font-family: var(--font-heading);
  font-size: 2.4rem;
  font-weight: 900;
  color: var(--lime);
  margin-bottom: 0.9rem;
}
.pricing-price span {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--ink-3);
}

.pricing-desc { font-size: 0.88rem; color: var(--ink-2); line-height: 1.65; margin-bottom: 1.7rem; }

.pricing-features { flex: 1; margin-bottom: 2rem; }
.pricing-features li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.88rem;
  color: var(--ink);
  margin-bottom: 0.75rem;
}
.pricing-features li i { color: var(--lime); font-size: 0.72rem; margin-top: 0.35rem; }

.btn-select-package { width: 100%; }

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 1.5rem;
}

.testimonial-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2.4rem 2rem 2rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--surface-glass);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition: border-color 0.35s ease, transform 0.45s var(--ease-out);
}
.testimonial-card:hover { border-color: var(--line-accent); transform: translateY(-5px); }

.quote-glyph {
  position: absolute;
  top: 0.4rem; right: 1.3rem;
  font-family: var(--font-display);
  font-size: 6rem;
  font-weight: 900;
  line-height: 1;
  color: rgba(210, 255, 0, 0.09);
  pointer-events: none;
}

.stars { display: flex; gap: 0.2rem; color: var(--lime); font-size: 0.8rem; margin-bottom: 1.1rem; }

.quote-text {
  font-size: 1rem;
  font-style: italic;
  color: var(--ink);
  line-height: 1.7;
  margin-bottom: 1.7rem;
  flex: 1;
}

.client-meta { display: flex; align-items: center; gap: 0.85rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.client-avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 900;
  color: #050703;
  background: linear-gradient(140deg, var(--lime), var(--cyan));
}
.client-name {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.client-role { display: block; font-size: 0.78rem; color: var(--ink-2); }

/* Client logo marquee */
.client-logos-marquee-wrapper {
  position: relative;
  margin-top: 4rem;
  padding: 2.2rem 0 2.6rem;
  border-radius: var(--radius-xl);
  border: 1px solid var(--line);
  background: rgba(10, 14, 8, 0.55);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  overflow: hidden;
}
.client-logos-marquee-wrapper::before,
.client-logos-marquee-wrapper::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 150px;
  z-index: 5;
  pointer-events: none;
}
.client-logos-marquee-wrapper::before { left: 0; background: linear-gradient(to right, #080b06, transparent); }
.client-logos-marquee-wrapper::after { right: 0; background: linear-gradient(to left, #080b06, transparent); }

.marquee-heading { text-align: center; margin-bottom: 1.6rem; }
.marquee-subtitle-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lime);
  background: rgba(210, 255, 0, 0.06);
  border: 1px solid var(--line-accent);
  padding: 0.4rem 0.95rem;
  border-radius: 99px;
}

.logos-marquee-track {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  width: max-content;
  padding: 0 0.7rem;
}

.client-logo-item {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  min-width: 168px;
  height: 66px;
  padding: 0.8rem 1.5rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--surface);
  transition: border-color 0.3s ease, background 0.3s ease, transform 0.4s var(--ease-out);
}
.client-logo-item:hover {
  border-color: var(--lime);
  background: rgba(210, 255, 0, 0.09);
  transform: translateY(-4px);
}
.client-logo-item img {
  height: 40px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
  filter: brightness(0) invert(1) opacity(0.55);
  transition: filter 0.35s ease;
  pointer-events: none;
}
.client-logo-item:hover img { filter: brightness(0) invert(1) opacity(1); }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-layout {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 4rem;
  align-items: start;
}

.faq-intro { position: sticky; top: 20vh; }
.faq-intro .section-title { margin-bottom: 1rem; }

.faq-cta-card {
  margin-top: 2.4rem;
  padding: 1.8rem 1.7rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-accent);
  background: linear-gradient(160deg, rgba(30, 40, 18, 0.7), rgba(9, 13, 7, 0.9));
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
}
.faq-cta-top { display: flex; align-items: center; gap: 0.6rem; }
.faq-cta-card p { font-size: 0.92rem; color: var(--ink-2); line-height: 1.65; }

.faq-list { display: flex; flex-direction: column; gap: 0.7rem; }

.faq-item {
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--surface-glass);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  overflow: hidden;
  transition: border-color 0.35s ease, background 0.35s ease;
}
.faq-item.is-open { border-color: var(--line-accent); background: rgba(20, 27, 15, 0.8); }

.faq-q {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 1.35rem 1.5rem;
  text-align: left;
}
.faq-q-num {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  color: var(--lime);
  flex-shrink: 0;
}
.faq-q-text {
  flex: 1;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.faq-icon {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.72rem;
  color: var(--lime);
  border: 1px solid var(--line-accent);
  transition: background 0.35s ease, color 0.35s ease, transform 0.4s var(--ease-out);
}
.faq-item.is-open .faq-icon {
  background: var(--lime);
  color: #050703;
  transform: rotate(135deg);
}

.faq-a { height: 0; overflow: hidden; }
.faq-a-inner { padding: 0 1.5rem 1.45rem 3.4rem; }
.faq-a-inner p { font-size: 0.92rem; color: var(--ink-2); line-height: 1.72; }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 4rem;
  align-items: start;
}

.contact-title-hero {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.4vw, 3.6rem);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-bottom: 1.2rem;
}

.contact-status-bar { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.6rem 0 2rem; }
.contact-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.42rem 0.95rem;
  border-radius: 99px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.contact-status-pill i { color: var(--lime); }

.contact-info-list { display: flex; flex-direction: column; gap: 0.8rem; }

.contact-item {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1rem 1.2rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--surface);
  text-decoration: none;
  transition: border-color 0.3s ease, transform 0.4s var(--ease-out), background 0.3s ease;
}
.contact-item:not(.is-static):hover {
  border-color: var(--line-accent);
  background: rgba(210, 255, 0, 0.05);
  transform: translateX(6px);
}
.contact-item.is-static { cursor: default; }

.contact-icon {
  width: 46px; height: 46px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-size: 1.05rem;
  color: var(--lime);
  background: rgba(210, 255, 0, 0.08);
  border: 1px solid var(--line-accent);
}
.contact-item-k {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 0.15rem;
}
.contact-item-v { font-weight: 800; font-size: 0.98rem; word-break: break-word; }
.contact-item-go { margin-left: auto; color: var(--lime); font-size: 0.8rem; opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; }
.contact-item:hover .contact-item-go { opacity: 1; transform: translateX(3px); }

.social-bar { display: flex; gap: 0.7rem; margin-top: 2.2rem; }
.social-link-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1rem;
  color: var(--ink);
  text-decoration: none;
  border: 1px solid var(--line);
  background: var(--surface);
  transition: var(--transition);
}
.social-link-btn:hover {
  background: var(--lime);
  border-color: var(--lime);
  color: #050703;
  transform: translateY(-4px);
}

.contact-form-card {
  padding: 2.6rem;
  border-radius: var(--radius-xl);
  border: 1px solid var(--line);
  background: var(--surface-glass);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.form-group { margin-bottom: 1.3rem; }
.form-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 0.5rem;
}
.form-control {
  width: 100%;
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: rgba(3, 4, 2, 0.6);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.96rem;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
.form-control::placeholder { color: var(--ink-3); }
.form-control:focus {
  outline: none;
  border-color: var(--lime);
  background: rgba(3, 4, 2, 0.85);
  box-shadow: 0 0 0 3px rgba(210, 255, 0, 0.1);
}
.form-control.is-invalid { border-color: #ff5470; box-shadow: 0 0 0 3px rgba(255, 84, 112, 0.12); }
textarea.form-control { resize: vertical; min-height: 130px; }

.btn-submit { width: 100%; padding: 1rem; }
.form-note {
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: center;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer {
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(3, 4, 2, 0.9), #030402);
}

.footer-marquee {
  overflow: hidden;
  padding: 2.2rem 0;
  border-bottom: 1px solid var(--line);
}
.footer-marquee-track {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  width: max-content;
}
/* Direct children only, so the nested italic accent keeps its own treatment */
.footer-marquee-track > span {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 7vw, 5.5rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.22);
}
/* Outlined sans + solid italic serif reads as one phrase with two voices */
.footer-marquee-track .title-accent {
  color: var(--accent-serif);
  -webkit-text-stroke: 0;
  text-shadow: 0 0 44px var(--accent-serif-glow);
}
.footer-marquee-track .fm-star {
  -webkit-text-stroke: 0;
  color: var(--lime);
  font-size: clamp(1.2rem, 3vw, 2.4rem);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 3rem;
  padding: 4rem 0 3rem;
}

.footer-brand .brand-logo-img { height: 58px; margin-bottom: 1.2rem; }
.footer-blurb { font-size: 0.9rem; color: var(--ink-2); line-height: 1.7; max-width: 340px; margin-bottom: 1.5rem; }
.footer-socials { display: flex; gap: 0.65rem; }

.footer-col { display: flex; flex-direction: column; gap: 0.7rem; }
.footer-col-title {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: 0.4rem;
}
.footer-col a {
  font-size: 0.9rem;
  color: var(--ink-2);
  text-decoration: none;
  width: fit-content;
  transition: color 0.3s ease, transform 0.3s ease;
}
.footer-col a:hover { color: var(--lime); transform: translateX(4px); }
.footer-static { font-size: 0.9rem; color: var(--ink-3); }
.footer-avail {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lime);
}

.footer-copy {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.6rem 0 2.2rem;
  border-top: 1px solid var(--line);
  font-size: 0.82rem;
  color: var(--ink-3);
}

/* ==========================================================================
   BACK TO TOP
   ========================================================================== */
.back-to-top {
  position: fixed;
  bottom: 2rem; right: 2rem;
  z-index: 900;
  width: 52px; height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--lime);
  background: rgba(6, 8, 6, 0.85);
  border: 1px solid var(--line-accent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 0.4s ease, transform 0.4s var(--ease-out), visibility 0.4s, background 0.3s ease, color 0.3s ease;
}
.back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--lime); color: #050703; }
.back-to-top i { font-size: 0.95rem; position: relative; z-index: 2; }

.btt-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.btt-ring circle { fill: none; stroke-width: 2; }
.btt-ring-bg { stroke: rgba(255, 255, 255, 0.08); }
.btt-ring-fill {
  stroke: var(--lime);
  stroke-linecap: round;
  stroke-dasharray: 125.6;
  stroke-dashoffset: 125.6;
}

/* ==========================================================================
   MODAL LIGHTBOX
   ========================================================================== */
.modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(3, 4, 2, 0.9);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  opacity: 0;
  pointer-events: none;
}
.modal.active { pointer-events: auto; }

.slider-modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 96%;
  max-width: 1060px;
  /* vh on a phone is the LARGE viewport (address bar excluded), so a 92vh
     sheet is taller than the screen and the centred sheet loses its top and
     bottom — which is how the slide image ended up off-screen on mobile. dvh
     is the visible height; the plain vh line above stays as the fallback. */
  max-height: 92vh;
  max-height: 92dvh;
  overflow: hidden;
  border-radius: var(--radius-xl);
  border: 1px solid var(--line-accent);
  background: #080b06;
  box-shadow: 0 0 60px -20px var(--lime-glow), 0 40px 90px -30px rgba(0, 0, 0, 0.95);
}

.modal-close {
  position: absolute;
  top: 1rem; right: 1rem;
  z-index: 20;
  width: 38px; height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1rem;
  color: #050703;
  background: var(--lime);
  transition: transform 0.35s var(--ease-out), background 0.3s ease;
}
.modal-close:hover { transform: rotate(90deg) scale(1.08); background: #fff; }

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-shrink: 0;
  padding: 1.15rem 1.6rem 1.15rem;
  padding-right: 4rem;
  border-bottom: 1px solid var(--line);
  background: rgba(14, 19, 10, 0.8);
}
.modal-header-info { display: flex; align-items: center; gap: 0.8rem; min-width: 0; }
.project-tag-badge {
  flex-shrink: 0;
  background: var(--lime);
  color: #050703;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.28rem 0.6rem;
  border-radius: 6px;
}
.modal-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.slide-counter-badge {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  color: var(--lime);
  background: rgba(210, 255, 0, 0.08);
  border: 1px solid var(--line-accent);
  padding: 0.3rem 0.75rem;
  border-radius: 99px;
}

.modal-slider-viewport {
  position: relative;
  flex: 1;
  min-height: 320px;
  max-height: 56vh;
  display: grid;
  place-items: center;
  background: #020302;
  overflow: hidden;
  touch-action: none;
}
.slider-image-wrapper {
  position: relative;
  width: 100%; height: 100%;
  display: grid;
  place-items: center;
  padding: 1rem;
}
.modal-img {
  max-width: 100%;
  max-height: 52vh;
  max-height: 52dvh;
  width: auto; height: auto;
  object-fit: contain;
  border-radius: var(--radius-md);
  box-shadow: 0 20px 44px -20px rgba(0, 0, 0, 0.9);
}

.slide-placeholder-note {
  position: absolute;
  bottom: 1.1rem; left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  border: 1px dashed var(--line-accent);
  background: rgba(3, 4, 2, 0.9);
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  pointer-events: none;
  z-index: 5;
}
.slide-placeholder-note i { color: var(--lime); }

.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1rem;
  color: var(--lime);
  background: rgba(9, 13, 7, 0.82);
  border: 1px solid var(--line-accent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.slider-arrow:hover { background: var(--lime); color: #050703; box-shadow: 0 0 22px -4px var(--lime-glow); }
.slider-arrow.prev-btn { left: 1rem; }
.slider-arrow.next-btn { right: 1rem; }

.screen-arrow {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 12;
  width: 40px; height: 40px;
  border-radius: 50%;
  display: none;
  place-items: center;
  font-size: 0.95rem;
  color: var(--lime);
  background: rgba(9, 13, 7, 0.88);
  border: 1px solid var(--line-accent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}
.screen-arrow.visible { display: grid; }
.screen-arrow:hover { background: var(--lime); color: #050703; box-shadow: 0 0 22px -4px var(--lime-glow); }
.screen-arrow.up-btn { top: 0.75rem; }
.screen-arrow.down-btn { bottom: 0.75rem; }

.modal-footer {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  flex-shrink: 0;
  padding: 1.2rem 1.6rem 1.4rem;
  border-top: 1px solid var(--line);
  background: rgba(14, 19, 10, 0.9);
}
.slide-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin-bottom: 0.25rem;
}
.slide-desc { font-size: 0.88rem; color: var(--ink-2); line-height: 1.55; }

.slide-dots-container { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.4rem; }
.slide-dot {
  width: 30px; height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--line);
  transition: var(--transition);
}
.slide-dot:hover { border-color: var(--line-accent); color: #fff; background: rgba(210, 255, 0, 0.1); }
.slide-dot.active {
  background: var(--lime);
  border-color: var(--lime);
  color: #050703;
  box-shadow: 0 0 14px -2px var(--lime-glow);
}

/* ==========================================================================
   3D BACKGROUND CANVAS + CUSTOM CURSOR
   ========================================================================== */
.bg-3d-canvas {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 1;
  opacity: 0.92;
  will-change: transform;
  transform: translateZ(0);
}

.cursor-dot {
  position: fixed;
  top: 0; left: 0;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 10px var(--lime);
  pointer-events: none;
  z-index: 10005;
  transform: translate(-50%, -50%);
}

.cursor-ring {
  position: fixed;
  top: 0; left: 0;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(210, 255, 0, 0.45);
  pointer-events: none;
  z-index: 10004;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  transition: width 0.3s var(--ease-out), height 0.3s var(--ease-out),
              border-color 0.3s ease, background-color 0.3s ease;
}
.cursor-ring.active {
  width: 62px; height: 62px;
  border-color: var(--lime);
  background-color: rgba(210, 255, 0, 0.09);
}
@media (hover: none), (pointer: coarse) {
  .cursor-dot, .cursor-ring { display: none !important; }

  /* A tap latches :hover on touch — the lift would stick after scrolling away,
     so the cards keep their glow but drop the transform. */
  .pricing-card:hover { transform: none; }
  .skill-3d-card:hover .skill-3d-logo { transform: translateZ(28px); }
  /* The portrait is contained at an exact fit here — a latched hover zoom would
     crop the photo the mobile layout exists to show in full. */
  .bento-portrait:hover .about-photo { transform: none; }
}

/* ==========================================================================
   AMBIENT ORBS
   ========================================================================== */
.ambient-glow-orb {
  position: absolute;
  width: 480px; height: 480px;
  max-width: 90vw;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(110px);
  opacity: 0.16;
  z-index: 0;
  animation: floatOrb 14s ease-in-out infinite alternate;
}
.orb-lime   { background: radial-gradient(circle, var(--lime) 0%, transparent 70%); }
.orb-cyan   { background: radial-gradient(circle, var(--cyan) 0%, transparent 70%); }
.orb-purple { background: radial-gradient(circle, var(--violet) 0%, transparent 70%); }

@keyframes floatOrb {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(36px, -36px) scale(1.14); }
}

/* GPU hints */
.bento, .project-card, .service-card, .skill-3d-card, .timeline-card,
.process-card, .testimonial-card, .contact-form-card, .award-card,
.metric-card, .pricing-card, .spotlight-panel {
  backface-visibility: hidden;
}

[data-magnetic="true"] { will-change: transform; }

/* ==========================================================================
   DISPLAY TYPE METRICS
   Sentence-case sans + lowercase italic serif accent. Sizes are noticeably
   larger than the old all-caps treatment because mixed case reads smaller at
   the same point size. Kept in one block, placed before the media queries so
   the responsive overrides still win.
   ========================================================================== */
.section-title {
  font-size: clamp(2rem, 5vw, 4.35rem);
  font-weight: 600;
  letter-spacing: var(--track-display);
  line-height: 1.02;
  text-transform: none;
  /* a long accent word hyphenates on narrow screens rather than spilling out */
  overflow-wrap: break-word;
  hyphens: auto;
}

.contact-title-hero,
.about-name-hero {
  font-size: clamp(2.1rem, 4.4vw, 3.5rem);
  font-weight: 600;
  letter-spacing: var(--track-display);
  line-height: 1.06;
  text-transform: none;
}

.hero-kicker {
  font-size: clamp(1.45rem, 2.9vw, 2.35rem);
  font-weight: 600;
  letter-spacing: var(--track-display);
  line-height: 1.2;
}

/* Both the stack (which the C/M/Y ghosts inherit from) and the wordmark itself
   carry identical metrics, so all four plates land in exact register at 100%. */
.wordmark-stack,
.preloader-wordmark {
  font-size: clamp(2rem, 5.6vw, 3.1rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  text-transform: none;
}

.footer-marquee-track > span {
  font-size: clamp(2rem, 6.2vw, 4.8rem);
  font-weight: 600;
  letter-spacing: var(--track-display);
  text-transform: none;
}

.spotlight-head .section-title { font-size: clamp(1.85rem, 3.6vw, 3rem); }

/* Card-level titles: same sentence case, one step firmer in weight */
.project-title,
.service-title,
.skill-name,
.timeline-title,
.award-title,
.process-step-title,
.transform-note-title,
.pricing-title,
.spotlight-title,
.modal-title,
.slide-title,
.client-name,
.faq-q-text {
  font-weight: 700;
  letter-spacing: var(--track-display-sm);
  text-transform: none;
}

.spotlight-title { font-size: clamp(1.5rem, 2.5vw, 2rem); }
.pricing-title { font-size: 1.5rem; }
.project-title { font-size: 1.26rem; }
.service-title { font-size: 1.3rem; }
.skill-name { font-size: 1.1rem; }
.timeline-title { font-size: 1.26rem; }
.award-title { font-size: 1.16rem; }
.process-step-title { font-size: 1.3rem; }
.modal-title { font-size: 1.2rem; }
.slide-title { font-size: 1.1rem; }
.faq-q-text { font-size: 1.02rem; }
.client-name { font-size: 1rem; }

.quote-glyph { font-family: var(--font-accent); font-style: italic; font-weight: 400; }
/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1200px) {
  :root { --gutter: 2rem; }

  .nav-link { padding: 0.4rem 0.62rem; font-size: 0.72rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.4rem; }
  .process-layout, .faq-layout { gap: 2.6rem; }
}

@media (max-width: 1080px) {
  /* Shell stays in the DOM (zero width) so the drawer can animate out too */
  .nav-links-shell { flex: 0 0 auto; justify-content: flex-end; }
  .mobile-toggle { display: flex; }

  .nav-links {
    position: fixed;
    top: 0; right: -100%;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 0.4rem;
    width: min(85vw, 340px);
    height: 100vh;
    padding: 5rem 1.8rem;
    border-radius: 0;
    border: none;
    border-left: 1px solid var(--line-accent);
    background: rgba(4, 6, 3, 0.97);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    z-index: 1100;
    overflow-y: auto;
    transition: right 0.55s var(--ease-io);
  }
  .nav-links.open { right: 0; }
  .nav-pill { display: none; }
  .nav-link { padding: 0.75rem 1rem; font-size: 0.95rem; border-radius: 12px; }
  .nav-link.active { background: rgba(210, 255, 0, 0.1); }

  .about-bento { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bento-portrait { grid-column: span 4; grid-row: auto; }
  .portrait-frame { min-height: 320px; max-height: 460px; }
  .bento-intro { grid-column: span 4; padding: 2.2rem 1.8rem; }
  .bento-stat { grid-column: span 2; }
  .bento-availability, .bento-marquee { grid-column: span 4; }

  /* These stack now, so the 4rem column gap turns into 64px of dead vertical
     space between the intro and the content it introduces. */
  .comparison-shell, .process-layout, .faq-layout, .contact-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .process-sticky, .faq-intro { position: static; }
  .metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spotlight-panel { grid-template-columns: 1fr; width: min(560px, 86vw); }
  .spotlight-visual { min-height: 240px; max-height: 280px; }
  .hero-social-rail, .hero-hud { display: none; }
  .hero-overlay-content { left: var(--gutter); }

  .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .skills-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .awards-grid { grid-template-columns: 1fr; }

  .footer .container { padding-left: var(--gutter); padding-right: var(--gutter); }
  .footer-grid { padding: 3.4rem 0 2.6rem; }

  /* Case studies fall back to a native horizontal snap-scroller */
  .spotlight-pin {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    height: auto;
    min-height: 0;
    padding: 5rem 0 2.5rem;
  }
  .spotlight-panel { height: auto; min-height: 0; }
  .spotlight-pin::-webkit-scrollbar { display: none; }
  .spotlight-head { position: sticky; left: 0; width: 100vw; box-sizing: border-box; }
  .spotlight-track { padding-right: calc(var(--gutter) + 1rem); }
  .spotlight-panel { scroll-snap-align: center; }
  .spotlight-rail { position: sticky; left: var(--gutter); width: calc(100vw - var(--gutter) * 2); }
}


@media (max-width: 768px) {
  :root {
    --gutter: 1.25rem;
    /* Smaller padding + type below shrinks the ticker; the sticky offset was
       still reserving the desktop 54px, leaving a sliver of hero under it. */
    --ticker-h: 42px;
  }

  /* Desktop's 9rem / 4rem rhythm is a lot of dead scrolling on a phone. Two
     neighbouring sections each contribute their padding, so the visible gap
     between them is double this number — 9rem became a 288px void. */
  .section { padding: 3.4rem var(--gutter); }
  .section-header { margin-bottom: 1.9rem; }
  .section-title { margin-bottom: 0.8rem; }
  .section-desc { font-size: 0.95rem; line-height: 1.6; }
  .eyebrow { margin-bottom: 0.9rem; }

  .brand-logo-img { height: 46px; }
  .header.is-condensed .brand-logo-img { height: 40px; }
  .btn-nav-talk span { display: none; }
  .btn-nav-talk { padding: 0.6rem 0.8rem; }

  .hero-pinned-wrapper { height: 260vh; }
  .hero-overlay-content { bottom: 6rem; left: var(--gutter); right: var(--gutter); max-width: none; }
  .scroll-down-hint { display: none; }
  .hero-ticker { padding: 0.7rem 0; }
  .ticker-item { font-size: 0.68rem; gap: 1.6rem; }
  .ticker-track { gap: 1.6rem; }

  .about-bento { grid-template-columns: 1fr; }
  .bento-portrait, .bento-intro, .bento-stat, .bento-availability, .bento-marquee { grid-column: span 1; }

  /* The portrait is 941x1672. `cover` inside a fixed-height frame was cropping
     the sides and the bottom off on a phone, so the frame takes the photo's own
     ratio and the image is contained — the whole picture is visible, no bars.
     The parallax drift is skipped at this width (see script.js): an exact fit
     leaves no slack for it to move into without exposing gaps. */
  .portrait-frame {
    min-height: 0;
    max-height: none;
    aspect-ratio: 941 / 1672;
  }
  .about-photo {
    height: 100%;
    min-height: 0;
    object-fit: contain;
    object-position: center;
  }

  .comparison-shell, .process-layout, .faq-layout, .contact-grid { gap: 1.6rem; }
  .faq-cta-card { margin-top: 1.5rem; }
  .bento-intro { padding: 1.7rem 1.3rem; }
  .spotlight-pin { padding: 3rem 0 1.8rem; }
  .process-steps { gap: 0.85rem; }
  .timeline-item { margin-bottom: 1.1rem; }

  .portfolio-grid { grid-template-columns: 1fr; gap: 1.2rem; margin-top: 1.2rem; }

  /* 2-up rather than 1-up: four full-width stat tiles is a lot of scrolling
     for four short numbers */
  .metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; }
  .metric-card { padding: 1.5rem 0.9rem; }
  .metric-num { font-size: clamp(1.75rem, 7.5vw, 2.4rem); }
  .metric-label { font-size: 0.85rem; }
  .metric-sub { font-size: 0.54rem; letter-spacing: 0.08em; }

  .services-grid { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
  .service-card { padding: 2rem 1.4rem 1.8rem; }

  .testimonials-grid { grid-template-columns: 1fr; gap: 1.1rem; }
  .testimonial-card { padding: 1.9rem 1.4rem 1.6rem; }
  .award-card { padding: 1.5rem 1.2rem; gap: 0.9rem; }
  .process-card { padding: 1.6rem 1.3rem; }

  /* pan-y lets the page scroll vertically while a horizontal drag still
     reaches the slider's pointer handlers. 4:3 gives the artwork more height
     on a narrow screen than the desktop 16:10. */
  .comparison-slider { aspect-ratio: 4 / 3; touch-action: pan-y; }
  .cmp-handle-grip { width: 40px; height: 40px; }
  .transform-tab { padding: 0.5rem 0.95rem; font-size: 0.68rem; }

  .faq-q { padding: 1.1rem 1.15rem; gap: 0.7rem; }
  .faq-a-inner { padding: 0 1.15rem 1.25rem; }

  .contact-status-bar { margin: 1.2rem 0 1.6rem; }

  .client-logo-item { min-width: 126px; height: 56px; padding: 0.6rem 1rem; }
  .client-logo-item img { height: 30px; max-width: 100px; }
  .client-logos-marquee-wrapper::before,
  .client-logos-marquee-wrapper::after { width: 54px; }
  .skills-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  .skill-3d-card { padding: 1.7rem 1.1rem 1.4rem; }
  .skill-name { font-size: 0.92rem; letter-spacing: 0; }

  /* Phone only: the glass software icons shrink so two tiles per row stay
     balanced. Desktop keeps the full 82px badge. */
  .skill-3d-logo {
    width: 58px; height: 58px;
    margin-bottom: 0.95rem;
    filter: drop-shadow(0 8px 16px var(--skill-glow, var(--lime-glow)));
  }
  .skill-desc-badge { font-size: 0.54rem; letter-spacing: 0.06em; margin-bottom: 1rem; }
  .skill-level-text { font-size: 0.56rem; letter-spacing: 0.08em; margin-top: 0.5rem; }

  /* Pricing: one card per row, tighter type and padding */
  .pricing-grid { grid-template-columns: 1fr; gap: 1.1rem; }
  .pricing-card { padding: 1.9rem 1.4rem 1.6rem; }
  .pricing-badge-top { margin-bottom: 1rem; }
  .pricing-title { font-size: 1.32rem; }
  .pricing-price { font-size: 2rem; margin-bottom: 0.7rem; }
  .pricing-desc { font-size: 0.85rem; line-height: 1.6; margin-bottom: 1.3rem; }
  .pricing-features { margin-bottom: 1.6rem; }
  .pricing-features li { font-size: 0.84rem; margin-bottom: 0.62rem; }
  .btn-select-package { justify-content: center; padding-top: 0.9rem; padding-bottom: 0.9rem; }

  .spotlight-panel { width: 86vw; }
  .spotlight-copy { padding: 1.8rem 1.5rem; }

  .timeline-wrapper { padding-left: 2.4rem; }
  .timeline-dot { left: -2.4rem; width: 15px; height: 15px; }
  .timeline-laser-track { left: 6px; }

  .contact-form-card { padding: 1.8rem 1.4rem; }

  /* The footer is not a .section, so its container never got the gutter that
     every other block has — on phones the text ran into the screen edge. */
  .footer .container { padding-left: var(--gutter); padding-right: var(--gutter); }
  .footer-marquee { padding: 1.5rem 0; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; padding: 3rem 0 2.2rem; }
  .footer-brand .brand-logo-img { height: 48px; margin-bottom: 1rem; }
  .footer-blurb { max-width: none; margin-bottom: 1.2rem; }
  /* Extra bottom room so the fixed back-to-top button clears the copyright */
  .footer-copy {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 1.3rem 0 4.5rem;
    font-size: 0.78rem;
  }

  /* ------------------------------------------------------------------------
     PROJECT SLIDER ON A PHONE — full-screen sheet, image owns the slack

     Desktop sizes the slide image off the viewport (52vh inside a 92vh sheet).
     On a phone that arithmetic breaks twice over: vh is the large viewport, so
     the sheet is taller than the screen, and the 320px min-height + 56vh cap on
     the stage fought the header/footer for the same space. The image ended up
     clipped or pushed out of view entirely.

     Here the sheet is exactly the visible height, header and footer keep their
     natural (compact) height, and the stage takes whatever is left with
     min-height:0 so it can actually shrink. That gives .modal-img a definite
     parent height, so max-height:100% resolves and the whole slide fits — the
     same image the desktop shows, just fitted to the phone.
     ------------------------------------------------------------------------ */
  .modal { padding: 0; align-items: stretch; justify-content: stretch; }
  .slider-modal-content {
    width: 100%;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    border-radius: 0;
    border: none;
    box-shadow: none;
  }
  .modal-header { padding: 0.85rem 1rem; padding-right: 3rem; flex-wrap: wrap; gap: 0.4rem; }
  .modal-title { font-size: 0.9rem; }
  .slide-counter-badge { display: inline-flex; font-size: 0.62rem; padding: 0.25rem 0.6rem; border-radius: 99px; }

  .modal-slider-viewport {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
  }
  .slider-image-wrapper { padding: 0.55rem; min-height: 0; }
  .modal-img {
    max-width: 100%;
    max-height: 100%;
    width: auto; height: auto;
    border-radius: var(--radius-sm);
  }

  .modal-footer { padding: 0.75rem 1rem 0.85rem; gap: 0.6rem; }
  .slide-title { font-size: 0.88rem; margin-bottom: 0.15rem; }
  .slide-desc {
    font-size: 0.78rem;
    line-height: 1.45;
    /* Two lines maximum: a long description used to push the dots — and with
       them the image — off the bottom of the sheet. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* One scrollable row instead of wrapping to three rows of pills */
  .slide-dots-container {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    padding-bottom: 2px;
  }
  .slide-dots-container::-webkit-scrollbar { display: none; }
  .slide-dot { flex: 0 0 auto; width: 30px; height: 30px; scroll-snap-align: center; }

  .slider-arrow { width: 36px; height: 36px; font-size: 0.88rem; }
  .slider-arrow.prev-btn { left: 0.4rem; }
  .slider-arrow.next-btn { right: 0.4rem; }
  .screen-arrow { width: 34px; height: 34px; font-size: 0.82rem; }
  .screen-arrow.up-btn { top: 0.4rem; }
  .screen-arrow.down-btn { bottom: 0.4rem; }

  .back-to-top { bottom: 1.2rem; right: 1.2rem; width: 46px; height: 46px; }
  .preloader-hud { padding: 1rem; }
  .preloader-hud-bottom span:last-child { display: none; }
}

/* Small phones (iPhone SE / 360dp Android): one more step down, and anything
   that reads as a row of pills becomes full-width or scrollable rather than
   wrapping into a ragged stack. */
@media (max-width: 480px) {
  .section { padding: 2.8rem var(--gutter); }
  .section-header { margin-bottom: 1.5rem; }
  .eyebrow {
    font-size: 0.58rem;
    letter-spacing: 0.13em;
    padding: 0.38rem 0.8rem 0.38rem 0.65rem;
    margin-bottom: 0.75rem;
  }
  .section-desc { font-size: 0.9rem; }
  .btn { padding: 0.8rem 1.3rem; font-size: 0.76rem; }

  .filter-btn { padding: 0.5rem 0.9rem; font-size: 0.68rem; }
  .transform-tab { padding: 0.45rem 0.8rem; font-size: 0.63rem; }

  .metrics-grid { gap: 0.7rem; }
  .metric-card { padding: 1.3rem 0.7rem; }

  .skills-grid { gap: 0.85rem; }
  .skill-3d-card { padding: 1.45rem 0.85rem 1.2rem; }
  .skill-3d-logo { width: 48px; height: 48px; margin-bottom: 0.8rem; }
  .skill-name { font-size: 0.84rem; }
  .skill-desc-badge { font-size: 0.5rem; letter-spacing: 0.04em; margin-bottom: 0.9rem; }

  .pricing-card { padding: 1.7rem 1.2rem 1.5rem; }
  .pricing-title { font-size: 1.2rem; }
  .pricing-price { font-size: 1.8rem; }
  .pricing-price span { font-size: 0.62rem; }
  .pricing-features li { font-size: 0.82rem; gap: 0.6rem; }

  .footer-marquee { padding: 1.2rem 0; }
  .footer-grid { padding: 2.6rem 0 2rem; gap: 1.8rem; }
  .footer-blurb { font-size: 0.86rem; }
  .footer-col a, .footer-static { font-size: 0.86rem; }
  .footer-copy { font-size: 0.72rem; padding-bottom: 4.2rem; }
}

/* ---------------------------------------------------------------------------
   PORTRAIT HERO — frame band instead of a full-height crop

   The frame is 16:9 (1.78). A portrait phone viewport is about 0.46, so filling
   the whole screen with cover throws away roughly three quarters of the frame's
   width. Contain would keep all of it but leaves empty bands, which is not what
   we want either.

   So the frame keeps covering — no letterbox, no dead space — but it only owns
   the area above the copy rather than the whole screen. That band is far closer
   to 16:9 than the viewport is, so cover crops much less of the frame, and the
   copy fills the rest. The two together add up to the full height.

   Placed after the 768px block on purpose: that block sets .hero-overlay-content
   `bottom`, and media queries carry no extra specificity — later simply wins.

   Only these two rules change. The canvas draw path in script.js is untouched.
   --------------------------------------------------------------------------- */
@media (max-width: 900px) and (orientation: portrait) {
  /* bottom:auto so `height` applies. The band gives up the room the copy needs
     plus the strip the ticker occupies. */
  .hero-canvas-container {
    inset: 0 0 auto 0;
    height: calc(100% - 17.5rem - var(--ticker-h));
  }
  /* The ticker is sticky over the bottom var(--ticker-h) of the hero at z-index
     7, above this copy's z-index 6. Sitting any lower than that line means the
     Contact Me button ends up underneath it. */
  .hero-overlay-content { bottom: calc(var(--ticker-h) + 1.25rem); }
}

/* Phones held sideways: wide but only ~400px tall, so the grids that stack on a
   portrait phone can go back to using the width. The hero is left alone. */
@media (max-width: 950px) and (orientation: landscape) and (max-height: 520px) {
  .section { padding: 3.6rem var(--gutter); }
  .skills-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .metrics-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Only ~400px of height to share: the slide description is the first thing
     to go so the image keeps the room. */
  .modal-header { padding: 0.5rem 0.9rem; padding-right: 2.8rem; }
  .modal-footer { padding: 0.5rem 0.9rem 0.6rem; gap: 0.45rem; }
  .slide-desc { display: none; }
  .slide-dot { width: 26px; height: 26px; font-size: 0.58rem; }
}

/* Short viewports: the sheet furniture scales down so nothing gets crowded */
@media (max-height: 780px) {
  .preloader-logo-frame { margin-bottom: 1.2rem; }
  .preloader-logo { width: clamp(160px, 20vw, 230px); }
  .counter-value { font-size: clamp(3rem, 11vw, 5rem); }
  .preloader-roles { margin-bottom: 1.6rem; }
  .crop-mark { width: 34px; height: 34px; }
  .cm-tl, .cm-tr { top: 24px; }
  .cm-bl, .cm-br { bottom: 24px; }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
    scroll-behavior: auto !important;
  }
  .grain-overlay { animation: none; }
  .cursor-dot, .cursor-ring { display: none !important; }
}