/*
Theme Name: Stevie Morris
Theme URI: https://example.com
Description: Content-agnostic lead-gen starter theme. Look & feel only; pages are built as Custom HTML blocks. Customise per client via the Design Studio.
Version: 2.0.0
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(232, 243, 235, 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: 2fr 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(--navy);
  color: white;
  padding: 60px 0;
}
.page-hero-band h1 {
  font-family: var(--font-heading);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 8px;
}
.page-hero-band .breadcrumb {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
}
.page-hero-band .breadcrumb a {
  color: rgba(255,255,255,0.6);
  transition: color 0.2s;
}
.page-hero-band .breadcrumb a:hover { color: white; }

.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 {
  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: 600;
  color: var(--navy);
  margin-bottom: 10px;
  line-height: 1.35;
}
.post-card-excerpt {
  font-size: 14px;
  color: var(--text-mid);
  line-height: 1.65;
  margin-bottom: 16px;
}
.post-card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--teal);
  transition: gap 0.2s;
}
.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); }

/* ===== BRAND OVERRIDE — match Facebook brand (Ink / Bone / Volt) + Inter Tight ===== */
:root{
  --navy:#16161a; --navy-light:#3a3a40; --teal:#c6f24e; --green-cta:#c6f24e; --green-cta-hover:#b2e03a;
  --cta-color:#16161a; --cta-hover:#000000; --gold:#c6f24e; --gold-light:#ece7db;
  --cream:#ece7db; --white:#f4f1ea; --text:#16161a; --text-mid:#2c2c30; --text-light:#6b6b66; --border:#d8d3c6;
  --nav-bg:rgba(244,241,234,0.97); --nav-text:#16161a; --primary-dark:#0e0e11; --primary-mid:#16161a;
  --overlay-heavy:rgba(22,22,26,.90); --overlay-mid:rgba(22,22,26,.72); --overlay-light:rgba(22,22,26,.40); --photo-overlay:rgba(22,22,26,.85);
  --footer-bg:#ece7db; --cta-section-start:#16161a; --cta-section-end:#1d1d22;
  --quote-gradient:linear-gradient(135deg,#16161a,#2a2b2f); --mobile-nav-bg:rgba(22,22,26,.98); --dropdown-bg:#f4f1ea;
  --font-heading:'Inter Tight',-apple-system,sans-serif; --font-body:'Inter',-apple-system,sans-serif; --font-mono:'JetBrains Mono',monospace;
}
/* premium brand logo lockup */
.sm-brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.sm-brand-mark{width:42px;height:42px;display:block;flex-shrink:0}
.sm-brand-text{display:flex;flex-direction:column;line-height:1}
.sm-brand-name{font-family:'Inter Tight',sans-serif;font-weight:900;font-size:1.3rem;letter-spacing:-.02em;color:#16161a}
.sm-brand-tag{font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:#6b6b66;margin-top:4px}
.sm-brand:hover .sm-brand-mark{transform:translateY(-1px);transition:.18s}
@media(max-width:520px){.sm-brand-tag{display:none}.sm-brand-name{font-size:1.1rem}}

/* accent + derived brand tokens (belt & braces over Design Studio) */
:root{
  --accent:#c6f24e; --accent-hover:#b2e03a; --accent-text:#16161a;
  --cta-text:#f4f1ea; --cta-section-start:#16161a; --cta-section-end:#1d1d22;
}

/* adaptive logo — flips automatically with the nav background tokens */
.sm-brand-mark .m-tile{fill:var(--nav-text,#16161a)}      /* tile = nav text colour (ink on light nav, bone on dark) */
.sm-brand-mark .m-letters{fill:var(--nav-bg,#f4f1ea)}     /* letters = nav background (inverse of tile) */
.sm-brand-mark .m-bar{fill:var(--accent,#c6f24e)}         /* Volt underscore — constant */
.sm-brand .sm-brand-name{color:var(--nav-text,#16161a)}
.sm-brand .sm-brand-tag{color:var(--text-light,#6b6b66)}

/* ===== Dropdown hover-intent — linger ~0.35s on mouse-out + bridge the gap ===== */
.nav-links .sub-menu{display:block!important;visibility:hidden;opacity:0;
  transition:opacity .2s ease, visibility .2s ease; transition-delay:.35s}
.nav-links li.mega-menu > .sub-menu{display:grid!important}
.nav-links li:hover > .sub-menu,
.nav-links li:focus-within > .sub-menu{visibility:visible!important;opacity:1!important;transition-delay:0s}
/* invisible bridge so moving the cursor down doesn't leave the hover area */
.nav-links li:has(> .sub-menu)::after{content:"";position:absolute;left:0;right:0;top:100%;height:20px}
.nav-links li.mega-menu:has(> .sub-menu)::after{left:0;right:0}

/* ===== Services mega-menu — image cards ===== */
.site-nav,.nav-inner{position:relative}
.nav-links li.mega-menu > .sub-menu{
  grid-template-columns:repeat(3,1fr); gap:14px; max-width:980px; margin:0 auto; padding:20px;
  background:var(--white,#f4f1ea); border:1px solid var(--border,#d8d3c6);
  box-shadow:0 18px 44px rgba(22,22,26,.16);
}
.nav-links li.mega-menu .sm-mega-card{padding:0;margin:0}
.nav-links li.mega-menu .sm-mega-card > a{
  display:flex!important; gap:13px; align-items:center; padding:12px!important; height:100%;
  border-radius:10px; background:#fff; border:1px solid transparent; transition:.16s; text-align:left;
}
.nav-links li.mega-menu .sm-mega-card > a:hover{border-color:var(--border,#d8d3c6);background:var(--cream,#ece7db);transform:translateY(-2px)}
.sm-mc-img{width:62px;height:62px;border-radius:8px;background-size:cover;background-position:center;flex-shrink:0;background-color:var(--cream,#ece7db)}
.sm-mc-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.sm-mc-title{font-family:var(--font-heading,sans-serif);font-weight:800;font-size:1rem;line-height:1.1;color:var(--text,#16161a)}
.sm-mc-desc{font-size:.82rem;line-height:1.35;color:var(--text-light,#6b6b66);white-space:normal}
@media(max-width:900px){.nav-links li.mega-menu > .sub-menu{grid-template-columns:1fr;max-width:none}}

/* ===== Gravity Forms — brand styling (Ink / Bone / Volt) ===== */
.sm-formsec .sm-form{background:#fff;border:1px solid var(--border,#d8d3c6);border-radius:16px;padding:34px;box-shadow:0 14px 40px rgba(22,22,26,.08)}
.gform_wrapper .gform_required_legend{display:none}
.gform_wrapper .gfield{margin-bottom:18px}
.gform_wrapper .gfield_label{font-family:var(--font-heading,sans-serif);font-weight:700;font-size:.92rem;color:var(--text,#16161a);margin-bottom:7px;display:block}
.gform_wrapper .gfield_required{color:var(--text,#16161a);margin-left:3px}
.gform_wrapper input[type=text],.gform_wrapper input[type=email],.gform_wrapper input[type=tel],
.gform_wrapper textarea,.gform_wrapper select{
  width:100%!important;box-sizing:border-box;font-family:var(--font-body,sans-serif);font-size:1rem;color:var(--text,#16161a);
  background:var(--white,#f4f1ea);border:1.5px solid var(--border,#d8d3c6);border-radius:10px;padding:13px 15px;transition:.15s;box-shadow:none}
.gform_wrapper input:focus,.gform_wrapper textarea:focus,.gform_wrapper select:focus{
  border-color:var(--text,#16161a);background:#fff;outline:none;box-shadow:0 0 0 3px rgba(198,242,78,.55)}
.gform_wrapper textarea{min-height:140px;resize:vertical}
.gform_wrapper .gform_footer{margin-top:10px}
.gform_wrapper .gform_footer input[type=submit],.gform_wrapper .gform_footer button,.gform_wrapper .gform_button{
  background:var(--accent,#c6f24e)!important;color:#16161a!important;font-family:var(--font-heading,sans-serif)!important;font-weight:800!important;
  border:none!important;border-radius:9px!important;padding:15px 34px!important;font-size:1rem!important;cursor:pointer;transition:.16s;width:auto!important;letter-spacing:-.01em}
.gform_wrapper .gform_footer input[type=submit]:hover,.gform_wrapper .gform_button:hover{filter:brightness(1.08);transform:translateY(-1px)}
.gform_wrapper .validation_message,.gform_wrapper .gfield_validation_message{color:#c0392b;font-size:.85rem;margin-top:6px}
.gform_wrapper .gfield_error input,.gform_wrapper .gfield_error textarea{border-color:#c0392b!important}
.gform_confirmation_message{font-family:var(--font-heading,sans-serif);font-size:1.1rem;color:var(--text,#16161a);background:var(--cream,#ece7db);border-left:4px solid var(--accent,#c6f24e);padding:22px 26px;border-radius:12px}
.sm-formsec .sm-form h2{margin-bottom:8px}