@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;450;500;600;700&family=Playfair+Display:wght@500;600&display=swap');

:root {
  --bg: #050607;
  --bg-soft: #0a0c0f;
  --text: #f2f4f7;
  --muted: rgba(236, 242, 248, 0.62);
  --line: rgba(255,255,255,0.13);
  --blue: #8fd3ff;
  --blue-bright: #b9fbc0;
  --mint: #b9fbc0;
  --safe-top: max(24px, env(safe-area-inset-top));
  --safe-right: max(24px, env(safe-area-inset-right));
  --safe-bottom: max(24px, env(safe-area-inset-bottom));
  --safe-left: max(24px, env(safe-area-inset-left));
  --font: Inter, system-ui, sans-serif;
  --display: "Playfair Display", Georgia, serif;
  --video-x: 50%;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
button, a { font: inherit; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
::selection { background: rgba(185,251,192,.28); }

.loading {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-content: center; gap: 22px;
  background: #050607;
  transition: opacity .8s ease, visibility .8s ease;
}
.loading.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.loading__mark { text-align:center; font-size: clamp(42px, 7vw, 74px); font-weight: 700; letter-spacing: -.08em; }
.loading__mark span { color: var(--mint); text-shadow:0 0 28px rgba(185,251,192,.38); }
.brand span { color: var(--blue); }
.loading__line { width: min(240px, 60vw); height: 1px; background: rgba(255,255,255,.16); overflow: hidden; }
.loading__line i { display:block; height:100%; width: 12%; background: linear-gradient(90deg, rgba(185,251,192,.42), var(--mint)); box-shadow:0 0 20px rgba(185,251,192,.28); transition: width .25s ease; }
.loading p { margin:0; color: var(--muted); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; text-align:center; }

.site-header {
  position: fixed; z-index: 80; top: var(--safe-top); left: var(--safe-left); right: var(--safe-right);
  display: flex; justify-content: space-between; align-items: flex-start;
  pointer-events: none;
  mix-blend-mode: screen;
}
.brand {
  pointer-events:auto;
  font-weight:560;
  font-size:14px;
  letter-spacing:.01em;
  line-height:1;
  color:rgba(242,246,250,.88);
}
.header-meta { display: grid; gap: 4px; text-align: right; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.66); }

.menu-button {
  position: fixed; right: var(--safe-right); bottom: var(--safe-bottom); z-index: 90;
  width: 78px; height: 78px; padding: 0; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.2); background: rgba(8,10,12,.48); backdrop-filter: blur(18px);
  display: grid; place-content:center; gap: 5px; cursor:pointer;
  transition: transform .3s ease, background .3s ease;
}
.menu-button:hover { transform: scale(1.05); background: rgba(18,22,27,.78); }
.menu-button span { display:block; width: 20px; height: 1px; background: #fff; }

.scroll-tuner {
  position:fixed;
  z-index:88;
  left:var(--safe-left);
  bottom:var(--safe-bottom);
  width:min(280px, calc(100vw - 120px));
  color:rgba(242,246,250,.82);
  font-size:11px;
}
.scroll-tuner__toggle {
  min-height:38px;
  padding:0 14px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  background:rgba(8,10,12,.52);
  backdrop-filter:blur(16px);
  cursor:pointer;
}
.scroll-tuner__panel {
  display:none;
  margin-top:10px;
  padding:14px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:20px;
  background:rgba(5,7,10,.78);
  box-shadow:0 18px 48px rgba(0,0,0,.42);
  backdrop-filter:blur(18px);
}
.scroll-tuner.is-open .scroll-tuner__panel { display:grid; gap:12px; }
.scroll-tuner label { display:grid; gap:7px; }
.scroll-tuner label span { display:flex; justify-content:space-between; gap:12px; color:rgba(242,246,250,.68); }
.scroll-tuner b { color:var(--blue-bright); font-weight:600; }
.scroll-tuner input { width:100%; accent-color:var(--mint); }
.scroll-tuner p { margin:2px 0 0; color:rgba(242,246,250,.52); line-height:1.5; }

.menu-panel {
  position: fixed; inset: 0 0 0 auto; z-index: 100; width: min(560px, 100%);
  padding: 100px clamp(28px, 6vw, 74px) 50px;
  background: rgba(5,6,7,.96); backdrop-filter: blur(28px);
  transform: translateX(100%); transition: transform .55s cubic-bezier(.22,.8,.24,1);
  border-left: 1px solid var(--line); display:flex; flex-direction:column; justify-content:space-between;
}
.menu-panel.is-open { transform: translateX(0); }
.menu-panel__close { position:absolute; top:28px; right:32px; background:none; border:0; font-size:32px; cursor:pointer; }
.menu-panel nav { display:grid; }
.menu-panel nav a { display:flex; align-items:baseline; gap:22px; padding: 18px 0; border-bottom:1px solid var(--line); font-size:clamp(28px,5vw,58px); letter-spacing:-.05em; }
.menu-panel nav a small { width:28px; font-size:10px; color:var(--blue-bright); letter-spacing:.14em; }
.menu-panel > p { max-width:380px; color:var(--muted); line-height:1.7; }

.story { position: relative; height: 340vh; background:#020304; }
.stage { position: sticky; top:0; height:100svh; overflow:hidden; background:#050607; }
.story-video { position:absolute; inset:0; width:100%; height:100%; }
.story-video { z-index:1; object-fit:cover; object-position:var(--video-x, 50%) center; opacity:0; transition:opacity .8s ease; background:#050607; will-change:opacity; transform:translateZ(0); }
.story-video.is-ready { opacity:1; }
.stage::after {
  content:"";
  position:absolute;
  z-index:2;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 62% 44%, rgba(185,251,192,.15), transparent 22%),
    radial-gradient(circle at 52% 48%, rgba(143,211,255,.08), transparent 30%),
    linear-gradient(135deg, rgba(143,211,255,.03), rgba(185,251,192,.05));
  mix-blend-mode:screen;
  opacity:.78;
}
.cinematic-vignette {
  position:absolute; z-index:2; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(2,3,5,.58) 0%, rgba(2,3,5,.16) 38%, rgba(2,3,5,.02) 65%, rgba(2,3,5,.18) 100%),
    linear-gradient(180deg, rgba(0,0,0,.16), transparent 28%, transparent 72%, rgba(0,0,0,.34));
}
.film-grain { position:absolute; z-index:3; inset:0; pointer-events:none; opacity:.035; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.72'/%3E%3C/svg%3E"); }
@keyframes grain { 0%{transform:translate(0,0)} 25%{transform:translate(3%,-4%)} 50%{transform:translate(-4%,2%)} 75%{transform:translate(5%,4%)} 100%{transform:translate(-2%,-5%)} }

.chapter-card {
  --card-opacity: 0;
  --card-y: 34px;
  position:absolute; z-index:5; top:50%; left:max(12vw, var(--safe-left));
  width:min(650px, 56vw); transform:translateY(calc(-50% + var(--card-y)));
  opacity:var(--card-opacity); pointer-events:none;
  text-shadow:0 2px 28px rgba(0,0,0,.72);
  transition:filter .12s linear;
}
.chapter-card--hero {
  --card-opacity: 1;
  --card-y: 0px;
}
.chapter-card[data-align="right"] { left:auto; right:max(12vw, var(--safe-right)); text-align:right; }
.chapter-card[data-align="center"] { left:50%; width:min(760px,80vw); text-align:center; transform:translate(-50%, calc(-50% + var(--card-y))); }
.chapter-card.is-interactive { pointer-events:auto; }
.eyebrow, .chapter-index { margin:0 0 18px; color:var(--blue-bright); font-size:10px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; }
.chapter-card h1, .chapter-card h2, .section-heading h2, .closing h2 {
  margin:0; font-family:var(--display); font-weight:540; letter-spacing:-.035em; line-height:.98; text-wrap:balance;
}
.chapter-card h1 { font-size:clamp(36px, 5vw, 72px); }
.chapter-card h2 { font-size:clamp(34px, 4.4vw, 64px); }
.chapter-card > p:not(.eyebrow):not(.chapter-index) { max-width:600px; margin:24px 0 0; color:rgba(242,246,250,.72); font-size:clamp(15px,1.45vw,21px); line-height:1.58; text-wrap:balance; }
.chapter-card[data-align="right"] > p { margin-left:auto !important; }
.chapter-card--center h2 { font-weight:600; font-size:clamp(56px,9vw,118px); letter-spacing:-.055em; }
.chapter-card--center h2 span { color:var(--mint); font-weight:800; text-shadow:0 0 32px rgba(185,251,192,.35); }
.chapter-card--center > p { margin-left:auto !important; margin-right:auto !important; }
.chapter-card--hero .lead { max-width:650px !important; }
.actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
.micro-list { display:flex; flex-wrap:wrap; gap:9px; margin-top:24px; max-width:620px; }
.chapter-card[data-align="right"] .micro-list { justify-content:flex-end; margin-left:auto; }
.micro-list--center { justify-content:center; margin-left:auto; margin-right:auto; }
.micro-list span {
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  padding:8px 11px;
  color:rgba(242,246,250,.74);
  background:rgba(5,7,10,.22);
  backdrop-filter:blur(10px);
  font-size:11px;
  letter-spacing:.04em;
}
.button { display:inline-flex; justify-content:center; align-items:center; min-height:48px; padding:0 22px; border:1px solid rgba(255,255,255,.25); border-radius:999px; cursor:pointer; transition:transform .25s ease, background .25s ease, border-color .25s ease; }
.button:hover { transform:translateY(-2px); }
.button--solid { background:linear-gradient(135deg,#eaf7ff,#c7ffd0); color:#07111f; border-color:transparent; }
.button--ghost { background:rgba(8,10,12,.3); color:#fff; backdrop-filter:blur(12px); }
.button--ghost:hover { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.45); }
.button--universe {
  --portal-angle:0deg;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border:1px solid transparent;
  background:linear-gradient(135deg,rgba(11,18,29,.96),rgba(16,27,42,.96)) padding-box,conic-gradient(from var(--portal-angle),#8fd3ff,#b9fbc0,#ffd6a5,#c8b6ff,#8fd3ff) border-box;
  color:#f2f6fa;
  box-shadow:0 2px 8px rgba(0,0,0,.32),0 0 0 1px rgba(143,211,255,.05);
  animation:portalSpectrum 12s linear infinite,portalBreathe 4.8s ease-in-out infinite;
}
.button--universe:before {
  content:"";
  position:absolute;
  inset:-30% auto -30% -55%;
  width:34%;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
  transform:skewX(-18deg) translateX(-220%);
  animation:portalSweep 7s cubic-bezier(.22,1,.36,1) infinite;
}
.button--universe:after {
  content:"";
  flex:0 0 auto;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#dffcff;
  box-shadow:0 0 0 4px rgba(143,211,255,.1),0 0 12px rgba(143,211,255,.8);
  animation:portalOrb 3.2s ease-in-out infinite;
}
.button--universe:hover {
  transform:translateY(-2px) scale(1.012);
  background:linear-gradient(135deg,rgba(14,24,39,.98),rgba(20,34,52,.98)) padding-box,conic-gradient(from var(--portal-angle),#8fd3ff,#b9fbc0,#ffd6a5,#c8b6ff,#8fd3ff) border-box;
  box-shadow:0 4px 8px rgba(0,0,0,.34),0 0 0 1px rgba(143,211,255,.12);
}
@keyframes portalSpectrum { to { --portal-angle:360deg; } }
@keyframes portalSweep { 0%,58%{transform:skewX(-18deg) translateX(-220%);opacity:0} 66%{opacity:.8} 82%,100%{transform:skewX(-18deg) translateX(520%);opacity:0} }
@keyframes portalBreathe { 0%,100%{filter:saturate(1)} 50%{filter:saturate(1.12)} }
@keyframes portalOrb { 0%,100%{transform:scale(.88);opacity:.78} 50%{transform:scale(1.1);opacity:1} }
.story-social { display:flex; align-items:center; flex-wrap:wrap; gap:7px; margin-top:34px; }
.story-social a { display:grid; width:40px; height:40px; place-items:center; border:1px solid rgba(255,255,255,.18); border-radius:14px; color:rgba(242,246,250,.64); background:rgba(8,10,12,.28); backdrop-filter:blur(12px); transition:color .2s ease,background-color .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease; }
.story-social svg { width:18px; height:18px; fill:currentColor; }
.story-social a:hover { color:var(--mint); background:rgba(185,251,192,.08); border-color:rgba(185,251,192,.28); box-shadow:0 8px 24px rgba(0,0,0,.22),0 0 18px rgba(185,251,192,.08); transform:translateY(-2px); }
.story-social a:focus-visible { outline:2px solid var(--mint); outline-offset:3px; }

.scroll-hint { position:absolute; z-index:6; left:50%; bottom:38px; transform:translateX(-50%); display:grid; justify-items:center; gap:10px; color:rgba(255,255,255,.62); font-size:9px; letter-spacing:.16em; text-transform:uppercase; transition:opacity .5s ease; }
.scroll-hint i { display:block; width:1px; height:34px; background:linear-gradient(to bottom, #fff, transparent); animation:scrollLine 1.8s ease-in-out infinite; transform-origin:top; }
@keyframes scrollLine { 0%,100%{transform:scaleY(.25);opacity:.3} 50%{transform:scaleY(1);opacity:1} }
.progress-rail { position:absolute; z-index:6; right:33px; top:50%; width:1px; height:30vh; background:rgba(255,255,255,.16); transform:translateY(-50%); }
.progress-rail span { position:absolute; inset:0 0 auto; height:var(--progress,0%); background:linear-gradient(to bottom, var(--blue), var(--mint)); box-shadow:0 0 18px rgba(185,251,192,.32); }
.progress-rail b { position:absolute; top:calc(var(--progress,0%) - 4px); right:12px; font-size:9px; font-weight:500; letter-spacing:.14em; }

.section { position:relative; padding:clamp(100px,12vw,180px) max(6vw, var(--safe-left)); background:var(--bg); }
.section-heading { max-width:1000px; }
.section-heading h2, .closing h2 { font-size:clamp(50px,8vw,118px); }
.work { border-top:1px solid var(--line); }
.project-grid { margin-top:clamp(70px,9vw,130px); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
.project-card { position:relative; padding:18px 18px 32px; min-height:640px; background:#07090b; overflow:hidden; outline:none; transition:background .35s ease; }
.project-card:hover, .project-card:focus-visible { background:#0b0e12; }
.project-card__visual { height:320px; display:grid; place-content:center; overflow:hidden; margin-bottom:26px; border:1px solid rgba(255,255,255,.08); }
.project-card__visual span { position:relative; z-index:2; font-size:clamp(44px,6vw,90px); font-weight:700; line-height:.78; letter-spacing:-.09em; }
.project-card__visual--orb { background:radial-gradient(circle, rgba(65,150,255,.82) 0, rgba(16,79,160,.34) 21%, rgba(5,10,18,.15) 44%), linear-gradient(145deg,#080b10,#020304); }
.project-card__visual--orb::after { content:""; position:absolute; top:90px; left:50%; width:180px; height:180px; border:1px solid rgba(122,190,255,.42); border-radius:50%; transform:translateX(-50%); box-shadow:0 0 60px rgba(68,145,255,.3), inset 0 0 40px rgba(68,145,255,.18); }
.project-card__visual--shells { background:radial-gradient(circle at 30% 20%,rgba(255,213,231,.32),transparent 35%), linear-gradient(145deg,#251821,#080608); }
.project-card__visual--wake { background:radial-gradient(circle at 70% 20%,rgba(134,106,255,.28),transparent 35%), linear-gradient(145deg,#111026,#050507); }
.project-card__meta { display:flex; justify-content:space-between; gap:20px; color:var(--muted); font-size:9px; letter-spacing:.14em; text-transform:uppercase; }
.project-card h3 { margin:32px 0 16px; font-size:clamp(32px,4vw,55px); letter-spacing:-.055em; }
.project-card p { margin:0; color:var(--muted); line-height:1.65; }
.text-link { margin-top:30px; padding:0; border:0; background:none; cursor:pointer; font-weight:600; }
.text-link span { color:var(--blue-bright); }

.about { background:#e9ecef; color:#080a0d; }
.about .eyebrow { color:#315c8c; }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:8vw; align-items:start; }
.about-copy { padding-top:10px; }
.about-copy p { color:rgba(8,10,13,.65); font-size:17px; line-height:1.75; }
.about-copy .large { margin-top:0; color:#080a0d; font-size:clamp(26px,3.2vw,48px); line-height:1.22; letter-spacing:-.04em; }
.capabilities { display:flex; flex-wrap:wrap; gap:10px; margin-top:36px; }
.capabilities span { padding:10px 14px; border:1px solid currentColor; border-radius:999px; font-size:11px; letter-spacing:.04em; }

.closing { min-height:100svh; display:flex; flex-direction:column; justify-content:center; overflow:hidden; }
.closing__image { position:absolute; inset:0; background:linear-gradient(90deg,rgba(3,4,5,.95),rgba(3,4,5,.32) 58%,rgba(3,4,5,.12)); opacity:.82; }
.closing__content { position:relative; z-index:2; max-width:920px; }
.copy-status { min-height:22px; color:var(--blue-bright); font-size:12px; }
footer { position:absolute; z-index:2; left:max(6vw,var(--safe-left)); right:max(6vw,var(--safe-right)); bottom:max(32px,var(--safe-bottom)); display:flex; justify-content:space-between; align-items:center; color:var(--muted); font-size:11px; }

.project-dialog { width:min(700px,calc(100% - 32px)); border:1px solid var(--line); border-radius:0; padding:clamp(30px,6vw,72px); color:var(--text); background:rgba(6,8,10,.96); backdrop-filter:blur(22px); box-shadow:0 30px 120px rgba(0,0,0,.72); }
.project-dialog::backdrop { background:rgba(0,0,0,.72); backdrop-filter:blur(6px); }
.project-dialog h2 { margin:0 0 24px; font-size:clamp(48px,8vw,92px); letter-spacing:-.07em; }
.project-dialog > p:not(.eyebrow) { color:var(--muted); font-size:18px; line-height:1.7; }
.project-dialog__close { position:absolute; top:18px; right:20px; border:0; background:none; font-size:32px; cursor:pointer; }

.reveal { opacity:0; transform:translateY(32px); transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible { opacity:1; transform:none; }

@media (max-width: 900px) {
  .header-meta { display:none; }
  .story { height:330vh; }
  .cinematic-vignette { background:linear-gradient(0deg,rgba(2,3,5,.74) 0%,rgba(2,3,5,.16) 52%,rgba(2,3,5,.14) 100%); }
  .chapter-card, .chapter-card[data-align="right"], .chapter-card[data-align="center"] {
    top:auto; bottom:88px; left:var(--safe-left); right:var(--safe-right); width:auto; text-align:left;
    transform:translateY(var(--card-y));
  }
  .chapter-card h1 { font-size:clamp(34px,11vw,58px); }
  .chapter-card h2 { font-size:clamp(32px,9vw,54px); }
  .chapter-card--center h2 { font-size:clamp(48px,16vw,86px); }
  .chapter-card[data-align="right"] > p, .chapter-card--center > p { margin-left:0 !important; margin-right:0 !important; }
  .chapter-card > p:not(.eyebrow):not(.chapter-index) { font-size:15px; max-width:520px; }
  .chapter-card[data-align="right"] .micro-list, .micro-list--center { justify-content:flex-start; margin-left:0; margin-right:0; }
  .progress-rail { display:none; }
  .scroll-hint { left:auto; right:var(--safe-right); transform:none; }
  .project-grid { grid-template-columns:1fr; }
  .project-card { min-height:580px; }
  .about-grid { grid-template-columns:1fr; }
  footer { align-items:flex-end; }
  footer p { display:none; }
}

@media (max-width: 560px) {
  .site-header { top:20px; }
  .menu-button { width:64px; height:64px; }
  .scroll-tuner { width:min(250px, calc(100vw - 110px)); }
  .chapter-card { bottom:86px; }
  .chapter-card--hero .lead { max-width:330px !important; }
  .actions { gap:8px; margin-top:24px; }
  .button { min-height:43px; padding:0 17px; font-size:13px; }
  .section { padding-top:100px; padding-bottom:100px; }
  .project-card__visual { height:260px; }
  .closing__image { background-position:64% center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .film-grain, .scroll-hint i { animation:none; }
  *, *::before, *::after { transition-duration:.01ms !important; }
}