:root {
    --c-bg: #05070D;
    --c-panel: #0C1220;
    --c-text: #D9E4F2;
    --c-accent: #A9C2DE;
    --c-mid: #5E7089;
    --c-muted: #8A97A8;
    --c-bg-rgb: 5, 7, 13;
    --c-panel-rgb: 12, 18, 32;
    --c-text-rgb: 217, 228, 242;
    --c-accent-rgb: 169, 194, 222;
    --c-mid-rgb: 94, 112, 137;
    --c-muted-rgb: 138, 151, 168;
  }
  :root[data-theme="light"] {
    --c-bg: #F2EBDC;
    --c-panel: #E6DEC9;
    --c-text: #1A1A1A;
    --c-accent: #2E2E2E;
    --c-mid: #7D7466;
    --c-muted: #6F6759;
    --c-bg-rgb: 242, 235, 220;
    --c-panel-rgb: 230, 222, 201;
    --c-text-rgb: 26, 26, 26;
    --c-accent-rgb: 46, 46, 46;
    --c-mid-rgb: 125, 116, 102;
    --c-muted-rgb: 111, 103, 89;
  }
  /* Mobile perf: drop expensive blurs */
  @media (max-width: 768px), (hover: none) and (pointer: coarse) {
    .footer-glass-pill { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
    [data-mobile-no-blur] { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  }
  /* Mobile: convert the cinematic fixed-footer pattern to a normal flow section
     (mobile browsers' dynamic viewport breaks position: fixed + 100vh + clipPath) */
  @media (max-width: 768px) {
    .contact-wrapper {
      height: auto !important;
      min-height: 100svh;
      clip-path: none !important;
    }
    .contact-wrapper > footer {
      position: relative !important;
      height: auto !important;
      min-height: 100svh;
      padding: 80px 0 24px;
    }
  }
  /* Mobile hamburger drawer */
  .mnav-overlay {
    position: fixed; inset: 0; z-index: 99990;
    background: var(--c-bg);
    transform: translateY(-100%);
    transition: transform 0.45s cubic-bezier(0.76, 0, 0.24, 1);
    display: flex; flex-direction: column;
    padding: 24px;
  }
  .mnav-overlay.open { transform: translateY(0); }
  /* The drawer's own `display: flex` outranks Tailwind's `md:hidden`, so it
     kept painting over the desktop hero. Keep it out of the desktop layout. */
  @media (min-width: 768px) { .mnav-overlay { display: none; } }
  .mnav-link {
    display: block; padding: 18px 4px;
    font-family: 'Kanit', sans-serif;
    font-weight: 600;
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--c-text);
    border-bottom: 1px solid rgba(var(--c-text-rgb), 0.08);
    text-decoration: none;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
  }
  .mnav-overlay.open .mnav-link {
    opacity: 1; transform: translateY(0);
  }
  .mnav-overlay.open .mnav-link:nth-child(1) { transition-delay: 0.10s; }
  .mnav-overlay.open .mnav-link:nth-child(2) { transition-delay: 0.16s; }
  .mnav-overlay.open .mnav-link:nth-child(3) { transition-delay: 0.22s; }
  .mnav-overlay.open .mnav-link:nth-child(4) { transition-delay: 0.28s; }
  .mnav-overlay.open .mnav-link:nth-child(5) { transition-delay: 0.34s; }
  .mnav-overlay.open .mnav-link:nth-child(6) { transition-delay: 0.40s; }
  .mnav-overlay.open .mnav-link:nth-child(7) { transition-delay: 0.46s; }
  body.mnav-locked { overflow: hidden; }
  html { scroll-behavior: smooth; }
  /* Lenis smooth-scroll integration */
  html.lenis, html.lenis body { height: auto; }
  .lenis.lenis-smooth { scroll-behavior: auto !important; }
  .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
  .lenis.lenis-stopped { overflow: hidden; }
  html, body, #root { background: var(--c-bg); transition: background 0.35s ease; overflow-x: clip; max-width: 100vw; }
  body { font-family: 'Kanit', sans-serif; color: var(--c-text); transition: color 0.35s ease; overflow-x: clip; }
  img, svg { max-width: 100%; }
  /* Curtain overlay used by the theme toggle */
  .jp-curtain {
    position: fixed; inset: 0;
    transform-origin: top;
    transform: scaleY(0);
    z-index: 99998;
    pointer-events: none;
  }
  .jp-curtain.jp-curtain-falling { transform: scaleY(1); transition: transform 600ms cubic-bezier(0.76, 0, 0.24, 1); }
  .jp-curtain.jp-curtain-rising  { transform: scaleY(0); transition: transform 600ms cubic-bezier(0.76, 0, 0.24, 1); transform-origin: bottom; }
  .jp-theme-toggle {
    width: 38px; height: 38px; border-radius: 999px;
    background: var(--c-bg);
    color: var(--c-text);
    border: 1.5px solid rgba(var(--c-text-rgb), 0.25);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; padding: 0;
    transition: transform 0.18s ease, background 0.35s ease, color 0.35s ease, border-color 0.35s ease;
  }
  .jp-theme-toggle:hover { transform: scale(1.08); }
  .jp-theme-toggle:active { transform: scale(0.94); }
  /* Light mode tweaks for image-heavy sections to keep contrast clean */
  :root[data-theme="light"] .hero-heading {
    background: linear-gradient(180deg, #2E2E2E 0%, #555 60%, #888 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
            color: transparent;
  }
  :root[data-theme="light"] ::-webkit-scrollbar-thumb { background: #b8b0a0; }
  :root[data-theme="light"] ::-webkit-scrollbar-track { background: var(--c-bg); }
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  .hero-heading {
    background: linear-gradient(180deg, var(--c-mid) 0%, var(--c-accent) 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
            color: transparent;
  }
  .main-wrap { overflow-x: clip; }
  /* Hide scrollbar styling kept minimal */
  ::-webkit-scrollbar { width: 8px; height: 8px; }
  ::-webkit-scrollbar-thumb { background: #131b2c; border-radius: 8px; }
  /* ===== Story Hero (scroll-scrub video) ===== */
  .story-hero-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
  .story-hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 32% center; }
  .story-chapter { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 0 6vw; pointer-events: none; will-change: opacity, transform; }
  .story-kicker { font-family: 'Kanit', sans-serif; font-weight: 400; font-size: 0.62rem; letter-spacing: 0.34em; text-transform: uppercase; color: #A9C2DE; display: inline-flex; align-items: center; gap: 14px; margin-bottom: 18px; }
  .story-kicker::before { content: ''; width: 34px; height: 1px; background: #A9C2DE; opacity: 0.7; }
  .story-line { font-weight: 800; text-transform: uppercase; letter-spacing: -0.03em; line-height: 0.95; font-size: clamp(2.6rem, 8vw, 7.5rem); background: linear-gradient(180deg, #F2F7FD 0%, #8FA6C2 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
  .story-sub { margin-top: 20px; font-weight: 300; letter-spacing: 0.04em; color: rgba(217,228,242,0.72); font-size: clamp(0.85rem, 1.5vw, 1.15rem); max-width: 46ch; }
  .story-progress { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); width: 1px; height: 130px; background: rgba(217,228,242,0.15); z-index: 40; }
  .story-progress > div { width: 100%; background: linear-gradient(180deg, #A9C2DE, #5E7089); transform-origin: top; }
  .story-scrollhint { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 40; display: flex; flex-direction: column; align-items: center; gap: 10px; font-family: 'Kanit', sans-serif; font-size: 0.55rem; letter-spacing: 0.4em; text-transform: uppercase; color: rgba(217,228,242,0.6); transition: opacity 0.5s ease; }
  .story-scrollhint::after { content: ''; width: 1px; height: 42px; background: linear-gradient(180deg, rgba(217,228,242,0.7), transparent); animation: storyDrip 1.8s ease-in-out infinite; }
  @keyframes storyDrip { 0% { transform: scaleY(0); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: top; } 56% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
  @media (max-width: 768px) { .story-hero-video { object-position: 38% center; } }
  /* ===== Hero grade overlays (hero stays dark in both themes) ===== */
  :root { --hero-rgb: 5,7,13; --hero-bg: #05070D; }
  .hero-grade-a { background: linear-gradient(180deg, rgba(var(--hero-rgb),0.32) 0%, rgba(var(--hero-rgb),0) 26%, rgba(var(--hero-rgb),0) 68%, rgba(var(--hero-rgb),0.85) 100%); }
  .hero-grade-b { background: radial-gradient(128% 96% at 70% 42%, rgba(var(--hero-rgb),0) 56%, rgba(var(--hero-rgb),0.38) 100%); }
  /* Hero video: identical in both themes */
  /* ===== Portrait wall tiles: dark in dark mode, light in light mode ===== */
  .spw-tile { background: #0C1220; border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 24px 48px rgba(0,0,0,0.35); }
  :root[data-theme="light"] .spw-tile { background: var(--c-bg); border: 1px solid rgba(20,30,45,0.14); box-shadow: 0 24px 48px rgba(20,30,45,0.10); }
  /* Ventures wall: monochrome logos so seven different brand palettes read as
     one system, and dark-on-dark wordmarks stay legible in both themes. */
  .spw-tile img { filter: brightness(0) invert(1) drop-shadow(0 0 18px rgba(255,255,255,0.14)); }
  :root[data-theme="light"] .spw-tile img { filter: brightness(0) invert(0.1); }
  .spw-cap { color: rgba(217,228,242,0.55); }
  :root[data-theme="light"] .spw-cap { color: rgba(20,30,45,0.6); }
  ::-webkit-scrollbar-track { background: var(--c-bg); }
  @keyframes jpFadeDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
  /* `backwards`, not `both`: holding the end frame leaves a transform on the
     navbar, which turns it into the containing block for the position:fixed
     drawer nested inside it — the drawer then gets clipped to the navbar's
     own 60px box. The end frame is the element's natural state anyway. */
  .jp-fade-down { animation: jpFadeDown 0.7s cubic-bezier(0.25,0.1,0.25,1) backwards; }
  .jp-fade { opacity: 0; will-change: opacity, transform; }
  .jp-fade.jp-in { animation: jpFadeIn var(--jp-dur, 0.7s) cubic-bezier(0.25,0.1,0.25,1) var(--jp-delay, 0s) both; }
  @keyframes jpFadeIn {
    from { opacity: 0; transform: translate3d(var(--jp-x, 0), var(--jp-y, 30px), 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
  }
  @keyframes jpBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
  .jp-divider { height: 1px; background: linear-gradient(to right, transparent, rgba(var(--c-text-rgb), 0.18), transparent); }
  .jp-sec-label { font-family: 'Kanit', sans-serif; font-weight: 400; font-size: 0.65rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--c-accent); display: inline-flex; align-items: center; gap: 12px; }
  .jp-sec-label::before { content: ''; width: 28px; height: 1px; background: var(--c-accent); opacity: 0.6; }
  .jp-sec-num { font-family: 'Kanit', sans-serif; font-weight: 900; font-size: clamp(3rem, 8vw, 7rem); color: rgba(var(--c-text-rgb), 0.05); line-height: 1; }
  @keyframes jpCorePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
  @keyframes jpPing { 75%, 100% { transform: scale(2); opacity: 0; } }

  /* ============== Cinematic Footer ============== */
  .cinematic-footer-wrapper {
    --foreground: var(--c-text);
    --background: var(--c-bg);
    --primary: var(--c-accent);
    --secondary: var(--c-mid);
    --muted-foreground: var(--c-muted);
    --border: rgba(var(--c-text-rgb), 0.08);
    --destructive: #E5524A;
    --pill-bg-1: rgba(var(--c-text-rgb), 0.03);
    --pill-bg-2: rgba(var(--c-text-rgb), 0.01);
    --pill-shadow: rgba(0,0,0,0.5);
    --pill-highlight: rgba(var(--c-text-rgb), 0.10);
    --pill-inset-shadow: rgba(0,0,0,0.8);
    --pill-border: rgba(var(--c-text-rgb), 0.08);
    --pill-bg-1-hover: rgba(var(--c-text-rgb), 0.08);
    --pill-bg-2-hover: rgba(var(--c-text-rgb), 0.02);
    --pill-border-hover: rgba(var(--c-text-rgb), 0.2);
    --pill-shadow-hover: rgba(0,0,0,0.7);
    --pill-highlight-hover: rgba(var(--c-text-rgb), 0.2);
  }
  @keyframes footer-breathe {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
    100% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
  }
  @keyframes footer-scroll-marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }
  @keyframes footer-heartbeat {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 5px rgba(229,82,74,0.5)); }
    15%, 45% { transform: scale(1.2); filter: drop-shadow(0 0 10px rgba(229,82,74,0.8)); }
    30% { transform: scale(1); }
  }
  .animate-footer-breathe { animation: footer-breathe 8s ease-in-out infinite alternate; }
  .animate-footer-scroll-marquee { animation: footer-scroll-marquee 40s linear infinite; }
  .animate-footer-heartbeat { animation: footer-heartbeat 2s cubic-bezier(0.25,1,0.5,1) infinite; display: inline-block; }
  /* Contact section is clipped out of view -> stop animating it entirely. */
  .footer-idle .animate-footer-breathe,
  .footer-idle .animate-footer-scroll-marquee,
  .footer-idle .animate-footer-heartbeat { animation-play-state: paused; }
  .footer-idle .footer-aurora { filter: none !important; opacity: 0; }
  .footer-bg-grid {
    background-size: 60px 60px;
    background-image:
      linear-gradient(to right, rgba(var(--c-text-rgb), 0.03) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(var(--c-text-rgb), 0.03) 1px, transparent 1px);
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 30%, black 70%, transparent);
            mask-image: linear-gradient(to bottom, transparent, black 30%, black 70%, transparent);
  }
  .footer-aurora {
    background: radial-gradient(circle at 50% 50%, rgba(var(--c-accent-rgb), 0.15) 0%, rgba(100,105,115,0.15) 40%, transparent 70%);
  }
  .footer-glass-pill {
    background: linear-gradient(145deg, var(--pill-bg-1) 0%, var(--pill-bg-2) 100%);
    box-shadow: 0 10px 30px -10px var(--pill-shadow), inset 0 1px 1px var(--pill-highlight), inset 0 -1px 2px var(--pill-inset-shadow);
    border: 1px solid var(--pill-border);
    -webkit-backdrop-filter: blur(16px);
            backdrop-filter: blur(16px);
    transition: all 0.4s cubic-bezier(0.16,1,0.3,1);
    will-change: transform;
  }
  .footer-glass-pill:hover {
    background: linear-gradient(145deg, var(--pill-bg-1-hover) 0%, var(--pill-bg-2-hover) 100%);
    border-color: var(--pill-border-hover);
    box-shadow: 0 20px 40px -10px var(--pill-shadow-hover), inset 0 1px 1px var(--pill-highlight-hover);
    color: var(--foreground);
  }
  .footer-giant-bg-text {
    font-size: 26vw;
    line-height: 0.75;
    font-weight: 900;
    letter-spacing: -0.05em;
    color: transparent;
    -webkit-text-stroke: 1px rgba(var(--c-text-rgb), 0.05);
    background: linear-gradient(180deg, rgba(var(--c-text-rgb), 0.10) 0%, transparent 60%);
    -webkit-background-clip: text;
            background-clip: text;
  }
  .footer-text-glow {
    background: linear-gradient(180deg, var(--c-text) 0%, rgba(var(--c-text-rgb), 0.4) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 20px rgba(var(--c-text-rgb), 0.15));
  }

  /* Language pill — sits beside the theme toggle in both languages. */
  .jp-lang-toggle {
    text-decoration: none;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1;
  }
  /* Pre-hydration / no-JS card. React clears #root when it mounts. */
  .seo-fallback { max-width: 720px; margin: 0 auto; padding: 18vh 24px 10vh; }
  .seo-fallback h1 { font-size: clamp(2rem, 7vw, 3.6rem); font-weight: 900; line-height: 1.1; margin-bottom: 12px; }
  .seo-fallback h2 { font-size: 1rem; font-weight: 500; color: var(--c-accent); margin-bottom: 20px; }
  .seo-fallback p { font-weight: 300; line-height: 1.9; color: var(--c-muted); margin-bottom: 14px; }
  .seo-fallback a { color: var(--c-text); }
  .seo-fallback ul { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 18px; font-size: 0.8rem; color: var(--c-muted); }