:root {
  --bg: #0b0c0e;
  --bg-2: #111316;
  --surface: #14171b;
  --text: #f2f1ec;
  --muted: #9a9da3;
  --line: rgba(255,255,255,.12);
  --line-strong: rgba(255,255,255,.2);
  --soft: rgba(255,255,255,.035);
  --ease: cubic-bezier(.2,.8,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --max: 1440px;
  --pad: clamp(22px, 5vw, 78px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0;
  background:
    radial-gradient(1000px 700px at 80% -10%, rgba(96,112,139,.09), transparent 60%),
    var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
::selection { background: rgba(236,239,244,.92); color: #0b0c0e; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }

.noise {
  position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: .032;
  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='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
.spotlight {
  position: fixed; width: 540px; height: 540px; left: -270px; top: -270px; z-index: 0; pointer-events: none;
  border-radius: 50%; opacity: .18; filter: blur(10px);
  background: radial-gradient(circle, rgba(189,202,226,.18) 0%, rgba(131,151,182,.06) 35%, transparent 70%);
  transform: translate3d(var(--mx, -500px), var(--my, -500px), 0);
  transition: opacity .35s ease;
}

.boot { position: fixed; inset: 0; z-index: 999; display: grid; place-items: center; background: #090a0c; transition: opacity .8s var(--ease), visibility .8s; }
.boot.hide { opacity: 0; visibility: hidden; }
.boot-mark { font-size: clamp(34px, 7vw, 70px); font-weight: 650; letter-spacing: -.07em; }
.boot-line { position: absolute; bottom: 13%; width: min(320px, 58vw); height: 1px; background: rgba(255,255,255,.12); overflow: hidden; }
.boot-line span { display: block; width: 100%; height: 100%; background: #f1f1ee; transform: translateX(-100%); animation: bootline 1.1s var(--ease-out) forwards; }
@keyframes bootline { to { transform: translateX(0); } }

.site-header {
  position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 80;
  width: calc(100% - 36px); max-width: var(--max); height: 58px; padding: 0 18px;
  display: flex; align-items: center; justify-content: space-between;
  border: 1px solid transparent; border-radius: 12px;
  transition: background .35s ease, border-color .35s ease, backdrop-filter .35s ease, top .35s ease;
}
.site-header.scrolled { top: 12px; background: rgba(13,15,18,.72); border-color: var(--line); backdrop-filter: blur(18px) saturate(130%); }
.brand { display: inline-flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 600; }
.brand-mark { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--line-strong); border-radius: 50%; letter-spacing: -.05em; }
.brand-name { color: #e7e7e2; }
.desktop-nav { display: flex; gap: clamp(22px, 3vw, 44px); }
.desktop-nav a, .footer-nav a { position: relative; font-size: 12px; color: #c4c6c9; }
.desktop-nav a::after, .footer-nav a::after { content:""; position:absolute; left:0; right:100%; bottom:-6px; height:1px; background:#f4f2ed; transition:right .35s var(--ease); }
.desktop-nav a:hover::after, .footer-nav a:hover::after { right:0; }
.menu-toggle { display:none; width:38px; height:38px; padding:0; border:0; background:transparent; color:white; cursor:pointer; }
.menu-toggle span { display:block; width:21px; height:1px; margin:6px auto; background:currentColor; transition: transform .4s var(--ease), opacity .3s; }
.menu-toggle.open span:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-toggle.open span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.mobile-menu { position:fixed; inset:0; z-index:70; background:rgba(9,10,12,.97); visibility:hidden; opacity:0; transition:.45s var(--ease); }
.mobile-menu.open { visibility:visible; opacity:1; }
.mobile-menu-inner { min-height:100%; display:flex; flex-direction:column; justify-content:center; padding:110px var(--pad) 50px; }
.mobile-menu a { display:flex; justify-content:space-between; align-items:baseline; padding:18px 0; border-bottom:1px solid var(--line); font-size:clamp(42px,12vw,70px); letter-spacing:-.055em; transform:translateY(22px); opacity:0; transition:.45s var(--ease-out); }
.mobile-menu.open a { transform:none; opacity:1; }
.mobile-menu.open a:nth-child(2){transition-delay:.05s}.mobile-menu.open a:nth-child(3){transition-delay:.1s}.mobile-menu.open a:nth-child(4){transition-delay:.15s}
.mobile-menu a span { font-size:12px; letter-spacing:0; color:var(--muted); }

.section-pad { width:100%; max-width:var(--max); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }
.eyebrow { margin:0; color:#aeb2b8; font-size:11px; line-height:1.3; letter-spacing:.18em; text-transform:uppercase; }

.hero { position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding-top:120px; padding-bottom:58px; overflow:hidden; }
.hero-ambient { position:absolute; pointer-events:none; width:62vw; height:62vw; max-width:900px; max-height:900px; border-radius:50%; filter:blur(34px); opacity:.5; }
.ambient-a { right:-32vw; top:1vh; background:radial-gradient(circle, rgba(111,132,166,.14), rgba(72,85,107,.045) 42%, transparent 70%); }
.hero-meta { position:absolute; top:110px; left:var(--pad); right:var(--pad); display:flex; justify-content:space-between; color:#777b82; font-size:10px; text-transform:uppercase; letter-spacing:.15em; }
.hero-copy { position:relative; z-index:1; }
.hero-copy > .eyebrow { margin-bottom:clamp(22px,4vh,44px); }
.hero-title { margin:0; max-width:1220px; font-size:clamp(58px,10.4vw,160px); line-height:.82; letter-spacing:-.075em; font-weight:600; }
.title-line { display:block; overflow:hidden; padding:0 .06em .12em 0; }
.title-line > span { display:block; transform:translateY(115%); filter:blur(12px); animation:titleIn 1.15s var(--ease-out) forwards; }
.title-line:nth-child(2) > span { animation-delay:.08s; }
.title-line:nth-child(3) > span { animation-delay:.16s; }
.title-line-accent { color:#9da7b7; font-weight:400; }
@keyframes titleIn { to { transform:translateY(0); filter:blur(0); } }
.hero-bottom { margin-top:clamp(34px,6vh,72px); display:grid; grid-template-columns:minmax(260px, 520px) auto; gap:48px; align-items:end; }
.hero-bottom p { margin:0; color:#b4b6ba; font-size:clamp(15px,1.45vw,20px); line-height:1.65; }
.hero-actions { display:flex; gap:10px; justify-content:flex-end; }
.button { min-height:48px; display:inline-flex; align-items:center; justify-content:center; gap:26px; padding:0 18px; border-radius:8px; font-size:12px; transition:transform .3s var(--ease), background .3s, border-color .3s; }
.button-solid { background:#f0efea; color:#111215; }
.button-solid:hover { background:#fff; }
.button-ghost { border:1px solid var(--line-strong); color:#e2e2de; }
.button-ghost:hover { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.36); }
.scroll-cue { position:absolute; right:var(--pad); bottom:38px; display:flex; align-items:center; gap:12px; color:#686c72; font-size:10px; text-transform:uppercase; letter-spacing:.15em; }
.scroll-cue i { width:52px; height:1px; background:var(--line); position:relative; overflow:hidden; }
.scroll-cue i::after { content:""; position:absolute; width:50%; height:100%; background:#e8e8e4; animation:cue 1.8s ease-in-out infinite; }
@keyframes cue { 0%{left:-50%} 65%,100%{left:110%} }

.manifesto { max-width:var(--max); margin:0 auto; padding:clamp(90px,14vw,220px) var(--pad); }
.manifesto-row { display:flex; align-items:flex-start; justify-content:space-between; border-bottom:1px solid var(--line); overflow:hidden; }
.manifesto-row span { font-size:clamp(64px,13vw,190px); line-height:.95; letter-spacing:-.07em; font-weight:550; }
.manifesto-row:nth-child(2) span { margin-left:12vw; color:#a3a8b1; font-weight:400; }
.manifesto-row:nth-child(3) span { margin-left:4vw; }
.manifesto-row small { margin-top:2.4em; color:#6e737a; font-size:10px; }

.work { padding-top:clamp(90px,10vw,150px); }
.section-head { display:flex; justify-content:space-between; gap:60px; align-items:flex-end; margin-bottom:clamp(80px,10vw,150px); }
.section-head h2 { margin:14px 0 0; font-size:clamp(44px,7.2vw,105px); line-height:.92; letter-spacing:-.065em; font-weight:500; }
.section-note { max-width:360px; color:#8d9198; font-size:14px; line-height:1.7; }
.section-head.compact { margin-bottom:clamp(48px,6vw,92px); }

.project { min-height:100vh; display:flex; align-items:center; padding:clamp(70px,9vw,140px) 0; border-top:1px solid var(--line); }
.project-grid { width:100%; display:grid; grid-template-columns:minmax(280px,.72fr) minmax(0,1.35fr); gap:clamp(42px,6vw,100px); align-items:center; }
.project-grid-reverse { grid-template-columns:minmax(0,1.35fr) minmax(280px,.72fr); }
.project-info { align-self:stretch; display:flex; flex-direction:column; justify-content:space-between; min-height:610px; }
.project-index { display:flex; align-items:center; gap:16px; color:#6f747b; font-size:11px; }
.project-index i { display:block; width:66px; height:1px; background:var(--line-strong); }
.project-type { margin:0 0 12px; color:#767b82; text-transform:uppercase; letter-spacing:.16em; font-size:10px; }
.project-copy h3 { margin:0; font-size:clamp(48px,7.4vw,110px); letter-spacing:-.07em; line-height:.88; font-weight:520; }
.project-copy > p:not(.project-type) { max-width:470px; margin:30px 0 26px; color:#a6a9af; font-size:14px; line-height:1.8; }
.project-tags { list-style:none; margin:0 0 38px; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.project-tags li { border:1px solid var(--line); border-radius:999px; padding:7px 10px; color:#94989e; font-size:10px; text-transform:uppercase; letter-spacing:.08em; }
.project-link { display:inline-flex; align-items:center; gap:40px; width:max-content; padding-bottom:8px; border-bottom:1px solid rgba(255,255,255,.38); font-size:12px; }
.project-link span { transition:transform .3s var(--ease); }
.project-link:hover span { transform:translate(4px,-4px); }
.project-stage { position:relative; perspective:1200px; }
.project-glow { position:absolute; inset:6% 4%; z-index:-1; border-radius:40%; filter:blur(60px); opacity:.14; background:radial-gradient(circle, rgba(170,185,209,.36), transparent 66%); }
.project-olive .project-glow { opacity:.10; background:radial-gradient(circle, rgba(193,164,128,.34), transparent 66%); }
.project-elora .project-glow { opacity:.12; background:radial-gradient(circle, rgba(220,193,150,.32), transparent 66%); }
.project-nora .project-glow { opacity:.10; background:radial-gradient(circle, rgba(195,183,164,.35), transparent 66%); }
.browser { position:relative; aspect-ratio:1.36/1; border:1px solid rgba(255,255,255,.16); border-radius:16px; background:#111317; box-shadow:0 34px 100px rgba(0,0,0,.34); overflow:hidden; transform-style:preserve-3d; transition:transform .22s ease, box-shadow .45s var(--ease); will-change:transform; }
.browser:hover { box-shadow:0 42px 130px rgba(0,0,0,.42); }
.browser-bar { height:38px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 12px; border-bottom:1px solid var(--line); color:#72767d; font-size:9px; text-transform:uppercase; letter-spacing:.13em; }
.browser-dots { display:flex; gap:5px; }
.browser-dots i { width:5px; height:5px; border:1px solid #555a61; border-radius:50%; }
.browser-open { justify-self:end; }
.browser-screen { position:relative; height:calc(100% - 38px); overflow:hidden; background:#111; }
.browser iframe { position:absolute; top:0; left:0; width:142.857%; height:142.857%; border:0; transform:scale(.7); transform-origin:0 0; background:white; }
.preview-shield { position:absolute; inset:0; z-index:2; background:linear-gradient(to bottom, transparent 85%, rgba(0,0,0,.1)); }

.about { padding-top:clamp(120px,16vw,230px); padding-bottom:clamp(110px,15vw,210px); }
.about-grid { display:grid; grid-template-columns:.55fr 1.45fr; gap:7vw; }
.about-kicker { display:flex; flex-direction:column; justify-content:space-between; min-height:190px; }
.about-kicker span { color:#6e7379; font-size:11px; line-height:1.7; text-transform:uppercase; letter-spacing:.12em; }
.about-main h2 { margin:0; font-size:clamp(52px,8.4vw,126px); line-height:.9; letter-spacing:-.07em; font-weight:500; }
.about-main h2 em, .philosophy h2 em, .contact h2 em { color:#9ba5b4; font-family:Georgia, 'Times New Roman', serif; font-weight:400; }
.about-lead { max-width:780px; margin:55px 0 0 15%; font-size:clamp(20px,2.5vw,35px); line-height:1.35; letter-spacing:-.025em; color:#d0d1cf; }
.about-body { max-width:560px; margin:34px 0 0 15%; color:#888d94; line-height:1.8; font-size:14px; }
.word-wall { margin-top:clamp(110px,14vw,190px); }
.word-line { display:grid; grid-template-columns:1fr auto; align-items:end; padding:4px 0 10px; border-bottom:1px solid var(--line); overflow:hidden; }
.word-line span { font-size:clamp(55px,10vw,145px); letter-spacing:-.07em; line-height:.95; }
.word-line small { margin-bottom:13px; color:#6f747b; text-transform:uppercase; letter-spacing:.12em; font-size:9px; }

.capabilities { padding-bottom:clamp(110px,14vw,200px); }
.cap-list { border-top:1px solid var(--line); }
.cap-row { display:grid; grid-template-columns:65px minmax(220px,.8fr) 1.1fr 30px; align-items:center; gap:25px; padding:27px 0; border-bottom:1px solid var(--line); transition:background .3s, padding .35s var(--ease); }
.cap-row:hover { padding-left:13px; padding-right:13px; background:rgba(255,255,255,.025); }
.cap-row > span { color:#676b72; font-size:10px; }
.cap-row h3 { margin:0; font-size:clamp(24px,3vw,46px); font-weight:500; letter-spacing:-.04em; }
.cap-row p { margin:0; color:#7f848b; font-size:13px; line-height:1.65; }
.cap-row i { font-style:normal; color:#7f848b; transition:transform .3s var(--ease), color .3s; }
.cap-row:hover i { transform:translate(3px,-3px); color:#fff; }
.skills-panel { margin-top:clamp(70px,8vw,110px); border:1px solid var(--line); border-radius:12px; overflow:hidden; background:rgba(255,255,255,.018); }
.skills-label { padding:14px 18px; border-bottom:1px solid var(--line); color:#777b82; font-size:9px; text-transform:uppercase; letter-spacing:.16em; }
.skills-marquee { overflow:hidden; padding:34px 0; }
.skills-track { display:flex; width:max-content; align-items:center; animation:marquee 26s linear infinite; }
.skills-track span { font-size:clamp(28px,4.5vw,68px); letter-spacing:-.05em; white-space:nowrap; }
.skills-track i { margin:0 26px; color:#60646b; font-style:normal; }
@keyframes marquee { to { transform:translateX(-50%); } }

.philosophy { min-height:90vh; display:flex; align-items:center; justify-content:center; text-align:center; }
.philosophy-inner { max-width:1020px; }
.philosophy h2 { margin:18px 0 34px; font-size:clamp(64px,10.5vw,158px); line-height:.84; letter-spacing:-.075em; font-weight:500; }
.philosophy p:last-child { max-width:600px; margin:0 auto; color:#8c9198; font-size:14px; line-height:1.8; }

.process { padding-top:clamp(100px,14vw,200px); padding-bottom:clamp(100px,14vw,200px); }
.process-grid { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.process-item { min-height:300px; padding:24px 24px 30px 0; border-right:1px solid var(--line); display:flex; flex-direction:column; }
.process-item + .process-item { padding-left:24px; }
.process-item:last-child { border-right:0; }
.process-item span { color:#656a70; font-size:10px; }
.process-item h3 { margin:auto 0 15px; font-size:clamp(28px,3vw,42px); letter-spacing:-.04em; font-weight:500; }
.process-item p { margin:0; color:#7e838a; font-size:12px; line-height:1.7; }

.contact { position:relative; min-height:90vh; display:flex; align-items:center; overflow:hidden; }
.contact-ambient { position:absolute; width:1000px; height:700px; left:50%; top:55%; transform:translate(-50%,-50%); background:radial-gradient(circle, rgba(99,119,153,.12), transparent 62%); filter:blur(40px); pointer-events:none; }
.contact-inner { position:relative; width:100%; }
.contact h2 { margin:18px 0 36px; font-size:clamp(70px,12vw,175px); line-height:.82; letter-spacing:-.075em; font-weight:520; }
.contact-note { max-width:520px; color:#8d9298; line-height:1.75; font-size:13px; }
.contact-button { margin-top:28px; }

.footer { max-width:var(--max); margin:0 auto; padding:0 var(--pad) 26px; }
.footer-top, .footer-bottom { display:flex; justify-content:space-between; align-items:center; gap:30px; }
.footer-top { padding:28px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.footer-nav { display:flex; gap:28px; }
.footer-bottom { padding-top:18px; color:#656a71; font-size:9px; text-transform:uppercase; letter-spacing:.12em; }

.reveal, .reveal-left, .reveal-right, .reveal-scale { opacity:0; will-change:transform, opacity, filter; }
.reveal { transform:translateY(34px); filter:blur(5px); transition:opacity .85s var(--ease-out), transform .85s var(--ease-out), filter .85s var(--ease-out); }
.reveal-left { transform:translateX(-55px); filter:blur(5px); transition:opacity .95s var(--ease-out), transform .95s var(--ease-out), filter .95s var(--ease-out); }
.reveal-right { transform:translateX(55px); filter:blur(5px); transition:opacity .95s var(--ease-out), transform .95s var(--ease-out), filter .95s var(--ease-out); }
.reveal-scale { transform:translateY(35px) scale(.955); filter:blur(7px); transition:opacity 1s var(--ease-out), transform 1s var(--ease-out), filter 1s var(--ease-out); }
.is-visible { opacity:1; transform:none; filter:blur(0); }

@media (max-width: 1000px) {
  .desktop-nav { display:none; }
  .menu-toggle { display:block; }
  .hero-bottom { grid-template-columns:1fr; }
  .hero-actions { justify-content:flex-start; }
  .scroll-cue { display:none; }
  .project { min-height:auto; }
  .project-grid, .project-grid-reverse { grid-template-columns:1fr; }
  .project-grid-reverse .project-stage { order:2; }
  .project-grid-reverse .project-info { order:1; }
  .project-info { min-height:0; gap:90px; }
  .project-stage { margin-top:10px; }
  .about-grid { grid-template-columns:1fr; }
  .about-kicker { min-height:0; gap:40px; }
  .about-lead, .about-body { margin-left:0; }
  .cap-row { grid-template-columns:45px 1fr 30px; }
  .cap-row p { grid-column:2/3; }
  .cap-row i { grid-row:1; grid-column:3; }
  .process-grid { grid-template-columns:repeat(2,1fr); }
  .process-item:nth-child(2) { border-right:0; }
  .process-item:nth-child(-n+2) { border-bottom:1px solid var(--line); }
}

@media (max-width: 700px) {
  :root { --pad: 20px; }
  .site-header { width:calc(100% - 20px); }
  .brand-name { display:none; }
  .hero { padding-top:118px; padding-bottom:38px; }
  .hero-meta { top:92px; }
  .hero-meta span:last-child { display:none; }
  .hero-copy > .eyebrow { max-width:230px; }
  .hero-title { font-size:clamp(56px,17.2vw,92px); line-height:.86; }
  .hero-bottom { margin-top:32px; gap:28px; }
  .hero-bottom p { font-size:14px; max-width:92%; }
  .hero-actions { flex-wrap:wrap; }
  .button { min-height:46px; }
  .manifesto { padding-top:100px; padding-bottom:110px; }
  .manifesto-row span { font-size:clamp(60px,20vw,100px); }
  .manifesto-row:nth-child(2) span, .manifesto-row:nth-child(3) span { margin-left:0; }
  .section-head { display:block; margin-bottom:68px; }
  .section-head h2 { font-size:clamp(48px,14vw,82px); }
  .section-note { margin-top:24px; }
  .project { padding:72px 0; }
  .project-info { gap:58px; }
  .project-copy h3 { font-size:clamp(54px,18vw,92px); }
  .project-copy > p:not(.project-type) { margin-top:24px; font-size:13px; }
  .project-tags { margin-bottom:28px; }
  .browser { aspect-ratio:.98/1; border-radius:11px; }
  .browser iframe { width:181.818%; height:181.818%; transform:scale(.55); }
  .about { padding-top:110px; }
  .about-main h2 { font-size:clamp(54px,15vw,92px); }
  .about-lead { margin-top:38px; font-size:21px; }
  .word-wall { margin-top:90px; }
  .word-line { grid-template-columns:1fr; padding-bottom:13px; }
  .word-line span { font-size:clamp(54px,15vw,84px); }
  .word-line small { margin-top:8px; margin-bottom:0; }
  .cap-row { grid-template-columns:34px 1fr 24px; padding:22px 0; }
  .cap-row h3 { font-size:26px; }
  .cap-row p { font-size:12px; }
  .skills-track span { font-size:34px; }
  .philosophy { min-height:75vh; }
  .philosophy h2 { font-size:clamp(62px,18vw,96px); }
  .process-grid { grid-template-columns:1fr; }
  .process-item, .process-item + .process-item { min-height:220px; padding:20px 0; border-right:0; border-bottom:1px solid var(--line); }
  .process-item:last-child { border-bottom:0; }
  .contact { min-height:78vh; }
  .contact h2 { font-size:clamp(68px,19vw,104px); }
  .footer-top { align-items:flex-start; }
  .footer-nav { display:grid; grid-template-columns:repeat(2,auto); gap:18px 24px; }
  .footer-bottom { align-items:flex-start; flex-direction:column; gap:8px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .reveal, .reveal-left, .reveal-right, .reveal-scale, .title-line > span { opacity:1 !important; transform:none !important; filter:none !important; }
  .spotlight { display:none; }
}