
:root{
  --black:#080808;
  --charcoal:#101010;
  --ivory:#f4f0e9;
  --paper:#ece7df;
  --grey:#a29d96;
  --red:#8d0d18;
  --line:rgba(255,255,255,.14);
  --darkline:rgba(8,8,8,.15);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--black);color:var(--ivory);font-family:"DM Sans",sans-serif;line-height:1.55}
a{color:inherit;text-decoration:none}
img{display:block;width:100%}
h1,h2,h3{font-family:"Italiana",serif;font-weight:400;line-height:.98;letter-spacing:-.015em;margin:0}
p{margin-top:0}
.site-header{
  position:fixed;z-index:100;top:0;left:0;right:0;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 4vw;
  transition:.35s ease;
}
.site-header.scrolled{background:rgba(8,8,8,.88);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.08)}
.wordmark{font-family:"Italiana",serif;letter-spacing:.34em;font-size:1.05rem}
.nav{display:flex;gap:28px;align-items:center;font-size:.78rem;text-transform:uppercase;letter-spacing:.12em}
.outline-link{border:1px solid rgba(255,255,255,.6);padding:10px 15px}
.menu-toggle{display:none;background:none;color:#fff;border:0;font:inherit;letter-spacing:.12em}
.hero{height:100svh;min-height:720px;position:relative;display:grid;place-items:center;overflow:hidden}
.hero-photo{position:absolute;inset:0;background:url("assets/room.webp") center 55%/cover no-repeat;transform:scale(1.03)}
.hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.28),rgba(0,0,0,.28) 30%,rgba(0,0,0,.8) 100%),linear-gradient(90deg,rgba(0,0,0,.3),transparent 60%)}
.hero-inner{position:relative;z-index:2;width:min(1100px,88vw);margin-top:4vh;text-align:center}
.hero-logo{width:min(650px,70vw);height:auto;margin:0 auto 16px;mix-blend-mode:screen}
.hero-sub,.kicker{text-transform:uppercase;letter-spacing:.22em;font-size:.7rem;font-weight:600}
.hero-sub{margin-bottom:38px;color:#d5d0c9}
.hero h1{font-size:clamp(3.2rem,7vw,7.2rem);max-width:1000px;margin:0 auto 20px}
.hero-intro{max-width:620px;margin:0 auto 32px;color:#e5e0da;font-size:1.07rem}
.cta{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 25px;text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;font-weight:600;border:1px solid currentColor;transition:.25s}
.cta.light{background:var(--ivory);color:#111;border-color:var(--ivory)}
.cta.light:hover{background:transparent;color:var(--ivory)}
.cta.dark{background:var(--black);color:var(--ivory);border-color:var(--black)}
.cta.dark:hover{background:transparent;color:var(--black)}
.scroll-cue{position:absolute;z-index:3;bottom:28px;left:4vw;text-transform:uppercase;letter-spacing:.15em;font-size:.65rem;color:#ccc}
.scroll-cue span{margin-left:8px}
.section-pad{padding:120px 6vw}
.statement{background:var(--ivory);color:var(--black)}
.statement>.kicker{max-width:1260px;margin:0 auto 44px;color:#756f68}
.statement-grid{max-width:1260px;margin:auto;display:grid;grid-template-columns:1.08fr .92fr;gap:100px;align-items:start}
.statement h2{font-size:clamp(3.2rem,6vw,6.5rem)}
.lead{font-size:1.3rem;line-height:1.45}
.muted{color:#716b64}
.split-feature{display:grid;grid-template-columns:1.25fr .75fr;min-height:760px;background:#0d0d0d}
.feature-photo{background-size:cover;background-position:center}
.feature-room{background-image:linear-gradient(rgba(0,0,0,.05),rgba(0,0,0,.15)),url("assets/exterior.webp")}
.feature-copy{padding:90px 7vw;display:flex;flex-direction:column;justify-content:center}
.feature-copy h2,.spoon-copy h2,.about-copy h2,.inquire h2,.gallery h2{font-size:clamp(3.4rem,6vw,6rem)}
.feature-copy>p:not(.kicker){color:#c6c0b9;max-width:530px}
.service-list{display:grid;gap:0;margin:32px 0}
.service-list span{padding:16px 0;border-top:1px solid var(--line);font-size:.9rem}
.service-list span:last-child{border-bottom:1px solid var(--line)}
.text-link{display:inline-block;width:max-content;margin-top:18px;border-bottom:1px solid #fff;padding-bottom:4px;font-size:.86rem}
.spoon-fed{display:grid;grid-template-columns:.85fr 1.15fr;background:var(--paper);color:var(--black)}
.spoon-copy{padding:100px 7vw;display:flex;justify-content:center;flex-direction:column}
.spoon-copy p{max-width:540px}
.spoon-photo{min-height:760px;overflow:hidden}
.spoon-photo img{height:100%;object-fit:cover;object-position:center 54%}
.visual-break{height:670px;position:relative;overflow:hidden}
.visual-break>img{height:100%;object-fit:cover;object-position:center 55%;filter:brightness(.7)}
.visual-break:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.78),rgba(0,0,0,.08) 65%)}
.visual-break-copy{position:absolute;z-index:2;left:7vw;bottom:70px}
.visual-break-copy p{font-family:"Italiana",serif;font-size:clamp(3rem,6vw,6rem);line-height:1;margin-bottom:16px}
.visual-break-copy span{text-transform:uppercase;letter-spacing:.16em;font-size:.72rem}
.gallery{background:#0c0c0c}
.gallery-head{max-width:1260px;margin:0 auto 50px;display:flex;justify-content:space-between;align-items:flex-end;gap:60px}
.gallery-head>.muted{max-width:350px}
.masonry{max-width:1260px;margin:auto;columns:3 300px;column-gap:14px}
.masonry figure{break-inside:avoid;margin:0 0 14px;overflow:hidden;background:#191919}
.masonry img{width:100%;height:auto;transition:transform .5s ease,filter .5s ease}
.masonry figure:hover img{transform:scale(1.018);filter:brightness(1.06)}
.about{display:grid;grid-template-columns:1.1fr .9fr;min-height:760px;background:var(--ivory);color:var(--black)}
.about-photo{background:url("assets/backstage.webp") center/cover no-repeat}
.about-copy{padding:100px 8vw;display:flex;justify-content:center;flex-direction:column}
.about-copy p:not(.kicker){max-width:520px}
.inquire{background:var(--paper);color:var(--black);display:grid;grid-template-columns:.85fr 1.15fr;gap:100px}
.inquire-head>p:last-child{max-width:450px}
.quote-form{display:grid;gap:24px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:22px}
label{display:grid;gap:7px;font-size:.75rem;text-transform:uppercase;letter-spacing:.12em;font-weight:600}
input,textarea{font:inherit;color:#111;background:transparent;border:0;border-bottom:1px solid rgba(0,0,0,.5);border-radius:0;padding:13px 0;outline:none}
input:focus,textarea:focus{border-color:#000}
.submit{width:max-content;cursor:pointer}
.form-note{font-size:.75rem;color:#777;max-width:600px}
footer{padding:70px 6vw 28px;background:#050505}
footer>img{width:min(440px,72vw);margin:0 0 28px -3%}
footer>p{color:#aaa;max-width:420px}
.footer-nav{display:flex;gap:24px;flex-wrap:wrap;margin:40px 0 55px;text-transform:uppercase;font-size:.7rem;letter-spacing:.14em}
.footer-bottom{border-top:1px solid #222;padding-top:24px;display:flex;justify-content:space-between;color:#666;font-size:.7rem;text-transform:uppercase;letter-spacing:.1em}

@media(max-width:900px){
  .menu-toggle{display:block}
  .nav{display:none;position:absolute;right:4vw;top:68px;background:#090909;border:1px solid #222;padding:22px;min-width:220px;flex-direction:column;align-items:flex-start}
  .nav.open{display:flex}
  .statement-grid,.inquire{grid-template-columns:1fr;gap:48px}
  .split-feature,.spoon-fed,.about{grid-template-columns:1fr}
  .feature-photo,.about-photo{min-height:520px}
  .spoon-photo{min-height:560px;order:-1}
  .gallery-head{align-items:flex-start;flex-direction:column;gap:18px}
}
@media(max-width:600px){
  .section-pad{padding:82px 6vw}
  .hero{min-height:680px}
  .hero-logo{width:90vw}
  .hero-sub{font-size:.62rem}
  .hero h1{font-size:3.7rem}
  .feature-copy,.spoon-copy,.about-copy{padding:75px 7vw}
  .form-row{grid-template-columns:1fr}
  .visual-break{height:540px}
  .footer-bottom{flex-direction:column;gap:10px}
}


.instagram-band{
  background:#080808;
  color:#f4f0e9;
  padding:72px 6vw;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:40px;
  border-top:1px solid rgba(255,255,255,.12);
  border-bottom:1px solid rgba(255,255,255,.12);
}
.instagram-band>div{max-width:720px}
.instagram-band h2{
  font-family:"Italiana",serif;
  font-size:clamp(3.2rem,7vw,7rem);
  font-weight:400;
  line-height:.95;
  margin:0 0 18px;
}
.instagram-band p:last-child{color:#aaa;max-width:560px}
.instagram-cta{
  border-color:#f4f0e9;
  color:#080808;
  background:#f4f0e9;
  white-space:nowrap;
}
.instagram-cta:hover{
  background:transparent;
  color:#f4f0e9;
}
@media(max-width:760px){
  .instagram-band{flex-direction:column;align-items:flex-start;padding:64px 6vw}
}
