:root { --black:#090909; --paper:#f1eee7; --teal:#006d75; --muted:#a8a8a8; --line:#292929; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--black); color:#fff; font-family:Inter,system-ui,sans-serif; }
a { color:inherit; text-decoration:none; }
.nav { position:fixed; z-index:20; top:0; left:0; right:0; height:76px; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(22px,5vw,76px); background:linear-gradient(to bottom,rgba(9,9,9,.96),rgba(9,9,9,.6),transparent); }
.brand { font:1rem/1 "Archivo Black",sans-serif; letter-spacing:-.04em; }
.brand span { color:var(--teal); }
.nav nav { display:flex; gap:32px; font-size:.82rem; text-transform:uppercase; letter-spacing:.11em; }
.nav nav a:hover,.nav-social:hover { color:var(--teal); }
.nav-social { border-bottom:1px solid var(--teal); padding-bottom:5px; font-size:.8rem; text-transform:uppercase; letter-spacing:.1em; }
.hero { min-height:760px; height:100svh; max-height:1000px; display:grid; grid-template-columns:1.08fr .92fr; position:relative; overflow:hidden; padding:96px clamp(22px,5vw,76px) 34px; }
.hero:after { content:""; position:absolute; inset:auto 0 0; height:30%; background:linear-gradient(transparent,var(--black)); pointer-events:none; }
.hero-noise { position:absolute; inset:0; opacity:.25; background-image:linear-gradient(115deg,transparent 48%,rgba(0,109,117,.2) 49%,transparent 52%),radial-gradient(circle at 82% 20%,#383838 0,transparent 33%); }
.hero-copy { position:relative; z-index:2; align-self:center; max-width:790px; }
.eyebrow { margin:0 0 22px; color:var(--teal); font-size:.76rem; font-weight:700; text-transform:uppercase; letter-spacing:.18em; }
h1,h2 { font-family:"Archivo Black",sans-serif; letter-spacing:-.065em; text-transform:uppercase; margin:0; }
h1 { font-size:clamp(5.2rem,10.5vw,10rem); line-height:.78; }
h1 span { color:transparent; -webkit-text-stroke:2px #fff; }
.hero-lede { max-width:560px; margin:38px 0 30px; color:#d8d8d8; font-size:clamp(1.05rem,1.6vw,1.32rem); line-height:1.55; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:54px; padding:0 24px; text-transform:uppercase; letter-spacing:.09em; font-size:.78rem; font-weight:700; transition:.2s; }
.button-primary { background:var(--teal); color:#fff; }
.button-primary span { margin-left:28px; }
.button-secondary { border:1px solid #666; }
.button:hover { transform:translateY(-2px); }
.series-tag { display:flex; align-items:center; gap:10px; margin-top:36px; text-transform:uppercase; letter-spacing:.16em; font-size:.7rem; color:#888; }
.series-tag span { width:28px; height:1px; background:var(--teal); }
.hero-portrait { position:relative; align-self:end; height:88%; min-height:550px; }
.portrait-frame { position:absolute; inset:7% 12% 0 0; overflow:hidden; filter:grayscale(100%); }
.portrait-frame:after { content:""; position:absolute; inset:0; box-shadow:inset 0 -100px 80px -50px #090909; }
.portrait-frame img { width:100%; height:100%; object-fit:cover; object-position:center; transform:scale(1.05); }
.vertical-type { position:absolute; right:-6px; bottom:18%; writing-mode:vertical-rl; transform:rotate(180deg); font-size:.65rem; letter-spacing:.22em; color:#666; }
.section { padding:clamp(90px,11vw,160px) clamp(22px,5vw,76px); }
.mixes { background:var(--paper); color:#0b0b0b; }
.section-heading { display:grid; grid-template-columns:1fr minmax(280px,460px); align-items:end; gap:40px; margin-bottom:62px; }
.section-heading h2,.about h2 { font-size:clamp(3.4rem,7vw,7.4rem); line-height:.88; }
h2 em { font-style:normal; color:transparent; -webkit-text-stroke:2px currentColor; }
.section-heading>p { margin:0; color:#4d4d4d; line-height:1.65; }
.mix-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:26px; }
.mix-card-featured { grid-column:1/-1; }
.video-wrap { aspect-ratio:16/9; background:#151515; overflow:hidden; }
.video-wrap iframe { width:100%; height:100%; border:0; }
.mix-meta { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; padding:18px 2px 10px; }
.mix-meta>div { display:flex; gap:16px; align-items:baseline; }
.mix-meta span { color:#777; font-size:.73rem; }
.mix-meta h3 { margin:0; font-size:clamp(1rem,1.6vw,1.35rem); }
.mix-meta>a { border-bottom:1px solid #111; font-size:.76rem; text-transform:uppercase; letter-spacing:.1em; white-space:nowrap; }
.channel-link { display:flex; justify-content:space-between; border-top:1px solid #bebbb4; margin-top:56px; padding-top:24px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; }
.about { display:grid; grid-template-columns:.75fr 1.25fr; gap:8vw; border-top:1px solid var(--line); }
.about-label { padding-top:50px; color:#777; text-transform:uppercase; font-size:.72rem; letter-spacing:.15em; }
.about-label strong { display:block; margin-top:18px; color:#fff; font:clamp(2rem,4vw,4.8rem)/.9 "Archivo Black"; letter-spacing:-.07em; }
.about-copy>p:not(.eyebrow) { max-width:760px; color:#bcbcbc; font-size:clamp(1.08rem,1.5vw,1.3rem); line-height:1.7; }
.service-list { display:grid; grid-template-columns:repeat(2,1fr); margin-top:44px; border-top:1px solid var(--line); }
.service-list span { padding:20px 0; border-bottom:1px solid var(--line); font-size:.84rem; text-transform:uppercase; letter-spacing:.08em; }
.booking { background:var(--teal); color:#fff; text-align:center; }
.booking .eyebrow { color:#fff; }
.booking h2 { font-size:clamp(4rem,10vw,10rem); line-height:.8; }
.booking h2 span { color:transparent; -webkit-text-stroke:2px #fff; }
.booking>p:not(.eyebrow) { max-width:620px; margin:36px auto 30px; line-height:1.6; }
.button-light { background:#090909; color:#fff; }
.booking-socials { display:flex; justify-content:center; gap:26px; flex-wrap:wrap; margin-top:32px; font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; }
.booking-socials a,.footer-socials a { border-bottom:1px solid currentColor; padding-bottom:4px; }
footer { min-height:130px; padding:34px clamp(22px,5vw,76px); display:flex; align-items:center; justify-content:space-between; gap:30px; color:#888; font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; }
footer .brand { color:#fff; }
.footer-socials { display:flex; gap:18px; flex-wrap:wrap; }
@media(max-width:800px) {
  .nav nav { display:none; }
  .hero { height:auto; min-height:100svh; grid-template-columns:1fr; padding-top:125px; }
  .hero-copy { align-self:start; }
  .hero-portrait { min-height:360px; height:48vh; margin-top:30px; }
  .portrait-frame { inset:0 4% 0 17%; }
  .vertical-type { right:2px; }
  .section-heading,.about { grid-template-columns:1fr; }
  .about-label { padding-top:0; }
  .mix-grid { grid-template-columns:1fr; }
  .mix-card-featured { grid-column:auto; }
  footer { flex-direction:column; align-items:flex-start; }
}
@media(max-width:520px) {
  .nav-social { display:none; }
  h1 { font-size:clamp(3.5rem,17.5vw,4.75rem); }
  .booking h2 { font-size:clamp(2.6rem,13.5vw,4.5rem); }
  .hero-actions .button { width:100%; }
  .service-list { grid-template-columns:1fr; }
  .mix-meta { flex-direction:column; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .button { transition:none; } }