/* ==========================================================
   V BEAUTY MASSAGE — Design tokens (light theme)
   Palette: warm ivory ground (not black, as requested), the gold
   from the brand mark as the anchor accent, and a soft dusty-rose
   for contrast in alternating sections.
   Type: Cormorant Garamond (display serif) + Jost (body) +
   Alex Brush (handwritten accent, echoing the logo script).
   Signature: a thin gold ring — the circular crop of the logo —
   recurring as photo frames, dividers and badges.
   ========================================================== */

:root{
  /* Page background: dark neutral gray (not brown, not pure black) with gold accents */
  --ivory:      #2A2A2A;
  --ivory-2:    #343434;
  --rose:       #C9948A;
  --rose-dim:   #EADAD3;

  /* Text on the dark page background (was the old "background" tones) */
  --ink:        #F3E9D8;
  --ink-soft:   #D8C9B4;

  --gold:       #B9924F;
  --gold-dark:  #8C6D33;
  --gold-light: #D9B876;
  --line:       rgba(185,146,79,0.28);
  --white:      #FFFFFF;

  /* Dark text, reserved for the literal-white surfaces: header, cards, forms */
  --text-dark:      #2B2420;
  --text-dark-soft: #5B4F45;

  --font-display: "Cormorant Garamond", serif;
  --font-body:    "Jost", sans-serif;
  --font-script:  "Alex Brush", cursive;

  --container: 1180px;

  /* Subtle spa-motif silhouette pattern: lotus, zen stones, oil drop, leaf.
     Kept extremely low-opacity so it reads as texture, not decoration. */
  --spa-pattern: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><g fill='none' stroke='rgba(217,184,118,0.12)' stroke-width='1.6'><g transform='translate(55,55)'><path d='M0 24C-12 6 -6 -12 0 -24C6 -12 12 6 0 24Z'/><path d='M-20 14C-25 -4 -15 -17 0 -24C-10 -10 -16 3 -20 14Z'/><path d='M20 14C25 -4 15 -17 0 -24C10 -10 16 3 20 14Z'/><circle cx='0' cy='10' r='3' fill='rgba(217,184,118,0.12)'/></g><g transform='translate(235,80)'><ellipse cx='0' cy='20' rx='20' ry='8'/><ellipse cx='0' cy='6' rx='14' ry='6'/><ellipse cx='0' cy='-6' rx='9' ry='4.5'/></g><g transform='translate(80,235)'><path d='M0 -20C9 -4 15 8 0 22C-15 8 -9 -4 0 -20Z'/><line x1='0' y1='22' x2='0' y2='30'/></g><g transform='translate(240,245)'><path d='M-24 0C-12 -20 12 -20 24 0C12 20 -12 20 -24 0Z'/><line x1='-24' y1='0' x2='24' y2='0'/><line x1='-12' y1='-8' x2='-4' y2='0'/><line x1='12' y1='-8' x2='4' y2='0'/><line x1='-12' y1='8' x2='-4' y2='0'/><line x1='12' y1='8' x2='4' y2='0'/></g></g></svg>");
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background-color: var(--ivory);
  background-image: var(--spa-pattern);
  background-repeat: repeat;
  background-size: 300px 300px;
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 600;
  margin: 0 0 .5em;
  letter-spacing: .01em;
}
p{ margin: 0 0 1em; }
.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}

/* ---------------- eyebrow / script accents ---------------- */
.eyebrow{
  font-family: var(--font-script);
  font-size: 2rem;
  color: var(--gold-dark);
  display: inline-block;
  margin-bottom: .1em;
  line-height: 1;
}
.kicker{
  font-family: var(--font-body);
  font-size: .72rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--gold-dark);
}

.arc-divider{ display:flex; justify-content:center; margin: 2.5rem 0; }
.arc-divider svg{ width:120px; height:28px; }

/* ================= HEADER ================= */
.site-header{
  position: sticky; top:0; z-index: 500;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 14px rgba(0,0,0,0.08);
}
.header-inner{
  max-width: var(--container);
  margin: 0 auto;
  padding: 14px 32px;
  display:flex; align-items:center; justify-content:space-between;
  gap: 24px;
}
.brand{ display:flex; align-items:center; gap:14px; }
.brand-mark{
  width:48px; height:48px; border-radius:50%;
  border: 1.5px solid var(--gold);
  padding: 3px;
  flex-shrink:0;
  background: var(--white);
}
.brand-mark img{
  width:100%; height:100%; object-fit:cover; border-radius:50%;
}
.brand-mark.small{ width:40px; height:40px; }
.brand-text{ display:flex; flex-direction:column; line-height:1.2; }
.brand-name{
  font-family: var(--font-display); font-weight:600;
  font-size: 1.15rem; color: var(--text-dark); letter-spacing:.03em;
}
.brand-tag{
  font-size: .62rem; letter-spacing:.18em; text-transform:uppercase;
  color: var(--gold-dark);
}

.site-nav{ display:flex; align-items:center; gap: 30px; }
.site-nav ul{ display:flex; gap: 28px; }
.site-nav a{
  font-size: .82rem; letter-spacing:.06em; text-transform:uppercase;
  color: var(--text-dark-soft);
  position:relative; padding-bottom:4px;
}
.site-nav a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1px;
  background: var(--gold-dark); transition: width .25s ease;
}
.site-nav a:hover::after{ width:100%; }

.btn-book{
  border: 1px solid var(--gold);
  color: var(--gold-dark);
  padding: 10px 22px;
  font-size: .75rem; letter-spacing:.1em; text-transform:uppercase;
  border-radius: 999px;
  transition: background .25s ease, color .25s ease;
  white-space: nowrap;
}
.btn-book:hover{ background: var(--gold); color: var(--white); }

.nav-toggle{
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer; padding:6px;
}
.nav-toggle span{ width:22px; height:1.5px; background: var(--gold-dark); }

/* ================= BUTTONS (generic) ================= */
.btn{
  display:inline-block;
  padding: 14px 34px;
  font-size: .78rem; letter-spacing:.12em; text-transform:uppercase;
  border-radius: 999px;
  border: 1px solid var(--gold);
  transition: all .25s ease;
}
.btn-primary{ background: var(--gold); color: var(--white); border-color: var(--gold); }
.btn-primary:hover{ background: var(--gold-dark); border-color: var(--gold-dark); }
.btn-ghost{ color: var(--gold-dark); }
.btn-ghost:hover{ background: rgba(185,146,79,0.10); }

/* ================= HERO ================= */
.hero{
  position: relative;
  padding: 70px 0 100px;
  overflow:hidden;
  background-image: linear-gradient(180deg, var(--ivory) 0%, var(--ivory-2) 100%), var(--spa-pattern);
  background-repeat: no-repeat, repeat;
  background-size: cover, 300px 300px;
}
.hero .container{
  display:grid; grid-template-columns: 1.05fr .95fr; gap: 60px; align-items:center;
}
.hero-copy .eyebrow{ display:block; }
.hero h1{
  font-size: clamp(2.3rem, 4.2vw, 3.6rem);
  line-height:1.12;
}
.hero h1 em{ color: var(--gold-dark); font-style: italic; }
.hero-sub{
  max-width: 460px; color: var(--ink-soft); font-size: 1.05rem;
}
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; margin-top: 8px; }

.hero-stats{
  display:flex; gap: 44px; margin-top: 50px; flex-wrap:wrap;
}
.hero-stat .num{
  font-family: var(--font-display); font-size:1.9rem; color: var(--gold-dark); font-weight:600;
}
.hero-stat .lbl{
  font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color: var(--ink-soft);
}

/* ================= HERO — VIDEO BACKGROUND ================= */
.video-hero{
  padding: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display:flex;
  align-items:center;
  background-image:none;
}
.hero-video-bg{
  position:absolute;
  inset:0;
  overflow:hidden;
  z-index:0;
  background:#0c0906;
}
.hero-video-bg iframe{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
  /* width/height are set dynamically via JS (resizeHeroVideo) so the
     video always fully covers the box on any screen size, no gaps/crop issues */
}
.hero-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  background: linear-gradient(180deg, rgba(18,13,9,0.58) 0%, rgba(18,13,9,0.42) 45%, rgba(18,13,9,0.72) 100%);
}
.video-hero .hero-content{
  position:relative;
  z-index:2;
  display:block;
  padding: 140px 0 120px;
  width:100%;
}
.video-hero .hero-copy{ max-width:640px; }
.video-hero .hero-copy .eyebrow{ color: var(--gold); }
.video-hero h1{ color:#fff; }
.video-hero h1 em{ color: var(--gold); }
.video-hero .hero-sub{ color: rgba(255,255,255,0.86); max-width:520px; }
.btn-ghost-light{ color:#fff; border-color: rgba(255,255,255,0.55); }
.btn-ghost-light:hover{ background: rgba(255,255,255,0.12); border-color:#fff; }

.sound-toggle{
  position:absolute;
  right: 24px;
  bottom: 28px;
  z-index:3;
  display:flex;
  align-items:center;
  gap:8px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.55);
  background: rgba(18,13,9,0.45);
  backdrop-filter: blur(6px);
  color:#fff;
  font-size:.82rem;
  letter-spacing:.02em;
  cursor:pointer;
  transition: background .2s ease, border-color .2s ease;
}
.sound-toggle:hover{ background: rgba(18,13,9,0.65); border-color:#fff; }
.sound-toggle.is-on{ border-color: var(--gold); background: rgba(185,146,79,0.35); }
.sound-toggle .icon{ font-size:1rem; line-height:1; }

@media (max-width: 780px){
  .video-hero{ min-height: 100vh; min-height: 100dvh; }
  .video-hero .hero-content{ padding: 90px 0 70px; }
  .video-hero .hero-copy{ max-width:100%; }

  .video-hero .hero-copy .eyebrow{ font-size:1rem; }
  .video-hero h1{ font-size: 1.65rem; line-height:1.2; }
  .video-hero .hero-sub{ font-size:.88rem; line-height:1.55; max-width:100%; }
  .video-hero .hero-actions{ gap:10px; margin-top:16px; }
  .video-hero .hero-actions .btn{ padding: 10px 18px; font-size:.82rem; }

  .sound-toggle{ right:14px; bottom:16px; padding:8px 13px; font-size:.72rem; }
}

@media (max-width: 400px){
  .video-hero h1{ font-size: 1.4rem; }
  .video-hero .hero-sub{ font-size:.82rem; }
}

.hero-visual{ position:relative; }
.hero-photo{
  position:relative;
  border-radius: 14px;
  overflow:hidden;
  aspect-ratio: 4/5;
  box-shadow: 0 30px 60px -25px rgba(140,109,51,0.35);
}
.hero-photo img{ width:100%; height:100%; object-fit:cover; }
.hero-photo::after{
  content:""; position:absolute; inset:0;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 14px;
}
.floating-badge{
  position:absolute; bottom:-26px; left:-26px;
  width: 118px; height:118px; border-radius:50%;
  background: var(--gold);
  color: var(--white);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  border: 5px solid var(--ivory);
  box-shadow: 0 12px 24px -8px rgba(140,109,51,0.5);
}
.floating-badge .n{ font-family: var(--font-display); font-size:2rem; line-height:1; font-weight:600; }
.floating-badge .t{ font-size:.6rem; letter-spacing:.05em; text-transform:uppercase; max-width:80px; }

.floating-chip{
  position:absolute; top: 22px; right: -18px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 18px;
  box-shadow: 0 14px 30px -14px rgba(43,36,32,0.25);
  font-size: .78rem;
  color: var(--text-dark-soft);
  display:flex; align-items:center; gap:8px;
}
.floating-chip .star{ color: var(--gold); }

/* ================= SECTION shell ================= */
.section{ padding: 90px 0; }
.section.alt{
  background-color: var(--ivory-2);
  background-image: var(--spa-pattern);
  background-repeat: repeat;
  background-size: 300px 300px;
}
.section.rose{ background: var(--rose-dim); }
.section-head{ text-align:center; max-width: 640px; margin: 0 auto 56px; }
.section-head h2{ font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
.free-transport-badge{
  display: inline-block;
  margin-top: 14px;
  padding: 8px 22px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--white);
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 500;
}

/* ================= WHY HOME SERVICE ================= */
.why-home{ padding-top: 60px; }
.why-home-grid{
  display:grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items:start;
}
.check-list{ margin-top: 22px; display:flex; flex-direction:column; gap: 14px; }
.check-list li{
  display:flex; align-items:flex-start; gap: 12px;
  font-size: .98rem; color: var(--ink);
}
.check-list .ck{
  flex-shrink:0; width:24px; height:24px; border-radius:50%;
  background: var(--gold); color: var(--white);
  display:flex; align-items:center; justify-content:center;
  font-size:.72rem; margin-top:1px;
}
.why-home-areas{
  background: var(--white); border:1px solid var(--line); border-radius: 12px;
  padding: 32px;
}
.why-home-areas h4{
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color: var(--gold-dark); margin-bottom: 16px;
}
.area-chips{ display:flex; flex-wrap:wrap; gap: 10px; margin-bottom: 18px; }
.area-chip{
  border: 1px solid var(--gold); color: var(--gold-dark);
  padding: 7px 18px; border-radius: 999px; font-size: .82rem;
}
.area-note{ font-size:.85rem; color: var(--text-dark-soft); }

/* ================= PHOTO GALLERY GRID ================= */
.gallery-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 130px;
  grid-auto-flow: dense;
  gap: 18px;
}
.gallery-item{
  position:relative;
  border-radius: 12px;
  overflow:hidden;
  border: 1px solid var(--line);
}
.gallery-item img{
  width:100%; height:100%; object-fit:cover;
  transition: transform .5s ease;
}
.gallery-item:hover img{ transform: scale(1.06); }
.gallery-item.tall{ grid-row: span 2; }
.gallery-item.wide{ grid-column: span 2; }
.gallery-caption{
  position:absolute; left:0; right:0; bottom:0;
  padding: 14px 16px 12px;
  background: linear-gradient(0deg, rgba(43,36,32,0.62), transparent);
  color: var(--white);
  font-size: .78rem; letter-spacing:.06em; text-transform:uppercase;
}

/* ================= SERVICE / CARD GRID ================= */
.grid-3{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.card{
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 36px 30px;
  transition: transform .3s ease, box-shadow .3s ease;
}
.card:hover{ transform: translateY(-6px); box-shadow: 0 20px 40px -25px rgba(140,109,51,0.35); }
.card-ring{
  width:54px; height:54px; border-radius:50%;
  border:1px solid var(--gold);
  display:flex; align-items:center; justify-content:center;
  margin-bottom: 20px;
  color: var(--gold-dark); font-family: var(--font-display); font-size:1.25rem;
}
.card h3{ font-size: 1.3rem; color: var(--text-dark); }
.card p{ font-size: .92rem; color: var(--text-dark-soft); }

/* ---- Service cards as click-to-expand accordions ---- */
.services-grid{
  display:flex;
  gap: 24px;
  align-items:flex-start;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 18px;
  margin: 0 -32px;
  padding-left: 32px;
  padding-right: 32px;
  scrollbar-width: thin;
  scrollbar-color: var(--gold) transparent;
}
.services-grid::-webkit-scrollbar{ height: 6px; }
.services-grid::-webkit-scrollbar-track{ background: transparent; }
.services-grid::-webkit-scrollbar-thumb{ background: var(--gold); border-radius: 999px; }
.service-card{
  flex: 0 0 300px;
  scroll-snap-align: start;
  padding: 0;
  overflow: hidden;
}
.service-card summary{
  display:flex; align-items:center; gap:16px;
  padding: 30px 26px;
  cursor:pointer;
  list-style:none;
}
.service-card summary::-webkit-details-marker{ display:none; }
.service-card summary::marker{ content:""; }
.service-card .card-ring{ margin-bottom:0; flex-shrink:0; }
.service-card-title{
  flex:1;
  font-family: var(--font-display); font-size:1.18rem; color: var(--text-dark);
  font-weight:600;
}
.service-arrow{
  flex-shrink:0;
  font-size: 1.4rem;
  color: var(--gold-dark);
  transition: transform .25s ease;
  line-height:1;
}
.service-card[open] .service-arrow{ transform: rotate(90deg); }
.service-card[open]{ box-shadow: 0 20px 40px -25px rgba(140,109,51,0.35); }
.service-card-body{
  padding: 0 26px 26px;
  border-top: 1px dashed var(--line);
}
.service-price-row{
  display:flex; justify-content:space-between; align-items:baseline;
  padding: 12px 0;
  border-bottom: 1px dashed var(--line);
  font-size: .92rem;
}
.service-price-row:last-of-type{ border-bottom:none; }
.service-price-desc{ color: var(--text-dark-soft); }
.service-price-amount{ font-family: var(--font-display); color: var(--gold-dark); font-weight:600; }
.service-book-link{
  display:inline-block; margin-top: 14px;
  font-size: .78rem; letter-spacing:.08em; text-transform:uppercase;
  color: var(--gold-dark); border-bottom: 1px solid var(--gold);
  padding-bottom: 2px;
}
.service-book-link:hover{ color: var(--ink); border-color: var(--ink); }

.services-carousel-wrap{ position:relative; display:flex; align-items:center; gap: 8px; }
.services-nav{
  flex-shrink:0;
  width: 44px; height: 44px; border-radius:50%;
  border: 1px solid var(--gold);
  background: var(--white);
  color: var(--gold-dark);
  font-size: 1.5rem; line-height:1;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition: background .2s ease, color .2s ease;
  z-index: 2;
}
.services-nav:hover{ background: var(--gold); color: var(--white); }
.services-hint{
  text-align:center; font-size:.78rem; color: var(--ink-soft);
  letter-spacing:.04em; margin-top: 14px;
}
@media (max-width: 720px){
  .services-nav{ display:none; }
}

/* ================= SPLIT (image/text) ================= */
.split{ display:grid; grid-template-columns: .85fr 1fr; gap: 64px; align-items:center; }
.split.reverse{ grid-template-columns: 1fr .85fr; }
.split.reverse .split-visual{ order:2; }
.split-visual{ position:relative; }
.split-photo{
  border-radius: 12px; overflow:hidden; aspect-ratio: 4/5;
  box-shadow: 0 26px 50px -30px rgba(140,109,51,0.35);
}
.split-photo img{ width:100%; height:100%; object-fit:cover; }
.split-body .kicker{ display:block; margin-bottom: 14px; }
.split-body h2{ font-size: clamp(1.8rem,3vw,2.4rem); }

/* ================= TESTIMONIAL / CTA STRIP ================= */
.cta-strip{
  position:relative;
  text-align:center;
  padding: 90px 0;
  color: var(--white);
  isolation:isolate;
}
.cta-strip::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background-image: var(--cta-bg);
  background-size:cover; background-position:center;
}
.cta-strip::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background: linear-gradient(180deg, rgba(43,36,32,0.55), rgba(43,36,32,0.75));
}
.cta-strip h2{ color: var(--white); font-size: clamp(1.8rem,3.4vw,2.5rem); max-width:640px; margin:0 auto .3em; }
.cta-strip p{ color: rgba(255,255,255,0.85); max-width:520px; margin: 0 auto 2em; }
.cta-strip .eyebrow{ color: var(--gold-light); }

/* ================= ABOUT specifics ================= */
.values-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 24px; margin-top: 20px; }
.value-item{ text-align:center; padding: 24px 14px; }
.value-item .num{ font-family: var(--font-display); color: var(--gold-dark); font-size:1.6rem; display:block; margin-bottom:.3em;}
.value-item h4{ font-size:1.05rem; }
.value-item p{ font-size:.85rem; color: var(--ink-soft); }

/* ================= PRICE LIST ================= */
.price-category{ margin-bottom: 60px; }
.price-category-head{ display:flex; align-items:baseline; gap: 18px; margin-bottom: 24px; }
.price-category-head h3{ font-size: 1.55rem; white-space:nowrap; color: var(--gold-dark); }
.price-category-head .rule{ flex:1; height:1px; background: var(--line); }

.price-list{ display:flex; flex-direction:column; }
.price-row{
  display:flex; justify-content:space-between; align-items:baseline;
  gap: 20px; padding: 16px 0;
  border-bottom: 1px dashed var(--line);
}
.price-row:last-child{ border-bottom:none; }
.price-row-name{ font-family: var(--font-display); font-size:1.12rem; color: var(--ink); }
.price-row-desc{ font-size:.8rem; color: var(--ink-soft); margin-top:2px; }
.price-row-amount{ font-family: var(--font-display); font-size:1.15rem; color: var(--gold-dark); white-space:nowrap; }
.price-note{ text-align:center; margin-top: 24px; font-size:.85rem; color: var(--ink-soft); }
.price-columns{ display:grid; grid-template-columns: 1fr 1fr; gap: 0 60px; }

/* ================= CONTACT ================= */
.contact-grid{ display:grid; grid-template-columns: .9fr 1.1fr; gap: 56px; }
.contact-photo{ border-radius: 12px; overflow:hidden; aspect-ratio: 3/4; box-shadow: 0 26px 50px -30px rgba(140,109,51,0.35); }
.contact-photo img{ width:100%; height:100%; object-fit:cover; }
.contact-info-list{ margin-top: 26px; }
.contact-info-item{ display:flex; gap: 16px; padding: 16px 0; border-bottom:1px solid var(--line); }
.contact-info-item:last-child{ border-bottom:none; }
.contact-info-item .ic{
  width:36px; height:36px; border-radius:50%; border:1px solid var(--gold);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  color: var(--gold-dark); font-size:.85rem;
}
.contact-info-item h4{ font-size:.98rem; margin-bottom:.15em; }
.contact-info-item p{ font-size:.86rem; color: var(--ink-soft); margin:0; }

.contact-form-wrap{ background: var(--white); border:1px solid var(--line); border-radius: 12px; padding: 34px; }
.contact-form-wrap h2{ color: var(--text-dark); }
.form-group{ margin-bottom: 18px; }
.form-group label{
  display:block; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  color: var(--gold-dark); margin-bottom: 7px;
}
.form-group input, .form-group textarea, .form-group select{
  width:100%; background: var(--ivory); border:1px solid var(--line);
  border-radius: 6px; padding: 12px 14px; color: var(--ink);
  font-family: var(--font-body); font-size:.94rem;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus{
  outline:none; border-color: var(--gold);
}
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form-note{ font-size:.8rem; color: var(--text-dark-soft); margin-top:12px; }
.alert-success{
  background: rgba(185,146,79,0.12); border:1px solid var(--gold);
  color: var(--gold-dark); padding: 14px 18px; border-radius:8px; margin-bottom:20px;
  font-size:.88rem;
}

/* ================= FOOTER ================= */
.site-footer{ background: #202020; color: var(--rose-dim); padding-top: 60px; }
.footer-inner{
  max-width: var(--container); margin:0 auto; padding: 0 32px 46px;
  display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px;
}
.footer-brand{ display:flex; gap:14px; align-items:flex-start; }
.footer-name{ font-family: var(--font-display); font-size:1.15rem; color: var(--white); margin:0; }
.footer-tag{ font-size:.7rem; color: var(--gold-light); text-transform:uppercase; letter-spacing:.12em; margin:4px 0 0; }
.footer-col h4{
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color: var(--gold-light);
  margin-bottom: 16px;
}
.footer-col ul{ display:flex; flex-direction:column; gap:10px; }
.footer-col a{ font-size:.86rem; color: rgba(234,218,211,0.75); }
.footer-col a:hover{ color: var(--gold-light); }
.footer-contact li{ font-size:.84rem; color: rgba(234,218,211,0.75); }
.footer-hours li{ display:flex; justify-content:space-between; font-size:.8rem; color: rgba(234,218,211,0.75); gap: 10px; }
.footer-bottom{
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 20px 32px;
  max-width: var(--container); margin:0 auto;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-size:.76rem; color: rgba(234,218,211,0.6);
}
.footer-social{ display:flex; gap:20px; }
.footer-social a:hover{ color: var(--gold-light); }

/* ================= FLOATING WHATSAPP BUTTON ================= */
.whatsapp-float{
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 999;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 26px -6px rgba(0,0,0,0.4);
  transition: transform .25s ease, box-shadow .25s ease;
}
.whatsapp-float svg{
  width: 30px;
  height: 30px;
  fill: var(--white);
}
.whatsapp-float:hover{
  transform: scale(1.08);
  box-shadow: 0 14px 30px -6px rgba(0,0,0,0.45);
}
@keyframes whatsapp-pulse{
  0%   { box-shadow: 0 0 0 0 rgba(37,211,102,0.55), 0 10px 26px -6px rgba(0,0,0,0.4); }
  70%  { box-shadow: 0 0 0 14px rgba(37,211,102,0), 0 10px 26px -6px rgba(0,0,0,0.4); }
  100% { box-shadow: 0 0 0 0 rgba(37,211,102,0), 0 10px 26px -6px rgba(0,0,0,0.4); }
}
.whatsapp-float{ animation: whatsapp-pulse 2.6s infinite; }
@media (max-width: 720px){
  .whatsapp-float{ right: 18px; bottom: 18px; width: 54px; height: 54px; }
  .whatsapp-float svg{ width: 27px; height: 27px; }
}

/* ================= RESPONSIVE ================= */
@media (max-width: 980px){
  .hero .container{ grid-template-columns: 1fr; }
  .hero-visual{ max-width: 420px; margin: 0 auto; }
  .grid-3{ grid-template-columns: 1fr; }
  .split, .split.reverse{ grid-template-columns: 1fr; gap: 36px; }
  .split.reverse .split-visual{ order:0; }
  .values-grid{ grid-template-columns: 1fr 1fr; }
  .contact-grid{ grid-template-columns: 1fr; }
  .footer-inner{ grid-template-columns: 1fr 1fr; }
  .gallery-grid{ grid-template-columns: repeat(2, 1fr); }
  .gallery-item.wide{ grid-column: span 2; }
  .price-columns{ grid-template-columns: 1fr; }
  .why-home-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 720px){
  .nav-toggle{ display:flex; }
  .site-nav{
    position:absolute; top:100%; left:0; right:0;
    background: var(--white); border-bottom:1px solid var(--line);
    flex-direction:column; align-items:stretch; padding: 20px 24px 28px;
    gap: 20px;
    display:none;
  }
  .site-nav.open{ display:flex; }
  .site-nav ul{ flex-direction:column; gap:16px; }
  .btn-book{ text-align:center; }
  .hero{ padding: 50px 0 70px; }
  .section{ padding: 60px 0; }
  .form-row{ grid-template-columns: 1fr; }
  .footer-inner{ grid-template-columns: 1fr; }
  .floating-chip{ display:none; }
}