
:root{
  --bg:#050505;
  --panel:#0a0a0a;
  --ink:#f2eee8;
  --muted:#aaa39b;
  --line:rgba(255,255,255,.12);
  --orange:#ff6b2c;
  --orange-2:#ff3d00;
  --blue:#5e6cff;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Inter",sans-serif;
  font-weight:300;
  overflow-x:hidden;
}

a{color:inherit}
::selection{background:var(--orange);color:#000}

.noise{
  position:fixed; inset:0; z-index:1000; pointer-events:none; opacity:.045;
  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='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.85'/%3E%3C/svg%3E");
}
.cursor-glow{
  position:fixed; width:320px; height:320px; border-radius:50%; pointer-events:none; z-index:0;
  background:radial-gradient(circle,rgba(255,107,44,.16),transparent 68%);
  transform:translate(-50%,-50%); filter:blur(8px);
}

.topbar{
  position:fixed; inset:0 0 auto; height:78px; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 4vw;
  background:linear-gradient(to bottom,rgba(5,5,5,.9),rgba(5,5,5,.35),transparent);
  backdrop-filter:blur(8px);
}
.mini-brand{
  text-decoration:none; font-weight:900; letter-spacing:-.06em; font-size:1.05rem;
}
.mini-brand span{color:var(--orange); margin-left:2px}
.nav{display:flex;gap:30px}
.nav a{font-size:.78rem; font-weight:600; text-decoration:none; text-transform:uppercase; letter-spacing:.08em; color:#d5d0ca}
.top-cta{
  text-decoration:none; padding:11px 16px; border:1px solid var(--line); border-radius:999px;
  font-weight:600; font-size:.82rem;
}

.hero{
  min-height:100svh;
  padding:120px 4vw 50px;
  display:flex; flex-direction:column; justify-content:center;
  position:relative; overflow:hidden;
  background:
    radial-gradient(circle at 85% 23%, rgba(94,108,255,.12), transparent 26%),
    radial-gradient(circle at 80% 88%, rgba(255,107,44,.24), transparent 28%),
    #050505;
}
.hero-orbit{
  position:absolute;border:1px solid rgba(255,255,255,.08);border-radius:50%;
  filter:blur(.1px); transform:rotate(-14deg);
}
.orbit-a{width:48vw;height:48vw;right:-14vw;top:4vh}
.orbit-b{width:25vw;height:25vw;right:8vw;bottom:-10vw;border-color:rgba(255,107,44,.14)}

.hero-meta{
  display:flex; justify-content:space-between; gap:20px;
  font-size:.68rem; font-weight:700; letter-spacing:.14em;
  color:#a9a39c; margin-bottom:36px; position:relative; z-index:2;
}
.name-stack{position:relative;z-index:2}
.first-name{
  display:block; font-size:clamp(1.5rem,3vw,3rem); font-weight:300; letter-spacing:-.05em;
  margin-left:.25vw;
}
.last-name{
  margin:0;
  font-size:clamp(5.8rem,16.5vw,17rem);
  line-height:.75;
  letter-spacing:-.085em;
  font-weight:900;
  background:linear-gradient(100deg,#f4f0eb 0%,#bab8b7 54%,#ff6b2c 112%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-bottom{
  margin-top:70px; display:grid; grid-template-columns:1fr auto; align-items:end; gap:40px;
  position:relative;z-index:2;
}
.hero-copy{max-width:670px; font-size:clamp(1rem,1.7vw,1.35rem); line-height:1.55; color:#d2ccc5}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:0 22px;border-radius:999px;
  text-decoration:none;font-weight:700;font-size:.85rem;letter-spacing:.01em;
  transition:transform .2s ease, background .2s ease, color .2s ease;
}
.primary{background:var(--orange);color:#0a0a0a}
.ghost{border:1px solid var(--line);color:#fff}
.light{background:#f2eee8;color:#050505}
.scroll-note{margin-top:55px;font-size:.64rem;font-weight:700;letter-spacing:.14em;color:#777}

.panel{position:relative;z-index:1;padding:120px 4vw}
.eyebrow{font-size:.67rem;font-weight:800;letter-spacing:.16em;color:var(--orange);margin-bottom:20px}
.eyebrow.light{color:#d5cec5}

.statement{background:#0a0a0a;border-top:1px solid var(--line)}
.statement-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:70px;align-items:end}
.statement h2,.section-head h2,.feature-copy h2,.launch h2,.process h2,.quote h2,.contact h2{
  margin:0; font-size:clamp(3rem,6vw,6.3rem); line-height:.94; letter-spacing:-.065em; font-weight:800;
}
.statement h2 span,.launch h2 span,.quote h2 span{color:var(--orange)}
.statement p,.section-head>p,.feature-copy p{
  color:var(--muted);font-size:1.02rem;line-height:1.7;max-width:560px
}

.services{background:#080808}
.section-head{display:grid;grid-template-columns:1.2fr .8fr;gap:50px;align-items:end;margin-bottom:55px}
.section-head>p{justify-self:end}
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;perspective:1200px}
.service-card{
  min-height:650px;
  padding:28px;border:1px solid var(--line);border-radius:24px;
  background:linear-gradient(180deg,#101010,#090909);
  display:flex;flex-direction:column;gap:26px;
  transform-style:preserve-3d; transition:transform .18s ease,border-color .18s ease;
}
.service-card:hover{border-color:rgba(255,107,44,.5)}
.accent-card{
  background:
    radial-gradient(circle at 88% 12%,rgba(255,107,44,.20),transparent 28%),
    linear-gradient(180deg,#12100f,#090909);
}
.card-index{font-size:.72rem;font-weight:800;color:#6e6964}
.pill{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:7px 10px;font-size:.63rem;font-weight:800;letter-spacing:.13em;color:#cbc5be}
.service-card h3{font-size:clamp(2.2rem,4vw,4.3rem);letter-spacing:-.06em;line-height:1;margin:20px 0 12px}
.service-card p{color:#aaa39b;line-height:1.6;max-width:420px}
.price{margin-top:auto;color:#8f8983;font-size:.82rem}
.price strong{display:block;color:#f3eee8;font-size:1.75rem;margin:4px 0}
.service-card ul{list-style:none;padding:20px 0 0;margin:0;border-top:1px solid var(--line);display:grid;gap:10px;font-size:.88rem}
.service-card li:before{content:"—";margin-right:10px;color:var(--orange)}
.card-link{font-weight:700;text-decoration:none;margin-top:8px;font-size:.88rem}

.feature-work{
  display:grid;grid-template-columns:.7fr 1.3fr;gap:70px;align-items:center;
  background:
    radial-gradient(circle at 78% 40%,rgba(94,108,255,.08),transparent 25%),
    #050505;
}
.media-stage{min-width:0}
.media-main{
  aspect-ratio:16/9;border:1px solid var(--line);border-radius:22px;overflow:hidden;
  background:
    radial-gradient(circle at 70% 80%,rgba(255,107,44,.28),transparent 28%),
    linear-gradient(135deg,#111,#060606 62%);
  display:grid;place-items:center;position:relative;
}
.placeholder-label{position:absolute;left:18px;top:18px;font-size:.62rem;font-weight:800;letter-spacing:.13em;color:#9b958f}
.play{
  width:74px;height:74px;border-radius:50%;border:1px solid rgba(255,255,255,.25);
  display:grid;place-items:center;font-size:1.15rem;background:rgba(255,255,255,.04);backdrop-filter:blur(7px);
}
.media-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}
.thumb{
  aspect-ratio:16/9;border:1px solid var(--line);border-radius:14px;
  background:linear-gradient(135deg,#111,#080808);display:flex;align-items:flex-end;padding:12px
}
.thumb span{font-size:.7rem;font-weight:800;color:#777}

.launch{
  background:
    radial-gradient(circle at 72% 23%,rgba(255,107,44,.28),transparent 24%),
    linear-gradient(135deg,#ff6b2c 0%,#ff4e10 50%,#ea3500 100%);
  color:#090909;
}
.launch-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:70px;align-items:end}
.launch .eyebrow{color:#1a120e}
.launch h2 span{color:#0b0b0b}
.launch p{max-width:580px;line-height:1.6;font-weight:400}
.launch-side{background:rgba(0,0,0,.82);color:#fff;border-radius:24px;padding:30px}
.launch-price small{display:block;color:#8f8983}
.launch-price strong{display:block;font-size:clamp(2.4rem,4vw,4rem);letter-spacing:-.055em;margin:6px 0}
.launch-list{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px;border-top:1px solid var(--line);margin:25px 0;padding-top:22px}
.launch-list span{font-size:.84rem;color:#cbc5be}

.process{background:#080808}
.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line);margin-top:55px}
.step{padding:26px 22px 20px 0;border-right:1px solid var(--line);min-height:260px}
.step:not(:first-child){padding-left:22px}
.step:last-child{border-right:0}
.step>span{font-size:.72rem;font-weight:800;color:var(--orange)}
.step h3{font-size:1.35rem;margin:72px 0 10px}
.step p{color:#918b84;line-height:1.55;font-size:.9rem}

.quote{background:#050505;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.quote>p{font-size:.72rem;font-weight:800;letter-spacing:.14em;color:#7c766f;text-transform:uppercase}
.quote h2{max-width:1200px;margin-top:18px}

.contact{background:#050505;padding-bottom:45px}
.contact-top h2{max-width:1050px}
.contact-actions{display:grid;grid-template-columns:1fr 1fr;margin-top:70px;border-top:1px solid var(--line)}
.contact-link{
  display:flex;align-items:center;justify-content:space-between;
  min-height:100px;padding:0 12px 0 0;
  text-decoration:none;font-size:1.45rem;font-weight:700;
  border-bottom:1px solid var(--line)
}
.contact-link:first-child{border-right:1px solid var(--line);padding-right:28px}
.contact-link:last-child{padding-left:28px}
.contact-link span{color:var(--orange)}
.contact-footer{display:flex;justify-content:space-between;gap:20px;margin-top:100px;color:#716b65;font-size:.68rem;font-weight:700;letter-spacing:.1em}

.reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)
}
.reveal.in{opacity:1;transform:none}

@media (max-width: 1000px){
  .nav{display:none}
  .statement-grid,.section-head,.feature-work,.launch-inner{grid-template-columns:1fr}
  .section-head>p{justify-self:start}
  .service-grid{grid-template-columns:1fr}
  .service-card{min-height:auto}
  .hero-bottom{grid-template-columns:1fr}
  .timeline{grid-template-columns:1fr 1fr}
  .step:nth-child(2){border-right:0}
  .launch-list{grid-template-columns:1fr}
}

@media (max-width: 700px){
  .topbar{height:66px}
  .hero{padding-top:100px}
  .hero-meta{flex-direction:column;gap:7px}
  .first-name{font-size:1.45rem}
  .last-name{font-size:clamp(4.6rem,22vw,8rem);line-height:.8}
  .hero-bottom{margin-top:48px}
  .panel{padding:88px 5vw}
  .service-grid{gap:12px}
  .timeline{grid-template-columns:1fr}
  .step{border-right:0;border-bottom:1px solid var(--line);padding:26px 0}
  .step:not(:first-child){padding-left:0}
  .step h3{margin-top:36px}
  .contact-actions{grid-template-columns:1fr}
  .contact-link:first-child{border-right:0;padding-right:0}
  .contact-link:last-child{padding-left:0}
  .contact-footer{flex-direction:column;margin-top:70px}
  .cursor-glow{display:none}
}


/* Theme controls */
.header-actions{display:flex;align-items:center;gap:10px}
.theme-toggle{
  appearance:none;border:1px solid var(--line);background:rgba(255,255,255,.035);color:var(--ink);
  border-radius:999px;min-height:40px;padding:0 13px;display:inline-flex;align-items:center;gap:8px;
  font:inherit;font-size:.75rem;font-weight:700;cursor:pointer;
  transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease
}
.theme-icon{font-size:1rem;line-height:1}
.theme-toggle:hover{background:rgba(255,255,255,.08)}

/* Light mode */
html[data-theme="light"]{
  --bg:#f3efe8;
  --panel:#ece7de;
  --ink:#0b0b0b;
  --muted:#625e58;
  --line:rgba(10,10,10,.14);
  --orange:#ff6422;
  --orange-2:#ef3f00;
  --blue:#6670ff;
}
html[data-theme="light"] body{background:var(--bg);color:var(--ink)}
html[data-theme="light"] .noise{opacity:.025;mix-blend-mode:multiply}
html[data-theme="light"] .cursor-glow{
  background:radial-gradient(circle,rgba(255,100,34,.13),transparent 68%)
}
html[data-theme="light"] .topbar{
  background:linear-gradient(to bottom,rgba(243,239,232,.95),rgba(243,239,232,.62),transparent)
}
html[data-theme="light"] .nav a{color:#3c3935}
html[data-theme="light"] .top-cta{background:#0b0b0b;color:#fff;border-color:#0b0b0b}
html[data-theme="light"] .theme-toggle{background:rgba(10,10,10,.04);color:#0b0b0b}
html[data-theme="light"] .theme-toggle:hover{background:rgba(10,10,10,.08)}
html[data-theme="light"] .hero{
  background:
    radial-gradient(circle at 85% 23%, rgba(94,108,255,.08), transparent 26%),
    radial-gradient(circle at 80% 88%, rgba(255,107,44,.17), transparent 28%),
    #f3efe8;
}
html[data-theme="light"] .hero-meta{color:#67615b}
html[data-theme="light"] .last-name{
  background:linear-gradient(100deg,#111 0%,#5a5651 54%,#ff6422 112%);
  -webkit-background-clip:text;background-clip:text;color:transparent
}
html[data-theme="light"] .hero-copy{color:#3f3b37}
html[data-theme="light"] .ghost{color:#0b0b0b;border-color:rgba(10,10,10,.18)}
html[data-theme="light"] .scroll-note{color:#7c756f}
html[data-theme="light"] .statement{background:#ece7de;border-top-color:var(--line)}
html[data-theme="light"] .services{background:#f7f3ed}
html[data-theme="light"] .service-card{
  background:linear-gradient(180deg,#fff,#f0ebe4);
  border-color:rgba(10,10,10,.12);
  box-shadow:0 20px 55px rgba(23,18,12,.06)
}
html[data-theme="light"] .service-card:hover{border-color:rgba(255,100,34,.55)}
html[data-theme="light"] .accent-card{
  background:
    radial-gradient(circle at 88% 12%,rgba(255,100,34,.16),transparent 28%),
    linear-gradient(180deg,#fff8f2,#f3ebe4)
}
html[data-theme="light"] .card-index{color:#847e77}
html[data-theme="light"] .pill{color:#4c4843;border-color:rgba(10,10,10,.15)}
html[data-theme="light"] .service-card p{color:#68625c}
html[data-theme="light"] .price{color:#736d66}
html[data-theme="light"] .price strong{color:#111}
html[data-theme="light"] .feature-work{
  background:
    radial-gradient(circle at 78% 40%,rgba(94,108,255,.07),transparent 25%),
    #f3efe8
}
html[data-theme="light"] .media-main{
  border-color:rgba(10,10,10,.12);
  background:
    radial-gradient(circle at 70% 80%,rgba(255,107,44,.20),transparent 28%),
    linear-gradient(135deg,#ddd7cf,#f6f2ec 62%)
}
html[data-theme="light"] .placeholder-label{color:#635e57}
html[data-theme="light"] .play{
  border-color:rgba(10,10,10,.18);
  background:rgba(255,255,255,.42);
  color:#111
}
html[data-theme="light"] .thumb{
  border-color:rgba(10,10,10,.12);
  background:linear-gradient(135deg,#e8e1d8,#f7f3ed)
}
html[data-theme="light"] .thumb span{color:#6f6962}
html[data-theme="light"] .process{background:#f7f3ed}
html[data-theme="light"] .step p{color:#706962}
html[data-theme="light"] .quote{
  background:#f3efe8;
  border-color:rgba(10,10,10,.12)
}
html[data-theme="light"] .quote>p{color:#77706a}
html[data-theme="light"] .contact{background:#0b0b0b;color:#fff}
html[data-theme="light"] .contact .eyebrow{color:#bbb5ae}
html[data-theme="light"] .contact-link{border-color:rgba(255,255,255,.13)}
html[data-theme="light"] .contact-footer{color:#817b75}

@media (max-width:700px){
  .theme-label{display:none}
  .theme-toggle{width:40px;padding:0;justify-content:center}
}

/* Portfolio edition */
.about{padding:clamp(80px,10vw,160px) 4vw;background:#090909;position:relative}
.about-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:8vw;align-items:start;margin-top:55px}
.about h2{font-size:clamp(3.5rem,8vw,9rem);line-height:.95;letter-spacing:-.065em;font-weight:300;margin:0}
.about h2 span{font-weight:900;color:var(--orange,#ff6b2c)}
.about-copy{max-width:520px;font-size:clamp(1.05rem,1.5vw,1.35rem);line-height:1.65}
.about-copy p{margin:0 0 25px}
.discipline-note{margin:45px 0 0;color:#999;font-size:.9rem}
.contact-pending{color:#999;font-size:.8rem;margin:25px 0}
.contact-link[aria-disabled="true"]{opacity:.45;cursor:default;pointer-events:none}
html[data-theme="light"] .about{background:#f3efe8}
html[data-theme="light"] .discipline-note,html[data-theme="light"] .contact-pending{color:#777}
@media(max-width:700px){.about-grid{grid-template-columns:1fr;gap:35px}.about{padding:80px 6vw}}
