/* ==========================================================================
   Pristine Hair & Beauty Studio — Design System
   Display: Cormorant Garamond · Eyebrow: Playfair Display · Body: DM Sans
   ========================================================================== */

:root{
  --ivory:      #FBF7F1;
  --ivory-deep: #F6EFE6;
  --champagne:  #EFE1CC;
  --blush:      #EAD2CB;
  --blush-soft: #F3E4E0;
  --ink:        #2B211D;
  --ink-soft:   #6B5D54;
  --gold:       #A9814A;
  --gold-light: #C9A46B;
  --rose:       #B97C6C;
  --rose-deep:  #9C5F52;
  --line:       rgba(43,33,29,0.10);
  --white:      #FFFFFF;

  --font-display: 'Cormorant Garamond', serif;
  --font-eyebrow: 'Playfair Display', serif;
  --font-body:    'DM Sans', sans-serif;

  --container: 1240px;
  --radius: 2px;
  --shadow-soft: 0 10px 40px -12px rgba(43,33,29,0.16);
  --shadow-lift: 0 24px 60px -18px rgba(43,33,29,0.28);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *,*::before,*::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

body{
  margin:0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--ink);
  margin: 0;
  letter-spacing: 0.005em;
}
h1{ font-size: clamp(2.8rem, 5.4vw, 5.4rem); line-height: 1.04; }
h2{ font-size: clamp(2.1rem, 3.6vw, 3.4rem); line-height: 1.1; }
h3{ font-size: clamp(1.5rem, 2vw, 1.9rem); line-height: 1.25; }
h4{ font-size: 1.25rem; }

p{ margin:0; color: var(--ink-soft); }
a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; display:block; }
button{ font-family: var(--font-body); cursor: pointer; }

.italic{ font-style: italic; color: var(--rose-deep); }

.eyebrow{
  font-family: var(--font-eyebrow);
  font-style: italic;
  font-size: 0.85rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::before{
  content:"";
  width: 30px; height: 1px;
  background: var(--gold);
  display:inline-block;
}

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}
@media (max-width: 640px){ .container{ padding: 0 22px; } }

section{ position: relative; }
.section-pad{ padding: 120px 0; }
.section-pad-sm{ padding: 80px 0; }
@media (max-width: 900px){
  .section-pad{ padding: 80px 0; }
  .section-pad-sm{ padding: 56px 0; }
}

.section-head{ max-width: 640px; margin-bottom: 64px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2{ margin-top: 14px; }

/* Signature brushstroke underline — the recurring brand motif */
.flourish{ display:block; margin-top:18px; height:18px; }
.flourish path{
  fill:none; stroke:var(--gold); stroke-width:2.2;
  stroke-linecap: round;
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  transition: stroke-dashoffset 1.1s var(--ease);
}
.reveal.in-view .flourish path{ stroke-dashoffset: 0; }
.flourish.fl-white path{ stroke: var(--gold-light); }
.center .flourish{ margin-left:auto; margin-right:auto; }

/* ---------------- Scroll reveal ---------------- */
.reveal{ opacity:0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in-view{ opacity:1; transform:none; }
.reveal-delay-1.in-view{ transition-delay:.1s; }
.reveal-delay-2.in-view{ transition-delay:.2s; }
.reveal-delay-3.in-view{ transition-delay:.3s; }
.reveal-delay-4.in-view{ transition-delay:.4s; }

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding: 17px 38px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  border-radius: var(--radius);
  border: 1px solid transparent;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
  white-space: nowrap;
}
.btn-primary{ background: var(--ink); color: var(--ivory); }
.btn-primary:hover{ background: var(--rose-deep); transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.btn-ghost{ background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover{ background: var(--ink); color: var(--ivory); transform: translateY(-3px); }
.btn-gold{ background: var(--gold); color: var(--white); }
.btn-gold:hover{ background: var(--rose-deep); transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.55; cursor: not-allowed; transform:none !important; }

/* ---------------- Nav ---------------- */
.nav{
  position: fixed; top:0; left:0; right:0; z-index: 500;
  padding: 28px 0;
  transition: padding .5s var(--ease), background .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.on-light{ background: rgba(251,247,241,0.7); }
.nav.scrolled{
  padding: 16px 0;
  background: rgba(251,247,241,0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 8px 30px -18px rgba(43,33,29,0.35);
  border-bottom-color: var(--line);
}
.nav .container{ display:flex; align-items:center; justify-content: space-between; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand-mark{ width:34px; height:34px; flex:none; }
.brand-word{ font-family: var(--font-display); font-size: 1.5rem; letter-spacing: .01em; color: var(--ink); }
.nav.transparent-dark .brand-word,
.nav.transparent-dark .nav-link{ color: var(--white); }
.nav.scrolled .brand-word,
.nav.scrolled .nav-link{ color: var(--ink) !important; }

.brand-word b{ font-weight:600; color: var(--gold); }
.nav.transparent-dark .brand-word b{ color: var(--gold-light); }
.nav.scrolled .brand-word b{ color: var(--gold); }

.nav-links{ display:flex; align-items:center; gap:40px; list-style:none; margin:0; padding:0; }
.nav-link{
  font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight:500;
  position: relative; padding-bottom:4px; color: var(--ink); transition: color .3s;
}
.nav-link::after{ content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background: var(--gold); transition: right .4s var(--ease); }
.nav-link:hover::after, .nav-link.active::after{ right:0; }
.nav-link.active{ color: var(--gold); }
.nav-actions{ display:flex; align-items:center; gap:18px; }
.nav-book-btn{ padding: 13px 26px; font-size: .74rem; }

.nav-burger{ display:none; flex-direction:column; gap:5px; background:none; border:none; padding:6px; }
.nav-burger span{ width:24px; height:1.5px; background: var(--ink); transition: transform .35s var(--ease), opacity .3s; }
.nav.transparent-dark .nav-burger span{ background: var(--white); }
.nav.scrolled .nav-burger span{ background: var(--ink); }

.mobile-menu{
  position: fixed; inset:0; background: var(--ivory); z-index: 600;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:34px;
  transform: translateY(-100%); transition: transform .55s var(--ease);
}
.mobile-menu.open{ transform: translateY(0); }
.mobile-menu a{ font-family: var(--font-display); font-size: 2rem; }
.mobile-menu .close-menu{ position:absolute; top:28px; right:28px; background:none; border:none; font-size:1.6rem; color:var(--ink); }

@media (max-width: 980px){
  .nav-links, .nav-actions .nav-book-btn{ display:none; }
  .nav-burger{ display:flex; }
}

/* ---------------- Hero ---------------- */
.hero{
  position:relative; min-height: 100svh; display:flex; align-items:center;
  padding-top: 120px; padding-bottom: 70px;
  background: linear-gradient(180deg, #FBF7F1 0%, #F6EFE6 100%);
  overflow:hidden;
}
.hero-grid{ display:grid; grid-template-columns: 1.05fr 0.95fr; gap: 60px; align-items:center; }
.hero-eyebrow{ margin-bottom: 20px; }
.hero h1{ margin-bottom: 26px; }
.hero-sub{ max-width: 460px; font-size: 1.06rem; margin-bottom: 42px; }
.hero-ctas{ display:flex; gap:18px; flex-wrap:wrap; }
.hero-stats{ display:flex; gap:44px; margin-top:64px; }
.hero-stats div b{ display:block; font-family: var(--font-display); font-size: 2rem; color: var(--ink); }
.hero-stats div span{ font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color: var(--ink-soft); }

.hero-visual{ position:relative; }
.hero-frame{
  position:relative; border-radius: 4px; overflow:hidden; aspect-ratio: 4/5;
  box-shadow: var(--shadow-lift);
}
.hero-frame img{ width:100%; height:100%; object-fit:cover; transform: scale(1.06); transition: transform 1.6s var(--ease); }
.hero:hover .hero-frame img{ transform: scale(1); }
.hero-badge{
  position:absolute; left:-40px; bottom:-30px; background: var(--ink); color: var(--ivory);
  padding: 26px 30px; border-radius:4px; box-shadow: var(--shadow-lift); max-width:220px;
}
.hero-badge .fl-white path{ stroke: var(--gold-light); }
.hero-badge p{ color: var(--ivory); opacity:.75; font-size:.82rem; margin-top:6px; }
.hero-ring{
  position:absolute; top:-34px; right:-34px; width:120px; height:120px;
  border:1px solid var(--gold); border-radius:50%; opacity:.5;
}
@media (max-width: 980px){
  .hero-grid{ grid-template-columns:1fr; gap:52px; }
  .hero-visual{ order:-1; max-width:420px; margin:0 auto; }
  .hero-badge{ left:12px; bottom:-24px; }
  .hero-stats{ flex-wrap:wrap; row-gap:20px; }
}

.scroll-cue{
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color: var(--ink-soft);
}
.scroll-cue i{ width:1px; height:34px; background: var(--ink-soft); position:relative; overflow:hidden; }
.scroll-cue i::after{ content:""; position:absolute; top:-100%; left:0; width:100%; height:100%; background: var(--gold); animation: cueDrop 1.8s ease-in-out infinite; }
@keyframes cueDrop{ 0%{ top:-100%; } 60%{ top:100%; } 100%{ top:100%; } }

/* ---------------- Page hero (inner pages) ---------------- */
.page-hero{
  padding: 170px 0 90px; text-align:center;
  background: linear-gradient(180deg, var(--champagne) 0%, var(--ivory) 100%);
}
.page-hero .eyebrow{ justify-content:center; }
.page-hero h1{ margin-top:16px; }
.breadcrumb{ margin-top:22px; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color: var(--ink-soft); }
.breadcrumb a:hover{ color: var(--gold); }
.breadcrumb span{ margin: 0 8px; color: var(--gold); }

/* ---------------- Cards ---------------- */
.card{
  background: var(--white); border-radius: 4px; overflow:hidden;
  box-shadow: var(--shadow-soft); border: 1px solid var(--line);
  transition: transform .55s var(--ease), box-shadow .55s var(--ease), border-color .5s var(--ease);
}
.card:hover{ transform: translateY(-8px); box-shadow: var(--shadow-lift); border-color: var(--gold-light); }
.card-img{ position:relative; overflow:hidden; aspect-ratio: 5/4; }
.card-img img{ width:100%; height:100%; object-fit:cover; transition: transform .8s var(--ease); }
.card:hover .card-img img{ transform: scale(1.08); }
.card-body{ padding: 30px 28px 32px; }
.card-body h3{ margin-bottom:10px; }
.card-body p{ font-size: .93rem; }
.card-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:22px; padding-top:20px; border-top:1px solid var(--line); }
.price{ font-family: var(--font-display); font-size:1.3rem; color: var(--gold); }
.price span{ font-size:.7rem; color: var(--ink-soft); font-family: var(--font-body); text-transform:uppercase; letter-spacing:.06em; }
.card-link{ font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; font-weight:600; border-bottom:1px solid var(--ink); padding-bottom:2px; transition: color .3s, border-color .3s; }
.card-link:hover{ color: var(--gold); border-color: var(--gold); }

/* Featured services (home) */
.services-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
@media (max-width: 980px){ .services-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px){ .services-grid{ grid-template-columns: 1fr; } }

/* ---------------- Why choose us ---------------- */
.why-section{ background: var(--ink); color: var(--ivory); }
.why-section .eyebrow{ color: var(--gold-light); }
.why-section .eyebrow::before{ background: var(--gold-light); }
.why-section h2{ color: var(--ivory); }
.why-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: rgba(255,255,255,0.08); margin-top: 60px; }
.why-item{ background: var(--ink); padding: 46px 34px; }
.why-item .num{ font-family: var(--font-display); font-style: italic; color: var(--gold-light); font-size: 1.1rem; }
.why-item h4{ color: var(--ivory); margin: 18px 0 12px; }
.why-item p{ color: rgba(251,247,241,0.62); font-size:.92rem; }
@media (max-width: 980px){ .why-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .why-grid{ grid-template-columns: 1fr; } }

/* ---------------- Before / After ---------------- */
.ba-slider{
  position: relative; aspect-ratio: 4/3; border-radius:4px; overflow:hidden;
  box-shadow: var(--shadow-soft); user-select:none; cursor: ew-resize;
}
.ba-slider img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ba-slider .ba-after{ z-index:1; }
.ba-slider .ba-before-wrap{ position:absolute; inset:0; width:50%; overflow:hidden; z-index:2; border-right: 2px solid var(--white); }
.ba-slider .ba-before-wrap img{ width: var(--ba-w, 600px); max-width:none; height:100%; }
.ba-handle{
  position:absolute; top:50%; left:50%; z-index:3; width:52px; height:52px; border-radius:50%;
  background: var(--white); display:flex; align-items:center; justify-content:center;
  transform: translate(-50%,-50%); box-shadow: var(--shadow-soft); pointer-events:none;
}
.ba-handle svg{ width:20px; height:20px; }
.ba-tag{ position:absolute; top:16px; z-index:3; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; background: rgba(43,33,29,0.75); color: var(--ivory); padding:7px 14px; border-radius: 2px; }
.ba-tag.left{ left:16px; } .ba-tag.right{ right:16px; }

/* ---------------- Testimonials ---------------- */
.testi-wrap{ position:relative; max-width: 760px; margin: 0 auto; text-align:center; }
.testi-slide{ display:none; }
.testi-slide.active{ display:block; animation: fadeUp .7s var(--ease); }
@keyframes fadeUp{ from{ opacity:0; transform: translateY(16px);} to{ opacity:1; transform:none; } }
.testi-quote{ font-family: var(--font-display); font-style: italic; font-size: clamp(1.3rem,2.4vw,1.9rem); color: var(--ink); line-height:1.45; }
.testi-stars{ color: var(--gold); letter-spacing:3px; margin-bottom:22px; font-size:1rem; }
.testi-name{ margin-top:28px; font-weight:600; letter-spacing:.04em; }
.testi-role{ font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; color: var(--ink-soft); margin-top:4px; }
.testi-dots{ display:flex; gap:10px; justify-content:center; margin-top:36px; }
.testi-dots button{ width:8px; height:8px; border-radius:50%; background: var(--line); border:none; padding:0; transition: background .3s, transform .3s; }
.testi-dots button.active{ background: var(--gold); transform: scale(1.3); }
.testi-arrow{ position:absolute; top:38%; background:none; border:1px solid var(--line); width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition: border-color .3s, background .3s; }
.testi-arrow:hover{ border-color: var(--gold); background: var(--white); }
.testi-arrow.prev{ left:-70px; } .testi-arrow.next{ right:-70px; }
@media (max-width: 900px){ .testi-arrow{ display:none; } }

/* ---------------- Offers ---------------- */
.offers-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 28px; }
@media (max-width: 900px){ .offers-grid{ grid-template-columns: 1fr; } }
.offer-card{
  position:relative; border-radius:4px; padding: 44px 34px; background: var(--champagne);
  overflow:hidden; min-height: 260px; display:flex; flex-direction:column; justify-content:flex-end;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.offer-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lift); }
.offer-card.dark{ background: var(--ink); }
.offer-card.dark h3, .offer-card.dark .offer-tag{ color: var(--ivory); }
.offer-card.dark p{ color: rgba(251,247,241,0.65); }
.offer-tag{ font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color: var(--rose-deep); margin-bottom:14px; }
.offer-card h3{ margin-bottom:10px; }
.offer-card p{ font-size:.9rem; margin-bottom:18px; }
.offer-percent{ position:absolute; top:24px; right:28px; font-family: var(--font-display); font-style:italic; font-size:2.6rem; color: var(--gold); opacity:.5; }

/* ---------------- Instagram gallery strip ---------------- */
.insta-grid{ display:grid; grid-template-columns: repeat(6,1fr); gap: 4px; }
.insta-grid a{ position:relative; aspect-ratio:1; overflow:hidden; display:block; }
.insta-grid img{ width:100%; height:100%; object-fit:cover; transition: transform .6s var(--ease); }
.insta-grid a::after{ content:"@prestine.studio"; position:absolute; inset:0; background:rgba(43,33,29,0.55); color:var(--ivory); display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .4s; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; text-align:center; padding:10px; }
.insta-grid a:hover img{ transform: scale(1.12); }
.insta-grid a:hover::after{ opacity:1; }
@media (max-width: 900px){ .insta-grid{ grid-template-columns: repeat(3,1fr); } }

/* ---------------- Newsletter ---------------- */
.newsletter{ background: var(--blush-soft); }
.newsletter-box{ display:flex; align-items:center; justify-content:space-between; gap:50px; }
.newsletter-form{ display:flex; gap:0; min-width: 420px; border-bottom: 1px solid var(--ink); padding-bottom: 10px; }
.newsletter-form input{ flex:1; background:none; border:none; font-family: var(--font-body); font-size:1rem; color: var(--ink); outline:none; }
.newsletter-form input::placeholder{ color: var(--ink-soft); }
.newsletter-form button{ background:none; border:none; font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; font-weight:600; color: var(--gold); }
@media (max-width: 860px){ .newsletter-box{ flex-direction:column; align-items:flex-start; } .newsletter-form{ min-width:100%; } }

/* ---------------- Footer ---------------- */
footer{ background: var(--ink); color: rgba(251,247,241,0.7); padding: 90px 0 0; }
.foot-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 50px; padding-bottom: 70px; border-bottom: 1px solid rgba(255,255,255,0.09); }
.foot-brand .brand-word{ color: var(--ivory); }
.foot-brand p{ margin-top:18px; color: rgba(251,247,241,0.55); font-size:.92rem; max-width:280px; }
.foot-social{ display:flex; gap:14px; margin-top:26px; }
.foot-social a{ width:38px; height:38px; border:1px solid rgba(255,255,255,0.2); border-radius:50%; display:flex; align-items:center; justify-content:center; transition: background .3s, border-color .3s; }
.foot-social a:hover{ background: var(--gold); border-color: var(--gold); }
.foot-col h4{ color: var(--ivory); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; font-family: var(--font-body); font-weight:600; margin-bottom:22px; }
.foot-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:13px; }
.foot-col a{ font-size:.92rem; color: rgba(251,247,241,0.62); transition: color .3s, padding-left .3s; }
.foot-col a:hover{ color: var(--gold-light); padding-left:4px; }
.foot-bottom{ display:flex; justify-content:space-between; align-items:center; padding: 26px 0; font-size:.78rem; color: rgba(251,247,241,0.4); flex-wrap:wrap; gap:12px; }
@media (max-width: 900px){ .foot-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .foot-grid{ grid-template-columns: 1fr; } }

/* ---------------- WhatsApp + sticky mobile CTA ---------------- */
.wa-float{
  position: fixed; right: 26px; bottom: 26px; z-index: 400;
  width:58px; height:58px; border-radius:50%; background:#25D366; display:flex; align-items:center; justify-content:center;
  box-shadow: 0 12px 30px -8px rgba(37,211,102,0.6); transition: transform .3s;
}
.wa-float:hover{ transform: scale(1.08); }
.mobile-sticky-cta{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index: 399;
  background: rgba(251,247,241,0.96); backdrop-filter: blur(10px);
  border-top:1px solid var(--line); padding: 12px 18px; box-shadow: 0 -10px 30px -10px rgba(43,33,29,0.2);
}
@media (max-width: 760px){
  .mobile-sticky-cta{ display:flex; gap:10px; }
  .wa-float{ bottom: 92px; width:50px; height:50px; }
}

/* ---------------- Forms (Booking / Contact) ---------------- */
.form-field{ margin-bottom: 26px; }
.form-field label{ display:block; font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color: var(--ink-soft); margin-bottom:10px; }
.form-field input, .form-field select, .form-field textarea{
  width:100%; padding: 15px 18px; border:1px solid var(--line); background: var(--white);
  font-family: var(--font-body); font-size: .96rem; color: var(--ink); border-radius: 3px;
  transition: border-color .3s, box-shadow .3s; outline:none;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{ border-color: var(--gold); box-shadow: 0 0 0 3px rgba(169,129,74,0.15); }
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 640px){ .form-row{ grid-template-columns: 1fr; } }
.service-pick{ display:grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
@media (max-width: 640px){ .service-pick{ grid-template-columns: repeat(2,1fr); } }
.service-chip{ border:1px solid var(--line); background: var(--white); padding: 12px 10px; text-align:center; font-size:.8rem; border-radius:3px; transition: all .3s; }
.service-chip input{ display:none; }
.service-chip.checked{ border-color: var(--gold); background: var(--champagne); color: var(--ink); }
.booking-panel{ background: var(--white); border-radius: 6px; box-shadow: var(--shadow-lift); padding: 52px; border: 1px solid var(--line); }
@media (max-width: 640px){ .booking-panel{ padding: 30px 22px; } }
.booking-side{ background: var(--ink); color: var(--ivory); border-radius:6px; padding: 52px 42px; height:100%; }
.booking-side h3{ color: var(--ivory); }
.booking-side .eyebrow{ color: var(--gold-light); }
.booking-side .eyebrow::before{ background: var(--gold-light); }
.booking-side ul{ list-style:none; padding:0; margin: 28px 0; display:flex; flex-direction:column; gap:18px; }
.booking-side li{ display:flex; gap:14px; align-items:flex-start; font-size:.92rem; color: rgba(251,247,241,0.75); }
.booking-side li svg{ flex:none; margin-top:2px; color: var(--gold-light); }
.confirm-toast{
  position: fixed; top: 110px; right: 26px; z-index: 700; background: var(--ink); color: var(--ivory);
  padding: 18px 26px; border-radius: 4px; box-shadow: var(--shadow-lift); display:flex; gap:12px; align-items:center;
  transform: translateX(140%); transition: transform .6s var(--ease); max-width: 320px;
}
.confirm-toast.show{ transform: translateX(0); }
.confirm-toast svg{ color: var(--gold-light); flex:none; }

/* ---------------- Gallery / masonry / lightbox ---------------- */
.filter-bar{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-bottom: 50px; }
.filter-btn{ padding: 11px 24px; border:1px solid var(--line); border-radius: 30px; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; background: var(--white); transition: all .35s var(--ease); }
.filter-btn.active, .filter-btn:hover{ background: var(--ink); color: var(--ivory); border-color: var(--ink); }
.masonry{ columns: 3 280px; column-gap: 22px; }
@media (max-width: 700px){ .masonry{ columns: 2 200px; } }
.masonry-item{ break-inside: avoid; margin-bottom: 22px; position:relative; border-radius:4px; overflow:hidden; cursor:pointer; box-shadow: var(--shadow-soft); }
.masonry-item img{ width:100%; display:block; transition: transform .7s var(--ease); }
.masonry-item:hover img{ transform: scale(1.09); }
.masonry-item .m-cap{ position:absolute; inset:0; background: linear-gradient(0deg, rgba(43,33,29,0.75), transparent 55%); opacity:0; transition:opacity .4s; display:flex; align-items:flex-end; padding:20px; }
.masonry-item:hover .m-cap{ opacity:1; }
.masonry-item .m-cap span{ color: var(--ivory); font-size:.82rem; letter-spacing:.04em; }
.masonry-item[data-cat]{ display:none; }
.masonry-item.show{ display:block; animation: fadeUp .6s var(--ease); }

.lightbox{ position:fixed; inset:0; z-index:800; background: rgba(20,15,13,0.94); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition: opacity .4s; }
.lightbox.open{ opacity:1; pointer-events:auto; }
.lightbox img{ max-width:88vw; max-height:82vh; border-radius:4px; box-shadow: 0 30px 80px rgba(0,0,0,0.5); }
.lightbox-close{ position:absolute; top:28px; right:32px; color: var(--ivory); background:none; border:none; font-size:1.8rem; }
.lightbox-nav{ position:absolute; top:50%; transform:translateY(-50%); background:none; border:1px solid rgba(255,255,255,0.3); color:var(--ivory); width:48px; height:48px; border-radius:50%; }
.lightbox-nav.lprev{ left:26px; } .lightbox-nav.lnext{ right:26px; }

/* ---------------- About page specifics ---------------- */
.split{ display:grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items:center; }
@media (max-width: 900px){ .split{ grid-template-columns:1fr; gap:44px; } }
.split.reverse .split-img{ order:2; }
.split-img{ position:relative; }
.split-img img{ border-radius:4px; box-shadow: var(--shadow-soft); }
.split-img .float-card{ position:absolute; bottom:-28px; right:-28px; background: var(--white); padding:24px 28px; border-radius:4px; box-shadow: var(--shadow-lift); }
@media (max-width: 560px){ .split-img .float-card{ right: 0; bottom:-20px; padding:16px 18px; } }
.stat-strip{ display:grid; grid-template-columns: repeat(4,1fr); gap: 30px; text-align:center; margin-top:60px; }
.stat-strip b{ font-family: var(--font-display); font-size: 2.6rem; color: var(--gold); display:block; }
.stat-strip span{ font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color: var(--ink-soft); }
@media (max-width: 640px){ .stat-strip{ grid-template-columns: repeat(2,1fr); row-gap:36px; } }

.values-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 32px; }
@media (max-width: 980px){ .values-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .values-grid{ grid-template-columns: 1fr; } }
.value-card{ text-align:center; padding: 20px; }
.value-icon{ width:64px; height:64px; border:1px solid var(--gold); border-radius:50%; display:flex; align-items:center; justify-content:center; margin: 0 auto 24px; color: var(--gold); }
.value-card h4{ margin-bottom:12px; }
.value-card p{ font-size:.9rem; }

.team-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 28px; }
@media (max-width: 980px){ .team-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .team-grid{ grid-template-columns: 1fr; } }
.team-card{ text-align:center; }
.team-photo{ border-radius:4px; overflow:hidden; aspect-ratio: 3/4; margin-bottom:18px; }
.team-photo img{ width:100%; height:100%; object-fit:cover; transition: transform .7s var(--ease); }
.team-card:hover .team-photo img{ transform: scale(1.06); }
.team-card h4{ margin-bottom:4px; }
.team-card span{ font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color: var(--gold); }

/* ---------------- Contact page ---------------- */
.contact-grid{ display:grid; grid-template-columns: 0.9fr 1.1fr; gap: 60px; }
@media (max-width: 980px){ .contact-grid{ grid-template-columns:1fr; } }
.info-card{ display:flex; gap:18px; padding: 26px 0; border-bottom: 1px solid var(--line); }
.info-card:first-child{ padding-top:0; }
.info-icon{ width:46px; height:46px; border-radius:50%; background: var(--champagne); display:flex; align-items:center; justify-content:center; color: var(--gold); flex:none; }
.info-card h4{ margin-bottom:6px; }
.info-card p{ font-size:.92rem; }
.map-embed{ border-radius:6px; overflow:hidden; box-shadow: var(--shadow-soft); border:1px solid var(--line); }
.map-embed iframe{ width:100%; height:100%; border:0; display:block; min-height:280px; }
.social-row{ display:flex; gap:12px; margin-top:26px; }

/* ---------------- Utility ---------------- */
.tag-pill{ display:inline-block; padding:6px 16px; border-radius:30px; background: var(--champagne); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color: var(--rose-deep); margin-bottom:18px; }
.divider-line{ height:1px; background: var(--line); border:none; margin: 0; }
.mt-lg{ margin-top: 100px; }