/* ============================================================
   PALETTE B — Porcelain & Soft Blue/Silver
   ============================================================ */
:root {
  --paper:       #FAF7F8;
  --surface:     #F3ECEE;
  --white:       #FFFFFF;
  --ink:         #2A2E32;
  --ink-soft:    #646C72;
  --accent:      #AC8A94;
  --accent-deep: #74505A;
  --line:        #E9DFE2;
  --rail-w:      220px;
}

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:18px;scroll-behavior:smooth}
body{font-family:'DM Sans',sans-serif;font-size:1rem;line-height:1.65;color:var(--ink);background:var(--paper);overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,select,input,textarea{font-family:inherit}

/* ── Typography ── */
h1,h2,h3,.serif{font-family:'Cormorant Garamond',Georgia,serif}
h1{font-size:clamp(2.6rem,5.5vw,5rem);font-weight:500;line-height:1.06;letter-spacing:-0.02em}
h2{font-size:clamp(1.9rem,3vw,2.7rem);font-weight:500;line-height:1.18}
h3{font-size:1.1rem;font-weight:500;letter-spacing:0.02em}
.eyebrow{font-size:0.7rem;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:var(--ink-soft)}
.caption{font-size:0.8rem;color:var(--ink-soft);line-height:1.5}

/* ================================================================
   LEFT RAIL — fixed sidebar (desktop ≥1024px)
   ================================================================ */
#rail {
  display:none;
}

@media(min-width:1024px){
  #rail {
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    position:fixed;
    top:0; left:0;
    width:var(--rail-w);
    height:100vh;
    background:var(--paper);
    border-right:1px solid var(--line);
    z-index:200;
    padding:2.5rem 1.8rem;
  }
  body {
    padding-left:var(--rail-w);
  }
}

/* Rail top — logo + tagline */
.rail-logo img{width:40px;height:auto}
.rail-clinic-name{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:1.05rem;font-weight:500;color:var(--ink);
  margin-top:0.6rem;line-height:1.2;
}
.rail-tagline{
  font-size:0.68rem;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--ink-soft);margin-top:0.2rem;
}

/* Rail nav links */
.rail-nav{display:flex;flex-direction:column;gap:0.1rem;margin-top:2.5rem}
.rail-nav a{
  font-size:0.78rem;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--ink-soft);padding:0.45rem 0;border-bottom:1px solid transparent;
  transition:color .18s, border-color .18s;
}
.rail-nav a:hover{color:var(--ink);border-bottom-color:var(--line)}
.rail-section-label{
  font-size:0.68rem;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--accent);margin-top:2rem;min-height:1.2rem;
}

/* Rail bottom — CTA + phone */
.rail-bottom{display:flex;flex-direction:column;gap:0.75rem}
.rail-cta{
  display:inline-block;padding:0.7rem 1rem;background:var(--accent);color:var(--ink);
  font-size:0.72rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;
  text-align:center;border:none;cursor:pointer;transition:background .18s;
}
.rail-cta:hover{background:var(--accent-deep);color:var(--white)}
.rail-phone{font-size:0.76rem;color:var(--ink-soft);text-align:center;letter-spacing:0.04em}

/* ================================================================
   MOBILE TOP NAV (< 1024px)
   ================================================================ */
#topnav {
  display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;z-index:300;
  background:var(--paper);border-bottom:1px solid var(--line);
  padding:0 1.25rem;height:60px;
}
#topnav .nav-logo img{width:36px;height:auto}
#topnav .nav-phone{font-size:0.8rem;color:var(--accent-deep);font-weight:500}
#hamburger{
  background:none;border:none;cursor:pointer;
  display:flex;flex-direction:column;gap:5px;padding:6px;
}
#hamburger span{display:block;width:22px;height:1.5px;background:var(--ink);transition:all .2s}
#hamburger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
#hamburger.open span:nth-child(2){opacity:0}
#hamburger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

#mobile-menu{
  display:none;position:fixed;inset:60px 0 0 0;
  background:var(--paper);z-index:299;
  flex-direction:column;padding:2rem 1.5rem;gap:0.5rem;overflow-y:auto;
}
#mobile-menu.open{display:flex}
#mobile-menu a{
  font-size:1.15rem;font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:500;color:var(--ink);padding:0.7rem 0;border-bottom:1px solid var(--line);
}
.mob-cta{
  display:inline-block;margin-top:1rem;padding:0.9rem 1.5rem;
  background:var(--accent);color:var(--ink);
  font-family:'DM Sans',sans-serif;font-size:0.8rem;font-weight:600;
  letter-spacing:0.1em;text-transform:uppercase;text-align:center;
}

@media(min-width:1024px){
  #topnav{display:none}
  #mobile-menu{display:none!important}
}

/* ================================================================
   MAIN CONTENT — fluid right of rail
   ================================================================ */
main{min-height:100vh}

/* ================================================================
   HERO — VIDEO LOOP, 100svh, left-aligned text
   FIX 1: video instead of static machine image
   ================================================================ */
#hero {
  position:relative;
  height:100svh;
  min-height:560px;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
}

/* Video fills the hero box */
.hero-video{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center center;
}

/* Porcelain/silver scrim — light and airy, heavier on left for legibility */
.hero-scrim{
  position:absolute;
  inset:0;
  background:linear-gradient(
    105deg,
    rgba(250,247,248,0.88) 0%,
    rgba(243,236,238,0.62) 40%,
    rgba(243,236,238,0.18) 75%,
    rgba(243,236,238,0.04) 100%
  );
}

.hero-content{
  position:relative;
  z-index:2;
  padding:3.5rem 2rem 4.5rem;
  max-width:640px;
  width:100%;
}
@media(min-width:768px){
  .hero-content{padding:4rem 3.5rem 5.5rem}
}

.hero-eyebrow{
  font-size:0.68rem;font-weight:600;letter-spacing:0.2em;text-transform:uppercase;
  color:var(--accent-deep);margin-bottom:1.2rem;
}
.hero-h1{color:var(--ink);margin-bottom:1.4rem;font-style:italic}
.hero-sub{
  font-size:clamp(0.9rem,1.4vw,1.05rem);color:var(--ink);
  max-width:500px;line-height:1.6;margin-bottom:2rem;
}
.hero-cred{
  font-size:0.72rem;font-weight:500;letter-spacing:0.08em;
  color:var(--ink-soft);margin-bottom:2rem;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:0.75rem;align-items:center}

.btn-primary{
  display:inline-block;padding:0.85rem 1.8rem;background:var(--accent);color:var(--ink);
  font-size:0.78rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;
  border:none;cursor:pointer;transition:background .18s;
}
.btn-primary:hover{background:var(--accent-deep);color:var(--white)}
.btn-ghost{
  display:inline-block;padding:0.85rem 1.4rem;
  border:1px solid var(--accent-deep);color:var(--accent-deep);
  font-size:0.78rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;
  transition:all .18s;
}
.btn-ghost:hover{background:var(--accent-deep);color:var(--white)}

/* ================================================================
   AUTHORITY STRIP
   ================================================================ */
#strip{
  background:var(--surface);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:1rem 2rem;
}
.strip-inner{
  display:flex;flex-wrap:wrap;gap:0.5rem 2rem;align-items:center;
}
.strip-inner span{
  font-size:0.72rem;font-weight:500;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--ink-soft);
}
.strip-inner span + span::before{content:'·';margin-right:2rem}
@media(max-width:600px){.strip-inner span + span::before{display:none}}

/* ================================================================
   GENERIC SECTION — full width, with inner max for text
   FIX 3: remove max-width:820px constraint, sections fill available width
   ================================================================ */
.section{padding:5rem 2.5rem}
@media(min-width:768px){.section{padding:6rem 4rem}}
@media(min-width:1280px){.section{padding:6rem 5rem}}

/* For text-only sections, cap the prose */
.prose-cap{max-width:680px}

.section + .section{border-top:1px solid var(--line)}
.band-surface{background:var(--surface)}

/* ================================================================
   PROBLEM → SOLUTION
   FIX 3: two-column layout — points left, solution block right
   ================================================================ */
#problem .prob-layout{
  display:grid;
  gap:3rem;
  align-items:start;
  margin-top:2.5rem;
}
@media(min-width:860px){
  #problem .prob-layout{
    grid-template-columns:1fr 1fr;
    gap:4rem;
  }
}

.points{display:grid;gap:1.4rem}
.point-row{display:flex;gap:1.2rem;align-items:flex-start}
.point-num{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:1.5rem;font-weight:400;color:var(--accent);
  line-height:1;flex-shrink:0;padding-top:0.1rem;width:1.6rem;
}
.point-text strong{
  display:block;font-size:0.78rem;font-weight:600;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--ink);margin-bottom:0.15rem;
}
.point-text p{font-size:0.88rem;color:var(--ink-soft);line-height:1.5}

.solution-box{
  padding:2rem 1.8rem;
  background:var(--white);
  border:1px solid var(--line);
  border-left:3px solid var(--accent);
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.solution-box p{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:1.3rem;font-weight:400;color:var(--ink);line-height:1.5;font-style:italic;
}
.solution-box .sol-cta{
  margin-top:1.5rem;
  font-size:0.78rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--accent-deep);border-bottom:1px solid var(--accent);
  padding-bottom:1px;align-self:flex-start;
}
.solution-box .sol-cta:hover{border-bottom-color:var(--accent-deep)}

/* ================================================================
   TECHNOLOGY — CELLU M6 INFINITY®
   FIX 2: machine image as translucent section background
   ================================================================ */
#technology{
  position:relative;
  overflow:hidden;
  padding:6rem 4rem;
}
@media(min-width:1280px){#technology{padding:6rem 5rem}}

/* Machine image as soft translucent bg */
.tech-bg{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:right center;
  opacity:0.11; /* very low opacity — elegant, not distracting */
  display:block;
}

/* White overlay ensures text stays AA-readable */
.tech-overlay{
  position:absolute;
  inset:0;
  background:rgba(243,236,238,0.82);
}

.tech-inner{
  position:relative;
  z-index:2;
}

/* stat grid full-width, balanced 4 cols */
.stat-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  margin-top:2rem;
}
@media(min-width:680px){
  .stat-grid{grid-template-columns:repeat(4,1fr)}
}

.stat-tile{background:rgba(255,255,255,0.92);padding:1.4rem 1.2rem}
.stat-val{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:2.1rem;font-weight:500;color:var(--accent-deep);line-height:1;
}
.stat-desc{font-size:0.8rem;color:var(--ink);margin-top:0.3rem;line-height:1.4}
.stat-cite{font-size:0.68rem;color:var(--ink-soft);margin-top:0.2rem}
.tech-disclaimer{
  font-size:0.72rem;color:var(--ink-soft);margin-top:1rem;line-height:1.5;
}

/* Tech desc + image col layout */
.tech-copy-grid{
  display:grid;
  gap:3rem;
  align-items:start;
  margin-top:2rem;
}
@media(min-width:860px){
  .tech-copy-grid{grid-template-columns:1fr 1fr}
}

.tech-desc{
  font-size:0.92rem;color:var(--ink-soft);line-height:1.7;
}

/* ================================================================
   TREATMENTS — 5 SYMMETRIC CARDS
   ================================================================ */
#treatments{padding:5rem 2.5rem}
@media(min-width:768px){#treatments{padding:6rem 4rem}}
@media(min-width:1280px){#treatments{padding:6rem 5rem}}
#treatments .section-lead{font-size:0.9rem;color:var(--ink-soft);margin-bottom:2rem}

.treatment-track-wrap{
  overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;
  scrollbar-width:none;margin-left:-2.5rem;margin-right:-2.5rem;
  padding-left:2.5rem;padding-right:2.5rem;
}
.treatment-track-wrap::-webkit-scrollbar{display:none}
.treatment-track{display:flex;gap:1.25rem;width:max-content}

.tc{
  scroll-snap-align:start;flex-shrink:0;width:240px;
  background:var(--white);border:1px solid var(--line);
  display:flex;flex-direction:column;transition:box-shadow .2s;
}
.tc:hover{box-shadow:0 4px 20px rgba(116,80,90,0.12)}
/* .tc-img now lives inside .tc-img-par which is the overflow:hidden wrapper — keep legacy selector for safety */
.tc-img{width:100%;height:100%;object-fit:cover;display:block}
.tc-body{padding:1.2rem 1.1rem 1.4rem;flex:1;display:flex;flex-direction:column}
.tc-name{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:1.1rem;font-weight:500;color:var(--ink);margin-bottom:0.4rem;
}
.tc-line{font-size:0.8rem;color:var(--ink-soft);line-height:1.45;flex:1}
.tc-link{
  display:inline-block;margin-top:0.9rem;font-size:0.72rem;font-weight:600;
  letter-spacing:0.1em;text-transform:uppercase;color:var(--accent-deep);
  border-bottom:1px solid var(--accent);padding-bottom:1px;align-self:flex-start;
}
.tc-link:hover{border-bottom-color:var(--accent-deep)}

.carousel-dots{display:flex;gap:0.4rem;margin-top:1.2rem;align-items:center}
.carousel-dots span{width:6px;height:6px;border-radius:50%;background:var(--line);display:block}

@media(min-width:1100px){
  .treatment-track-wrap{overflow-x:visible;margin-left:0;margin-right:0;padding-left:0;padding-right:0}
  .treatment-track{display:grid;grid-template-columns:repeat(5,1fr);width:auto;gap:1rem}
  .tc{width:auto;flex-shrink:1}
  .carousel-dots{display:none}
}

/* ================================================================
   MEET RUFINA
   FIX 3: two-column, image right — fills width
   ================================================================ */
#rufina .rufina-layout{
  display:grid;
  gap:3rem;
  align-items:start;
  margin-top:2rem;
}
@media(min-width:680px){
  #rufina .rufina-layout{
    grid-template-columns:1fr 280px;
    align-items:center;
  }
}
@media(min-width:1024px){
  #rufina .rufina-layout{
    grid-template-columns:1fr 320px;
  }
}

/* .rufina-portrait is now the <img> inside .rufina-portrait-par */
.rufina-portrait{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top center;
  display:block;
}
.rufina-headline{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:1.5rem;font-style:italic;color:var(--ink-soft);margin-bottom:0.8rem;
}
.rufina-bio{font-size:0.92rem;color:var(--ink);line-height:1.65;margin-bottom:1rem}
.rufina-badges{display:flex;flex-wrap:wrap;gap:0.4rem 0.8rem;margin-bottom:1.2rem}
.badge{
  font-size:0.68rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--ink-soft);padding:0.25rem 0.6rem;border:1px solid var(--line);
}
.link-arrow{
  font-size:0.8rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--accent-deep);border-bottom:1px solid var(--accent);padding-bottom:1px;
}
.link-arrow:hover{border-bottom-color:var(--accent-deep)}

/* ================================================================
   FULL-BLEED IMAGE BREAK
   The wrapper (.img-break-par) handles the aspect-ratio + overflow.
   The img inside is sized via the .img-break-par img rule.
   ================================================================ */
.img-break{
  width:100%;height:100%;object-fit:cover;object-position:center 40%;display:block;
}

/* ================================================================
   TESTIMONIALS — 6 cards, 3-col desktop, swipe on mobile
   FIX 4: expanded to 6, mobile carousel, filled width
   ================================================================ */
#results{padding:5rem 2.5rem}
@media(min-width:768px){#results{padding:6rem 4rem}}
@media(min-width:1280px){#results{padding:6rem 5rem}}

/* Mobile: swipe carousel */
.testi-wrap{
  overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;
  scrollbar-width:none;
  margin-left:-2.5rem;margin-right:-2.5rem;
  padding-left:2.5rem;padding-right:2.5rem;
  margin-top:2rem;
}
.testi-wrap::-webkit-scrollbar{display:none}

.testi-track{
  display:flex;gap:1.25rem;width:max-content;
}

.testi-card{
  scroll-snap-align:start;flex-shrink:0;
  width:280px;
  background:var(--white);border:1px solid var(--line);padding:1.5rem 1.4rem;
}

/* Desktop ≥860px: 3-col grid, two rows */
@media(min-width:860px){
  .testi-wrap{
    overflow-x:visible;margin-left:0;margin-right:0;padding-left:0;padding-right:0;
  }
  .testi-track{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    width:auto;gap:1.25rem;
  }
  .testi-card{width:auto;flex-shrink:1}
}

.testi-stars{color:var(--accent-deep);font-size:0.85rem;margin-bottom:0.6rem;letter-spacing:0.05em}
.testi-quote{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:1.05rem;font-weight:400;font-style:italic;color:var(--ink);
  line-height:1.45;margin-bottom:0.8rem;
}
.testi-name{font-size:0.72rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-soft)}

/* Mobile dots — centered row */
.testi-dots{
  display:flex;gap:0.5rem;margin-top:1.25rem;
  align-items:center;justify-content:center;
  width:100%;
}
.testi-dots span{
  width:7px;height:7px;border-radius:50%;background:var(--line);display:block;
  flex-shrink:0;
}
.testi-dots span.active{background:var(--accent-deep)}
@media(min-width:860px){.testi-dots{display:none}}

/* Testimonials controls row (arrows + dots) */
.testi-controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1.25rem;
  padding:1.25rem 1.25rem 2.5rem;
}
.testi-arrow{
  background:none;border:1px solid var(--line);color:var(--accent-deep);
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:1.1rem;flex-shrink:0;
  transition:border-color .15s, background .15s;
  border-radius:0;
  line-height:1;
}
.testi-arrow:hover{border-color:var(--accent-deep);background:var(--surface)}
@media(min-width:860px){.testi-controls{display:none}}

/* ================================================================
   FAQ — two-column layout
   FIX 5: left = eyebrow+heading+CTA; right = accordion
   ================================================================ */
#faq{padding:5rem 2.5rem}
@media(min-width:768px){#faq{padding:6rem 4rem}}
@media(min-width:1280px){#faq{padding:6rem 5rem}}

.faq-layout{
  display:grid;
  gap:3rem;
  align-items:start;
  margin-top:0;
}
@media(min-width:860px){
  .faq-layout{
    grid-template-columns:300px 1fr;
    gap:5rem;
  }
}
@media(min-width:1200px){
  .faq-layout{
    grid-template-columns:340px 1fr;
  }
}

.faq-left{
  position:sticky;
  top:2rem; /* stick while scrolling FAQ */
}

.faq-left .faq-intro{
  font-size:0.92rem;color:var(--ink-soft);line-height:1.65;margin-top:0.6rem;margin-bottom:1.8rem;
}
.faq-consult{
  display:inline-block;padding:0.8rem 1.4rem;background:var(--accent);color:var(--ink);
  font-size:0.76rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;
  transition:background .18s;margin-bottom:0.75rem;
}
.faq-consult:hover{background:var(--accent-deep);color:var(--white)}
.faq-callnow{
  display:block;font-size:0.8rem;color:var(--accent-deep);font-weight:500;margin-top:0.5rem;
}
.faq-callnow:hover{text-decoration:underline}

/* Accordion */
.faq-list{display:flex;flex-direction:column;gap:0}
#faq details{border-bottom:1px solid var(--line)}
#faq details:first-of-type{border-top:1px solid var(--line)}
#faq summary{
  list-style:none;padding:1rem 0;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;
  font-size:0.92rem;font-weight:500;color:var(--ink);gap:1rem;
}
#faq summary::-webkit-details-marker{display:none}
#faq summary::after{
  content:'+';font-size:1.2rem;font-weight:300;color:var(--accent);
  flex-shrink:0;transition:transform .18s;
}
#faq details[open] summary::after{content:'−'}
#faq details div{
  padding:0 0 1rem;font-size:0.88rem;color:var(--ink-soft);line-height:1.65;
}

/* SEO prose expander */
.seo-expander{margin-top:2rem}
.seo-expander summary{
  cursor:pointer;list-style:none;font-size:0.78rem;font-weight:600;
  letter-spacing:0.08em;text-transform:uppercase;color:var(--accent-deep);
  display:inline-flex;align-items:center;gap:0.4rem;
  border-bottom:1px solid var(--accent);padding-bottom:1px;
}
.seo-expander summary::-webkit-details-marker{display:none}
.seo-expander .seo-body{
  margin-top:1rem;font-size:0.88rem;color:var(--ink-soft);line-height:1.7;
}

/* ================================================================
   CONTACT
   ================================================================ */
#contact{background:var(--surface)}
.contact-layout{display:grid;gap:3rem;align-items:start}
@media(min-width:768px){.contact-layout{grid-template-columns:1fr 1fr}}
.contact-info h2{margin-bottom:1.2rem}
.nap-block{font-size:0.88rem;color:var(--ink-soft);line-height:1.8;margin-bottom:1.5rem}
.nap-block strong{color:var(--ink)}
.nap-block a{color:var(--accent-deep)}
.map-wrap{width:100%;aspect-ratio:4/3;border:1px solid var(--line);margin-top:1.5rem;overflow:hidden}
.map-wrap iframe{width:100%;height:100%;border:0}

/* Form */
#contactForm{display:flex;flex-direction:column;gap:0.75rem}
.form-field{display:flex;flex-direction:column;gap:0.3rem}
.form-field label{
  font-size:0.72rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-soft);
}
.form-field input,.form-field select{
  width:100%;padding:0.7rem 0.9rem;border:1px solid var(--line);
  background:var(--white);color:var(--ink);font-size:0.9rem;
  outline:none;appearance:none;-webkit-appearance:none;border-radius:0;
  transition:border-color .15s;
}
.form-field input:focus,.form-field select:focus{border-color:var(--accent-deep)}
.form-submit{
  margin-top:0.5rem;padding:0.9rem 2rem;background:var(--accent);color:var(--ink);
  font-size:0.78rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;
  border:none;cursor:pointer;transition:background .18s;align-self:flex-start;
}
.form-submit:hover{background:var(--accent-deep);color:var(--white)}
#formOk{
  padding:1.5rem;background:var(--white);border:1px solid var(--line);
  font-size:0.92rem;color:var(--ink);line-height:1.6;
}
#formOk a{color:var(--accent-deep)}

/* ================================================================
   FOOTER
   ================================================================ */
footer{
  background:var(--ink);color:rgba(255,255,255,0.7);
  padding:3.5rem 2.5rem 2.5rem;font-size:0.8rem;line-height:1.7;
}
@media(min-width:768px){footer{padding:3.5rem 4rem 2.5rem}}
.foot-top{
  display:flex;flex-wrap:wrap;gap:2rem 4rem;align-items:flex-start;margin-bottom:2.5rem;
}
.foot-logo img{width:38px;opacity:.85}
.foot-clinic{
  font-family:'Cormorant Garamond',Georgia,serif;font-size:1rem;font-weight:500;
  color:rgba(255,255,255,0.85);margin-top:0.4rem;
}
.foot-links{display:flex;flex-wrap:wrap;gap:0.3rem 1.5rem}
.foot-links a{color:rgba(255,255,255,0.55);font-size:0.75rem}
.foot-links a:hover{color:rgba(255,255,255,0.85)}
.foot-disclaimer{
  font-size:0.72rem;color:rgba(255,255,255,0.45);
  border-top:1px solid rgba(255,255,255,0.1);padding-top:1.5rem;
  max-width:800px;line-height:1.7;
}
.foot-bottom{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:0.5rem;
  margin-top:1.5rem;font-size:0.72rem;color:rgba(255,255,255,0.4);
}
.foot-bottom a{color:rgba(255,255,255,0.4)}
.foot-bottom a:hover{color:rgba(255,255,255,0.7)}

/* ================================================================
   FADE-IN ANIMATION
   ================================================================ */
@media(prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(18px);transition:opacity .55s ease, transform .55s ease}
  .reveal.visible{opacity:1;transform:none}
}

/* ================================================================
   IMAGE WRAPPERS — .par wrappers (static; parallax removed)
   overflow:hidden + explicit aspect-ratio keeps images full-bleed
   with zero layout shift. No transforms, no scroll effects.
   ================================================================ */
.par{overflow:hidden}
.par img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
/* Treatment cards — the .tc-img wrapper */
.tc-img-par{
  aspect-ratio:3/2;
  width:100%;
}
/* Rufina portrait wrapper */
.rufina-portrait-par{
  width:100%;
  max-width:320px;
  aspect-ratio:4/5;
  display:block;
}
/* technology angle image wrapper — sits inline in tech-copy-grid */
.tech-img-par{
  width:100%;
  aspect-ratio:6/5;
  display:block;
}
/* img-break (full-bleed interlude images) */
.img-break-par{
  width:100%;
  aspect-ratio:21/6;
  display:block;
}
@media(max-width:600px){
  .img-break-par{aspect-ratio:16/7}
}
/* Shared: img inside any par wrapper fills its frame */
.tc-img-par img,
.rufina-portrait-par img,
.tech-img-par img,
.img-break-par img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* ================================================================
   UTILS
   ================================================================ */
.hairline{height:1px;background:var(--line);border:none}
.mt1{margin-top:1rem}.mt2{margin-top:2rem}.mt3{margin-top:3rem}
.text-soft{color:var(--ink-soft)}

/* ================================================================
   MOBILE FIXES — ≤ 1023px (does NOT affect desktop ≥ 1024px)
   ================================================================ */

/* ── FIX 1: Hero — true vertical center accounting for sticky nav (60px) ── */
@media(max-width:1023px){
  #hero{
    /* Use full viewport minus the nav; flex centers content */
    height:calc(100svh - 60px);
    min-height:480px;
    align-items:center;
    /* Push the hero box below the sticky nav */
    margin-top:0; /* topnav is sticky so hero starts naturally below it */
  }
  /* hero-content: symmetric vertical padding, generous horizontal */
  .hero-content{
    padding:2.5rem 1.5rem;
    max-width:100%;
    width:100%;
  }
  /* h1 slightly smaller on small phones */
  .hero-h1{
    font-size:clamp(2.2rem,10vw,3.5rem);
  }
  .hero-scrim{
    background:linear-gradient(
      105deg,
      rgba(250,247,248,0.93) 0%,
      rgba(243,236,238,0.76) 55%,
      rgba(243,236,238,0.32) 100%
    );
  }
}

/* ── FIX 2: Treatments carousel — gradient fade affordance on left & right edges ── */
/* Applied to ALL widths (shows on mobile; safe on desktop too) */
.treatment-track-wrap{
  position:relative; /* ensure pseudo-elements sit on top */
}
/* Wrapper needs to be a stacking context — done via position:relative above.
   The fades are siblings of the scrollable area so we use a dedicated
   wrapper element approach instead. We'll wrap it with a relative div via CSS. */

/* Use the section itself to host the overlays */
#treatments .carousel-fade-wrap{
  position:relative;
}
#treatments .carousel-fade-wrap::before,
#treatments .carousel-fade-wrap::after{
  content:'';
  position:absolute;
  top:0;bottom:0;
  width:3rem;
  pointer-events:none;
  z-index:2;
}
#treatments .carousel-fade-wrap::before{
  left:0;
  background:linear-gradient(to right, var(--paper) 0%, transparent 100%);
}
#treatments .carousel-fade-wrap::after{
  right:0;
  background:linear-gradient(to left, var(--paper) 0%, transparent 100%);
}
/* Hide fades at desktop grid breakpoint where there's no scrolling */
@media(min-width:1100px){
  #treatments .carousel-fade-wrap::before,
  #treatments .carousel-fade-wrap::after{
    display:none;
  }
}

/* ── FIX 3: Rufina — designed mobile layout ── */
@media(max-width:679px){
  #rufina .rufina-layout{
    grid-template-columns:1fr;
    gap:2rem;
  }
  /* Portrait column: centered, rounded, tasteful max-width */
  #rufina .rufina-layout > div:last-child{
    order:-1;
    display:flex;
    justify-content:center;
  }
  /* The par wrapper that wraps the portrait */
  .rufina-portrait-par{
    margin:0 auto;
    max-width:260px;
    width:100%;
    aspect-ratio:4/5;
    border-radius:3px;
    overflow:hidden;
  }
  /* Text column: centered for elegance on small screens */
  #rufina .rufina-layout > div:first-child{
    text-align:center;
  }
  .rufina-headline{
    font-size:1.3rem;
  }
  .rufina-badges{
    justify-content:center;
  }
  .rufina-bio{
    text-align:left; /* bio stays left-aligned for readability */
  }
  .link-arrow{
    display:inline-block;
  }
}

/* ── FIX 4: Testimonials — tighter on mobile, controls centered ── */
@media(max-width:859px){
  #results{
    padding-top:3.5rem;
    padding-bottom:0;
  }
  #results .eyebrow{
    padding-top:3.5rem!important;
    padding-bottom:0!important;
  }
  #results h2{
    padding-bottom:0!important;
  }
  .testi-wrap{
    margin-top:1.25rem;
  }
  .testi-card{
    width:270px;
    padding:1.1rem 1.1rem;
  }
  /* Controls row replaces the old dots-only approach */
  .testi-controls{
    padding-bottom:2.5rem;
  }
  .hide-mobile{
    display:none;
  }
}

/* ── FIX 6b: General mobile centering pass ~390px ── */
@media(max-width:479px){
  /* Section eyebrows and headings */
  .section > .eyebrow,
  .section > h2,
  #problem > .eyebrow,
  #problem > h2,
  #treatments > div > .eyebrow,
  #treatments > div > h2,
  #rufina > .eyebrow,
  #rufina > h2{
    text-align:center;
  }
  /* Stat tiles center their text */
  .stat-tile{
    text-align:center;
  }
  /* Carousel dots */
  .carousel-dots{
    justify-content:center;
    width:100%;
  }
  /* CTA buttons — full width on very small screens */
  .btn-primary,.btn-ghost{
    width:100%;text-align:center;justify-content:center;
  }
  /* Hero actions stack properly */
  .hero-actions{
    flex-direction:column;
    align-items:stretch;
  }
  /* Authority strip — wrap cleanly */
  .strip-inner{
    flex-direction:column;
    align-items:flex-start;
    gap:0.3rem;
  }
  /* Solution box */
  .solution-box{
    padding:1.5rem 1.2rem;
  }
  /* Contact form submit — full width */
  .form-submit{
    width:100%;
    align-self:stretch;
  }
}

/* ── FIX 5: FAQ — collapse two-column, no overlap, left col fully static ── */
@media(max-width:859px){
  .faq-layout{
    grid-template-columns:1fr; /* single column — stacked */
    gap:2rem;
  }
  .faq-left{
    position:static!important; /* CRITICAL: remove sticky — kills overlap bug */
    top:auto!important;
  }
}

/* ── FIX 6: Full mobile audit — no horizontal page scroll, spacing, tap targets ── */
@media(max-width:1023px){
  /* Prevent any section from bleeding horizontally */
  .section{
    padding:4rem 1.25rem;
    overflow-x:hidden;
  }
  #faq{
    padding:4rem 1.25rem;
    overflow-x:hidden;
  }
  #treatments{
    padding:4rem 0 4rem 0; /* carousel needs edge-to-edge */
    overflow-x:hidden;
  }
  #treatments > div{
    padding:0 1.25rem;
  }
  #treatments > div > .treatment-track-wrap{
    margin-left:-1.25rem;
    margin-right:-1.25rem;
    padding-left:1.25rem;
    padding-right:1.25rem;
  }
  #results{
    overflow-x:hidden;
  }
  .testi-wrap{
    margin-left:-1.25rem;
    margin-right:-1.25rem;
    padding-left:1.25rem;
    padding-right:1.25rem;
  }
  /* Authority strip — prevent ::before dots from wrapping weirdly */
  #strip{
    padding:0.75rem 1.25rem;
    overflow:hidden;
  }
  /* Technology section inner padding on mobile */
  #technology{
    padding:4rem 1.25rem;
  }
  /* Rufina section */
  #rufina.section{
    padding:4rem 1.25rem;
  }
  /* Contact section */
  #contact.section{
    padding:4rem 1.25rem;
  }
  /* Ensure all buttons / tap targets are ≥48px tall */
  .btn-primary,.btn-ghost,.faq-consult,.rail-cta,.mob-cta,.form-submit{
    min-height:48px;
    display:inline-flex;align-items:center;justify-content:center;
  }
  /* Footer tighten */
  footer{
    padding:3rem 1.25rem 2rem;
  }
  /* Stat grid — 2 col is already set; just ensure it fits */
  .stat-grid{
    margin-left:0;
    margin-right:0;
  }
  /* img-break — no height forcing page scroll */
  .img-break{
    max-width:100vw;
    width:100%;
  }
  /* Problem section */
  #problem.section{
    padding:4rem 1.25rem;
  }
}

/* ================================================================
   INNER-PAGE ADDITIONS — service / long-tail / about / blog / legal
   Same palette + type system; calm presentation. No video heroes.
   ================================================================ */

/* Breadcrumb */
.breadcrumb{font-size:0.72rem;letter-spacing:0.04em;color:var(--ink-soft);margin-bottom:1.2rem}
.breadcrumb a{color:var(--accent-deep)}
.breadcrumb a:hover{text-decoration:underline}
.breadcrumb .sep{margin:0 0.4rem;color:var(--accent)}

/* Inner page hero — calm, no video. Optional soft image. */
.page-hero{position:relative;padding:4rem 2.5rem 3.5rem;background:var(--surface);border-bottom:1px solid var(--line)}
@media(min-width:768px){.page-hero{padding:5rem 4rem 4.5rem}}
@media(min-width:1280px){.page-hero{padding:5.5rem 5rem 5rem}}
.page-hero .ph-inner{max-width:1120px;display:grid;gap:2.5rem;align-items:center}
@media(min-width:900px){.page-hero.has-media .ph-inner{grid-template-columns:1.05fr 0.95fr}}
.page-hero h1{color:var(--ink);font-style:italic;margin-bottom:1.2rem;max-width:15ch}
.page-hero .ph-sub{font-size:clamp(1.05rem,1.5vw,1.22rem);color:var(--ink);max-width:54ch;margin-bottom:1.8rem;line-height:1.6}
.page-hero .ph-cred{font-size:0.72rem;font-weight:500;letter-spacing:0.08em;color:var(--ink-soft);margin-bottom:2rem}
.ph-media{width:100%;aspect-ratio:4/3;overflow:hidden}
.ph-media img{width:100%;height:100%;object-fit:cover;display:block}

/* Closing CTA band */
.cta-band{background:var(--accent-deep);color:var(--white);padding:4.5rem 2.5rem;text-align:center}
.cta-band .eyebrow{color:rgba(255,255,255,0.7)}
.cta-band h2{color:var(--white);margin:0.6rem 0 1rem}
.cta-band p{color:rgba(255,255,255,0.85);max-width:48ch;margin:0 auto 2rem;font-size:0.95rem}
.cta-band .btn-primary{background:var(--white);color:var(--accent-deep)}
.cta-band .btn-primary:hover{background:var(--surface);color:var(--ink)}
.cta-band .cta-phone{display:inline-block;margin-top:1.2rem;color:rgba(255,255,255,0.9);font-size:0.88rem;letter-spacing:0.06em}

/* Rich text body — blog posts, legal, long prose */
.article-body{max-width:680px;font-size:1.1rem;line-height:1.75;color:var(--ink)}
.article-body > * + *{margin-top:1.3rem}
.article-body h2{margin-top:2.6rem;margin-bottom:0.2rem}
.article-body h3{margin-top:1.8rem;font-size:1.3rem;font-family:'Cormorant Garamond',Georgia,serif;font-weight:600}
.article-body ul,.article-body ol{padding-left:1.3rem}
.article-body li{margin-top:0.5rem}
.article-body li::marker{color:var(--accent-deep)}
.article-body a{color:var(--accent-deep);text-decoration:underline;text-underline-offset:2px}
.article-body strong{font-weight:600}
.article-body blockquote{border-left:3px solid var(--accent);padding:0.4rem 0 0.4rem 1.4rem;font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:1.35rem;color:var(--ink)}
.article-body figure img{width:100%;height:auto;border:1px solid var(--line)}
.article-body figcaption{font-size:0.8rem;color:var(--ink-soft);margin-top:0.5rem}

/* Blog index — post cards */
.post-grid{display:grid;gap:1.5rem;margin-top:2.5rem}
@media(min-width:760px){.post-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1200px){.post-grid{grid-template-columns:repeat(3,1fr)}}
.post-card{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);transition:border-color .18s,transform .18s}
.post-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.post-card .pc-img{aspect-ratio:3/2;overflow:hidden}
.post-card .pc-img img{width:100%;height:100%;object-fit:cover;display:block}
.post-card .pc-body{padding:1.5rem 1.4rem 1.7rem;display:flex;flex-direction:column;gap:0.5rem;flex:1}
.post-card .pc-cat{font-size:0.66rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent-deep);font-weight:600}
.post-card h3{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.4rem;font-weight:600;line-height:1.2;color:var(--ink)}
.post-card p{font-size:0.88rem;color:var(--ink-soft);line-height:1.55}
.post-card .pc-link{margin-top:auto;font-size:0.74rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--accent-deep)}

/* Feature grid (benefits) */
.feature-grid{display:grid;gap:1.5rem;margin-top:2.5rem}
@media(min-width:760px){.feature-grid{grid-template-columns:repeat(3,1fr)}}
.feature{padding:1.6rem 1.4rem;background:var(--white);border:1px solid var(--line);border-top:2px solid var(--accent)}
.feature h3{font-size:1rem;margin-bottom:0.4rem;letter-spacing:0.02em}
.feature p{font-size:0.88rem;color:var(--ink-soft);line-height:1.55}

/* ── Generic two-column text+media ── */
.split2{display:grid;gap:2.5rem;align-items:center}
@media(min-width:860px){.split2{grid-template-columns:1fr 1fr;gap:3.5rem}}
@media(min-width:860px){.split2.rev .s2-media{order:0}}
.split2.rev .s2-media{order:-1}
.media-frame{width:100%;aspect-ratio:4/3;overflow:hidden;border:1px solid var(--line)}
.media-frame img{width:100%;height:100%;object-fit:cover;display:block}

/* ── Mini inline stats (40yrs / ×3 / 1st) ── */
.mini-stats{display:flex;flex-wrap:wrap;gap:1.5rem 2.5rem;margin-top:2rem}
.mini-stats .ms-n{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.9rem;font-weight:500;color:var(--accent-deep);line-height:1}
.mini-stats .ms-l{font-size:0.74rem;letter-spacing:0.06em;color:var(--ink-soft);margin-top:0.3rem;max-width:15ch}

/* ── Journey steps (calm, static) ── */
.steps{display:grid;gap:1.2rem;margin-top:2.5rem}
@media(min-width:760px){.steps{grid-template-columns:repeat(4,1fr)}}
.step{padding:1.5rem 1.3rem;background:var(--white);border:1px solid var(--line);border-top:2px solid var(--accent)}
.step .st-n{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.6rem;color:var(--accent);line-height:1}
.step h4{font-size:0.95rem;margin:0.5rem 0 0.3rem;color:var(--ink);letter-spacing:0.02em}
.step p{font-size:0.85rem;color:var(--ink-soft);line-height:1.5}

/* ── Guide / ebook inline band ── */
.guide-band{background:var(--surface);border:1px solid var(--line);padding:2.5rem 2rem;max-width:760px}
.eform-row{display:flex;flex-wrap:wrap;gap:0.6rem;margin-top:1.2rem}
.eform-row input{flex:1;min-width:180px;padding:0.85rem 1rem;border:1px solid var(--line);background:var(--white);font-size:0.9rem;color:var(--ink)}
.eform-row .btn-primary{border:none;cursor:pointer}
.ehint{font-size:0.74rem;color:var(--ink-soft);margin-top:1rem;line-height:1.5;max-width:60ch}

/* ── Form success state ── */
.form-ok{padding:2rem 1.5rem;background:var(--white);border:1px solid var(--accent);text-align:center}
.form-ok .ok-ic{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--accent);color:var(--white);font-size:1.2rem;margin-bottom:0.8rem}
.form-ok h4{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.4rem;color:var(--ink);margin-bottom:0.4rem}
.form-ok p{font-size:0.9rem;color:var(--ink-soft)}

/* ================================================================
   CINEMATIC ACCENTS + DARK MODE — shared motion layer (soft blue)
   Mirrors the homepage accents so every inner page matches.
   All motion gated by prefers-reduced-motion / pointer:fine.
   ================================================================ */
:root{ --ease:cubic-bezier(.22,.61,.36,1); --on-accent:#2A2E32; }

.stat-val,.ms-n{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}

/* reveal image clip-wipe (opt-in via .reveal-clip) */
@media(prefers-reduced-motion:no-preference){
  .reveal-clip{clip-path:inset(0 100% 0 0);transition:clip-path 1s var(--ease),opacity .6s ease}
  .reveal-clip.visible{clip-path:inset(0 0 0 0)}
  /* light stagger for grids of cards */
  .feature-grid .feature:nth-child(2),.steps .step:nth-child(2),.post-grid .post-card:nth-child(2){transition-delay:.07s}
  .feature-grid .feature:nth-child(3),.steps .step:nth-child(3),.post-grid .post-card:nth-child(3){transition-delay:.14s}
  .steps .step:nth-child(4){transition-delay:.21s}
}

/* word-reveal headings */
.rv-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.rv-w > span{display:inline-block;transform:translateY(115%);transition:transform .8s var(--ease)}
.rv-on .rv-w > span{transform:none}

/* eyebrow accent line-draw */
.eyebrow,.hero-eyebrow{position:relative}
.eyebrow::before,.hero-eyebrow::before{content:'';display:inline-block;width:0;height:1px;background:var(--accent-deep);vertical-align:middle;transition:width .6s var(--ease),margin-right .6s var(--ease)}
.eyebrow.drawn::before,.hero-eyebrow.drawn::before{width:26px;margin-right:11px}
@media(max-width:479px){.eyebrow.drawn::before{width:18px;margin-right:8px}}
/* keep cta-band / breadcrumb eyebrows clean (no leading line on inverted/compact contexts) */
.cta-band .eyebrow::before,.breadcrumb .eyebrow::before{display:none}

/* living cards: sheen + accent edge */
.feature,.post-card,.step{position:relative;overflow:hidden}
@media(pointer:fine){
  .post-card .pc-img{position:relative}
  .post-card .pc-img::before{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.4) 50%,transparent 70%);transform:translateX(-130%);transition:transform .75s var(--ease)}
  .post-card:hover .pc-img::before{transform:translateX(130%)}
}

/* smart accordion open animation (FAQ + any details) */
@media(prefers-reduced-motion:no-preference){
  #faq details[open] div,details.qa[open] .qa-body{animation:faqOpen .35s var(--ease)}
}
@keyframes faqOpen{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* theme toggle (injected into rail-bottom + topnav by rk-system.js) */
.theme-toggle{background:none;border:1px solid var(--line);color:var(--ink-soft);width:38px;height:38px;border-radius:50%;cursor:pointer;font-size:.95rem;line-height:1;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;transition:color .18s,border-color .18s,background .18s}
.theme-toggle:hover{color:var(--accent-deep);border-color:var(--accent)}
.rail-bottom .theme-toggle{align-self:center}
#topnav .theme-toggle{margin-left:auto;margin-right:.6rem}

/* scroll progress */
#scrollProgress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--accent-deep);z-index:400;will-change:width}

/* sticky CTA (mobile only — rail holds the desktop CTA) */
.sticky-cta{position:fixed;right:1.1rem;bottom:1.1rem;z-index:350;background:var(--accent-deep);color:#fff;padding:.8rem 1.35rem;font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;border-radius:40px;box-shadow:0 8px 28px rgba(116,80,90,.32);opacity:0;transform:translateY(18px);pointer-events:none;transition:opacity .3s,transform .3s;text-align:center}
.sticky-cta.show{opacity:1;transform:none;pointer-events:auto}
@media(min-width:1024px){.sticky-cta{display:none}}

/* contact note textarea (shared) */
.form-field textarea{width:100%;padding:.7rem .9rem;border:1px solid var(--line);background:var(--white);color:var(--ink);font-size:.9rem;font-family:inherit;outline:none;border-radius:0;min-height:96px;resize:vertical;transition:border-color .15s;line-height:1.55}
.form-field textarea:focus{border-color:var(--accent-deep)}

/* dark Google map */
[data-theme="dark"] .map-wrap iframe,[data-theme="dark"] .sf-map iframe{filter:invert(.92) hue-rotate(180deg) brightness(.9) contrast(.95)}

/* ================================================================
   NEW SITE FOOTER — richer, balanced, dark in both themes
   Canonical <footer class="site-footer"> ... </footer> (see agents)
   ================================================================ */
.site-footer{background:#10151A;color:rgba(255,255,255,.62);padding:4rem 2.5rem 2.2rem;font-size:.85rem;line-height:1.7}
@media(min-width:768px){.site-footer{padding:4.5rem 4rem 2.4rem}}
@media(min-width:1280px){.site-footer{padding:5rem 5rem 2.6rem}}
.sf-grid{display:grid;gap:2.6rem;max-width:1180px}
@media(min-width:560px){.sf-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.sf-grid{grid-template-columns:1.6fr 1fr 1fr 1.1fr}}
.sf-brand .sf-logo img{width:42px;height:auto;opacity:.92}
.sf-brand .sf-name{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.35rem;font-weight:500;color:#fff;margin-top:.7rem;line-height:1.15}
.sf-brand .sf-tag{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-top:.4rem}
.sf-brand .sf-blurb{margin-top:1rem;max-width:34ch;color:rgba(255,255,255,.55);font-size:.84rem}
.sf-nap{margin-top:1.2rem;font-size:.82rem;color:rgba(255,255,255,.6);line-height:1.75}
.sf-nap a{color:var(--accent)}
.sf-nap a:hover{color:#fff}
.sf-col h4{font-size:.68rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:1rem}
.sf-links{display:flex;flex-direction:column;gap:.55rem}
.sf-links a{color:rgba(255,255,255,.72);font-size:.85rem;transition:color .16s}
.sf-links a:hover{color:#fff}
.sf-cta{display:inline-block;margin-top:.2rem;padding:.7rem 1.2rem;background:var(--accent);color:#13171A;font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;border-radius:2px;transition:background .18s}
.sf-cta:hover{background:#fff}
.sf-phone{display:block;margin-top:.9rem;color:var(--accent);font-size:.92rem;letter-spacing:.04em}
.sf-phone:hover{color:#fff}
.sf-disclaimer{max-width:980px;margin-top:3rem;padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.12);font-size:.72rem;color:rgba(255,255,255,.4);line-height:1.7}
.sf-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem 1.5rem;margin-top:1.4rem;font-size:.72rem;color:rgba(255,255,255,.4)}
.sf-bottom a{color:rgba(255,255,255,.55)}
.sf-bottom a:hover{color:#fff}
@media(max-width:1023px){.site-footer{padding:3.2rem 1.25rem 2rem}}

/* ================================================================
   DARK MODE — palette + component overrides (inner pages)
   ================================================================ */
[data-theme="dark"]{
  --paper:#13171A; --surface:#1A2024; --white:#1F262B;
  --ink:#E9EEF1; --ink-soft:#9DA8AF;
  --accent:#C2A1AB; --accent-deep:#D8BDC4; --line:#2C343B;
  --on-accent:#0E1417;
}
[data-theme="dark"] .rail-cta,
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .mob-cta,
[data-theme="dark"] .faq-consult,
[data-theme="dark"] .form-submit,
[data-theme="dark"] .sticky-cta{color:var(--on-accent)}
[data-theme="dark"] .stat-tile{background:rgba(31,38,43,.92)}
[data-theme="dark"] .tech-overlay{background:rgba(20,25,29,.84)}
[data-theme="dark"] .tech-bg{opacity:.16}
[data-theme="dark"] .hero-scrim{background:linear-gradient(105deg,rgba(13,17,20,.9) 0%,rgba(20,25,29,.6) 45%,rgba(20,25,29,.15) 80%,transparent 100%)}
/* cta-band becomes a calm dark surface band in dark mode */
[data-theme="dark"] .cta-band{background:var(--surface);color:var(--ink);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
[data-theme="dark"] .cta-band .eyebrow{color:var(--accent-deep)}
[data-theme="dark"] .cta-band h2{color:var(--ink)}
[data-theme="dark"] .cta-band p{color:var(--ink-soft)}
[data-theme="dark"] .cta-band .btn-primary{background:var(--accent);color:var(--on-accent)}
[data-theme="dark"] .cta-band .btn-primary:hover{background:var(--accent-deep)}
[data-theme="dark"] .cta-band .cta-phone{color:var(--ink-soft)}
/* treatment carousel edge-fades follow the dark paper */
[data-theme="dark"] #treatments .carousel-fade-wrap::before{background:linear-gradient(to right,var(--paper),transparent)}
[data-theme="dark"] #treatments .carousel-fade-wrap::after{background:linear-gradient(to left,var(--paper),transparent)}

/* dark-mode expanding wave (View Transitions API) */
@media(prefers-reduced-motion:no-preference){
  ::view-transition-old(root){animation:none}
  ::view-transition-new(root){animation:vtWave .5s var(--ease)}
  @keyframes vtWave{from{clip-path:circle(0% at var(--vx,50%) var(--vy,50%))}to{clip-path:circle(150% at var(--vx,50%) var(--vy,50%))}}
}

/* dark-mode: the dark monogram is invisible on dark surfaces — lighten it */
[data-theme="dark"] .rail-logo img,[data-theme="dark"] #topnav .nav-logo img{filter:invert(1) brightness(1.7)}

/* ================================================================
   ROUND 3 — editorial flow sections, ken-burns, video band, gallery
   Pink edition. Images fuse into sections via gradients (no boxes).
   ================================================================ */
:root{--paper-rgb:250,247,248;--surface-rgb:243,236,238}
[data-theme="dark"]{--paper-rgb:19,23,26;--surface-rgb:26,32,36}

/* --- FLOW: full-height image fused into the section --- */
.flow{position:relative;overflow:hidden;padding:7rem 2.5rem}
@media(min-width:768px){.flow{padding:8rem 4rem}}
@media(min-width:1280px){.flow{padding:9rem 5rem}}
.flow .flow-media{position:absolute;top:0;bottom:0;z-index:0;width:62%}
.flow.flow-right .flow-media{right:0}
.flow.flow-left .flow-media{left:0}
.flow .flow-media img,.flow .flow-media video{width:100%;height:100%;object-fit:cover;display:block}
.flow .flow-scrim{position:absolute;inset:0;z-index:1}
.flow.flow-right .flow-scrim{background:linear-gradient(90deg,rgba(var(--paper-rgb),1) 0%,rgba(var(--paper-rgb),1) 44%,rgba(var(--paper-rgb),.62) 66%,rgba(var(--paper-rgb),.06) 100%)}
.flow.flow-left .flow-scrim{background:linear-gradient(270deg,rgba(var(--paper-rgb),1) 0%,rgba(var(--paper-rgb),1) 44%,rgba(var(--paper-rgb),.62) 66%,rgba(var(--paper-rgb),.06) 100%)}
.flow.flow-surface.flow-right .flow-scrim{background:linear-gradient(90deg,rgba(var(--surface-rgb),1) 0%,rgba(var(--surface-rgb),1) 44%,rgba(var(--surface-rgb),.62) 66%,rgba(var(--surface-rgb),.06) 100%)}
.flow.flow-surface.flow-left .flow-scrim{background:linear-gradient(270deg,rgba(var(--surface-rgb),1) 0%,rgba(var(--surface-rgb),1) 44%,rgba(var(--surface-rgb),.62) 66%,rgba(var(--surface-rgb),.06) 100%)}
.flow.flow-surface{background:var(--surface)}
.flow .flow-content{position:relative;z-index:2;max-width:540px}
.flow.flow-left .flow-content{margin-left:auto}
@media(max-width:859px){
  .flow{padding:4.5rem 1.25rem}
  .flow .flow-media{width:100%;left:0;right:0}
  .flow .flow-scrim,
  .flow.flow-right .flow-scrim,.flow.flow-left .flow-scrim,
  .flow.flow-surface.flow-right .flow-scrim,.flow.flow-surface.flow-left .flow-scrim{background:rgba(var(--paper-rgb),.88)}
  .flow.flow-surface .flow-scrim{background:rgba(var(--surface-rgb),.9)!important}
  .flow .flow-content{max-width:100%}
}

/* --- slow ken-burns life on big imagery --- */
@media(prefers-reduced-motion:no-preference){
  .kb img,.img-break-par img,.flow .flow-media img{animation:rkKB 26s ease-in-out infinite alternate;transform-origin:center}
  @keyframes rkKB{from{transform:scale(1.02)}to{transform:scale(1.12)}}
}

/* --- VIDEO BAND: reuse the hero loop inside a section --- */
.video-band{position:relative;overflow:hidden;padding:7rem 2.5rem;color:var(--ink)}
@media(min-width:768px){.video-band{padding:8.5rem 4rem}}
.video-band video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.video-band .vb-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(105deg,rgba(var(--paper-rgb),.94) 0%,rgba(var(--paper-rgb),.72) 45%,rgba(var(--paper-rgb),.3) 100%)}
.video-band .vb-content{position:relative;z-index:2;max-width:560px}

/* --- RESULTS GALLERY placeholders (high-end, compliant) --- */
.gal-grid{display:grid;gap:1.4rem;margin-top:3rem}
@media(min-width:680px){.gal-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.gal-grid{grid-template-columns:repeat(3,1fr)}}
.gal-tile{position:relative;aspect-ratio:4/5;overflow:hidden;background:linear-gradient(160deg,var(--surface) 0%,var(--white) 55%,var(--surface) 100%);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;text-align:center;padding:2rem}
.gal-tile::before{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.5) 50%,transparent 65%);transform:translateX(-130%)}
@media(prefers-reduced-motion:no-preference){.gal-tile::before{animation:galSheen 5.5s ease-in-out infinite}}
@keyframes galSheen{0%,55%{transform:translateX(-130%)}85%,100%{transform:translateX(130%)}}
.gal-tile .gt-mono{font-family:'Cormorant Garamond',Georgia,serif;font-size:3.2rem;font-style:italic;color:var(--accent);line-height:1;opacity:.85}
.gal-tile .gt-label{margin-top:.9rem;font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-deep)}
.gal-tile .gt-desc{margin-top:.5rem;font-size:.86rem;color:var(--ink-soft);max-width:24ch;line-height:1.5}
.gal-tile.gt-photo{padding:0}
.gal-tile.gt-photo img{width:100%;height:100%;object-fit:cover}
.gal-note{margin-top:2rem;font-size:.8rem;color:var(--ink-soft);max-width:62ch;line-height:1.6}

/* --- bigger, airier minimal sections --- */
.lead-serif{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:clamp(1.35rem,2.2vw,1.8rem);line-height:1.45;color:var(--ink);max-width:34ch}

/* ================================================================
   ROUND 4 — uniform numerals, fused service heroes, portrait crops
   ================================================================ */
/* lining + tabular numerals everywhere numbers are displayed (Cormorant old-style fix) */
.stat-val,.ms-n,.point-num,.tf-n,.step .st-n,.testi-stars,.hero-cred,.ph-cred,.mini-stats,
h1,h2,h3{font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1,"tnum" 1}

/* Rufina portrait must never crop at the chin */
img[src*="RUFINA_PORTRAIT"]{object-position:top center!important}

/* Service-page hero: image fused full-height with gradient (kills the boxed look) */
@media(min-width:900px){
  .page-hero.has-media{position:relative;overflow:hidden;min-height:74svh;display:flex;align-items:center}
  .page-hero.has-media .ph-inner{grid-template-columns:1fr;max-width:none;width:100%}
  .page-hero.has-media .ph-inner > div:first-child{max-width:560px;position:relative;z-index:2}
  .page-hero.has-media .ph-media{position:absolute;top:0;bottom:0;right:0;width:56%;aspect-ratio:auto;z-index:0}
  .page-hero.has-media .ph-media::after{content:'';position:absolute;inset:0;
    background:linear-gradient(90deg,rgba(var(--surface-rgb),1) 0%,rgba(var(--surface-rgb),.6) 34%,rgba(var(--surface-rgb),.12) 66%,rgba(var(--surface-rgb),0) 100%)}
  @media(prefers-reduced-motion:no-preference){.page-hero.has-media .ph-media img{animation:rkKB 28s ease-in-out infinite alternate}}
}

/* ROUND 5 — buttery accordion open (Chrome 129+; degrades gracefully) */
html{interpolate-size:allow-keywords}
#faq details::details-content,.faq-list details::details-content{block-size:0;overflow:clip;transition:block-size .5s var(--ease),content-visibility .5s allow-discrete}
#faq details[open]::details-content,.faq-list details[open]::details-content{block-size:auto}

/* ROUND 6 — compact footer on mobile (2x2 grid, drop blurb) */
@media(max-width:559px){
  .site-footer{padding:2.4rem 1.25rem 1.6rem}
  .sf-grid{grid-template-columns:1fr 1fr;gap:1.5rem 1.1rem}
  .sf-brand .sf-blurb{display:none}
  .sf-nap{margin-top:.9rem}
  .sf-col h4{margin-bottom:.55rem}
  .sf-links{gap:.42rem}
  .sf-disclaimer{margin-top:1.8rem;padding-top:1.2rem;font-size:.7rem}
  .sf-bottom{margin-top:1.1rem}
}