/* ═══════════════════════════════════════════════════
   THE URBAN SOLUTIONS — Refined Dark Editorial
   Typography: League Spartan (Display) + Roboto (Body)
   ═══════════════════════════════════════════════════ */

/* ── Reset ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  /* Palette */
  --bg-light: #f5f3f0;
  --bg-dark: #0d0d0d;
  --bg-accent: #1a1a18;
  --bg-card: #161614;
  --text-on-light: #1a1a1a;
  --text-on-dark: #f0ede8;
  --text-muted: #8a857d;
  --text-muted-dark: #6b665e;
  --accent: #F7A800; /* Logo Golden */
  --accent-bright: #FFB71C;
  --accent-dim: #B37A00;
  --brand-green: #8CC63F; /* Logo Green */

  /* Typography */
  --font-display: 'League Spartan', sans-serif;
  --font-body: 'Roboto', sans-serif;

  /* Spacing */
  --header-h: 80px;
}

html {
  scroll-behavior: auto; /* Lenis handles this */
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  font-weight: 500;
  background: var(--bg-dark);
  color: var(--text-on-dark);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img { max-width: 100%; display: block; }

/* ═══════════════════════════════════════════════════
   LOADER
   ═══════════════════════════════════════════════════ */
#loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--bg-dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
#loader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.loader-brand {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: 0.25em;
  color: var(--accent);
}
.loader-bar-track {
  width: 200px;
  height: 2px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
  overflow: hidden;
}
#loader-bar {
  height: 100%;
  width: 0%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.15s ease;
}
#loader-percent {
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════════ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: var(--header-h);
  display: flex;
  align-items: center;
  padding: 0 5vw;
  transition: opacity 0.4s ease;
}

/* Nav sits above all layers */
.site-header nav {
  position: relative;
  z-index: 5;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: 0.12em;
  color: #fff;
}
.logo-accent {
  color: var(--accent);
  margin-left: 0.3em;
}
.nav-links {
  display: flex;
  gap: 2.5rem;
  align-items: center;
}
.nav-links a {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  transition: color 0.3s;
  position: relative;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0;
  width: 0;
  height: 1px;
  background: var(--brand-green);
  transition: width 0.3s ease;
}
.nav-links a:hover::after { width: 100%; }
.nav-cta {
  background: var(--accent) !important;
  color: var(--bg-dark) !important;
  padding: 8px 20px !important;
  border-radius: 4px;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
}
.nav-cta::after { display: none !important; }
.nav-cta:hover {
  background: var(--brand-green) !important;
}

/* Mobile menu button */
.mobile-menu-btn {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.mobile-menu-btn span {
  display: block;
  width: 24px;
  height: 2px;
  background: #fff;
  transition: all 0.3s ease;
  transform-origin: center;
}

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

/* ═══════════════════════════════════════════════════
   HERO PROJECT SLIDER
   ═══════════════════════════════════════════════════ */
.hero-slider {
  position: relative;
  z-index: 5;
  height: 100vh;
  overflow: hidden;
  background: var(--bg-dark);
}

/* Everything visual lives in this inner box, kept full-bleed by default.
   On mobile it gets inset from the section's edges (see media query below)
   so the slider reads as a contained card instead of touching the screen
   edges — the outer .hero-slider stays untouched (full-bleed, 100vh) so
   GSAP's ScrollTrigger pin math (app.js) is unaffected by the inset. */
.hero-slider-inner {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* Background layer — crossfades continuously with scroll (JS-driven opacity) */
.hero-slide-media {
  position: absolute;
  inset: 0;
  opacity: 0;
  overflow: hidden;
}
.hero-slide-media.is-active,
.hero-slide-media[data-index="0"] {
  opacity: 1; /* first slide visible immediately, before JS takes over */
}
.hero-slide-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.001); /* avoid subpixel seam on some browsers */
  /* Source images are white-background masterplan/zoning drawings, not
     photos — mute and darken them so they read as tonal imagery instead
     of a blown-out white panel behind the dark UI. */
  filter: brightness(0.68) saturate(1.15) contrast(1.05);
}

/* Bottom ~30% darkened for legibility, a mild top scrim so the fixed nav
   stays readable, and a constant mid-tone wash the rest of the way since
   the source drawings have bright white backgrounds. Shared across all
   slides (constant), so it never needs to blend. */
.hero-slide-gradient {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(0, 0, 0, 0.55) 16%,
    rgba(13, 13, 13, 0.4) 32%,
    rgba(13, 13, 13, 0.4) 78%,
    rgba(0, 0, 0, 0.5) 100%
  );
}

/* Persistent section label — identifies the merged hero/stories section,
   revealed once on load via the shared .reveal-up system (app.js) */
.hero-static-heading {
  position: absolute;
  z-index: 4;
  top: calc(var(--header-h) + 2rem);
  left: 5vw;
}
.hero-static-heading .section-label-static {
  margin-bottom: 0;
}

/* Text layer — swaps per-slide (no continuous blend), so two headings
   are never legible on screen at once. The container toggles instantly
   via .is-active (CSS-only fallback for reduced-motion/no-JS); the
   individual lines (eyebrow/title/desc/tag/cta) are animated in and out
   with a staggered fade+rise by GSAP in app.js for the full experience. */
.hero-slide-content {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: clamp(2rem, 7vh, 4.5rem);
  padding: 0 5vw;
  max-width: 1020px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.hero-slide-content.is-active {
  opacity: 1;
  pointer-events: auto;
}
.hero-slide-eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: clamp(0.68rem, 1vw, 0.85rem);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent);
  margin-bottom: 0.9rem;
}
.hero-slide-title {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(2.2rem, 7vw, 6rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
  color: #fff;
}
.hero-slide-title .accent {
  color: var(--accent);
  font-style: italic;
}
.hero-slide-desc {
  font-family: var(--font-body);
  font-size: clamp(0.85rem, 1.3vw, 1rem);
  line-height: 1.65;
  color: rgba(240, 237, 232, 0.78);
  max-width: 620px;
  margin-bottom: 1.1rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hero-slide-tag {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 5px 14px;
  border: 1px solid rgba(247, 168, 0, 0.35);
  border-radius: 20px;
  color: var(--accent);
  margin-bottom: 1.5rem;
}
.hero-slide-cta {
  margin-top: 0;
  display: block;
}

/* Prev / next arrows — vertically centered, clear of top nav and
   bottom text zone, inset enough to avoid the edge back-swipe gesture */
.hero-nav-arrow {
  position: absolute;
  /* Sits in the upper part of the frame, clear of the (now taller, with
     description + tag) bottom-anchored text block on every slide. */
  top: 38%;
  transform: translateY(-50%);
  z-index: 6;
  width: 48px;
  height: 48px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(13, 13, 13, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}
.hero-nav-arrow:hover {
  background: rgba(247, 168, 0, 0.25);
  border-color: rgba(247, 168, 0, 0.5);
}
.hero-nav-arrow:active {
  transform: translateY(-50%) scale(0.94);
}
.hero-nav-prev { left: clamp(14px, 3vw, 28px); }
.hero-nav-next { right: clamp(14px, 3vw, 28px); }

/* Slide indicator dots */
.hero-slider-dots {
  position: absolute;
  z-index: 6;
  right: clamp(16px, 4vw, 40px);
  bottom: clamp(2rem, 7vh, 4.5rem);
  display: flex;
  gap: 6px;
}
.hero-dot {
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-dot::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  transition: background 0.3s ease, transform 0.3s ease;
}
.hero-dot.is-active::before {
  background: var(--accent);
  transform: scale(1.35);
}
.hero-dot:hover::before {
  background: rgba(255, 255, 255, 0.7);
}

/* Reduced motion: no scroll-pin/scrub is created (see app.js) — the
   slider just sits as one normal 100vh block; dots/arrows swap the
   active slide in place via the opacity transitions above. */

/* CTA Button (used by hero slide CTAs) */
.cta-button {
  display: inline-block;
  margin-top: 1.5rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 14px 32px;
  background: var(--accent);
  color: var(--bg-dark);
  border-radius: 4px;
  transition: background 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
}
.cta-button:hover {
  background: var(--brand-green);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(140, 198, 63, 0.25);
}

/* ── Stats Section ── */
.stats-section {
  background: var(--bg-dark);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  text-align: center;
  padding-top: 3rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.stat {
  position: relative;
  padding: 0 1rem;
}
.stat:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 10%;
  right: 0;
  bottom: 10%;
  width: 1px;
  background: rgba(255, 255, 255, 0.08);
}
.stat-number {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3rem, 5vw, 5rem);
  line-height: 1;
  color: var(--text-on-dark);
  display: inline-block; /* min-width reserved by app.js counters */
  font-variant-numeric: tabular-nums;
}
.stat-suffix {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.2rem, 2vw, 1.8rem);
  color: var(--accent);
  margin-left: 4px;
  vertical-align: super;
}
.stat-label {
  display: block;
  margin-top: 0.6rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════
   PAGE SECTIONS (Below Scroll)
   ═══════════════════════════════════════════════════ */
.page-section {
  position: relative;
  z-index: 10;
  padding: 120px 0;
}
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 5vw;
}
.section-label-static {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--accent);
  margin-bottom: 0.8rem;
}
.page-heading {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.8rem, 5vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-bottom: 1rem;
}
.page-subheading {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 520px;
  margin-bottom: 3.5rem;
}

/* ── Process Section ── */
.process-section {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(247, 168, 0, 0.06), transparent 60%),
    var(--bg-dark);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.process-flow {
  --node: 72px;
  --gap: 2rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
  list-style: none;
}
.process-step {
  position: relative;
  text-align: center;
  outline: none;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.process-flow.revealed .process-step {
  opacity: 1;
  transform: translateY(0);
}

/* Connector line from this node to the next */
.step-connector {
  position: absolute;
  top: calc(var(--node) / 2 - 1px);
  left: 50%;
  width: calc(100% + var(--gap));
  height: 2px;
  background: rgba(255, 255, 255, 0.08);
  z-index: 0;
}
.process-step:last-child .step-connector { display: none; }
.step-connector::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--accent), var(--brand-green));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1);
  transition-delay: calc(var(--i) * 0.45s + 0.5s);
}
.process-flow.revealed .step-connector::before { transform: scaleX(1); }
.process-step:hover .step-connector::before,
.process-step:focus-visible .step-connector::before {
  box-shadow: 0 0 12px rgba(247, 168, 0, 0.6);
}
.step-pulse {
  position: absolute;
  top: 50%;
  left: 0;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px 2px var(--accent-bright);
  opacity: 0;
}
.process-flow.revealed .step-pulse {
  animation: step-travel 2.8s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.45s + 1.6s);
}
@keyframes step-travel {
  0%   { left: 0; opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { left: calc(100% - 8px); opacity: 0; }
}

/* Node */
.step-node {
  position: relative;
  z-index: 1;
  width: var(--node);
  height: var(--node);
  margin: 0 auto 1.8rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
  border: 1px solid rgba(247, 168, 0, 0.35);
  color: var(--accent);
  transition: background 0.4s ease, color 0.4s ease, transform 0.4s ease,
              border-color 0.4s ease, box-shadow 0.4s ease;
}
.step-node svg { width: 30px; height: 30px; }
.step-ring {
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  opacity: 0;
}
.process-flow.revealed .step-ring {
  animation: step-ring 3s ease-out infinite;
  animation-delay: calc(var(--i) * 0.45s + 1s);
}
@keyframes step-ring {
  0%   { transform: scale(1); opacity: 0.5; }
  70%, 100% { transform: scale(1.7); opacity: 0; }
}

/* Body card */
.step-body {
  padding: 1.6rem 1.4rem 1.8rem;
  background: var(--bg-card);
  border-radius: 12px;
  border: 1px solid rgba(247, 168, 0, 0.08);
  transition: border-color 0.4s ease, transform 0.4s ease, background 0.4s ease;
}
.step-number {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: var(--accent);
  margin-bottom: 0.5rem;
}
.step-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  margin-bottom: 0.7rem;
}
.step-desc {
  font-family: var(--font-body);
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--text-muted);
  transition: color 0.4s ease;
}

/* Hover / focus */
.process-step:hover .step-node,
.process-step:focus-visible .step-node {
  background: var(--accent);
  color: var(--bg-dark);
  border-color: var(--accent);
  transform: scale(1.12);
  box-shadow: 0 0 0 8px rgba(247, 168, 0, 0.12), 0 10px 35px rgba(247, 168, 0, 0.35);
}
.process-step:hover .step-body,
.process-step:focus-visible .step-body {
  border-color: rgba(140, 198, 63, 0.45);
  transform: translateY(-6px);
  background: #1b1b18;
}
.process-step:hover .step-desc,
.process-step:focus-visible .step-desc { color: var(--text-on-dark); }
.process-step:hover .step-title,
.process-step:focus-visible .step-title { color: var(--accent-bright); }

/* ── Team Section ── */
.team-section {
  background: var(--bg-accent);
}
.team-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}
.team-card {
  padding: 3rem 2.5rem;
  background: var(--bg-card);
  border-radius: 12px;
  border: 1px solid rgba(247, 168, 0, 0.08);
  transition: border-color 0.4s ease, transform 0.4s ease;
}
.team-card:hover {
  border-color: rgba(140, 198, 63, 0.35);
  transform: translateY(-4px);
}
.team-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-dim), var(--accent));
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  position: relative;
  overflow: hidden;
}
.avatar-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.avatar-initials {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--bg-dark);
  letter-spacing: 0.05em;
}
.team-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  margin-bottom: 0.3rem;
}
.team-role {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 1.2rem;
}
.team-bio {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-muted);
}

.story-read-more {
  display: inline-flex;
  align-items: center;
  margin-top: 2rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  position: relative;
  overflow: hidden;
  padding-bottom: 2px;
}

.story-read-more .arrow {
  margin-left: 8px;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-block;
}

.story-read-more::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--brand-green);
  transform: translateX(-101%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.story-card:hover .story-read-more {
  color: var(--brand-green);
}

.story-card:hover .story-read-more .arrow {
  transform: translateX(6px);
}

.story-card:hover .story-read-more::after {
  transform: translateX(0);
}

/* ═══════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════ */
.site-footer {
  position: relative;
  z-index: 10;
  background: var(--bg-accent);
  border-top: 1px solid rgba(255,255,255,0.05);
  padding: 80px 0 40px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1.5fr;
  gap: 3rem;
  margin-bottom: 3rem;
}
.footer-logo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
}
.footer-tagline {
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-muted);
}
.footer-links h4,
.footer-contact h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 1.2rem;
  color: var(--accent);
}
.footer-links ul {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.footer-links a {
  font-size: 0.88rem;
  color: var(--text-muted);
  transition: color 0.3s;
}
.footer-links a:hover { color: var(--text-on-dark); }
.footer-contact p {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-bottom: 0.8rem;
}
.footer-email {
  display: inline-block;
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--accent);
  transition: color 0.3s;
  margin-bottom: 1.2rem;
}
.footer-email:hover { color: var(--brand-green); }
.footer-socials {
  display: flex;
  gap: 0.8rem;
}
.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  color: var(--text-muted);
  transition: all 0.3s ease;
}
.social-link:hover {
  background: var(--brand-green);
  color: var(--bg-dark);
}
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.05);
  padding-top: 2rem;
  text-align: center;
}
.footer-bottom p {
  font-size: 0.78rem;
  color: var(--text-muted-dark);
  letter-spacing: 0.04em;
}
.footer-bottom p.footer-credit {
  margin-top: 1.25rem;
  font-size: 0.68rem;
  text-align: left;
}
.footer-credit a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.3s ease;
}
.footer-credit a:hover {
  color: var(--brand-green);
}

/* ═══════════════════════════════════════════════════
   BELOW-SCROLL SECTION ANIMATIONS (IntersectionObserver)
   ═══════════════════════════════════════════════════ */
.reveal-up {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal-up.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children */
.stat, .team-card, .story-card {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s ease, transform 0.7s ease, border-color 0.4s ease;
}
.stat.revealed, .team-card.revealed, .story-card.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ═══════════════════════════════════════════════════
   MEGA MENU (Mobile)
   ═══════════════════════════════════════════════════ */
.mega-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  background: rgba(13, 13, 13, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: none;
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.mega-menu.is-open {
  display: flex;
  opacity: 1;
  transform: translateY(0);
}
.mega-menu-inner {
  width: 100%;
  padding: calc(var(--header-h) + 2rem) 8vw 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2.5rem;
  overflow-y: auto;
}
.mega-menu-section {
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding-bottom: 2rem;
}
.mega-menu-section:last-of-type {
  border-bottom: none;
}
.mega-menu-label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--accent);
  margin-bottom: 1.2rem;
}
.mega-menu-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.mega-link {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.8rem;
  color: var(--text-on-dark);
  padding: 0.6rem 0;
  transition: color 0.3s ease, transform 0.3s ease;
  position: relative;
}
.mega-link:hover {
  color: var(--brand-green);
  transform: translateX(12px);
}
.mega-link::before {
  content: '';
  position: absolute;
  left: -16px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-green);
  transform: translateY(-50%) scale(0);
  transition: transform 0.3s ease;
}
.mega-link:hover::before {
  transform: translateY(-50%) scale(1);
}
.mega-menu-footer {
  margin-top: auto;
}
.mega-menu-tagline {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted-dark);
}

.scroll-to-top {
  position: absolute;
  right: 5vw;
  bottom: 2rem;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg-dark);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 100;
}
.scroll-to-top:hover {
  background: var(--brand-green);
  transform: translateY(-5px);
}

/* ===================================================
   LOGO STYLES
   =================================================== */
.nav-logo-img {
  height: 45px;
  width: auto;
  object-fit: contain;
}

.footer-logo-img {
  height: 90px;
  width: auto;
  object-fit: contain;
  margin-bottom: 1.5rem;
}

/* Used by casestudies/index.html's own hero (not the homepage) */
.hero-logo-container {
  position: absolute;
  right: 8vw;
  top: 50%;
  transform: translateY(-50%);
  z-index: 15;
  pointer-events: auto;
}

.hero-logo-img {
  width: 280px;
  max-width: 30vw;
  height: auto;
  object-fit: contain;
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  filter: drop-shadow(0 0 0 rgba(140, 198, 63, 0));
}

.hero-logo-img:hover {
  transform: scale(1.08) rotate(1deg);
  filter: drop-shadow(0 15px 35px rgba(140, 198, 63, 0.35)); /* Brand Green glow */
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem 1.5rem;
  }
  .stat:nth-child(2n)::after {
    display: none;
  }
}

@media (max-width: 768px) {
  :root { --header-h: 60px; }

  .nav-links { display: none; }
  .mobile-menu-btn { display: flex; }

  .hero-logo-container { display: none; } /* casestudies hero */

  /* Hero slider — contained card, inset from the screen edges with
     rounded corners, so it reads as a bounded box rather than full-bleed */
  .hero-slider-inner {
    inset: 12px;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
  }

  /* Hero slider — tighter arrow inset, higher up to clear the taller
     (3-line desc) text block, dots row clears the CTA below it */
  .hero-nav-prev { left: 16px; }
  .hero-nav-next { right: 16px; }
  .hero-nav-arrow { top: 28%; }
  .hero-slider-dots {
    right: auto;
    left: 5vw;
    bottom: 1rem;
  }
  .hero-slide-content {
    bottom: clamp(5.5rem, 17vh, 7rem);
    max-width: 100%;
  }
  .hero-slide-desc {
    -webkit-line-clamp: 3;
  }
  .hero-static-heading {
    top: calc(var(--header-h) + 1.2rem);
  }

  /* Stats */
  .stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2rem 1.5rem;
  }

  /* Process — vertical flow */
  .process-flow {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .process-step {
    display: grid;
    grid-template-columns: var(--node) 1fr;
    column-gap: 1.2rem;
    text-align: left;
    align-items: start;
  }
  .step-node { margin: 0; }
  .step-connector {
    top: calc(var(--node) / 2);
    left: calc(var(--node) / 2 - 1px);
    width: 2px;
    height: calc(100% + 1.5rem);
  }
  .step-connector::before {
    transform: scaleY(0);
    transform-origin: top;
    background: linear-gradient(180deg, var(--accent), var(--brand-green));
  }
  .process-flow.revealed .step-connector::before { transform: scaleY(1); }
  .step-pulse { display: none; }
  .process-step:hover .step-body,
  .process-step:focus-visible .step-body { transform: translateX(4px); }

  /* Team */
  .team-grid {
    grid-template-columns: 1fr;
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

@media (max-width: 480px) {
  .nav-logo-img { height: 35px; }
  .hero-slide-title { font-size: clamp(1.9rem, 9vw, 2.6rem); }
  .hero-slide-desc { display: none; }
  .stat-number { font-size: clamp(2rem, 10vw, 3rem); }
  .team-card { padding: 2rem 1.5rem; }
}

/* ═══════════════════════════════════════════════════
   PROFILE PAGE — Heyzine Flipbook Embed
   ═══════════════════════════════════════════════════ */
.flipbook-card {
  /* Break out of .container's max-width/padding to span the full viewport. */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
}
.flipbook-card:hover {
  transform: none;
}
.flipbook-embed {
  position: relative;
  width: 100%;
  /* Ratio taken from Heyzine's snippet: 100% width against a 396px
     height at this card's original 900px design width. */
  aspect-ratio: 900 / 396;
  background: var(--bg-dark);
  overflow: hidden;
}
@supports not (aspect-ratio: 1 / 1) {
  .flipbook-embed {
    height: 0;
    padding-top: 44%; /* 396 / 900, for browsers without aspect-ratio support */
  }
}
.flipbook-embed .fp-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 1px solid lightgray;
}

/* On narrow screens, the 900:396 desktop ratio becomes so short that
   Heyzine's own book (which keeps its own document aspect ratio and
   letterboxes inside whatever box it's given) renders tiny with big
   empty gutters. Switch to a much taller box so height stops being the
   limiting dimension and the book scales up to fill the full width. */
@media (max-width: 768px) {
  .flipbook-embed {
    aspect-ratio: auto;
    height: 80vh;
    min-height: 420px;
  }
}
@media (max-width: 480px) {
  .flipbook-embed {
    height: 75vh;
    min-height: 380px;
  }
}