* { margin:0; padding:0; box-sizing:border-box; }
:root{
  --bg:#07070b;
  --fg:#f3efe8;
  --muted:#8b8c94;
  --fire-1:#3d0a00; --fire-2:#c92a0c; --fire-3:#ff7a1a; --fire-4:#ffd24a;
  --water-1:#001a33; --water-2:#0b5c8a; --water-3:#22a8c9; --water-4:#a9f0ec;
  --serif:'Cormorant Garamond', serif;
  --sans:'Inter', sans-serif;
}
html{scroll-behavior:auto; background:var(--bg);}
body{
  background:var(--bg); color:var(--fg); font-family:var(--sans);
  overflow-x:hidden; cursor:none;
}
a{color:inherit; text-decoration:none;}
em{font-style:italic;}
::selection{background:var(--fire-3); color:#000;}

/* grain */
#grain{
  position:fixed; inset:0; z-index:9990; pointer-events:none; opacity:.045; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* cursor */
.cursor-dot,.cursor-ring{position:fixed; top:0; left:0; border-radius:50%; pointer-events:none; z-index:9998; transform:translate(-50%,-50%);}
.cursor-dot{width:6px; height:6px; background:var(--fire-3);}
.cursor-ring{width:36px; height:36px; border:1px solid rgba(243,239,232,.35); transition:width .25s,height .25s,border-color .25s,background .25s;}
.cursor-ring.hover{width:64px; height:64px; border-color:var(--water-3); background:rgba(34,168,201,.08);}
@media(hover:none){.cursor-dot,.cursor-ring{display:none;} body{cursor:auto;}}

/* loader */
#loader{
  position:fixed; inset:0; z-index:9999; background:#07070b;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
}
.loader-mark{position:relative; width:46px; height:46px;}
.l-fire,.l-water{position:absolute; inset:0; border-radius:50%;}
.l-fire{background:conic-gradient(var(--fire-3),var(--fire-1)); clip-path:polygon(0 0,50% 0,50% 100%,0 100%); animation:spin 1.4s linear infinite;}
.l-water{background:conic-gradient(var(--water-3),var(--water-1)); clip-path:polygon(50% 0,100% 0,100% 100%,50% 100%); animation:spin 1.4s linear infinite reverse;}
@keyframes spin{to{transform:rotate(360deg);}}
.loader-word{font-size:12px; letter-spacing:.35em; color:var(--muted);}
.loader-bar{width:180px; height:1px; background:rgba(255,255,255,.12);}
.loader-fill{height:100%; width:0%; background:linear-gradient(90deg,var(--fire-3),var(--water-3));}

/* nav */
#siteNav{
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:26px 5vw; mix-blend-mode:difference;
}
.brand{display:flex; align-items:center; gap:10px; font-size:14px; letter-spacing:.12em; font-weight:500;}
.brand em{font-style:normal; color:var(--fire-3);}
.brand-mark{width:16px; height:16px; border-radius:50%; background:conic-gradient(var(--fire-3),var(--fire-1),var(--water-1),var(--water-3),var(--fire-3));}
.brand-mark.small{width:10px; height:10px; display:inline-block; margin-bottom:10px;}
.nav-links{display:flex; align-items:center; gap:34px; font-size:13px; letter-spacing:.04em;}
.nav-links a{position:relative; opacity:.85; transition:opacity .2s;}
.nav-links a:hover{opacity:1;}
.nav-links a:not(.nav-cta)::after{content:'';position:absolute; left:0; bottom:-4px; width:0; height:1px; background:var(--fg); transition:width .3s;}
.nav-links a:not(.nav-cta):hover::after{width:100%;}
.nav-cta{padding:9px 18px; border:1px solid rgba(255,255,255,.5); border-radius:999px;}
.nav-toggle{display:none;}
.nav-links-mobile{display:none;}

/* hero */
.hero{position:relative; height:100vh; width:100%; display:flex; align-items:center; justify-content:center; overflow:hidden;}
#heroCanvas{position:absolute; inset:0; width:100%; height:100%; display:block;}
.hero-vignette{position:absolute; inset:0; background:radial-gradient(ellipse at center, rgba(7,7,11,.32) 0%, transparent 32%, #07070b 92%); pointer-events:none;}
.hero-content{position:relative; z-index:2; text-align:center; padding:0 20px; max-width:900px;}
.hero-content h1, .hero-content p, .hero-content .eyebrow{text-shadow:0 4px 24px rgba(0,0,0,.55);}
.eyebrow{font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:var(--muted); margin-bottom:22px;}
.hero-title{font-family:var(--sans); font-weight:700; font-size:clamp(38px,7vw,88px); line-height:1.02; letter-spacing:-.01em;}
.hero-title .line{display:block; overflow:hidden;}
.hero-title em{font-family:var(--serif); font-style:italic; font-weight:400; background:linear-gradient(90deg,var(--fire-3),var(--water-3)); -webkit-background-clip:text; background-clip:text; color:transparent;}
.hero-sub{margin:26px auto 0; max-width:520px; color:var(--muted); font-size:16px; line-height:1.7;}
.btn-ghost{display:inline-flex; margin-top:38px; padding:15px 34px; border:1px solid rgba(255,255,255,.35); border-radius:999px; font-size:13px; letter-spacing:.05em; transition:border-color .3s,background .3s;}
.btn-ghost:hover{border-color:var(--fire-3); background:rgba(255,122,26,.08);}
.btn-solid{display:inline-flex; padding:17px 40px; border-radius:999px; background:var(--fg); color:#07070b; font-size:13px; letter-spacing:.05em; font-weight:500; transition:transform .3s,box-shadow .3s;}
.btn-solid:hover{transform:translateY(-2px); box-shadow:0 12px 30px rgba(255,122,26,.25);}

.scroll-cue{position:absolute; bottom:34px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:10px; z-index:2;}
.scroll-cue span{width:1px; height:36px; background:linear-gradient(var(--fire-3),var(--water-3)); animation:cueMove 1.8s ease-in-out infinite;}
.scroll-cue p{font-size:10px; letter-spacing:.25em; color:var(--muted); text-transform:uppercase;}
@keyframes cueMove{0%,100%{transform:scaleY(.4); opacity:.4;} 50%{transform:scaleY(1); opacity:1;}}

/* reveal helpers (set by GSAP) */
.reveal-line, .reveal-up{will-change:transform,opacity;}

/* manifesto */
.manifesto{
  position:relative; display:grid; grid-template-columns:1fr auto 1fr; gap:60px;
  padding:160px 6vw; align-items:center; background:#07070b;
}
.manifesto-col{max-width:380px;}
.fire-col{justify-self:end; text-align:right;}
.water-col{justify-self:start;}
.col-tag{font-size:11px; letter-spacing:.3em; color:var(--muted);}
.manifesto h2{font-family:var(--serif); font-weight:400; font-size:clamp(28px,3.2vw,42px); line-height:1.15; margin:14px 0 20px;}
.fire-col h2{color:#ffd9b0;}
.water-col h2{color:#cdeff0;}
.manifesto p{color:var(--muted); font-size:15px; line-height:1.75;}
.manifesto-core{display:flex; flex-direction:column; align-items:center; gap:20px;}
.core-orb{
  width:120px; height:120px; border-radius:50%;
  background:conic-gradient(from 180deg, var(--fire-3), var(--fire-1) 45%, var(--water-1) 55%, var(--water-3));
  box-shadow:0 0 70px rgba(255,122,26,.25), 0 0 70px rgba(34,168,201,.2);
  animation:orbSpin 12s linear infinite;
}
@keyframes orbSpin{to{transform:rotate(360deg);}}
.core-word{font-size:11px; letter-spacing:.25em; text-align:center; color:var(--muted); line-height:2;}

/* section head */
.section-head{max-width:640px; margin:0 auto 70px; padding:0 6vw; text-align:center;}
.section-num{display:block; font-size:12px; letter-spacing:.3em; color:var(--fire-3); margin-bottom:14px;}
.section-num.light{color:var(--water-3);}
.section-title{font-family:var(--serif); font-weight:400; font-size:clamp(32px,4vw,52px); margin-bottom:16px;}
.section-sub{color:var(--muted); font-size:15px;}

/* services */
.services{padding:120px 0 140px;}
.service-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; max-width:1100px; margin:0 auto; padding:0 6vw; background:rgba(255,255,255,.08);}
.service-card{
  position:relative; background:#0b0b10; padding:52px 34px; transition:background .4s;
  transform-style:preserve-3d;
}
.service-card:hover{background:#101015;}
.service-icon{width:44px; height:44px; border-radius:50%; margin-bottom:30px;}
.fire-icon{background:radial-gradient(circle at 35% 30%, var(--fire-4), var(--fire-2) 60%, var(--fire-1));}
.water-icon{background:radial-gradient(circle at 35% 30%, var(--water-4), var(--water-2) 60%, var(--water-1));}
.mix-icon{background:conic-gradient(var(--fire-3),var(--fire-1),var(--water-1),var(--water-3));}
.service-card h3{font-size:19px; font-weight:500; margin-bottom:12px;}
.service-card p{color:var(--muted); font-size:14px; line-height:1.7; max-width:280px;}
.service-index{position:absolute; top:44px; right:34px; font-family:var(--serif); font-size:14px; color:rgba(255,255,255,.25);}

/* work */
.work{padding:60px 0 150px;}
.work-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; max-width:1200px; margin:0 auto; padding:0 6vw;}
.work-card{
  position:relative; aspect-ratio:3/4; border-radius:10px; overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end; padding:22px;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.work-card:hover{transform:translateY(-8px);}
.wc-1{background:linear-gradient(155deg,#3d0a00,#c92a0c 60%,#ffd24a);}
.wc-2{background:linear-gradient(155deg,#001a33,#0b5c8a 60%,#a9f0ec);}
.wc-3{background:linear-gradient(155deg,#3d0a00,#0b5c8a);}
.wc-4{background:linear-gradient(155deg,#0b5c8a,#ffd24a);}
.wc-tag{font-size:10px; letter-spacing:.2em; text-transform:uppercase; opacity:.75; margin-bottom:8px;}
.work-card h3{font-size:17px; font-weight:500;}

/* contact */
.contact{padding:150px 6vw 170px; text-align:center; position:relative;}
.contact-inner{max-width:640px; margin:0 auto;}
.contact h2{font-family:var(--serif); font-weight:400; font-size:clamp(30px,4.2vw,54px); line-height:1.2; margin-bottom:22px;}
.contact p{color:var(--muted); font-size:15px; margin-bottom:34px;}
.contact-details{margin-top:46px; padding-top:34px; border-top:1px solid rgba(255,255,255,.1); display:flex; flex-wrap:wrap; justify-content:center; gap:50px;}
.contact-person{display:flex; flex-direction:column; gap:10px; align-items:center; padding-top:14px; border-top:2px solid transparent;}
.fire-person{border-top-color:var(--fire-3);}
.water-person{border-top-color:var(--water-3);}
.contact-name{font-size:13px; letter-spacing:.05em; color:var(--muted);}
.fire-person .contact-name{color:#ffb37a;}
.water-person .contact-name{color:#8fdfe8;}
.contact-details a{font-size:16px; transition:color .2s;}
.fire-person a:hover{color:var(--fire-3);}
.water-person a:hover{color:var(--water-3);}

/* footer */
#siteFooter{display:flex; flex-direction:column; align-items:center; padding:40px 0 60px; color:var(--muted); font-size:12px;}

@media(max-width:860px){
  .manifesto{grid-template-columns:1fr; text-align:center; gap:50px; padding:110px 8vw;}
  .fire-col,.water-col{justify-self:center; text-align:center; max-width:100%;}
  .service-grid{grid-template-columns:1fr;}
  .work-grid{grid-template-columns:repeat(2,1fr);}
  .nav-links-desktop{display:none;}
  .nav-links-mobile{
    display:flex; position:fixed; inset:0 0 0 auto; width:70vw; background:#0a0a0f;
    flex-direction:column; justify-content:center; align-items:flex-start; padding:0 8vw;
    transform:translateX(100%); transition:transform .4s ease; gap:26px; z-index:205;
    box-shadow:-20px 0 60px rgba(0,0,0,.5);
  }
  .nav-links-mobile.open{transform:translateX(0);}
  .nav-toggle{display:flex; flex-direction:column; gap:5px; background:none; border:none; z-index:210; position:relative;}
  .nav-toggle span{width:22px; height:1px; background:var(--fg);}
}