/* ============================================================
   BaoHome
   Apple's spatial discipline, BaoHome's temperature.
   Palette sampled directly from the logo and the room plate.
   ============================================================ */

:root{
  --cream:      #F5F3EE;   /* page ground, from the logo paper */
  --paper:      #FBFAF8;   /* raised cards */
  --stage:      #F0EFEB;   /* matches the studio photography ground */
  --clay:       #9F5434;   /* the logo terracotta, sampled */
  --clay-deep:  #7E4127;
  --ink:        #1B1714;   /* warm near-black */
  --ink-2:      #5C534A;
  --ink-3:      #8A8077;
  --line:       rgba(27,23,20,.13);

  --serif: "Playfair Display", "Iowan Old Style", Georgia, serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --pad:    clamp(20px, 5vw, 48px);
  --gap-s:  clamp(88px, 13vh, 168px);   /* vertical rhythm between sections */
  --wide:   1200px;
  --ease:   cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } }

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  font-weight:350;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,canvas{ max-width:100%; display:block }
h1,h2,h3{ margin:0; font-weight:400 }
p{ margin:0 }

::selection{ background:var(--clay); color:var(--cream) }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip{
  position:absolute; left:-9999px; top:12px; z-index:200;
  background:var(--ink); color:var(--cream); padding:12px 18px; border-radius:999px;
  font-size:14px; text-decoration:none;
}
.skip:focus{ left:12px }

:where(a,button,input,summary):focus-visible{
  outline:2px solid var(--clay); outline-offset:3px; border-radius:4px;
}

/* ─────────────────────────── type ─────────────────────────── */

.display{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(3.1rem, 8.6vw, 7rem);
  line-height:.98;
  letter-spacing:-.022em;
}
.display--2{ font-size:clamp(2.4rem, 5.6vw, 4.4rem); line-height:1.04 }

.han{ font-family:"Songti SC","Noto Serif SC","Hiragino Mincho ProN",var(--serif); }
.han--lg{ color:var(--clay); font-size:.82em; margin-right:.12em }

.eyebrow{
  font-size:.75rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--clay);
  margin-bottom:1.5rem;
  font-weight:500;
}
.eyebrow--light{ color:#EFC3AA; text-shadow:0 1px 18px rgba(27,23,20,.6) }

.lede{
  font-size:clamp(1.03rem, 1.5vw, 1.22rem);
  color:var(--ink-2);
  max-width:44ch;
  line-height:1.66;
}
.lede--center{ margin-inline:auto; text-align:center }

/* ─────────────────────────── buttons ─────────────────────────── */

.btn{
  --bg:var(--ink); --fg:var(--cream);
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--bg); color:var(--fg);
  font-family:var(--sans); font-size:.94rem; font-weight:500; letter-spacing:.01em;
  padding:.92em 1.9em; border:1px solid var(--bg); border-radius:999px;
  text-decoration:none; cursor:pointer;
  transition:background .45s var(--ease), color .45s var(--ease),
             border-color .45s var(--ease), transform .45s var(--ease);
}
.btn:hover{ --bg:var(--clay); transform:translateY(-1px) }
.btn--ghost{ --bg:transparent; --fg:var(--ink); border-color:var(--line) }
.btn--ghost:hover{ --bg:transparent; --fg:var(--clay); border-color:var(--clay) }
.btn--sm{ padding:.62em 1.35em; font-size:.85rem }

/* ─────────────────────────── nav ─────────────────────────── */

.nav{
  position:fixed; inset:0 0 auto; z-index:100;
  transition:background .5s var(--ease), border-color .5s var(--ease),
             backdrop-filter .5s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(245,243,238,.82);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom-color:var(--line);
}
.nav__inner{
  max-width:var(--wide); margin-inline:auto;
  padding:14px var(--pad);
  display:flex; align-items:center; gap:28px;
}
.nav__brand{
  display:flex; align-items:center; gap:10px;
  text-decoration:none; color:var(--ink); margin-right:auto;
}
.nav__brand img{ width:auto; height:30px }
.nav__brand span{
  font-family:var(--serif); font-size:1.18rem; letter-spacing:-.01em;
}
.nav__links{ display:flex; gap:30px }
.nav__links a{
  color:var(--ink-2); text-decoration:none; font-size:.9rem;
  transition:color .35s var(--ease);
}
.nav__links a:hover{ color:var(--clay) }

@media (max-width:820px){
  .nav__links{ display:none }
  .nav__brand span{ display:none }
  .nav__brand img{ height:34px }
}

/* ─────────────────────────── hero ─────────────────────────── */

/* The hero used to be pinned with a scroll-driven dissolve. On iOS Safari that
   sticky layer painted through the sections below it, so it is now an ordinary
   section — the intro video carries the drama instead. */
.pitch{
  text-align:center;
  padding-top:clamp(96px,14vh,150px);
}
.hero__inner{ width:100%; max-width:var(--wide); margin-inline:auto }
.hero__copy .lede{ margin-inline:auto; margin-top:1.6rem }
.pitch .display{ margin-bottom:.1em }

.hero__cue{
  display:block; width:23px; height:37px;
  margin:clamp(38px,6vh,68px) auto 0;
  border:1px solid var(--line); border-radius:999px;
  position:relative;
}
.hero__cue span{
  position:absolute; left:50%; top:8px;
  width:3px; height:6px; margin-left:-1.5px;
  border-radius:2px; background:var(--clay);
  animation:cue 2s var(--ease) infinite;
}
@keyframes cue{
  0%{ opacity:0; transform:translateY(0) }
  28%{ opacity:1 }
  68%{ opacity:1; transform:translateY(13px) }
  100%{ opacity:0; transform:translateY(15px) }
}

/* price, risk and logistics answered before the first scroll — the three
   things a visitor asks that the headline alone cannot */
.hero__trust{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:.6rem 1.5rem;
  margin-top:1.9rem;
  font-size:.83rem; color:var(--ink-3);
}
.hero__trust span{ display:inline-flex; align-items:center }
.hero__trust span::before{
  content:""; width:4px; height:4px; border-radius:50%;
  background:var(--clay); margin-right:.6rem; opacity:.75;
}
.hero__trust span:first-child{ color:var(--ink); font-weight:500 }

/* the product reveal, now that it has been earned */
.showcase .swatcher{ margin-top:0 }
.showcase__cta{
  margin:clamp(40px,5vw,64px) 0 0; text-align:center;
}
.showcase__cta small{
  display:block; margin-top:1rem;
  font-size:.82rem; color:var(--ink-3);
}

.nav__price{
  font-size:.9rem; color:var(--ink-2);
  opacity:0; transition:opacity .5s var(--ease);
}
.nav.is-stuck .nav__price{ opacity:1 }
@media (max-width:820px){ .nav__price{ display:none } }

.hero__actions{
  display:flex; gap:12px; justify-content:center; flex-wrap:wrap;
  margin-top:2.4rem;
}

/* colourway stage — the studio ground colour, so the sofa sits on its own plinth */
.swatcher{ margin:clamp(48px,7vw,86px) 0 0 }
.swatcher__stage{
  position:relative;
  background:var(--stage);
  border-radius:clamp(16px,2.4vw,30px);
  overflow:hidden;
  aspect-ratio:16/9;
  box-shadow:0 1px 0 rgba(27,23,20,.05), 0 24px 60px -34px rgba(27,23,20,.35);
}
.swatcher__img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .72s var(--ease);
}
.swatcher__img.is-on{ opacity:1 }

.swatcher__ui{
  display:flex; align-items:center; justify-content:center; gap:22px;
  margin-top:26px; flex-wrap:wrap;
}
.chips{ display:flex; gap:10px }
.chip{
  width:30px; height:30px; padding:0; cursor:pointer;
  border-radius:50%; background:var(--c);
  border:1px solid rgba(27,23,20,.18);
  box-shadow:0 0 0 0 var(--cream), 0 0 0 0 var(--ink);
  transition:box-shadow .38s var(--ease), transform .38s var(--ease);
}
.chip:hover{ transform:translateY(-2px) }
.chip.is-on{ box-shadow:0 0 0 3px var(--cream), 0 0 0 4px var(--ink) }

.swatcher__name{ font-size:.92rem; color:var(--ink-2) }
.swatcher__name strong{ font-weight:500; color:var(--ink) }

/* ─────────────────────────── sections ─────────────────────────── */

.section{
  max-width:var(--wide); margin-inline:auto;
  padding:var(--gap-s) var(--pad);
}
.section__head{ text-align:center; margin-bottom:clamp(52px,7vw,88px) }
.section__head .lede{ margin-top:1.5rem }

/* ─────────────────────── how it works ─────────────────────── */

.steps{
  list-style:none; margin:0; padding:0;
  display:grid; gap:clamp(30px,4vw,48px);
  grid-template-columns:repeat(auto-fit,minmax(248px,1fr));
}
.step{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:20px;
  padding:clamp(28px,3.2vw,40px);
}
.step__n{
  font-family:var(--serif); font-size:.92rem; color:var(--clay);
  letter-spacing:.06em;
}
.step__art{
  width:100%; max-width:168px; height:auto; color:var(--clay);
  margin:20px 0 26px; opacity:.85;
}
.step h3{ font-family:var(--serif); font-size:1.42rem; margin-bottom:.55rem }
.step p{ color:var(--ink-2); font-size:.98rem }

.stats{
  margin:clamp(56px,7vw,84px) 0 0; padding:0;
  display:grid; gap:2px;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  background:var(--line);
  border:1px solid var(--line);
  border-radius:20px; overflow:hidden;
}
.stats > div{ background:var(--cream); padding:30px 26px; text-align:center }
.stats dt{
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:.7rem;
}
.stats dd{
  margin:0; font-family:var(--serif); font-size:clamp(2.1rem,3.6vw,2.9rem);
  line-height:1; color:var(--ink);
}
.stats dd span{
  display:block; font-family:var(--sans); font-size:.8rem;
  color:var(--ink-2); margin-top:.6rem; letter-spacing:0;
}

/* ─────────────────── opening sequence ─────────────────── */
/* The frame sequence now opens the page: it autoplays once per session at
   8fps, then the headline arrives. Returning visitors are served only the
   final frame, which saves them the entire 2.9 MB sequence. */

.intro{
  position:relative;
  height:100svh; min-height:500px;
  overflow:hidden;
  background:var(--ink);
  display:grid; place-items:center;
}
.intro__stage{ position:absolute; inset:0 }
.intro__video,
.intro__still{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center 56%;
}
/* the still covers the video until it can actually play, and takes over again
   for anyone who has already seen it */
.intro__video{ z-index:1; opacity:0; transition:opacity .45s var(--ease) }
.intro.is-playing .intro__video{ opacity:1 }
.intro__still{ z-index:0 }

/* the veil only arrives with the type — the footage plays clean */
.intro__scrim{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 50% 52%, rgba(27,23,20,.06) 0%, rgba(27,23,20,.58) 100%),
    linear-gradient(180deg, rgba(27,23,20,.44) 0%, rgba(27,23,20,.16) 44%, rgba(27,23,20,.7) 100%);
  opacity:0; transition:opacity 1.2s var(--ease);
}
.intro.is-done .intro__scrim{ opacity:1 }

.intro__copy{
  position:relative; z-index:2;
  text-align:center; color:var(--cream);
  padding:0 var(--pad); max-width:900px;
  opacity:0; transform:translateY(16px);
  transition:opacity 1.3s var(--ease), transform 1.3s var(--ease);
  text-shadow:0 1px 44px rgba(0,0,0,.45);
}
.intro.is-done .intro__copy{ opacity:1; transform:none }
.intro__copy .display{ color:var(--cream) }
.intro__sub{
  margin-top:1.15rem;
  font-size:clamp(.95rem,1.5vw,1.16rem);
  letter-spacing:.03em;
  color:rgba(245,243,238,.8);
}

.intro__cue{
  position:absolute; left:50%; bottom:clamp(22px,5vh,54px);
  transform:translateX(-50%); z-index:2;
  width:23px; height:37px;
  border:1px solid rgba(245,243,238,.42); border-radius:999px;
  opacity:0; transition:opacity 1s var(--ease) .3s;
}
.intro.is-done .intro__cue{ opacity:1 }
.intro__cue span{
  position:absolute; left:50%; top:8px;
  width:3px; height:6px; margin-left:-1.5px;
  border-radius:2px; background:var(--cream);
  animation:cue 2s var(--ease) infinite;
}

/* Cover-cropping 16:9 footage into a tall viewport is brutal — a phone would
   see about a quarter of the frame width and lose the sofa entirely. Below a
   landscape-ish aspect the footage letterboxes inside the full-screen section
   instead, so the whole room stays in shot. */
/* Phones get their own native 9:16 film, so the section can finally go
   properly full-bleed instead of letterboxing a landscape crop. The type sits
   over the footage, low, where the pull-back leaves clean wall. */
@media (max-aspect-ratio: 7/5){
  .intro{
    display:flex; flex-direction:column; justify-content:flex-end;
    padding:0 0 clamp(64px,14vh,120px);
  }
  .intro__stage{ position:absolute; inset:0 }
  .intro__video,
  .intro__still{ object-fit:cover; object-position:center }
  .intro__copy{ padding:0 var(--pad) }
  .intro__copy .display{ font-size:clamp(2.7rem,11.5vw,3.8rem) }
}

/* Phones get their own native 9:16 film, so the section can finally go
   properly full-bleed instead of letterboxing a landscape crop. The type sits
   over the footage, low, where the pull-back leaves clean wall. */
@media (max-aspect-ratio: 7/5){
  .intro{
    display:flex; flex-direction:column; justify-content:flex-end;
    padding:0 0 clamp(64px,14vh,120px);
  }
  .intro__stage{ position:absolute; inset:0 }
  .intro__video,
  .intro__still{ object-fit:cover; object-position:center }
  .intro__copy{ padding:0 var(--pad) }
  .intro__copy .display{ font-size:clamp(2.7rem,11.5vw,3.8rem) }
}

/* ─────────────────────────── rooms ─────────────────────────── */

.rooms__grid{
  display:grid; gap:clamp(20px,3vw,34px);
  grid-template-columns:repeat(2,1fr);
}
@media (max-width:760px){
  .rooms__grid{ grid-template-columns:1fr }
}
.room{ margin:0 }
.room img{
  width:100%; height:auto; border-radius:16px;
  background:var(--stage);
}
.room figcaption{
  margin-top:14px; font-size:.9rem; color:var(--ink-2);
  display:flex; gap:.5em; align-items:baseline;
}
.room figcaption strong{ font-weight:500; color:var(--ink) }

/* ─────────────────────────── specs ─────────────────────────── */

.specs__grid{
  display:grid; gap:2px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  background:var(--line); border:1px solid var(--line);
  border-radius:20px; overflow:hidden;
}
.specs__grid dl{ margin:0; background:var(--cream); padding:clamp(26px,3vw,36px) }
.specs__grid dt{
  font-size:.72rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-3); margin-top:1.4rem;
}
.specs__grid dt:first-child{ margin-top:0 }
.specs__grid dd{ margin:.35rem 0 0; font-size:1.04rem }

.faq{ margin-top:clamp(56px,7vw,84px); border-top:1px solid var(--line) }
.faq details{ border-bottom:1px solid var(--line) }
.faq summary{
  list-style:none; cursor:pointer; padding:26px 44px 26px 0; position:relative;
  font-family:var(--serif); font-size:clamp(1.1rem,1.9vw,1.36rem);
  transition:color .35s var(--ease);
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary:hover{ color:var(--clay) }
.faq summary::after{
  content:""; position:absolute; right:6px; top:50%;
  width:13px; height:13px; margin-top:-7px;
  border-right:1.5px solid var(--clay); border-bottom:1.5px solid var(--clay);
  transform:rotate(45deg) translateY(-3px);
  transition:transform .4s var(--ease);
}
.faq details[open] summary::after{ transform:rotate(225deg) translateY(-3px) }
.faq details p{
  color:var(--ink-2); max-width:62ch; padding:0 0 28px; margin:0;
  font-size:1rem;
}

/* ─────────────────────────── reserve ─────────────────────────── */

.reserve__card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:clamp(20px,3vw,32px);
  padding:clamp(44px,7vw,92px) var(--pad);
  text-align:center;
}
.price{
  font-family:var(--serif); font-size:clamp(2rem,4vw,2.9rem);
  margin-top:2rem; line-height:1;
}
.price span{ font-family:var(--sans); font-size:.9rem; color:var(--ink-3); vertical-align:middle }
.price small{ display:block; font-family:var(--sans); font-size:.8rem; color:var(--ink-3); margin-top:.8rem }

.reserve__form{
  display:flex; gap:10px; flex-wrap:wrap; justify-content:center;
  margin:2.4rem auto 0; max-width:480px; position:relative;
}
.reserve__form input{
  flex:1 1 240px; min-width:0;
  font-family:var(--sans); font-size:1rem; color:var(--ink);
  background:var(--cream); border:1px solid var(--line);
  border-radius:999px; padding:.92em 1.4em;
  transition:border-color .35s var(--ease);
}
.reserve__form input::placeholder{ color:var(--ink-3) }
.reserve__form input:focus{ border-color:var(--clay); outline:none }
.reserve__form input[aria-invalid="true"]{ border-color:#B4432F }

.reserve__msg{
  flex-basis:100%; font-size:.9rem; color:var(--clay); min-height:1.4em; margin-top:.4rem;
}
.fineprint{ margin-top:1.2rem; font-size:.82rem; color:var(--ink-3) }

/* ─────────────────────────── footer ─────────────────────────── */

.foot{ background:var(--ink); color:rgba(245,243,238,.66) }
.foot__inner{
  max-width:var(--wide); margin-inline:auto;
  padding:clamp(56px,7vw,84px) var(--pad);
  display:grid; gap:34px; justify-items:center; text-align:center;
}
.foot__brand img{ width:auto; height:56px; opacity:.9 }
.foot__links{ display:flex; gap:26px; flex-wrap:wrap; justify-content:center }
.foot__links a{
  color:rgba(245,243,238,.66); text-decoration:none; font-size:.9rem;
  transition:color .35s var(--ease);
}
.foot__links a:hover{ color:var(--cream) }
.foot__note{ font-size:.88rem; line-height:1.9 }
.foot__note small{ color:rgba(245,243,238,.42); font-size:.8rem }
.foot .han{ color:#D9A184 }

/* ─────────────────────── reveal on scroll ─────────────────────── */

.reveal{
  opacity:0; transform:translateY(20px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.is-in{ opacity:1; transform:none }

@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none }
  .hero{ position:static; min-height:0 }
  .hero__inner{ opacity:1 !important; transform:none !important }
  .hero__cue span{ animation:none }
  .swatcher__img,.btn{ transition:none }
  .intro__copy,.intro__scrim,.intro__cue{ opacity:1 !important; transform:none !important; transition:none }
  .intro__cue span{ animation:none }
  .intro__video{ display:none }
}