:root{--bg:#090909;--surface:#111;--text:#f3f0eb;--muted:#aaa39b;--accent:#d96b3d;--line:#292929;--max:1200px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.6}a{color:inherit;text-decoration:none}
.site-header{position:fixed;z-index:20;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:22px 5vw;background:linear-gradient(#050505d9,transparent);backdrop-filter:blur(6px)}.brand img{width:145px;height:auto}.site-header nav{display:flex;align-items:center;font-size:14px}.nav-menu{display:flex;gap:28px;align-items:center}.site-header nav a{opacity:.9}.nav-cta{border:1px solid #ffffff55;padding:10px 17px;border-radius:999px}
.hero{min-height:100vh;position:relative;display:flex;align-items:center;overflow:hidden}.hero-bg{position:absolute;inset:0;background:linear-gradient(90deg,#03030aee 0%,#05050a99 48%,#05050a25 100%),url("assets/hero-studio.jpeg") center/cover no-repeat}.hero-content{position:relative;z-index:1;max-width:850px;padding:210px 7vw 100px}.eyebrow{letter-spacing:.18em;font-size:12px;font-weight:700;color:var(--accent);margin:0 0 20px}.hero h1{font-size:clamp(48px,7vw,92px);line-height:.98;letter-spacing:-.05em;margin:0 0 28px}.hero h1 span{color:#c8c1b9}.lead{font-size:clamp(17px,2vw,21px);max-width:680px;color:#d2cdc6}.actions{display:flex;gap:14px;margin-top:36px;flex-wrap:wrap}.button{display:inline-flex;align-items:center;justify-content:center;padding:13px 23px;border-radius:999px;border:1px solid #ffffff38;font-weight:700;font-size:14px;cursor:pointer}.primary{background:var(--accent);border-color:var(--accent);color:#fff}.ghost{background:#ffffff0a}.hero-scroll{position:absolute;bottom:28px;left:7vw;font-size:10px;letter-spacing:.2em;color:#aaa}
.section{max-width:var(--max);margin:auto;padding:130px 5vw}.about{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center}.section-image img{width:100%;display:block;filter:none;aspect-ratio:4/5;object-fit:cover}.section-copy h2,.section-heading h2,.contact h2{font-size:clamp(40px,5vw,66px);line-height:1.03;letter-spacing:-.04em;margin:0 0 28px}.section-copy p{color:var(--muted);font-size:17px;max-width:580px}
.services{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.section-heading{margin-bottom:65px}.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}.service-grid article{background:var(--bg);padding:35px 28px;min-height:280px}.service-grid span{color:var(--accent);font-size:12px;letter-spacing:.15em}.service-grid h3{font-size:25px;margin:45px 0 15px}.service-grid p{color:var(--muted);font-size:15px}
.studio-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:0;min-height:390px}.studio-gallery img{width:100%;height:390px;object-fit:cover;display:block;filter:saturate(.7);transition:filter .3s,transform .3s}.studio-gallery img:hover{filter:saturate(1);transform:scale(1.01)}
.projects{background:var(--surface)}.project-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}.project-card{background:#0d0d0d;border:1px solid var(--line);padding-bottom:25px;transition:transform .25s,border-color .25s}.project-card:hover{transform:translateY(-4px);border-color:#555}.youtube-thumb{position:relative;aspect-ratio:16/9;background:#222;overflow:hidden}.youtube-thumb img{width:100%;height:100%;display:block;object-fit:cover}.play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:58px;height:42px;border-radius:12px;background:#ff0000;color:white;display:grid;place-items:center;font-size:20px;padding-left:3px;box-shadow:0 4px 20px #0008}.project-card p,.project-card h3,.project-card small{margin-left:25px;margin-right:25px}.project-card p{color:var(--accent);font-size:11px;letter-spacing:.12em;text-transform:uppercase;margin-top:20px;margin-bottom:4px}.project-card h3{font-size:22px;margin-top:0;margin-bottom:0}.project-card small{color:#777}
.contact{max-width:var(--max);margin:auto;padding:130px 5vw;display:grid;grid-template-columns:1fr 1fr;gap:100px}.contact>div>p:not(.eyebrow){color:var(--muted);max-width:500px;font-size:17px}.contact form{display:grid;gap:18px}.contact label{display:grid;gap:7px;font-size:12px;color:#bbb;letter-spacing:.05em}.contact input,.contact select,.contact textarea{width:100%;background:#111;border:1px solid #333;color:white;padding:14px 15px;font:inherit;border-radius:3px;outline:none}.contact input:focus,.contact select:focus,.contact textarea:focus{border-color:var(--accent)}.form-note{font-size:11px;color:#777;margin:0}
.form-status{font-size:13px;margin:4px 0 0;min-height:1.2em}
.form-status.is-success{color:#7fd97f}
.form-status.is-error{color:#e07a5f}
footer{border-top:1px solid var(--line);padding:45px 5vw;display:flex;justify-content:space-between;align-items:center;color:#777;font-size:12px}.footer-links{display:flex;gap:25px}.footer-links a:hover{color:white}
@media(max-width:850px){.site-header{padding:18px 5vw}.site-header nav .nav-menu{display:flex;gap:18px;align-items:center}.site-header nav .nav-menu a{display:block}.hero-content{padding-top:140px}.about,.contact{grid-template-columns:1fr;gap:50px}.service-grid{grid-template-columns:1fr 1fr}.studio-gallery{grid-template-columns:1fr 1fr}.studio-gallery img{height:300px}.studio-gallery img:nth-child(3){display:none}.project-grid{grid-template-columns:1fr}}
@media(max-width:520px){.brand img{width:125px}.hero h1{font-size:50px}.service-grid{grid-template-columns:1fr}.studio-gallery{grid-template-columns:1fr}.studio-gallery img{height:280px}.studio-gallery img:nth-child(2),.studio-gallery img:nth-child(3){display:none}}

.live-photo{max-width:var(--max);margin:0 auto;padding:0 5vw 110px}
.live-photo img{display:block;width:100%;height:auto;max-height:620px;object-fit:contain;object-position:center top;filter:saturate(.75);background:#080808}
@media(max-width:850px){.live-photo{padding-bottom:80px}.live-photo img{height:300px}}

/* Fixed header: leave room above section headings when navigating by anchor. */
.anchor-section{scroll-margin-top:70px}.projects,.contact{scroll-margin-top:70px}
@media(max-width:850px){.anchor-section{scroll-margin-top:80px}.projects,.contact{scroll-margin-top:80px}}

.footer-social{display:flex;gap:1.25rem;align-items:center;margin-bottom:1rem}
.footer-social a{color:inherit;text-decoration:none;opacity:.8;transition:opacity .2s ease}
.footer-social a:hover{opacity:1}
.legal-page{min-height:100vh;padding:8rem 1.5rem 5rem;background:#080808;color:#f2f2f2}
.legal-page .container{max-width:820px;margin:0 auto}
.legal-page h1{margin-bottom:2rem}
.legal-page h2{margin-top:2.25rem;margin-bottom:.75rem}
.legal-page p{line-height:1.75;color:#cfcfcf}
.legal-back{display:inline-block;margin-bottom:3rem;color:#d96b3d;text-decoration:none}

/* Mobile navigation */
.nav-toggle{display:none;background:transparent;border:0;padding:.55rem;cursor:pointer}
.nav-toggle span{display:block;width:24px;height:2px;margin:5px 0;background:#f2f2f2;transition:transform .2s ease,opacity .2s ease}
@media (max-width: 850px){
  .site-header{padding:18px 5vw}
  .site-header nav{position:relative}
  .nav-toggle{display:block}
  .nav-menu{
    display:none !important;
    position:absolute;
    top:calc(100% + 12px);
    right:0;
    min-width:220px;
    padding:.65rem 0;
    background:rgba(8,8,8,.98);
    border:1px solid rgba(255,255,255,.12);
    border-radius:10px;
    box-shadow:0 16px 40px rgba(0,0,0,.4);
    flex-direction:column;
    align-items:stretch;
    gap:0;
  }
  .nav-menu.is-open{display:flex !important}
  .nav-menu a{display:block !important;padding:.85rem 1.15rem}
  .nav-menu .nav-cta{margin:.4rem .8rem}
  .nav-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle.is-open span:nth-child(2){opacity:0}
  .nav-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}

.site-logo{display:block;color:inherit;text-decoration:none}

/* Correct anchor position for the fixed header */
#about{scroll-margin-top:95px}
@media(max-width:850px){#about{scroll-margin-top:80px}}

/* Fixed header: transparent + blurred background, crisp logo and brand name */
.site-header{
  background:rgba(8,8,8,.28);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  isolation:isolate;
}
.site-header .brand{
  position:relative;
  z-index:100;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  width:max-content;
  min-width:180px;
  overflow:visible;
  color:#fff;
  text-decoration:none;
  flex-shrink:0;
  opacity:1;
  filter:none;
}
.site-header .brand img{
  position:relative;
  z-index:101;
  display:block;
  width:180px;
  max-width:180px;
  height:auto;
  opacity:1;
  visibility:visible;
  filter:none;
}
.site-header .brand .brand-subtitle{
  position:relative;
  z-index:102;
  display:block;
  color:#fff;
  font-size:10px;
  line-height:1.1;
  font-weight:600;
  letter-spacing:.16em;
  text-align:center;
  align-self:center;
  margin:0;
  white-space:nowrap;
  text-shadow:0 1px 6px rgba(0,0,0,.95);
}
@media(max-width:760px){
  .site-header{background:rgba(8,8,8,.24)}
  .site-header .brand{min-width:150px}
  .site-header .brand img{width:150px;max-width:150px}
  .site-header .brand .brand-subtitle{font-size:9px;letter-spacing:.14em;margin:0}
}
@media(max-width:520px){
  .site-header .brand{min-width:145px}
  .site-header .brand img{width:145px;max-width:145px}
}

/* V27: move hero headline slightly below the transparent header on desktop */
@media (min-width:851px){
  .hero-content{transform:translateY(55px)}
}

/* V28: move hero headline below the transparent header on iPhone/mobile */
@media (max-width:850px){
  .hero-content{transform:translateY(45px)}
}