/* =========================================================================
   DESIGN TOKENS
   ========================================================================= */
:root{
  --ink:        #10241F;   /* near-black deep emerald — primary dark */
  --ink-2:      #1F4D3F;   /* deep emerald — secondary dark surfaces */
  --bone:       #F6F2EA;   /* warm ivory — primary background */
  --bone-2:     #ECE4D4;   /* deeper ivory — card surfaces */
  --brass:      #A8804C;   /* brass/gold accent */
  --brass-light:#CBA96C;   /* hover / light accent */
  --text-soft:  #4B564F;   /* muted body text on bone */
  --text-dark:  #14231C;
  --white:      #FFFFFF;
  --line:       rgba(16,36,31,0.12);
  --line-light: rgba(246,242,234,0.18);

  --font-display: 'Fraunces', serif;
  --font-body:    'Inter', -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  --container: 1180px;
  --radius: 2px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  background:var(--bone);
  color:var(--text-dark);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit; cursor:pointer;}

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

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important;}
}

/* =========================================================================
   TYPOGRAPHY
   ========================================================================= */
.eyebrow{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--brass);
}
h1,h2,h3,.display{
  font-family:var(--font-display);
  font-weight:600;
  color:var(--text-dark);
  line-height:1.08;
  letter-spacing:-0.01em;
}
h1{font-size:clamp(40px,6vw,76px);}
h2{font-size:clamp(28px,3.6vw,44px);}
h3{font-size:clamp(20px,2.2vw,26px);}
.italic{font-style:italic; font-weight:500;}
p{color:var(--text-soft); font-size:16px;}
.lede{font-size:19px; color:var(--text-soft); max-width:56ch;}

/* =========================================================================
   SIGNATURE MOTIF — the golden arc
   A single continuous brass line, echoing a smile's curve, used as a
   recurring mark across hero, dividers and the booking widget.
   ========================================================================= */
.arc{
  display:block;
  overflow:visible;
}
.arc path{
  fill:none;
  stroke:var(--brass);
  stroke-width:1.4;
  stroke-linecap:round;
  stroke-dasharray:400;
  stroke-dashoffset:400;
  transition:stroke-dashoffset 1.4s cubic-bezier(.16,.84,.44,1);
}
.arc.in-view path{stroke-dashoffset:0;}

.divider{
  width:100%; height:56px; margin:0 auto;
}

/* =========================================================================
   NAV
   ========================================================================= */
.nav{
  position:sticky; top:0; z-index:100;
  background:rgba(246,242,234,0.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 0;
}
.logo{display:flex; align-items:center; gap:10px;}
.logo img{height:34px; width:auto;}
.logo-text{
  font-family:var(--font-display);
  font-weight:600; font-size:20px; letter-spacing:-0.01em;
}
.nav-links{display:flex; align-items:center; gap:36px;}
.nav-links a{
  font-size:14px; letter-spacing:.02em; color:var(--text-dark);
  position:relative; padding-bottom:4px;
}
.nav-links a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--brass); transform:scaleX(0); transform-origin:left;
  transition:transform .3s ease;
}
.nav-links a:hover::after, .nav-links a.active::after{transform:scaleX(1);}
.nav-cta{display:flex; align-items:center; gap:18px;}
.nav-phone{
  font-family:var(--font-mono); font-size:13px; color:var(--ink-2);
  display:none;
}
@media(min-width:900px){.nav-phone{display:block;}}
.nav-toggle{display:none; background:none; border:0; font-size:24px;}
@media (max-width:900px){
  .nav-links{display:none;}
  .nav-toggle{display:block;}
}

/* =========================================================================
   BUTTONS
   ========================================================================= */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; letter-spacing:.06em; text-transform:uppercase;
  font-family:var(--font-mono);
  padding:14px 26px;
  border:1px solid var(--ink);
  border-radius:var(--radius);
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.btn-primary{background:var(--ink); color:var(--bone);}
.btn-primary:hover{background:var(--brass); border-color:var(--brass);}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--ink);}
.btn-ghost:hover{background:var(--ink); color:var(--bone);}
.btn-on-dark{border-color:var(--line-light); color:var(--bone);}
.btn-on-dark:hover{background:var(--brass); border-color:var(--brass); color:var(--ink);}

/* =========================================================================
   HERO
   ========================================================================= */
.hero{
  padding:90px 0 110px;
  position:relative;
}
.hero-grid{
  display:grid; grid-template-columns:1.2fr 0.8fr; gap:60px; align-items:end;
}
@media (max-width:900px){ .hero-grid{grid-template-columns:1fr;} }
.hero h1{margin:18px 0 26px;}
.hero-aside{
  border-left:1px solid var(--line);
  padding-left:32px;
}
.hero-aside p{margin-bottom:22px;}
.hero-stats{display:flex; gap:34px; margin-top:36px;}
.stat-num{font-family:var(--font-display); font-size:30px; color:var(--ink);}
.stat-label{font-family:var(--font-mono); font-size:11px; color:var(--text-soft); text-transform:uppercase; letter-spacing:.08em;}

/* =========================================================================
   SECTIONS
   ========================================================================= */
.section{padding:96px 0;}
.section-dark{background:var(--ink); color:var(--bone);}
.section-dark p{color:rgba(246,242,234,0.72);}
.section-dark h2, .section-dark h3{color:var(--bone);}
.section-head{max-width:640px; margin-bottom:56px;}
.section-head .eyebrow{margin-bottom:14px; display:block;}

/* reveal-on-scroll */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease;}
.reveal.in-view{opacity:1; transform:translateY(0);}

/* =========================================================================
   MENU-STYLE SERVICE LIST (fine-dining influenced, deliberate choice for
   a "curated" luxury clinic — see services.html)
   ========================================================================= */
.menu-list{border-top:1px solid var(--line);}
.menu-item{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:24px; padding:28px 0; border-bottom:1px solid var(--line);
}
.menu-item-name{font-family:var(--font-display); font-size:22px;}
.menu-item-desc{color:var(--text-soft); font-size:14px; margin-top:6px; max-width:52ch;}
.menu-item-tag{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--brass); white-space:nowrap;
}

/* =========================================================================
   CARDS / GRID
   ========================================================================= */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:28px;}
@media (max-width:900px){ .grid-3{grid-template-columns:1fr 1fr;} }
@media (max-width:640px){ .grid-3, .grid-2{grid-template-columns:1fr;} }

.card{
  background:var(--bone-2);
  padding:34px 28px;
  border-radius:var(--radius);
  border:1px solid var(--line);
}
.card h3{margin-bottom:10px;}

.swatch{
  aspect-ratio:4/5; border-radius:var(--radius);
  background:linear-gradient(160deg, var(--ink-2), var(--ink));
  position:relative; overflow:hidden;
}
.swatch::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 30% 20%, rgba(203,169,108,0.35), transparent 60%);
}

/* =========================================================================
   QUOTE / TESTIMONIAL
   ========================================================================= */
.quote{
  font-family:var(--font-display); font-style:italic; font-weight:500;
  font-size:clamp(24px,3vw,34px); line-height:1.4; max-width:820px;
}
.quote-attr{margin-top:20px; font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--brass);}

/* =========================================================================
   FOOTER
   ========================================================================= */
.footer{background:var(--ink); color:var(--bone); padding:70px 0 30px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:50px; border-bottom:1px solid var(--line-light);}
@media (max-width:800px){ .footer-grid{grid-template-columns:1fr 1fr;} }
.footer h4{font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--brass); margin-bottom:16px;}
.footer a, .footer li{color:rgba(246,242,234,0.75); font-size:14px; margin-bottom:10px; display:block;}
.footer a:hover{color:var(--brass);}
.footer-bottom{display:flex; justify-content:space-between; padding-top:26px; font-size:12px; color:rgba(246,242,234,0.5); font-family:var(--font-mono);}
@media (max-width:640px){ .footer-bottom{flex-direction:column; gap:10px;} }

/* =========================================================================
   CONTACT / FORM
   ========================================================================= */
.field{margin-bottom:20px;}
.field label{display:block; font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-soft); margin-bottom:8px;}
.field input, .field textarea, .field select{
  width:100%; padding:13px 14px; background:var(--white);
  border:1px solid var(--line); border-radius:var(--radius);
  font-family:var(--font-body); font-size:15px; color:var(--text-dark);
}
.field input:focus, .field textarea:focus, .field select:focus{
  outline:2px solid var(--brass); outline-offset:1px;
}
.map-embed{width:100%; height:340px; border:0; border-radius:var(--radius); filter:grayscale(0.3);}
.hours-table{width:100%; border-collapse:collapse;}
.hours-table td{padding:10px 0; border-bottom:1px solid var(--line); font-size:14px;}
.hours-table td:first-child{font-family:var(--font-mono); text-transform:uppercase; font-size:11px; letter-spacing:.06em; color:var(--text-soft);}
.hours-table td:last-child{text-align:right;}

/* =========================================================================
   BOOKING CHAT WIDGET
   ========================================================================= */
#chat-launcher{
  position:fixed; right:24px; bottom:24px; z-index:999;
  width:60px; height:60px; border-radius:50%;
  background:var(--ink); color:var(--bone);
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--brass);
  box-shadow:0 10px 30px rgba(16,36,31,0.35);
  transition:transform .25s ease;
}
#chat-launcher:hover{transform:scale(1.06);}
#chat-launcher svg{width:24px; height:24px;}

#chat-panel{
  position:fixed; right:24px; bottom:96px; z-index:999;
  width:360px; max-width:calc(100vw - 40px);
  height:520px; max-height:calc(100vh - 140px);
  background:var(--bone);
  border:1px solid var(--line);
  border-radius:8px;
  box-shadow:0 24px 60px rgba(16,36,31,0.28);
  display:flex; flex-direction:column;
  overflow:hidden;
  opacity:0; transform:translateY(16px) scale(.98);
  pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}
#chat-panel.open{opacity:1; transform:translateY(0) scale(1); pointer-events:auto;}

.chat-head{
  background:var(--ink); color:var(--bone);
  padding:18px 20px; display:flex; align-items:center; justify-content:space-between;
}
.chat-head-title{font-family:var(--font-display); font-size:16px;}
.chat-head-sub{font-family:var(--font-mono); font-size:10px; color:var(--brass-light); letter-spacing:.06em; text-transform:uppercase; margin-top:2px;}
.chat-close{background:none; border:0; color:var(--bone); font-size:18px; opacity:.7;}
.chat-close:hover{opacity:1;}

.chat-body{
  flex:1; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:12px;
  background:
    linear-gradient(var(--bone), var(--bone));
}
.msg{max-width:85%; font-size:14px; padding:10px 14px; border-radius:12px; line-height:1.5;}
.msg-bot{background:var(--bone-2); align-self:flex-start; border-bottom-left-radius:3px;}
.msg-user{background:var(--ink); color:var(--bone); align-self:flex-end; border-bottom-right-radius:3px;}
.chip-row{display:flex; flex-wrap:wrap; gap:8px; align-self:flex-start; max-width:100%;}
.chip{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.02em;
  padding:9px 13px; border:1px solid var(--ink); border-radius:20px;
  background:var(--white); transition:background .2s, color .2s;
}
.chip:hover{background:var(--ink); color:var(--bone);}
.chip.slot-taken{opacity:.35; text-decoration:line-through; pointer-events:none;}
.chip.selected{background:var(--brass); border-color:var(--brass); color:var(--ink);}

.chat-typing{display:flex; gap:4px; padding:10px 14px; align-self:flex-start;}
.chat-typing span{width:6px; height:6px; border-radius:50%; background:var(--text-soft); opacity:.5; animation:blink 1.2s infinite;}
.chat-typing span:nth-child(2){animation-delay:.2s;}
.chat-typing span:nth-child(3){animation-delay:.4s;}
@keyframes blink{0%,80%,100%{opacity:.3;} 40%{opacity:1;}}

.chat-input-row{
  display:flex; gap:8px; padding:14px; border-top:1px solid var(--line); background:var(--white);
}
.chat-input-row input{
  flex:1; border:1px solid var(--line); border-radius:20px; padding:10px 16px; font-size:14px;
}
.chat-input-row button{
  width:38px; height:38px; border-radius:50%; background:var(--ink); color:var(--bone); border:0; flex:none;
}
.chat-input-row button:hover{background:var(--brass); color:var(--ink);}
.chat-input-row.hidden{display:none;}

.demo-banner{
  font-family:var(--font-mono); font-size:10px; text-align:center; padding:6px;
  background:var(--brass-light); color:var(--ink); letter-spacing:.04em;
}