:root{
  --bg:#1a1917;
  --surface:#22201e;
  --text:#efeae2;
  --muted:#a9a39b;
  --border:#332f2c;
  --accent:#8a3a34;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:"Manrope",sans-serif;-webkit-font-smoothing:antialiased}
body.menu-open{overflow:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:1px solid var(--accent);outline-offset:3px}
.shell{width:min(1240px,calc(100% - 48px));margin:0 auto}
.section{padding:120px 0;scroll-margin-top:90px}
.band{background:rgba(34,32,30,.78);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
h1,h2,h3{font-family:"Cormorant Garamond",serif;font-weight:300;letter-spacing:-.015em;line-height:1.02;margin:0}
h2{font-size:clamp(2.5rem,6vw,4.8rem);max-width:760px;margin-top:34px}
.eyebrow{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted)}
.accent{color:var(--accent)}
.section-label{display:flex;gap:16px;align-items:baseline}
.section-label span:first-child{color:var(--accent);font-size:11px;letter-spacing:.28em}
.section-label span:last-child{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted)}

.site-nav{position:fixed;top:0;left:0;right:0;z-index:1000;border-bottom:1px solid transparent;transition:.6s var(--ease)}
.site-nav.scrolled{background:rgba(26,25,23,.86);backdrop-filter:blur(12px);border-color:var(--border)}
.nav-inner{width:min(1240px,calc(100% - 48px));margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:20px 0}
.brand{font-size:11px;letter-spacing:.34em;text-transform:uppercase}
.desktop-nav{list-style:none;display:flex;gap:38px;padding:0;margin:0}
.desktop-nav a{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);transition:.35s}
.desktop-nav a:hover{color:var(--text)}
.menu-toggle{display:none;width:34px;height:34px;background:none;border:0;color:var(--text);padding:0}
.menu-toggle span{display:block;width:24px;height:1px;background:currentColor;margin:6px 0 6px auto;transition:.4s}
.menu-toggle span:last-child{width:16px}
.menu-toggle.active span:first-child{transform:translateY(3.5px) rotate(45deg)}
.menu-toggle.active span:last-child{width:24px;transform:translateY(-3.5px) rotate(-45deg)}
.mobile-menu{background:var(--bg);border-top:1px solid var(--border);padding:10px 24px 24px}
.mobile-menu a{display:block;font-family:"Cormorant Garamond",serif;font-size:34px;padding:14px 0;border-bottom:1px solid var(--border)}

.cine-field{position:relative;isolation:isolate;background:
radial-gradient(120% 90% at 18% 12%,rgba(99,44,40,.34),transparent 60%),
radial-gradient(90% 80% at 82% 78%,rgba(69,62,55,.38),transparent 65%),
var(--bg)}
.cine-field:after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.05;background-image:radial-gradient(rgba(255,255,255,.4) .5px,transparent .5px);background-size:3px 3px}
.hero{min-height:100svh;display:flex;align-items:flex-end;overflow:hidden}
.hero-content{position:relative;padding-top:160px;padding-bottom:105px;z-index:2}
.hero h1{font-size:clamp(4rem,12vw,10rem);margin-top:20px}
.hero-role{font-size:clamp(1rem,2vw,1.4rem);letter-spacing:.15em;text-transform:uppercase;color:var(--muted);font-weight:300;margin:16px 0 0}
.hero-copy{max-width:560px;color:var(--muted);line-height:1.7;margin-top:28px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:36px}
.btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border);padding:15px 24px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);transition:.45s}
.btn:hover{border-color:var(--text);color:var(--text)}
.btn-primary{border-color:var(--accent);background:rgba(138,58,52,.1);color:var(--text)}
.btn-primary:hover{background:rgba(138,58,52,.22);border-color:var(--accent)}
.hero-glow{position:absolute;border-radius:50%;filter:blur(120px);pointer-events:none;opacity:.65;animation:drift 32s ease-in-out infinite}
.hero-glow-one{width:70vh;height:70vh;left:-18%;top:-20%;background:radial-gradient(circle,rgba(138,58,52,.45),transparent 70%)}
.hero-glow-two{width:60vh;height:60vh;right:-12%;bottom:-20%;background:radial-gradient(circle,rgba(92,84,72,.38),transparent 70%);animation-delay:-13s}
.hero-fade{position:absolute;left:0;right:0;bottom:0;height:34%;background:linear-gradient(transparent,var(--bg));z-index:1}

.project-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);border:1px solid var(--border);margin-top:64px}
.project-card{background:var(--bg);padding:34px;min-height:300px;display:flex;flex-direction:column;justify-content:space-between;transition:.55s var(--ease)}
.project-card:hover{background:var(--surface)}
.project-meta{display:flex;justify-content:space-between;gap:18px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.project-card h3{font-size:clamp(2rem,4vw,3rem);margin-top:24px}
.director{color:var(--muted);font-size:14px;margin-top:8px}
.project-note{color:var(--muted);font-size:14px;line-height:1.7;max-width:390px;margin-top:24px}
.mock-player{display:flex;align-items:center;gap:14px;border:1px solid var(--border);background:rgba(34,32,30,.5);padding:12px 14px;margin-top:40px}
.play-btn{width:38px;height:38px;border-radius:50%;border:1px solid #48433e;background:transparent;color:var(--text);display:grid;place-items:center;cursor:pointer}
.play-triangle{width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:8px solid currentColor;margin-left:2px}
.player-main{flex:1;min-width:0}
.player-title{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.progress{height:1px;background:#413c37;margin-top:10px}
.progress span{display:block;height:1px;width:34%;background:var(--accent)}
.duration{font-size:10px;color:var(--muted)}
.audio-note{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#77716a;margin-top:10px}

.listen-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);margin-top:64px}
.listen-card{background:var(--bg);padding:28px;min-height:190px;display:flex;flex-direction:column;justify-content:space-between;transition:.55s var(--ease)}
.listen-card:hover{background:var(--surface)}
.listen-card h3{font-size:clamp(1.6rem,3vw,2.25rem)}
.listen-card .mock-player{margin-top:28px}

.work-note{color:var(--muted);font-size:14px;margin-top:34px}
.work-note a{color:var(--text);border-bottom:1px solid #555}

.about-grid{display:grid;grid-template-columns:4fr 1fr 7fr;gap:28px}
.about-copy{grid-column:3}
.about-title{font-size:clamp(2.4rem,5vw,3.8rem)}
.about-copy .lead{font-size:18px;line-height:1.8;color:#ded9d2;margin:0}
.about-copy>p:not(.lead){color:var(--muted);line-height:1.8;margin-top:24px}
.about-facts{border-top:1px solid var(--border);margin-top:46px;padding-top:32px;display:grid;grid-template-columns:1fr 1fr;gap:30px}
.about-facts p{font-size:14px;margin-top:10px;color:#d4cec6}

.featured{margin-top:48px;border:1px solid var(--border);background:rgba(34,32,30,.55);padding:50px}
.featured h3{font-size:clamp(2.2rem,5vw,3.6rem);margin-top:22px}
.featured p:last-child{max-width:820px;color:var(--muted);font-size:16px;line-height:1.8;margin-top:26px}
.experience-row{border-top:1px solid var(--border);display:grid;grid-template-columns:4fr 8fr;gap:30px;padding-top:32px;margin-top:44px}
.experience-label{letter-spacing:.07em}
.experience-row p{margin:0;color:var(--muted)}
.experience-row small{display:block;color:#77716a;margin-top:8px}
.skills{display:flex;flex-wrap:wrap;gap:10px}
.skills span{border:1px solid var(--border);padding:9px 13px;font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}

.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);margin-top:56px}
.service{background:var(--bg);padding:34px;min-height:250px}
.service h3{font-size:32px;margin-top:22px}
.service p{color:var(--muted);font-size:14px;line-height:1.8;margin-top:18px}

.contact{padding-top:140px;padding-bottom:140px}
.contact-title{font-size:clamp(3rem,8vw,6.7rem);max-width:980px}
.contact-grid{display:grid;grid-template-columns:6fr 1fr 5fr;gap:30px;margin-top:64px}
.contact-grid>div:first-child{grid-column:1}
.contact-grid>div:last-child{grid-column:3}
.contact-grid p{color:var(--muted);font-size:14px}
.email-link{font-family:"Cormorant Garamond",serif;font-weight:300;font-size:clamp(1.8rem,4vw,2.8rem);display:inline-block;margin-top:15px;border-bottom:1px solid transparent;transition:.4s}
.email-link:hover{color:var(--accent);border-color:var(--accent)}
.website-display{font-size:11px!important;letter-spacing:.14em;text-transform:uppercase;margin-top:18px!important}
.social{display:flex;flex-direction:column}
.social>a{display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid var(--border);padding:16px 0;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.social>a:hover{color:var(--text)}
.social small{color:#77716a}

.site-footer{border-top:1px solid var(--border);padding:34px 0}
.footer-inner{width:min(1240px,calc(100% - 48px));margin:0 auto;display:flex;justify-content:space-between;gap:20px}
.footer-inner p{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin:0}

.reveal{opacity:0;transform:translateY(18px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.in,.reveal.immediate{opacity:1;transform:none}
.delay-1{transition-delay:.12s}.delay-2{transition-delay:.22s}.delay-3{transition-delay:.32s}.delay-4{transition-delay:.42s}

@keyframes drift{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(2%,-2%,0) scale(1.06)}}

@media (max-width: 820px){
  .desktop-nav{display:none}
  .menu-toggle{display:block}
  .section{padding:88px 0}
  .shell,.nav-inner,.footer-inner{width:min(100% - 36px,1240px)}
  .hero-content{padding-bottom:72px}
  .project-grid{grid-template-columns:1fr}
  .listen-grid{grid-template-columns:1fr 1fr}
  .project-card{min-height:420px;padding:28px}
  .about-grid{grid-template-columns:1fr}
  .about-copy{grid-column:1}
  .about-facts{grid-template-columns:1fr}
  .featured{padding:28px}
  .experience-row{grid-template-columns:1fr}
  .service-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .contact-grid>div:first-child,.contact-grid>div:last-child{grid-column:1}
  .footer-inner{flex-direction:column}
}
@media (max-width: 520px){
  .listen-grid{grid-template-columns:1fr}
  .hero h1{font-size:clamp(3.7rem,18vw,6rem)}
  .hero-actions{flex-direction:column;align-items:stretch}
  .btn{width:100%}
  .project-card{min-height:390px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
}


/* DESKTOP NAVIGATION FIX
   Desktop only. Mobile navigation remains untouched. */
@media (min-width: 701px) {
  .desktop-nav {
    display: grid !important;
    grid-template-columns: repeat(6, max-content) !important;
    align-items: center !important;
    justify-content: end !important;
    column-gap: clamp(20px, 2.5vw, 38px) !important;
    row-gap: 0 !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .desktop-nav > li {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .desktop-nav > li > a {
    display: block !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    text-align: center !important;
  }
}