/* ─── TOKENS ─────────────────────────────────────────────
   One palette, two modes. Inspired by the glowing digital
   brain image — grounded cobalt on deep indigo.

   Design principle: the accent colour (#2563EB) is IDENTICAL
   across light and dark modes. Only the surface and text
   shift. The mode switch should feel like a room's lights
   dimming, not a palette change.

   Strictly true-blue family — no cyans, magentas, or pinks.
   Cobalt reads grounded and confident; pastel sky-blues
   would read softer/more feminine, so they're avoided.
   ──────────────────────────────────────────────────────── */
:root {
  /* ── LIGHT MODE ── */

  /* Ink & surface */
  --ink:           #0A1628;   /* deep navy near-black text */
  --ink-dim:       #5B6A82;   /* muted slate blue-gray */
  --surface:       #FFFFFF;
  --panel:         #F2F6FB;   /* whisper of cool blue-white */

  /* Blue ladder (dark → electric) */
  --dark:          #0D1B2E;   /* hero-left canvas */
  --navy:          #1A3A5C;
  --blue:          #2563AE;   /* primary blue */
  --sky:           #5BA8D9;   /* mid-tone used inside hero-left */

  /* Accent — the glow. Grounded cobalt. IDENTICAL in dark mode. */
  --accent:        #2563EB;   /* electric cobalt — the brain's glow */
  --accent-dark:   #1D4ED8;   /* deeper cobalt for hover/pressed */
  --accent-glow:   rgba(37, 99, 235, .28);
  --accent-glow-2: rgba(37, 99, 235, .12);
  --accent-halo:   rgba(37, 99, 235, .40);

  /* Text colour that sits on top of the accent — light for contrast
     against the cobalt. Kept constant between modes so buttons feel
     unchanged on switch. */
  --on-accent:     #FFFFFF;

  /* Neutrals */
  --border-l:      #E2E8F0;

  /* Nav */
  --nav-bg:        rgba(255, 255, 255, .94);
  --nav-cta-bg:    #E8EEF5;
  --nav-cta-bg-h:  #D5DFEC;
  --nav-cta-text:  #0A1628;

  /* Hero-left ambient glow (stays in the blue family in both modes) */
  --hero-glow-1:   rgba(37, 99, 174, .35);
  --hero-glow-2:   rgba(37, 99, 235, .22);

  /* Avatar gradient */
  --avatar-grad:   linear-gradient(135deg, #1A3A5C, #2563AE);

  /* Check-icon backplate + stroke (overrides inline SVG attrs) */
  --check-bg:      rgba(37, 99, 174, .12);
  --check-stroke:  #2563AE;

  /* Shadows */
  --shadow-soft:   0 6px 28px rgba(13, 27, 46, .12);
  --shadow-hover:  0 12px 40px rgba(13, 27, 46, .18);

  /* Shape */
  --radius:        12px;
  --radius-lg:     18px;

  /* Motion */
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-spring:   cubic-bezier(.34, 1.56, .64, 1);
  --ease-gentle:   cubic-bezier(.25, .46, .45, .94);

  /* Success state for the inline contact form (mirrors contact.css) */
  --success-bg:    rgba(34, 197, 94, .08);
  --success-bd:    rgba(34, 197, 94, .22);
  --success-ink:   #15803D;
}

/* ─── DARK MODE ───────────────────────────────────────────
   Same hue family, lights dimmed. Accent is unchanged. The
   `--sky` and `--blue` values are deepened from their first-
   draft pastel counterparts so the dark palette also reads
   grounded and masculine, not ice-blue.
   ──────────────────────────────────────────────────────── */
[data-theme="dark"] {
  --ink:           #E6EDF7;
  --ink-dim:       #8DA0BD;
  --surface:       #0A1321;   /* deep indigo — the brain's sky */
  --panel:         #111E37;

  --dark:          #050B17;   /* even deeper for hero-left */
  --navy:          #1E3A6B;
  --blue:          #3B82F6;   /* grounded cobalt, lighter for dark-mode legibility */
  --sky:           #60A5FA;   /* blue-400, still in the cobalt family */

  /* Accent stays the same — consistency across modes. */
  --accent:        #2563EB;
  --accent-dark:   #1D4ED8;
  --accent-glow:   rgba(37, 99, 235, .30);
  --accent-glow-2: rgba(37, 99, 235, .14);
  --accent-halo:   rgba(37, 99, 235, .45);

  /* --on-accent stays #FFFFFF — white text on the cobalt accent. */

  --border-l:      #1B2742;

  --nav-bg:        rgba(10, 19, 33, .85);
  --nav-cta-bg:    #172340;
  --nav-cta-bg-h:  #223152;
  --nav-cta-text:  #E6EDF7;

  /* Hero-left glows stay cobalt in dark mode too. */
  --hero-glow-1:   rgba(37, 99, 235, .30);
  --hero-glow-2:   rgba(59, 130, 246, .22);

  /* Avatar gradient: navy → accent cobalt in dark mode. */
  --avatar-grad:   linear-gradient(135deg, #1E3A6B, #2563EB);

  --check-bg:      rgba(59, 130, 246, .20);
  --check-stroke:  #3B82F6;

  --shadow-soft:   0 6px 28px rgba(0, 0, 0, .55);
  --shadow-hover:  0 12px 40px rgba(37, 99, 235, .15);

  /* Success state — slightly brighter on dark backgrounds */
  --success-bg:    rgba(34, 197, 94, .10);
  --success-bd:    rgba(34, 197, 94, .24);
  --success-ink:   #4ADE80;
}

/* ─── RESET ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  /* Prevent any horizontal overflow inside descendants from
     widening the layout viewport on mobile. Without this, a
     child that's slightly too wide can stretch the layout
     viewport — and because <nav> uses position: fixed (which
     is sized to the layout viewport, not the visual viewport),
     the navbar starts to extend past the right edge of the
     screen even though it's the document, not the nav, that's
     too wide. body has overflow-x: hidden too as belt-and-
     suspenders; html is the one that actually anchors the
     layout-viewport width on iOS Safari. */
  overflow-x: hidden;
}
body {
  font-family: 'Figtree', sans-serif;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color .4s ease, color .4s ease;
}
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }
ul { list-style: none; }

/* ─── NAV ────────────────────────────────────────────── */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  height: 56px;
  background: var(--nav-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-l);
  transition: box-shadow .3s var(--ease-out-expo),
              background-color .4s ease,
              border-color .4s ease;
}
nav.scrolled {
  box-shadow: 0 2px 20px rgba(0,0,0,.07);
}

.nav-left {
  display: flex;
  align-items: center;
  gap: 20px;
}
.nav-logo {
  font-family: 'Noto Sans', sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -.3px;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: opacity .2s, color .4s ease;
}
.nav-logo:hover { opacity: .85; }

/* ─── LOGO MARK (rhombus with 90° angles) ───────────────
   Outer diamond stroke inherits the text colour via
   currentColor, so it auto-themes dark-on-light and
   light-on-dark. Inner diamond stays in the accent colour
   across both modes — the "gem" inside the frame.
   ──────────────────────────────────────────────────────── */
.nav-logo-mark {
  flex-shrink: 0;
  overflow: visible;
}
.nav-logo-mark .logo-outer {
  stroke: currentColor;
  stroke-width: 2;
  stroke-linejoin: round;
  fill: none;
  transition: stroke .4s ease;
}
.nav-logo-mark .logo-inner {
  fill: var(--accent);
  transform-origin: center;
  transform-box: fill-box;
  transition: fill .4s ease, transform .3s var(--ease-spring);
}
.nav-logo:hover .logo-inner { transform: scale(1.25); }

.nav-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-dim);
  transition: color .4s ease;
}
.status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #22C55E;
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .4; }
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
}
.nav-links a {
  font-size: 14px;
  color: var(--ink-dim);
  transition: color .2s;
}

/* Accent underline — plain links only, NOT .nav-cta */
.nav-links a:not(.nav-cta) {
  position: relative;
  padding-bottom: 2px;
}
.nav-links a:not(.nav-cta)::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 1.5px;
  background: var(--accent-dark);
  border-radius: 2px;
  transition: width .25s var(--ease-out-expo), background-color .4s ease;
}
.nav-links a:not(.nav-cta):hover        { color: var(--ink); }
.nav-links a:not(.nav-cta):hover::after { width: 100%; }

.nav-active {
  font-weight: 600;
  color: var(--ink) !important;
}
.nav-active:not(.nav-cta)::after { width: 100% !important; }

/* Contact CTA — neutral tile, tinted to the palette in both modes */
.nav-cta {
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  background: var(--nav-cta-bg);
  color: var(--nav-cta-text) !important;
  border-radius: 8px;
  transition: background .2s, transform .15s, color .4s ease;
}
.nav-cta:hover { background: var(--nav-cta-bg-h); transform: translateY(-1px); }

/* ─── THEME TOGGLE (desktop button in nav) ──────────────
   Circular icon button. Subtle hover lift, icon rotates
   slightly for a tactile feel.
   ──────────────────────────────────────────────────────── */
.theme-toggle {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border-l);
  border-radius: 50%;
  color: var(--ink-dim);
  cursor: pointer;
  padding: 0;
  transition:
    color        .25s ease,
    border-color .25s ease,
    background   .25s ease,
    transform    .3s var(--ease-spring);
}
.theme-toggle:hover {
  color: var(--accent-dark);
  border-color: var(--accent);
  background: var(--accent-glow-2);
  transform: rotate(-12deg);
}
[data-theme="dark"] .theme-toggle:hover {
  color: var(--accent);
  transform: rotate(12deg);
}
.tt-icon { display: none; }
[data-theme="light"] .tt-moon,
:root:not([data-theme="dark"]) .tt-moon { display: block; }
[data-theme="dark"]  .tt-sun  { display: block; }

/* ─── HAMBURGER ──────────────────────────────────────── */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 4px;
  background: none;
  border: none;
}
.hamburger span {
  display: block;
  width: 22px; height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .25s var(--ease-out-expo), opacity .2s, background-color .4s ease;
}

/* Hamburger → X when open */
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  display: none;
  position: fixed;
  top: 56px; left: 0; right: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--border-l);
  padding: 20px 32px 24px;
  z-index: 99;
  flex-direction: column;
  gap: 4px;
  transform: translateY(-6px);
  opacity: 0;
  transition: transform .25s var(--ease-out-expo),
              opacity .2s,
              background-color .4s ease,
              border-color .4s ease;
}
.mobile-menu.open {
  display: flex;
  transform: translateY(0);
  opacity: 1;
}
.mobile-menu a {
  font-size: 16px;
  color: var(--ink-dim);
  padding: 12px 0;
  border-bottom: 1px solid var(--border-l);
  transition: color .2s, border-color .4s ease;
}
.mobile-menu a:hover { color: var(--ink); }
.mobile-menu a:last-of-type { border-bottom: none; }

/* Mobile theme-toggle row inside the mobile menu */
.mobile-theme-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 0 2px;
  background: none;
  border: none;
  border-top: 1px solid var(--border-l);
  margin-top: 6px;
  font-family: inherit;
  font-size: 16px;
  color: var(--ink-dim);
  cursor: pointer;
  transition: color .2s, border-color .4s ease;
}
.mobile-theme-toggle:hover { color: var(--accent-dark); }
[data-theme="dark"] .mobile-theme-toggle:hover { color: var(--accent); }
.mtt-label-light,
.mtt-label-dark { display: none; }
[data-theme="light"] .mtt-label-light,
:root:not([data-theme="dark"]) .mtt-label-light { display: inline; }
[data-theme="dark"]  .mtt-label-dark  { display: inline; }
.mtt-icon-wrap {
  width: 30px; height: 30px;
  border: 1px solid var(--border-l);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  transition: border-color .2s;
}
.mobile-theme-toggle:hover .mtt-icon-wrap { border-color: var(--accent); }

/* ─── HERO ───────────────────────────────────────────── */
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  padding-top: 56px;
}

/* ─── HERO LEFT (dark carousel panel) ─────────────────
   Stays dark in both modes. The ambient glow lives in the
   same cobalt family across both; it just brightens slightly
   when the site is in dark mode.
   ──────────────────────────────────────────────────────── */
.hero-left {
  background: var(--dark);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .4s ease;
}
.hero-left::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 30% 40%, var(--hero-glow-1) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 80% 70%, var(--hero-glow-2) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* ── Carousel ─────────────────────────────────────────── */
.carousel-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.carousel-track {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.carousel-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .5s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 64px;

  /* ── Click routing fix ────────────────────────────────
     All three slides are stacked on top of each other.
     Without this, the last slide in the DOM swallows every
     click. Only the active slide should be clickable.
     ─────────────────────────────────────────────────── */
  pointer-events: none;
}
.carousel-slide.active {
  opacity: 1;
  pointer-events: auto;
}

/* The .carousel-arrow-row wrapper exists in the markup so the
   mobile layout can group the two arrows into a single sibling
   row below the carousel. On desktop we want it to be invisible
   to the layout — `display: contents` makes the wrapper disappear
   from the box tree, so the two `.carousel-arrow` buttons inside
   still behave as direct children of `.carousel-wrapper` (which
   is what the existing absolute-overlay positioning expects). */
.carousel-arrow-row { display: contents; }

/* ── Arrow buttons ───────────────────────────────────── */
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .2s, transform .25s var(--ease-spring), opacity .2s;
  backdrop-filter: blur(6px);
  opacity: .7;
}
.carousel-arrow:hover {
  background: rgba(255,255,255,.2);
  transform: translateY(-50%) scale(1.1);
  opacity: 1;
}
.carousel-arrow.prev { left: 16px; }
.carousel-arrow.next { right: 16px; }

/* ── Dot indicators ──────────────────────────────────── */
.carousel-dots {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  align-items: center;
  z-index: 10;
}
.carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.28);
  cursor: pointer;
  border: none;
  padding: 0;
  flex-shrink: 0;
  transition:
    width          .4s var(--ease-out-expo),
    border-radius  .4s var(--ease-out-expo),
    background     .35s ease;
}
.carousel-dot:hover:not(.active) {
  background: rgba(255,255,255,.5);
}
.carousel-dot.active {
  width: 28px;
  border-radius: 4px;
  background: var(--accent);
}

/* ── Slide card ───────────────────────────────────────── */
.slide-card {
  width: 100%;
  max-width: 432px; /* mobile/tablet base — 10% smaller than original 480 */
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-lg);
  overflow: hidden;
  backdrop-filter: blur(4px);
  transition: transform .3s var(--ease-out-expo), box-shadow .3s;
}
.slide-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 48px rgba(0,0,0,.3);
}
.slide-card-header {
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  display: flex;
  align-items: center;
  gap: 10px;
}
.slide-card-dots { display: flex; gap: 6px; }
.slide-card-dots span {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,.2);
}
.slide-card-title {
  font-size: 11px;
  color: rgb(255, 255, 255);
  font-family: 'Noto Sans', sans-serif;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.slide-card-body { padding: 22px; }

/* ── Journey Map ──────────────────────────────────────── */
.journey-map { display: flex; flex-direction: column; gap: 14px; }
.jm-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--sky);
  font-weight: 600;
}
.jm-phases { display: flex; }
.jm-phase {
  flex: 1;
  padding: 9px 6px;
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
  border-right: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.45);
}
.jm-phase:last-child { border-right: none; }
.jm-phase.active-phase { color: var(--accent); background: var(--accent-glow-2); }
.jm-rows { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.jm-row  { display: flex; align-items: center; gap: 8px; }
.jm-row-label { width: 68px; font-size: 10px; color: rgba(255,255,255,.4); flex-shrink: 0; }
.jm-dots { flex: 1; display: flex; gap: 4px; }
.jm-dot  { flex: 1; height: 6px; border-radius: 3px; background: rgba(255,255,255,.1); }
.jm-dot.high { background: var(--accent); opacity: .9; }
.jm-dot.mid  { background: var(--sky);    opacity: .7; }
.jm-dot.low  { background: rgba(255,255,255,.15); }
.emotion-line { width: 100%; height: 44px; margin-top: 2px; }
.emotion-line svg { width: 100%; height: 100%; }

/* ── Research Stats ───────────────────────────────────── */
.research-stats { display: flex; flex-direction: column; gap: 18px; }
.stats-row { display: flex; gap: 12px; }
.stat-box {
  flex: 1;
  padding: 14px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  transition: background .2s, border-color .2s, transform .25s var(--ease-spring);
}
.stat-box:hover {
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.18);
  transform: translateY(-2px);
}
.stat-num {
  font-family: 'Noto Sans', sans-serif;
  font-size: 26px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
}
.stat-label { font-size: 11px; color: rgba(255,255,255,.45); margin-top: 5px; }
.findings-list { display: flex; flex-direction: column; gap: 7px; }
.finding-item {
  padding: 9px 12px;
  background: rgba(255,255,255,.04);
  border-left: 2px solid var(--sky);
  border-radius: 4px;
  transition: background .2s, border-color .2s;
}
.finding-item:hover {
  background: rgba(255,255,255,.08);
  border-color: var(--accent);
}
.finding-text { font-size: 12px; color: rgba(255,255,255,.7); line-height: 1.4; }

/* ── Affinity Map ─────────────────────────────────────── */
.affinity-map { display: flex; flex-direction: column; gap: 12px; }
.affinity-cluster {
  padding: 11px 13px;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.1);
  transition: background .2s;
}
.affinity-cluster:hover { background: rgba(255,255,255,.03); }
.cluster-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  margin-bottom: 7px;
}
.cluster-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.tag {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 20px;
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.7);
  transition: background .15s;
}
.tag:hover { background: rgba(255,255,255,.18); }
.cluster-blue  { border-color: rgba(91,168,217,.3); }
.cluster-blue  .cluster-title { color: var(--sky); }
.cluster-lime  { border-color: var(--accent-halo); }
.cluster-lime  .cluster-title { color: var(--accent); }
.cluster-white { border-color: rgba(255,255,255,.15); }
.cluster-white .cluster-title { color: rgba(255,255,255,.65); }

/* ── Carousel link wrapper ────────────────────────────────
   Wraps the <img> so the image itself is clickable.
   display: block and line-height: 0 prevent inline spacing
   artifacts below the image.
   ─────────────────────────────────────────────────────────── */
.carousel-link {
  display: block;
  width: 100%;
  line-height: 0;
  cursor: pointer;
  transition: opacity .2s var(--ease-out-expo);
}
.carousel-link:hover { opacity: .92; }

/* ── Carousel image ───────────────────────────────────────
   width: 100% fills the card width.
   aspect-ratio: 16/9 locks a landscape shape.
   object-fit: cover crops neatly without distorting.
   overflow: hidden on .slide-card clips to rounded corners.
   ─────────────────────────────────────────────────────────── */
.carousel-img {
  width: 100%;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* ─── HERO RIGHT ─────────────────────────────────────── */
.hero-right {
  padding: clamp(10px, 2vh, 28px) 48px 0 48px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow-y: auto;
  height: calc(100vh - 56px);
}

/* Top block */
.hero-top-block {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: clamp(12px, 2vh, 24px);
}
.hero-top-left {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 0 1 auto;
  min-width: 0;
}

/* Identity row */
.hero-identity {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: clamp(14px, 2.2vh, 28px);
}
.avatar {
  width: clamp(46px, 5.5vh, 64px);
  height: clamp(46px, 5.5vh, 64px);
  border-radius: 50%;
  background: var(--avatar-grad);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Noto Sans', sans-serif;
  font-weight: 700;
  font-size: clamp(16px, 2.2vh, 22px);
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px var(--accent-glow);
  transition: box-shadow .25s, background .4s ease;
}
.avatar:hover { box-shadow: 0 0 0 4px var(--accent-halo); }

.identity-name  { font-size: clamp(16px, 2vh, 20px); font-weight: 600; color: var(--ink); line-height: 1.2; transition: color .4s ease; }
.identity-role  { font-size: clamp(14px, 1.75vh, 18px); color: var(--ink-dim); transition: color .4s ease; }
.role-tooltip {
  position: relative;
  display: inline-flex;
  align-items: center;
  border-bottom: 1px solid rgba(91, 106, 130, .45);
  padding-bottom: 1px;
  cursor: help;
  line-height: 1.2;
  transition:
    color .22s ease,
    border-color .22s ease;
}

.role-tooltip:hover,
.role-tooltip:focus-visible {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

.role-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  top: calc(100% + 14px);
  transform: translateX(-50%) translateY(8px);
  width: min(320px, 78vw);
  padding: 14px 16px;
  border-radius: 16px;
  background:
    linear-gradient(135deg, var(--dark) 0%, var(--navy) 100%);
  color: rgba(255,255,255,.94);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow:
    0 18px 40px rgba(13, 27, 46, .24),
    0 0 0 1px rgba(255,255,255,.03) inset;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity .22s ease,
    transform .22s ease,
    visibility .22s ease;
  z-index: 40;
  pointer-events: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.role-tooltip:hover::after,
.role-tooltip:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.role-tooltip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 2px;
}

@media (max-width: 768px) {
  .role-tooltip::after {
    width: min(280px, 82vw);
    left: 0;
    transform: translateX(0) translateY(8px);
  }

  .role-tooltip:hover::after,
  .role-tooltip:focus-visible::after {
    transform: translateX(0) translateY(0);
  }
}

@media (max-width: 768px) {
  .role-tooltip::after {
    width: 220px;
    max-width: 75vw;
  }
}

/* Headline */
.hero-headline {
  font-family: 'Noto Sans', sans-serif;
  font-size: clamp(24px, min(3vw, 6vh), 55px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -1.5px;
  color: var(--ink);
  margin-bottom: clamp(9px, 1.25vh, 12px);
  transition: color .4s ease;
}

/* Portrait frame */
.hero-photo-frame {
  width: clamp(120px, 12vw, 158px);
  height: clamp(210px, 27vh, 290px);
  flex-shrink: 0;
  border-radius: var(--radius-lg);
  background: var(--panel);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  overflow: hidden;
  outline: 3px solid var(--accent);
  outline-offset: 4px;
  box-shadow: var(--shadow-soft);
  transition: outline-color .25s, box-shadow .25s, transform .25s var(--ease-spring), background-color .4s ease;
  cursor: pointer;
}
.hero-photo-frame:hover {
  outline-color: var(--accent-dark);
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}
.hero-photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.hero-photo-icon {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--border-l);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-dim);
}
.hero-photo-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-dim);
}
.hero-photo-hint {
  font-size: 10px;
  color: #9CA3AF;
  text-align: center;
  padding: 0 10px;
  line-height: 1.4;
}

/* Sub-headline */
.hero-sub {
  font-size: clamp(18px, 2.5vh, 20px);
  line-height: 1.65;
  color: var(--ink);
  margin-bottom: clamp(6px, 1vh, 10px);
  transition: color .4s ease;
}

.value-props {
  display: flex;
  line-height: 1.6;
  flex-direction: column;
  gap: clamp(6px, 1vh, 11px);
  margin-bottom: clamp(16px, 2.5vh, 28px);
}
.value-prop {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(15px, 1.9vh, 19px);
  color: var(--ink);
  transition: color .4s ease;
}
.blink-underscore {
  display: inline-block;
  margin-left: 0px;
  color: inherit;
  font-weight: 550;
  animation: blink-underscore 1.7s steps(1, end) infinite;
}

@keyframes blink-underscore {
  0%, 49% {
    opacity: 1;
  }
  50%, 100% {
    opacity: 0;
  }
}
.check-icon { width: 18px; height: 18px; flex-shrink: 0; }
/* Override the inline fill/stroke on the check-icon SVG parts so
   they can theme between modes. CSS beats presentation attributes. */
.check-icon circle { fill: var(--check-bg);     transition: fill .4s ease; }
.check-icon path   { stroke: var(--check-stroke); transition: stroke .4s ease; }

/* ─── CTA — "Get in Touch" button ──────────────────────────
   ⚠️  Hidden by default at desktop. The inline contact form
   inside .work-thumbnails replaces it on wide screens. The
   CTA reappears at @media (max-width: 900px) (rule lower in
   this file) where it sits ABOVE the UX Research thumbnail.
   ──────────────────────────────────────────────────────────── */
.hero-cta {
  display: none; /* hidden at desktop — see @media (max-width: 900px) */
  align-items: center;
  gap: 12px;
  margin-bottom: clamp(16px, 2.5vh, 30px);
}
.btn-primary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: clamp(22px, 2.5vh, 36px);
  font-weight: 600;
  border-radius: 10px;
  cursor: pointer;
  transition: background .2s, transform .2s var(--ease-spring), box-shadow .2s;
  flex: 1;
  justify-content: space-between;
}
.btn-primary:hover {
  background: var(--accent-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px var(--accent-halo);
}
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
  padding: 13px 18px;
  border: 1.5px solid var(--border-l);
  border-radius: 10px;
  font-size: clamp(14px, 1.7vh, 17px);
  font-weight: 500;
  color: var(--ink);
  transition: border-color .2s, background .2s, transform .2s var(--ease-spring), color .4s ease;
  white-space: nowrap;
}
.btn-secondary:hover {
  border-color: var(--ink);
  background: var(--panel);
  transform: translateY(-1px);
}
.btn-secondary:active { transform: translateY(0); }

/* ═══════════════════════════════════════════════════════════════════
   THUMBNAIL STACK (TAB + IMAGE) + INLINE CONTACT FORM
   ═══════════════════════════════════════════════════════════════════
   The .work-thumbnails grid has two columns at desktop:
     Col 1 (1.2fr) — .thumb-stack: tab on top, image below
     Col 2 (1fr)   — .hero-contact-form

   HEIGHT-MATCHING SYSTEM
   ──────────────────────
   Both columns use CSS Grid's default `align-items: stretch`, so they
   share the row's max height. Each side uses internal flexbox with one
   element marked as `flex: 1` to absorb extra height:

     .thumb-stack:                 .hero-contact-form:
       ┌──────────────┐               ┌──────────────────┐
       │  .thumb-tab  │ flex: 1       │  title           │ static
       │  (grows up)  │               │  name field      │ static
       │              │               │  email field     │ static
       ├──────────────┤               │  subject field   │ static
       │   .thumb     │ aspect-ratio  │  ────────────    │
       │   (locked    │ 1448 / 1086   │  message field   │ flex: 1
       │    to image) │               │  (textarea grows)│
       │              │               │  send button     │ static
       └──────────────┘               └──────────────────┘

   When the form is naturally taller, the .thumb-tab grows to match.
   When the .thumb-stack is naturally taller, the textarea grows to
   match. Either way, both columns end at the exact same height with
   no empty space and no cropped image.

   At @media (max-width: 900px), the form is hidden, the row collapses
   to a single column, and the horizontal "Get in Touch" CTA above
   takes over.
   ═══════════════════════════════════════════════════════════════════ */
.work-thumbnails {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 12px;
  margin-bottom: clamp(16px, 3vh, 40px);
  /* default align-items: stretch — both columns share the same height */
}

/* ── .thumb-stack — the whole left column is one link ──────── */
.thumb-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: pointer;
  /* min-height: 0 lets the inner flex children shrink properly
     so the layout is well-defined when the form is taller. */
  min-height: 0;
}

/* ── Tab on top of the thumbnail ────────────────────────────
   Uses flex: 1 so it absorbs any vertical space left over once
   the .thumb has taken its aspect-ratio-locked height. min-height
   sets a comfortable floor so the tab still looks good when the
   form is the shorter element.
   ─────────────────────────────────────────────────────────── */
.thumb-tab {
  flex: 1 1 auto;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: var(--panel);
  border: 1px solid var(--border-l);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  transition:
    background   .25s ease,
    border-color .25s ease,
    box-shadow   .25s ease,
    transform    .2s var(--ease-spring),
    color        .25s ease;
}
.thumb-stack:hover .thumb-tab {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 12px 28px var(--accent-halo);
  transform: translateY(-2px);
}

.thumb-tab-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.thumb-tab-eyebrow {
  font-family: 'Noto Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--ink-dim);
  transition: color .25s ease;
}
.thumb-tab-label {
  font-family: 'Noto Sans', sans-serif;
  font-size: clamp(15px, 1.7vh, 17px);
  font-weight: 700;
  letter-spacing: -.3px;
  color: var(--ink);
  line-height: 1.2;
  transition: color .25s ease;
}
.thumb-stack:hover .thumb-tab-eyebrow {
  color: rgba(255, 255, 255, .85);
}
.thumb-stack:hover .thumb-tab-label {
  color: var(--on-accent);
}

.thumb-tab-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  flex-shrink: 0;
  border: 1px solid var(--border-l);
  transition:
    background   .25s ease,
    color        .25s ease,
    border-color .25s ease,
    transform    .25s var(--ease-out-expo);
}
.thumb-stack:hover .thumb-tab-arrow {
  background: var(--on-accent);
  color: var(--accent);
  border-color: rgba(255, 255, 255, .35);
  transform: translate(2px, -2px);
}

/* ── Thumbnail (image tile) ─────────────────────────────────
   Locked to the source image's exact aspect ratio so the
   illustration fills the box perfectly: no cropping, no empty
   space. `flex: 0 0 auto` keeps the size driven by aspect-ratio
   even when the .thumb-stack is stretched by the grid.
   ─────────────────────────────────────────────────────────── */
.thumb {
  flex: 0 0 auto;
  position: relative;
  aspect-ratio: 1448 / 1086;       /* matches /img/uxr_process.png */
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: box-shadow .3s var(--ease-out-expo);
}
.thumb-stack:hover .thumb {
  box-shadow: var(--shadow-hover);
}

/* The image-bearing inner div.
   - filter: grayscale(1) by default → desaturates the image.
   - On hover of the parent stack, only the filter changes
     (no transform/scale per JP's earlier request) so the
     image stays put and just gains its colour back. */
.thumb-inner {
  position: absolute;
  inset: 0;
  filter: grayscale(1);
  transition: filter .4s var(--ease-gentle);
}
.thumb-stack:hover .thumb-inner {
  filter: grayscale(0);
}

/* UX Research thumbnail — image fills the box perfectly because
   the .thumb container is locked to the same aspect ratio. */
.wv-1 {
  background-image: url(/img/uxr_process.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Legacy variants kept for safety in case used elsewhere on the site */
.wv-2 { background-image: url(/img/design.jpg); background-position: center; background-size: cover; background-repeat: no-repeat; }
.wv-3 { background-image: url(/img/ai_1.webp);  background-position: center; background-size: cover; }

/* ─── INLINE CONTACT FORM (right column at desktop) ──────────
   Compact FormSubmit-powered form. Field structure mirrors
   /contact/contact.html (Name, Email, Subject, Message) with
   the same .input-error shake animation and required-field
   validation pattern.

   The .hcf-group--message rule below uses `flex: 1 1 auto` so
   the textarea absorbs any extra height when the .thumb-stack
   on the left is the taller element. This is the other half
   of the height-matching system described above .work-thumbnails.

   ⚠️  ACTIVATION: change the `action` attribute on the form
        in index.html to your real FormSubmit-activated email
        before this works (same one as on /contact/contact.html).

   Hidden at @media (max-width: 900px) — the horizontal "Get
   in Touch" CTA above takes over there instead.
   ──────────────────────────────────────────────────────────── */
.hero-contact-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border-l);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  /* min-height: 0 lets the textarea group shrink/grow correctly
     when the grid stretches the form to match the .thumb-stack */
  min-height: 0;
  transition:
    background-color .4s ease,
    border-color .4s ease,
    box-shadow .4s ease;
}
.hcf-title {
  font-family: 'Noto Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: .8px;
  margin-bottom: 2px;
  transition: color .4s ease;
}

.hcf-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
/* The message group flex-grows so the textarea absorbs extra
   vertical space when the left column is taller than the form's
   natural content height. Keeps both columns aligned. */
.hcf-group--message {
  flex: 1 1 auto;
  min-height: 0;
}

.hcf-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-dim);
  transition: color .4s ease;
}
.hcf-req {
  color: var(--accent);
  margin-left: 1px;
}

.hcf-input,
.hcf-textarea {
  width: 100%;
  padding: 9px 12px;
  font-family: 'Noto Sans', sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid transparent;
  border-radius: 8px;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  transition:
    border-color .2s ease,
    background   .2s ease,
    box-shadow   .2s ease,
    color        .4s ease;
}
.hcf-input::placeholder,
.hcf-textarea::placeholder {
  color: var(--ink-dim);
  opacity: .85;
}
.hcf-input:focus,
.hcf-textarea:focus {
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: 0 0 0 3px var(--accent-glow-2);
}
/* Required-field error state — mirrors contact.css .input-error */
.hcf-input.input-error {
  border-color: #EF4444;
  animation: shake .35s ease;
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-6px); }
  75%      { transform: translateX(6px); }
}
.hcf-textarea {
  resize: none;
  /* Fills the .hcf-group--message container which itself flexes */
  width: 100%;
  height: 100%;
  min-height: 70px;
  line-height: 1.55;
}

.hcf-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 4px;
  padding: 11px 16px;
  border: none;
  border-radius: 9px;
  background: var(--accent);
  color: var(--on-accent);
  font-family: 'Noto Sans', sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(37, 99, 235, .18);
  transition:
    background .2s ease,
    transform  .2s var(--ease-spring),
    box-shadow .2s ease,
    opacity    .2s ease;
}
.hcf-submit:hover:not([disabled]) {
  background: var(--accent-dark);
  transform: translateY(-1px);
  box-shadow: 0 12px 22px rgba(37, 99, 235, .22);
}
.hcf-submit:active:not([disabled]) { transform: translateY(0); }
.hcf-submit[disabled] {
  opacity: .7;
  cursor: progress;
  transform: none;
}

/* In-page success state (replaces the form contents on send).
   Styled to match contact.css's .form-success aesthetic. */
.hero-contact-form.hcf-sent {
  align-items: stretch;
  justify-content: center;
}
.hcf-success {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--success-bg);
  border: 1px solid var(--success-bd);
  color: var(--success-ink);
  line-height: 1.5;
}
.hcf-success svg { flex-shrink: 0; }
.hcf-success-text {
  display: flex;
  flex-direction: column;
}
.hcf-success-text strong {
  font-family: 'Noto Sans', sans-serif;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 1px;
}
.hcf-success-text span {
  font-size: 12.5px;
  opacity: .9;
}

/* ─── RESPONSIVE — max-width breakpoints (small screens) ─────
   .slide-card is 432px (10% smaller than the 480 original)
   across all these breakpoints via the base rule above.
   ──────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  /* photo size already handled by clamp — no override needed */
}

/* ─── @media (max-width: 960px) ────────────────────────────── */
@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; }
  .hero-left { min-height: 56vw; }
  .hero-right { padding: clamp(10px, 2vh, 20px) 36px clamp(20px, 3vh, 40px); }
  .thumb-inner { filter: grayscale(0); }   /* drop greyscale on touch / narrow screens */

  /* ─── Fix the "sticky-feeling" scroll on mobile ─────────────
     On desktop, .hero-right is its own viewport-height column
     with `overflow-y: auto` so the right side scrolls
     independently while the left side stays fixed. Once the
     layout collapses to a single column at this breakpoint,
     that internal scroll container makes flicks on the lower
     half scroll only the right-panel's interior — the carousel
     above stays put because the page itself isn't moving. The
     visual result feels like the top portion is sticky and the
     bottom portion is sliding under it.

     Reset both rules so the page scrolls naturally as one
     document on mobile. */
  .hero-right {
    height: auto;
    overflow-y: visible;
  }
}

/* ─── @media (max-width: 900px) ─────────────────────────────
   The CTA / form swap-point.

   At ≤900px:
     • The horizontal "Get in Touch" button reappears
       (above the thumbnail).
     • The inline contact form is hidden.
     • The thumbnail stack collapses to a single full-width
       column. The tab keeps its min-height (no stretching
       needed since there's no other column to match).
   ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .hero-cta            { display: flex; }
  .hero-contact-form   { display: none; }
  .work-thumbnails     { grid-template-columns: 1fr; }
  /* When the form is gone, the tab no longer needs to stretch —
     anchor it to its natural height for a tidy mobile look. */
  .thumb-tab           { flex: 0 0 auto; }
}

/* ─── @media (max-width: 768px) ────────────────────────────── */
@media (max-width: 768px) {
  nav { padding: 0 20px; }
  .nav-links,
  .nav-status,
  .nav-cta { display: none; }
  /* The desktop theme-toggle collapses along with .nav-links
     (it lives inside it). The mobile menu hosts its own toggle. */
  .hamburger { display: flex; }

  .hero-right { padding: 10px 20px 32px; }
  .hero-top-block { gap: 12px; }
  .hero-headline { font-size: clamp(20px, 5.5vw, 30px); }
  .hero-cta { flex-direction: column; }
  .btn-primary  { flex: none; width: 100%; }
  .btn-secondary { text-align: center; }
  .value-props { display: none; }
}

/* ── Hide carousel prev/next arrows on narrow screens ─────
   Below 715px, the arrows crowd the slide. Dots still work.
   ─────────────────────────────────────────────────────────── */
@media (max-width: 714px) {
  .carousel-dots { display: none; }
}

/* ─── @media (max-width: 625px) ─────────────────────────────
   Mobile carousel-navigation layout (mirrors the contact page).

   On wide screens the prev/next arrows are absolute-positioned
   overlays floating over the centre of the slide. On phones
   that overlap visually breaks the slide image — the arrows sit
   on top of the slide's left/right edges.

   Fix: switch the carousel-wrapper from a centred-overlay layout
   to a vertical column. Items now stack in DOM order:
     1) .carousel-track   (the slide image / link)
     2) .carousel-arrow-row   (← prev / next →)

   The arrow row uses `display: flex` (overriding the desktop
   `display: contents`), and the two `.carousel-arrow` buttons
   inside switch from `position: absolute` to `position: static`
   so they sit naturally inside the row instead of overlaying
   the carousel.
   ──────────────────────────────────────────────────────────── */
@media (max-width: 625px) {
  /* ─── Breathing room inside the dark carousel area ─────────
     On phones, give .hero-left interior padding so:
       • the slide-card has visible space above it (instead of
         touching the top of the dark area)
       • the arrow row has visible space below it (instead of
         touching the bottom of the dark area)
     Also bump the min-height so there's enough vertical real
     estate for [card + gap + arrow row + 24px top/bottom pad]
     without anything getting squeezed.

     The `.carousel-slide` desktop padding (48px 64px) is reset
     here because the wrapper itself now provides outer padding
     via .hero-left — keeping both would double-space the card
     and shrink it unnecessarily. */
  .hero-left {
    padding: 24px 16px;
    min-height: 380px;
  }
  .carousel-slide { padding: 0; }

  /* Stack track / arrow-row vertically inside the wrapper. */
  .carousel-wrapper {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 12px;
  }

  /* The track was sized as `height: 100%` on desktop, which
     assumed a centred overlay layout. In a column flex it needs
     to flex-grow to absorb available space while the arrow row
     takes its natural height below. */
  .carousel-track {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
  }

  /* Reveal the arrow-row wrapper and lay it out as a flex row,
     pushing the two arrow buttons to the outer edges. */
  .carousel-arrow-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    flex: 0 0 auto;
    padding: 0 8px;
  }

  /* Take the arrows OUT of the desktop absolute-overlay positioning
     so they sit naturally inside .carousel-arrow-row as inline siblings. */
  .carousel-arrow {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    transform: none;
    width: 38px;
    height: 38px;
    opacity: .9;
  }
  /* Override the desktop hover transform — we no longer need
     `translateY(-50%)` since the buttons aren't centring anymore. */
  .carousel-arrow:hover {
    transform: scale(1.1);
    opacity: 1;
  }
  /* Reset the .prev / .next horizontal overrides — these were
     used to push the arrows into the carousel corners on desktop,
     but in the row layout the buttons are siblings, not overlays. */
  .carousel-arrow.prev,
  .carousel-arrow.next {
    left: auto;
    right: auto;
  }
}

@media (max-width: 480px) {
  .hero-top-block { grid-template-columns: 1fr; }
  .hero-photo-frame { display: none; }

  /* ─── Headline breathing room on phones ─────────────────────
     At desktop sizes the headline's vertical clamp() margins
     (and the identity-row's margin-bottom) have plenty of vh
     to pull from. On phones, those formulas collapse to their
     small floors and the headline ends up squashed against the
     identity row above and the sub-headline below. Override
     with explicit margins so the title gets clear separation
     from both neighbours.
     ─────────────────────────────────────────────────────────── */
  .hero-identity { margin-bottom: 28px; }
  .hero-headline { margin: 8px 0 20px; }
  .hero-sub      { margin-bottom: 14px; }
}

/* ─── DESKTOP ONLY — min-width override ──────────────────────
   Fires ONLY when the viewport is wider than 960px.
   600px × 1.25 = 750px — 25% larger than the previous desktop.
   ──────────────────────────────────────────────────────────── */
@media (min-width: 961px) {
  .slide-card { max-width: 750px; }
}

:root {
  --intro-dur: 2000ms;
}

html.intro-pending,
html.intro-pending body {
  overflow: hidden;
}

.site-intro {
  position: fixed;
  inset: 0;
  z-index: 260;
  display: none;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
}

html.intro-pending .site-intro,
html.intro-leaving .site-intro {
  display: flex;
}

.site-intro::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.28) 18%,
    rgba(255,255,255,.42) 50%,
    rgba(255,255,255,.28) 82%,
    rgba(255,255,255,0) 100%
  );
  box-shadow:
    0 0 22px rgba(255,255,255,.18),
    0 0 72px rgba(255,255,255,.10);
  opacity: .72;
  z-index: 1;
  transition: opacity .45s ease;
}

html.intro-leaving .site-intro::after {
  opacity: 0;
}

.site-intro__veil {
  position: absolute;
  inset: 0;
  transition:
    transform 1.05s var(--ease-out-expo),
    opacity .9s ease;
}

.site-intro__veil--left {
  right: 50%;
  background:
    radial-gradient(ellipse 62% 52% at 28% 42%, rgba(37, 99, 235, .28) 0%, transparent 70%),
    radial-gradient(ellipse 44% 42% at 82% 74%, rgba(59, 130, 246, .14) 0%, transparent 74%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)),
    linear-gradient(135deg, #081220 0%, #0D1B2E 44%, #15335A 100%);
}

.site-intro__veil--right {
  left: 50%;
  background:
    radial-gradient(circle at 0% 50%, rgba(255,255,255,.14) 0%, rgba(255,255,255,.05) 12%, transparent 28%),
    radial-gradient(circle at 28% 46%, rgba(37, 99, 235, .18) 0%, transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)),
    linear-gradient(225deg, #091321 0%, #11243E 46%, #18365C 100%);
}

.site-intro__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 44px 44px;
  mix-blend-mode: soft-light;
  opacity: .22;
  transform: scale(1.05);
  animation: introGridDrift 5.5s linear infinite;
}

.site-intro__core {
  position: relative;
  z-index: 2;
  width: min(560px, calc(100vw - 48px));
  padding: 34px 30px 28px;
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    linear-gradient(180deg, rgba(10, 19, 33, .72), rgba(7, 14, 24, .60));
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  box-shadow:
    0 30px 90px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.05);
  text-align: center;
  color: #fff;
  transition:
    transform .85s var(--ease-out-expo),
    opacity .65s ease;
}

.site-intro__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.7px;
  text-transform: uppercase;
  color: rgba(255,255,255,.68);
  margin-bottom: 16px;
  opacity: 0;
  animation: introFadeUp .75s .1s var(--ease-out-expo) forwards;
}

.site-intro__mark-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(37, 99, 235, .20) 0%, rgba(37, 99, 235, .07) 58%, transparent 72%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.05) inset;
  animation: introMarkHalo 1.9s .15s ease-out both;
}

.site-intro__mark {
  overflow: visible;
  transform: rotate(-8deg) scale(.86);
  animation: introMarkSettle .9s .2s var(--ease-spring) forwards;
}

.site-intro__mark-outer {
  stroke: rgba(255,255,255,.92);
  stroke-width: 2.2;
  stroke-linejoin: round;
  fill: none;
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  animation: introStroke .85s .2s var(--ease-out-expo) forwards;
}

.site-intro__mark-inner {
  fill: var(--accent);
  transform-origin: center;
  transform-box: fill-box;
  opacity: 0;
  animation: introInnerPop .55s .55s var(--ease-spring) forwards;
}

.site-intro__sequence {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.site-intro__sequence span {
  font-size: clamp(15px, 2vw, 18px);
  font-weight: 600;
  color: rgba(255,255,255,.88);
  letter-spacing: -.2px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.10);
  opacity: 0;
  transform: translateY(12px);
  animation: introFadeUp .55s var(--ease-out-expo) forwards;
}

.site-intro__sequence span:nth-child(1) { animation-delay: .35s; }
.site-intro__sequence span:nth-child(2) { animation-delay: .52s; }
.site-intro__sequence span:nth-child(3) { animation-delay: .69s; }

.site-intro__name {
  font-family: 'Noto Sans', sans-serif;
  font-size: clamp(34px, 6vw, 58px);
  font-weight: 700;
  letter-spacing: -2px;
  line-height: 1;
  margin-bottom: 12px;
  opacity: 0;
  animation: introFadeUp .75s .82s var(--ease-out-expo) forwards;
}

.site-intro__line {
  font-size: clamp(15px, 2vw, 18px);
  line-height: 1.65;
  color: rgba(255,255,255,.80);
  opacity: 0;
  animation: introFadeUp .75s .98s var(--ease-out-expo) forwards;
}

.site-intro__skip {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 3;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.84);
  border-radius: 999px;
  padding: 10px 14px;
  font-family: 'Noto Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .2px;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition:
    background .2s ease,
    border-color .2s ease,
    transform .2s var(--ease-spring),
    color .2s ease;
}

.site-intro__skip:hover {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.22);
  color: #fff;
  transform: translateY(-1px);
}

html.intro-leaving .site-intro__core {
  opacity: 0;
  transform: translateY(-18px) scale(.96);
}

html.intro-leaving .site-intro__veil--left {
  transform: translateX(-102%);
}

html.intro-leaving .site-intro__veil--right {
  transform: translateX(102%);
}

html.intro-leaving .site-intro__grid {
  opacity: 0;
  transition: opacity .6s ease;
}

html.intro-leaving-fast .site-intro__core,
html.intro-leaving-fast .site-intro__veil,
html.intro-leaving-fast .site-intro__grid {
  transition-duration: .24s;
}

nav,
.hero-left .carousel-wrapper,
.hero-top-block,
.value-props,
.hero-cta,
.work-thumbnails {
  transition:
    opacity .8s var(--ease-out-expo),
    transform .8s var(--ease-out-expo),
    filter .8s var(--ease-out-expo);
}

html.intro-pending nav,
html.intro-pending .hero-left .carousel-wrapper,
html.intro-pending .hero-top-block,
html.intro-pending .value-props,
html.intro-pending .hero-cta,
html.intro-pending .work-thumbnails {
  opacity: 0;
  transform: translateY(18px);
}

html.intro-pending .hero-left .carousel-wrapper {
  transform: scale(.96);
  filter: blur(6px);
}

@keyframes introStroke {
  to { stroke-dashoffset: 0; }
}

@keyframes introInnerPop {
  from { opacity: 0; transform: scale(.35) rotate(12deg); }
  to   { opacity: 1; transform: scale(1) rotate(0deg); }
}

@keyframes introMarkSettle {
  from { transform: rotate(-8deg) scale(.86); }
  to   { transform: rotate(0deg) scale(1); }
}

@keyframes introMarkHalo {
  from { transform: scale(.86); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

@keyframes introFadeUp {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes introGridDrift {
  from { transform: translate3d(0, 0, 0) scale(1.05); }
  to   { transform: translate3d(-22px, -22px, 0) scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
  .site-intro,
  .site-intro *,
  nav,
  .hero-left .carousel-wrapper,
  .hero-top-block,
  .value-props,
  .hero-cta,
  .work-thumbnails {
    animation: none !important;
    transition: none !important;
  }
}

@media (max-width: 768px) {
  .site-intro__core {
    width: min(92vw, 520px);
    padding: 28px 22px 22px;
    border-radius: 22px;
  }

  .site-intro__skip {
    top: 14px;
    right: 14px;
    padding: 9px 12px;
  }

  .site-intro__sequence {
    gap: 8px;
  }

  .site-intro__sequence span {
    padding: 7px 10px;
  }
}

@media (max-width: 480px) {
  .site-intro::after {
    top: 50%;
    bottom: auto;
    left: 0;
    right: 0;
    width: auto;
    height: 1px;
    transform: translateY(-50%);
  }

  .site-intro__veil--left,
  .site-intro__veil--right {
    right: 0;
    left: 0;
  }

  .site-intro__veil--left {
    bottom: 42%;
  }

  .site-intro__veil--right {
    top: 58%;
  }

  html.intro-leaving .site-intro__veil--left {
    transform: translateY(-102%);
  }

  html.intro-leaving .site-intro__veil--right {
    transform: translateY(102%);
  }

  .site-intro__mark-wrap {
    width: 84px;
    height: 84px;
    margin-bottom: 16px;
  }
}