/* =====================================================================
   THEME — shared by every page (load after responsive.css)
   Replaces the inline <style> blocks that used to live in index.html
   and policies.html. Palette and fonts are Nichola's existing brand.
   ===================================================================== */

:root{
  --paper: #F4F0E6;
  --paper-deep: #ECE5D5;
  --paper-lightest: #F9F5EB;
  --paper-warm: #F3ECDD;
  --paper-sand: #EFE7D3;
  --paper-deep2: #E8E0CE;
  --paper-clay: #F1E6DA;
  --card: #FBF9F3;
  --ink: #2B2622;
  --ink-soft: rgba(43,38,34,0.70);
  --ink-faint: rgba(43,38,34,0.48);
  --taupe: #857869;
  --stone: #DDD3C0;
  --clay: #A9765F;
  --rose: #C56F73;
  --line: rgba(43,38,34,0.12);

  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-script: "Ballet", "Snell Roundhand", cursive;

  --arch: 50% 50% 20px 20px / 40% 40% 20px 20px;

  /* Heading scale — about 12–15% smaller than before, still commanding */
  --h-display: clamp(38px, 4.6vw, 60px);   /* hero headline */
  --h-page: clamp(44px, 5.6vw, 74px);      /* inner page titles */
  --h-section: clamp(28px, 3.1vw, 38px);   /* section headings */
  --h-feature: clamp(30px, 3.4vw, 42px);   /* offer, vouchers, CTA bands */
  --h-sub: clamp(23px, 2.3vw, 29px);       /* story chapters */
  --h-quote: clamp(26px, 3.2vw, 40px);

  --ease-lux: cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.33, 0, .2, 1);
  --ease-out: cubic-bezier(.2,.7,.2,1);
  --max-width: 1120px;
}

body{ font-family: var(--font-body); background: var(--paper); color: var(--ink); }
h1, h2, h3{ font-family: var(--font-display); font-weight: 400; }
h1, h2, .story-quote blockquote{ text-wrap: balance; }

/* Section backgrounds — subtle tints so sections separate without boxes */
.hero-wrap{ background: var(--paper-lightest); }
.trust-strip{ background: var(--paper-deep); }
.about{ background: var(--paper); }
.treatments{ background: var(--paper-sand); }
.offer{ background: var(--paper-warm); }
.reviews{ background: var(--paper); }
.faq{ background: var(--paper-lightest); }
.contact{ background: var(--paper-deep2); }
.vouchers{ background: var(--paper-clay); }
.site-footer{ background: var(--paper-lightest); }
.booking-cta{ background: var(--ink); padding: 90px 24px; }
.booking-cta h2{ font-size: var(--h-feature); }

.site-nav{ background: rgba(244,240,230,0.94); }

/* Shared section heading scale */
.section-title{
  font-size: var(--h-section);
  line-height: 1.14;
  margin: 0 0 16px;
  max-width: 20ch;
}
.section-intro{ color: var(--ink-soft); font-size: 16px; margin: 0 0 40px; }
.about-more{ margin: 0; }
.text-link{
  color: var(--ink);
  font-weight: 500;
  border-bottom: 1px solid var(--clay);
  padding-bottom: 1px;
  transition: color .45s var(--ease-soft), border-color .45s var(--ease-soft);
}
.text-link:hover{ color: var(--clay); }

/* =====================================================================
   NAV
   ===================================================================== */
.nav-brand{ color: var(--ink); }
.nav-links a{ position: relative; }
.nav-links a[aria-current="page"]{ color: var(--clay); }

@media (min-width: 981px){
  .nav-links a::after{
    content: "";
    position: absolute; left: 0; right: 0; bottom: -4px;
    height: 1px; background: var(--clay);
    transform: scaleX(0); transform-origin: left;
    transition: transform .6s var(--ease-lux);
  }
  .nav-links a:hover::after,
  .nav-links a[aria-current="page"]::after{ transform: scaleX(1); }
}

/* The original burger breakpoint was 760px; with the extra "My story"
   link the desktop menu needs a little more room. */
@media (max-width: 980px){
  .nav-links{
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--line);
    padding: 6px 24px 16px;
  }
  .nav-links li{ width: 100%; }
  .nav-links.is-open{ display: flex; }
  .nav-links a{ display: block; width: 100%; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .nav-burger{ display: flex; order: 3; margin-left: 14px; }
  .nav-right{ margin-left: auto; }
  .nav-cta-mobile{ margin-top: 12px; }
  .nav-links .nav-cta-mobile .btn{ display: flex; }
  .nav-desktop-cta{ display: none; }
}
@media (min-width: 981px){
  .nav-cta-mobile{ display: none; }
}

/* =====================================================================
   HERO
   ===================================================================== */
.hero{
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 64px;
  padding: 72px 24px 96px;
}
.hero-eyebrow{ font-size: 14px; color: var(--taupe); margin: 0 0 18px; }

.hero .hero-title{ margin: 0 0 24px; max-width: none; font-size: inherit; }
.hero-title-main{
  display: block;
  font-size: var(--h-display);
  line-height: 1.04;
  letter-spacing: -0.01em;
}
.hero-title-sub{
  display: block;
  margin-top: 18px;
  font-family: var(--font-body);
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 34ch;
}
.hero-lead{ font-size: 16.5px; max-width: 46ch; margin: 0 0 32px; }
.hero-ctas{ margin-bottom: 0; }

/* Arched frame — echoes the tall mirror in Nichola's treatment room */
.hero-visual{ position: relative; justify-self: end; width: min(430px, 100%); }
.hero-portrait-frame{
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--arch);
  overflow: hidden;
  background: var(--card);
  box-shadow: 0 40px 70px -40px rgba(43,38,34,0.45);
}
.hero-portrait-frame img{ width: 100%; height: 100%; object-fit: cover; object-position: 45% 60%; }

.hero-location{
  position: absolute;
  left: -28px; bottom: 32px;
  display: flex; gap: 10px; align-items: flex-start;
  max-width: 250px;
  padding: 14px 18px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 18px 40px -22px rgba(43,38,34,0.4);
  font-size: 13px; line-height: 1.45; color: var(--ink-soft);
  transition: transform .6s var(--ease-lux), box-shadow .6s var(--ease-lux);
}
.hero-location:hover{ transform: translateY(-2px); box-shadow: 0 22px 44px -22px rgba(43,38,34,0.5); }
.hero-location strong{ display: block; color: var(--ink); font-weight: 600; font-size: 13.5px; }
.hero-location svg{ flex: 0 0 auto; margin-top: 2px; color: var(--clay); }

@media (max-width: 860px){
  .hero{ grid-template-columns: 1fr; gap: 40px; padding-top: 40px; padding-bottom: 72px; }
  .hero-visual{ order: -1; justify-self: center; width: min(340px, 100%); }
  .hero-portrait-frame{ max-width: none; margin: 0; aspect-ratio: 5 / 5.4; }
  .hero-location{ left: 50%; bottom: -22px; transform: translateX(-50%); width: max-content; max-width: 90%; }
  .hero-location:hover{ transform: translateX(-50%); }
}

/* =====================================================================
   TRUST STRIP
   ===================================================================== */
.trust-strip ul{ gap: 12px 44px; font-size: 14px; }
.trust-strip li{ display: flex; align-items: center; gap: 10px; }
.trust-strip li::before{
  content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--clay);
}

/* =====================================================================
   ABOUT
   ===================================================================== */
.about{ padding: 110px 24px; }
.about-grid{ grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.about-lead h2{ font-size: var(--h-section); line-height: 1.14; max-width: 16ch; margin: 0 0 24px; }
.about-lead p{ font-size: 16px; }
.pull-quote{ font-size: 21px; margin: 32px 0 28px; }

.principles{ gap: 0; border-top: 1px solid var(--line); }
.principle{
  background: none; border: 0; border-radius: 0;
  border-bottom: 1px solid var(--line);
  padding: 26px 0 26px 22px;
  position: relative;
  display: block;
}
.principle::before{
  content: ""; position: absolute; left: 0; top: 30px; bottom: 30px;
  width: 2px; background: var(--clay);
  transform: scaleY(0); transform-origin: top;
  transition: transform 1s var(--ease-lux) .35s;
}
.principles.is-in .principle::before{ transform: scaleY(1); }
.principles.is-in .principle:nth-child(2)::before{ transition-delay: .5s; }
.principles.is-in .principle:nth-child(3)::before{ transition-delay: .65s; }
html:not(.motion-ready) .principle::before{ transform: scaleY(1); }
.principle h3{ font-size: 21px; margin: 0 0 6px; }
.principle p{ font-size: 15px; }

@media (max-width: 860px){
  .about{ padding: 80px 24px; }
  .about-grid{ grid-template-columns: 1fr; gap: 44px; }
}

/* =====================================================================
   TREATMENTS  (cards are rendered by js/ui.js — copy untouched)
   ===================================================================== */
.treatments{ padding: 110px 24px; }
.treatments-head{ margin-bottom: 48px; }
.treatments-head h2{ font-size: var(--h-section); max-width: 20ch; }
.treatments-head p{ font-size: 16px; }

.treatment-card{
  background: linear-gradient(160deg, #FFFDFC 0%, #F8ECE6 100%);
  border: 1px solid rgba(169,118,95,0.18);
  border-radius: 24px;
  padding: 26px;
  box-shadow: 0 14px 34px -18px rgba(86,63,52,0.22), inset 0 1px 0 rgba(255,255,255,0.95);
  position: relative;
  overflow: hidden;
  transition: transform .6s var(--ease-lux), box-shadow .6s var(--ease-lux), border-color .6s var(--ease-soft);
}
.treatment-card:hover{
  transform: translateY(-3px);
  border-color: rgba(169,118,95,0.38);
  box-shadow: 0 22px 44px -20px rgba(86,63,52,0.30);
}
.treatment-card h3{ font-size: 22px; color: #493B35; }
.treatment-card p.blurb{ font-size: 14.5px; color: var(--ink-soft); }
.treatment-card-actions{ margin-top: 6px; }

/* Duration + price line on each card */
.treatment-meta{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.treatment-meta .treatment-duration{ font-size: 12.5px; color: var(--taupe); }
.treatment-price{ font-size: 13px; font-weight: 600; color: var(--clay); }

/* Category blocks (Skin Treatments) under the main grid */
.treatment-category{
  max-width: var(--max-width);
  margin: 72px auto 0;
  padding-top: 56px;
  border-top: 1px solid rgba(169,118,95,0.22);
}
.treatment-category-head{ margin-bottom: 32px; }
.treatment-category-head h3{
  font-size: var(--h-sub);
  line-height: 1.2;
  margin: 0 0 10px;
}
.treatment-category-head p{ color: var(--ink-soft); font-size: 16px; margin: 0; }
.treatment-category-grid{ margin: 0; }

@media (max-width: 700px){
  .treatments{ padding: 80px 24px; }
  .treatment-card{ border-radius: 20px; }
  .treatment-category{ margin-top: 56px; padding-top: 44px; }
}

/* =====================================================================
   OFFER + VOUCHERS
   ===================================================================== */
.offer, .vouchers{ text-align: center; }
.offer h2, .vouchers h2{
  font-size: var(--h-feature);
  max-width: 18ch; margin-left: auto; margin-right: auto;
}
.offer-card{
  width: min(100%, 600px); max-width: 600px;
  margin: 20px auto 0;
  text-align: center;
  border-radius: 28px;
}
.offer-card h3{ font-size: clamp(22px, 2.2vw, 26px); }
.offer-card p{ font-size: 17px; line-height: 1.7; }
.offer-card .btn, .vouchers-ctas .btn{ font-size: 15.5px; padding: 14px 26px; }
.vouchers{ padding: 90px 24px; }
.vouchers p{ margin: 0 auto; color: var(--ink-soft); }
.vouchers-ctas{ justify-content: center; align-items: center; margin-top: 28px; }

/* =====================================================================
   REVIEWS
   ===================================================================== */
.reviews{ padding: 110px 24px; }
.reviews-head h2{ font-size: var(--h-section); }
.review-card{
  background: linear-gradient(160deg, #FFFDFC 0%, #F5E7E1 100%);
  border: 1px solid rgba(169,118,95,0.16);
  border-radius: 24px;
  padding: 28px 26px 24px;
  box-shadow: 0 14px 34px -20px rgba(86,63,52,0.22);
  position: relative;
}
.review-card::before{
  content: "\201C";
  display: block;
  font-family: var(--font-display);
  font-size: 54px; line-height: .6;
  color: var(--clay);
  margin-bottom: 12px;
}
.review-card p{ color: #594A45; font-size: 15px; line-height: 1.7; margin: 0; }
@media (max-width: 700px){ .review-card{ border-radius: 20px; } }

/* =====================================================================
   FAQ
   ===================================================================== */
.faq{ padding: 110px 24px; border-top: 1px solid var(--line); }
.faq-grid{
  max-width: var(--max-width); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 64px; align-items: start;
}
.faq-head{ position: sticky; top: 110px; }
.faq-head p{ color: var(--ink-soft); }
.faq-list{ border-top: 1px solid var(--line); }
.faq-item{ border-bottom: 1px solid var(--line); }
.faq-item summary{
  list-style: none;
  cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 22px 0;
  font-family: var(--font-display);
  font-size: 20px; line-height: 1.3;
}
.faq-item summary::-webkit-details-marker{ display: none; }
.faq-item summary::after{
  content: "";
  flex: 0 0 auto;
  width: 12px; height: 12px;
  background:
    linear-gradient(var(--ink), var(--ink)) center / 12px 1.5px no-repeat,
    linear-gradient(var(--ink), var(--ink)) center / 1.5px 12px no-repeat;
  transition: transform .3s var(--ease-out);
}
.faq-item[open] summary::after{ transform: rotate(45deg); }
.faq-item summary:hover{ color: var(--clay); }
.faq-answer{ padding: 0 0 24px; }
.faq-answer p{ margin: 0; color: var(--ink-soft); font-size: 15.5px; line-height: 1.7; }

@media (max-width: 860px){
  .faq{ padding: 80px 24px; }
  .faq-grid{ grid-template-columns: 1fr; gap: 28px; }
  .faq-head{ position: static; }
  .faq-item summary{ font-size: 18px; }
}

/* =====================================================================
   CONTACT
   ===================================================================== */
.contact{ padding: 110px 24px; }
.contact-grid{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: stretch; }
.contact h2{ font-size: var(--h-section); max-width: 16ch; }
.contact-info > p{ color: var(--ink-soft); font-size: 16px; }

.nap{
  font-style: normal;
  margin: 28px 0 0;
  padding: 24px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 32px;
}
.nap address{ font-style: normal; }
.nap-block h3{
  font-family: var(--font-body);
  font-size: 13px; font-weight: 600;
  color: var(--taupe);
  margin: 0 0 6px;
}
.nap-block p, .nap-block li{ margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink); }
.nap-block a{ border-bottom: 1px solid var(--line); }
.nap-block a:hover{ border-color: var(--clay); }
.nap-hours li{ display: flex; justify-content: space-between; gap: 12px; }
.nap-hours li span:first-child{ color: var(--ink-soft); }
.nap-hours .note{ display: block; color: var(--ink-soft); font-size: 13.5px; margin-top: 4px; }

.contact-buttons{ margin-top: 26px; gap: 12px; }
.contact-buttons .btn{ padding: 12px 22px; }

/* Map — click-to-load so Google isn't contacted until the visitor asks */
.contact-map{
  position: relative;
  min-height: 420px;
  border-radius: 28px;
  overflow: hidden;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.7), transparent 55%),
    repeating-linear-gradient(0deg, transparent 0 38px, rgba(43,38,34,.05) 38px 39px),
    repeating-linear-gradient(90deg, transparent 0 38px, rgba(43,38,34,.05) 38px 39px),
    var(--paper-warm);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  text-align: center;
}
.contact-map iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map-facade{ padding: 32px; max-width: 320px; }
.map-pin{
  width: 58px; height: 58px; margin: 0 auto 18px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--clay);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 16px 30px -14px rgba(169,118,95,.8);
}
.map-pin span{
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--card);
}
.map-facade h3{ font-size: 22px; margin: 0 0 6px; }
.map-facade p{ font-size: 14px; color: var(--ink-soft); margin: 0 auto 18px; }
.map-facade small{ display: block; margin-top: 12px; font-size: 12px; color: var(--ink-faint); }

.contact-chat{
  max-width: var(--max-width);
  margin: 48px auto 0;
  padding: 22px 28px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
}
.contact-chat .mark{
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--stone);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  flex: 0 0 auto;
}
.contact-chat-text{ display: flex; align-items: center; gap: 16px; }
.contact-chat h3{ font-size: 19px; margin: 0 0 2px; }
.contact-chat p{ margin: 0; font-size: 14px; color: var(--ink-soft); }
.contact-chat .btn{ flex: 0 0 auto; }

@media (max-width: 860px){
  .contact{ padding: 80px 24px; }
  .contact-grid{ grid-template-columns: 1fr; gap: 40px; }
  .contact-map{ min-height: 340px; }
  .contact-chat{ flex-direction: column; align-items: flex-start; }
  .contact-chat .btn{ width: 100%; }
}
@media (max-width: 480px){
  .nap{ grid-template-columns: 1fr; }
}

/* =====================================================================
   WHATSAPP + CHAT LAUNCHER
   ===================================================================== */
.fab-chat{
  background: var(--rose);
  color: #fff;
  box-shadow: 0 14px 32px rgba(197,111,115,0.32), 0 4px 12px rgba(70,53,54,0.12);
}
.fab-chat:hover{ background: #A9575D; }
.fab-chat svg path{ stroke: #fff; }
.fab-whatsapp{ background: #25D366; }
.whatsapp-icon{ width: 20px; height: 20px; flex: 0 0 auto; }

/* =====================================================================
   FOOTER
   ===================================================================== */
.site-footer{ padding: 64px 24px 28px; }
.footer-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr));
  gap: 40px;
  align-items: start;
}
.footer-brand{ font-size: 22px; }
.footer-brand p{ font-family: var(--font-body); font-size: 14px; color: var(--ink-soft); margin: 10px 0 0; max-width: 32ch; }
.footer-col h3{
  font-family: var(--font-body); font-size: 13px; font-weight: 600;
  color: var(--taupe); margin: 4px 0 12px;
}
.footer-col address{ font-style: normal; }
.footer-col p, .footer-col li, .footer-col address{ font-size: 14px; line-height: 1.7; color: var(--ink); margin: 0; }
.footer-col a:hover{ color: var(--clay); }
.footer-links{ display: block; }
.footer-credit{ text-align: left; margin-top: 44px; }

@media (max-width: 860px){
  .footer-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand{ grid-column: 1 / -1; }
}
@media (max-width: 480px){
  .footer-grid{ grid-template-columns: 1fr; }
}

/* =====================================================================
   BREADCRUMB (inner pages)
   ===================================================================== */
.breadcrumb{ max-width: var(--max-width); margin: 0 auto; padding: 24px 24px 0; }
.breadcrumb ol{ list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; font-size: 13px; color: var(--ink-faint); }
.breadcrumb li + li::before{ content: "/"; margin-right: 8px; }
.breadcrumb a{ color: var(--ink-soft); }
.breadcrumb a:hover{ color: var(--clay); }

/* =====================================================================
   MY STORY PAGE
   ===================================================================== */
.story-hero{
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 48px 24px 110px;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 80px;
  align-items: center;
}
.story-portrait{
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--arch);
  overflow: hidden;
  background: linear-gradient(170deg, var(--paper-clay), var(--stone));
  box-shadow: 0 44px 80px -44px rgba(43,38,34,0.55);
}
.story-portrait img{ width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.story-portrait-fallback{
  display: none;
  position: absolute; inset: 0;
  flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  color: var(--ink-soft); text-align: center; padding: 32px;
}
.story-portrait-fallback span{ font-family: var(--font-display); font-size: 64px; color: var(--clay); line-height: 1; }
.story-portrait-fallback small{ font-size: 13px; max-width: 24ch; }
.story-portrait.is-missing img{ display: none; }
.story-portrait.is-missing .story-portrait-fallback{ display: flex; }

.story-intro h1{
  font-size: var(--h-page);
  line-height: 1;
  letter-spacing: -0.015em;
  margin: 0 0 14px;
}
.story-intro .story-role{ font-size: 17px; color: var(--taupe); margin: 0 0 28px; }
.story-intro .story-lede{
  font-family: var(--font-display);
  font-size: clamp(20px, 1.9vw, 24px);
  line-height: 1.45;
  color: var(--ink);
  max-width: 30ch;
  margin: 0 0 18px;
}
.story-intro p{ color: var(--ink-soft); font-size: 16.5px; line-height: 1.75; }
.story-intro .signature{
  font-family: var(--font-script);
  font-size: clamp(46px, 5vw, 64px);
  line-height: 1.2;
  color: var(--clay);
  margin: 18px 0 0;
  display: inline-block;
}

/* Timeline — the story is chronological, so a drawn line fits */
.story-chapters{ background: var(--paper-lightest); padding: 110px 24px; border-top: 1px solid var(--line); }
.story-chapters-inner{ max-width: 820px; margin: 0 auto; }
.story-chapters h2.section-title{ margin-bottom: 56px; }
.timeline{ position: relative; padding-left: 48px; }
.timeline::before,
.timeline-progress{
  content: "";
  position: absolute; left: 7px; top: 8px; bottom: 8px;
  width: 2px;
}
.timeline::before{ background: var(--line); }
.timeline-progress{
  background: var(--clay);
  transform-origin: top;
  transform: scaleY(var(--progress, 1));
}
.chapter{ position: relative; padding-bottom: 56px; }
.chapter:last-child{ padding-bottom: 0; }
.chapter::before{
  content: "";
  position: absolute; left: -48px; top: 8px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--paper-lightest);
  border: 2px solid var(--clay);
  transition: background .4s ease;
}
.chapter.is-in::before{ background: var(--clay); }
html:not(.motion-ready) .chapter::before{ background: var(--clay); }
.chapter h3{ font-size: var(--h-sub); margin: 0 0 14px; }
.chapter p{ color: var(--ink-soft); font-size: 16.5px; line-height: 1.8; margin: 0 0 14px; }

/* Highlighted gaps for Nichola to fill in — delete the <mark> once done */
mark.fill-in{
  background: #FCEFD9;
  color: #7A4B1E;
  border: 1px dashed #D2A36F;
  border-radius: 6px;
  padding: 1px 6px;
}

.story-quote{
  background: var(--paper);
  padding: 110px 24px;
  text-align: center;
}
.story-quote blockquote{
  margin: 0 auto;
  max-width: 24ch;
  font-family: var(--font-display);
  font-size: var(--h-quote);
  line-height: 1.25;
}
.story-quote figcaption{ margin-top: 22px; color: var(--taupe); font-size: 15px; }

.story-promises{ background: var(--paper-sand); padding: 110px 24px; }
.story-promises-inner{
  max-width: var(--max-width); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center;
}
.promise-list{ border-top: 1px solid var(--line); }
.promise-list li{ padding: 22px 0; border-bottom: 1px solid var(--line); }
.promise-list h3{ font-size: 21px; margin: 0 0 6px; }
.promise-list p{ margin: 0; color: var(--ink-soft); font-size: 15px; }
.story-room{ margin: 0; }
.story-room .frame{
  aspect-ratio: 4 / 5;
  border-radius: 20px 20px 999px 999px;
  overflow: hidden;
}
.story-room img{ width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.story-room figcaption{ margin-top: 14px; font-size: 13.5px; color: var(--ink-soft); text-align: center; }

@media (max-width: 860px){
  .story-hero{ grid-template-columns: 1fr; gap: 44px; padding-bottom: 80px; }
  .story-portrait{ width: min(360px, 100%); margin: 0 auto; }
  .story-chapters, .story-quote, .story-promises{ padding: 80px 24px; }
  .story-promises-inner{ grid-template-columns: 1fr; gap: 44px; }
  .story-room{ width: min(360px, 100%); margin: 0 auto; }
  .timeline{ padding-left: 36px; }
  .chapter::before{ left: -36px; }
}

/* =====================================================================
   TREATMENT DETAILS MODAL — overview tiles + opening motion
   ===================================================================== */
.treatment-overview{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
.treatment-overview-item{
  flex: 1 1 130px;
  border: 0;
  border-radius: 12px;
  padding: 14px 16px;
}
.treatment-overview-item strong{ letter-spacing: .06em; }
.treatment-overview-item span{ font-size: 14px; overflow-wrap: normal; }

/* Long values span the full row, label beside value */
.treatment-overview-item.is-wide{
  flex-basis: 100%;
  flex-direction: row;
  align-items: baseline;
  gap: 16px;
}
.treatment-overview-item.is-wide strong{ flex: 0 0 110px; }
@media (max-width: 520px){
  .treatment-overview-item.is-wide{ flex-direction: column; gap: 7px; }
  .treatment-overview-item.is-wide strong{ flex-basis: auto; }
}

@keyframes modalDrop{
  from{ opacity: 0; transform: translate3d(0, -16px, 0); }
  to{ opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference){
  .treatment-info-overlay.is-open{ animation: fadeIn .4s var(--ease-soft) both; }
  .treatment-info-overlay.is-open .treatment-info-modal{
    animation: modalDrop .6s var(--ease-lux) both;
  }
}

/* =====================================================================
   BUTTON HOVERS — same look, calmer timing
   ===================================================================== */
.btn{
  transition:
    background-color .45s var(--ease-soft),
    color .45s var(--ease-soft),
    border-color .45s var(--ease-soft),
    box-shadow .45s var(--ease-soft),
    transform .2s var(--ease-soft);
}
.treatment-card-link{ transition: color .4s var(--ease-soft); }

/* =====================================================================
   MOTION
   Driven by js/motion.js. Nothing is hidden unless <html> has
   .motion-ready, which is never set for reduced-motion visitors.
   Only opacity, transform and clip-path animate, so nothing shifts
   layout and scrolling stays smooth.
   ===================================================================== */
@keyframes unmask{
  from{ clip-path: inset(100% 0 0 0); opacity: 0; transform: scale(.98); }
  to{ clip-path: inset(0 0 0 0); opacity: 1; transform: scale(1); }
}
@keyframes settle{ from{ transform: scale(1.04); } to{ transform: scale(1); } }
@keyframes softRise{ from{ opacity: 0; transform: translate3d(0, 8px, 0); } to{ opacity: 1; transform: none; } }
@keyframes fadeIn{ from{ opacity: 0; } to{ opacity: 1; } }
@keyframes write{ from{ clip-path: inset(0 100% 0 0); } to{ clip-path: inset(0 0 0 0); } }

@media (prefers-reduced-motion: no-preference){

  /* Text, blocks and CTAs: fade with a small rise. Timing (--d, --dur)
     is set per element by motion.js so each section has its own rhythm. */
  .motion-ready [data-animate="text"],
  .motion-ready [data-animate="block"],
  .motion-ready [data-animate="cta"],
  .motion-ready [data-animate="heading"] .word{
    opacity: 0;
    transform: translate3d(0, var(--rise, 14px), 0);
    transition:
      opacity var(--dur, 1000ms) var(--ease-soft) var(--d, 0ms),
      transform var(--dur, 1000ms) var(--ease-lux) var(--d, 0ms);
  }
  .motion-ready [data-animate="heading"] .word{
    display: inline-block;
    --rise: .42em;
  }
  .motion-ready [data-animate="block"]{ --rise: 18px; }
  .motion-ready [data-animate="cta"]{ --rise: 10px; pointer-events: none; }
  .motion-ready .is-in[data-animate="cta"],
  .motion-ready .is-in [data-animate="cta"]{ pointer-events: auto; }

  .motion-ready .is-in[data-animate],
  .motion-ready .is-in [data-animate]:not([data-animate="heading"]),
  .motion-ready .is-in .word{
    opacity: 1;
    transform: none;
  }

  /* Portraits: a slow masked reveal from the base, with the frame
     settling from 98% and the photo easing out of a very light zoom */
  .motion-ready .hero-portrait-frame,
  .motion-ready .story-portrait{
    animation: unmask 1.6s var(--ease-lux) .2s both;
  }
  .motion-ready .hero-portrait-frame img,
  .motion-ready .story-portrait img{
    animation: settle 2.4s var(--ease-lux) .2s both;
  }
  .motion-ready .hero-location{ animation: fadeIn 1.2s var(--ease-soft) 1.35s both; }
  .motion-ready .signature{ animation: write 1.8s var(--ease-soft) 1.5s both; }

  /* Scroll-revealed images. The image is clipped, not its frame, so the
     frame stays observable by IntersectionObserver. */
  .motion-ready [data-reveal] > img{
    clip-path: inset(100% 0 0 0);
    opacity: 0;
    transform: scale(1.04);
  }
  .motion-ready [data-reveal].is-in > img{
    clip-path: inset(0 0 0 0);
    opacity: 1;
    transform: scale(1);
    transition:
      clip-path 1.5s var(--ease-lux),
      opacity 1s var(--ease-soft),
      transform 2.2s var(--ease-lux);
  }

  /* FAQ answers open with the same soft rise */
  .faq-item[open] .faq-answer{ animation: softRise .6s var(--ease-lux); }
}

@media (prefers-reduced-motion: reduce){
  .timeline-progress{ transform: none; }
}

@media print{
  .motion-ready [data-animate],
  .motion-ready .word{ opacity: 1 !important; transform: none !important; }
}
/* =====================================================================
   HEADING FONT + SIZE FIXES
   ===================================================================== */

/* Cormorant looks best slightly heavier than regular */
h1, h2, h3,
.pull-quote,
.story-quote blockquote,
.story-lede,
.faq-item summary{
  font-weight: 500;
}

/* "Medical expertise, without the clinical coldness." */
.about-lead h2{
  font-size: clamp(28px, 2.6vw, 36px);
  line-height: 1.15;
  max-width: 24ch;
}

/* Nichola's quote on the My Story page */
.story-quote blockquote{
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.3;
  max-width: 32ch;
}

/* =====================================================================
   ACCREDITATIONS (My Story)
   ===================================================================== */
.accreditations{ margin-top: 72px; padding-top: 40px; border-top: 1px solid var(--line); }
.accreditations h3{ font-size: var(--h-sub); margin: 0 0 20px; }
.accreditations ul{
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
}
.accreditations li{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px 20px;
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.3;
}
.accreditations li span{
  display: block; margin-top: 6px;
  font-family: var(--font-body); font-size: 13px; color: var(--ink-soft);
}
@media (max-width: 700px){ .accreditations ul{ grid-template-columns: 1fr; } }

/* =====================================================================
   HOW TO FIND US — salon photo above the map
   ===================================================================== */
.contact-visual{ display: flex; flex-direction: column; gap: 16px; }
.clinic-front{ margin: 0; }
.clinic-front-frame{ border-radius: 28px; overflow: hidden; aspect-ratio: 5 / 4; }
.clinic-front-frame img{
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 28%;
  display: block;
}
.clinic-front figcaption{ margin-top: 10px; font-size: 13.5px; color: var(--ink-soft); }
.contact-visual .contact-map{ min-height: 280px; }

/* Footer credit link */
.footer-credit a{
  color: inherit;
  border-bottom: 1px solid var(--line);
  transition: color .4s ease, border-color .4s ease;
}
.footer-credit a:hover{ color: var(--clay); border-color: var(--clay); }

/* =====================================================================
   ABOUT — portrait + principles row
   ===================================================================== */
.about-grid{ grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.7fr); align-items: center; }

.about-portrait{ margin: 0; justify-self: end; width: min(320px, 100%); }
.about-portrait-frame{
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--arch);
  overflow: hidden;
  background: linear-gradient(170deg, var(--paper-clay), var(--stone));
  box-shadow: 0 34px 60px -38px rgba(43,38,34,0.5);
}
.about-portrait-frame img{
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 18%;
  display: block;
}
.about-portrait figcaption{
  margin-top: 14px;
  font-size: 13.5px;
  color: var(--ink-soft);
  text-align: center;
}

.about .principles{
  max-width: var(--max-width);
  margin: 64px auto 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 36px;
}

@media (max-width: 860px){
  .about-grid{ grid-template-columns: 1fr; }
  .about-portrait{ justify-self: center; width: min(260px, 100%); }
  .about .principles{ grid-template-columns: 1fr; margin-top: 44px; }
}

/* =====================================================================
   MY STORY — opening line
   ===================================================================== */
.story-intro .story-lede{
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.5;
  max-width: none;
}
.story-portrait img{ object-position: center 12%; }

/* =====================================================================
   TREATMENT PACKAGES (in the details modal)
   ===================================================================== */
.treatment-info-packages{ margin-top: 8px; }
.treatment-info-packages h3{
  font-family: var(--font-display);
  font-size: 20px;
  margin: 0 0 14px;
}
.package-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.package-card{
  background: var(--paper-lightest);
  border: 1px solid rgba(169,118,95,0.2);
  border-radius: 14px;
  padding: 16px 18px;
}
.package-card-head{
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-bottom: 6px;
}
.package-card-head strong{ font-size: 15px; line-height: 1.3; }
.package-price{
  font-weight: 600; font-size: 15px; color: var(--clay); white-space: nowrap;
}
.package-card p{ margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink-soft); }
@media (max-width: 620px){
  .package-grid{ grid-template-columns: 1fr; }
}

/* =====================================================================
   POLICY POINTS
   ===================================================================== */
.policy-points{ list-style: none; margin: 12px 0 0; padding: 0; }
.policy-points li{
  padding: 12px 0 12px 18px;
  border-left: 2px solid var(--clay);
  margin-bottom: 10px;
  background: rgba(255,255,255,0.35);
}
.policy-points strong{ font-weight: 600; }
.policy-points span{ color: var(--ink-soft); }
.policy-footnote{ margin-top: 14px; font-size: 14.5px; }

/* Gift voucher validity note */
.voucher-validity{
  margin: 18px auto 0;
  font-size: 14px;
  color: var(--taupe);
}