:root {
  --bg: #050708;
  --panel: #080b0d;
  --text: #f4f6f8;
  --muted: #b4bdc5;
  --cyan: #13c9e8;
  --blue: #4d72ff;
  --line: rgba(255,255,255,.12);
  --header-h: 82px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { display:block; max-width:100%; }

.site-header {
  position: fixed; z-index: 30; inset: 0 0 auto 0; height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(22px, 4vw, 72px);
  background: linear-gradient(180deg, rgba(3,5,7,.78), rgba(3,5,7,0));
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
}
.brand { width: 106px; height: 32px; overflow: hidden; display:flex; align-items:center; }
.brand img { width: 100%; object-fit: contain; }
.nav { display:flex; align-items:center; gap: clamp(18px, 2.4vw, 38px); font-size: 14px; font-weight: 650; }
.nav > a:not(.pill) { opacity:.9; transition:.2s ease; }
.nav > a:not(.pill):hover { opacity:1; color:var(--cyan); }
.pill { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:46px; padding:0 22px; border-radius:999px; font-size:14px; font-weight:750; transition: transform .2s ease, background .2s ease; }
.pill:hover { transform: translateY(-2px); }
.pill--light { background:#f5f5f2; color:#0a0c0e; }

.hero { position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden; border-bottom:1px solid var(--line); }
.hero__media { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.hero__shade { position:absolute; inset:0; background: linear-gradient(90deg, rgba(3,5,7,.98) 0%, rgba(3,5,7,.88) 24%, rgba(3,5,7,.38) 48%, rgba(3,5,7,.08) 72%), linear-gradient(0deg, rgba(3,5,7,.25), rgba(3,5,7,.05)); }
.hero__content { position:relative; z-index:2; width:min(610px, 48vw); margin-left:clamp(26px, 4.4vw, 84px); padding-top:var(--header-h); }
.eyebrow { margin:0 0 22px; color:var(--cyan); font-size:13px; line-height:1; letter-spacing:.22em; font-weight:750; }
.hero h1, .experience h2, .contact h2 { margin:0; font-size:clamp(58px, 7.2vw, 132px); line-height:.87; letter-spacing:-.055em; font-weight:900; }
.hero h1 span, .experience h2 span, .contact h2 span { color:var(--cyan); }
.hero__copy { max-width:450px; margin:28px 0 28px; color:#d7dde2; font-size:clamp(17px, 1.3vw, 22px); line-height:1.42; }

.experience { min-height:72svh; display:grid; grid-template-columns:minmax(300px, 31%) 1fr; border-bottom:1px solid var(--line); background:var(--panel); overflow:hidden; }
.experience__copy { display:flex; flex-direction:column; justify-content:center; padding:clamp(54px, 7vw, 110px) clamp(28px, 4.4vw, 78px); background: linear-gradient(135deg, #06090b 0%, #050708 68%, #071017 100%); position:relative; z-index:2; }
.experience__copy::after { content:""; position:absolute; top:0; right:-60px; width:120px; height:100%; background:linear-gradient(90deg, rgba(5,7,8,1), rgba(5,7,8,0)); pointer-events:none; }
.experience h2 { font-size:clamp(58px, 6.4vw, 112px); }
.experience .lead { margin:20px 0 10px; font-size:clamp(24px, 2vw, 34px); color:#fff; }
.experience__copy > p:last-child { max-width:390px; margin:0; color:var(--muted); font-size:clamp(16px, 1.15vw, 20px); line-height:1.5; }
.experience__media { margin:0; min-height:100%; position:relative; overflow:hidden; }
.experience__media::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(5,7,8,.18), transparent 18%); pointer-events:none; }
.experience__media img { width:100%; height:100%; min-height:72svh; object-fit:cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.experience:hover .experience__media img { transform:scale(1.025); }
.experience--look .experience__media img { object-position:center; }
.experience--touch .experience__media img { object-position:center; }
.experience--play .experience__media img { object-position:center; }
.experience--imagine .experience__media img { object-position:center; }

.contact { min-height:64svh; display:grid; grid-template-columns: 1.15fr .85fr; align-items:center; gap:70px; padding:clamp(70px, 8vw, 130px) clamp(28px, 4.4vw, 84px); background: radial-gradient(circle at 72% 42%, rgba(19,201,232,.10), transparent 32%), linear-gradient(125deg, #050708 0 58%, #07141b 58% 100%); }
.contact h2 { font-size:clamp(58px, 6.5vw, 116px); }
.contact__main > p:not(.eyebrow) { font-size:clamp(24px,2vw,36px); margin:24px 0 30px; }
.contact__services { display:grid; gap:25px; }
.contact__services > div { display:grid; grid-template-columns:46px 1fr; gap:18px; align-items:center; padding:18px 0; border-bottom:1px solid var(--line); }
.service-icon { width:42px; height:42px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.26); border-radius:12px; font-size:22px; color:var(--cyan); }
.contact__services p { margin:0; display:grid; gap:4px; }
.contact__services strong { font-size:13px; letter-spacing:.025em; }
.contact__services small { color:var(--muted); font-size:13px; }
.footer { min-height:92px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px clamp(28px,4.4vw,84px); border-top:1px solid var(--line); background:#040607; }
.footer > img { width:94px; }
.instagram { display:inline-flex; align-items:center; gap:12px; font-size:14px; font-weight:650; }
.instagram__icon { width:34px; height:34px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.35); border-radius:10px; font-size:20px; }
.instagram:hover { color:var(--cyan); }

.reveal { opacity:0; transform:translateY(24px); transition: opacity .75s ease, transform .75s ease; }
.reveal.is-visible { opacity:1; transform:none; }

@media (max-width: 900px) {
  :root { --header-h: 68px; }
  .site-header { padding:0 18px; }
  .brand { width:82px; }
  .nav { gap:14px; font-size:12px; }
  .nav > a:first-child { display:none; }
  .pill { min-height:40px; padding:0 16px; font-size:12px; }
  .hero { min-height:92svh; align-items:flex-end; }
  .hero__media { object-position:67% center; }
  .hero__shade { background:linear-gradient(0deg, rgba(3,5,7,.98) 0%, rgba(3,5,7,.74) 44%, rgba(3,5,7,.12) 77%); }
  .hero__content { width:auto; margin:0; padding:0 22px 58px; }
  .hero h1 { font-size:clamp(54px, 15vw, 86px); }
  .hero__copy { font-size:17px; }
  .experience { min-height:auto; grid-template-columns:1fr; }
  .experience__copy { min-height:430px; padding:66px 22px 44px; }
  .experience__copy::after { display:none; }
  .experience h2 { font-size:clamp(58px,15vw,84px); }
  .experience__media img { min-height:55svh; height:55svh; }
  .contact { grid-template-columns:1fr; min-height:auto; padding:76px 22px 60px; gap:56px; }
  .contact h2 { font-size:clamp(54px,14vw,84px); }
  .footer { flex-direction:column; align-items:flex-start; padding:30px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .reveal { opacity:1; transform:none; transition:none; }
  .experience__media img { transition:none; }
}


.contact__details {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: .65rem 1.2rem;
  font-size: .9rem;
}
.contact__details a {
  color: rgba(255,255,255,.72);
  text-decoration: none;
  transition: color .2s ease;
}
.contact__details a:hover { color: #38d9ff; }