/* NOTE: This is an external stylesheet (styles.css). Do not wrap in <style> tags. */
:root{
  --bg-main: #F7F2EA;
  --bg-section: #EFE7DC;
  --text: #141414;
  --muted: rgba(20,20,20,0.72);
  --accent: #9C6B4E;
 
  /* Surfaces + depth (subtle, premium) */
  --surface: rgba(255,255,255,0.62);
  --surface-strong: rgba(255,255,255,0.78);
  --stroke: rgba(20,20,20,0.08);
  --shadow-sm: 0 10px 24px rgba(0,0,0,0.06);
  --shadow-md: 0 18px 48px rgba(0,0,0,0.08);
  --highlight: rgba(255,255,255,0.55);

  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* ===== Global typography baseline (prevents “shrinking” perception) ===== */
html{ font-size: 16px; }

body{
  margin:0;
  background: var(--bg-main);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  overflow-x: hidden;
}

/* Global mobile containment — prevents horizontal scroll */
@media (max-width: 820px){
  html{ overflow-x: hidden; }
  .cta{ min-width: 0 !important; max-width: 100% !important; }
  img, video, iframe{ max-width: 100% !important; }
}

p, li{
  font-size: 16px;
  line-height: 1.7;
}

h1, h2, h3, h4{ line-height: 1.2; }

/* ========== HEADER / NAV ========== */
.site-header{
  background: rgba(247,242,234,0.92);
  backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 1px solid rgba(20,20,20,0.08);
}

.nav-inner{
  max-width: 900px;
  margin: 0 auto;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  position: relative; /* allows absolute dropdown/menu in mobile */
}

.brand{
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

/* Desktop lockup */
.brand-full{
  height: 48px;
  width: auto;
  object-fit: contain;
  display: block;
}

/* Mobile mark */
.brand-mark{
  display: none;
  height: 34px;
  width: 34px;
  object-fit: cover;
  border-radius: 10px;
}

/* Desktop links */
.nav-links{
  display: flex;
  gap: 18px;
  align-items: center;
}

.nav-links a{
  text-decoration: none;
  color: rgba(20,20,20,0.82);
  font-size: 14px;
  font-weight: 500;
}

.nav-links a:hover{
  color: rgba(20,20,20,1);
}

/* Hamburger (mobile) */
.nav-toggle{
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(20,20,20,0.10);
  background: rgba(255,255,255,0.55);
  padding: 0;
  flex-direction: column;     /* stacked bars */
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.nav-toggle span{
  display: block;
  width: 18px;
  height: 2px;
  background: rgba(20,20,20,0.85);
  border-radius: 2px;
}

/* Mobile behavior */
@media (max-width: 820px){
  .brand-full{ display: none; }
  .brand-mark{ display: block; }

  .nav-toggle{ display: inline-flex; }

  .nav-links{
    display: none;
    position: absolute;
    left: 18px;
    right: 18px;
    top: 64px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 16px;
    border-radius: 18px;
    background: rgba(255,255,255,0.75);
    border: 1px solid rgba(20,20,20,0.10);
    box-shadow: 0 22px 55px rgba(0,0,0,0.08);
    z-index: 1100;
  }

  .site-header.is-open .nav-links{
    display: flex;
  }
}

/* ========== NAV SUBMENU (DESKTOP + MOBILE) ========== */
.nav-group{
  position: relative;
}

/* Make Treatments look like the other nav links */
.nav-parent{
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  font: inherit;
  color: rgba(20,20,20,0.82);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.nav-parent:hover{
  color: rgba(20,20,20,1);
}

.chev{
  width: 8px;
  height: 8px;
  border-right: 2px solid rgba(20,20,20,0.55);
  border-bottom: 2px solid rgba(20,20,20,0.55);
  transform: rotate(45deg);
  margin-top: -2px;
}

/* Dropdown panel */
.nav-sub{
  display: none;
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  min-width: 240px;
  padding: 14px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(20,20,20,0.10);
  box-shadow: 0 22px 55px rgba(0,0,0,0.10);
  backdrop-filter: blur(10px);
  flex-direction: column;
  gap: 10px;
  z-index: 1200;
}

.nav-sub a{
  text-decoration: none;
  color: rgba(20,20,20,0.82);
  font-size: 13px;
  font-weight: 500;
}

.nav-sub a:hover{
  color: rgba(20,20,20,1);
}

/* Desktop: keep dropdown open reliably */
@media (min-width: 821px){
  .nav-group:hover .nav-sub{
    display: flex;
  }

  /* invisible bridge so cursor can travel to dropdown without it collapsing */
  .nav-group::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:100%;
    height: 14px;
  }
}

/* Mobile: submenu inline inside the open hamburger */
@media (max-width: 820px){
  .nav-group{
    width: 100%;
  }

  .nav-parent{
    width: 100%;
    justify-content: space-between;
    padding: 10px 6px;
  }

  .nav-sub{
    position: static;
    display: none;
    width: 100%;
    margin-top: 6px;
    padding: 12px 12px;
    border-radius: 14px;
    background: rgba(255,255,255,0.55);
    box-shadow: none;
    backdrop-filter: none;
  }

  /* OPEN STATE (requires JS to add .is-open to .nav-group) */
  .site-header.is-open .nav-group.is-open .nav-sub{
    display: flex;
  }

  .site-header.is-open .nav-group.is-open .chev{
    transform: rotate(225deg);
    margin-top: 2px;
  }
}

/* ========== HERO ========== */
.hero-wrap{ background: var(--bg-main); }

.hero-media{
  position: relative;
  width: 100%;
  height: 65vh;
  min-height: 420px;
  max-height: 620px;
  overflow: hidden;
}

.hero-media img{
  width:100%;
  height:100%;
  object-fit: cover;
  object-position: 52% 30%;
  display:block;
}

.hero-media::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:24%;
  background: linear-gradient(
    to bottom,
    rgba(247,242,234,0) 0%,
    rgba(247,242,234,0.9) 70%,
    rgba(247,242,234,1) 100%
  );
}

.hero-copy{
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 18px 40px;
  text-align: center;
}

.hero-copy h1{
  font-family: var(--serif);
  font-size: clamp(38px, 8vw, 58px);
  line-height: 1.02;
  margin: 0 0 10px;
}

.hero-copy h2{
  font-size: clamp(16px, 3.8vw, 20px);
  color: var(--muted);
  margin: 0 0 14px;
}

.hairline{
  width: 62px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  margin: 18px auto 14px;
}

/* Make hero paragraphs calmer but still strong */
.hero-copy p{
  font-weight: 500;
  color: var(--muted);
  margin: 0 0 22px;
}

.hero-risk {
  margin: 0 0 26px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: rgba(20,20,20,0.75);
}

.hero-effort {
  margin: 0 0 28px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(20,20,20,0.7);
}


.cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:16px 24px;
  min-width:260px;
  border-radius:12px;
  background:#141414;
  color:#fff;
  text-decoration:none;
  font-weight:600;
  box-shadow:0 14px 30px rgba(0,0,0,0.18);
  position: relative;
}

.cta::before{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:11px;
  background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0));
  pointer-events:none;
}

.cta::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:12px;
  box-shadow: inset 0 0 0 2px rgba(156,107,78,0.25);
}



/*@media (min-width: 980px){
  .hero-wrap{
    display:grid;
    grid-template-columns: 1.15fr 0.85fr;
    min-height: 90vh;
  }
  .hero-media{ min-height:90vh; }
  */
  
  @media (min-width: 980px){
  .hero-wrap{
    display:grid;
    grid-template-columns: 1.15fr 0.85fr;
    min-height: 78vh;
  }
  .hero-media{ min-height:78vh; }

  .hero-media img{ object-position: 50% 14%; }
  .hero-copy{
    padding: 64px;
    text-align:left;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  .hairline{ margin-left:0; }
  .cta{ align-self:flex-start; }
}

/* =========================
   SECTION 2: "What patients usually come in for"
   Option B = bridge section (card-like)
   ========================= */

.section-arrive{
  background: #f7f6f3;
  padding: clamp(48px, 6vw, 84px) 0;
}

.section-arrive .inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 clamp(18px, 3vw, 28px);
}

.section-arrive h3{
  margin: 0 0 14px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(28px, 3.2vw, 40px);
  letter-spacing: 0.2px;
}

.section-arrive h3::after{
  content: "";
  display: block;
  width: 64px;
  height: 1px;
  margin-top: 12px;
  background: rgba(0, 0, 0, 0.12);
}

.section-arrive .intro{
  margin: 0 0 22px;
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.7;
  opacity: 0.92;
  max-width: 70ch;
}

.arrive-grid{
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(16px, 2.4vw, 28px);
  align-items: start;
  margin-top: 10px;
}

.arrive-card,
.arrive-note{
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 18px;
  padding: clamp(16px, 2.2vw, 22px);
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
}

.arrive-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.arrive-list li{
  position: relative;
  padding-left: 22px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(15px, 1.4vw, 16px);
  line-height: 1.55;
}

.arrive-list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
}

.arrive-note p{
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(15px, 1.4vw, 16px);
  line-height: 1.75;
  opacity: 0.92;
}

@media (max-width: 820px){
  .arrive-grid{ grid-template-columns: 1fr; }
  .section-arrive .intro{ margin-bottom: 18px; }
}

/* ========== SECTION 3 ========== */
.section-selective{
  background: var(--bg-section);
  padding: 96px 18px 104px;
  position: relative;
}

.section-selective::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height: 10px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(156,107,78,0.35),
    transparent
  );
}

.section-selective .inner{
  max-width: 900px;
  margin: 0 auto;
}

.section-selective h3{
  font-family: var(--serif);
  font-size: clamp(32px, 5vw, 40px);
  margin-bottom: 28px;
  text-align: center;
}

.section-selective .intro{
  color: var(--muted);
  line-height: 1.65;
  margin: 0 auto 56px;
  max-width: 680px;
  text-align: center;
  font-size: 16px;
}

.filter-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 36px;
  margin-bottom: 56px;
}

.filter{
  background: rgba(255,255,255,0.55);
  border-radius: 18px;
  padding: 36px 32px 32px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.06);
}

.filter h4{
  font-size: 13px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin-bottom: 18px;
  color: var(--text);
}

.filter ul{ list-style:none; padding:0; margin:0; }

.filter li{
  color: var(--muted);
  margin-bottom: 12px;
  line-height: 1.55;
  font-size: 16px;
}

@media (min-width: 900px){
  .filter-grid{ grid-template-columns: 1fr 1fr; gap: 48px; }
  .section-selective h3,
  .section-selective .intro{ text-align: left; }
}

/* ========== SECTION 4: MANIFESTO ========== */
.manifesto{
  background: var(--bg-main);
  padding: 88px 18px 92px;
  position: relative;
}

.manifesto::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(20,20,20,0.14),
    transparent
  );
}

.manifesto .inner{
  max-width: 900px;
  margin: 0 auto;
}

.manifesto h3{
  font-family: var(--serif);
  font-size: clamp(30px, 4.6vw, 38px);
  margin: 0 0 26px;
  text-align: center;
}

.principles{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.principles span{
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.5);
  border: 1px solid rgba(20,20,20,0.08);
  color: var(--muted);
  font-size: 14px;
  box-shadow: 0 14px 30px rgba(0,0,0,0.045);
}

@media (min-width: 900px){
  .manifesto h3{ text-align:left; }
  .principles{ justify-content:flex-start; }
}

/* ========== SECTION 5: WHY MANY TREATMENTS DISAPPOINT ========== */
.section-disappoint{
  background: var(--bg-main);
  padding: 92px 18px 15px;
  position: relative;
}

.section-disappoint::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(20,20,20,0.14),
    transparent
  );
}

.section-disappoint .inner{
  max-width: 900px;
  margin: 0 auto;
}

.section-disappoint h3{
  font-family: var(--serif);
  font-size: clamp(32px, 5vw, 40px);
  margin: 0 0 28px;
  text-align: center;
}

.disappoint-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 34px;
}

.disappoint-copy p{
  color: var(--muted);
  line-height: 1.75;
  font-size: 16px;
  margin: 0 0 18px;
}

.lead-in{
  font-weight:600;
  color: var(--text);
  margin-top:22px;
}

.pillars{
  list-style:none;
  padding:0;
  margin:0 0 24px;
  display:grid;
  gap:12px;
}

.pillars li{
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(20,20,20,0.08);
  border-radius: 14px;
  padding: 14px 16px;
  color: var(--muted);
  box-shadow: 0 18px 40px rgba(0,0,0,0.05);
}

.closing{
  margin-top:18px;
  padding-top:18px;
  border-top:1px solid rgba(20,20,20,0.12);
}

.closing p{
  margin:0;
  font-weight:600;
}

.closing p + p{ margin-top:6px; }

/* image + caption (additive) */
.disappoint-figure{ margin:0; }

.disappoint-media{
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,0.45);
  border: 1px solid rgba(20,20,20,0.07);
  box-shadow: 0 22px 55px rgba(0,0,0,0.055);
}

.disappoint-media img{
  width: 100%;
  display: block;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 45%;
}

.disappoint-caption{
  margin-top: 10px;
  color: rgba(62,62,62,0.85);
  font-size: 13px;
  line-height: 1.4;
  text-align: left;
}

@media (min-width: 900px){
  .section-disappoint h3{ text-align:left; }
  .disappoint-grid{
    grid-template-columns: 0.85fr 1.15fr;
    gap:48px;
  }
}


/* ========== SECTION Image Face Band Close Up ========== */
.image-band {
  width: 100%;
  height: clamp(320px, 44vw, 480px); /* ↑ increased */
  overflow: hidden;
  margin: 15px 0;
}

.image-band img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%; /* eyes stay where you liked them */
}


/* ========== SECTION 6: OUR REGENERATIVE APPROACH (TEXT ONLY) ========== */
.section-approach{
  background: var(--bg-section);
  padding: 96px 18px 104px;
  position: relative;
}

.section-approach::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height: 10px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(156,107,78,0.28),
    transparent
  );
}

.section-approach .inner{
  max-width: 900px;
  margin: 0 auto;
}

.section-approach h3{
  font-family: var(--serif);
  font-size: clamp(32px, 5vw, 40px);
  margin: 0 0 18px;
  text-align: center;
}

.section-approach .intro{
  color: var(--muted);
  line-height: 1.7;
  margin: 0 auto 44px;
  max-width: 720px;
  text-align: center;
  font-size: 16px;
}

.approach-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.step{
  background: rgba(255,255,255,0.58);
  border: 1px solid rgba(20,20,20,0.07);
  border-radius: 18px;
  padding: 22px 22px 20px;
  box-shadow: 0 20px 48px rgba(0,0,0,0.055);
}

.step .kicker{
  font-size: 12px;
  letter-spacing: 0.75px;
  text-transform: uppercase;
  color: rgba(20,20,20,0.75);
  margin: 0 0 8px;
}

.step h4{
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

.step p{
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
  font-size: 16px;
}

.approach-note{
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid rgba(20,20,20,0.12);
  color: rgba(20,20,20,0.78);
  font-weight: 600;
  line-height: 1.55;
  text-align: center;
}

@media (min-width: 900px){
  .section-approach h3,
  .section-approach .intro{
    text-align:left;
    margin-left:0;
    margin-right:0;
  }

  .approach-grid{
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }

  .approach-note{
    text-align:left;
  }
}

/* ========== SECTION 7: TOOLS / LOGOS (LOGOS ONLY) ========== */
.section-tools{
  background: var(--bg-main);
  padding: 92px 18px 98px;
  position: relative;
}

.section-tools::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(20,20,20,0.14),
    transparent
  );
}

.section-tools .inner{
  max-width: 900px;
  margin: 0 auto;
}

.section-tools h3{
  font-family: var(--serif);
  font-size: clamp(32px, 5vw, 40px);
  margin: 0 0 18px;
  text-align: center;
}

.section-tools .intro{
  color: var(--muted);
  line-height: 1.7;
  margin: 0 auto 44px;
  max-width: 720px;
  text-align: center;
  font-size: 16px;
}

/* ========== LOGO CAROUSEL ========== */
.logo-carousel{
  overflow: hidden;
  border-radius: 18px;
  background: rgba(255,255,255,0.45);
  border: 1px solid rgba(20,20,20,0.07);
  box-shadow: 0 22px 55px rgba(0,0,0,0.05);
  padding: 26px 0;
}

.logo-track{
  display: flex;
  gap: 48px;
  align-items: center;
  width: max-content;
  animation: scroll-logos 36s linear infinite;
}

.logo-track img{
  height: 34px;
  width: auto;
  object-fit: contain;
  opacity: 0.9;
  filter: grayscale(100%);
  background: rgba(20,20,20,0.10);
  padding: 10px 14px;
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.05);
}

@keyframes scroll-logos{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (max-width: 600px){
  .logo-track{
    gap: 36px;
    animation-duration: 28s;
  }
  .logo-track img{
    height: 30px;
  }
}

.logo-note{
  margin: 16px 0 0;
  color: rgba(62,62,62,0.85);
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
}

@media (min-width: 900px){
  .section-tools h3,
  .section-tools .intro{
    text-align: left;
    margin-left: 0;
    margin-right: 0;
  }

  .logo-note{
    text-align: left;
  }
}

/* ========== SECTION 8: SECONDARY REGENERATIVE PROGRAMS ========== */
.section-secondary{
  background: var(--bg-section);
  padding: 96px 18px 104px;
  position: relative;
}

.section-secondary::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height: 10px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(156,107,78,0.28),
    transparent
  );
}

.section-secondary .inner{
  max-width: 900px;
  margin: 0 auto;
}

.section-secondary h3{
  font-family: var(--serif);
  font-size: clamp(32px, 5vw, 40px);
  margin: 0 0 18px;
  text-align: center;
}

.section-secondary .intro{
  color: var(--muted);
  line-height: 1.7;
  margin: 0 auto 34px;
  max-width: 720px;
  text-align: center;
  font-size: 16px;
}

/* Card container */
.secondary-card{
  background: rgba(255,255,255,0.58);
  border: 1px solid rgba(20,20,20,0.07);
  border-radius: 18px;
  padding: 26px 22px 22px;
  box-shadow: 0 20px 48px rgba(0,0,0,0.055);
  max-width: 720px;
  margin: 0 auto;
}

/* Subheading inside card */
.secondary-card h4{
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

/* Supporting copy */
.secondary-card p{
  margin: 0 0 14px;
  color: var(--muted);
  line-height: 1.65;
  font-size: 16px;
}

/* Small kicker label */
.secondary-card .kicker{
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: 0.75px;
  text-transform: uppercase;
  color: rgba(20,20,20,0.75);
}

/* List of secondary programs */
.secondary-list{
  margin: 0 0 18px;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.65;
  font-size: 16px;
}

/* Closing note */
.secondary-note{
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid rgba(20,20,20,0.12);
  color: rgba(20,20,20,0.78);
  font-weight: 600;
  line-height: 1.55;
  font-size: 16px;
}

/* Desktop alignment */
@media (min-width: 900px){
  .section-secondary h3,
  .section-secondary .intro{
    text-align: left;
    margin-left: 0;
    margin-right: 0;
  }

  .secondary-card{
    margin-left: 0;
  }
}


/* ========== SECTION 9: PRICING & EXPECTATIONS (PROGRAM SPLIT) ========== */
.section-investment{
  background: var(--bg-main);
  padding: 96px 18px 104px;
  position: relative;
}

.section-investment::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(20,20,20,0.14),
    transparent
  );
}

.section-investment .inner{
  max-width: 900px;
  margin: 0 auto;
}

.section-investment h3{
  font-family: var(--serif);
  font-size: clamp(32px, 5vw, 40px);
  margin: 0 0 18px;
  text-align: center;
}

.section-investment .intro{
  color: var(--muted);
  line-height: 1.7;
  margin: 0 auto 34px;
  max-width: 760px;
  text-align: center;
  font-size: 16px;
}

.investment-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.program-card{
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(20,20,20,0.07);
  border-radius: 18px;
  padding: 26px 24px 22px;
  box-shadow: 0 20px 48px rgba(0,0,0,0.055);
}

.program-head h4{
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

.program-head p{
  margin: 0 0 18px;
  color: var(--muted);
  line-height: 1.65;
  font-size: 16px;
}

.investment-list{
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}

.investment-list li{
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(20,20,20,0.10);
}

.investment-list li:last-child{
  border-bottom: none;
}

.investment-list .label{
  color: var(--muted);
  font-size: 16px;
}

.investment-list .value{
  color: var(--text);
  font-weight: 600;
  font-size: 16px;
  white-space: nowrap;
}

.protocol-note{
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid rgba(20,20,20,0.12);
  color: rgba(20,20,20,0.82);
  line-height: 1.6;
  font-size: 16px;
}

.protocol-note strong{ font-weight: 600; }

.investment-note{
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(20,20,20,0.12);
  color: rgba(20,20,20,0.78);
  font-weight: 600;
  line-height: 1.55;
  text-align: center;
  font-size: 16px;
}

@media (min-width: 900px){
  .section-investment h3,
  .section-investment .intro{
    text-align: left;
    margin-left: 0;
    margin-right: 0;
  }

  .investment-note{
    text-align: left;
  }
}

/* ========== SECTION 10: CONSULTATION CTA (WHATSAPP ONLY) ========== */
.section-consult{
  background: var(--bg-section);
  padding: 96px 18px 110px;
  position: relative;
}

.section-consult::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height: 10px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(156,107,78,0.28),
    transparent
  );
}

.section-consult .inner{
  max-width: 900px;
  margin: 0 auto;
}

.section-consult h3{
  font-family: var(--serif);
  font-size: clamp(32px, 5vw, 40px);
  margin: 0 0 18px;
  text-align: center;
}

.section-consult .intro{
  color: var(--muted);
  line-height: 1.7;
  margin: 0 auto 40px;
  max-width: 760px;
  text-align: center;
  font-size: 16px;
}

.consult-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.consult-list{
  margin: 0;
  padding: 22px 22px;
  list-style: none;
  background: rgba(255,255,255,0.58);
  border: 1px solid rgba(20,20,20,0.07);
  border-radius: 18px;
  box-shadow: 0 20px 48px rgba(0,0,0,0.055);
  display: grid;
  gap: 12px;
}

.consult-list li{
  color: var(--muted);
  line-height: 1.6;
  font-size: 16px;
  padding-left: 18px;
  position: relative;
}

.consult-list li::before{
  content:"";
  position:absolute;
  left:0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(156,107,78,0.85);
}

.consult-cta{
  background: rgba(255,255,255,0.58);
  border: 1px solid rgba(20,20,20,0.07);
  border-radius: 18px;
  padding: 26px 22px 22px;
  box-shadow: 0 20px 48px rgba(0,0,0,0.055);
}

.cta-title{
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

.cta-sub{
  margin: 0 0 18px;
  color: var(--muted);
  line-height: 1.65;
  font-size: 16px;
}

.cta-footnote{
  margin: 14px 0 0;
  color: rgba(62,62,62,0.8);
  font-size: 13px;
  line-height: 1.4;
}

@media (min-width: 900px){
  .section-consult h3,
  .section-consult .intro{
    text-align: left;
    margin-left: 0;
    margin-right: 0;
  }

  .consult-grid{
    grid-template-columns: 1.05fr 0.95fr;
    gap: 18px;
    align-items: start;
  }
}

/* ========== FOOTER ========== */
.site-footer{
  background: #F3EEE6;
  padding: 72px 18px 48px;
  border-top: 1px solid rgba(20,20,20,0.08);
}

.site-footer .inner{
  max-width: 900px;
  margin: 0 auto;
}

.footer-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  margin-bottom: 36px;
}

.footer-block{
  max-width: 320px;
}

.footer-title{
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(20,20,20,0.9);
}

.footer-text{
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(62,62,62,0.85);
}

.footer-note{
  margin: 0;
  font-size: 13px;
  color: rgba(62,62,62,0.7);
}

@media (min-width: 900px){
  .footer-grid{
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 48px;
  }
}

/* ========== STICKY WHATSAPP ========== */
.whatsapp-sticky{
  position: fixed;
  bottom: 22px;
  right: 22px;
  width: 56px;
  height: 56px;
  background:#141414;
  border-radius: 50%;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 10px 24px rgba(0,0,0,0.25);
  opacity:0;
  pointer-events:none;
  transform: translateY(10px);
  transition: .3s;
  z-index: 999;
}

.whatsapp-sticky.visible{
  opacity:1;
  pointer-events:auto;
  transform: translateY(0);
}

.whatsapp-sticky svg{
  width:22px;
  height:22px;
  fill:white;
}


/* ========== MICRO-INTERACTIONS (SUBTLE) ========== */
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior: auto !important; }
  .logo-track{ animation: none !important; }
}

@media (hover:hover){
  .arrive-card,
  .arrive-note,
  .filter,
  .step,
  .secondary-card,
  .program-card,
  .consult-list,
  .consult-cta{
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    will-change: transform;
  }
}


/* ========== UNIFIED SURFACES / DEPTH SYSTEM ========== */
.arrive-card,
.arrive-note,
.filter,
.step,
.secondary-card,
.program-card,
.consult-list,
.consult-cta,
.logo-carousel,
.disappoint-media{
  background: var(--surface);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow-sm);
}

@media (hover:hover){
  .arrive-card:hover,
  .arrive-note:hover,
  .filter:hover,
  .step:hover,
  .secondary-card:hover,
  .program-card:hover,
  .consult-cta:hover{
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: rgba(20,20,20,0.12);
  }
}


/* ========== SECTION LIGHTING (DEPTH WITHOUT CHEESE) ========== */
.section-arrive,
.section-selective,
.manifesto,
.section-disappoint,
.section-approach,
.section-tools,
.section-secondary,
.section-investment,
.section-consult{
  position: relative;
}

.section-arrive::after,
.section-selective::after,
.manifesto::after,
.section-disappoint::after,
.section-approach::after,
.section-tools::after,
.section-secondary::after,
.section-investment::after,
.section-consult::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(1100px 520px at 18% 0%, rgba(255,255,255,0.34), rgba(255,255,255,0) 62%),
    radial-gradient(900px 420px at 92% 20%, rgba(255,255,255,0.18), rgba(255,255,255,0) 58%);
  opacity: .95;
}

/* keep real content above overlays */
.section-arrive > .inner,
.section-selective > .inner,
.manifesto > .inner,
.section-disappoint > .inner,
.section-approach > .inner,
.section-tools > .inner,
.section-secondary > .inner,
.section-investment > .inner,
.section-consult > .inner{
  position: relative;
  z-index: 1;
}


@media (hover:hover){
  .cta{
    transition: transform .18s ease, box-shadow .18s ease;
    will-change: transform;
  }
  .cta:hover{
    transform: translateY(-1px);
    box-shadow: 0 20px 52px rgba(0,0,0,0.24);
  }
}


/* ========== TYPOGRAPHY POLISH ========== */
.section-arrive .intro,
.section-selective .intro,
.section-approach .intro,
.section-tools .intro,
.section-secondary .intro,
.section-investment .intro,
.section-consult .intro{
  max-width: 72ch;
}

.disappoint-caption,
.logo-note,
.cta-footnote,
.footer-note{ color: rgba(20,20,20,0.62); }

/* =========================================
   ADDITIONS: Hero kicker, Programs section, Investment accordion
   ========================================= */

/* Links (used in Programs section CTA) */
.text-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(20,20,20,0.82);
  text-decoration: none;
  border-bottom: 1px solid rgba(20,20,20,0.22);
  padding-bottom: 2px;
}
.text-link:hover{
  color: rgba(20,20,20,1);
  border-bottom-color: rgba(20,20,20,0.40);
}

/* HERO: kicker + dual CTA + meta line */
.hero-copy .hero-kicker{
  margin: 0 0 14px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(20,20,20,0.62);
  font-weight: 600;
}

/* Override the generic .hero-copy p spacing for kicker/meta */
.hero-copy .hero-kicker,
.hero-copy .hero-meta{
  color: rgba(20,20,20,0.62);
  margin: 0 0 14px;
}

.hero-copy .hero-meta{
  margin: 16px 0 0;
  font-size: 13px;
  font-weight: 500;
}

/* Dual CTA row */
.hero-actions{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

/* Make hero CTAs feel less “wide button” and more intentional */
.hero-actions .cta{
  min-width: 220px;
}

@media (max-width: 520px){
  .hero-actions .cta{
    width: 100%;
    min-width: 0;
  }
}

/* Secondary / ghost CTA */
.cta.cta-ghost{
  background: transparent;
  color: rgba(20,20,20,0.92);
  border: 1px solid rgba(20,20,20,0.18);
  box-shadow: none;
}

.cta.cta-ghost::before,
.cta.cta-ghost::after{
  display: none;
}

@media (hover:hover){
  .cta.cta-ghost{
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  .cta.cta-ghost:hover{
    transform: translateY(-1px);
    box-shadow: 0 16px 40px rgba(0,0,0,0.10);
    border-color: rgba(20,20,20,0.26);
  }
}

/* PROGRAMS SECTION */
.section-programs{
  background: var(--bg-main);
  padding: clamp(56px, 7vw, 92px) 0;
  position: relative;
}

.section-programs::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(20,20,20,0.14), transparent);
}

/* optional “lighting” overlay, to match other sections */
.section-programs::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(1100px 520px at 18% 0%, rgba(255,255,255,0.34), rgba(255,255,255,0) 62%),
    radial-gradient(900px 420px at 92% 20%, rgba(255,255,255,0.18), rgba(255,255,255,0) 58%);
  opacity: .95;
}

.section-programs .inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 clamp(18px, 3vw, 28px);
  position: relative;
  z-index: 1;
}

.section-programs h3{
  margin: 0 0 14px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(28px, 3.2vw, 40px);
  letter-spacing: 0.2px;
}

.section-programs .intro{
  margin: 0 0 22px;
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.7;
  opacity: 0.92;
  max-width: 70ch;
}

.programs-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 18px;
}

@media (min-width: 820px){
  .programs-grid{ grid-template-columns: 1fr 1fr; gap: 16px; }
}

@media (min-width: 1100px){
  .programs-grid{ grid-template-columns: 1fr 1fr 1fr; }
}

.program-tile{
  text-decoration: none;
  color: inherit;
  border-radius: 18px;
  padding: 22px 22px 20px;
  background: var(--surface);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}

.program-kicker{
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(20,20,20,0.62);
  font-weight: 600;
}

.program-tile h4{
  margin: 0 0 10px;
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.1;
}

.program-desc{
  margin: 0 0 16px;
  color: var(--muted);
  line-height: 1.65;
  font-size: 16px;
}

.program-link{
  margin: 0;
  font-weight: 600;
  color: rgba(20,20,20,0.88);
  font-size: 14px;
}

@media (hover:hover){
  .program-tile{
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    will-change: transform;
  }
  .program-tile:hover{
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: rgba(20,20,20,0.12);
  }
}

.programs-cta{
  margin-top: 22px;
}

/* INVESTMENT: accordion behavior (keeps your content, reduces scroll fatigue) */
.program-card.program-accordion{
  padding: 0;           /* override the card padding */
  overflow: hidden;     /* keeps rounded corners on open */
}

.program-summary{
  list-style: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  cursor: pointer;
}

.program-summary::-webkit-details-marker{
  display: none;
}

.program-summary-text{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.program-summary-title{
  font-weight: 600;
  color: rgba(20,20,20,0.92);
  font-size: 16px;
}

.program-summary-sub{
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

/* Plus / minus icon */
.program-summary-icon{
  width: 18px;
  height: 18px;
  position: relative;
  margin-top: 2px;
  flex: 0 0 auto;
}

.program-summary-icon::before,
.program-summary-icon::after{
  content:"";
  position:absolute;
  left: 2px;
  right: 2px;
  top: 50%;
  height: 2px;
  background: rgba(20,20,20,0.55);
  border-radius: 2px;
  transform: translateY(-50%);
}

.program-summary-icon::after{
  transform: translateY(-50%) rotate(90deg);
}

.program-card[open] .program-summary-icon::after{
  opacity: 0; /* becomes a minus */
}

.program-card[open] .program-summary{
  border-bottom: 1px solid rgba(20,20,20,0.10);
  background: rgba(255,255,255,0.68);
}

.program-body{
  padding: 0 20px 20px;
}

/* Hover / focus cues (premium + clear clickability) */
@media (hover:hover){
  .program-summary{
    transition: background .18s ease;
  }
  .program-summary:hover{
    background: rgba(255,255,255,0.62);
  }
}

.program-summary:focus-visible{
  outline: 2px solid rgba(156,107,78,0.45);
  outline-offset: 2px;
  border-radius: 14px;
}

@media (max-width: 520px){
  .program-summary{
    flex-direction: column;
    align-items: flex-start;
  }
  .program-summary-icon{
    margin-top: 10px;
  }
}

html { scroll-behavior: smooth; }
#investment { scroll-margin-top: 90px; }



/* ===== Icons for "works best for" vs "less suitable if" lists ===== */
.filter.filter--good ul,
.filter.filter--bad ul{
  list-style: none;
  margin: 0;
  padding: 0;
}

.filter.filter--good li,
.filter.filter--bad li{
  position: relative;
  padding-left: 34px; /* room for icon */
}

.filter.filter--good li::before,
.filter.filter--bad li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  border: 1px solid rgba(20,20,20,0.10);
  background: rgba(255,255,255,0.55);
}

/* Positive list: check */
.filter.filter--good li::before{
  content: "✓";
  color: rgba(156,107,78,0.95);
  background: rgba(156,107,78,0.12);
  border-color: rgba(156,107,78,0.22);
}

/* Less suitable list: minus */
.filter.filter--bad li::before{
  content: "–";
  color: rgba(20,20,20,0.65);
  background: rgba(20,20,20,0.04);
  border-color: rgba(20,20,20,0.10);
}



/* ===== Checkmarks for "Our philosophy is different" list ===== */
/* Ensures the icon is vertically centered inside each pill row */
.pillars li{
  position: relative;
  padding-left: 44px;            /* room for icon */
  display: flex;
  align-items: center;           /* center text vertically */
}

.pillars li::before{
  content: "✓";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  color: rgba(156,107,78,0.95);
  background: rgba(156,107,78,0.12);
  border: 1px solid rgba(156,107,78,0.22);
}



/* ===== Layout polish: equal-height paired cards + remove hero image fade ===== */

/* Remove hero fade overlay */
.hero-media::after{
  content: none !important;
}

/* Make the two cards in "What patients usually come in for" equal height */
.arrive-grid{
  align-items: stretch;
}
.arrive-card,
.arrive-note{
  height: 100%;
}

/* Make the two boxes in "Begin with a consultation" equal height */
.consult-grid{
  align-items: stretch;
}
.consult-list,
.consult-cta{
  height: 100%;
}



/* =========================================================
   BOX PERIMETER ACCENTS (Sage) — no internal color changes
   ========================================================= */
:root{
  --sage-soft: #A2B1A2;
  --sage-strong: #7E928A;
}

/* Subtle perimeter accent for key cards/boxes */
.arrive-card,
.arrive-note,
.filter,
.step,
.secondary-card,
.program-card,
.consult-list,
.consult-cta,
.logo-carousel,
.disappoint-media{
  border-color: rgba(126,146,138,0.28) !important;   /* sage border */
}

/* Add a thin top accent line (looks "designed" but quiet) */
.arrive-card,
.arrive-note,
.filter,
.step,
.secondary-card,
.program-card,
.consult-list,
.consult-cta,
.logo-carousel{
  position: relative;
}

.arrive-card::before,
.arrive-note::before,
.filter::before,
.step::before,
.secondary-card::before,
.program-card::before,
.consult-list::before,
.consult-cta::before,
.logo-carousel::before{
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  top:0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(126,146,138,0.55), transparent);
  opacity: .9;
  pointer-events:none;
}

/* Hover: slightly stronger border only (keeps your surfaces unchanged) */
@media (hover:hover){
  .arrive-card:hover,
  .arrive-note:hover,
  .filter:hover,
  .step:hover,
  .secondary-card:hover,
  .program-card:hover,
  .consult-cta:hover{
    border-color: rgba(126,146,138,0.44) !important;
  }
}

/* CTA inner stroke: swap bronze accent for sage */
.cta::after{
  box-shadow: inset 0 0 0 2px rgba(126,146,138,0.28) !important;
}

/* Text-link underline accent */
.text-link{
  border-bottom-color: rgba(126,146,138,0.45) !important;
}
.text-link:hover{
  border-bottom-color: rgba(126,146,138,0.75) !important;
}

/* Accordion focus ring */
.program-summary:focus-visible{
  outline-color: rgba(126,146,138,0.55) !important;
}

.section-programs{
  background: #A2B1A2;
}

.section-programs h3,
.section-programs .intro,
.section-programs .program-tile,
.section-programs .program-tile h4,
.section-programs .program-desc,
.section-programs .program-link{
  color: #141414;
}


/* Manifesto section — sage background */
.manifesto{
  background: #7E928A;
}

/* Text contrast fix for manifesto on sage */
.manifesto h3{
  color: #141414;
}

.manifesto .principles span{
  color: #141414;
  background: rgba(255,255,255,0.75);
  border-color: rgba(0,0,0,0.12);
}


/* Begin with a consultation — sage background */
.section-consult{
  background: linear-gradient(
    180deg,
    #8FA79E 0%,
    #7E928A 100%
  );
}

/* Text contrast on sage background */
.section-consult h3,
.section-consult .intro,
.section-consult .cta-title,
.section-consult .cta-sub{
  color: #141414;
}

/* Cards inside the consultation section */
.section-consult .consult-list,
.section-consult .consult-cta{
  background: rgba(255,255,255,0.78);
  border-color: rgba(0,0,0,0.14);
}

/* List text */
.section-consult .consult-list li{
  color: #141414;
}

/* Button polish on sage */
.section-consult .cta{
  background: #141414;
  color: #ffffff;
}

/* Mobile: center ONLY in-page CTAs on index page */
@media (max-width: 820px){

  /* Hero WhatsApp CTA */
  .hero-actions .cta.whatsapp-cta,

  /* Footer consultation WhatsApp CTA */
  .section-consult .cta.whatsapp-cta{
    display: flex !important;
    width: fit-content !important;
    max-width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;

    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
  }

}

/* INDEX PAGE — Mobile: reset section text to left */
@media (max-width: 820px){

  .section-selective h3,
  .section-selective .intro,

  .section-approach h3,
  .section-approach .intro,

  .section-tools h3,
  .section-tools .intro,

  .section-secondary h3,
  .section-secondary .intro,

  .section-investment h3,
  .section-investment .intro,

  .section-consult h3,
  .section-consult .intro,

  .manifesto h3{
    text-align: left;
  }

}


/* Index hero – mobile: reduce width of secondary (ghost) CTA only */
@media (max-width: 520px){
  .hero-actions .cta-ghost{
    width: fit-content;
    padding-left: 20px;
    padding-right: 20px;
    margin-left: auto;
    margin-right: auto;
  }
}


/* RTL (Hebrew) — MOBILE fixes for sections that still look LTR */
@media (max-width: 820px){

  /* Headings + intro copy (the sections you listed) */
  html[dir="rtl"] .section-selective h3,
  html[dir="rtl"] .section-selective .intro,
  html[dir="rtl"] .section-approach h3,
  html[dir="rtl"] .section-approach .intro,
  html[dir="rtl"] .section-tools h3,
  html[dir="rtl"] .section-tools .intro,
  html[dir="rtl"] .section-secondary h3,
  html[dir="rtl"] .section-secondary .intro,
  html[dir="rtl"] .section-investment h3,
  html[dir="rtl"] .section-investment .intro{
    text-align: right;
  }

  /* Filter lists (גישה שקולה… section) */
  html[dir="rtl"] .filter.filter--good li,
  html[dir="rtl"] .filter.filter--bad li{
    padding-left: 0;
    padding-right: 34px;
  }
  html[dir="rtl"] .filter.filter--good li::before,
  html[dir="rtl"] .filter.filter--bad li::before{
    left: auto;
    right: 0;
  }

  /* “Our philosophy is different” pillars */
  html[dir="rtl"] .pillars li{
    padding-left: 16px;
    padding-right: 44px;
  }
  html[dir="rtl"] .pillars li::before{
    left: auto;
    right: 14px;
  }

  /* Consultation list bullets (Begin with a consultation block on index) */
  html[dir="rtl"] .consult-list li{
    padding-left: 0;
    padding-right: 18px;
  }
  html[dir="rtl"] .consult-list li::before{
    left: auto;
    right: 0;
  }

  /* Investment rows: label right, value left */
  html[dir="rtl"] .investment-list li{
    flex-direction: row-reverse;
  }

  /* Footer text alignment (optional but usually needed) */
  html[dir="rtl"] .footer-title,
  html[dir="rtl"] .footer-text,
  html[dir="rtl"] .footer-note{
    text-align: right;
  }
}

@media (max-width: 820px){

  /* למה טיפולים אסתטיים רבים */
  html[dir="rtl"] .section-disappoint h3{
    text-align: right;
  }

  /* מתחילים בייעוץ */
  html[dir="rtl"] .section-consult h3,
  html[dir="rtl"] .section-consult .intro{
    text-align: right;
  }

}

@media (max-width: 820px){

  /* Center ONLY CTA buttons + make both hero CTAs identical size */
  html[dir="rtl"] .hero-actions a.cta{
    display: flex;
    justify-content: center;
    align-items: center;

    width: 260px;            /* forces same width */
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;

    padding: 16px 24px;      /* forces same height feel */
    box-sizing: border-box;  /* border doesn't change size */
    text-align: center;
  }

  /* Center all other CTAs sitewide (Hebrew mobile), without touching the floating button */
  html[dir="rtl"] a.cta:not(.whatsapp-sticky){
    display: flex;
    justify-content: center;
    align-items: center;

    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;

    text-align: center;
  }
}
@media (max-width: 820px){
  html[dir="rtl"] .manifesto h3,
  html[dir="rtl"] .manifesto .principles{
    text-align: right;
  }
}

@media (max-width: 820px){
  html[dir="rtl"] .nav-inner{
    flex-direction: row-reverse;
  }
}

@media (max-width: 820px){
  html[lang="fr"] a.cta:not(.whatsapp-sticky){
    display: flex;
    justify-content: center;
    align-items: center;

    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;

    text-align: center;
  }
}





/* =====================================================================
   Knowledge-center mobile layout fix (2026-05-14, refined 2026-05-15)
   1. Prevents grid columns from expanding past viewport
   2. Makes comparison tables horizontally scrollable within their wrapper
      (rather than pushing the whole page wide or breaking words awkwardly)
   3. Preserves word-boundary breaking inside cells (no more "Locatio n")
   4. Adds a gradient on the trailing edge as a visual scroll hint
   ===================================================================== */
@media (max-width: 820px){
  /* 1. Grid items can shrink below their intrinsic content width */
  .kb-article, .kb-aside,
  .sub-article,
  .pillar-article, .pillar-aside{
    min-width: 0 !important;
  }
  .kb-inner, .sub-inner, .pillar-inner{
    min-width: 0;
  }

  /* 2. Table wrappers — scrollable, with edge-fade scroll hint.
     mask-image is applied to the WRAPPER (not the scrolled content), so the
     fade stays anchored to the visible viewport edges regardless of scroll
     position. Bilateral fade (both sides) means it works for LTR and RTL
     without separate rules and looks natural when content is at either end. */
  .kb-table-wrap,
  .sub-table-wrap,
  .pill-table-wrap,
  .pillar-table-wrap{
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    -webkit-mask-image: linear-gradient(to right,
      transparent 0,
      black 24px,
      black calc(100% - 24px),
      transparent 100%);
    mask-image: linear-gradient(to right,
      transparent 0,
      black 24px,
      black calc(100% - 24px),
      transparent 100%);
  }

  /* 3. Tables: min-width keeps comparison structure readable; horizontal scroll if needed */
  .kb-table,
  .sub-table,
  .pill-table,
  .pillar-table{
    min-width: 480px !important;
    width: auto;
    font-size: 14px !important;
  }
  .kb-table th, .kb-table td,
  .sub-table th, .sub-table td,
  .pill-table th, .pill-table td,
  .pillar-table th, .pillar-table td{
    padding: 10px 12px !important;
    /* Word-boundary breaking only — no more "Locatio n" splits */
    word-break: normal !important;
    overflow-wrap: break-word;
    hyphens: auto;
    white-space: normal;
  }

  /* Other wide block-level content: clamp to viewport */
  .kb-article img, .sub-article img, .pillar-article img,
  .kb-figure, .sub-figure, .pillar-figure{
    max-width: 100% !important;
    height: auto;
  }
}