/* Maison D'Rose — shared design system */
:root{
  --cognac:#B5916A; --cognac-dk:#806237; --ink:#26211c; --muted:#6f675e;
  --line:#e7ded2; --bg:#fbf9f5; --cream:#f4ecdd; --rose:#caa3a0;
  --serif:"EB Garamond",Georgia,"Times New Roman",serif;
  --sans:"Be Vietnam Pro",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --maxw:1180px;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:88px; }
body{ margin:0; font-family:var(--sans); color:var(--ink); background:var(--bg);
  font-size:16.5px; line-height:1.72; -webkit-font-smoothing:antialiased; font-weight:300; }
/* subtle grain for editorial depth (not a flat surface) */
body::after{ content:""; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
img{ display:block; max-width:100%; height:auto; }
a{ color:var(--cognac-dk); text-decoration:none; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 28px; }

h1,h2,h3{ font-family:var(--serif); font-weight:500; line-height:1.1; margin:0; letter-spacing:.005em; }
.eyebrow{ font-family:var(--sans); text-transform:uppercase; letter-spacing:.34em;
  font-size:12px; font-weight:600; color:#8a6238; }
.serif-script{ font-style:italic; }

/* ---- header ---- */
header.site{ position:fixed; top:0; left:0; right:0; z-index:50; transition:.35s;
  padding:22px 0; }
header.site .wrap{ display:flex; align-items:center; justify-content:space-between; }
header.site a.brand{ font-family:var(--serif); font-size:24px; font-weight:600; letter-spacing:.04em; color:#fff; }
header.site nav a{ color:#fff; margin-left:28px; font-size:14px; font-weight:500; letter-spacing:.04em; opacity:.92; }
header.site nav a:hover{ opacity:1; }
header.site.scrolled{ background:rgba(251,249,245,.96); box-shadow:0 1px 16px rgba(0,0,0,.07); padding:14px 0;
  backdrop-filter:saturate(140%) blur(6px); }
header.site.scrolled a.brand,header.site.scrolled nav a{ color:var(--ink); }
header.site .book{ border:1px solid rgba(255,255,255,.6); padding:8px 18px; border-radius:30px; white-space:nowrap; }
header.site.scrolled .book{ border-color:var(--cognac); color:var(--cognac-dk); }
.langtoggle{ display:inline-flex; margin-left:24px; vertical-align:middle; }
.langtoggle a{ display:inline-flex; align-items:center; font-size:12px; font-weight:600; letter-spacing:.08em; opacity:1; color:var(--cognac-dk); padding:4px 11px; margin-left:0; border:1px solid var(--line); border-radius:999px; }
.langtoggle a:hover{ border-color:var(--cognac); }
@media(max-width:680px){
  header.site nav a:not(.book){ display:none; }
  header.site nav a.book{ margin-left:12px; }
  header.site nav .langtoggle{ display:inline-flex; align-items:center; margin-left:6px; }
  header.site nav .langtoggle a{ display:inline-flex; align-items:center; }
}
/* ---- mobile hamburger (desktop never sees it) ---- */
.navtoggle{ display:none; }
@media(max-width:680px){
  header.site a.brand{ margin-right:auto; } /* nav + hamburger group on the right */
  .navtoggle{ display:inline-flex; flex-direction:column; justify-content:center; gap:4.5px;
    width:40px; height:40px; margin-left:8px; padding:0 9px; border:0; background:transparent; cursor:pointer; flex:none; }
  .navtoggle span{ display:block; width:100%; height:1.6px; background:var(--ink); border-radius:2px; transition:.25s; }
  header.site:not(.solid):not(.scrolled) .navtoggle span{ background:#fff; }
  header.site.nav-open .navtoggle span:nth-child(1){ transform:translateY(6.1px) rotate(45deg); }
  header.site.nav-open .navtoggle span:nth-child(2){ opacity:0; }
  header.site.nav-open .navtoggle span:nth-child(3){ transform:translateY(-6.1px) rotate(-45deg); }
  /* open: the whole nav drops down as a tidy panel under the header bar */
  header.site.nav-open .wrap{ position:relative; }
  header.site.nav-open nav{ position:absolute; top:calc(100% + 13px); left:0; right:0; flex-direction:column; align-items:stretch;
    background:var(--bg); box-shadow:0 18px 34px rgba(40,30,20,.14); border-top:1px solid var(--line); padding:8px 22px 20px; }
  header.site.nav-open nav a:not(.book){ display:block; }
  header.site.nav-open nav a{ color:var(--ink); margin-left:0; padding:13px 2px; font-size:15px;
    border-bottom:1px solid var(--line); opacity:1; }
  header.site.nav-open nav a.book{ margin:16px 0 0; border:1px solid var(--cognac); color:var(--cognac-dk);
    text-align:center; border-radius:30px; padding:11px 18px; justify-content:center; }
  header.site.nav-open nav .langtoggle{ margin:14px 0 0; justify-content:center; }
  header.site.nav-open nav .langtoggle a{ padding:8px 16px; border:1px solid var(--line); border-radius:999px; }
}

/* ---- hero ---- */
.hero{ position:relative; min-height:96vh; display:flex; align-items:center; justify-content:center;
  text-align:center; color:#fff; overflow:hidden; }
.hero .bg{ position:absolute; inset:0; background-size:cover; background-position:center; transform:scale(1.05); animation:kenburns 22s ease-out forwards; }
@keyframes kenburns{ from{ transform:scale(1.05); } to{ transform:scale(1.13); } }
@media(prefers-reduced-motion:reduce){ .hero .bg{ animation:none; } }
.hero .scrim{ position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(20,16,12,.46) 0%,rgba(20,16,12,.28) 40%,rgba(20,16,12,.62) 100%); }
.hero .inner{ position:relative; z-index:2; padding:0 24px; max-width:860px; }
.hero h1{ color:#fff; font-size:clamp(42px,8vw,86px); font-weight:500; margin:14px 0 10px; text-shadow:0 2px 30px rgba(0,0,0,.25); }
.hero p.tag{ font-family:var(--serif); font-style:italic; font-size:clamp(19px,2.6vw,26px); color:#f3e9d8; margin:0 0 30px; }
.hero .eyebrow{ color:#f0dcc0; }
.scrolldown{ position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:2; color:#fff;
  font-size:12px; letter-spacing:.3em; text-transform:uppercase; opacity:.8; animation:bob 2.4s infinite; }
@keyframes bob{ 0%,100%{ transform:translate(-50%,0); } 50%{ transform:translate(-50%,8px); } }

/* ---- buttons ---- */
.btn{ display:inline-block; padding:14px 30px; border-radius:32px; font-weight:600; font-size:14px;
  letter-spacing:.05em; transition:.25s; cursor:pointer; }
.btn-fill{ background:var(--cream); color:#5a4326; }
.btn-fill:hover{ background:#fff; transform:translateY(-2px); }
.btn-line{ border:1px solid rgba(255,255,255,.7); color:#fff; margin-left:8px; }
.btn-line:hover{ background:rgba(255,255,255,.12); }
.btn-cognac{ background:var(--cognac-dk); color:#fff; }
.btn-cognac:hover{ background:#6c5430; transform:translateY(-2px); }
/* button pair: side by side on desktop, full-width stacked on mobile */
.btn-row .btn + .btn{ margin-left:8px; }

/* ---- sections ---- */
section{ padding:96px 0; }
section.tight{ padding:64px 0; }
.center{ text-align:center; }
.section-head{ max-width:680px; margin:0 auto 54px; }
.center .section-head{ margin-inline:auto; }
h2.display{ font-size:clamp(30px,4.5vw,46px); margin:12px 0 14px; }
.lead{ color:var(--muted); font-size:18px; }
.divider{ width:54px; height:2px; background:var(--cognac); margin:18px auto 0; }

/* reveal animation */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s ease, transform .8s ease; }
.reveal.in{ opacity:1; transform:none; }

/* ---- split (text + image) ---- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.split.flip .txt{ order:2; }
.split img{ width:100%; height:520px; object-fit:cover; border-radius:14px; box-shadow:0 20px 50px rgba(40,30,20,.14); }
@media(max-width:820px){ .split{ grid-template-columns:1fr; gap:30px; } .split.flip .txt{ order:0; } .split img{ height:340px; } }

/* ---- location cards (brand home) ---- */
.locations{ display:grid; grid-template-columns:1fr 1fr; gap:26px; }
@media(max-width:760px){ .locations{ grid-template-columns:1fr; } }
.loc{ position:relative; height:460px; border-radius:16px; overflow:hidden; display:flex; align-items:flex-end;
  color:#fff; box-shadow:0 16px 40px rgba(40,30,20,.16); }
.loc .lbg{ position:absolute; inset:0; background-size:cover; background-position:center; transition:.6s; }
.loc img.lbg{ width:100%; height:100%; object-fit:cover; }
.loc:hover .lbg{ transform:scale(1.06); }
.loc .lscrim{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,0) 24%,rgba(20,14,10,.45) 66%,rgba(20,14,10,.82) 100%); }
.loc .lc{ position:relative; z-index:2; padding:34px; width:100%; }
.loc h3{ color:#fff; font-size:34px; }
.loc .meta{ font-size:13px; letter-spacing:.12em; text-transform:uppercase; opacity:.9; margin-top:6px; }
.loc .pill{ position:absolute; top:22px; right:22px; z-index:2; background:rgba(255,255,255,.92); color:#5a4326;
  font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:6px 14px; border-radius:30px; }
.loc .pill.soon{ background:rgba(38,33,28,.7); color:#f3e9d8; backdrop-filter:blur(2px); }

/* ---- peek strip (DN teaser — big, dreamy glimpses; reveal on hover) ---- */
.peek{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.peek .loc{ height:460px; border-radius:18px; }
.peek .lbg{ filter:blur(13px) brightness(.72) saturate(.78); transform:scale(1.22);
  transition:filter 1.2s ease, transform 1.4s ease; }
.peek .loc:hover .lbg{ filter:blur(2.5px) brightness(.92) saturate(1.02); transform:scale(1.07); }
.peek .lscrim{ background:
   radial-gradient(130% 90% at 50% 22%, rgba(244,236,221,.18), transparent 58%),
   linear-gradient(180deg, rgba(20,14,10,.1) 0%, rgba(20,14,10,.44) 100%); }
.peek .lc{ text-align:center; }
.peek .lc h3{ font-weight:500; letter-spacing:.04em; font-size:31px; text-shadow:0 2px 38px rgba(0,0,0,.5); }
.peek .lc h3:after{ content:" · 2026"; font-size:.52em; letter-spacing:.22em; opacity:.65; vertical-align:middle; }
@media(max-width:680px){ .peek{ grid-template-columns:1fr; gap:14px; } .peek .loc{ height:320px; } }
/* 6-tile DN gallery — shorter tiles (two rows); no "· 2026" suffix (now open, not coming) */
.peek-6 .loc{ height:300px; }
.peek-6 .lc h3:after{ content:none; }
/* combined Pool & Gym tile spans the full row (wide amenity banner) */
.peek-6 .loc-wide{ grid-column:1/-1; height:340px; }
@media(max-width:680px){ .peek-6 .loc{ height:240px; } .peek-6 .loc-wide{ height:260px; } }

/* ---- rooms ---- */
.rooms{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:24px; }
.room{ background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 8px 26px rgba(40,30,20,.08); transition:.3s; }
.room:hover{ transform:translateY(-6px); box-shadow:0 18px 40px rgba(40,30,20,.14); }
.room img{ width:100%; height:210px; object-fit:cover; }
.room .rc{ padding:20px 22px 24px; }
.room h3{ font-size:24px; }
.room p{ color:var(--muted); font-size:15px; margin:8px 0 12px; }
.room .price{ color:var(--cognac-dk); font-weight:700; font-family:var(--sans); font-size:15px; }

/* ---- amenities ---- */
.amen{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px 30px; }
.amen li{ position:relative; padding-left:30px; font-size:16px; }
.amen li:before{ content:"✦"; position:absolute; left:0; color:var(--cognac); }

/* ---- gallery (masonry-ish) ---- */
.gallery{ columns:3 260px; column-gap:14px; }
.gallery img{ width:100%; margin:0 0 14px; border-radius:12px; break-inside:avoid; transition:.4s; }
.gallery img:hover{ filter:brightness(1.04); transform:scale(.99); }

/* ---- facts strip ---- */
.facts{ display:flex; flex-wrap:wrap; gap:18px 46px; justify-content:center; margin-top:24px; }
.fact{ text-align:center; }
.fact b{ display:block; font-family:var(--serif); font-size:34px; color:var(--cognac-dk); line-height:1; }
.fact span{ font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
/* location stats: 4 facts in a tidy 2×2 (balanced on EN/VI desktop + mobile) */
.facts-loc{ display:grid; grid-template-columns:repeat(2,max-content); gap:22px 52px; justify-content:start; }
.facts-loc .fact{ text-align:left; }

/* ---- band (full-width image) ---- */
.band{ height:48vh; min-height:340px; background-size:cover; background-position:center 62%; }

/* ---- grid + cards (guest reviews / generic 3-up) ---- */
.grid{ display:grid; gap:24px; }
.grid.cols-3{ grid-template-columns:repeat(3,1fr); }
@media(max-width:820px){ .grid.cols-3{ grid-template-columns:1fr; } }
.card{ position:relative; background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:28px 30px 26px; box-shadow:0 10px 30px rgba(40,30,20,.06);
  display:flex; flex-direction:column; justify-content:center; }
.card:before{ content:"\201C"; font-family:var(--serif); font-size:54px; line-height:.4; color:var(--cognac);
  opacity:.24; margin-bottom:6px; }
.card .small{ padding-top:14px; font-size:13px; letter-spacing:.04em; }

/* ---- brand pillars (text-only editorial; breaks image monotony) ---- */
.pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px 40px; text-align:left; }
@media(max-width:820px){ .pillars{ grid-template-columns:1fr; gap:26px; } }
.pillar .rule{ width:38px; height:2px; background:var(--cognac); margin-bottom:18px; }
.pillar h3{ font-size:25px; margin:0 0 9px; }
.pillar p{ color:var(--muted); font-size:15.5px; margin:0; }

/* ---- pull-quote (social proof) ---- */
.pullquote{ max-width:760px; margin:0 auto; text-align:center; }
.pullquote p{ font-family:var(--serif); font-style:italic; font-size:clamp(22px,3vw,30px);
  line-height:1.4; color:var(--ink); }
.pullquote .by{ font-family:var(--sans); font-style:normal; font-size:13px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--cognac-dk); margin-top:14px; }

/* ---- FAQ accordion ---- */
#faq details{ border-bottom:1px solid var(--line); }
#faq details:first-of-type{ border-top:1px solid var(--line); }
#faq summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  gap:18px; padding:20px 2px; font-family:var(--sans); font-size:16px; font-weight:500; color:var(--ink);
  transition:color .2s; }
#faq summary::-webkit-details-marker{ display:none; }
#faq summary::after{ content:""; flex:none; width:9px; height:9px; margin-right:4px;
  border-right:1.6px solid var(--cognac); border-bottom:1.6px solid var(--cognac);
  transform:rotate(45deg); transition:transform .25s ease; }
#faq summary:hover{ color:var(--cognac-dk); }
#faq details[open] summary{ color:var(--cognac-dk); }
#faq details[open] summary::after{ transform:rotate(-135deg); }
#faq details p{ margin:0; padding:0 2px 22px; color:var(--muted); line-height:1.7; font-size:15.5px; max-width:66ch; }

/* ---- trust strip (reusable; replaces repeated inline styles) ---- */
.trust{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:14px 40px; text-align:center; }
.trust-item{ font-size:15px; color:var(--muted); }
.trust-item b{ font-family:var(--serif); font-size:23px; color:var(--cognac-dk); }
.trust-item a{ color:inherit; }
.trust-item a:hover{ color:var(--cognac-dk); }

/* ---- note ---- */
.note{ background:var(--cream); border-radius:12px; padding:18px 22px; font-size:15.5px; color:#5a4326; }

/* ---- map (tasteful pin placeholder shows while the iframe lazy-loads, never a blank box) ---- */
.map{ width:100%; height:420px; border:0; border-radius:14px; box-shadow:0 12px 34px rgba(40,30,20,.12);
  background:#eef1f4 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 24 24' fill='none' stroke='%23806237' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.2 7-11a7 7 0 1 0-14 0c0 4.8 7 11 7 11Z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E") center/44px no-repeat; }

/* ---- contact ---- */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
@media(max-width:680px){ .contact-grid{ grid-template-columns:1fr; } }
.ccard{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:26px 28px; }
.ccard h3{ font-size:23px; margin-bottom:10px; }

/* ---- footer ---- */
footer.site{ background:var(--ink); color:#cdbfae; padding:60px 0 40px; font-size:14.5px; }
footer.site h4{ font-family:var(--serif); color:#fff; font-size:26px; font-weight:500; margin:0 0 10px; }
footer.site a{ color:var(--cream); }
footer.site .cols{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:34px; margin-bottom:30px; }
@media(max-width:680px){ footer.site .cols{ grid-template-columns:1fr; gap:22px; } }
footer.site .chips a{ display:inline-block; margin:0 16px 8px 0; }
footer.site .fine{ border-top:1px solid rgba(255,255,255,.12); padding-top:20px; opacity:.7; font-size:13px; }

/* ---- mobile spacing ---- */
@media(max-width:680px){
  section{ padding:58px 0; }
  .wrap{ padding:0 20px; }
  .hero .inner{ padding:0 20px; }
  .btn{ padding:13px 24px; }
  /* stack button pairs full-width with even spacing on mobile */
  .btn-row{ display:flex; flex-direction:column; align-items:center; gap:12px; }
  .btn-row .btn{ width:100%; max-width:320px; }
  .btn-row .btn + .btn{ margin-left:0; }
}

/* ---- coming soon ---- */
.soon-hero{ min-height:100vh; display:flex; align-items:center; justify-content:center; text-align:center;
  color:#fff; background:radial-gradient(120% 120% at 50% 0%,#3a2f25 0%,#26211c 60%,#1a1611 100%); position:relative; overflow:hidden; }
.soon-hero:before{ content:""; position:absolute; inset:0; opacity:.10;
  background:radial-gradient(circle at 30% 20%,var(--cognac),transparent 45%),radial-gradient(circle at 80% 70%,var(--rose),transparent 45%); }
.soon-hero .inner{ position:relative; z-index:2; max-width:680px; padding:0 26px; }
.soon-hero h1{ color:#fff; font-size:clamp(40px,8vw,76px); margin:16px 0 8px; }
.soon-hero p{ color:#e9dcc8; font-size:19px; }
.soon-hero .ln{ width:60px; height:1px; background:var(--cognac); margin:26px auto; }


/* ===== audit fixes (2026-06-03) ===== */
/* #2 touch devices have no hover → reveal the teaser glimpses for them */
@media (hover: none) {
  .peek .lbg{ filter:blur(3px) brightness(.86) saturate(1); transform:scale(1.06); }
}
/* #12 finger-sized language toggle on mobile + #18 hero clear of fixed header */
@media (max-width:680px){
  .langtoggle a{ padding:8px 9px; font-size:13px; }
  .hero{ padding-top:64px; }
}
/* #16 gallery: grow (not shrink) on hover */
.gallery img:hover{ transform:scale(1.015); filter:brightness(1.05); }
/* #13 trust stats are links */
.trust-link{ color:inherit; text-decoration:none; }
.trust-link:hover{ color:var(--cognac-dk); }

/* #header mobile: keep brand on one line, no overlap clutter */
@media (max-width:680px){
  header.site{ padding:13px 0; }
  header.site a.brand{ font-size:18px; white-space:nowrap; }
  header.site nav{ display:flex; align-items:center; }
  header.site nav a.book{ padding:7px 13px; font-size:13px; }
  .langtoggle{ margin-left:10px; }
}

/* ===== mobile polish pass (2026-06-03) ===== */
@media (max-width:680px){
  section{ padding:52px 0; }
  .section-head{ margin-bottom:30px; }
  .lead{ font-size:15.5px; }
  .hero h1{ font-size:clamp(34px,8.5vw,46px); margin:10px 0 8px; }
  .hero p.tag{ font-size:17px; margin-bottom:22px; }
  .hero .inner > div:not([class]){ display:flex; flex-direction:column; align-items:center; gap:11px; }
  .hero .btn-line{ margin-left:0; }
  .facts{ gap:14px 24px; }
  .fact b{ font-size:27px; }
  .peek .loc{ height:262px; }
  .split img{ height:300px; }
  h2.display{ font-size:clamp(27px,7vw,34px); }
}

/* tidy line-breaks: balance headings, avoid orphan words in body */
h1,h2,h3,.hero p.tag{ text-wrap:balance; }
p,.lead{ text-wrap:pretty; }

/* ===== teaser belongs on the HOME card; the Đà Nẵng PAGE shows sharp images ===== */
.peek .lbg{ filter:brightness(.82) saturate(1.03) !important; transform:scale(1) !important; transition:transform .6s ease !important; }
.peek .loc:hover .lbg{ filter:brightness(.92) saturate(1.05) !important; transform:scale(1.04) !important; }
@media (hover:none){ .peek .lbg{ filter:brightness(.84) saturate(1.03) !important; transform:scale(1) !important; } }
/* home-page Đà Nẵng card = the dreamy teaser (sharpens on hover) */
.loc.teaser .lbg{ filter:blur(7px) brightness(.6) saturate(.9); transform:scale(1.12); transition:filter 1s ease, transform 1.2s ease; }
.loc.teaser:hover .lbg{ filter:blur(1.5px) brightness(.82) saturate(1); transform:scale(1.05); }

/* #6 visible keyboard focus (WCAG 2.4.7) */
:focus-visible{ outline:2px solid var(--cognac-dk); outline-offset:3px; border-radius:4px; }
.hero a:focus-visible, .loc:focus-visible, footer.site a:focus-visible, header.site nav a:focus-visible{ outline-color:#fff; }
/* #20 skip link */
.skip{ position:absolute; left:-9999px; top:0; z-index:1000; background:var(--ink); color:#fff; padding:10px 16px; border-radius:0 0 8px 0; }
.skip:focus{ left:0; }

/* bigger "Coming 2026" teaser label on the home Đà Nẵng card */
.loc .pill{ font-size:13px; padding:8px 18px; letter-spacing:.12em; }
.loc.teaser .pill.soon{ font-size:15px; padding:9px 20px; top:24px; right:24px; }

/* #19 wider type scale for crescendo */
h2.display{ font-size:clamp(32px,5vw,52px); }
.hero h1{ font-size:clamp(44px,8.5vw,92px); }
/* band caption (DN tower) */
.band{ position:relative; }
.bandcap{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:8px;
  background:linear-gradient(180deg,rgba(20,14,10,.28),rgba(20,14,10,.45)); }
/* ===== editorial split hero (photo-flexible — no full-bleed crop war) ===== */
.hero-ed{ display:grid; grid-template-columns:1fr 1.08fr; grid-template-rows:minmax(calc(100svh - 150px),auto); padding:0; background:var(--bg); }
.he-text{ display:flex; flex-direction:column; justify-content:center; padding:96px clamp(28px,5.5vw,82px) 72px; }
.he-orn{ display:flex; justify-content:flex-start; margin:0 0 18px; }
.he-orn img{ height:54px; width:auto; }
.he-text .eyebrow{ color:#8a6238; }
.he-text h1{ font-family:var(--serif); font-weight:500; color:var(--ink);
  font-size:clamp(40px,5.2vw,74px); line-height:1.04; margin:16px 0 14px; letter-spacing:.005em; }
.he-text .tag{ font-family:var(--serif); font-style:italic; font-size:clamp(18px,2.1vw,24px);
  color:var(--muted); margin:0 0 28px; max-width:30ch; }
.he-cta{ display:flex; flex-wrap:wrap; gap:12px; }
.btn-ghost{ border:1px solid var(--cognac); color:var(--cognac-dk); background:transparent; }
.btn-ghost:hover{ background:var(--cream); transform:translateY(-2px); }
.he-trust{ margin-top:28px; font-size:13.5px; letter-spacing:.02em; color:var(--cognac-dk); }
.he-img{ background-size:cover; background-position:center; min-height:340px; }
/* PQ hero: desktop crop favours the bed + mural (less wardrobe); mobile uses a tighter crop */
.he-img-pq{ background-image:url('/img/pq-hero-v5.webp'); background-position:38% center; }
@media(max-width:820px){
  /* mobile: a near-square hero image (shows the whole room like the desktop crop) sits on top,
     with a compact centred text block filling the rest so the CTA stays on-screen */
  .hero-ed{ display:flex; flex-direction:column; min-height:100svh; }
  .he-img{ order:-1; aspect-ratio:auto; flex:0 0 46svh; min-height:0; width:100%; }
  .he-img-pq{ background-image:url('/img/pq-hero-v8-m.webp'); background-position:center; }
  .he-text{ flex:1 1 auto; justify-content:center; padding:20px 24px 26px; text-align:center; align-items:center; }
  .he-orn{ justify-content:center; margin-bottom:10px; }
  .he-orn img{ height:38px; }
  .he-text h1{ font-size:36px; margin:12px 0 12px; }
  .he-text .tag{ font-size:16px; margin:0 0 20px; }
  .he-trust{ margin-top:18px; }
  .he-cta{ justify-content:center; }
}
/* ===== typographic brand hero (no photo — most elegant for the brand home) ===== */
.hero-type{ min-height:100svh; display:flex; align-items:center; justify-content:center; text-align:center;
  position:relative; overflow:hidden; padding:104px 24px 60px;
  background:radial-gradient(125% 100% at 50% -8%, #ffffff 0%, var(--bg) 52%, #efe5d4 128%); }
.hero-type .ht-inner{ position:relative; z-index:2; max-width:720px; }
.ht-orn{ color:var(--cognac); display:flex; justify-content:center; margin-bottom:22px; }
.ht-orn svg{ width:46px; height:auto; }
.ht-orn img{ height:82px; width:auto; }
@media(max-width:680px){ .ht-orn img{ height:66px; } }
.hero-type .eyebrow{ color:#8a6238; }
.hero-type h1{ font-family:var(--serif); font-weight:400; color:var(--ink);
  font-size:clamp(48px,9.2vw,104px); line-height:1.0; margin:14px 0 18px; letter-spacing:.016em; }
/* desktop: keep the brand name on one confident line (font scales with vw, never overflows).
   mobile keeps natural wrapping so small screens fall to two lines instead of overflowing. */
@media(min-width:681px){ .hero-type h1{ white-space:nowrap; } }
.ht-tag{ font-family:var(--serif); font-style:italic; font-size:clamp(20px,3vw,30px); color:var(--muted); margin:0 0 32px; }
.hero-type .he-cta{ justify-content:center; }
.ht-loc{ margin-top:38px; display:flex; gap:15px; justify-content:center; align-items:center;
  font-size:12.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--cognac-dk); }
.ht-loc .dot{ width:4px; height:4px; border-radius:50%; background:var(--cognac); opacity:.65; }
@media(max-width:680px){ .hero-type{ min-height:100svh; padding:88px 22px 48px; } .ht-orn svg{ width:40px; } }

/* header must read dark on the light editorial hero (no dark image behind it) */
header.site.solid{ background:rgba(251,249,245,.92); box-shadow:0 1px 16px rgba(0,0,0,.06);
  backdrop-filter:saturate(140%) blur(6px); padding:14px 0; }
header.site.solid a.brand, header.site.solid nav a{ color:var(--ink); }
header.site.solid .book{ border-color:var(--cognac); color:var(--cognac-dk); }

/* ===== floating contact bubble (expands on tap) ===== */
#mdr-fab{ position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom)); z-index:801;
  display:flex; flex-direction:column; align-items:flex-end; gap:11px;
  opacity:0; transform:translateY(10px); pointer-events:none; transition:opacity .3s ease, transform .3s ease; }
#mdr-fab .fab-actions{ display:flex; flex-direction:column; align-items:flex-end; gap:10px;
  opacity:0; transform:translateY(12px) scale(.96); pointer-events:none; transform-origin:bottom right;
  transition:opacity .24s ease, transform .24s ease; }
#mdr-fab.open .fab-actions{ opacity:1; transform:none; pointer-events:auto; }
#mdr-fab .fab-act{ height:42px; padding:0 18px; border-radius:30px; display:inline-flex; align-items:center;
  color:#fff; font-weight:600; font-size:14px; letter-spacing:.01em; text-decoration:none; white-space:nowrap;
  box-shadow:0 6px 20px rgba(0,0,0,.24); }
#mdr-fab .fab-chat{ background:#128C7E; }            /* WhatsApp (darkened for AA text contrast) */
#mdr-fab .fab-chat[data-kind="zalo"]{ background:#0068ff; }
#mdr-fab .fab-trip{ background:#2577e3; }
#mdr-fab .fab-call{ background:var(--cognac-dk); }
#mdr-fab .fab-toggle{ width:56px; height:56px; border-radius:50%; border:0; background:var(--cognac); cursor:pointer;
  box-shadow:0 8px 24px rgba(40,30,20,.34); display:flex; align-items:center; justify-content:center;
  transition:background .2s ease, transform .25s ease; }
#mdr-fab .fab-toggle:hover{ background:var(--cognac-dk); }
#mdr-fab .fab-x{ display:none; }
#mdr-fab.open .fab-toggle{ background:var(--cognac-dk); }
#mdr-fab.open .fab-ic{ display:none; }
#mdr-fab.open .fab-x{ display:block; }

/* a11y: comfortable tap targets (>=44px) on mobile + clearer keyboard focus */
@media (max-width:680px){
  /* mobile: plain text toggle (no box) — avoids the awkward circle chip; desktop keeps its pill */
  /* VI/EN as a clean flat pill chip (border inherited from base); wider-than-tall so it never reads as a circle */
  .langtoggle a{ min-height:34px; padding:0 16px; font-size:13px; letter-spacing:.08em; display:inline-flex; align-items:center; justify-content:center; }
  header.site nav a.book{ min-height:42px; display:inline-flex; align-items:center; }
  #faq details summary{ padding-top:15px; padding-bottom:15px; }
  footer.site a, #contact .ccard a{ display:inline-block; padding:3px 0; }
}
:focus-visible{ outline-width:2.5px; }

/* #23 honour reduced-motion everywhere */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
}