:root {
  color-scheme: dark;
  --black:#050505; --ink:#0a0a0a; --paper:#f2efe8; --muted:#9b9994; --gold:#c4a66f;
  --line:rgba(255,255,255,.14); --pad:clamp(24px,6vw,88px); --max:1440px;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--black); }
body { margin:0; overflow-x:hidden; background:var(--black); color:var(--paper); font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue",sans-serif; -webkit-font-smoothing:antialiased; }
body.menu-open, body.modal-open { overflow:hidden; }
[hidden] { display:none !important; }
a { color:inherit; text-decoration:none; }
button { color:inherit; font:inherit; }
img { display:block; max-width:100%; }
h1,h2,h3,p { text-wrap:balance; }
a:focus-visible,button:focus-visible { outline:2px solid var(--gold); outline-offset:5px; }

.site-header { position:fixed; z-index:50; inset:0 0 auto; height:76px; padding:0 var(--pad); display:flex; align-items:center; justify-content:space-between; background:linear-gradient(to bottom,rgba(0,0,0,.72),transparent); transition:background .3s; }
.site-header.solid,.site-header.scrolled { background:rgba(5,5,5,.94); border-bottom:1px solid rgba(255,255,255,.06); }
.brand { position:relative; z-index:52; }
.brand img { width:124px; height:56px; object-fit:contain; }
.menu-button { position:relative; z-index:52; width:44px; height:44px; padding:0; border:0; border-radius:50%; background:rgba(255,255,255,.08); display:grid; place-content:center; gap:6px; cursor:pointer; }
.menu-button span { display:block; width:18px; height:1px; background:var(--paper); transition:transform .25s; }
.menu-open .menu-button span:first-child { transform:translateY(3.5px) rotate(45deg); }
.menu-open .menu-button span:last-child { transform:translateY(-3.5px) rotate(-45deg); }
.menu-panel { position:fixed; z-index:49; inset:0; padding:120px var(--pad) 48px; display:flex; flex-direction:column; justify-content:space-between; background:#070707; visibility:hidden; opacity:0; transition:opacity .3s,visibility .3s; }
.menu-open .menu-panel { visibility:visible; opacity:1; }
.menu-main { display:grid; gap:26px; }
.menu-home { width:max-content; color:var(--muted); font-size:13px; letter-spacing:.14em; text-transform:uppercase; }
.menu-nav { display:grid; gap:16px; }
.menu-nav a { display:flex; align-items:baseline; gap:16px; width:max-content; max-width:100%; font-size:clamp(24px,3.6vw,46px); line-height:1.25; letter-spacing:-.02em; }
.menu-nav a span { color:var(--gold); font:400 11px/1 "Helvetica Neue",sans-serif; letter-spacing:.12em; }
.menu-footer { display:flex; justify-content:space-between; gap:24px; color:var(--muted); font-size:14px; }

.hero { position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; }
.hero-media { position:absolute; inset:0; background:url("./cinematic-bg.png") center/cover no-repeat; transform:scale(1.02); animation:hero-breathe 12s ease-in-out infinite alternate; }
.hero-shade { position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.2) 0%,rgba(0,0,0,.32) 44%,#050505 100%); }
.hero-content { position:relative; z-index:1; width:min(100%,1200px); padding:0 var(--pad) 11svh; }
.eyebrow { margin:0 0 24px; color:var(--gold); font-size:13px; letter-spacing:.24em; }
.hero h1 { max-width:1050px; margin:0; font-size:clamp(44px,8vw,104px); font-weight:500; line-height:1.03; letter-spacing:-.045em; }
.hero-copy { max-width:530px; margin:32px 0 28px; color:#b8b6b1; font-size:clamp(17px,2vw,21px); line-height:1.75; }
.text-link,.back-link { display:inline-flex; align-items:center; gap:16px; font-size:16px; border-bottom:1px solid var(--line); padding-bottom:8px; }

.price-section,.services-preview,.approach-section,.contact-section,.content-wrap { width:min(100%,var(--max)); margin-inline:auto; padding-left:var(--pad); padding-right:var(--pad); }
.price-section { min-height:100svh; padding-top:clamp(108px,14vh,170px); padding-bottom:clamp(86px,11vh,138px); scroll-margin-top:64px; display:flex; flex-direction:column; justify-content:center; }
.price-heading { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,430px); align-items:end; gap:48px; margin-bottom:clamp(42px,6vw,78px); }
.price-heading h2 { margin:0; font-size:clamp(42px,6vw,76px); line-height:1.05; font-weight:500; letter-spacing:-.045em; }
.price-heading > p { margin:0 0 4px; color:var(--muted); font-size:15px; line-height:1.8; }
.price-list { border-top:1px solid rgba(255,255,255,.28); }
.price-row { position:relative; display:grid; grid-template-columns:52px minmax(150px,.8fr) minmax(240px,1.3fr) minmax(130px,.55fr) 24px; align-items:center; gap:24px; min-height:92px; padding:20px 0; border-bottom:1px solid var(--line); transition:color .25s,padding .25s,background .25s; }
.price-row::before { content:""; position:absolute; inset:0 calc(var(--pad) * -0.22); background:rgba(196,166,111,.055); opacity:0; transition:opacity .25s; pointer-events:none; }
.price-row:hover { padding-left:8px; color:#fff; }
.price-row:hover::before { opacity:1; }
.price-number { color:var(--gold); font-size:12px; letter-spacing:.16em; }
.price-row h3 { margin:0; font-size:clamp(20px,2.2vw,31px); font-weight:500; letter-spacing:-.02em; }
.price-row p { margin:0; color:var(--muted); font-size:15px; line-height:1.55; }
.price-row strong { color:var(--paper); font-size:clamp(18px,1.7vw,24px); font-weight:400; text-align:right; white-space:nowrap; }
.price-more { color:var(--gold); font-size:16px; text-align:right; }
.services-preview { padding-top:18vh; padding-bottom:12vh; }
.section-heading { margin-bottom:clamp(54px,9vw,110px); }
.section-heading h2,.approach-intro h2,.contact-section h2,.service-cta h2 { margin:0; font-size:clamp(38px,6vw,76px); line-height:1.08; font-weight:500; letter-spacing:-.04em; }
.section-note { margin:22px 0 0; color:var(--muted); font-size:16px; line-height:1.7; }
.service-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(72px,10vw,148px) clamp(24px,4vw,58px); }
.service-card { display:block; border-top:1px solid var(--line); }
.service-card-media { position:relative; aspect-ratio:4/3; overflow:hidden; background:#111; }
.service-card-media img { width:100%; height:100%; object-fit:cover; filter:saturate(.78) contrast(1.07) brightness(.78); transform:scale(1.01); transition:transform .8s cubic-bezier(.2,.7,.2,1),filter .8s ease; }
.service-card-media::before { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,rgba(0,0,0,.06) 25%,rgba(0,0,0,.62) 100%); pointer-events:none; }
.service-card:hover .service-card-media img { transform:scale(1.055); filter:saturate(.9) contrast(1.05) brightness(.86); }
.service-card-media::after { content:""; position:absolute; inset:9%; z-index:2; border:1px solid rgba(255,255,255,.18); pointer-events:none; }
.tone-01 { background:radial-gradient(circle at 75% 20%,rgba(196,166,111,.28),transparent 31%),linear-gradient(135deg,#080808,#19140d 58%,#050505); }
.tone-02 { background:radial-gradient(circle at 25% 25%,rgba(175,183,190,.24),transparent 30%),linear-gradient(145deg,#050505,#11161a 58%,#050505); }
.tone-03 { background:radial-gradient(circle at 78% 72%,rgba(125,87,52,.30),transparent 28%),linear-gradient(145deg,#080706,#1b130c 58%,#050505); }
.tone-04 { background:radial-gradient(circle at 32% 70%,rgba(100,112,122,.28),transparent 30%),linear-gradient(145deg,#050505,#0e1519 58%,#050505); }
.tone-05 { background:radial-gradient(circle at 72% 24%,rgba(112,56,62,.32),transparent 32%),linear-gradient(145deg,#060505,#180b0d 58%,#050505); }
.tone-06 { background:radial-gradient(circle at 24% 26%,rgba(175,151,106,.25),transparent 28%),linear-gradient(145deg,#070707,#17140e 58%,#050505); }
.giant-index { position:absolute; z-index:3; left:7%; bottom:3%; color:rgba(255,255,255,.22); font:300 clamp(72px,10vw,150px)/1 "Helvetica Neue",sans-serif; }
.media-label { position:absolute; z-index:3; right:7%; top:7%; color:rgba(255,255,255,.62); font-size:11px; letter-spacing:.22em; }
.service-card-copy { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; padding:28px 0 8px; }
.service-index { margin:0 0 11px; color:var(--gold); font-size:12px; letter-spacing:.18em; }
.service-card h3 { margin:0; font-size:clamp(28px,3vw,46px); font-weight:500; }
.service-meta { text-align:right; color:var(--muted); }
.service-meta p { margin:0 0 9px; font-size:14px; }
.service-meta strong { color:var(--paper); font-size:20px; font-weight:400; }

.approach-section { padding-top:12vh; padding-bottom:14vh; }
.approach-intro { margin-bottom:clamp(64px,10vw,130px); }
.principles { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); }
.principle { min-height:310px; padding:30px 34px 36px 0; border-right:1px solid var(--line); }
.principle + .principle { padding-left:34px; }
.principle:last-child { border-right:0; }
.principle span { color:var(--gold); font-size:13px; }
.principle h3 { margin:88px 0 18px; font-size:26px; font-weight:500; }
.principle p { margin:0; max-width:310px; color:var(--muted); font-size:16px; line-height:1.8; }

.contact-section,.service-cta { padding-top:16vh; padding-bottom:13vh; border-top:1px solid var(--line); }
.phone-link { display:flex; justify-content:space-between; align-items:center; margin-top:clamp(64px,9vw,110px); padding:24px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); font:300 clamp(34px,6vw,78px)/1.1 "Helvetica Neue",sans-serif; letter-spacing:-.02em; }
.phone-link span { color:var(--gold); font-size:.7em; }
.contact-note { margin:24px 0 0; color:var(--muted); font-size:14px; }
.copy-button { margin-top:24px; padding:11px 17px; border:1px solid var(--line); border-radius:999px; background:transparent; color:var(--muted); font-size:14px; cursor:pointer; transition:border-color .25s,color .25s,background .25s; }
.copy-button:hover { color:var(--paper); border-color:rgba(255,255,255,.34); background:rgba(255,255,255,.04); }
.copy-toast { position:fixed; z-index:120; left:50%; bottom:28px; transform:translate(-50%,18px); padding:11px 18px; border:1px solid rgba(255,255,255,.12); border-radius:999px; background:#f1eee7; color:#111; font-size:14px; opacity:0; pointer-events:none; transition:opacity .25s,transform .25s; }
.copy-toast.visible { opacity:1; transform:translate(-50%,0); }
.mobile-contact { display:none; }
.site-footer { display:flex; justify-content:space-between; gap:24px; padding:30px var(--pad); border-top:1px solid rgba(255,255,255,.08); color:#777; font-size:12px; letter-spacing:.08em; }

.service-page { background:#050505; }
.service-hero { min-height:100svh; display:grid; grid-template-columns:1.08fr .92fr; padding-top:76px; }
.service-hero-copy { padding:clamp(90px,12vw,170px) var(--pad) 72px; display:flex; flex-direction:column; justify-content:flex-end; }
.service-hero-copy .back-link { width:max-content; margin-bottom:auto; color:var(--muted); font-size:14px; }
.service-hero-copy h1 { margin:0; font-size:clamp(58px,8vw,118px); line-height:.98; font-weight:500; letter-spacing:-.055em; }
.service-tagline { max-width:650px; margin:34px 0 0; color:#b8b5af; font-size:clamp(20px,2.5vw,32px); line-height:1.55; }
.service-price { display:flex; gap:28px; align-items:baseline; margin-top:64px; padding-top:22px; border-top:1px solid var(--line); }
.service-price span { color:var(--muted); font-size:14px; }
.service-price strong { font-size:clamp(28px,4vw,48px); font-weight:400; color:#e0c58e; }
.service-hero-visual { position:relative; min-height:620px; overflow:hidden; display:flex; align-items:flex-end; justify-content:space-between; padding:42px; background:radial-gradient(circle at 72% 20%,rgba(196,166,111,.26),transparent 32%),linear-gradient(145deg,#0b0b0b,#17120c 65%,#050505); }
.service-hero-visual.has-cover { background-image:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.68)),var(--cover); background-size:cover; background-position:center; }
.service-hero-visual::after { content:""; position:absolute; inset:8%; border:1px solid rgba(255,255,255,.14); }
.service-hero-visual span { color:rgba(255,255,255,.16); font:300 clamp(120px,20vw,320px)/.8 "Helvetica Neue",sans-serif; letter-spacing:-.08em; }
.service-hero-visual small { position:relative; z-index:1; color:rgba(255,255,255,.55); font-size:11px; letter-spacing:.22em; writing-mode:vertical-rl; }
.service-overview { padding-top:14vh; padding-bottom:12vh; }
.lead { max-width:1000px; margin:0 0 12vh; font-size:clamp(28px,4.4vw,58px); line-height:1.35; letter-spacing:-.035em; }
.feature-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); border-top:1px solid var(--line); }
.feature-item { min-height:220px; padding:28px 28px 32px 0; border-right:1px solid var(--line); }
.feature-item + .feature-item { padding-left:28px; }
.feature-item:last-child { border-right:0; }
.feature-item span { color:var(--gold); font-size:12px; }
.feature-item h3 { margin:68px 0 0; font-size:22px; line-height:1.5; font-weight:500; }
.samples-section,.delivery-section,.process-section { padding-top:12vh; padding-bottom:12vh; }
.sample-grid { display:grid; grid-template-columns:2fr 1fr; gap:20px; }
.sample-card { position:relative; aspect-ratio:16/10; border:0; overflow:hidden; text-align:left; cursor:pointer; background:#111; }
.sample-card:nth-child(2) { aspect-ratio:auto; }
.sample-card .poster { position:absolute; inset:0; background:radial-gradient(circle at 70% 25%,rgba(196,166,111,.22),transparent 30%),linear-gradient(145deg,#0a0a0a,#18130e 62%,#050505); background-position:center; background-size:cover; transition:transform .5s; }
.sample-card:nth-child(2) .poster { background:radial-gradient(circle at 30% 70%,rgba(143,153,162,.18),transparent 30%),linear-gradient(145deg,#090909,#101518 62%,#050505); }
.sample-card:hover .poster { transform:scale(1.025); }
.sample-play { position:absolute; inset:0; display:grid; place-content:center; }
.sample-play span { display:grid; place-content:center; width:62px; height:62px; border:1px solid rgba(255,255,255,.55); border-radius:50%; background:rgba(0,0,0,.24); backdrop-filter:blur(8px); font-size:16px; padding-left:3px; }
.sample-caption { position:absolute; inset:auto 24px 24px; display:flex; justify-content:space-between; gap:24px; align-items:flex-end; }
.sample-caption strong { font-size:18px; font-weight:500; }
.sample-caption small { color:#aaa; font-size:12px; }
.sample-card[data-ready="false"] .sample-play span { color:rgba(255,255,255,.76); }
.delivery-list { border-top:1px solid var(--line); }
.delivery-item { display:grid; grid-template-columns:80px 1fr 1fr; gap:28px; padding:30px 0; border-bottom:1px solid var(--line); }
.delivery-item span { color:var(--gold); font-size:13px; }
.delivery-item h3 { margin:0; font-size:22px; font-weight:500; }
.delivery-item p { margin:0; color:var(--muted); line-height:1.7; }
.process-list { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); }
.process-list li { min-height:270px; padding:28px 24px 32px 0; border-right:1px solid var(--line); display:flex; flex-direction:column; justify-content:space-between; }
.process-list li + li { padding-left:24px; }
.process-list li:last-child { border-right:0; }
.process-list span { color:var(--gold); font-size:12px; }
.process-list h3 { margin:0 0 14px; font-size:22px; font-weight:500; }
.process-list p { margin:0; color:var(--muted); font-size:15px; line-height:1.7; }
.service-cta { width:min(100%,var(--max)); margin:auto; padding-left:var(--pad); padding-right:var(--pad); }
.next-service { display:flex; justify-content:space-between; gap:24px; align-items:center; margin-top:80px; padding:28px 0; border-top:1px solid var(--line); color:var(--muted); }
.next-service strong { color:var(--paper); font-size:24px; font-weight:500; }

.sample-modal { position:fixed; z-index:100; inset:0; background:rgba(0,0,0,.92); padding:clamp(20px,5vw,72px); }
.sample-modal[hidden] { display:none; }
.modal-close { position:absolute; z-index:2; top:24px; right:24px; width:48px; height:48px; border:1px solid rgba(255,255,255,.2); border-radius:50%; background:#111; font-size:28px; cursor:pointer; }
.modal-stage { height:100%; border:1px solid var(--line); display:grid; place-content:center; text-align:center; background:radial-gradient(circle at center,rgba(196,166,111,.12),transparent 32%),#080808; }
.modal-video { width:100%; height:100%; max-height:calc(100vh - 2 * clamp(20px,5vw,72px)); object-fit:contain; background:#000; }
.modal-placeholder { padding:36px; }
.modal-play { font-size:36px; color:var(--gold); }
.modal-placeholder p { margin:24px 0 10px; font-size:24px; }
.modal-placeholder small { color:var(--muted); font-size:14px; }

.not-found { min-height:100svh; display:grid; place-content:center; padding:100px var(--pad); text-align:center; }
.not-found .eyebrow { margin-bottom:28px; }
.not-found h1 { margin:0; font-size:clamp(76px,16vw,200px); line-height:.8; font-weight:300; letter-spacing:-.07em; color:rgba(255,255,255,.16); }
.not-found h2 { margin:34px 0 16px; font-size:clamp(28px,4vw,52px); font-weight:500; }
.not-found p { margin:0 auto 32px; max-width:520px; color:var(--muted); line-height:1.8; }

.js .reveal { opacity:0; transform:translateY(28px); transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1); }
.js .reveal.visible { opacity:1; transform:none; }
@keyframes hero-breathe { to { transform:scale(1.07); } }

@media (max-width:900px) {
  .price-heading { grid-template-columns:1fr; gap:22px; }
  .price-heading > p { max-width:560px; }
  .price-row { grid-template-columns:40px minmax(130px,.8fr) minmax(200px,1.2fr) minmax(110px,.6fr) 18px; gap:16px; }
  .service-grid { grid-template-columns:1fr; }
  .principles,.feature-list { grid-template-columns:1fr; }
  .principle,.feature-item,.principle + .principle,.feature-item + .feature-item { min-height:0; padding:28px 0 34px; border-right:0; border-bottom:1px solid var(--line); }
  .principle h3,.feature-item h3 { margin-top:44px; }
  .service-hero { grid-template-columns:1fr; }
  .service-hero-copy { min-height:72svh; }
  .service-hero-visual { min-height:58svh; }
  .sample-grid { grid-template-columns:1fr; }
  .sample-card:nth-child(2) { aspect-ratio:16/10; }
  .process-list { grid-template-columns:repeat(2,1fr); }
  .process-list li:nth-child(2) { border-right:0; }
  .delivery-item { grid-template-columns:48px 1fr; }
  .delivery-item p { grid-column:2; }
}

@media (max-width:700px) {
  .site-header { height:64px; }
  .brand img { width:104px; }
  .hero-media { animation:none; transform:none; }
  .hero-content { padding-bottom:10svh; }
  .hero-copy { max-width:90%; }
  .price-section { min-height:auto; padding-top:120px; padding-bottom:100px; }
  .price-heading { margin-bottom:38px; }
  .price-heading > p { font-size:14px; }
  .price-row { grid-template-columns:28px minmax(0,1fr) auto; grid-template-areas:"number title price" ". detail price"; gap:6px 12px; min-height:94px; padding:18px 0; }
  .price-number { grid-area:number; align-self:start; padding-top:5px; }
  .price-row h3 { grid-area:title; font-size:21px; }
  .price-row p { grid-area:detail; font-size:13px; }
  .price-row strong { grid-area:price; align-self:center; font-size:18px; }
  .price-more { display:none; }
  .price-row:hover { padding-left:0; }
  .services-preview { padding-top:14vh; }
  .service-card-media { aspect-ratio:4/5; }
  .service-card-copy { display:block; }
  .service-meta { margin-top:22px; display:flex; justify-content:space-between; gap:16px; text-align:left; }
  .service-meta p { max-width:60%; }
  .menu-panel { padding-top:96px; }
  .menu-footer,.site-footer { display:grid; }
  .mobile-contact { position:fixed; z-index:44; right:16px; bottom:max(16px,env(safe-area-inset-bottom)); display:flex; align-items:center; gap:12px; padding:12px 16px; border:1px solid rgba(0,0,0,.08); border-radius:999px; background:#f1eee7; color:#0a0a0a; box-shadow:0 10px 34px rgba(0,0,0,.34); font-size:13px; }
  .mobile-contact strong { font-size:15px; font-weight:500; }
  .menu-open .mobile-contact,.modal-open .mobile-contact { display:none; }
  .copy-toast { bottom:max(82px,calc(env(safe-area-inset-bottom) + 70px)); }
  .service-hero { padding-top:64px; }
  .service-hero-copy { min-height:74svh; padding-top:82px; }
  .service-price { justify-content:space-between; }
  .service-hero-visual { min-height:52svh; padding:26px; }
  .service-overview { padding-top:11vh; }
  .lead { margin-bottom:9vh; }
  .delivery-item { gap:16px; }
  .process-list { grid-template-columns:1fr; }
  .process-list li,.process-list li + li { min-height:220px; padding:26px 0; border-right:0; border-bottom:1px solid var(--line); }
  .next-service { align-items:flex-end; }
  .next-service strong { text-align:right; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .hero-media { animation:none; }
  .js .reveal { opacity:1; transform:none; transition:none; }
}
