/*
Theme Name: NTC London
Theme URI: https://thenutritionaltherapycliniclondon.co.uk
Description: Classic WordPress theme for The Nutritional Therapy Clinic London. Root-cause nutrition, Harley Street Medical Area.
Version: 2.9.34
Author: 8020Brain
Author URI: https://8020brain.com
Text Domain: ntc-london
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

:root {
  --navy:              #5A8270;
  --navy-light:        #78A08E;
  --teal:              #A8C8B6;
  --green-cta:         #5A8270;
  --green-cta-hover:   #3A6254;
  --cta-color:         #3E6E58;
  --cta-hover:         #2A5240;
  --cta-text:          #ffffff;
  --font-heading:      'Playfair Display', Georgia, serif;
  --font-body:         'Inter', -apple-system, sans-serif;
  --gold:              #8AAE96;
  --gold-light:        #D8EAE0;
  --cream:             #D6E8DC;
  --white:             #E8F3EB;
  --text:              #1A3228;
  --text-mid:          #3A5444;
  --text-light:        #5A7060;
  --border:            #ACCBBА;
  --red-soft:          #FDE8E8;
  --red:               #C0392B;
  /* Scheme-specific derived values */
  --nav-bg:            rgba(255, 255, 255, 0.97);
  --nav-text:          #1A3228;
  --primary-dark:      #3A6254;
  --primary-mid:       #5A8270;
  --overlay-heavy:     rgba(18, 42, 30, 0.88);
  --overlay-mid:       rgba(30, 58, 42, 0.72);
  --overlay-light:     rgba(18, 42, 30, 0.40);
  --photo-overlay:     rgba(18, 42, 30, 0.90);
  --footer-bg:         #B8D0C0;
  --cta-section-start: #0A1C12;
  --quote-gradient:    linear-gradient(135deg, #3A6254, #5A8270);
  --mobile-nav-bg:     rgba(18, 42, 30, 0.98);
  --dropdown-bg:       #D0E8D8;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  overflow-x: clip;        /* clip (not hidden): contains the off-screen mobile nav drawer
                              without creating a scroll container — stops iOS sideways rubber-band.
                              In-viewport fixed elements (WhatsApp, mobile CTA bar) are unaffected. */
  max-width: 100%;
}

body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--white);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  /* overflow-x: hidden removed — it clips position:fixed on iOS Safari */
  max-width: 100%;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

.container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ─── NAV ─── */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--nav-bg);
  /* No backdrop-filter here: it would create a containing block for the position:fixed
     mobile nav drawer, making the drawer behave like absolute. That inflated the page
     width to 2x on mobile (breaking left:50% centring of the floating CTA) and collapsed
     the drawer height. The nav background is already ~97% opaque, so the blur was barely
     visible anyway. */
  border-bottom: 1px solid var(--border);
  padding: 0;
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  max-width: 1140px;
  margin: 0 auto;
}
.nav-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.nav-logo img,
.custom-logo {
  height: var(--logo-height, 60px);
  width: auto;
  display: block;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.12));
}

/* WordPress custom logo link wrapper */
.custom-logo-link {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}
.nav-logo span { display: block; font-size: 11px; font-weight: 300; opacity: 0.7; letter-spacing: 1px; text-transform: uppercase; margin-top: 1px; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
}
.nav-links a {
  color: var(--nav-text);
  font-size: 14px;
  font-weight: 400;
  transition: color 0.2s;
}
.nav-links a:hover { color: var(--navy); }
/* Only apply button style to the <a> tag, not the <li> */
a.nav-cta,
.nav-links li > a.nav-cta {
  background: var(--accent);
  color: var(--accent-text) !important;
  padding: 10px 22px;
  border-radius: 50px;
  font-weight: 700 !important;
  font-size: 14px !important;
  transition: all 0.2s !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.2);
}
a.nav-cta:hover,
.nav-links li > a.nav-cta:hover { background: var(--accent-hover) !important; color: var(--accent-text) !important; }

/* Strip any inherited background from the <li> itself */
.nav-links li.nav-cta { background: none; padding: 0; border-radius: 0; box-shadow: none; }

a.nav-phone,
.nav-links li > a.nav-phone {
  color: var(--nav-text) !important;
  opacity: 0.65;
  font-size: 13px !important;
}

/* ─── DROPDOWN MENUS ─── */
.nav-links li { position: relative; }

/* Standard dropdown */
.nav-links .sub-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: var(--dropdown-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  min-width: 220px;
  padding: 8px 0;
  list-style: none;
  box-shadow: 0 16px 48px rgba(0,0,0,0.3);
  z-index: 200;
}
.nav-links li:hover > .sub-menu { display: block; }
.nav-links .sub-menu li { padding: 0; }
.nav-links .sub-menu a {
  display: block;
  padding: 10px 20px;
  font-size: 14px;
  color: var(--nav-text) !important;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.nav-links .sub-menu a:hover { background: var(--cream); color: var(--navy) !important; }

/* Mega menu — add class "mega-menu" to the parent <li> via WP menu CSS Classes field */
.nav-links li.mega-menu { position: static; }
.nav-links li.mega-menu > .sub-menu {
  left: 0;
  right: 0;
  width: 100%;
  display: none;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding: 24px;
  border-radius: 0 0 12px 12px;
  top: 100%;
}
.nav-links li.mega-menu:hover > .sub-menu { display: grid; }
.nav-links li.mega-menu .sub-menu a { white-space: normal; padding: 8px 12px; border-radius: 6px; }

/* Dropdown arrow indicator */
.nav-links li:has(> .sub-menu) > a::after {
  content: ' ▾';
  font-size: 10px;
  opacity: 0.6;
}

/* ─── HERO ─── */
.hero {
  position: relative;
  background-image: url('images/hero-bg.jpg');
  background-size: cover;
  background-position: center 30%;
  color: white;
  overflow: hidden;
  min-height: 640px;
  display: flex;
  align-items: center;
}
/* Overlay: soft dark sage gradient for readability */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    var(--overlay-heavy) 0%,
    var(--overlay-mid) 55%,
    var(--overlay-light) 100%
  );
  z-index: 1;
}
.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 100px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero-content > * { max-width: 620px; }
.hero-image { display: none !important; }
.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 100px;
  padding: 6px 16px 6px 8px;
  font-size: 13px;
  margin-bottom: 28px;
  backdrop-filter: blur(4px);
}
.hero-pill .dot {
  width: 8px; height: 8px;
  background: #4ADE80;
  border-radius: 50%;
  flex-shrink: 0;
}
.hero h1 {
  font-family: var(--font-heading);
  font-size: clamp(36px, 5vw, 58px);
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 22px;
  letter-spacing: -0.5px;
}
.hero h1 em {
  font-style: italic;
  color: #93C5FD;
}
.hero-sub {
  font-size: 18px;
  line-height: 1.65;
  color: rgba(255,255,255,0.85);
  margin-bottom: 36px;
  max-width: 560px;
  font-weight: 300;
}
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 40px;
}
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent);
  color: white;
  padding: 18px 36px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.2px;
  transition: all 0.2s;
  border: none;
  box-shadow: 0 4px 20px rgba(0,0,0,0.18), 0 0 0 0 var(--cta-color);
  text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.btn-primary:hover {
  background: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.25), 0 0 0 4px rgba(255,255,255,0.15);
}
.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: white;
  padding: 16px 28px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 15px;
  border: 2px solid rgba(255,255,255,0.35);
  transition: all 0.2s;
}
.btn-secondary:hover { border-color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.07); }

.hero-social-proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
}
.hero-stars {
  display: flex;
  align-items: center;
  gap: 8px;
}
.stars { color: #FBD05A; font-size: 17px; letter-spacing: 1px; }
.hero-stars span { font-size: 13px; color: rgba(255,255,255,0.8); }
.hero-divider { width: 1px; height: 18px; background: rgba(255,255,255,0.2); }
.hero-badges {
  display: flex;
  gap: 10px;
}
.hero-badge {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,0.75);
  background: rgba(255,255,255,0.1);
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.15);
}

/* ─── TRUST BAR ─── */
.trust-bar {
  background: color-mix(in srgb, var(--navy) var(--intensity-pct), var(--cream));
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
}
.trust-bar-inner {
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 32px;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
.trust-icon { font-size: 15px; opacity: 0.9; }
.trust-sep {
  width: 1px;
  height: 16px;
  background: var(--border);
}

/* ─── SECTIONS ─── */
.section { padding: 90px 0; }
.section-alt { background: var(--cream); }
.section-dark { background: var(--navy); color: white; }
.section-navy-soft { background: var(--cream); }

.section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 12px;
}
.section-label.light { color: rgba(255,255,255,0.6); }

h2.section-heading {
  font-family: var(--font-heading);
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--navy);
  margin-bottom: 16px;
}
h2.section-heading.light { color: white; }
.section-sub {
  font-size: 17px;
  color: var(--text-mid);
  line-height: 1.7;
  max-width: 600px;
}
.section-sub.light { color: rgba(255,255,255,0.8); }

.text-center { text-align: center; }
.text-center .section-sub { margin: 0 auto; }

/* ─── PAIN SECTION ─── */
.pain-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  margin-top: 56px;
}
.pain-copy p {
  color: var(--text-mid);
  line-height: 1.8;
  margin-bottom: 16px;
  font-size: 16px;
}
.pain-copy p strong { color: var(--text); }
.pain-highlight {
  background: var(--gold-light);
  border-left: 4px solid var(--gold);
  border-radius: 0 8px 8px 0;
  padding: 18px 24px;
  margin-top: 24px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-mid);
}
.pain-image {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,0.12);
  aspect-ratio: 4/3;
  background: var(--cream);
}
.pain-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.suffering-list {
  list-style: none;
  margin-top: 24px;
  display: grid;
  gap: 10px;
}
.suffering-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  color: var(--text-mid);
  line-height: 1.5;
}
.suffering-list li::before {
  content: '→';
  color: var(--teal);
  font-weight: 600;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ─── CONDITIONS ─── */
.conditions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 56px;
}
.condition-card {
  background: var(--white);
  border-radius: 14px;
  padding: 32px 28px;
  border: 1px solid var(--border);
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  transition: all 0.25s;
  cursor: pointer;
}
.condition-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.1);
  border-color: var(--teal);
}
.condition-icon {
  font-size: 36px;
  margin-bottom: 16px;
  display: block;
}
.condition-card h3 {
  font-family: var(--font-heading);
  font-size: 19px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 8px;
}
.condition-card p {
  font-size: 14px;
  color: var(--text-mid);
  line-height: 1.65;
  margin-bottom: 16px;
}
.condition-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tag {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 100px;
  background: var(--cream);
  color: var(--navy-light);
  letter-spacing: 0.2px;
}
.condition-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--teal);
  font-size: 13px;
  font-weight: 600;
  margin-top: 16px;
  transition: gap 0.2s;
}
.condition-card:hover .condition-link { gap: 10px; }

/* ─── HOW IT WORKS ─── */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 56px;
  position: relative;
}
.steps-grid::before {
  content: '';
  position: absolute;
  top: 44px;
  left: calc(12.5% + 22px);
  right: calc(12.5% + 22px);
  height: 2px;
  background: linear-gradient(90deg, var(--teal) 0%, var(--navy) 100%);
  opacity: 0.2;
  z-index: 0;
}
.step {
  text-align: center;
  position: relative;
  z-index: 1;
}
.step-num {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--white);
  border: 3px solid var(--teal);
  color: var(--teal);
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  box-shadow: 0 4px 16px rgba(135,167,151,0.2);
}
.step h3 {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 8px;
}
.step p {
  font-size: 14px;
  color: var(--text-mid);
  line-height: 1.6;
}
.step-time {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: var(--teal);
  background: var(--cream);
  padding: 3px 10px;
  border-radius: 100px;
  margin-top: 10px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* ─── TESTIMONIALS ─── */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 56px;
}
.testimonial-card {
  background: var(--white);
  border-radius: 14px;
  padding: 32px 28px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  border: 1px solid var(--border);
  position: relative;
}
.testimonial-card::before {
  content: '\201C';
  font-family: var(--font-heading);
  font-size: 80px;
  line-height: 1;
  color: var(--border);
  position: absolute;
  top: 16px;
  left: 24px;
  z-index: 0;
}
.testimonial-stars {
  color: #FBD05A;
  font-size: 15px;
  letter-spacing: 1px;
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}
.testimonial-text {
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-mid);
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
  font-style: italic;
}
.testimonial-result {
  background: var(--cream);
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary-dark);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.testimonial-result::before { content: '✓'; }
.testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--border);
  padding-top: 16px;
}
.author-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--navy-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 15px;
  flex-shrink: 0;
}
.author-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
}
.author-condition {
  font-size: 12px;
  color: var(--text-light);
}

/* ─── ABOUT ─── */
.about-grid {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 80px;
  align-items: start;
  margin-top: 56px;
}
.about-photo {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,0.15);
  aspect-ratio: 3/4;
  background: var(--cream);
  position: relative;
}
.about-photo img { width: 100%; height: 100%; object-fit: cover; }
.about-photo-caption {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  background: var(--photo-overlay);
  backdrop-filter: blur(8px);
  border-radius: 10px;
  padding: 14px 18px;
  color: white;
}
.about-photo-caption strong { display: block; font-size: 15px; margin-bottom: 2px; }
.about-photo-caption span { font-size: 12px; opacity: 0.8; }
.about-body h2 { margin-bottom: 20px; }
.about-body p {
  color: var(--text-mid);
  line-height: 1.8;
  margin-bottom: 16px;
  font-size: 16px;
}
.credentials-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 28px 0;
}
.credential {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  background: var(--cream);
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
}
.cred-icon { font-size: 18px; }
.celebrity-quote {
  background: var(--quote-gradient);
  color: white;
  border-radius: 12px;
  padding: 24px 28px;
  margin-top: 24px;
}
.celebrity-quote p {
  color: rgba(255,255,255,0.9) !important;
  font-style: italic;
  font-size: 15px !important;
  margin-bottom: 10px !important;
}
.celebrity-quote .celeb-name {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}

/* ─── MEDIA BAR ─── */
.media-bar {
  background: var(--cream);
  padding: 40px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.media-bar-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
}
.media-bar-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 24px;
}
.media-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 40px;
}
.media-logo {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--text-light);
  padding: 10px 20px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--white);
}

/* ─── FAQ ─── */
.faq-list {
  max-width: 760px;
  margin: 48px auto 0;
  display: grid;
  gap: 12px;
}
.faq-item {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.faq-question {
  width: 100%;
  text-align: left;
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-weight: 600;
  font-size: 15px;
  color: var(--navy);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  transition: background 0.15s;
}
.faq-question:hover { background: var(--cream); }
.faq-toggle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--cream);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--teal);
  flex-shrink: 0;
  line-height: 1;
  transition: all 0.2s;
  font-weight: 300;
}
.faq-answer {
  display: none;
  padding: 0 24px 20px;
  font-size: 15px;
  color: var(--text-mid);
  line-height: 1.75;
  border-top: 1px solid var(--border);
  padding-top: 16px;
}
.faq-item.open .faq-answer { display: block; }
.faq-item.open .faq-toggle { background: var(--teal); color: white; border-color: var(--teal); transform: rotate(45deg); }

/* ─── FINAL CTA ─── */
.final-cta {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--cta-section-start) var(--cta-intensity-pct), var(--cream)) 0%,
    color-mix(in srgb, var(--primary-mid) var(--cta-intensity-pct), var(--cream)) 100%
  );
  color: white;
  padding: 100px 24px;
  text-align: center;
}
.final-cta h2 {
  font-family: var(--font-heading);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 700;
  line-height: 1.2;
  color: white;
  margin-bottom: 16px;
}
.final-cta .sub {
  font-size: 18px;
  color: rgba(255,255,255,0.8);
  max-width: 560px;
  margin: 0 auto 40px;
  font-weight: 300;
  line-height: 1.65;
}
.final-cta-form {
  max-width: 520px;
  margin: 0 auto;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 36px 40px;
  backdrop-filter: blur(8px);
}
.form-group {
  margin-bottom: 14px;
  text-align: left;
}
.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.7);
  margin-bottom: 6px;
}
.form-group input,
.form-group select {
  width: 100%;
  padding: 13px 16px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.08);
  color: white;
  font-size: 15px;
  font-family: var(--font-body);
  transition: border-color 0.2s;
  -webkit-appearance: none;
}
.form-group input::placeholder { color: rgba(255,255,255,0.35); }
.form-group select option { background: var(--primary-dark); color: white; }
.form-group input:focus,
.form-group select:focus {
  outline: none;
  border-color: rgba(255,255,255,0.45);
  background: rgba(255,255,255,0.12);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-submit {
  width: 100%;
  padding: 18px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 50px;
  font-size: 17px;
  font-weight: 700;
  font-family: var(--font-body);
  cursor: pointer;
  margin-top: 8px;
  transition: all 0.2s;
  letter-spacing: 0.2px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}
.form-submit:hover { background: var(--green-cta-hover); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0,0,0,0.25); }
.form-note {
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  margin-top: 12px;
  text-align: center;
}
.final-trust {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}
.final-trust-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: rgba(255,255,255,0.6);
}
.final-trust-item::before { content: '✓'; color: #4ADE80; font-weight: 700; }

/* ─── FOOTER ─── */
.footer {
  background: var(--footer-bg);
  color: rgba(255,255,255,0.7);
  padding: 56px 24px 28px;
}
.footer-grid {
  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}
.footer-brand .logo {
  font-family: var(--font-heading);
  color: white;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
  display: block;
}
.footer-brand p { font-size: 13px; line-height: 1.7; }
.footer-brand .contact {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.footer-brand .contact a {
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  transition: color 0.2s;
}
.footer-brand .contact a:hover { color: white; }
.footer-col h4 {
  font-size: 13px;
  font-weight: 700;
  color: white;
  letter-spacing: 0.5px;
  margin-bottom: 16px;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 1.5px;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.footer-col ul a { font-size: 13px; color: rgba(255,255,255,0.6); transition: color 0.2s; }
.footer-col ul a:hover { color: white; }
.footer-bottom {
  max-width: 1140px;
  margin: 0 auto;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-bottom span { font-size: 12px; }
.footer-bottom-links { display: flex; gap: 20px; }
.footer-bottom-links a { font-size: 12px; color: rgba(255,255,255,0.5); transition: color 0.2s; }
.footer-bottom-links a:hover { color: white; }

/* ─── INNER PAGE STYLES ─── */
.page-hero-band {
  background: var(--cream, #d6e8dc);
  color: var(--text, #1a3228);
  padding: 60px 0;
  border-bottom: 1px solid var(--border);
}
.page-hero-band h1 {
  font-family: var(--font-heading);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 8px;
  color: var(--text, #1a3228);
}
.page-hero-band .breadcrumb {
  font-size: 13px;
  color: var(--text-light);
}
.page-hero-band .breadcrumb a {
  color: var(--cta-color, #3e6e58);
  font-weight: 600;
  transition: color 0.2s;
}
.page-hero-band .breadcrumb a:hover { color: var(--text); }

.page-content-area {
  padding: 72px 0;
}
.page-content-area .entry-content {
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-mid);
}
.page-content-area .entry-content h2,
.page-content-area .entry-content h3 {
  font-family: var(--font-heading);
  color: var(--navy);
  margin-top: 32px;
  margin-bottom: 12px;
}
.page-content-area .entry-content p { margin-bottom: 16px; }
.page-content-area .entry-content a { color: var(--teal); text-decoration: underline; }
.page-content-area .entry-content ul,
.page-content-area .entry-content ol {
  margin-left: 24px;
  margin-bottom: 16px;
}

.content-sidebar-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 60px;
  align-items: start;
}

.sidebar .widget {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 28px;
}
.sidebar .widget-title {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 16px;
}

/* ─── BLOG / ARCHIVE ─── */
.post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 48px;
}
.post-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  transition: all 0.25s;
}
.post-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.08);
}
.post-card-thumb {
  display: block; /* <a> is inline by default; aspect-ratio is ignored on inline elements */
  aspect-ratio: 16/9;
  background: #C4D8CC;
  overflow: hidden;
}
.post-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}
.post-card:hover .post-card-thumb img { transform: scale(1.04); }
.post-card-body {
  padding: 24px;
}
.post-card-meta {
  font-size: 12px;
  color: var(--text-light);
  margin-bottom: 8px;
}
.post-card h3 {
  font-family: var(--font-heading);
  font-size: 19px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 10px;
  line-height: 1.35;
}
.post-card h3 a { color: inherit; }
.post-card-excerpt {
  font-size: 14px;
  color: var(--text-mid);
  line-height: 1.65;
  margin-bottom: 16px;
}
.post-card-excerpt p { margin: 0; font-size: inherit; color: inherit; line-height: inherit; }
.post-card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: #2a5740;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: gap 0.2s;
}
.post-card h3 a:hover { color: var(--cta-color, #3e6e58); }
.post-card:hover .post-card-link { gap: 10px; }

/* Pagination */
.pagination {
  margin-top: 56px;
  display: flex;
  justify-content: center;
  gap: 8px;
}
.pagination a,
.pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid var(--border);
  color: var(--text-mid);
  transition: all 0.2s;
}
.pagination a:hover,
.pagination .current {
  background: var(--navy);
  color: white;
  border-color: var(--navy);
}

/* Author bio */
.author-bio-block {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 32px;
  margin-top: 48px;
  display: flex;
  gap: 24px;
  align-items: flex-start;
}
.author-bio-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--navy-light);
  flex-shrink: 0;
  overflow: hidden;
}
.author-bio-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.author-bio-name {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 4px;
}
.author-bio-desc {
  font-size: 14px;
  color: var(--text-mid);
  line-height: 1.7;
}

/* Single post featured image */
.single-featured-image {
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 40px;
  aspect-ratio: 16/7;
}
.single-featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Post meta bar */
.post-meta-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  margin-top: 12px;
  font-size: 13px;
  color: rgba(255,255,255,0.7);
}
.post-meta-bar a {
  color: rgba(255,255,255,0.7);
  transition: color 0.2s;
}
.post-meta-bar a:hover { color: white; }

/* 404 */
.error-404-content {
  padding: 100px 0;
  text-align: center;
}
.error-404-content h1 {
  font-family: var(--font-heading);
  font-size: 100px;
  font-weight: 700;
  color: var(--cream);
  line-height: 1;
  margin-bottom: 20px;
}
.error-404-content h2 {
  font-family: var(--font-heading);
  font-size: 32px;
  color: var(--navy);
  margin-bottom: 16px;
}
.error-404-content p {
  font-size: 17px;
  color: var(--text-mid);
  max-width: 480px;
  margin: 0 auto 32px;
  line-height: 1.7;
}

/* ─── RESPONSIVE ─── */
@media (max-width: 1024px) {
  .conditions-grid { grid-template-columns: repeat(2, 1fr); }
  .steps-grid { grid-template-columns: repeat(2, 1fr); }
  .steps-grid::before { display: none; }
  .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .about-photo { max-width: 420px; aspect-ratio: 4/3; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .pain-grid { grid-template-columns: 1fr; gap: 40px; }
  .pain-image { order: -1; max-width: 500px; aspect-ratio: 16/9; }
  .hero { min-height: 560px; }
  .hero-content { padding: 80px 32px; }
  .content-sidebar-grid { grid-template-columns: 1fr; }
  .post-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ─── HAMBURGER BUTTON ─── */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 6px;
  transition: background 0.2s;
  margin-left: 12px;
}
.nav-hamburger:hover { background: rgba(0,0,0,0.06); }

/* Mobile sticky CTA bar — hidden on desktop, shown as a fixed bottom bar in the mobile media query */
.mobile-cta-bar { display: none; }
.nav-hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--navy);
  border-radius: 2px;
  transition: all 0.3s;
  transform-origin: center;
}

/* Animate to X when open */
body.nav-open .nav-hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open .nav-hamburger span:nth-child(2) { opacity: 0; transform: scaleX(0); }
body.nav-open .nav-hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ─── MOBILE NAV OVERLAY ─── */
/* Breakpoint raised 768→900: the 7-item nav (incl. "Consultations & Fees", phone,
   CTA button) gets cramped/wraps between ~769–880px, so collapse to the hamburger
   earlier. The V2 page content has its own internal breakpoints and is unaffected. */
@media (max-width: 900px) {
  .nav-links {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Explicit viewport height as belt-and-braces (the drawer is now truly viewport-fixed
       since .site-nav no longer has backdrop-filter). */
    height: 100vh;
    height: 100dvh;
    background: var(--mobile-nav-bg);
    backdrop-filter: blur(12px);
    z-index: 99;
    align-items: center;
    /* "safe center": centre the items when they fit, but align to the top (no clipping)
       when there are more items than the screen is tall — e.g. iPhone SE. overflow-y:auto
       then lets the user scroll to every item. */
    justify-content: safe center;
    gap: 0;
    padding: 72px 24px 92px;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
  }
  body.nav-open .nav-links { transform: translateX(0); }

  /* ── Drawer-open state ──
     Removing .site-nav's backdrop-filter (needed to fix viewport inflation / pill centring)
     also dropped the stacking context that kept the fixed drawer above the page, so page
     content was bleeding through the open drawer. Fix the stacking + appearance explicitly: */
  .nav-links { background: #11271b; }                 /* fully opaque panel */
  body.nav-open .site-nav { z-index: 9999; background: transparent; border-bottom-color: transparent; } /* lift whole nav above all page content; let the dark drawer be the backdrop */
  body.nav-open .nav-logo { visibility: hidden; }     /* dark logo would be unreadable on the dark drawer */
  body.nav-open .nav-hamburger { position: relative; z-index: 100; } /* keep the close (X) above the drawer */
  body.nav-open .nav-hamburger span { background: #fff !important; } /* white X on the dark drawer */
  body.nav-open #ntcWhatsapp { display: none !important; } /* hide the floating WhatsApp while the menu is open */
  .nav-links li > a.nav-phone { color: var(--accent-text) !important; opacity: 0.92; } /* phone link legible (full strength) on the dark drawer */

  .nav-links li { width: 100%; text-align: center; border-bottom: 1px solid rgba(255,255,255,0.08); }
  .nav-links li:last-child { border-bottom: none; }
  .nav-links a {
    display: block;
    padding: 18px 24px;
    font-size: 18px !important;
    font-weight: 500 !important;
    color: var(--accent-text) !important;
  }
  .nav-links .nav-cta {
    display: inline-block;
    margin-top: 24px;
    padding: 16px 40px !important;
    border-radius: 8px;
    font-size: 17px !important;
  }
  /* Mobile dropdowns — show inline, no absolute positioning */
  .nav-links .sub-menu {
    position: static;
    display: none;
    background: rgba(255,255,255,0.05);
    border-radius: 8px;
    padding: 8px 0;
    margin: 4px 0 8px;
    box-shadow: none;
    border: 1px solid rgba(255,255,255,0.08);
    columns: 2;
    gap: 0;
  }
  .nav-links li.open > .sub-menu { display: block; }
  .nav-links li:has(> .sub-menu) > a { cursor: pointer; }
  .nav-links li.mega-menu > .sub-menu { display: none; columns: 2; }
  .nav-links li.mega-menu.open > .sub-menu { display: block; }
  .nav-hamburger { display: flex; }
  .nav-inner { padding: 12px 20px; }
  /* Compact floating pill — sized to its text and centred, not full-width */
  .mobile-cta-bar {
    display: inline-flex !important;
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    max-width: calc(100% - 32px);
    background: var(--accent);
    padding: 14px 26px;
    border-radius: 50px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.22);
    z-index: 98;
    justify-content: center;
    white-space: nowrap;
  }
  .mobile-cta-bar a {
    color: var(--accent-text);
    font-weight: 700;
    font-size: 16px;
    text-align: center;
  }
  body { padding-bottom: 88px; }
  .hero { min-height: 520px; }
  .hero-content { padding: 70px 20px; max-width: 100%; }
  .hero-ctas { flex-direction: column; }
  .btn-primary, .btn-secondary { justify-content: center; }
  .conditions-grid { grid-template-columns: 1fr; }
  .steps-grid { grid-template-columns: 1fr 1fr; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .credentials-grid { grid-template-columns: 1fr; }
  .final-cta-form { padding: 24px 20px; }
  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .section { padding: 60px 0; }
  .post-grid { grid-template-columns: 1fr; }
  .author-bio-block { flex-direction: column; }

  /* ── Prevent ALL horizontal overflow on mobile ── */
  .container,
  .nav-inner,
  .trust-bar-inner,
  .media-bar-inner,
  .footer-grid,
  .footer-bottom { width: 100%; max-width: 100%; }

  /* Media logos: smaller gap, wrap tightly */
  .media-logos { gap: 12px; }
  .media-logo { font-size: 11px; padding: 7px 12px; }

  /* Trust bar: smaller text, tighter gap */
  .trust-bar-inner { gap: 6px 16px; }
  .trust-item { font-size: 12px; }
  .trust-sep { display: none; }

  /* Pain image: full width on mobile */
  .pain-image { max-width: 100%; }

  /* About photo: full width on mobile */
  .about-photo { max-width: 100%; }

  /* Hero social proof: wrap on very small screens */
  .hero-social-proof { gap: 12px; }
  .hero-badges { flex-wrap: wrap; gap: 6px; }

  /* Section sub: full width */
  .section-sub { max-width: 100%; }

  /* Condition cards: ensure they don't overflow */
  .condition-card { padding: 24px 20px; }

  /* Steps: single column on very small screens */
  .steps-grid { grid-template-columns: 1fr; }

  /* Testimonials: constrain content */
  .testimonial-card { padding: 24px 20px; }

  /* Final CTA form: full width */
  .final-cta-form { max-width: 100%; margin: 0; }

  /* Footer: full width columns */
  .footer-col, .footer-brand { width: 100%; }

  /* Images: never overflow */
  img { max-width: 100%; height: auto; }
}

/* ═══════════════════════════════════════════
   COLOUR SCHEMES  (8 presets)
   ═══════════════════════════════════════════ */

/* 1. Sage Clinic (default — values already in :root) */

/* 2. Warm Linen */
[data-scheme="stone"] {
  --navy:              #7A6E5E;
  --navy-light:        #9A8A7A;
  --teal:              #B8AE9E;
  --green-cta:         #7A6E5E;
  --green-cta-hover:   #4E4438;
  --gold:              #C4A35A;
  --cream:             #FAF5EC;
  --white:             #FEFCF8;
  --text:              #38301E;
  --text-mid:          #5A4E3C;
  --border:            #E0D4C0;
  --nav-bg:            rgba(255,255,255,0.97);
  --primary-dark:      #4E4438;
  --primary-mid:       #7A6E5E;
  --overlay-heavy:     rgba(38, 30, 22, 0.88);
  --overlay-mid:       rgba(50, 40, 30, 0.72);
  --overlay-light:     rgba(38, 30, 22, 0.40);
  --photo-overlay:     rgba(38, 30, 22, 0.90);
  --footer-bg:         #EDE8DE;
  --cta-section-start: #140E08;
  --quote-gradient:    linear-gradient(135deg, #4E4438, #7A6E5E);
  --mobile-nav-bg:     rgba(38, 30, 22, 0.98);
  --dropdown-bg:       #F8F5EE;
  --nav-text:          #4E4438;
  --cta-color:         #6A9A92;
  --cta-hover:         #4E7A72;
}

/* 3. Blush Rose */
[data-scheme="rose"] {
  --navy:              #8E6A78;
  --navy-light:        #A88296;
  --teal:              #C4A8B8;
  --green-cta:         #8E6A78;
  --green-cta-hover:   #5C3E4C;
  --gold:              #C4A35A;
  --cream:             #FDF5F7;
  --white:             #FEFCFD;
  --text:              #3E2030;
  --text-mid:          #6A4458;
  --border:            #E8CCD8;
  --nav-bg:            rgba(255,255,255,0.97);
  --primary-dark:      #5C3E4C;
  --primary-mid:       #8E6A78;
  --overlay-heavy:     rgba(45, 20, 35, 0.88);
  --overlay-mid:       rgba(60, 28, 48, 0.72);
  --overlay-light:     rgba(45, 20, 35, 0.40);
  --photo-overlay:     rgba(45, 20, 35, 0.90);
  --footer-bg:         #F2E6EC;
  --cta-section-start: #180A10;
  --quote-gradient:    linear-gradient(135deg, #5C3E4C, #8E6A78);
  --mobile-nav-bg:     rgba(45, 20, 35, 0.98);
  --dropdown-bg:       #FAF2F5;
  --nav-text:          #5C3E4C;
  --cta-color:         #C4A35A;
  --cta-hover:         #A88040;
}

/* 4. Dusty Teal */
[data-scheme="teal"] {
  --navy:              #5A8880;
  --navy-light:        #72A099;
  --teal:              #A4C4BE;
  --green-cta:         #5A8880;
  --green-cta-hover:   #366058;
  --gold:              #C4A35A;
  --cream:             #F0F8F6;
  --white:             #F8FEFC;
  --text:              #1E3830;
  --text-mid:          #3A5850;
  --border:            #C0DEDA;
  --nav-bg:            rgba(255,255,255,0.97);
  --primary-dark:      #366058;
  --primary-mid:       #5A8880;
  --overlay-heavy:     rgba(28, 48, 42, 0.88);
  --overlay-mid:       rgba(38, 62, 56, 0.72);
  --overlay-light:     rgba(28, 48, 42, 0.40);
  --photo-overlay:     rgba(28, 48, 42, 0.90);
  --footer-bg:         #DFF0EC;
  --cta-section-start: #0C1412;
  --quote-gradient:    linear-gradient(135deg, #366058, #5A8880);
  --mobile-nav-bg:     rgba(28, 48, 42, 0.98);
  --dropdown-bg:       #EEF8F6;
  --nav-text:          #366058;
  --cta-color:         #C48A7A;
  --cta-hover:         #A86A5A;
}

/* 5. Soft Sky */
[data-scheme="slate"] {
  --navy:              #5E7A98;
  --navy-light:        #7294B0;
  --teal:              #A2B8CC;
  --green-cta:         #5E7A98;
  --green-cta-hover:   #3A5070;
  --gold:              #C4A35A;
  --cream:             #F0F5F9;
  --white:             #F8FBFD;
  --text:              #1E3248;
  --text-mid:          #3E5268;
  --border:            #C0D4E8;
  --nav-bg:            rgba(255,255,255,0.97);
  --primary-dark:      #3A5070;
  --primary-mid:       #5E7A98;
  --overlay-heavy:     rgba(28, 40, 56, 0.88);
  --overlay-mid:       rgba(38, 55, 75, 0.72);
  --overlay-light:     rgba(28, 40, 56, 0.40);
  --photo-overlay:     rgba(28, 40, 56, 0.90);
  --footer-bg:         #E2EAF4;
  --cta-section-start: #0C1018;
  --quote-gradient:    linear-gradient(135deg, #3A5070, #5E7A98);
  --mobile-nav-bg:     rgba(28, 40, 56, 0.98);
  --dropdown-bg:       #EEF3F9;
  --nav-text:          #3A5070;
  --cta-color:         #C4875A;
  --cta-hover:         #A86A3A;
}

/* 6. Soft Periwinkle */
[data-scheme="navy"] {
  --navy:              #6A7AAE;
  --navy-light:        #8492C4;
  --teal:              #AAB4D4;
  --green-cta:         #6A7AAE;
  --green-cta-hover:   #404E7C;
  --gold:              #C4A35A;
  --cream:             #F4F5FC;
  --white:             #FAFBFE;
  --text:              #1A2248;
  --text-mid:          #3C4672;
  --border:            #C8CCEC;
  --nav-bg:            rgba(255,255,255,0.97);
  --primary-dark:      #404E7C;
  --primary-mid:       #6A7AAE;
  --overlay-heavy:     rgba(30, 35, 58, 0.88);
  --overlay-mid:       rgba(40, 48, 78, 0.72);
  --overlay-light:     rgba(30, 35, 58, 0.40);
  --photo-overlay:     rgba(30, 35, 58, 0.90);
  --footer-bg:         #E6E8F8;
  --cta-section-start: #101220;
  --quote-gradient:    linear-gradient(135deg, #404E7C, #6A7AAE);
  --mobile-nav-bg:     rgba(30, 35, 58, 0.98);
  --dropdown-bg:       #F0F2FC;
  --nav-text:          #404E7C;
  --cta-color:         #C4875A;
  --cta-hover:         #A86A3A;
}

/* 7. Gentle Plum */
[data-scheme="plum"] {
  --navy:              #7A6288;
  --navy-light:        #927AA0;
  --teal:              #B4A8BC;
  --green-cta:         #7A6288;
  --green-cta-hover:   #503862;
  --gold:              #C4A35A;
  --cream:             #F8F4FC;
  --white:             #FDFCFE;
  --text:              #2C1E3C;
  --text-mid:          #5A4870;
  --border:            #D8C8EC;
  --nav-bg:            rgba(255,255,255,0.97);
  --primary-dark:      #503862;
  --primary-mid:       #7A6288;
  --overlay-heavy:     rgba(36, 24, 44, 0.88);
  --overlay-mid:       rgba(48, 32, 60, 0.72);
  --overlay-light:     rgba(36, 24, 44, 0.40);
  --photo-overlay:     rgba(36, 24, 44, 0.90);
  --footer-bg:         #EDE4F5;
  --cta-section-start: #120A18;
  --quote-gradient:    linear-gradient(135deg, #503862, #7A6288);
  --mobile-nav-bg:     rgba(36, 24, 44, 0.98);
  --dropdown-bg:       #F5F0FC;
  --nav-text:          #503862;
  --cta-color:         #C4875A;
  --cta-hover:         #A86A3A;
}

/* 8. Quiet Stone */
[data-scheme="charcoal"] {
  --navy:              #7A746A;
  --navy-light:        #928C82;
  --teal:              #B4B0A8;
  --green-cta:         #7A746A;
  --green-cta-hover:   #504A42;
  --gold:              #C4A35A;
  --cream:             #F8F5F0;
  --white:             #FEFCFA;
  --text:              #2E2A24;
  --text-mid:          #54504A;
  --border:            #DCD8D0;
  --nav-bg:            rgba(255,255,255,0.97);
  --primary-dark:      #504A42;
  --primary-mid:       #7A746A;
  --overlay-heavy:     rgba(38, 34, 28, 0.88);
  --overlay-mid:       rgba(50, 46, 38, 0.72);
  --overlay-light:     rgba(38, 34, 28, 0.40);
  --photo-overlay:     rgba(38, 34, 28, 0.90);
  --footer-bg:         #EDEAE4;
  --cta-section-start: #140E0C;
  --quote-gradient:    linear-gradient(135deg, #504A42, #7A746A);
  --mobile-nav-bg:     rgba(38, 34, 28, 0.98);
  --dropdown-bg:       #F8F6F2;
  --nav-text:          #504A42;
  --cta-color:         #6A9A92;
  --cta-hover:         #4E7A72;
}

/* 9. Soft Coral */
[data-scheme="coral"] {
  --navy:              #B46A5E;
  --navy-light:        #C88478;
  --teal:              #E0A898;
  --green-cta:         #B46A5E;
  --green-cta-hover:   #7A3C30;
  --gold:              #C4A35A;
  --cream:             #FDF5F2;
  --white:             #FEFCFA;
  --text:              #3A0E08;
  --text-mid:          #6A3028;
  --border:            #ECD4CC;
  --nav-bg:            rgba(255,255,255,0.97);
  --primary-dark:      #7A3C30;
  --primary-mid:       #B46A5E;
  --overlay-heavy:     rgba(55, 22, 16, 0.88);
  --overlay-mid:       rgba(72, 32, 24, 0.72);
  --overlay-light:     rgba(55, 22, 16, 0.40);
  --photo-overlay:     rgba(55, 22, 16, 0.90);
  --footer-bg:         #F5E8E2;
  --cta-section-start: #180A04;
  --quote-gradient:    linear-gradient(135deg, #7A3C30, #B46A5E);
  --mobile-nav-bg:     rgba(55, 22, 16, 0.98);
  --dropdown-bg:       #FDF2EE;
  --nav-text:          #7A3C30;
  --cta-color:         #5E7A98;
  --cta-hover:         #3E5C7A;
}

/* 10. Pale Aqua */
[data-scheme="ocean"] {
  --navy:              #5E9896;
  --navy-light:        #78B0AE;
  --teal:              #A6CCCA;
  --green-cta:         #5E9896;
  --green-cta-hover:   #366462;
  --gold:              #C4A35A;
  --cream:             #EEF8F8;
  --white:             #F5FEFD;
  --text:              #1A3A38;
  --text-mid:          #3A5A58;
  --border:            #B8DEDE;
  --nav-bg:            rgba(255,255,255,0.97);
  --primary-dark:      #366462;
  --primary-mid:       #5E9896;
  --overlay-heavy:     rgba(25, 46, 44, 0.88);
  --overlay-mid:       rgba(34, 62, 60, 0.72);
  --overlay-light:     rgba(25, 46, 44, 0.40);
  --photo-overlay:     rgba(25, 46, 44, 0.90);
  --footer-bg:         #D8EEEC;
  --cta-section-start: #0A1412;
  --quote-gradient:    linear-gradient(135deg, #366462, #5E9896);
  --mobile-nav-bg:     rgba(25, 46, 44, 0.98);
  --dropdown-bg:       #EAFAFА;
  --nav-text:          #366462;
  --cta-color:         #C47A8A;
  --cta-hover:         #A85A6E;
}

/* 11. Dusty Mint */
[data-scheme="mint"] {
  --navy:              #669A90;
  --navy-light:        #80B2A8;
  --teal:              #AACCC8;
  --green-cta:         #669A90;
  --green-cta-hover:   #3E6862;
  --gold:              #C4A35A;
  --cream:             #F2FAF8;
  --white:             #F8FEFC;
  --text:              #163832;
  --text-mid:          #36584E;
  --border:            #BCD8D2;
  --nav-bg:            rgba(255,255,255,0.97);
  --primary-dark:      #3E6862;
  --primary-mid:       #669A90;
  --overlay-heavy:     rgba(28, 46, 42, 0.88);
  --overlay-mid:       rgba(38, 62, 56, 0.72);
  --overlay-light:     rgba(28, 46, 42, 0.40);
  --photo-overlay:     rgba(28, 46, 42, 0.90);
  --footer-bg:         #DCEEE8;
  --cta-section-start: #0A1410;
  --quote-gradient:    linear-gradient(135deg, #3E6862, #669A90);
  --mobile-nav-bg:     rgba(28, 46, 42, 0.98);
  --dropdown-bg:       #EEF8F6;
  --nav-text:          #3E6862;
  --cta-color:         #C48A7A;
  --cta-hover:         #A86A5A;
}

/* 12. Warm Sand */
[data-scheme="amber"] {
  --navy:              #A08A72;
  --navy-light:        #BAA48C;
  --teal:              #D4C4AE;
  --green-cta:         #A08A72;
  --green-cta-hover:   #6A5640;
  --gold:              #C4A35A;
  --cream:             #FDF8EE;
  --white:             #FEFCF6;
  --text:              #362A1A;
  --text-mid:          #5E4A34;
  --border:            #E4D4BA;
  --nav-bg:            rgba(255,255,255,0.97);
  --primary-dark:      #6A5640;
  --primary-mid:       #A08A72;
  --overlay-heavy:     rgba(46, 34, 22, 0.88);
  --overlay-mid:       rgba(62, 48, 30, 0.72);
  --overlay-light:     rgba(46, 34, 22, 0.40);
  --photo-overlay:     rgba(46, 34, 22, 0.90);
  --footer-bg:         #EEE6D8;
  --cta-section-start: #160E08;
  --quote-gradient:    linear-gradient(135deg, #6A5640, #A08A72);
  --mobile-nav-bg:     rgba(46, 34, 22, 0.98);
  --dropdown-bg:       #FDF8EE;
  --nav-text:          #6A5640;
  --cta-color:         #5E8C86;
  --cta-hover:         #3E6E68;
}

/* 13. Soft Mauve */
[data-scheme="berry"] {
  --navy:              #927A8A;
  --navy-light:        #AA9298;
  --teal:              #C8B8C4;
  --green-cta:         #927A8A;
  --green-cta-hover:   #604858;
  --gold:              #C4A35A;
  --cream:             #FCF4F8;
  --white:             #FEFCFE;
  --text:              #3A1E30;
  --text-mid:          #5E3E50;
  --border:            #E0C8D8;
  --nav-bg:            rgba(255,255,255,0.97);
  --primary-dark:      #604858;
  --primary-mid:       #927A8A;
  --overlay-heavy:     rgba(40, 24, 36, 0.88);
  --overlay-mid:       rgba(54, 34, 48, 0.72);
  --overlay-light:     rgba(40, 24, 36, 0.40);
  --photo-overlay:     rgba(40, 24, 36, 0.90);
  --footer-bg:         #EEE0EC;
  --cta-section-start: #140A10;
  --quote-gradient:    linear-gradient(135deg, #604858, #927A8A);
  --mobile-nav-bg:     rgba(40, 24, 36, 0.98);
  --dropdown-bg:       #FAF0F6;
  --nav-text:          #604858;
  --cta-color:         #729882;
  --cta-hover:         #527864;
}

/* 14. Peach Blossom */
[data-scheme="terracotta"] {
  --navy:              #B87A5E;
  --navy-light:        #CC9478;
  --teal:              #E0B4A0;
  --green-cta:         #B87A5E;
  --green-cta-hover:   #7A4830;
  --gold:              #C4A35A;
  --cream:             #FDF5EE;
  --white:             #FEFCF8;
  --text:              #3A1A0A;
  --text-mid:          #6A3A22;
  --border:            #ECD4C0;
  --nav-bg:            rgba(255,255,255,0.97);
  --primary-dark:      #7A4830;
  --primary-mid:       #B87A5E;
  --overlay-heavy:     rgba(55, 26, 16, 0.88);
  --overlay-mid:       rgba(72, 36, 22, 0.72);
  --overlay-light:     rgba(55, 26, 16, 0.40);
  --photo-overlay:     rgba(55, 26, 16, 0.90);
  --footer-bg:         #F4E2D2;
  --cta-section-start: #180A04;
  --quote-gradient:    linear-gradient(135deg, #7A4830, #B87A5E);
  --mobile-nav-bg:     rgba(55, 26, 16, 0.98);
  --dropdown-bg:       #FEF5EE;
  --nav-text:          #7A4830;
  --cta-color:         #5E8C86;
  --cta-hover:         #3E6E68;
}

/* 15. Pale Lilac */
[data-scheme="sky"] {
  --navy:              #8A7AAA;
  --navy-light:        #A092C0;
  --teal:              #C0B6D4;
  --green-cta:         #8A7AAA;
  --green-cta-hover:   #5A4878;
  --gold:              #C4A35A;
  --cream:             #F8F5FC;
  --white:             #FDFCFE;
  --text:              #2A1848;
  --text-mid:          #503870;
  --border:            #D8CCEC;
  --nav-bg:            rgba(255,255,255,0.97);
  --primary-dark:      #5A4878;
  --primary-mid:       #8A7AAA;
  --overlay-heavy:     rgba(36, 24, 48, 0.88);
  --overlay-mid:       rgba(48, 34, 65, 0.72);
  --overlay-light:     rgba(36, 24, 48, 0.40);
  --photo-overlay:     rgba(36, 24, 48, 0.90);
  --footer-bg:         #EAE6F8;
  --cta-section-start: #120A20;
  --quote-gradient:    linear-gradient(135deg, #5A4878, #8A7AAA);
  --mobile-nav-bg:     rgba(36, 24, 48, 0.98);
  --dropdown-bg:       #F8F4FC;
  --nav-text:          #5A4878;
  --cta-color:         #C4A35A;
  --cta-hover:         #A88040;
}

/* 16. Soft Sage */
[data-scheme="forest"] {
  --navy:              #729882;
  --navy-light:        #8AB09A;
  --teal:              #AECAB6;
  --green-cta:         #729882;
  --green-cta-hover:   #486658;
  --gold:              #C4A35A;
  --cream:             #F4F8F2;
  --white:             #FAFDF8;
  --text:              #1E3224;
  --text-mid:          #3A5240;
  --border:            #C4D8CC;
  --nav-bg:            rgba(255,255,255,0.97);
  --primary-dark:      #486658;
  --primary-mid:       #729882;
  --overlay-heavy:     rgba(30, 42, 36, 0.88);
  --overlay-mid:       rgba(40, 58, 48, 0.72);
  --overlay-light:     rgba(30, 42, 36, 0.40);
  --photo-overlay:     rgba(30, 42, 36, 0.90);
  --footer-bg:         #E0EDEA;
  --cta-section-start: #0C120E;
  --quote-gradient:    linear-gradient(135deg, #486658, #729882);
  --mobile-nav-bg:     rgba(30, 42, 36, 0.98);
  --dropdown-bg:       #EFF8F2;
  --nav-text:          #486658;
  --cta-color:         #C4A35A;
  --cta-hover:         #A88040;
}

/* 17. Blush Nude */
[data-scheme="sunshine"] {
  --navy:              #AA9292;
  --navy-light:        #C4AEAE;
  --teal:              #D8C8C8;
  --green-cta:         #AA9292;
  --green-cta-hover:   #705E5E;
  --gold:              #C4A35A;
  --cream:             #FDF8F6;
  --white:             #FEFCFB;
  --text:              #362010;
  --text-mid:          #5A4040;
  --border:            #E8D8D8;
  --nav-bg:            rgba(255,255,255,0.97);
  --primary-dark:      #705E5E;
  --primary-mid:       #AA9292;
  --overlay-heavy:     rgba(44, 30, 30, 0.88);
  --overlay-mid:       rgba(60, 42, 42, 0.72);
  --overlay-light:     rgba(44, 30, 30, 0.40);
  --photo-overlay:     rgba(44, 30, 30, 0.90);
  --footer-bg:         #F0E6E4;
  --cta-section-start: #180C0C;
  --quote-gradient:    linear-gradient(135deg, #705E5E, #AA9292);
  --mobile-nav-bg:     rgba(44, 30, 30, 0.98);
  --dropdown-bg:       #FCF8F6;
  --nav-text:          #705E5E;
  --cta-color:         #729882;
  --cta-hover:         #527864;
}

/* 18. Lavender Mist */
[data-scheme="brightsky"] {
  --navy:              #7A6A98;
  --navy-light:        #9282B2;
  --teal:              #B4AACB;
  --green-cta:         #7A6A98;
  --green-cta-hover:   #503870;
  --gold:              #C4A35A;
  --cream:             #F7F5FC;
  --white:             #FDFCFE;
  --text:              #302048;
  --text-mid:          #5A4878;
  --border:            #D4CDE8;
  --nav-bg:            rgba(255,255,255,0.97);
  --primary-dark:      #503870;
  --primary-mid:       #7A6A98;
  --overlay-heavy:     rgba(34, 24, 44, 0.88);
  --overlay-mid:       rgba(46, 34, 60, 0.72);
  --overlay-light:     rgba(34, 24, 44, 0.40);
  --photo-overlay:     rgba(34, 24, 44, 0.90);
  --footer-bg:         #E8E2F8;
  --cta-section-start: #100820;
  --quote-gradient:    linear-gradient(135deg, #503870, #7A6A98);
  --mobile-nav-bg:     rgba(34, 24, 44, 0.98);
  --dropdown-bg:       #F5F2FC;
  --nav-text:          #503870;
  --cta-color:         #C4875A;
  --cta-hover:         #A86A3A;
}

/* 19. Muted Olive */
[data-scheme="lime"] {
  --navy:              #78886A;
  --navy-light:        #92A082;
  --teal:              #B2BC9E;
  --green-cta:         #78886A;
  --green-cta-hover:   #4A5840;
  --gold:              #C4A35A;
  --cream:             #F5F7EE;
  --white:             #FAFCF6;
  --text:              #1E2A12;
  --text-mid:          #3E4E2E;
  --border:            #C8D0B8;
  --nav-bg:            rgba(255,255,255,0.97);
  --primary-dark:      #4A5840;
  --primary-mid:       #78886A;
  --overlay-heavy:     rgba(30, 36, 24, 0.88);
  --overlay-mid:       rgba(42, 50, 34, 0.72);
  --overlay-light:     rgba(30, 36, 24, 0.40);
  --photo-overlay:     rgba(30, 36, 24, 0.90);
  --footer-bg:         #E4ECDA;
  --cta-section-start: #0C1008;
  --quote-gradient:    linear-gradient(135deg, #4A5840, #78886A);
  --mobile-nav-bg:     rgba(30, 36, 24, 0.98);
  --dropdown-bg:       #F5F8EE;
  --nav-text:          #4A5840;
  --cta-color:         #B87A7A;
  --cta-hover:         #9A5858;
}

/* 20. Warm Rose */
[data-scheme="crimson"] {
  --navy:              #9E7878;
  --navy-light:        #B89090;
  --teal:              #D0AAAA;
  --green-cta:         #9E7878;
  --green-cta-hover:   #6A4646;
  --gold:              #C4A35A;
  --cream:             #FDF5F5;
  --white:             #FEFCFC;
  --text:              #380A0A;
  --text-mid:          #6A3030;
  --border:            #E8CCCC;
  --nav-bg:            rgba(255,255,255,0.97);
  --primary-dark:      #6A4646;
  --primary-mid:       #9E7878;
  --overlay-heavy:     rgba(42, 22, 22, 0.88);
  --overlay-mid:       rgba(58, 30, 30, 0.72);
  --overlay-light:     rgba(42, 22, 22, 0.40);
  --photo-overlay:     rgba(42, 22, 22, 0.90);
  --footer-bg:         #F2E4E4;
  --cta-section-start: #160808;
  --quote-gradient:    linear-gradient(135deg, #6A4646, #9E7878);
  --mobile-nav-bg:     rgba(42, 22, 22, 0.98);
  --dropdown-bg:       #FDF2F2;
  --nav-text:          #6A4646;
  --cta-color:         #729882;
  --cta-hover:         #527864;
}

/* ═══ FONT PAIRS ═══ */
/* 1. Classic Editorial — default, already in :root */

[data-font="montserrat"] {
  --font-heading: 'Montserrat', sans-serif;
  --font-body:    'Montserrat', sans-serif;
}
[data-font="merriweather"] {
  --font-heading: 'Merriweather', serif;
  --font-body:    'Nunito', sans-serif;
}
[data-font="oswald"] {
  --font-heading: 'Oswald', sans-serif;
  --font-body:    'Open Sans', sans-serif;
}
[data-font="cormorant"] {
  --font-heading: 'Cormorant Garamond', serif;
  --font-body:    'Lato', sans-serif;
}
[data-font="poppins"] {
  --font-heading: 'Poppins', sans-serif;
  --font-body:    'Poppins', sans-serif;
}
[data-font="libre-baskerville"] {
  --font-heading: 'Libre Baskerville', serif;
  --font-body:    'Source Sans 3', sans-serif;
}
[data-font="dm-serif"] {
  --font-heading: 'DM Serif Display', serif;
  --font-body:    'DM Sans', sans-serif;
}
[data-font="eb-garamond"] {
  --font-heading: 'EB Garamond', serif;
  --font-body:    'Raleway', sans-serif;
}
[data-font="roboto-slab"] {
  --font-heading: 'Roboto Slab', serif;
  --font-body:    'Roboto', sans-serif;
}
[data-font="nunito"] {
  --font-heading: 'Nunito', sans-serif;
  --font-body:    'Nunito', sans-serif;
}
[data-font="inter"] {
  --font-heading: 'Inter', sans-serif;
  --font-body:    'Inter', sans-serif;
}
[data-font="lora"] {
  --font-heading: 'Lora', serif;
  --font-body:    'Lato', sans-serif;
}
[data-font="jakarta"] {
  --font-heading: 'Plus Jakarta Sans', sans-serif;
  --font-body:    'Plus Jakarta Sans', sans-serif;
}
[data-font="raleway"] {
  --font-heading: 'Raleway', sans-serif;
  --font-body:    'Mulish', sans-serif;
}
[data-font="dm-sans"] {
  --font-heading: 'DM Sans', sans-serif;
  --font-body:    'DM Sans', sans-serif;
}
[data-font="crimson"] {
  --font-heading: 'Crimson Pro', serif;
  --font-body:    'Open Sans', sans-serif;
}
[data-font="josefin"] {
  --font-heading: 'Josefin Sans', sans-serif;
  --font-body:    'Josefin Sans', sans-serif;
}
[data-font="nunito-sans"] {
  --font-heading: 'Nunito Sans', sans-serif;
  --font-body:    'Nunito Sans', sans-serif;
}
[data-font="bodoni"] {
  --font-heading: 'Bodoni Moda', serif;
  --font-body:    'Karla', sans-serif;
}

/* ─── DESIGN STUDIO (admin only) ─── */
.ntc-studio {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 99998;
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
}
.ntc-studio-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--navy);
  color: white;
  border: none;
  border-radius: 100px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  box-shadow: 0 4px 24px rgba(0,0,0,0.22);
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
  white-space: nowrap;
  margin-left: auto;
}
.ntc-studio-trigger:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.28);
  background: var(--primary-dark);
}
.ntc-studio-trigger svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  opacity: 0.85;
}
.ntc-studio-panel {
  position: absolute;
  bottom: calc(100% + 14px);
  right: 0;
  width: 336px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.16), 0 4px 16px rgba(0,0,0,0.06);
  transform: translateY(12px) scale(0.97);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.22s cubic-bezier(0.175,0.885,0.32,1.15), opacity 0.18s ease;
  transform-origin: bottom right;
  overflow: hidden;
}
.ntc-studio-panel.open {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: all;
}
.ntc-studio-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 0;
}
.ntc-studio-title {
  font-size: 13px;
  font-weight: 700;
  color: #111;
  letter-spacing: 0.2px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.ntc-studio-title-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--navy);
  display: inline-block;
}
.ntc-studio-close {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #F3F4F6;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6B7280;
  font-size: 15px;
  line-height: 1;
  transition: background 0.15s, color 0.15s;
}
.ntc-studio-close:hover { background: #E5E7EB; color: #111; }
.ntc-studio-tabs {
  display: flex;
  padding: 14px 20px 0;
  gap: 2px;
}
.ntc-studio-tab {
  flex: 1;
  padding: 7px 0;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #9CA3AF;
  cursor: pointer;
  border: none;
  background: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}
.ntc-studio-tab:hover { color: #374151; }
.ntc-studio-tab.active { color: var(--navy); border-bottom-color: var(--navy); }
.ntc-studio-divider { height: 1px; background: #F3F4F6; margin: 0; }
.ntc-studio-pane { display: none; padding: 18px 20px 6px; }
.ntc-studio-pane.active { display: block; }

/* ── Colour pane ── */
.ntc-scheme-swatches {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px 6px;
}
.ntc-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  border: none;
  background: none;
  padding: 5px 2px;
  border-radius: 10px;
  transition: background 0.12s;
}
.ntc-swatch:hover { background: #F9FAFB; }
.ntc-swatch-dot {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,0.07);
  transition: transform 0.18s, box-shadow 0.18s;
  position: relative;
  flex-shrink: 0;
}
.ntc-swatch:hover .ntc-swatch-dot {
  transform: scale(1.1);
  box-shadow: 0 4px 14px rgba(0,0,0,0.2);
}
.ntc-swatch.active .ntc-swatch-dot {
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px currentColor;
}
.ntc-swatch span {
  font-size: 8px;
  color: #9CA3AF;
  font-weight: 600;
  letter-spacing: 0.2px;
  text-align: center;
  line-height: 1.3;
  word-break: break-word;
}
.ntc-swatch.active span { color: var(--navy); }

/* ── Font pane ── */
.ntc-studio-font-pane .ntc-font-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 360px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #E5E7EB transparent;
}
.ntc-font-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 10px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.13s;
  background: none;
  width: 100%;
  text-align: left;
}
.ntc-font-option:hover { background: #F9FAFB; border-color: #E5E7EB; }
.ntc-font-option.active { border-color: var(--navy); background: #F0F8F6; }
.ntc-font-sample {
  font-size: 22px;
  line-height: 1;
  color: #1F2937;
  width: 44px;
  flex-shrink: 0;
  text-align: center;
}
.ntc-font-info { flex: 1; min-width: 0; }
.ntc-font-name {
  font-size: 12px;
  font-weight: 600;
  color: #111;
  font-family: -apple-system, sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.ntc-font-desc {
  font-size: 10px;
  color: #9CA3AF;
  font-family: -apple-system, sans-serif;
  margin-top: 1px;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Effects pane ── */
.ntc-studio-sliders { display: flex; flex-direction: column; gap: 18px; }
.ntc-intensity-control { }
.ntc-intensity-control label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #9CA3AF;
  margin-bottom: 8px;
  font-family: -apple-system, sans-serif;
}
.ntc-intensity-control label span {
  font-size: 12px;
  font-weight: 700;
  color: var(--navy);
  text-transform: none;
  letter-spacing: 0;
}
input[type="range"]#ntcIntensitySlider,
input[type="range"]#ntcCtaIntensitySlider {
  width: 100%;
  accent-color: var(--navy);
  cursor: pointer;
  height: 4px;
}

/* ── Studio status bar ── */
.ntc-studio-status {
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 20px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: transparent;
  transition: color 0.2s;
}
.ntc-studio-status.saving { color: #9CA3AF; }
.ntc-studio-status.saved  { color: #10B981; }

/* ─── WARM FOOTER — site-wide ─── */
.footer {
  background: var(--footer-bg) !important;
  color: var(--text-mid) !important;
}
.footer-brand .logo    { color: var(--text) !important; }
.footer-brand p        { color: var(--text-mid) !important; }
.footer-brand .contact a       { color: var(--text-mid) !important; }
.footer-brand .contact a:hover { color: var(--cta-color) !important; }
.footer-col h4         { color: var(--text) !important; }
.footer-col ul a       { color: var(--text-mid) !important; }
.footer-col ul a:hover { color: var(--cta-color) !important; }
.footer-bottom         { border-top-color: var(--border) !important; }
.footer-bottom span    { color: var(--text-light) !important; }
.footer-bottom-links a       { color: var(--text-light) !important; }
.footer-bottom-links a:hover { color: var(--cta-color) !important; }

/* ─── WHATSAPP FLOATING BUTTON ─── */
.ntc-whatsapp {
  position: fixed;
  bottom: 88px;
  right: 24px;
  z-index: 9999;
}
.ntc-whatsapp-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  box-shadow: 0 4px 16px rgba(37,211,102,0.4);
  transition: transform 0.2s, box-shadow 0.2s;
}
.ntc-whatsapp-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 24px rgba(37,211,102,0.55);
}
.ntc-whatsapp-btn svg {
  width: 28px;
  height: 28px;
  fill: #fff;
  flex-shrink: 0;
}

/* ─── GRAVITY FORMS — styled to match the V2 design ─── */
.gform_wrapper form { margin: 0; }
.gform_wrapper .gform_fields { display: grid; gap: 14px; }
.gform_wrapper .gfield_label {
  font-family: var(--font-body); font-size: 13px; font-weight: 600;
  color: var(--text-mid); margin-bottom: 5px; display: block;
}
.gform_wrapper .gfield_required { color: var(--accent); }
.gform_wrapper input[type=text],
.gform_wrapper input[type=email],
.gform_wrapper input[type=tel],
.gform_wrapper input[type=number],
.gform_wrapper select,
.gform_wrapper textarea {
  width: 100%; padding: 13px 16px; border-radius: 10px; border: 1.5px solid var(--border);
  background: #fff; color: var(--text); font-size: 15px; font-family: var(--font-body);
  -webkit-appearance: none; transition: border-color .2s;
}
.gform_wrapper input:focus,
.gform_wrapper select:focus,
.gform_wrapper textarea:focus { outline: none; border-color: var(--cta-color); }
.gform_wrapper textarea { min-height: 120px; resize: vertical; }
.gform_wrapper ::placeholder { color: var(--text-light); }
.gform_wrapper .gform_footer { margin-top: 16px; padding: 0; }
.gform_wrapper .gform_footer input[type=submit],
.gform_wrapper .gform-button,
.gform_wrapper button[type=submit] {
  width: 100%; padding: 16px 28px; background: var(--accent); color: var(--accent-text);
  border: none; border-radius: 50px; font-family: var(--font-body); font-size: 16px; font-weight: 800;
  cursor: pointer; box-shadow: 0 4px 20px rgba(0,0,0,.18); transition: all .2s;
}
.gform_wrapper .gform_footer input[type=submit]:hover,
.gform_wrapper button[type=submit]:hover { background: var(--accent-hover); transform: translateY(-1px); }
.gform_wrapper .gfield_validation_message,
.gform_wrapper .validation_message { color: var(--red); font-size: 13px; margin-top: 4px; }
.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error select,
.gform_wrapper .gfield_error textarea { border-color: var(--red); }
.gform_confirmation_message {
  background: var(--cream); border-radius: 14px; padding: 20px 24px; color: var(--text); font-weight: 600; line-height: 1.6;
}

/* Dark context (booking band) — light, auto-contrast-aware text + translucent fields */
.gf-on-dark .gform_wrapper .gfield_label { color: color-mix(in srgb, var(--on-cta-section, #fff) 80%, transparent); }
.gf-on-dark .gform_wrapper input[type=text],
.gf-on-dark .gform_wrapper input[type=email],
.gf-on-dark .gform_wrapper input[type=tel],
.gf-on-dark .gform_wrapper select,
.gf-on-dark .gform_wrapper textarea {
  background: color-mix(in srgb, var(--on-cta-section, #fff) 10%, transparent);
  border-color: color-mix(in srgb, var(--on-cta-section, #fff) 20%, transparent);
  color: var(--on-cta-section, #fff);
}
.gf-on-dark .gform_wrapper ::placeholder { color: color-mix(in srgb, var(--on-cta-section, #fff) 40%, transparent); }
.gf-on-dark .gform_wrapper select option { background: var(--cta-section-end, #2f5d46); color: #fff; }
.gf-on-dark .gform_confirmation_message { background: color-mix(in srgb, var(--on-cta-section, #fff) 12%, transparent); color: var(--on-cta-section, #fff); }

/* Gravity Forms' bundled "orbital" theme ships its own submit-button styling that
   out-specifies the rules above, so the CTA renders in GF's default blue. Restate the
   brand button here with !important — GF's stylesheet loads after the theme's, and its
   selectors carry higher specificity, so this is the only reliable way to win. */
.gform_wrapper .gform_footer input[type=submit],
.gform_wrapper .gform-footer input[type=submit],
.gform_wrapper .gform_footer .gform_button,
.gform_wrapper .gform-footer .gform_button,
.gform_wrapper .gform_footer button[type=submit],
.gform_wrapper .gform-footer button[type=submit] {
  width: 100% !important;
  padding: 16px 28px !important;
  background: var(--accent) !important;
  color: var(--accent-text) !important;
  border: none !important;
  border-radius: 50px !important;
  font-family: var(--font-body) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.18) !important;
  cursor: pointer;
  transition: all .2s;
}
.gform_wrapper .gform_footer input[type=submit]:hover,
.gform_wrapper .gform-footer input[type=submit]:hover,
.gform_wrapper .gform_footer .gform_button:hover,
.gform_wrapper .gform-footer .gform_button:hover,
.gform_wrapper .gform_footer button[type=submit]:hover,
.gform_wrapper .gform-footer button[type=submit]:hover {
  background: var(--accent-hover) !important;
  transform: translateY(-1px);
}

/* ─── CONDITIONS MEGA MENU (desktop) ─── */
.nav-links li.has-mega { position: static; }
.mega-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #ffffff;
  border-top: 1px solid var(--border);
  box-shadow: 0 26px 54px rgba(0,0,0,0.13);
  padding: 30px 0 34px;
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.nav-links li.has-mega:hover > .mega-panel,
.nav-links li.has-mega.mega-open > .mega-panel,
.nav-links li.has-mega:focus-within > .mega-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.mega-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 40px;
}
.mega-cats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px 28px;
}
.mega-panel .mega-cat-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading), 'Nunito', sans-serif;
  font-weight: 800 !important;
  font-size: 14px !important;
  color: var(--text) !important;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.mega-panel .mega-cat-title .mega-ic { font-size: 16px; }
.mega-panel .mega-cat-title:hover { color: var(--cta-color) !important; }
.mega-cat ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mega-panel .mega-cat ul li a {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--text-mid) !important;
  line-height: 1.4;
}
.mega-panel .mega-cat ul li a:hover { color: var(--cta-color) !important; }
.mega-feature { display: grid; gap: 14px; align-content: start; }
.mega-panel .mega-feature-card {
  display: block;
  border-radius: 14px;
  overflow: hidden;
  border: 1.5px solid var(--border);
  background: var(--cream);
  transition: border-color 0.15s, transform 0.15s;
}
.mega-panel .mega-feature-card:hover { border-color: var(--cta-color); transform: translateY(-2px); }
.mega-feature-card img { width: 100%; height: 92px; object-fit: cover; display: block; }
.mega-feature-body { padding: 12px 15px 14px; }
.mega-panel .mega-feature-body strong { display: block; font-size: 14px; color: var(--text); margin-bottom: 3px; font-weight: 800; }
.mega-panel .mega-feature-body span { display: block; font-size: 12.5px; color: var(--text-mid); line-height: 1.5; }
.mega-panel .mega-feature-cta { color: var(--accent) !important; font-weight: 800 !important; margin-top: 7px; }

@media (max-width: 900px) {
  .mega-panel { display: none !important; }
  .nav-links li.has-mega { position: relative; }
}

/* ─── Footer sitewide disclaimer (YMYL) ─── */
.footer-disclaimer { max-width: 1140px; margin: 0 auto 22px; padding-top: 20px; border-top: 1px solid var(--border); font-size: 11.5px; line-height: 1.6; color: var(--text-light); }

/* ─────────── NUTRITION ARTICLES (.art-) ─────────── */
.art { color: var(--text-mid); }
.art .wrap-narrow { max-width: 760px; margin: 0 auto; padding: 0 24px; }
.art h1, .art h2, .art h3 { font-family: var(--font-heading), 'Nunito', sans-serif; font-weight: 800; letter-spacing: -0.3px; color: var(--text); line-height: 1.2; }
.art-hero { background: var(--cream); padding: 60px 0 36px; }
.art-hero .eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .5px; color: var(--cta-color); margin-bottom: 10px; }
.art-hero h1 { font-size: clamp(30px, 4.2vw, 46px); margin-bottom: 16px; }
.art-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 13.5px; color: var(--text-light); }
.art-meta a { color: var(--cta-color); font-weight: 700; }
.art-meta .dot { opacity: .5; }
.art-figure { margin: 0; }
.art-figure img { width: 100%; max-height: 460px; object-fit: cover; display: block; }
.art-figure figcaption { font-size: 12.5px; color: var(--text-light); padding: 8px 24px; max-width: 760px; margin: 0 auto; }
.art-body { background: var(--white); padding: 44px 0 30px; }
.art-answer { font-size: 19px; line-height: 1.7; color: var(--text); font-weight: 500; margin-bottom: 26px; }
.art-body p { font-size: 16.5px; line-height: 1.85; margin: 0 0 18px; }
.art-body h2 { font-size: clamp(23px, 2.6vw, 30px); margin: 40px 0 14px; }
.art-body h3 { font-size: 20px; margin: 28px 0 10px; }
.art-body ul, .art-body ol { margin: 0 0 20px 22px; }
.art-body li { font-size: 16.5px; line-height: 1.8; margin-bottom: 8px; }
.art-body a { color: var(--cta-color); font-weight: 600; }
.art-body strong { color: var(--text); }
.art-takeaways { background: var(--cream); border: 1.5px solid var(--border); border-radius: 16px; padding: 22px 26px; margin: 6px 0 30px; }
.art-takeaways h2 { font-size: 17px !important; margin: 0 0 12px !important; }
.art-takeaways ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.art-takeaways li { font-size: 15px; display: flex; gap: 10px; line-height: 1.6; }
.art-takeaways li::before { content: '✓'; color: var(--cta-color); font-weight: 800; flex-shrink: 0; }
.art-refs { border-top: 1px solid var(--border); margin-top: 34px; padding-top: 20px; }
.art-refs h2 { font-size: 16px !important; margin: 0 0 10px !important; }
.art-refs ol { font-size: 13.5px; color: var(--text-light); margin-left: 18px; }
.art-refs a { color: var(--cta-color); }
.art-related { background: linear-gradient(135deg, var(--cta-section-start,#173a28), var(--cta-section-end,#2f5d46)); color: var(--on-cta-section,#fff); border-radius: 18px; padding: 30px 30px; margin: 34px 0 6px; }
.art-related h3 { color: var(--on-cta-section,#fff); font-size: 21px; margin-bottom: 8px; }
.art-related p { color: color-mix(in srgb, var(--on-cta-section,#fff) 84%, transparent); font-size: 15px; margin-bottom: 16px; }
.art-related .art-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: var(--accent-text); padding: 13px 28px; border-radius: 50px; font-weight: 800; font-size: 15px; }
.art-related .art-links { margin-top: 14px; font-size: 14px; }
.art-related .art-links a { color: var(--on-cta-section,#fff); font-weight: 700; text-decoration: underline; }
.art-disc { font-size: 12.5px; color: var(--text-light); line-height: 1.7; background: var(--cream); border-radius: 12px; padding: 16px 18px; margin-top: 26px; }
.art .v2-faq-list { max-width: 760px; margin: 24px auto 0; display: grid; gap: 10px; }
.art .v2-faq-item { background: var(--white); border: 1.5px solid var(--border); border-radius: 14px; overflow: hidden; }
.art .v2-faq-question { width: 100%; text-align: left; padding: 16px 20px; display: flex; justify-content: space-between; gap: 16px; font-weight: 700; font-size: 15.5px; color: var(--text); background: none; border: none; cursor: pointer; font-family: inherit; }
.art .v2-faq-answer { display: none; padding: 0 20px 16px; font-size: 15px; color: var(--text-mid); line-height: 1.75; }
.art .v2-faq-item.open .v2-faq-answer { display: block; }
.art .v2-faq-toggle { width: 26px; height: 26px; border-radius: 50%; background: var(--cream); border: 1.5px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--cta-color); flex-shrink: 0; transition: all .2s; }
.art .v2-faq-item.open .v2-faq-toggle { background: var(--cta-color); color: #fff; transform: rotate(45deg); }
.art-faq { background: var(--white); padding: 10px 0 70px; }
.art-faq h2 { text-align: center; font-size: clamp(23px,2.6vw,30px); }

/* ─── In-content article figures (illustrate points / steps) ─── */
.art-body .art-inline { margin: 32px 0; }
.art-body .art-inline img { width: 100%; border-radius: 14px; display: block; box-shadow: 0 8px 28px rgba(26,50,40,0.10); }
.art-body .art-inline figcaption { font-size: 13px; color: var(--text-light); margin-top: 9px; text-align: center; font-style: italic; }
.art-body .art-step { display: flex; gap: 16px; align-items: flex-start; background: var(--cream); border-radius: 14px; padding: 18px 20px; margin: 18px 0; }
.art-body .art-step img { width: 120px; height: 120px; object-fit: cover; border-radius: 10px; flex-shrink: 0; }
.art-body .art-step .art-step-body h3 { margin: 0 0 6px; font-size: 18px; }
.art-body .art-step .art-step-body p { margin: 0; font-size: 15.5px; }
@media (max-width: 600px){ .art-body .art-step { flex-direction: column; } .art-body .art-step img { width: 100%; height: 180px; } }

/* ─────────── Book-a-call FAB + discovery modal ─────────── */
#ntcBookFab { position: fixed; left: 24px; bottom: 24px; z-index: 9998; }
#ntcBookFabBtn { display: inline-flex; align-items: center; gap: 9px; background: var(--accent); color: var(--accent-text, #fff); border: none; cursor: pointer; font-family: inherit; font-weight: 800; font-size: 15px; padding: 13px 22px; border-radius: 50px; box-shadow: 0 6px 20px rgba(0,0,0,.18); transition: transform .2s, box-shadow .2s; }
#ntcBookFabBtn:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,.26); }
#ntcBookFabBtn svg { width: 20px; height: 20px; fill: currentColor; flex-shrink: 0; display: block; }
@media (max-width: 600px){ #ntcBookFab { left: 16px; bottom: 16px; } #ntcBookFabBtn .ntc-fab-label { display: none; } #ntcBookFabBtn { padding: 15px; border-radius: 50%; } }
.ntc-modal { position: fixed; inset: 0; z-index: 10000; display: none; }
.ntc-modal.open { display: block; }
.ntc-modal-overlay { position: absolute; inset: 0; background: rgba(20,30,24,.6); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.ntc-modal-dialog { position: relative; max-width: 560px; margin: 5vh auto; max-height: 90vh; overflow: auto; background: var(--white, #fff); border-radius: 18px; box-shadow: 0 24px 70px rgba(0,0,0,.32); padding: 34px 34px 30px; animation: ntcModalIn .25s ease; }
@keyframes ntcModalIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.ntc-modal-close { position: absolute; top: 12px; right: 16px; background: none; border: none; font-size: 30px; line-height: 1; color: var(--text-light, #888); cursor: pointer; padding: 4px 8px; }
.ntc-modal-close:hover { color: var(--text, #222); }
.ntc-modal-head h2 { font-family: var(--font-heading), 'Nunito', sans-serif; font-weight: 800; font-size: 25px; color: var(--text); margin: 0 0 8px; }
.ntc-modal-head p { font-size: 15px; color: var(--text-mid); margin: 0 0 18px; line-height: 1.6; }
.ntc-modal-body .gform_confirmation_message { font-size: 16px; line-height: 1.7; color: var(--text); padding: 20px 0; }
@media (max-width: 600px){ .ntc-modal-dialog { margin: 0; max-width: none; min-height: 100vh; border-radius: 0; padding: 56px 20px 30px; } }

/* Cookie consent (CookieAdmin) -> slim BOTTOM bar so it never covers the hero CTA.
   The default banner renders the full preference panel (5 category blocks, ~620px tall);
   we hide that bulky detail list by default and keep the clear Accept All / Reject All
   choice, with a non-blocking overlay so the hero CTA stays usable. */
.cookieadmin_cookie_modal,
.cookieadmin_cookie_modal.cookieadmin_center {
  position: fixed !important;
  top: auto !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  transform: none !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  max-height: 40vh !important;
  overflow-y: auto !important;
  padding: 18px 22px !important;
  border-radius: 16px 16px 0 0 !important;
  box-shadow: 0 -12px 40px rgba(0,0,0,0.16) !important;
}
/* hide the bulky per-category detail list -> compact bar (Accept All / Reject All remain) */
.cookieadmin_cookie_modal .cookieadmin_details_wrapper { display: none !important; }
.cookieadmin_modal_footer { margin-top: 6px !important; }
.cookieadmin_modal_overlay { background: transparent !important; pointer-events: none !important; }


/* ══════════════════════════════════════════════════════════════════════════
   PAID-TRAFFIC FIXES  (device QA, 2026-07-13)
   Every Google Ads click is a FIRST visit, so whatever the consent dialog does
   on first paint is what 100% of paid traffic sees. It was covering ~60% of the
   phone screen — the offer, the CTA and the phone number all sat behind it.
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* Consent dialog becomes a compact bottom sheet instead of a full-screen wall,
     so the hero CTA stays visible behind it and the page still reads as an offer. */
  .cookieadmin_cookie_modal {
    top: auto !important;
    bottom: 0 !important;
    max-height: 42vh !important;
    overflow-y: auto !important;
    border-radius: 14px 14px 0 0 !important;
    padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
  }
  .cookieadmin_cookie_modal .cookieadmin_desc {
    font-size: 13px !important;
    line-height: 1.45 !important;
    max-height: 7.5em;
    overflow-y: auto;
  }

  /* The floating cookie-settings launcher was sitting on top of the form's submit
     button — i.e. directly on the one control the whole page exists to get pressed. */
  #cookieadmin_wrapper,
  .cookieadmin_show_pref_cookies {
    z-index: 90 !important;
  }
  .gform_footer,
  .gform_wrapper .gform_footer input[type="submit"] {
    position: relative;
    z-index: 120;
  }

  /* Sticky CTA: keep it clear of the iPhone home indicator / Safari chrome. */
  .mobile-cta-bar {
    bottom: calc(16px + env(safe-area-inset-bottom)) !important;
    z-index: 130;
  }
}

/* iPhone SE and other ~320px screens: the hero ran long enough that the CTA and the
   phone number fell below the fold — the visitor's first screen ended mid-sentence
   with no way to act. Tighten the hero so the offer and both CTAs fit on one screen. */
@media (max-width: 380px) {
  .hero-content { padding: 40px 16px !important; }
  .hero { min-height: 0 !important; }
  .hero h1,
  .hero-content h1 { font-size: 26px !important; line-height: 1.2 !important; }
  .hero-content p { font-size: 15px !important; line-height: 1.45 !important; margin-bottom: 12px !important; }
  .hero-ctas { gap: 10px !important; margin-top: 12px !important; }
  .btn-primary, .btn-secondary { padding: 12px 16px !important; font-size: 15px !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PAID-TRAFFIC FIXES — condition landing pages  (device QA, 2026-07-13)

   Every Google Ads click is a FIRST visit, so whatever the consent dialog does on
   first paint is what 100% of paid traffic sees. Measured on a real iPhone SE, the
   dialog covered ~60% of the screen and the CTA sat 314px BELOW the fold — the
   visitor's first screen was a cookie wall with no way to act behind it.

   NOTE: these target .cd-* (the condition-page template). An earlier pass targeted
   .hero/.hero-content and did nothing at all — those classes aren't on these pages.
   ══════════════════════════════════════════════════════════════════════════ */

/* Consent dialog -> compact bottom sheet. The .cookieadmin_center variant is added
   by the plugin's JS and carries !important, so match both and outrank it. */
@media (max-width: 767px) {
  .cookieadmin_cookie_modal,
  .cookieadmin_cookie_modal.cookieadmin_center {
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 34vh !important;
    overflow-y: auto !important;
    border-radius: 14px 14px 0 0 !important;
    padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;
  }
  .cookieadmin_cookie_modal .cookieadmin_desc {
    font-size: 13px !important;
    line-height: 1.4 !important;
    max-height: 6em;
    overflow-y: auto;
  }

  /* The floating re-consent launcher sits at z-index 99999 and lands on top of the
     form's submit button — the single control the whole page exists to get pressed. */
  .cookieadmin_re_consent { z-index: 70 !important; }
  .gform_wrapper .gform_footer,
  .gform_footer { position: relative; z-index: 140; }

  .mobile-cta-bar {
    bottom: calc(16px + env(safe-area-inset-bottom)) !important;
    z-index: 130;
  }
}

/* Small phones (<=430px, incl. iPhone SE at 320x568).

   Three rounds of measurement on a real SE viewport established the actual constraint:
   a 170px consent sheet + a stacked two-button CTA simply does not fit in 568px. Making
   the sheet slightly shorter and the type slightly smaller never closed the gap.

   So: the consent sheet becomes a SLIM BAR (the details stay, one tap away), the eyebrow
   is dropped, and the hero is genuinely compacted. The CTA and phone are also reordered
   to sit directly under the headline, ahead of the body copy — which is the right order
   for a paid landing page anyway; the offer should not sit behind three paragraphs. */
@media (max-width: 430px) {

  /* Slim consent bar instead of a sheet that swallows the offer.

     The bar is a flex COLUMN with the buttons pinned: the text area scrolls, the
     Accept/Reject row never does. Capping the height alone was not enough — the
     plugin's 20px title ate the whole bar and pushed "Reject All" to y597 on a
     568px screen, i.e. a consent bar you physically could not reject from. */
  .cookieadmin_cookie_modal,
  .cookieadmin_cookie_modal.cookieadmin_center {
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 132px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border-radius: 12px 12px 0 0 !important;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom)) !important;
  }
  /* Everything except the button row may shrink and scroll... */
  .cookieadmin_cookie_modal > *:not(.cookieadmin_modal_footer) {
    flex: 0 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
  }
  /* ...the button row never does. */
  .cookieadmin_cookie_modal .cookieadmin_modal_footer {
    flex: 0 0 auto !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin: 6px 0 0 !important;
  }
  .cookieadmin_preference_title {
    font-size: 13px !important;
    line-height: 1.25 !important;
    margin: 0 0 4px !important;
  }
  .cookieadmin_cookie_modal .cookieadmin_desc {
    font-size: 11px !important;
    line-height: 1.3 !important;
    max-height: 2.6em !important;
    overflow: hidden !important;
    margin: 0 !important;
  }
  .cookieadmin_cookie_modal .cookieadmin_btn {
    padding: 6px 8px !important;
    font-size: 11.5px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  /* Hero: compact, and CTA + phone straight under the headline. */
  .cd-hero { min-height: 0 !important; }
  .cd-hero-content {
    display: flex !important;
    flex-direction: column !important;
    padding: 10px 16px 18px !important;
  }
  .cd-hero-content .eyebrow    { display: none !important; }
  .cd-hero-content h1          { order: 2; font-size: 20px !important; line-height: 1.16 !important; margin: 0 0 8px !important; }
  .cd-hero-content .cd-hero-cta { order: 3; margin: 0 0 6px !important; gap: 6px !important; }
  .cd-hero-content .cd-cta-micro { order: 4; font-size: 11.5px !important; margin: 0 0 8px !important; }
  .cd-hero-content .cd-lead    { order: 5; font-size: 14.5px !important; line-height: 1.4 !important; margin: 0 0 8px !important; }
  .cd-hero-content .cd-trust   { order: 6; margin-top: 2px !important; }
  .cd-hero-content .cd-sub     { display: none !important; }   /* repeats .cd-lead */
  .cd-btn, .cd-btn-ghost       { padding: 10px 14px !important; font-size: 14.5px !important; }

  /* The sticky pill duplicates the hero CTA and was landing on top of the phone button.
     Hide it while the hero is on screen; the hero already carries both controls. */
  .mobile-cta-bar { display: none !important; }
  body.scrolled .mobile-cta-bar { display: inline-flex !important; max-width: calc(100% - 120px) !important; }
}