/* ==========================================================================
   FMAC — Frances Medical & Aesthetic Clinic
   Shared stylesheet for all pages (home, about, treatment template)
   Palette + type per CLAUDE.md / FMAC Brand Guide.md — do not hardcode
   colours elsewhere; add new tokens here instead.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400&family=Jost:wght@300;400;500;600&display=swap');

:root{
  /* brand colours — "Slate & Rose Gold", lightened per owner review (2026-09-19):
     white/ivory carries the page; slate is for TEXT not fills; rose-gold is the
     one signature colour, used on small/medium elements (buttons, badges, rules)
     — never as a large full-section fill. See CLAUDE.md before reintroducing a
     dark full-bleed section. */
  --pearl:        #FBFAF8; /* dominant background — warm near-white */
  --gold:         #D8AFA0; /* pale rose-gold — fills/borders/badges, not text */
  --gold-text:    #8B5A52; /* deep rose-gold — text-safe, eyebrows/links/labels */
  --blush:        #F5E7E3; /* pale rose wash — alternating section background */
  --mocha:        #6B6560; /* body text — warm slate */
  --aubergine:    #292624; /* headline ink — near-black warm slate, no purple cast */
  --plum:         #8B4A5A; /* signature accent — buttons/badges/small panels only */
  --plum-deep:    #5A2E3A; /* hover states + small dark accents (e.g. WhatsApp fab) — not for section fills */
  --mist:         #F1ECE9; /* warm stone wash — second alternating section background */
  --white:        #ffffff;

  /* type */
  --font-display: 'Playfair Display', 'Didot LT Std', Georgia, serif;
  --font-body:    'Jost', 'ITC Avant Garde Gothic', 'Helvetica Neue', Arial, sans-serif;

  /* rhythm */
  --radius-s:  6px;
  --radius-m:  16px;
  --radius-l:  28px;
  --gap:       clamp(1.25rem, 3vw, 2.5rem);
  --section-y: clamp(4rem, 8vw, 7rem);
  --container: 1180px;

  --shadow-soft: 0 20px 60px -30px rgba(41,38,36,.35);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--pearl);
  color: var(--mocha);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{
  font-family: var(--font-display);
  color: var(--aubergine);
  line-height: 1.15;
  margin: 0 0 .6em;
  font-weight: 500;
}
h1{ font-size: clamp(2.6rem, 5vw, 4.4rem); }
h2{ font-size: clamp(1.9rem, 3.4vw, 2.9rem); }
h3{ font-size: clamp(1.3rem, 2vw, 1.7rem); }
p{ margin: 0 0 1em; }
.container{ max-width: var(--container); margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 3rem); }
section{ padding: var(--section-y) 0; }

/* -------------------------------------------------- eyebrow / labels */
.eyebrow{
  display:inline-flex; align-items:center; gap:.5em;
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.eyebrow::before{ content:''; width:1.4em; height:1px; background: var(--gold-text); }

/* -------------------------------------------------- buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family: var(--font-body);
  font-size: .92rem;
  font-weight: 500;
  letter-spacing: .02em;
  padding: .95em 1.8em;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  white-space: nowrap;
}
.btn:hover{ transform: translateY(-1px); }
.btn-primary{ background: var(--plum); color: var(--pearl); }
.btn-primary:hover{ background: var(--aubergine); }
.btn-outline{ background: transparent; color: var(--pearl); border-color: rgba(248,245,240,.55); }
.btn-outline:hover{ border-color: var(--pearl); }
.btn-outline-dark{ background: transparent; color: var(--aubergine); border-color: var(--aubergine); }
.btn-outline-dark:hover{ background: var(--aubergine); color: var(--pearl); }
.btn-gold{ background: var(--gold); color: var(--aubergine); }
.btn-gold:hover{ background: var(--gold-text); color: var(--pearl); }
.btn-ghost-link{ padding: 0; border-radius: 0; color: var(--gold-text); border-bottom: 1px solid currentColor; }

/* -------------------------------------------------- header / nav */
.site-header{
  position: sticky; top:0; z-index: 100;
  background: rgba(248,245,240,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(41,38,36,.08);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding: 1.1rem clamp(1.25rem, 4vw, 3rem);
  max-width: var(--container); margin:0 auto;
}
.logo{
  display:flex; flex-direction:column; line-height:1;
}
.logo .wordmark{
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: .22em;
  color: var(--gold-text);
}
.logo .descriptor{
  font-family: var(--font-body);
  font-size: .56rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mocha);
  margin-top: .3em;
}
.nav-links{ display:flex; align-items:center; gap: clamp(1rem, 2vw, 2rem); }
.nav-links a{
  font-size: .88rem; font-weight: 500; color: var(--aubergine);
  padding: .4rem 0; position:relative;
}
.nav-links a:hover{ color: var(--gold-text); }
.nav-cta{ display:flex; align-items:center; gap: .75rem; }
.nav-toggle{
  display:none; background:none; border:none; cursor:pointer;
  font-size:1.4rem; color: var(--aubergine);
}

@media (max-width: 900px){
  .nav-links{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:flex-start; gap:0;
    background: var(--pearl); border-bottom:1px solid rgba(41,38,36,.08);
    padding: .5rem clamp(1.25rem,4vw,3rem) 1.2rem;
  }
  .nav-links.is-open{ display:flex; }
  .nav-links a{ width:100%; padding:.7rem 0; border-bottom:1px solid rgba(41,38,36,.06); }
  .nav-toggle{ display:inline-flex; }
}

@media (max-width: 640px){
  .nav{ padding: 1rem clamp(1.25rem, 4vw, 3rem); }
  .logo .wordmark{ font-size: 1.15rem; }
  .logo .descriptor{ font-size: .5rem; }
  .nav-cta{ gap: .5rem; }
  .nav-cta .btn-outline-dark{ display:none; }
  .nav-cta .btn-primary{ padding: .65em 1em; font-size: .78rem; }
}

/* -------------------------------------------------- hero */
.hero{
  position: relative;
  min-height: 86vh;
  display:flex; align-items:flex-end;
  color: var(--pearl);
  overflow:hidden;
}
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media img{ width:100%; height:100%; object-fit:cover; }
.hero-media::after{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(41,38,36,.08) 0%, rgba(41,38,36,.26) 55%, rgba(74,42,50,.72) 100%);
}
.hero-content{
  position:relative; z-index:1;
  max-width: var(--container); margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3rem) clamp(3rem, 7vw, 5rem);
  width:100%;
}
.hero .eyebrow{ color: var(--gold); }
.hero .eyebrow::before{ background: var(--gold); }
.hero h1{ color: var(--pearl); max-width: 16ch; }
.hero .lede{ max-width: 46ch; color: rgba(248,245,240,.86); font-size: 1.05rem; }
.hero-actions{ display:flex; flex-wrap:wrap; gap: .9rem; margin-top: 1.6rem; }

.stat-strip{
  position:relative; z-index:1;
  display:grid; grid-template-columns: repeat(3,1fr);
  max-width: var(--container); margin: -3.5rem auto 0;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
  gap: 1px;
}
.stat-strip .stat{
  background: var(--plum-deep); /* solid, not translucent — stays legible over any hero image */
  color: var(--pearl);
  text-align:center;
  padding: 1.6rem 1rem;
  border: 1px solid rgba(248,245,240,.12);
}
.stat .num{ font-family: var(--font-display); font-size: clamp(1.5rem,3vw,2.2rem); color: var(--gold); }
.stat .label{ font-size: .7rem; letter-spacing: .12em; text-transform:uppercase; opacity:.85; }

@media (max-width: 700px){
  .stat-strip{ grid-template-columns: 1fr; margin-top: 1.5rem; position:static; }
}

/* -------------------------------------------------- section helpers */
.section-head{ max-width: 640px; margin-bottom: clamp(2rem,4vw,3.2rem); }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
/* "bg-plum" now names a role (this page's rose-gold feature moment), not a dark
   fill — kept as a light blush wash so no full section reads as a dark block.
   For the rare spot that truly needs a dark, saturated moment, use bg-plum-solid. */
.bg-plum{ background: var(--blush); color: var(--aubergine); }
.bg-plum h2, .bg-plum h3{ color: var(--aubergine); }
.bg-plum .eyebrow{ color: var(--gold-text); }
.bg-plum .eyebrow::before{ background: var(--gold-text); }
.bg-plum p{ color: var(--mocha); }
.bg-plum .btn-outline{ border-color: rgba(41,38,36,.35); color: var(--aubergine); }
.bg-plum .btn-outline:hover{ border-color: var(--aubergine); }
.bg-mist{ background: var(--mist); }
.bg-blush{ background: var(--blush); }

.bg-plum-solid{ background: var(--plum-deep); color: var(--pearl); }
.bg-plum-solid h2, .bg-plum-solid h3{ color: var(--pearl); }
.bg-plum-solid .eyebrow{ color: var(--gold); }
.bg-plum-solid .eyebrow::before{ background: var(--gold); }
.bg-plum-solid p{ color: rgba(251,250,248,.82); }

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

.card{
  background: var(--white);
  border-radius: var(--radius-l);
  padding: clamp(1.5rem,3vw,2.2rem);
  box-shadow: var(--shadow-soft);
}
.pillar-card{
  border-radius: var(--radius-l);
  padding: clamp(1.5rem,3vw,2rem);
  background: var(--white);
  border: 1px solid rgba(41,38,36,.08);
  transition: box-shadow .2s ease, transform .2s ease;
}
.pillar-card:hover{ box-shadow: var(--shadow-soft); transform: translateY(-3px); }
.pillar-card .num{
  font-family: var(--font-display); color: var(--gold-text); font-size: 1.1rem; margin-bottom: .8rem; display:block;
}
.philosophy-num{
  font-family: var(--font-display); color: var(--gold-text); font-size: 1.1rem; display:block; margin-bottom: .6rem;
}

.treatment-card{
  display:block; overflow:hidden;
  border-radius: var(--radius-l);
  background: var(--white);
  border: 1px solid rgba(41,38,36,.08);
}
.treatment-card figure{ margin:0; aspect-ratio: 4/3; overflow:hidden; background: var(--mist); }
.treatment-card img{ width:100%; height:100%; object-fit:cover; transition: transform .4s ease; }
.treatment-card:hover img{ transform: scale(1.05); }
.treatment-card .body{ padding: 1.4rem 1.5rem 1.6rem; }
.treatment-card .badge{
  font-size: .65rem; letter-spacing:.12em; text-transform:uppercase; color: var(--gold-text); font-weight:600;
}

/* -------------------------------------------------- doctor / trust modules */
.doctor-card{
  display:grid; grid-template-columns: 260px 1fr; gap: 2rem;
  background: var(--white); border-radius: var(--radius-l);
  padding: clamp(1.5rem,3vw,2.5rem); box-shadow: var(--shadow-soft);
  align-items:start;
}
.doctor-card .portrait{ border-radius: var(--radius-m); overflow:hidden; aspect-ratio: 3/4; background: var(--mist); }
.doctor-card .cred-list{ display:flex; flex-wrap:wrap; gap: .5rem 1rem; margin: .8rem 0 1.2rem; }
.doctor-card .cred-list li{
  font-size: .74rem; letter-spacing:.06em; text-transform:uppercase; color: var(--mocha);
  padding: .3em .8em; background: var(--mist); border-radius: 999px;
}
@media (max-width: 700px){ .doctor-card{ grid-template-columns: 1fr; } .doctor-card .portrait{ max-width: 220px; } }

.trust-badges{ display:flex; flex-wrap:wrap; gap: 2rem 2.5rem; align-items:center; }
.trust-badges .item{ display:flex; align-items:center; gap:.6rem; font-size:.85rem; color: var(--aubergine); font-weight:500; }
.trust-badges .dot{ width:8px; height:8px; border-radius:50%; background: var(--gold-text); flex:none; }

/* -------------------------------------------------- quote */
.quote-block{ max-width: 760px; margin: 0 auto; text-align:center; }
.quote-block blockquote{
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.4rem,2.6vw,2rem); color: var(--aubergine);
  margin: 0 0 1rem;
}
.quote-block cite{ font-style:normal; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color: var(--gold-text); }

/* -------------------------------------------------- treatment snapshot */
.snapshot{
  background: var(--white); border-radius: var(--radius-l); box-shadow: var(--shadow-soft);
  padding: clamp(1.5rem,3vw,2rem);
}
.snapshot-row{ display:flex; justify-content:space-between; align-items:center; padding: .8rem 0; border-bottom: 1px solid var(--mist); }
.snapshot-row:last-child{ border-bottom:none; }
.snapshot-row .label{ font-size:.82rem; color: var(--mocha); }
.snapshot-row .value{ font-family: var(--font-display); font-size:1.1rem; color: var(--aubergine); text-align:right; }

.timeline{ display:grid; grid-template-columns: repeat(3,1fr); gap: var(--gap); }
@media (max-width: 800px){ .timeline{ grid-template-columns: 1fr; } }
.timeline .step{ border-top: 3px solid var(--gold); padding-top: 1.2rem; }
.timeline .step .when{ font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color: var(--gold-text); font-weight:600; }

.signal-list{ display:grid; grid-template-columns: repeat(2,1fr); gap: 1rem 2rem; }
@media (max-width:700px){ .signal-list{ grid-template-columns:1fr; } }
.signal-list li{ display:flex; gap: .9rem; align-items:flex-start; font-size:.96rem; }
.signal-list .mark{
  flex:none; width:1.6em; height:1.6em; border-radius:50%; background: var(--plum); color: var(--pearl);
  display:flex; align-items:center; justify-content:center; font-size:.75rem; margin-top:.15em;
}

.what-it-treats{ display:grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 1.2rem; }
.what-it-treats .item{ padding: 1.2rem; border-radius: var(--radius-m); background: var(--white); border: 1px solid rgba(41,38,36,.08); }
.what-it-treats .item .num{ font-family: var(--font-display); color: var(--gold-text); font-size: .95rem; }

/* -------------------------------------------------- accordion (FAQ) */
.accordion .item{ border-bottom: 1px solid rgba(41,38,36,.12); }
.accordion .item summary{
  cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding: 1.2rem 0; font-family: var(--font-display); font-size:1.05rem; color: var(--aubergine);
}
.accordion .item summary::-webkit-details-marker{ display:none; }
.accordion .item summary::after{ content:'+'; font-size:1.4rem; color: var(--gold-text); transition: transform .2s ease; flex:none; }
.accordion .item[open] summary::after{ transform: rotate(45deg); }
.accordion .item .answer{ padding: 0 0 1.4rem; color: var(--mocha); max-width: 65ch; }

/* -------------------------------------------------- disclaimer */
.disclaimer{
  font-size: .78rem; color: var(--mocha); opacity:.8; max-width: 760px; margin: 0 auto; text-align:center;
}

/* -------------------------------------------------- final CTA band */
.cta-band{ text-align:center; }
.cta-band h2{ max-width: 18ch; margin-left:auto; margin-right:auto; }
.cta-band .btn{ margin: 0 .4rem; }

/* -------------------------------------------------- footer */
.site-footer{ background: var(--aubergine); color: rgba(248,245,240,.85); }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--gap); padding: var(--section-y) 0 2rem; }
@media (max-width: 900px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .footer-grid{ grid-template-columns: 1fr; } }
.footer-grid h4{ color: var(--gold); font-size: .8rem; letter-spacing:.1em; text-transform:uppercase; font-family: var(--font-body); font-weight:600; margin-bottom:1rem; }
.footer-grid a{ display:block; padding: .3rem 0; font-size:.9rem; color: rgba(248,245,240,.75); }
.footer-grid a:hover{ color: var(--gold); }
.footer-grid p{ font-size:.9rem; color: rgba(248,245,240,.75); }
.footer-logo{ font-family: var(--font-display); font-size:1.6rem; letter-spacing:.2em; color: var(--gold); margin-bottom: .8rem; }
.footer-bottom{
  border-top: 1px solid rgba(248,245,240,.15);
  padding: 1.4rem 0; font-size:.78rem; opacity:.7;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:.5rem;
}

/* -------------------------------------------------- ecosystem strip */
.ecosystem-strip{ display:flex; flex-wrap:wrap; gap: 1rem; justify-content:center; }
.ecosystem-strip a{
  padding: .7em 1.4em; border-radius:999px; border:1px solid rgba(41,38,36,.15);
  font-size:.85rem; font-weight:500; color: var(--aubergine);
}
.ecosystem-strip a:hover{ border-color: var(--gold-text); color: var(--gold-text); }

/* -------------------------------------------------- concern navigator (home) */
.concern-tabs{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom: 2rem; }
.concern-tabs button{
  font-family: var(--font-body); font-size:.85rem; font-weight:500;
  padding:.6em 1.3em; border-radius:999px; border:1px solid rgba(41,38,36,.15);
  background: transparent; color: var(--mocha); cursor:pointer;
}
.concern-tabs button.active,
.concern-tabs button:hover{ background: var(--plum); color: var(--pearl); border-color: var(--plum); }
.concern-panel{ display:none; }
.concern-panel.active{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items:center; }
@media (max-width:800px){ .concern-panel.active{ grid-template-columns:1fr; } }
.concern-panel .services-list li{
  display:flex; align-items:center; gap:1rem; padding: .9rem 0; border-bottom:1px solid rgba(41,38,36,.1);
}
.concern-panel .services-list .idx{ font-family: var(--font-display); color: var(--gold-text); }

/* -------------------------------------------------- misc */
.whatsapp-fab{
  position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 90;
  width: 3.2rem; height: 3.2rem; border-radius:50%;
  background: var(--plum); color: var(--pearl);
  display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-soft); font-size:1.4rem;
}

.placeholder-note{
  font-size:.72rem; color: var(--gold-text); background: var(--mist); border-radius: var(--radius-s);
  padding: .4em .8em; display:inline-block; margin-top:.5em;
}

.section-photo{ border-radius: var(--radius-l); overflow:hidden; aspect-ratio: 4/5; background: var(--mist); box-shadow: var(--shadow-soft); }
.section-photo img{ width:100%; height:100%; object-fit:cover; }