/* ============================================================
   Feldstein Family Law — Global Stylesheet
   Design system from approved Daedalus templates (v1a-round2).
   Loads on every page. Template-specific CSS layers on top.
   ============================================================ */

/* =========================================
   DESIGN SYSTEM
   ========================================= */
:root {
  --navy: #0c172b;
  --navy-light: #11203a;
  --wine: #892e53;
  --wine-deep: #6e2443;
  --wine-soft: rgba(137, 46, 83, 0.08);
  --cream: #faf9f6;
  --warm: #f5f3ef;
  --border: #e5e2dc;
  --border-light: #edeae4;
  --ink: #1a1a1a;
  --ink-soft: #555;
  --ink-muted: #888;
  --white: #ffffff;

  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  --container-max: 1560px;
  --container-pad: 48px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  --shadow-sm: 0 1px 2px rgba(12, 23, 43, 0.05);
  --shadow-md: 0 4px 16px rgba(12, 23, 43, 0.08);
  --shadow-lg: 0 12px 40px rgba(12, 23, 43, 0.12);
}

/* =========================================
   RESET
   ========================================= */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink);
  background: var(--cream);
  /* `overflow-x: clip` instead of `hidden` — the latter creates a new
     containing block for fixed elements, which breaks position:fixed
     on iOS Safari (the sticky nav fails on mobile). `clip` prevents
     horizontal scroll without breaking fixed positioning. */
  overflow-x: clip;
}
img { max-width: 100%; height: auto; display: block; }

/* Global anchor reset — kills GeneratePress's default underline on every link.
   `!important` is justified here: GP parent theme adds underlines via higher-specificity
   selectors (.entry-content a, .nav a) that we don't want anywhere on this site.
   Article body keeps an intentional underline via post.css overrides. */
a, a:link, a:visited, a:hover, a:active, a:focus {
  color: inherit;
  text-decoration: none !important;
  transition: color .25s var(--ease);
}
/* Article body — the one place where inline links keep an underline for readability. */
.article-prose a, .single-post-content a, .interior-content a, .bio-prose a {
  text-decoration: underline !important;
  text-decoration-color: rgba(137, 46, 83, 0.35);
  text-underline-offset: 3px;
}
.article-prose a:hover, .single-post-content a:hover, .interior-content a:hover, .bio-prose a:hover {
  text-decoration-color: var(--wine) !important;
}
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; }

/* =========================================
   LAYOUT PRIMITIVES
   ========================================= */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}
.skip-link:focus {
  background: var(--navy);
  color: var(--white);
  clip: auto;
  clip-path: none;
  height: auto;
  width: auto;
  padding: 12px 20px;
  z-index: 9999;
  font-weight: 600;
}

/* =========================================
   TYPOGRAPHY
   ========================================= */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--serif);
  color: var(--navy);
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2.5rem, 5vw, 4.5rem); }
h2 { font-size: clamp(2rem, 4vw, 3.25rem); }
h3 { font-size: clamp(1.5rem, 2.5vw, 2.25rem); }
h4 { font-size: clamp(1.25rem, 2vw, 1.75rem); }
h5 { font-size: 1.125rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; font-family: var(--sans); color: var(--navy); }
h6 { font-size: 1rem; font-weight: 600; font-family: var(--sans); color: var(--navy); }

p { margin: 0 0 1em; }

.overline {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--wine);
}

/* =========================================
   NAV
   ========================================= */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 999;
  transition: background .4s var(--ease), box-shadow .4s var(--ease), backdrop-filter .4s var(--ease);
}
.nav.pinned {
  background: rgba(250, 249, 246, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 var(--border);
}
/* When the mobile menu is open, drop backdrop-filter on the pinned nav.
   backdrop-filter on a parent creates a new containing block — which traps
   .nav-links.open's `position: fixed; inset: 0;` inside the small pinned
   nav (~60-80px tall) instead of letting it pin to the viewport. Result:
   the open mobile menu rendered above the visible area when scrolled past
   the hero, only reappearing once the user scrolled back to the top.
   Removing the filter while menu is open restores viewport-relative fixed
   positioning. The visual effect (translucent glass nav) is irrelevant
   here anyway — the menu paints over the entire viewport when open. */
body.menu-open .nav.pinned {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.nav-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px var(--container-pad);
  transition: padding .3s var(--ease);
}
.nav.pinned .nav-inner { padding: 16px var(--container-pad); }

.nav-logo img { height: 44px; width: auto; }

.nav-links { display: flex; align-items: center; gap: 32px; }

/* Primary menu — handles both wp_nav_menu output and the fallback <ul>.
   Same markup either way so styling is identical. */
.nav-links .primary-menu {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 0;
  margin: 0;
}
.nav-links .primary-menu > li {
  position: relative;
}
.nav-links .primary-menu a {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  display: inline-block;
}
.nav-links .primary-menu a:hover { color: var(--wine); }

/* Hover bridge: invisible hit zone that fills the visual gap between the
   parent menu item and its dropdown so the cursor never exits the parent
   <li>'s hover state during traversal. Without this, the dropdown closes
   the moment the cursor enters the gap. */
.nav-links .primary-menu > li.menu-item-has-children::after {
  content: '';
  position: absolute;
  top: 100%;
  left: -20px;
  right: -20px;
  height: 16px;
  pointer-events: auto;
}

/* Sub-menus (dropdowns) — appear on hover/focus of parent <li> */
.nav-links .primary-menu .sub-menu {
  list-style: none;
  position: absolute;
  top: calc(100% + 12px);
  left: -16px;
  display: none;
  flex-direction: column;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 8px 0;
  margin: 0;
  min-width: 220px;
  box-shadow: 0 12px 32px rgba(12, 23, 43, 0.08);
  gap: 0;
  z-index: 1000;
}
.nav-links .primary-menu > li:hover > .sub-menu,
.nav-links .primary-menu > li:focus-within > .sub-menu {
  display: flex;
}
.nav-links .primary-menu .sub-menu li { width: 100%; }
.nav-links .primary-menu .sub-menu a {
  display: block;
  padding: 10px 20px;
  width: 100%;
  font-size: 12px;
  letter-spacing: 1.5px;
}
.nav-links .primary-menu .sub-menu a:hover {
  background: var(--wine-soft);
  color: var(--wine);
}
[data-theme="dark"] .nav-links .primary-menu .sub-menu {
  background: #0d1c28;
  border-color: #1e3549;
}

.nav-phone {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--wine);
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  line-height: 1;
}
.nav-phone:hover { color: var(--wine-deep); }
.nav-phone-icon { flex-shrink: 0; }

.nav-mobile-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 8px;
  position: relative;
  z-index: 999; /* stays clickable above the full-screen open menu */
  cursor: pointer;
  width: 40px;
  height: 40px;
  margin-right: 20px;
}
.nav-mobile-toggle span {
  width: 24px; height: 2px; background: var(--navy); display: block;
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}

/* Burger → X transform when menu is open. Same button doubles as close. */
.nav-mobile-toggle.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-mobile-toggle.open span:nth-child(2) {
  opacity: 0;
}
.nav-mobile-toggle.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}
[data-theme="dark"] .nav-mobile-toggle.open span { background: #e8f0f5; }

@media (max-width: 1024px) {
  .nav-links { display: none; }
  /* Hide the in-nav theme toggle on mobile — the glass FAB at the bottom
     already carries one. Two togglers in the same viewport is noise. The
     FAB's toggle (.mobile-fab-theme) stays untouched. */
  .nav-links .theme-toggle { display: none; }
  .nav-mobile-toggle { display: flex; }
  /* Mobile nav padding — both unscrolled and pinned states matched.
     Without the pinned override, .nav.pinned .nav-inner (no media
     query) would jump to padding 16px 48px when scrolled, breaking
     mobile rhythm. 28px gives the burger comfortable breathing room
     from the right edge without floating it too far inward. */
  .nav-inner,
  .nav.pinned .nav-inner { padding: 14px 28px; }
  /* Mobile logo (60% of desktop) lives in a dedicated media query later in
     the file so it wins the cascade against the .nav-logo img rule below. */

  /* Mobile menu stack — applies when burger toggles `.open` on .nav-links */
  .nav-links.open {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: fixed;
    inset: 0;
    background: var(--cream);
    padding: 90px 24px 40px;
    gap: 20px;
    z-index: 998;
    overflow-y: auto;
  }
  .nav-links.open .primary-menu {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    width: 100%;
  }
  .nav-links.open .primary-menu > li {
    width: 100%;
    border-bottom: 1px solid rgba(12,23,43,0.08);
    padding: 14px 0;
  }
  .nav-links.open .primary-menu > li:last-child {
    border-bottom: none;
  }
  .nav-links.open .primary-menu a {
    font-size: 14px;
    letter-spacing: 1.5px;
  }
  /* Parent items with children get a chevron + tappable wrapper */
  .nav-links.open .primary-menu > li.menu-item-has-children > a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 24px;
  }
  .nav-links.open .primary-menu > li.menu-item-has-children > a::after {
    content: '';
    width: 0; height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid currentColor;
    transition: transform .3s var(--ease);
    flex-shrink: 0;
  }
  .nav-links.open .primary-menu > li.menu-item-has-children.submenu-open > a::after {
    transform: rotate(-180deg);
  }
  /* Sub-menus collapsed by default; revealed when parent has .submenu-open */
  .nav-links.open .primary-menu .sub-menu {
    position: static;
    box-shadow: none;
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    display: none;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
  }
  .nav-links.open .primary-menu > li.menu-item-has-children.submenu-open > .sub-menu {
    display: flex;
    margin-top: 10px;
    padding: 8px 0 4px 16px;
  }
  .nav-links.open .primary-menu .sub-menu li {
    padding: 8px 0;
  }
  .nav-links.open .primary-menu .sub-menu a {
    font-size: 12px;
    letter-spacing: 1px;
    color: var(--ink-soft);
    padding: 0;
  }
  .nav-links.open .primary-menu .sub-menu a:hover {
    background: transparent;
    color: var(--wine);
  }
  /* The parent-li hover-bridge pseudo would steal taps in mobile — disable */
  .nav-links.open .primary-menu > li.menu-item-has-children::after {
    display: none;
  }
  [data-theme="dark"] .nav-links.open { background: #0a1520; }
  [data-theme="dark"] .nav-links.open .primary-menu a { color: #e8f0f5; }
  [data-theme="dark"] .nav-links.open .primary-menu > li { border-bottom-color: rgba(255,255,255,0.08); }
  [data-theme="dark"] .nav-links.open .primary-menu .sub-menu a { color: #b8cbd6; }
}

/* =========================================
   PAGE HERO (global, conditional)
   ========================================= */
.page-hero {
  padding: 180px 0 80px;
  background: var(--cream);
  border-bottom: 1px solid var(--border);
}
.page-hero h1 {
  margin: 16px 0 20px;
  max-width: 24ch;
}
.page-hero-subtitle {
  font-size: 1.2rem;
  color: var(--ink-soft);
  max-width: 60ch;
  line-height: 1.6;
}
.page-hero.hero-gradient {
  background: linear-gradient(135deg, var(--cream) 0%, var(--warm) 100%);
}

/* =========================================
   BUTTONS
   ========================================= */
.btn-primary, .btn-submit {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  background: var(--wine);
  color: var(--white);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  border-radius: var(--radius-md);
  transition: background .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover, .btn-submit:hover {
  background: var(--wine-deep);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  color: var(--white);
}
.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  background: transparent;
  color: var(--navy);
  border: 1px solid var(--navy);
  font-weight: 600;
  border-radius: var(--radius-md);
  transition: background .25s var(--ease), color .25s var(--ease);
}
.btn-secondary:hover { background: var(--navy); color: var(--white); }

/* =========================================
   CONSULTATION CTA (footer)
   ========================================= */
.consult-cta {
  padding: 100px 0;
  background: var(--navy);
  color: var(--cream);
}
.consult-cta h2 { color: var(--cream); }
.consult-cta h2 span { color: var(--wine); font-style: italic; }
.consult-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
.consult-content .overline { color: var(--wine); }
.consult-lede {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-style: italic;
  color: var(--cream);
  margin: 24px 0 16px;
  line-height: 1.4;
}
.consult-form {
  background: var(--cream);
  color: var(--ink);
  padding: 48px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.consult-form h3 { color: var(--navy); margin-bottom: 8px; }
.form-subtitle { color: var(--ink-soft); margin-bottom: 24px; font-size: 0.95rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.form-group { margin-bottom: 16px; }
.form-group label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 6px;
  letter-spacing: 0.5px;
}
.form-group input, .form-group textarea, .form-group select {
  width: 100%;
  padding: 12px 14px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color .25s var(--ease);
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
  outline: none;
  border-color: var(--wine);
}
.form-group textarea { min-height: 120px; resize: vertical; }
.form-trust {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

@media (max-width: 900px) {
  .consult-inner { grid-template-columns: 1fr; gap: 48px; }
  .consult-form { padding: 32px 24px; }
  .form-row { grid-template-columns: 1fr; }
}

/* =========================================
   SITE FOOTER (matches approved Daedalus design)
   ========================================= */
.footer, .site-footer {
  background: var(--navy);
  padding: 60px 48px 40px;
}
.footer-inner {
  max-width: 1560px;
  margin: 0 auto;
  padding: 0;
}
.footer-top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 32px;
}
.footer-brand img { height: 60px; width: auto; opacity: 0.85; margin-bottom: 16px; }
.footer-brand img.footer-logo-light { display: none; }
.footer-brand img.footer-logo-dark { display: block; }
.footer-brand-text { font-size: 0.82rem; line-height: 1.7; color: rgba(255,255,255,0.3); max-width: 320px; margin-bottom: 12px; }
.footer-brand-locations { font-size: 0.88rem; font-weight: 500; color: rgba(255,255,255,0.55); margin-bottom: 20px; line-height: 1.6; }
.footer-social { display: flex; align-items: center; gap: 14px; }
.footer-social a {
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.25);
  transition: color .3s;
}
.footer-social a:hover { color: rgba(255,255,255,0.7); }
.footer-social a svg { width: 18px; height: 18px; }
.footer-col-title {
  font-size: 10px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase;
  color: rgba(255,255,255,0.4); margin-bottom: 16px;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 10px; }
.footer-col a {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.3);
  transition: color .3s;
}
.footer-col a:hover { color: #fff; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
}
.footer-disclaimer-text {
  font-size: 0.72rem; color: rgba(255,255,255,0.18);
  line-height: 1.7; max-width: 700px;
}
.footer-copy {
  font-size: 0.72rem; color: rgba(255,255,255,0.18);
  white-space: unset;
}
.footer-copy a { color: rgba(255,255,255,0.4); transition: color .3s; }
.footer-copy a:hover { color: #fff; }

@media (max-width: 1024px) {
  .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 768px) {
  .footer, .site-footer { padding: 40px 24px 32px; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: 12px; }
  .footer-copy { white-space: unset !important; }
}

/* =========================================
   MOBILE STICKY PHONE BAR
   ========================================= */
.ffl-mobile-phone {
  display: none;
  position: fixed;
  bottom: 16px; left: 50%;
  transform: translateX(-50%);
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  background: var(--wine);
  color: var(--white);
  font-weight: 600;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(12, 23, 43, 0.25);
  z-index: 990;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.ffl-mobile-phone:hover { color: var(--white); }

@media (max-width: 768px) {
  .ffl-mobile-phone { display: inline-flex; }
}

/* =========================================
   ACCESSIBILITY
   ========================================= */
:focus-visible {
  outline: 2px solid var(--wine);
  outline-offset: 3px;
  border-radius: 2px;
}

/* =========================================
   WP CORE SUPPORT
   ========================================= */
.alignleft { float: left; margin: 0 24px 16px 0; }
.alignright { float: right; margin: 0 0 16px 24px; }
.aligncenter { margin: 0 auto 16px; display: block; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 0.9rem; color: var(--ink-soft); margin-top: 8px; text-align: center; }

/* GeneratePress override — kill the 20px bottom margin GP adds to every direct
   child of .site-main. Our sections sit flush by design, so the inherited margin
   creates visible gaps between full-bleed bands. Selector specificity (0,1,2)
   beats GP's (0,1,1). */
body .site-main > *,
body .page-header,
body .sidebar .widget {
  margin-bottom: 0;
}

/* GeneratePress override — kill the 20px outer margin GP wraps around .site-main
   when "separate containers" layout is active. Our sections are full-bleed; the
   margin pushes them off the viewport edge and breaks the design. Specificity
   (0,2,2) beats GP's (0,2,1). */
body.separate-containers .site-main {
  margin: 0;
}

/* ============================================================
   GRAVITY FORMS — scoped to .ffl-gf-form (full Consultation form)
   and .ffl-gf-sidebar (Quick Consult sidebar variant).

   GF's default CSS is dequeued in functions.php; this block paints
   our design onto GF's bare markup (.gform_wrapper, .gfield, etc.)
   so the live form matches the approved static fallback design.
   ============================================================ */

.ffl-gf-form .gform_wrapper {
  font-family: var(--sans);
}
.ffl-gf-form .gform_wrapper form { margin: 0; padding: 0; }
.ffl-gf-form .gform_validation_errors {
  background: var(--wine-soft);
  border: 1px solid var(--wine);
  border-radius: 3px;
  padding: 14px 18px;
  margin-bottom: 20px;
  color: var(--wine-deep);
  font-size: 0.92rem;
}
.ffl-gf-form .gform_validation_errors h2 {
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--wine-deep);
  margin: 0 0 6px;
}
.ffl-gf-form .gform_validation_errors ol { padding-left: 20px; margin: 0; }

/* Field grid — GF 2.5+ Foundation theme runs a 12-column grid driven by
   CSS variables. Don't fight it; tune it.
   - Override the gap variables to our 20px design rhythm.
   - Reset every field to span the full 12 columns by default.
   - Map our .ffl-gf-half class to span 6 (half of GF's 12-col grid). */
.ffl-gf-form,
.ffl-gf-form .gform_wrapper {
  --gf-form-gap-x: 20px;
  --gf-form-gap-y: 20px;
  --gf-ctrl-padding-x: 16px;
  --gf-ctrl-padding-y: 13px;
  --gf-ctrl-border-radius: 2px;
  --gf-ctrl-border-color: var(--border);
  --gf-ctrl-border-color-focus: var(--wine);
  --gf-ctrl-bg-color: #fff;
  --gf-ctrl-color: var(--ink);
  --gf-ctrl-label-color-primary: var(--wine);
  --gf-ctrl-label-color-secondary: var(--ink-soft);
  --gf-color-primary: var(--wine);
  --gf-color-primary-darker: var(--wine-deep);
  --gf-color-primary-contrast: #fff;
}
.ffl-gf-form .gform_wrapper .gform_fields {
  list-style: none;
  padding: 0;
  margin: 0;
  /* Declare the grid explicitly — don't rely on Gravity Forms' plugin CSS to
     provide it. GF's own breakpoint logic doesn't fire at iPhone widths in
     practice, which left .ffl-gf-half children with grid-column: span 6 on
     a non-grid parent — stacking every label at the same x-position.
     Owning the grid here makes the layout deterministic across GF versions. */
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
}
/* Reset per-field width classes GF auto-applies — every field full-width by default */
.ffl-gf-form .gform_wrapper .gform_fields > .gfield {
  grid-column: 1 / -1 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* Half-width fields → span 6 of the 12-column grid */
.ffl-gf-form .gform_wrapper .gform_fields > .gfield.ffl-gf-half {
  grid-column: span 6 !important;
}
.ffl-gf-form .ginput_container {
  width: 100%;
  max-width: none;
}

/* Labels — wine, uppercase, small */
.ffl-gf-form .gfield_label {
  display: block;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--wine);
  margin-bottom: 8px;
}
.ffl-gf-form .gfield_required {
  color: var(--wine);
  font-weight: 600;
  margin-left: 4px;
}
.ffl-gf-form .gfield_required_text { display: none; }

/* Inputs / selects / textareas — match the static fallback exactly.
   `height: auto` + `min-height: 50px` defeats GF Foundation's implicit height
   clamp on native selects which was clipping multi-word option text. */
.ffl-gf-form .ginput_container input[type="text"],
.ffl-gf-form .ginput_container input[type="email"],
.ffl-gf-form .ginput_container input[type="tel"],
.ffl-gf-form .ginput_container input[type="number"],
.ffl-gf-form .ginput_container input[type="url"],
.ffl-gf-form .ginput_container select,
.ffl-gf-form .ginput_container textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 1rem;
  padding: 13px 16px;
  border: 1px solid var(--border);
  border-radius: 2px;
  background-color: #fff;
  color: var(--ink);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  box-shadow: none;
  line-height: 1.5;
  box-sizing: border-box;
  height: auto;
  min-height: 50px;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.ffl-gf-form .ginput_container select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23892e53' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px 8px;
  padding-right: 42px;
  /* Some browsers vertically misalign native select text — these keep it centered + truncate */
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.ffl-gf-form .ginput_container textarea {
  resize: vertical;
  min-height: 110px;
  line-height: 1.6;
}
.ffl-gf-form .ginput_container input::placeholder,
.ffl-gf-form .ginput_container textarea::placeholder {
  color: var(--ink-muted);
  opacity: 1;
}
.ffl-gf-form .ginput_container input:hover,
.ffl-gf-form .ginput_container select:hover,
.ffl-gf-form .ginput_container textarea:hover {
  border-color: #c9c2b5;
}
.ffl-gf-form .ginput_container input:focus,
.ffl-gf-form .ginput_container select:focus,
.ffl-gf-form .ginput_container textarea:focus {
  border-color: var(--wine);
  box-shadow: 0 0 0 3px rgba(137, 46, 83, 0.12);
}

/* Autofill — kill Chrome/Safari yellow tint */
.ffl-gf-form .ginput_container input:-webkit-autofill,
.ffl-gf-form .ginput_container input:-webkit-autofill:hover,
.ffl-gf-form .ginput_container input:-webkit-autofill:focus,
.ffl-gf-form .ginput_container input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 100px #fff inset !important;
  -webkit-text-fill-color: var(--ink) !important;
  caret-color: var(--ink);
  transition: background-color 5000s ease-in-out 0s;
}

/* Field error states */
.ffl-gf-form .gfield_error .ginput_container input,
.ffl-gf-form .gfield_error .ginput_container select,
.ffl-gf-form .gfield_error .ginput_container textarea {
  border-color: var(--wine);
  background-color: rgba(137, 46, 83, 0.04);
}
.ffl-gf-form .gfield_validation_message,
.ffl-gf-form .validation_message {
  font-size: 0.82rem;
  color: var(--wine-deep);
  margin-top: 6px;
  font-style: italic;
}

/* HTML field — helpers and disclaimers */
.ffl-gf-form .gfield--type-html.ffl-gf-helper { margin-top: -10px; margin-bottom: 4px; }
.ffl-gf-form .gfield--type-html.ffl-gf-disclaimer { margin-top: 4px; }
.ffl-gf-form .gfield--type-html .ginput_container { all: unset; }
.ffl-gf-form .gfield--type-html .gfield_label { display: none; }

/* Submit footer + button — GF wraps in either .gform_footer or .gform-footer
   depending on version. Cover both, plus all known submit button classes. */
.ffl-gf-form .gform_footer,
.ffl-gf-form .gform-footer {
  display: block !important;
  margin-top: 16px !important;
  padding: 0 !important;
  width: 100%;
}
.ffl-gf-form .gform_footer button,
.ffl-gf-form .gform-footer button,
.ffl-gf-form .gform_footer input[type="submit"],
.ffl-gf-form .gform-footer input[type="submit"],
.ffl-gf-form button[type="submit"],
.ffl-gf-form input[type="submit"],
.ffl-gf-form .gform_button {
  display: block !important;
  width: 100% !important;
  background: var(--wine) !important;
  color: #fff !important;
  font-family: var(--sans) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  padding: 18px 24px !important;
  border: none !important;
  border-radius: 2px !important;
  cursor: pointer !important;
  transition: background .25s, transform .25s, box-shadow .25s !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
.ffl-gf-form .gform_footer button:hover,
.ffl-gf-form .gform-footer button:hover,
.ffl-gf-form .gform_footer input[type="submit"]:hover,
.ffl-gf-form .gform-footer input[type="submit"]:hover,
.ffl-gf-form button[type="submit"]:hover,
.ffl-gf-form input[type="submit"]:hover,
.ffl-gf-form .gform_button:hover {
  background: var(--wine-deep) !important;
  transform: translateY(-1px);
  box-shadow: 0 12px 32px rgba(137, 46, 83, 0.24) !important;
}

/* Honeypot (spam trap) — must remain fully hidden */
.ffl-gf-form .gform_validation_container,
.ffl-gf-form .gfield_visibility_hidden { display: none !important; }

/* Confirmation message after submit */
.ffl-gf-form .gform_confirmation_wrapper,
.gform_confirmation_message {
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink);
}

/* Sidebar variant — tighter padding + smaller fonts. Form 2 has both
   .ffl-gf-form and .ffl-gf-sidebar classes, so it inherits everything above. */
.ffl-gf-sidebar,
.ffl-gf-sidebar .gform_wrapper {
  --gf-form-gap-x: 12px;
  --gf-form-gap-y: 14px;
  --gf-ctrl-padding-x: 14px;
  --gf-ctrl-padding-y: 11px;
}
.ffl-gf-sidebar .ginput_container input,
.ffl-gf-sidebar .ginput_container select,
.ffl-gf-sidebar .ginput_container textarea { padding: 11px 14px; font-size: 0.92rem; }
.ffl-gf-sidebar .gfield_label { font-size: 0.68rem; letter-spacing: 1.5px; }
.ffl-gf-sidebar .gform_footer button,
.ffl-gf-sidebar .gform-footer button,
.ffl-gf-sidebar input[type="submit"],
.ffl-gf-sidebar .gform_button {
  padding: 16px 20px !important;
  font-size: 12px !important;
  letter-spacing: 2.5px !important;
}

/* Responsive — collapse two-column to one at 600px */
@media (max-width: 600px) {
  .gform-theme--foundation .gform_fields { grid-template-columns: repeat(1, 1fr) !important; }
  .ffl-gf-form .gform_fields,
  .ffl-gf-sidebar .gform_fields { grid-template-columns: 1fr; }
  .ffl-gf-form .gfield.ffl-gf-half,
  .ffl-gf-sidebar .gfield.ffl-gf-half { grid-column: span 1; }
}

/* ----- Dark mode ----- */
[data-theme="dark"] .ffl-gf-form .gfield_label { color: #d99fb5; }
[data-theme="dark"] .ffl-gf-form .gfield_required { color: #d99fb5; }
[data-theme="dark"] .ffl-gf-form .ginput_container input[type="text"],
[data-theme="dark"] .ffl-gf-form .ginput_container input[type="email"],
[data-theme="dark"] .ffl-gf-form .ginput_container input[type="tel"],
[data-theme="dark"] .ffl-gf-form .ginput_container input[type="number"],
[data-theme="dark"] .ffl-gf-form .ginput_container input[type="url"],
[data-theme="dark"] .ffl-gf-form .ginput_container select,
[data-theme="dark"] .ffl-gf-form .ginput_container textarea {
  background-color: #0a1520;
  border-color: #1e3549;
  color: #e8f0f5;
}
[data-theme="dark"] .ffl-gf-form .ginput_container input::placeholder,
[data-theme="dark"] .ffl-gf-form .ginput_container textarea::placeholder { color: #7a9aac; }
[data-theme="dark"] .ffl-gf-form .ginput_container select option { background-color: #0a1520; color: #e8f0f5; }
[data-theme="dark"] .ffl-gf-form .ginput_container input:hover,
[data-theme="dark"] .ffl-gf-form .ginput_container select:hover,
[data-theme="dark"] .ffl-gf-form .ginput_container textarea:hover { border-color: #2a4a68; }
[data-theme="dark"] .ffl-gf-form .ginput_container input:focus,
[data-theme="dark"] .ffl-gf-form .ginput_container select:focus,
[data-theme="dark"] .ffl-gf-form .ginput_container textarea:focus {
  border-color: var(--wine);
  box-shadow: 0 0 0 3px rgba(137, 46, 83, 0.2);
}
[data-theme="dark"] .ffl-gf-form .ginput_container select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23d99fb5' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
[data-theme="dark"] .ffl-gf-form .ginput_container input:-webkit-autofill,
[data-theme="dark"] .ffl-gf-form .ginput_container input:-webkit-autofill:hover,
[data-theme="dark"] .ffl-gf-form .ginput_container input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 100px #0a1520 inset !important;
  -webkit-text-fill-color: #e8f0f5 !important;
  caret-color: #e8f0f5;
}

/* =========================================
   GLOBAL CTA BAND (above-footer, used by interior pages)
   ========================================= */
.cta {
  padding: 120px 0;
  background: linear-gradient(135deg, var(--navy) 0%, #1a1230 50%, var(--wine-deep) 100%);
  text-align: center;
  position: relative;
  overflow: hidden;
  color: #fff;
}
.cta::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 50%, rgba(137,46,83,0.25), transparent 60%);
  pointer-events: none;
}
.cta-inner { position: relative; z-index: 1; max-width: 700px; margin: 0 auto; padding: 0 48px; }
.cta .cta-overline {
  font-family: var(--sans);
  font-size: 0.78rem; font-weight: 600;
  letter-spacing: 3px; text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin: 0 0 20px;
}
.cta h2 {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 4.5vw, 3.6rem);
  font-weight: 500; color: #fff; line-height: 1.1;
  margin-bottom: 20px;
}
.cta p { font-size: 1.1rem; color: rgba(255,255,255,0.75); line-height: 1.75; max-width: 540px; margin: 0 auto 24px; }
.cta-locations {
  font-size: 12px !important; font-weight: 500; letter-spacing: 2px; text-transform: uppercase;
  color: rgba(255,255,255,0.4) !important;
  margin-bottom: 40px !important;
}
.cta-btn {
  display: inline-block; background: var(--navy); color: #fff;
  font-size: 13px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase;
  padding: 18px 48px; border-radius: 2px;
  transition: transform .3s, box-shadow .3s;
}
.cta-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(0,0,0,0.3); }
.cta-response {
  font-size: 0.88rem !important;
  color: rgba(255,255,255,0.55) !important;
  margin-top: 24px !important;
  max-width: none !important;
  letter-spacing: 0.3px;
}

/* =========================================
   GLOBAL LOCATIONS BAND (above-footer)
   ========================================= */
.locations {
  padding: 80px 0;
  background: var(--warm);
}
.locations-header { text-align: center; max-width: 640px; margin: 0 auto 48px; padding: 0 24px; }
.locations-header .overline { margin-bottom: 20px; }
.locations-header h2 {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 500; line-height: 1.18; color: var(--ink);
}
.locations-header p { font-size: 1rem; color: var(--ink-soft); line-height: 1.8; margin-top: 12px; }
.locations-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 0;
  max-width: 1560px; margin: 0 auto;
  padding: 0 48px;
}
.location-card {
  text-align: center; padding: 32px 24px;
  border-right: 1px solid var(--border);
  transition: background .3s;
}
.location-card:hover { background: var(--cream); }
.location-card:last-child { border-right: none; }
.location-card h3 {
  font-family: var(--serif); font-size: 1.2rem; font-weight: 500;
  color: var(--ink); margin-bottom: 10px;
}
.location-card h3 a { color: var(--ink); transition: color .3s; }
.location-card h3 a:hover { color: var(--wine); }
.location-card p { font-size: 0.85rem; line-height: 1.7; color: var(--ink-soft); margin-bottom: 12px; }
.location-card > a {
  font-size: 11px; font-weight: 600; letter-spacing: 2px;
  text-transform: uppercase; color: var(--wine);
  transition: opacity .3s;
}
.location-card > a:hover { opacity: 0.7; }
.communities-served {
  max-width: 1200px; margin: 40px auto 0;
  padding: 36px 48px 0;
  border-top: 1px solid var(--border);
  text-align: center;
}
.communities-served .overline { margin-bottom: 16px; }
.communities-served .communities-list {
  font-size: 0.95rem; line-height: 1.9;
  color: var(--ink-soft);
  max-width: 980px; margin: 0 auto;
}

/* Locations bar (under-hero SEO linkset) */
.locations-bar {
  background: var(--white);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 22px 0;
}
.locations-bar-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px; }
.locations-bar-label {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--ink-muted);
}
.locations-bar-label svg { color: var(--wine); flex-shrink: 0; }
.locations-bar-links { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.locations-bar-links a {
  font-family: var(--serif);
  font-size: 1.05rem; font-weight: 500;
  color: var(--ink);
  padding: 8px 20px; border-radius: 2px;
  transition: background .3s, color .3s;
  position: relative;
}
.locations-bar-links a:not(:last-child)::after {
  content: ''; position: absolute;
  right: -4px; top: 50%; transform: translateY(-50%);
  width: 1px; height: 14px; background: var(--border);
}
.locations-bar-links a:hover { background: var(--wine-soft); color: var(--wine); }

@media(max-width:1024px){
  .locations-grid { grid-template-columns: repeat(2,1fr); }
  .location-card:nth-child(2) { border-right: none; }
  .location-card:nth-child(3), .location-card:nth-child(4) { border-top: 1px solid var(--border); }
  .location-card:nth-child(3) { border-right: 1px solid var(--border); }
}
@media(max-width:768px){
  .cta { padding: 80px 0; }
  .cta-inner { padding: 0 24px; }
  .locations-grid { grid-template-columns: 1fr; padding: 0 24px; max-width: 400px; margin: 0 auto; }
  .location-card { border-right: none !important; border-bottom: 1px solid var(--border); }
  .location-card:last-child { border-bottom: none; }
  .communities-served { margin: 32px 24px 0; padding: 28px 0 0; }
  .communities-served .communities-list { font-size: 0.9rem; line-height: 1.85; }
  .locations-bar { padding: 20px 0; }
  .locations-bar-inner { flex-direction: column; align-items: flex-start; gap: 14px; }
  .locations-bar-links { gap: 4px; }
  .locations-bar-links a { padding: 6px 14px; font-size: 0.95rem; }
  .locations-bar-links a:not(:last-child)::after { display: none; }
}

/* Dark mode for global CTA + Locations bands */
[data-theme="dark"] .locations { background: #0d1c28; }
[data-theme="dark"] .location-card { border-right-color: #1e3549; }
[data-theme="dark"] .location-card:hover { background: #0a1520; }
[data-theme="dark"] .location-card h3 a { color: #e8f0f5; }
[data-theme="dark"] .communities-served { border-top-color: #1e3549; }
[data-theme="dark"] .communities-served .communities-list { color: #b8cbd6; }
[data-theme="dark"] .locations-bar { background: #0d1c28; border-top-color: #1e3549; border-bottom-color: #1e3549; }
[data-theme="dark"] .locations-bar-label { color: #7a9aac; }
[data-theme="dark"] .locations-bar-links a { color: #e8f0f5; }
[data-theme="dark"] .locations-bar-links a:not(:last-child)::after { background: #1e3549; }
[data-theme="dark"] .locations-bar-links a:hover { background: rgba(137,46,83,0.2); color: #e8f0f5; }

/* =========================================
   REVEAL ANIMATIONS (used across templates)
   ========================================= */
.rv { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.rv.vis { opacity: 1; transform: translateY(0); }
.rvd1 { transition-delay: .12s; }
.rvd2 { transition-delay: .24s; }
.rvd3 { transition-delay: .36s; }
.rvd4 { transition-delay: .48s; }

/* =========================================
   THEME TOGGLE — glass pill (light/dark)
   ========================================= */
.theme-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 58px; height: 30px;
  padding: 0;
  background: rgba(137,46,83,0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(137,46,83,0.25);
  border-radius: 999px;
  cursor: pointer;
  transition: background .3s, border-color .3s;
  outline: none;
  flex-shrink: 0;
}
.theme-toggle:hover {
  background: rgba(137,46,83,0.15);
  border-color: rgba(137,46,83,0.4);
}
.theme-toggle:focus-visible {
  box-shadow: 0 0 0 3px rgba(137,46,83,0.3);
}
.theme-toggle-icon {
  position: relative; z-index: 2;
  width: 14px; height: 14px;
  flex-shrink: 0;
  margin: 0 7px;
  transition: color .3s;
  pointer-events: none;
}
.theme-toggle-sun { color: #fff; }
.theme-toggle-moon { color: var(--wine); }
.theme-toggle-thumb {
  position: absolute;
  top: 2px; left: 2px;
  width: 24px; height: 24px;
  background: var(--wine);
  border-radius: 50%;
  transition: transform .35s cubic-bezier(0.34, 1.56, 0.64, 1), background .3s;
  box-shadow: 0 2px 8px rgba(137,46,83,0.35);
  z-index: 1;
}
[data-theme="dark"] .theme-toggle-thumb { transform: translateX(28px); }
[data-theme="dark"] .theme-toggle-sun { color: var(--wine); }
[data-theme="dark"] .theme-toggle-moon { color: #fff; }
[data-theme="dark"] .theme-toggle {
  background: rgba(137,46,83,0.22);
  border-color: rgba(137,46,83,0.5);
}
[data-theme="dark"] .theme-toggle:hover {
  background: rgba(137,46,83,0.32);
  border-color: rgba(137,46,83,0.7);
}

/* Logo swap — color in light mode, white-on-wine in dark */
.nav-logo { position: relative; display: flex; align-items: center; gap: 14px; }
.nav-logo img { display: block; height: 56px; width: auto; transition: opacity .3s; }
.nav-logo .logo-dark { position: absolute; top: 50%; left: 0; transform: translateY(-50%); opacity: 0; }
[data-theme="dark"] .nav-logo .logo-light { opacity: 0; }
[data-theme="dark"] .nav-logo .logo-dark { opacity: 1; }

/* Mobile logo size — placed AFTER the desktop rule above so it wins
   the cascade. Without this, the 56px rule (line above) clobbers the
   mobile media-query rule defined earlier in the file. */
@media (max-width: 1024px) {
  .nav-logo img { height: 34px; }
}

/* =========================================
   DARK MODE — global overrides
   (Section overrides live in template-specific CSS)
   ========================================= */
[data-theme="dark"] {
  --cream:        #0d1c28;
  --warm:         #11212d;
  --white:        #0a1520;
  --border:       #1e3549;
  --border-light: #243f54;
  --ink:          #e8f0f5;
  --ink-soft:     #b8cbd6;
  --ink-muted:    #7a9aac;
  --wine-soft:    rgba(137,46,83,0.18);
}
[data-theme="dark"] body { background: #0a1520; color: #b8cbd6; }

/* =========================================
   MOBILE FAB — bottom-fixed glass action bar
   Layout: [theme toggle] | [Call icon + label] | [Book Consultation]
   Visible on ≤1024px only. Hidden when the mobile menu is open.
   ========================================= */
.mobile-fab {
  display: none;
  position: fixed;
  bottom: 24px;
  /* Center horizontally with content-hugging width.
     left:0 + right:0 + margin:auto is required for fixed-positioned auto-centering.
     max-width keeps a 20px gap from each screen edge if content would otherwise span. */
  left: 0;
  right: 0;
  margin: 0 auto;
  width: fit-content;
  max-width: calc(100% - 40px);
  z-index: 950; /* above content; below mobile menu (998) and header (999) */
  align-items: center;
  gap: 14px;
  /* Symmetric padding — no safe-area-inset-bottom because bottom:24px already
     clears the home indicator, and the inset was creating asymmetric thick
     bottom padding on notched iPhones. */
  padding: 12px 20px;
  background: rgba(250, 249, 246, 0.7);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  box-shadow: 0 12px 40px rgba(12, 23, 43, 0.15), 0 2px 8px rgba(0, 0, 0, 0.04);
}
/* Phantom spacer removed — was eating ~58px of horizontal space and pushing
   the pill against viewport edges on narrow phones. The pill now hugs its
   content (toggle + call link) and centers itself naturally via left:0;
   right:0; margin:0 auto; on the parent. */
.mobile-fab .theme-toggle.mobile-fab-theme {
  flex-shrink: 0;
  margin-right: 0;
}
.mobile-fab-call {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 18px;
  background: transparent;
  color: var(--wine);
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  white-space: nowrap;
  text-decoration: none;
  transition: color .2s;
}
.mobile-fab-call:hover,
.mobile-fab-call:focus-visible {
  color: var(--wine-deep);
  outline: none;
}
.mobile-fab-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--wine);
}
[data-theme="dark"] .mobile-fab-call { color: #f5b7c8; }
[data-theme="dark"] .mobile-fab-call:hover,
[data-theme="dark"] .mobile-fab-call:focus-visible { color: #fff; }
[data-theme="dark"] .mobile-fab-icon { color: #f5b7c8; }

@media (max-width: 1024px) {
  .mobile-fab { display: flex; }
}

/* Hide when mobile menu is open — the full-screen menu would compete */
body.menu-open .mobile-fab { display: none; }

/* Dark mode glass — translucent navy, subtle white border */
[data-theme="dark"] .mobile-fab {
  background: rgba(13, 28, 40, 0.7);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Nav — dark */
[data-theme="dark"] .nav.pinned { background: rgba(10,21,32,0.88); box-shadow: 0 1px 0 #1e3549; }
[data-theme="dark"] .nav-links a:not(.nav-phone) { color: #b8cbd6; }
[data-theme="dark"] .nav-phone { color: #d99fb5; }
[data-theme="dark"] .nav-phone:hover { color: #e8b6c6; }
[data-theme="dark"] .nav-mobile-toggle span { background: #e8f0f5; }

/* Footer — dark (deepest) */
[data-theme="dark"] .site-footer { background: #050e17; border-top: 1px solid #1e3549; }
[data-theme="dark"] .footer-divider { border-top-color: rgba(232,240,245,0.08); }

/* Page hero — dark */
[data-theme="dark"] .page-hero { background: #0a1520; border-bottom-color: #1e3549; }
[data-theme="dark"] .page-hero.hero-gradient { background: linear-gradient(135deg, #0a1520 0%, #11212d 100%); }

/* Smooth theme crossfade — color properties only */
body, .nav, .nav.pinned, .site-footer, .page-hero,
.consult-cta, .consult-form, .btn-primary, .btn-secondary {
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}

/* Scrollbar */
::-webkit-scrollbar              { width: 8px; }
::-webkit-scrollbar-track        { background: var(--cream); }
::-webkit-scrollbar-thumb        { background: var(--border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover  { background: var(--ink-muted); }
[data-theme="dark"] ::-webkit-scrollbar-track { background: #0a1520; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #1e3549; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #2a4a68; }