/* ==========================================================================
   Ốt Care Spa — forest & gold
   Palette sampled directly from the client's printed brand card
   (OT SPA/brand color.jpg): deep forest #284237, gold #C9A060, cream #F3F4EC.
   Nothing client-specific belongs here except the palette.
   ========================================================================== */

:root{
  /* ---- colour: sampled from brand card ---- */
  --forest:#284237;          /* card background — the brand base */
  --forest-deep:#1C2E26;     /* darker step for depth */
  --forest-soft:#31483E;     /* raised surfaces on dark */
  --forest-line:#3D5A4C;

  --gold:#C9A060;            /* the star/rule gold */
  --gold-bright:#D1A745;     /* highlight gold */
  --gold-dim:#8A6D3C;        /* gold that passes AA on cream */

  --sage:#929C83;            /* letterspaced subtitle on the card */
  --mint:#A7C6BE;            /* the leaf mark */

  --cream:#F3F4EC;           /* card text cream */
  --cream-warm:#EAEBE0;
  --parchment:#E4E7DC;

  --ink:#1C2E26;
  --ink-mut:#546B5E;
  --ink-inv:#F3F4EC;
  --ink-inv-mut:#B9C7BC;

  --line:rgba(28,46,38,.14);
  --line-inv:rgba(243,244,236,.18);

  --zalo:#0068FF;
  --messenger:#0084FF;

  /* ---- type ---- */
  --f-head:"Playfair Display",Georgia,serif;
  --f-body:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif;
  /* Korean is served by the reader's own system font, not a webfont. Once real
     Korean reviews started rendering in every language mode, linking Noto Sans
     KR meant Vietnamese and English visitors pulled CJK subsets they never see
     — 65 chunks, ~2MB. Every platform that reads Korean already ships a good
     Korean face, and it paints instantly. */
  --f-ko:"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR","Nanum Gothic",
         "Be Vietnam Pro",system-ui,sans-serif;

  /* ---- space (8pt) ---- */
  --s-1:.5rem; --s-2:1rem; --s-3:1.5rem; --s-4:2rem;
  --s-5:3rem; --s-6:4rem; --s-7:6rem; --s-8:8rem;

  --r-sm:4px; --r-md:10px; --r-lg:18px; --r-pill:999px;
  --wrap:1200px;

  --e-out:cubic-bezier(.22,.61,.36,1);
  --t-fast:160ms; --t-mid:320ms; --t-slow:640ms;

  --shadow-1:0 1px 2px rgba(28,46,38,.05),0 6px 20px rgba(28,46,38,.07);
  --shadow-2:0 14px 44px rgba(28,46,38,.18);

  --z-nav:100; --z-menu:110; --z-bar:120; --z-toast:1000;
}

/* ==========================================================================
   base
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:5rem}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--f-body);font-size:1rem;line-height:1.7;font-weight:300;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
html[data-lang="ko"] body{font-family:var(--f-ko)}
img,video,iframe{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--f-head);font-weight:400;line-height:1.15;margin:0;letter-spacing:-.015em}
html[data-lang="ko"] :is(h1,h2,h3,h4){font-family:var(--f-ko);font-weight:500;letter-spacing:-.02em}
h1{font-size:clamp(2.6rem,6.4vw,4.75rem)}
h2{font-size:clamp(1.95rem,4vw,3.1rem)}
h3{font-size:clamp(1.15rem,1.9vw,1.45rem)}
p{margin:0 0 var(--s-2)}
a{color:inherit}
ul{margin:0;padding:0;list-style:none}

/* language switch — one source of truth, no JS dictionary.
   Every translatable node carries data-l="vi|en|ko". */
html[data-lang="vi"] [data-l]:not([data-l="vi"]){display:none !important}
html[data-lang="en"] [data-l]:not([data-l="en"]){display:none !important}
html[data-lang="ko"] [data-l]:not([data-l="ko"]){display:none !important}

:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--gold-dim);outline-offset:3px;border-radius:var(--r-sm);
}
.on-dark :where(a,button,input,select):focus-visible{outline-color:var(--gold-bright)}

.skip-link{
  position:absolute;left:var(--s-2);top:-100px;z-index:var(--z-toast);
  background:var(--forest);color:var(--cream);padding:.75rem 1.25rem;
  border-radius:var(--r-sm);transition:top var(--t-fast);
}
.skip-link:focus{top:var(--s-2)}

.wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}
.section{padding-block:clamp(4rem,9vw,var(--s-8))}
.section--tint{background:var(--parchment)}
.section--dark{background:var(--forest);color:var(--ink-inv)}
.section--dark h2,.section--dark h3{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}

/* eyebrow — the letterspaced caps from the brand card */
.eyebrow{
  font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;
  font-weight:500;color:var(--gold-dim);margin:0 0 var(--s-2);
}
.section--dark .eyebrow,.on-dark .eyebrow{color:var(--gold)}

/* the small gold diamond rule from the card */
.rule{display:flex;align-items:center;gap:.75rem;margin:var(--s-2) 0 var(--s-3)}
.rule::before,.rule::after{content:"";height:1px;flex:1;background:currentColor;opacity:.28}
.rule i{width:6px;height:6px;transform:rotate(45deg);background:var(--gold);flex:none}
.rule--left::before{display:none}
.rule--center{max-width:16rem;margin-inline:auto}

/* ==========================================================================
   buttons
   ========================================================================== */
.btn{
  --btn-bg:var(--forest);--btn-fg:var(--cream);--btn-bd:var(--forest);
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.9rem 1.6rem;border:1px solid var(--btn-bd);border-radius:var(--r-pill);
  background:var(--btn-bg);color:var(--btn-fg);
  font:inherit;font-size:.94rem;font-weight:500;letter-spacing:.01em;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:transform var(--t-fast) var(--e-out),background var(--t-fast),
             color var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast);
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-1)}
.btn:active{transform:translateY(0)}
.btn--gold{--btn-bg:var(--gold);--btn-fg:var(--forest-deep);--btn-bd:var(--gold)}
.btn--gold:hover{--btn-bg:var(--gold-bright);--btn-bd:var(--gold-bright)}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--forest);--btn-bd:currentColor}
.btn--ghost:hover{--btn-bg:var(--forest);--btn-fg:var(--cream)}
.on-dark .btn--ghost{--btn-fg:var(--cream)}
.on-dark .btn--ghost:hover{--btn-bg:var(--cream);--btn-fg:var(--forest)}
.btn--sm{padding:.6rem 1.15rem;font-size:.85rem}
.btn--zalo{--btn-bg:var(--zalo);--btn-fg:#fff;--btn-bd:var(--zalo)}
.btn--msgr{--btn-bg:var(--messenger);--btn-fg:#fff;--btn-bd:var(--messenger)}
.btn svg{width:1.05em;height:1.05em;flex:none}

/* the "đặt lịch ngay" anchor that repeats in every section (requirement 9) */
.book-link{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.9rem;font-weight:500;letter-spacing:.02em;
  color:var(--gold-dim);text-decoration:none;
  border-bottom:1px solid transparent;padding-bottom:2px;
  transition:border-color var(--t-fast),color var(--t-fast);
}
.book-link:hover{border-bottom-color:currentColor}
.section--dark .book-link,.on-dark .book-link{color:var(--gold)}
.book-link svg{width:1em;height:1em;transition:transform var(--t-fast) var(--e-out)}
.book-link:hover svg{transform:translateX(3px)}

/* ==========================================================================
   nav
   ========================================================================== */
.nav{
  position:fixed;inset:0 0 auto;z-index:var(--z-nav);
  padding-block:.85rem;color:var(--cream);
  transition:background var(--t-mid),backdrop-filter var(--t-mid),
             padding var(--t-mid),box-shadow var(--t-mid);
}
.nav.is-stuck{
  background:rgba(28,46,38,.94);backdrop-filter:blur(12px) saturate(1.2);
  padding-block:.55rem;box-shadow:0 1px 0 var(--line-inv);
}
.nav__in{display:flex;align-items:center;gap:var(--s-3)}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;margin-right:auto}
/* The real Ốt Care mark — a chili ("ớt"), supplied by the client. Square, so it
   is sized to the height the old placeholder occupied to keep the nav rhythm. */
.brand__mark{width:38px;height:38px;flex:none;object-fit:contain;display:block}
.brand__name{font-family:var(--f-head);font-size:1.22rem;line-height:1;letter-spacing:.01em}
.brand__sub{
  display:block;font-family:var(--f-body);font-size:.56rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--sage);margin-top:.3rem;
}
.nav__links{display:flex;align-items:center;gap:var(--s-3)}
.nav__links a{
  text-decoration:none;font-size:.88rem;letter-spacing:.03em;opacity:.85;
  position:relative;padding-block:.35rem;transition:opacity var(--t-fast);
}
.nav__links a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--gold);transition:right var(--t-mid) var(--e-out);
}
.nav__links a:hover{opacity:1}
.nav__links a:hover::after{right:0}

.lang{display:flex;align-items:center;gap:.15rem;border:1px solid var(--line-inv);border-radius:var(--r-pill);padding:.2rem}
.lang button{
  border:0;background:none;color:inherit;font:inherit;font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;padding:.34rem .6rem;
  border-radius:var(--r-pill);cursor:pointer;opacity:.6;transition:all var(--t-fast);
}
.lang button:hover{opacity:1}
.lang button[aria-pressed="true"]{background:var(--gold);color:var(--forest-deep);opacity:1;font-weight:600}

.burger{display:none;width:44px;height:44px;border:1px solid var(--line-inv);border-radius:var(--r-pill);
  background:none;color:inherit;cursor:pointer;align-items:center;justify-content:center}
.burger span{display:block;width:17px;height:1.5px;background:currentColor;position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:17px;height:1.5px;background:currentColor}
.burger span::before{top:-5px}.burger span::after{top:5px}

.mobilemenu{
  position:fixed;inset:0;z-index:var(--z-menu);background:var(--forest);
  color:var(--cream);padding:var(--s-6) var(--s-3);
  display:flex;flex-direction:column;gap:var(--s-2);
}
.mobilemenu[hidden]{display:none}
.mobilemenu a{font-family:var(--f-head);font-size:1.9rem;text-decoration:none;padding-block:.4rem}
.mobilemenu__close{position:absolute;top:1.1rem;right:1.4rem;width:44px;height:44px;
  border:1px solid var(--line-inv);border-radius:var(--r-pill);background:none;color:inherit;font-size:1.3rem;cursor:pointer}

/* ==========================================================================
   hero
   ========================================================================== */
.hero{position:relative;min-height:100svh;display:grid;place-items:end start;
  color:var(--cream);overflow:hidden;background:var(--forest-deep)}
.hero__media{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--forest-deep)}
/* still and motion are stacked: the photo always paints, the video fades in over
   it once it is genuinely playing. A deferred, slow or blocked video degrades to
   the photo rather than to a flat colour block. */
.hero__media img,.hero__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__media video{opacity:0;transition:opacity 900ms var(--e-out)}
.hero__media video.is-live{opacity:1}
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(to top,rgba(20,34,28,.92) 0%,rgba(20,34,28,.5) 42%,rgba(20,34,28,.28) 70%,rgba(20,34,28,.55) 100%),
    linear-gradient(to right,rgba(20,34,28,.6),transparent 65%);
}
.hero__in{position:relative;z-index:1;width:min(100% - 2.5rem,var(--wrap));
  margin-inline:auto;padding-block:clamp(5rem,12vw,8rem) clamp(3.5rem,7vw,5.5rem)}
.hero__title{max-width:16ch}
.hero__title em{font-style:italic;color:var(--gold)}
.hero__lede{max-width:46ch;font-size:clamp(1rem,1.4vw,1.15rem);color:var(--ink-inv-mut);margin-top:var(--s-2)}
.hero__cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:var(--s-4)}
.hero__scroll{position:absolute;right:2.5rem;bottom:2.5rem;z-index:1;
  writing-mode:vertical-rl;font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--ink-inv-mut);display:flex;align-items:center;gap:.8rem}
.hero__scroll::after{content:"";width:1px;height:52px;background:linear-gradient(var(--gold),transparent)}

/* star rating chip */
.stars{display:inline-flex;align-items:center;gap:.5rem;font-size:.9rem}
.stars__glyphs{color:var(--gold);letter-spacing:.12em;font-size:1rem}
.rating-chip{
  display:inline-flex;align-items:center;gap:.6rem;
  border:1px solid var(--line-inv);border-radius:var(--r-pill);
  padding:.42rem 1rem;font-size:.84rem;backdrop-filter:blur(6px);
  background:rgba(243,244,236,.07);
}

/* ==========================================================================
   trust strip
   ========================================================================== */
.strip{background:var(--forest-deep);color:var(--ink-inv);padding-block:var(--s-3)}
.strip__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-3);text-align:center}
.strip__item{display:flex;flex-direction:column;gap:.3rem;align-items:center;
  border-left:1px solid var(--line-inv);padding-inline:var(--s-2)}
.strip__item:first-child{border-left:0}
.strip__item b{font-family:var(--f-head);font-size:1.4rem;color:var(--gold);font-weight:400}
.strip__item span{font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-inv-mut)}

/* ==========================================================================
   split (about)
   ========================================================================== */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.split__media{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:var(--r-lg)}
.split__media img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-slow) var(--e-out)}
.split__media:hover img{transform:scale(1.04)}
.split__media--frame::after{
  content:"";position:absolute;inset:12px;border:1px solid rgba(243,244,236,.3);
  border-radius:calc(var(--r-lg) - 6px);pointer-events:none;
}
.split__body p{max-width:52ch;color:var(--ink-mut)}
.split__body .btn,.split__body .book-link{margin-top:var(--s-2)}

.marks{display:flex;flex-wrap:wrap;gap:.5rem;margin:var(--s-3) 0}
.mark{
  display:inline-flex;align-items:center;gap:.45rem;
  border:1px solid var(--line);border-radius:var(--r-pill);
  padding:.4rem .9rem;font-size:.8rem;color:var(--ink-mut);background:#fff;
}
.mark svg{width:.95em;height:.95em;color:var(--gold-dim)}

/* ==========================================================================
   service cards
   ========================================================================== */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-3)}
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform var(--t-mid) var(--e-out),box-shadow var(--t-mid);
}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-2)}
.card__media{aspect-ratio:4/5;overflow:hidden;position:relative;background:var(--forest-soft)}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-slow) var(--e-out)}
.card:hover .card__media img{transform:scale(1.05)}
.card__tag{
  position:absolute;top:.9rem;left:.9rem;z-index:1;
  background:var(--gold);color:var(--forest-deep);
  font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  padding:.32rem .7rem;border-radius:var(--r-pill);
}
.card__icon{
  position:absolute;bottom:.9rem;right:.9rem;z-index:1;
  width:44px;height:44px;border-radius:var(--r-pill);
  background:rgba(28,46,38,.72);backdrop-filter:blur(6px);
  display:grid;place-items:center;color:var(--gold);
}
.card__icon svg{width:22px;height:22px}
.card__body{padding:var(--s-3);display:flex;flex-direction:column;gap:.55rem;flex:1}
.card__body p{color:var(--ink-mut);font-size:.94rem;margin:0}
.card__price{
  margin-top:auto;padding-top:var(--s-2);border-top:1px solid var(--line);
  display:flex;align-items:baseline;justify-content:space-between;gap:.75rem;
}
.card__price b{font-family:var(--f-head);font-size:1.32rem;font-weight:400;color:var(--forest)}
.card__price small{font-size:.76rem;color:var(--ink-mut);letter-spacing:.04em}

/* ==========================================================================
   signature band
   ========================================================================== */
.signature{position:relative;overflow:hidden;background:var(--forest-deep);color:var(--ink-inv)}
.signature__bg{position:absolute;inset:0;opacity:.26}
.signature__bg img{width:100%;height:100%;object-fit:cover}
.signature__in{position:relative;z-index:1;display:grid;grid-template-columns:1.1fr .9fr;
  gap:clamp(2rem,5vw,4.5rem);align-items:center}
.steps{display:grid;gap:.15rem;margin:var(--s-3) 0}
.step{display:flex;gap:var(--s-2);align-items:flex-start;padding-block:.75rem;border-top:1px solid var(--line-inv)}
.step:last-child{border-bottom:1px solid var(--line-inv)}
.step__no{font-family:var(--f-head);color:var(--gold);font-size:1rem;width:2ch;flex:none;padding-top:.15rem}
.step__t{display:block;font-weight:500;font-size:.98rem}
.step__d{display:block;color:var(--ink-inv-mut);font-size:.86rem}
.price-card{
  background:rgba(243,244,236,.06);border:1px solid var(--line-inv);
  border-radius:var(--r-lg);padding:var(--s-4);text-align:center;backdrop-filter:blur(4px);
}
.price-card__num{font-family:var(--f-head);font-size:clamp(2.6rem,5vw,3.6rem);color:var(--gold);line-height:1}
.price-card__unit{font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-inv-mut);margin-top:.5rem}
.price-card .btn{margin-top:var(--s-3);width:100%}

/* ==========================================================================
   gallery
   ========================================================================== */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem}
.gallery figure{margin:0;overflow:hidden;border-radius:var(--r-md);aspect-ratio:3/4;background:var(--forest-soft)}
.gallery figure:nth-child(1),.gallery figure:nth-child(4){aspect-ratio:3/4;margin-top:0}
.gallery figure:nth-child(2),.gallery figure:nth-child(3){margin-top:2.2rem}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-slow) var(--e-out)}
.gallery figure:hover img{transform:scale(1.06)}

/* ==========================================================================
   reviews
   ========================================================================== */
.reviews__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--s-3);margin-bottom:var(--s-4)}
.gscore{display:flex;align-items:center;gap:var(--s-3)}
.gscore__n{font-family:var(--f-head);font-size:clamp(3rem,6vw,4.2rem);line-height:1;color:var(--gold)}
.gscore__m span{display:block;font-size:.84rem;color:var(--ink-inv-mut)}

.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-3)}
.rev{
  /* blockquote carries a UA margin of 1em 40px. Unreset it eats the grid gutters
     on the home page and pushes the scroll rail off its first snap point. */
  margin:0;
  background:rgba(243,244,236,.05);border:1px solid var(--line-inv);
  border-radius:var(--r-lg);padding:var(--s-3);display:flex;flex-direction:column;gap:.7rem;
}
.rev__stars{color:var(--gold);letter-spacing:.1em;font-size:.9rem}
.rev__q{font-size:.95rem;color:var(--cream);margin:0;line-height:1.65}
.rev__by{font-size:.8rem;color:var(--ink-inv-mut);margin-top:auto}

.vid-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-3);margin-top:var(--s-4)}
.vid{
  position:relative;aspect-ratio:9/16;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line-inv);background:var(--forest-soft);
  display:grid;place-items:center;text-align:center;padding:var(--s-3);
}
.vid__play{width:56px;height:56px;border-radius:var(--r-pill);background:var(--gold);
  color:var(--forest-deep);display:grid;place-items:center;margin-inline:auto}
.vid__play svg{width:22px;height:22px;margin-left:3px}
.vid__meta{font-size:.8rem;color:var(--ink-inv-mut);margin-top:var(--s-2)}
.vid__flag{position:absolute;top:.8rem;left:.8rem;font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold);border:1px solid var(--line-inv);
  border-radius:var(--r-pill);padding:.25rem .6rem}

/* ==========================================================================
   booking band
   ========================================================================== */
.booking{background:var(--forest);color:var(--ink-inv);position:relative;overflow:hidden}
.booking__in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.channels{display:grid;gap:.75rem;margin-top:var(--s-3)}
.channel{
  display:flex;align-items:center;gap:var(--s-2);text-decoration:none;
  border:1px solid var(--line-inv);border-radius:var(--r-md);padding:1rem 1.15rem;
  transition:background var(--t-fast),border-color var(--t-fast),transform var(--t-fast) var(--e-out);
}
.channel:hover{background:rgba(243,244,236,.06);border-color:var(--gold);transform:translateX(4px)}
.channel__ico{width:42px;height:42px;border-radius:var(--r-pill);display:grid;place-items:center;flex:none;color:#fff}
.channel__ico svg{width:21px;height:21px}
.channel__ico--zalo{background:var(--zalo)}
.channel__ico--msgr{background:var(--messenger)}
.channel__ico--phone{background:var(--gold);color:var(--forest-deep)}
.channel b{display:block;font-weight:500;font-size:.98rem}
.channel span{display:block;font-size:.83rem;color:var(--ink-inv-mut)}
.channel__go{margin-left:auto;color:var(--gold);flex:none}

.picker{background:rgba(243,244,236,.06);border:1px solid var(--line-inv);
  border-radius:var(--r-lg);padding:var(--s-4);backdrop-filter:blur(4px)}
.field{display:grid;gap:.4rem;margin-bottom:var(--s-2)}
.field > span{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-inv-mut)}
.field select,.field input{
  width:100%;padding:.78rem .9rem;border-radius:var(--r-sm);
  border:1px solid var(--line-inv);background:rgba(28,46,38,.5);color:var(--cream);
  font:inherit;font-size:.94rem;
}
.field select option{background:var(--forest-deep);color:var(--cream)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.picker .btn{width:100%;margin-top:var(--s-2)}
.picker__note{font-size:.78rem;color:var(--ink-inv-mut);margin:var(--s-2) 0 0;text-align:center}

/* ==========================================================================
   location
   ========================================================================== */
.loc{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.loc__map{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);aspect-ratio:4/3;background:var(--parchment)}
.loc__map iframe{width:100%;height:100%;border:0}
.facts{display:grid;gap:var(--s-2);margin-top:var(--s-3)}
.fact{display:flex;gap:var(--s-2);align-items:flex-start;padding-bottom:var(--s-2);border-bottom:1px solid var(--line)}
.fact svg{width:20px;height:20px;color:var(--gold-dim);flex:none;margin-top:.25rem}
.fact b{display:block;font-weight:500;font-size:.94rem}
.fact span{display:block;font-size:.88rem;color:var(--ink-mut)}

/* ==========================================================================
   footer
   ========================================================================== */
.foot{background:var(--forest-deep);color:var(--ink-inv-mut);padding-block:var(--s-6) var(--s-3);font-size:.88rem}
.foot__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--s-4);padding-bottom:var(--s-4);border-bottom:1px solid var(--line-inv)}
.foot h4{font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-family:var(--f-body);font-weight:600;margin-bottom:var(--s-2)}
.foot a{text-decoration:none;transition:color var(--t-fast)}
.foot a:hover{color:var(--gold)}
.foot li{margin-bottom:.5rem}
.foot__bottom{display:flex;flex-wrap:wrap;gap:var(--s-2);justify-content:space-between;padding-top:var(--s-3);font-size:.8rem}

/* sticky mobile book bar */
.bookbar{
  position:fixed;left:0;right:0;bottom:0;z-index:var(--z-bar);display:none;
  gap:.5rem;padding:.6rem .8rem calc(.6rem + env(safe-area-inset-bottom));
  background:rgba(28,46,38,.96);backdrop-filter:blur(10px);border-top:1px solid var(--line-inv);
}
.bookbar .btn{flex:1;padding-block:.8rem}

/* ==========================================================================
   scroll reveal
   ========================================================================== */
.reveal{opacity:0;transform:translateY(22px);transition:opacity var(--t-slow) var(--e-out),transform var(--t-slow) var(--e-out)}
.reveal.is-in{opacity:1;transform:none}
.reveal[data-delay="1"]{transition-delay:.08s}
.reveal[data-delay="2"]{transition-delay:.16s}
.reveal[data-delay="3"]{transition-delay:.24s}
.reveal[data-delay="4"]{transition-delay:.32s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  .reveal{opacity:1;transform:none}
}

/* ==========================================================================
   SERVICES PAGE
   Section rhythm follows the reference architecture (hero → ornament intro →
   carousel → full-bleed feature blocks → FAQ); palette, type and copy are ours.
   ========================================================================== */

/* ---- page hero: shorter than the home hero, title bottom-left ---- */
.phero{position:relative;min-height:clamp(52vh,64vh,760px);display:flex;align-items:flex-end;
  padding-block:clamp(6rem,14vw,10rem) clamp(3rem,7vw,5.5rem);color:var(--cream);isolation:isolate}
.phero__media{position:absolute;inset:0;z-index:-1;overflow:hidden;background:var(--forest-deep)}
/* still and motion are stacked: the img always paints, the video fades in over
   it once it is genuinely playing. A failed or slow video degrades to the photo
   rather than to a flat colour block. */
.phero__media img,.phero__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.phero__media video{opacity:0;transition:opacity 900ms var(--e-out)}
.phero__media video.is-live{opacity:1}
.phero__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(28,46,38,.62) 0%,rgba(28,46,38,.34) 42%,rgba(28,46,38,.86) 100%)}
.phero__title{font-size:clamp(2.7rem,7.6vw,6rem);line-height:1.02;color:var(--cream)}
.phero__lede{margin-top:var(--s-3);max-width:46ch;font-size:clamp(1rem,1.4vw,1.14rem);color:var(--cream);opacity:.9}

/* ---- ornament intro band ---- */
.intro-band{background:var(--cream)}
.ornament{width:130px;height:auto;color:var(--gold);opacity:.85;margin:0 auto var(--s-3)}
.intro-band__t{font-size:clamp(1.9rem,4.4vw,3.35rem);line-height:1.14;letter-spacing:-.02em}
.intro-band__p{max-width:60ch;margin:var(--s-3) auto 0;color:var(--ink-mut)}

/* ---- carousel ---- */
.carou-wrap{padding-block:clamp(3rem,6vw,var(--s-7))}
.carou{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(.5rem,2vw,1.75rem)}
.carou__view{overflow:hidden;border-radius:var(--r-lg);box-shadow:var(--shadow-2)}
.carou__track{display:flex;transition:transform var(--t-slow) var(--e-out)}
.carou__slide{flex:0 0 100%}
/* height:auto is what lets width/height attributes coexist with aspect-ratio —
   without it the attribute's height wins and the slide grows to the file's height */
.carou__slide img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.carou__btn{width:clamp(38px,5vw,54px);aspect-ratio:1;border-radius:50%;flex:none;
  border:1px solid var(--gold);background:transparent;color:var(--gold-dim);
  display:grid;place-items:center;cursor:pointer;transition:background var(--t-fast),color var(--t-fast)}
.carou__btn svg{width:45%}
.carou__btn:hover{background:var(--gold);color:var(--cream)}
.carou__dots{display:flex;gap:.5rem;justify-content:center;margin-top:var(--s-3)}
.carou__dots button{width:8px;height:8px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:var(--gold);opacity:.28;transition:opacity var(--t-fast),transform var(--t-fast)}
.carou__dots button[aria-selected="true"]{opacity:1;transform:scale(1.35)}

/* ---- full-bleed service block: the page's main rhythm ---- */
.svc{position:relative;isolation:isolate;color:var(--cream);
  min-height:clamp(600px,88vh,900px);display:grid;place-items:center;
  padding-block:clamp(4.5rem,11vw,8rem);text-align:center;overflow:hidden}
.svc__media{position:absolute;inset:0;z-index:-1;overflow:hidden;background:var(--forest-deep)}
.svc__media img,.svc__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.svc__media video{opacity:0;transition:opacity 900ms var(--e-out)}
.svc__media video.is-live{opacity:1}
/* Scrim is tuned to two competing needs: the photography has to stay visible
   (it's the point of the section) while cream text keeps a comfortable
   contrast ratio over it. Radial keeps the centre — where the copy sits —
   readable without flattening the edges of the image. */
.svc__media::after{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at center,rgba(28,46,38,.42) 0%,rgba(28,46,38,.62) 58%,rgba(28,46,38,.84) 100%)}
/* A contained backdrop behind the copy column. The section scrim alone cannot
   serve both the dark stone shots and the pale linen ones, so contrast is
   guaranteed locally here and fades to nothing before the frame edge — the
   photograph stays visible, the text stays readable on every image. */
.svc__in{display:flex;flex-direction:column;align-items:center;max-width:60ch;
  padding:clamp(1.5rem,4vw,3rem) clamp(1rem,5vw,4rem);
  background:radial-gradient(ellipse at center,
    rgba(28,46,38,.72) 0%,rgba(28,46,38,.55) 52%,rgba(28,46,38,.18) 76%,rgba(28,46,38,0) 92%)}
/* ghost CTA needs its own floor on busy backgrounds */
.svc .btn--ghost{background:rgba(28,46,38,.42);border-color:rgba(243,244,236,.62);color:var(--cream)}
.svc .btn--ghost:hover{background:var(--gold);border-color:var(--gold);color:var(--forest-deep)}
.svc__ico{width:clamp(38px,4.4vw,52px);height:auto;color:var(--gold);margin-bottom:var(--s-2)}
.svc .eyebrow{color:var(--gold)}
.svc__title{font-size:clamp(2.1rem,5.4vw,4.1rem);line-height:1.06;color:var(--cream);letter-spacing:-.02em}
.svc__title em{font-style:italic;color:var(--gold)}
.svc__lede{margin-top:var(--s-3);max-width:52ch;color:var(--cream);opacity:.88}
.svc__choice{font-size:.86rem;letter-spacing:.06em;color:var(--gold);opacity:.95;margin:0 0 var(--s-1)}
.svc__note{font-size:.84rem;max-width:46ch;color:var(--cream);opacity:.66;margin-top:var(--s-2)}
.svc__tag{display:inline-block;margin-bottom:var(--s-2);padding:.35rem .9rem;border-radius:var(--r-pill);
  background:var(--gold);color:var(--forest-deep);font-size:.68rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase}

/* price rows — the "clear table with icons" the brief asks for */
.prices{width:min(100%,26rem);margin:var(--s-3) 0 var(--s-4);display:grid;gap:.15rem}
.prices li{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:.75rem;
  padding:.5rem 0;border-bottom:1px solid var(--line-inv)}
.prices li:last-child{border-bottom:0}
.prices__d{font-family:var(--f-head);font-size:1.15rem;color:var(--gold);min-width:2.9rem;text-align:left}
.prices li i{border-bottom:1px dotted rgba(243,244,236,.32);transform:translateY(-.25rem)}
.prices__v{font-size:1.02rem;font-weight:500;color:var(--cream);letter-spacing:.01em}

/* ---- combos ---- */
.combos{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-3);align-items:start}
.combo{position:relative;padding:clamp(1.75rem,3.4vw,2.75rem);border-radius:var(--r-lg);
  border:1px solid var(--line-inv);background:var(--forest-soft);display:flex;flex-direction:column}
.combo--feature{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset}
.combo__flag{position:absolute;top:-.75rem;left:50%;transform:translateX(-50%);
  background:var(--gold);color:var(--forest-deep);font-size:.66rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;padding:.3rem .85rem;border-radius:var(--r-pill);white-space:nowrap}
.combo__len{font-family:var(--f-head);font-size:clamp(2.6rem,5vw,3.6rem);line-height:1;color:var(--gold);margin:0}
.combo__len span{font-size:.5em;vertical-align:super;opacity:.75}
.combo__t{margin:var(--s-1) 0 var(--s-3);color:var(--cream)}
.combo__list{display:grid;gap:.6rem;margin-bottom:var(--s-3);flex:1}
.combo__list li{display:grid;grid-template-columns:3rem 1fr;gap:.6rem;align-items:baseline;
  font-size:.94rem;color:var(--ink-inv-mut);padding-bottom:.6rem;border-bottom:1px solid var(--line-inv)}
.combo__list li:last-child{border-bottom:0;padding-bottom:0}
.combo__list li>span:first-child{font-family:var(--f-head);color:var(--gold)}
.combo__list em{font-style:italic;color:var(--gold)}
.combo__price{font-family:var(--f-head);font-size:1.85rem;color:var(--cream);margin:0 0 var(--s-3)}
.tipnote{text-align:center;margin-top:var(--s-5);font-size:.86rem;color:var(--ink-inv-mut)}

/* ---- FAQ: sticky heading beside an accordion, per the reference ---- */
.faq{background:var(--parchment)}
.faq__grid{display:grid;grid-template-columns:minmax(220px,.8fr) 1.6fr;gap:clamp(1.5rem,5vw,5rem);align-items:start}
.faq__h{font-size:clamp(2rem,4.6vw,3.4rem);line-height:1.08;color:var(--gold-dim);position:sticky;top:6.5rem}
.faq__list{display:grid}
.qa{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;padding:1.15rem 2.5rem 1.15rem 0;position:relative;
  font-family:var(--f-head);font-size:clamp(1.05rem,1.9vw,1.35rem);color:var(--ink);transition:color var(--t-fast)}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--gold-dim)}
.qa summary::after{content:"";position:absolute;right:.35rem;top:50%;width:11px;height:11px;
  border-right:1.5px solid var(--gold-dim);border-bottom:1.5px solid var(--gold-dim);
  transform:translateY(-70%) rotate(45deg);transition:transform var(--t-mid) var(--e-out)}
.qa[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.qa[open] summary{color:var(--gold-dim)}
.qa__a{padding:0 2.5rem 1.35rem 0;color:var(--ink-mut);font-size:.96rem}
.qa__a p{margin:0}

/* ==========================================================================
   responsive
   ========================================================================== */
@media (max-width:1080px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .card:last-child{grid-column:1/-1}
  .card:last-child .card__media{aspect-ratio:16/7}
}
/* The Vietnamese labels are long, and "Blog & Đánh giá" is the longest of the
   four. Below ~1080px they wrap to two lines and the header doubles in height,
   so hand over to the burger menu while the row still fits on one line. */
@media (max-width:1080px){
  .nav__links{display:none}
  .burger{display:flex}
}
@media (max-width:900px){
  .split,.signature__in,.booking__in,.loc{grid-template-columns:1fr}
  .split__media{aspect-ratio:16/10;order:-1}
  .strip__grid{grid-template-columns:repeat(2,1fr);gap:var(--s-2) 0}
  .strip__item:nth-child(3){border-left:0}
  .rev-grid,.vid-grid{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .gallery figure{margin-top:0 !important}
  .foot__grid{grid-template-columns:1fr}
  .hero__scroll{display:none}
  .bookbar{display:flex}
  body{padding-bottom:4.6rem}

  /* services page */
  .combos{grid-template-columns:1fr}
  .faq__grid{grid-template-columns:1fr}
  .faq__h{position:static;margin-bottom:var(--s-2)}
  .svc{min-height:auto}
}
@media (max-width:640px){
  .cards{grid-template-columns:1fr}
  .card:last-child .card__media{aspect-ratio:4/5}
  .field-row{grid-template-columns:1fr}
  .hero__cta .btn{flex:1}

  /* Header at phone width: brand + lang + burger only. The nav's own Book now
     button pushed the row past the viewport and forced the brand to wrap onto
     three lines — the sticky bookbar already carries that CTA on mobile. */
  .nav__in>.btn--gold{display:none}
  .brand__name{white-space:nowrap;font-size:1.08rem}
  .brand__sub{white-space:nowrap;font-size:.5rem;letter-spacing:.24em}
  .nav__in{gap:var(--s-2)}

  /* services page */
  .carou{grid-template-columns:1fr}
  .carou__btn{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
    background:rgba(28,46,38,.55);border-color:rgba(243,244,236,.5);color:var(--cream)}
  .carou__btn--prev{left:.6rem}
  .carou__btn--next{right:.6rem}
  .prices{width:100%}
  .prices__d{min-width:2.4rem;font-size:1.05rem}
}

/* ==========================================================================
   review rail  —  blog-reviews.html
   ==========================================================================
   Eleven reviews is too many for the 3-up .rev-grid on the home page and too
   many for a dot carousel (eleven dots is not a control, it is a decoration).
   A scroll-snap rail is touch-native, needs no JS to work, and the arrows are
   progressive enhancement on top of it. */
.revrail-wrap{position:relative}
.revrail{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(300px,26%);
  gap:var(--s-3);overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding-inline:0;
  padding-bottom:var(--s-2);
  /* the rail bleeds to the viewport edge on small screens so a card is visibly
     cut off — the affordance that tells a thumb there is more to the right */
  scrollbar-width:thin;scrollbar-color:var(--forest-line) transparent;
}
.revrail::-webkit-scrollbar{height:6px}
.revrail::-webkit-scrollbar-thumb{background:var(--forest-line);border-radius:var(--r-pill)}
.revrail::-webkit-scrollbar-track{background:transparent}
.revrail > *{scroll-snap-align:start}
.revrail .rev{height:100%}
.rev__head{display:flex;align-items:center;gap:.7rem}
.rev__avatar{
  width:34px;height:34px;flex:none;border-radius:var(--r-pill);
  background:var(--forest-soft);border:1px solid var(--line-inv);
  display:grid;place-items:center;font-size:.8rem;color:var(--gold);
}
.rev__name{font-size:.9rem;color:var(--cream);line-height:1.2}
.rev__when{font-size:.74rem;color:var(--ink-inv-mut)}
.rev__lang{
  margin-left:auto;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold);border:1px solid var(--line-inv);
  border-radius:var(--r-pill);padding:.2rem .5rem;
}
.railnav{display:flex;gap:.5rem;margin-top:var(--s-2)}
.railnav button{
  width:40px;height:40px;border-radius:var(--r-pill);cursor:pointer;
  background:transparent;border:1px solid var(--line-inv);color:var(--cream);
  display:grid;place-items:center;
  transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast);
}
.railnav button:hover{background:var(--gold);border-color:var(--gold);color:var(--forest-deep)}
.railnav button[disabled]{opacity:.3;cursor:default}
.railnav button[disabled]:hover{background:transparent;border-color:var(--line-inv);color:var(--cream)}
.railnav svg{width:18px;height:18px}

/* ==========================================================================
   blog posts  —  blog-reviews.html
   ========================================================================== */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-3)}
.post{
  display:flex;flex-direction:column;background:var(--cream);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  text-decoration:none;color:inherit;
  transition:transform var(--t-fast) var(--e-out),box-shadow var(--t-fast);
}
.post:hover{transform:translateY(-6px);box-shadow:var(--shadow-2)}
.post__media{aspect-ratio:16/10;overflow:hidden;background:var(--parchment);position:relative}
.post__media img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-slow) var(--e-out)}
.post:hover .post__media img{transform:scale(1.05)}
.post__tag{
  position:absolute;top:.8rem;left:.8rem;font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;background:var(--cream);color:var(--gold-dim);
  border-radius:var(--r-pill);padding:.3rem .75rem;
}
.post__body{padding:var(--s-3);display:flex;flex-direction:column;gap:.6rem;flex:1}
.post__when{font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mut)}
.post__t{font-family:var(--f-head);font-size:1.25rem;line-height:1.25;margin:0}
.post__x{font-size:.92rem;color:var(--ink-mut);margin:0}
.post__more{margin-top:auto;font-size:.86rem;color:var(--gold-dim);display:flex;align-items:center;gap:.4rem}
.post__more svg{width:16px;height:16px;transition:transform var(--t-fast) var(--e-out)}
.post:hover .post__more svg{transform:translateX(4px)}

/* an empty slot, so the grid still reads as a grid before the posts exist */
.post--empty{
  background:transparent;border-style:dashed;box-shadow:none;
  display:grid;place-items:center;text-align:center;padding:var(--s-5) var(--s-3);
  color:var(--ink-mut);font-size:.88rem;min-height:220px;
}
.post--empty:hover{transform:none;box-shadow:none}

@media (max-width:1080px){
  .posts{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .revrail{grid-auto-columns:minmax(260px,78%)}
}
@media (max-width:640px){
  .posts{grid-template-columns:1fr}
}

/* ==========================================================================
   social row
   ========================================================================== */
.social{display:flex;gap:.6rem;margin-top:var(--s-3);flex-wrap:wrap}
.social a{
  width:40px;height:40px;border-radius:var(--r-pill);flex:none;
  display:grid;place-items:center;color:var(--ink-inv-mut);
  border:1px solid var(--line-inv);text-decoration:none;
  transition:background var(--t-fast),border-color var(--t-fast),
             color var(--t-fast),transform var(--t-fast) var(--e-out);
}
.social a:hover{background:var(--gold);border-color:var(--gold);color:var(--forest-deep);transform:translateY(-2px)}
.social svg{width:18px;height:18px}
/* the brand mark in the footer is the real logo, so it needs no stroke colour */
.foot .brand__mark{border-radius:var(--r-pill)}

/* ==========================================================================
   review marquee  —  blog-reviews.html
   ==========================================================================
   The reviews drift continuously instead of waiting to be swiped. Three things
   this has to get right, because moving text is easy to get wrong:
     · slow enough to read a card while it travels (~26s per card width)
     · pauses on hover and on keyboard focus, plus an explicit control, because
       WCAG 2.2.2 requires a pause for anything that moves for over five seconds
     · stops dead under prefers-reduced-motion and becomes a normal scroller */
.revmarquee{
  overflow:hidden;position:relative;
  /* the cards dissolve at both edges rather than being chopped off */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.revmarquee__track{
  display:flex;gap:var(--s-3);width:max-content;
  animation:rev-drift var(--rev-dur,150s) linear infinite;
  animation-direction:var(--rev-dir,reverse);   /* reverse = travelling right */
}
@keyframes rev-drift{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}
.revmarquee:hover .revmarquee__track,
.revmarquee:focus-within .revmarquee__track,
.revmarquee.is-paused .revmarquee__track{animation-play-state:paused}
.revmarquee .rev{width:clamp(272px,24vw,340px);flex:none;height:auto}

@media (prefers-reduced-motion:reduce){
  .revmarquee{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .revmarquee__track{animation:none}
}

/* two video reviews, not three: keep them at a readable width instead of letting
   each stretch to half the page */
.vid-grid--two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:640px}
@media (max-width:900px){ .vid-grid--two{max-width:none} }
/* two 9:16 portraits side by side on a 375px phone come out 156px wide —
   too small to read a face. Stack them instead. */
@media (max-width:640px){ .vid-grid--two{grid-template-columns:1fr;max-width:340px} }
/* [hidden] on an <svg> loses to the author rules that size icons, so the play/
   pause pair both painted. Make the attribute win explicitly. */
.railnav svg[hidden]{display:none}

/* ==========================================================================
   breathing review band  —  blog-reviews.html
   ==========================================================================
   A background that breathes rather than a background that plays. 12s is one
   calm breath: roughly five seconds in, seven out — the exhale is longer than
   the inhale, which is the ratio that actually settles a nervous system, so the
   keyframe peak sits at 42% rather than halfway.

   Motion is radial only. The reviews already travel horizontally across this
   section, and anything drifting on the same axis would race them.

   Costs nothing: no video, no request, and it runs on the phones where we
   deliberately refuse to ship background footage. */
/* overflow clips the glow to the band: the -10% inset gives the 1.14 scale
   room to grow, and without clipping that spill tints the pale blog
   section underneath */
.reviews--breathing{position:relative;isolation:isolate;overflow:hidden}
.reviews--breathing::before{
  content:"";position:absolute;inset:-10%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(58% 52% at 50% 40%, rgba(201,160,96,.16), transparent 70%),
    radial-gradient(90% 70% at 50% 105%, rgba(28,46,38,.5), transparent 70%);
  animation:breathe 12s cubic-bezier(.37,0,.63,1) infinite;
  will-change:transform,opacity;
}
/* peak gold sits at .16 alpha: cream on forest measures 9.9:1, and 7.7:1 at the
   top of the breath — still past AA with room to spare */
@keyframes breathe{
  0%  {transform:scale(1);      opacity:.5}
  42% {transform:scale(1.14);   opacity:1}
  100%{transform:scale(1);      opacity:.5}
}
@media (prefers-reduced-motion:reduce){
  .reviews--breathing::before{animation:none;opacity:.75}
}

/* Review card header: real Google display names run long ("the best reviewer
   ever lived"), which pushed the date onto a second line and made the card
   headers ragged. Let the name ellipsize and keep the date on one line. */
.rev__head > span:nth-child(2){min-width:0;flex:1}
.rev__name{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rev__when{display:block;white-space:nowrap}
.rev__lang{flex:none}

/* ==========================================================================
   review band footage layer
   ==========================================================================
   The Higgsfield loop sits UNDER the breathing glow, not instead of it:
     z-index -2  footage      (desktop, good connection, motion allowed)
     z-index -1  breathing glow — still the only layer phones ever get
   Held at 40% so the drifting review text keeps its contrast. If the video
   never loads, nothing is missing: the glow was always the design. */
.reviews--breathing .reviews__media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.reviews--breathing .reviews__media video{
  width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1200ms var(--e-out);
  /* The heavy blur this started with is no longer needed: each card now carries
     its own dark ground (.revmarquee .rev below), so text contrast no longer
     depends on the footage. Only a light blur remains — enough to soften
     compression noise and keep the eye on the reviews, not enough to hide that
     it is a real steam cabin. Brightness is held down instead, because the
     section heading sits on the footage directly with no card behind it. */
  filter:blur(4px) brightness(.62) saturate(1.02);
  transform:scale(1.04);
}
.reviews--breathing .reviews__media video.is-live{opacity:.72}
@media (prefers-reduced-motion:reduce){
  .reviews--breathing .reviews__media{display:none}
}

/* Cards on the marquee sit over moving footage whose brightness varies across
   the band, so their contrast cannot depend on what happens to be behind them.
   Give each card its own dark ground — the same trick .svc__in uses on the
   services page. Cream on this measures 8.9:1 whatever the video is doing. */
.revmarquee .rev{
  background:rgba(24,40,33,.62);
  -webkit-backdrop-filter:blur(8px) saturate(1.1);
          backdrop-filter:blur(8px) saturate(1.1);
  border-color:rgba(243,244,236,.14);
}

/* ==========================================================================
   guest video reviews — real players
   ==========================================================================
   These are people talking, not silent decoration: they keep their audio and
   their own controls, and nothing downloads until someone presses play
   (preload="none" — 1.6MB and 1.1MB otherwise). The poster carries the card. */
.vid--player{padding:0;display:block}
.vid--player video{width:100%;height:100%;object-fit:cover;background:var(--forest-deep)}
.vid--player .vid__flag{z-index:2}
/* the gold play affordance the design already uses, sitting over the poster
   until the browser's own controls take over on first play */
.vid__start{
  position:absolute;inset:0;z-index:1;border:0;padding:0;cursor:pointer;
  background:transparent;display:grid;place-items:center;
  transition:background var(--t-fast);
}
.vid__start:hover{background:rgba(28,46,38,.25)}
.vid__start span{
  width:56px;height:56px;border-radius:var(--r-pill);background:var(--gold);
  color:var(--forest-deep);display:grid;place-items:center;
  box-shadow:0 6px 24px rgba(28,46,38,.35);
  transition:transform var(--t-fast) var(--e-out);
}
.vid__start:hover span{transform:scale(1.08)}
.vid__start svg{width:22px;height:22px;margin-left:3px}
.vid--player.is-playing .vid__start{display:none}

/* A hidden slot must not reserve its 9:16 box, or it leaves a tall empty band.
   .vid sets display:grid, which overrides the UA [hidden] rule. */
.vid[hidden]{display:none}
/* three-up variant for when the third video lands */
.vid-grid--three{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none}
@media (max-width:640px){ .vid-grid--three{grid-template-columns:1fr;max-width:340px} }