/* anchor-header.css — DEKA fixed-pill nav + super header + scroll call bar.
   Namespaced (.anchor-*). Tokens + nav CSS ported from deka-header-export;
   super-header / call-bar / scroll-reactive rules are net-new. */

/* ===== (A) Design tokens ===== */
/* ==========================================================================
   Anchor Framework — Design Tokens (variables.css)
   All CSS custom properties for the theme.
   ========================================================================== */

:root {
  /* -----------------------------------------------------------------------
   Brand Colors
   ----------------------------------------------------------------------- */

  --anchor-brand-50: #eef8f8;
  --anchor-brand-100: #d7eeef;
  --anchor-brand-200: #afdde0;
  --anchor-brand-300: #7fc5ca;
  --anchor-brand-400: #4da7af;
  --anchor-brand-500: #1f7f88;
  --anchor-brand-600: #004f59;
  --anchor-brand-700: #003f47;
  --anchor-brand-800: #033239;
  --anchor-brand-900: #05282d;
  --anchor-brand-950: #02171a;

  /* RGB triplets for use in rgba() */
  --anchor-brand-400-rgb: 77, 167, 175;
  --anchor-brand-500-rgb: 31, 127, 136;
  --anchor-brand-600-rgb: 0, 79, 89;

  /* -----------------------------------------------------------------------
   Accent Colors
   ----------------------------------------------------------------------- */
  --anchor-accent-400: #7fd7dc;
  --anchor-accent-500: #49b7bf;
  --anchor-accent-600: #1d8c95;

  /* -----------------------------------------------------------------------
   Surface / Neutral Colors
   ----------------------------------------------------------------------- */
  --anchor-surface-50: #ffffff;
  --anchor-surface-100: #f5faf9;
  --anchor-surface-200: #eaf2f1;
  --anchor-surface-300: #dbe7e5;
  --anchor-surface-400: #c2d3d0;

  /* RGB triplets for use in rgba() */
  --anchor-surface-200-rgb: 234, 242, 241;
  --anchor-surface-300-rgb: 219, 231, 229;

  /* -----------------------------------------------------------------------
   Navy / Dark Colors
   ----------------------------------------------------------------------- */
  --anchor-navy: #05282d;
  --anchor-navy-light: #0a3d45;
  --anchor-navy-dark: #02171a;

  /* RGB triplet */
  --anchor-navy-rgb: 5, 40, 45;

  /* -----------------------------------------------------------------------
     Font Families
     ----------------------------------------------------------------------- */
  /* Body/sans follows the admin "Body" font (Anchor Tools → Site Config → Fonts).
     --anchor-font-heading is intentionally NOT redefined here so the admin's value
     (emitted by the site-config output) wins for headings + chrome titles. */
  --anchor-font-sans: var(--anchor-font-body, "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, sans-serif);
  --anchor-font-drama: "Cormorant Garamond", "Georgia", "Times New Roman", serif;
  --anchor-font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", "Menlo", monospace;

  /* -----------------------------------------------------------------------
     Border Radii
     ----------------------------------------------------------------------- */
  --anchor-radius-lg: 0.75rem; /* 12px */
  --anchor-radius-xl: 1rem; /* 16px */
  --anchor-radius-2xl: 1.5rem; /* 24px */
  --anchor-radius-3xl: 2rem; /* 32px */
  --anchor-radius-4xl: 3rem; /* 48px */
  --anchor-radius-5xl: 4rem; /* 64px */

  /* -----------------------------------------------------------------------
     Container / Spacing
     ----------------------------------------------------------------------- */
  --anchor-container-max: 1440px; /* 1152px — matches nav pill width */
  --anchor-container-narrow: 1440px; /* 896px — for narrower text/contact sections */

  /* -----------------------------------------------------------------------
     Transitions
     ----------------------------------------------------------------------- */
  --anchor-transition-fast: 0.15s;
  --anchor-transition-normal: var(--transition-base); /* 0.3s — aliased to core token */
  --anchor-transition-slow: var(--transition-slow);   /* 0.5s — aliased to core token */

  /* -----------------------------------------------------------------------
     Section Spacing
     ----------------------------------------------------------------------- */
  --anchor-section-py: clamp(3rem, 5vw, 6rem);
  --anchor-section-py-lg: clamp(4rem, 7vw, 8rem);

  /* -----------------------------------------------------------------------
     Shadows
     ----------------------------------------------------------------------- */
  --anchor-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.06);
  --anchor-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.04), 0 2px 4px rgba(0, 0, 0, 0.06);
  --anchor-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.06), 0 4px 6px rgba(0, 0, 0, 0.04);
  --anchor-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.08), 0 8px 10px rgba(0, 0, 0, 0.04);
}

/* ===== (B) DEKA token overrides ===== */
/* ==========================================================================
   DEKA Dental Lasers — editorial/atelier token set.
   Palette:
     #040541  ink (near-black navy)         — primary dark surface + text
     #2b529f  sapphire                      — accent, italics, hairline dots
     #8b8eb2  sapphire-soft                 — secondary neutral
     #f5f4ef  ivory                         — warm base background
     #eae7dd  bone                          — alt warm section background
     oklch(0.72 0.08 80) brass              — warm accent for dark sections
   ========================================================================== */

:root {
    /* Brand ramp — cobalt/sapphire. */
    --anchor-brand-50:  #eef1f9;
    --anchor-brand-100: #d5ddee;
    --anchor-brand-200: #abb9dd;
    --anchor-brand-300: #7f94ca;
    --anchor-brand-400: #5473b5;
    --anchor-brand-500: #2b529f;
    --anchor-brand-600: #1f3e7a;
    --anchor-brand-700: #172f5e;
    --anchor-brand-800: #0f214a;
    --anchor-brand-900: #081339;
    --anchor-brand-950: #040541;

    --anchor-brand-400-rgb: 84, 115, 181;
    --anchor-brand-500-rgb: 43, 82, 159;
    --anchor-brand-600-rgb: 31, 62, 122;

    /* Accent — sapphire-soft slate. */
    --anchor-accent-400: #8b8eb2;
    --anchor-accent-500: #6265a0;
    --anchor-accent-600: #454891;

    /* Surface — warm ivory / bone. */
    --anchor-surface-50:  #ffffff;
    --anchor-surface-100: #f5f4ef;   /* ivory */
    --anchor-surface-200: #eae7dd;   /* bone */
    --anchor-surface-300: #ddd8c9;
    --anchor-surface-400: #b7bccf;

    --anchor-surface-200-rgb: 234, 231, 221;
    --anchor-surface-300-rgb: 221, 216, 201;

    /* Navy surfaces = DEKA ink. */
    --anchor-navy:       #040541;
    --anchor-navy-light: #0a0b4e;
    --anchor-navy-dark:  #02022a;
    --anchor-navy-rgb:   4, 5, 65;

    /* Editorial semantic tokens (consumed by deka-home.css). */
    --deka-ink:            #040541;
    --deka-ink-2:          #0a0b4e;
    --deka-sapphire:       #2b529f;
    --deka-sapphire-soft:  #8b8eb2;
    --deka-ivory:          #f5f4ef;
    --deka-bone:           #eae7dd;
    --deka-bone-2:         #ddd8c9;
    --deka-brass:          oklch(0.72 0.08 80);
    --deka-brass-deep:     oklch(0.58 0.09 75);
    --deka-rule:           rgba(4, 5, 65, 0.14);
    --deka-rule-light:     rgba(245, 244, 239, 0.18);
    --deka-serif:          'Cormorant Garamond', 'Canela', Didot, serif;
    --deka-sans:           'Inter', 'Plus Jakarta Sans', -apple-system, Helvetica, Arial, sans-serif;
    --deka-mono:           'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
}

/* ===== (C) NAV section (ported verbatim from export sections.css 1525-1958) ===== */

/* =======================================================================
   NAV
   ======================================================================= */
.anchor-nav {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  border-radius: 9999px;
  padding: 0.5rem 0.75rem;
  max-width: 1300px;
  width: calc(100% - 2rem);
  top: 2rem;
  transition: all .3s ease;
  border: 1px solid transparent;
}

/* Admin bar offset — WordPress adds 32px margin-top to html when logged in */
.admin-bar .anchor-nav {
  top: calc(2rem + 32px);
}
.admin-bar .anchor-nav--scrolled {
  top: calc(1rem + 32px);
}
@media screen and (max-width: 782px) {
  .admin-bar .anchor-nav {
    top: calc(1rem + 46px);
  }
  .admin-bar .anchor-nav--scrolled {
    top: calc(0.5rem + 46px);
  }
}

.anchor-nav--scrolled {
  top: 1rem;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-color: rgba(var(--anchor-surface-300-rgb), 0.5);
  box-shadow: var(--anchor-shadow-lg);
}

.anchor-nav--open {
  top: 1rem;
  background: transparent;
  border-color: transparent;
}

.anchor-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.anchor-nav__links {
  display: none;
}

.anchor-nav__link {
  /* Reset so <a> and any <button> nav links render identically (no UA chrome). */
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
  font-size: clamp(0.8125rem, 1vw, 0.9375rem);
  font-weight: 500;
  transition: all var(--anchor-transition-normal);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  /* Default state (over hero) */
  color: rgba(255, 255, 255, 0.7);
}

.anchor-nav__link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.anchor-nav__link--active {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

/* Scrolled nav link colors */
.anchor-nav--scrolled .anchor-nav__link {
  color: rgba(var(--anchor-navy-rgb), 0.7);
}

.anchor-nav--scrolled .anchor-nav__link:hover {
  color: var(--anchor-navy);
  background: rgba(var(--anchor-surface-200-rgb), 0.6);
}

.anchor-nav--scrolled .anchor-nav__link--active {
  background: rgba(var(--anchor-brand-500-rgb), 0.1);
  color: var(--anchor-brand-500);
}

/* CTA button in nav */
.anchor-nav__cta {
  padding: 0.5rem 1.25rem;
  border-radius: 9999px;
  font-size: 0.8125rem;
  font-weight: 600;
  transition: all var(--anchor-transition-normal);
  /* Default state */
  background: var(--button-color);
  color: var(--button-text-color, #fff);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: none;
  cursor: pointer;
}

/* Site-standard rotated arrow (points upper-right, straightens on hover).
   Must be inline-block — CSS transforms are ignored on inline boxes. */
.anchor-nav__cta::after {
  content: "\f061"; /* Font Awesome: fa-arrow-right */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.8125rem;
  line-height: 1;
  display: inline-block;
  margin-left: 0.4rem;
  transform: rotate(-45deg);
  transition: transform var(--anchor-transition-normal);
}

.anchor-nav__cta:hover {
  background: var(--button-hover-color);
}

.anchor-nav__cta:hover::after {
  transform: rotate(0deg);
}

.anchor-nav--scrolled .anchor-nav__cta {
  background: var(--button-color);
  color: var(--button-text-color, #fff);
  box-shadow: var(--anchor-shadow-sm);
}

.anchor-nav--scrolled .anchor-nav__cta:hover {
  background: var(--button-hover-color);
}

/* Logo text color swap when nav is scrolled (white bg) */
.anchor-nav--scrolled .anchor-nav__logo-text {
  color: var(--anchor-navy);
}

/* =======================================================================
   DROPDOWN
   ======================================================================= */
.anchor-nav__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  padding-top: 0.75rem;
  z-index: 50;
  /* Animated open/close: opacity + slide. visibility (not display) keeps it
     transitionable; the delayed visibility lets the close fade play out.
     --dd-x is the horizontal anchor (0 by default, -50% for centered mega
     panels); --dd-y is the slide offset that animates to 0 on open. */
  --dd-x: 0px;
  --dd-y: 10px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(var(--dd-x)) translateY(var(--dd-y));
  transition:
    opacity var(--anchor-transition-normal) ease,
    transform var(--anchor-transition-normal) cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear var(--anchor-transition-normal);
}

.anchor-nav__dropdown.is-open {
  --dd-y: 0px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity var(--anchor-transition-fast) ease,
    transform var(--anchor-transition-normal) cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
  .anchor-nav__dropdown {
    --dd-y: 0px;
    transition:
      opacity var(--anchor-transition-fast) ease,
      visibility 0s linear var(--anchor-transition-fast);
  }
  .anchor-nav__dropdown.is-open {
    transition:
      opacity var(--anchor-transition-fast) ease,
      visibility 0s;
  }
}

.anchor-nav__dropdown-inner {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: var(--anchor-radius-2xl);
  border: 1px solid rgba(var(--anchor-surface-300-rgb), 0.5);
  box-shadow: var(--anchor-shadow-xl);
  padding: 0.5rem 0;
  min-width: 260px;
  overflow: hidden;
}

.anchor-nav__dropdown-link {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: var(--anchor-radius-lg);
  font-size: 0.875rem;
  line-height: 1.3;
  color: rgba(var(--anchor-navy-rgb), 0.7);
  transition:
    color var(--anchor-transition-fast),
    background var(--anchor-transition-fast),
    transform var(--anchor-transition-fast);
}

.anchor-nav__dropdown-link:hover {
  color: var(--anchor-brand-500);
  background: var(--anchor-brand-50);
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
  .anchor-nav__dropdown-link:hover {
    transform: none;
  }
}

/* =======================================================================
   HAMBURGER
   ======================================================================= */
.anchor-hamburger {
  display: block;
  padding: 0.5rem;
  border-radius: 9999px;
  background: none;
  border: none;
  cursor: pointer;
}

.anchor-hamburger__bar {
  display: block;
  height: 2px;
  width: 1.25rem;
  border-radius: 9999px;
  transition: all var(--anchor-transition-normal);
  transform-origin: center;
  /* Default: white bars for hero */
  background: #fff;
}

.anchor-hamburger__bar + .anchor-hamburger__bar {
  margin-top: 5px;
}

/* Scrolled state */
.anchor-nav--scrolled .anchor-hamburger__bar {
  background: var(--anchor-navy);
}

/* Open state (always white) */
.anchor-nav--open .anchor-hamburger__bar {
  background: #fff;
}

.anchor-hamburger.is-open .anchor-hamburger__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.anchor-hamburger.is-open .anchor-hamburger__bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.anchor-hamburger.is-open .anchor-hamburger__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* =======================================================================
   MOBILE OVERLAY
   ======================================================================= */
.anchor-mobile-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(var(--anchor-navy-rgb), 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.anchor-mobile-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.anchor-mobile-overlay__spacer {
  height: 10rem;
}

.anchor-mobile-overlay__links {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 2rem;
}

.anchor-mobile-overlay__link {
  display: block;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 1.5rem;
  font-family: var(--anchor-font-heading);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
  transition: color var(--anchor-transition-normal);
}

.anchor-mobile-overlay__link:hover {
  color: var(--anchor-brand-300);
}

.anchor-mobile-overlay__link--active {
  color: var(--anchor-brand-400);
}

.anchor-mobile-overlay__toggle {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  /* Reset native <button> chrome so toggles match the <a> links (no grey box/border). */
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  -webkit-appearance: none;
          appearance: none;
  cursor: pointer;
  text-align: left;
}

/* Drill-down pane: each sub-menu is a full-screen pane that fades + slides in
   from the right, with a back/breadcrumb header (injected by anchor-nav.js).
   Replaces the old inline accordion. Part of the core framework. */
.anchor-mobile-overlay__sub {
  position: fixed;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding: 10rem 2rem 2rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: rgb(var(--anchor-navy-rgb));
  transform: translateX(100%);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease, visibility 0s linear 0.4s;
}

.anchor-mobile-overlay__sub.is-open {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
}

/* Back / breadcrumb header at the top of each pane */
.anchor-mobile-overlay__pane-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  -webkit-appearance: none;
          appearance: none;
  cursor: pointer;
  padding: 0 0 1rem;
  margin-bottom: 0.75rem;
  color: rgba(255, 255, 255, 0.6);
  font-family: var(--anchor-font-heading);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: left;
  transition: color var(--anchor-transition-normal);
}

.anchor-mobile-overlay__pane-head:hover {
  color: #fff;
}

.anchor-mobile-overlay__pane-back {
  width: 0.7rem;
  height: 0.7rem;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  flex: 0 0 auto;
}

.anchor-mobile-overlay__sub-link {
  display: block;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 1.375rem;
  font-family: var(--anchor-font-heading);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
  transition: color var(--anchor-transition-normal);
}

.anchor-mobile-overlay__sub-link:hover {
  color: var(--anchor-brand-400);
}

.anchor-mobile-overlay__bottom {
  flex-shrink: 0;
  padding: 1rem 2rem 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* =======================================================================
   SOCIAL BAR (top-right)
   ======================================================================= */
.anchor-social-bar {
  position: fixed;
  top: 0.75rem;
  right: 1.5rem;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  transition: all var(--anchor-transition-slow);
}

.anchor-social-bar.is-hidden {
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
}

.anchor-social-bar a {
  color: rgba(255, 255, 255, 0.6);
  transition: color var(--anchor-transition-normal);
}

.anchor-social-bar a:hover {
  color: #fff;
}

/* =======================================================================
   NAV — SUPPLEMENTAL (logo images, item wrap, CTA area, mobile icons)
   ======================================================================= */

/* Logo image sizing */
.anchor-nav__logo-img {
  height: 5rem;
  width: auto;
	padding: .5rem
}

/* Logo swap: white over hero, dark when scrolled */
.anchor-nav__logo-dark {
  display: none;
}

.anchor-nav--scrolled .anchor-nav__logo-light {
  display: none;
}

.anchor-nav--scrolled .anchor-nav__logo-dark {
  display: block;
}

/* Logo text (fallback when no logo image) */
.anchor-nav__logo-text {
  font-family: var(--anchor-font-heading);
  font-weight: 700;
  font-size: 1.25rem;
  color: white;
}

/* Dropdown wrapper (position context) */
.anchor-nav__item-wrap {
  position: relative;
}

/* Right-side CTA area */
.anchor-nav__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* Mobile overlay chevron icon — points right to signal "drill into a pane" */
.anchor-mobile-overlay__toggle-icon {
  color: rgba(255, 255, 255, 0.4);
  display: flex;
  align-items: center;
  transform: rotate(-90deg);
}

/* Mobile overlay full-width CTA */
.anchor-mobile-overlay__cta {
  width: 100%;
  justify-content: center;
  padding: 1rem;
  font-size: 1.125rem;
}

/* Mobile overlay social row */
.anchor-mobile-overlay__social {
  margin-top: 1rem;
  display: flex;
  justify-content: center;
  gap: 1rem;
}

/* Mobile overlay social icon circle */
.anchor-mobile-overlay__social-link {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.4);
  transition: all var(--anchor-transition-normal);
}

.anchor-mobile-overlay__social-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
}


/* ===== (D) Nav responsive breakpoints + component utilities ===== */
/* Note: .anchor-nav__actions is styled in section (C) above (it ships with the
   export's nav block, incl. flex-shrink:0) — no duplicate needed here. */

@media (min-width: 768px) {
  .anchor-nav { padding: 0.625rem 1.25rem; }
}

@media (min-width: 1024px) {
  .anchor-nav__links { display: flex; gap: 0.125rem; }
  .anchor-hamburger { display: none; }
  .anchor-hide-desktop { display: none; }
}

/* Visibility utilities (used by the nav CTA) */
.anchor-hide-mobile { display: none; }
@media (min-width: 1024px) { .anchor-hide-mobile { display: block; } }
.anchor-show-mobile { display: block; }
@media (min-width: 1024px) { .anchor-show-mobile { display: none; } }

/* Button + hover-lift utilities (used by mobile overlay CTA + logo) */
.anchor-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1.75rem;
  border-radius: 9999px;
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: -0.01em;
  transition: all var(--anchor-transition-normal);
  cursor: pointer;
  border: none;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  font-family: inherit;
  line-height: 1;
}
.anchor-btn--primary {
  background: var(--button-color);
  color: var(--button-text-color, #fff);
}
.anchor-btn--primary:hover {
  background: var(--button-hover-color);
}
.anchor-hover-lift {
  transition: transform var(--anchor-transition-normal);
}
.anchor-hover-lift:hover {
  transform: translateY(-2px);
}

/* ===== (E) Super header / call bar / scroll-reactive ===== */

/* --- Super header: address left, socials right --- */
.anchor-super-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  background: var(--primary-color);
  font-family: var(--anchor-font-sans);
  font-size: 1.0156rem; /* 125% of the original 0.8125rem */
  line-height: 1;
  color: #fff;
  transition: transform var(--anchor-transition-slow), opacity var(--anchor-transition-slow);
}
.anchor-super-header__inner {
  max-width: 1300px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: 0.45rem 1.75rem;
  margin: 0 auto;
}
.anchor-super-header__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.82);
  min-width: 0;
}
.anchor-super-header__item--start  { justify-self: start; }
.anchor-super-header__item--center { justify-self: center; }
.anchor-super-header__item--end    { justify-self: end; }
.anchor-super-header__item i { font-size: 13px; opacity: 0.85; }
.anchor-super-header__label { font-weight: 600; color: #fff; }
.anchor-super-header__phone {
  color: inherit;
  text-decoration: none;
  transition: color var(--anchor-transition-normal);
}
a.anchor-super-header__phone:hover { color: #fff; }
.admin-bar .anchor-super-header { top: 32px; }
@media screen and (max-width: 782px) { .admin-bar .anchor-super-header { top: 46px; } }
@media (max-width: 880px) { .anchor-super-header { display: none; } }

/* --- Scroll-reactive call bar (fixed top, inert until revealed) --- */
.anchor-call-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 55;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.6rem 1.5rem;
  background: rgba(var(--anchor-navy-rgb), 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--anchor-shadow-lg);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity var(--anchor-transition-normal), transform var(--anchor-transition-normal);
}
.anchor-call-bar__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--anchor-font-sans);
  font-weight: 600;
  font-size: 0.95rem;
  color: #fff;
  text-decoration: none;
  padding: 0.4rem 1.4rem;
  border-radius: 9999px;
  background: var(--button-color);
  transition: background var(--anchor-transition-normal);
}
.anchor-call-bar__btn:hover { background: var(--button-hover-color); }
/* Secondary (emergency) button: outlined so it reads as the supporting action. */
.anchor-call-bar__btn--secondary {
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}
.anchor-call-bar__btn--secondary:hover {
  background: rgba(255, 255, 255, 0.12);
}
/* Groups the label + number so they flow as one unit beside the icon. */
.anchor-call-bar__content {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.anchor-call-bar__label { opacity: 0.85; }
.admin-bar .anchor-call-bar { top: 32px; }
@media screen and (max-width: 782px) { .admin-bar .anchor-call-bar { top: 46px; } }

/* Mobile: stack the label above the number as a column sitting next to the icon. */
@media (max-width: 600px) {
  .anchor-call-bar__content {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.05rem;
    line-height: 1.15;
  }
}

/* --- Driver class: scrolled past threshold AND scrolling down --- */
/* Nav pill keeps its translateX(-50%) centering; add vertical hide on top. */
body.anchor-nav-hidden .anchor-nav {
  transform: translateX(-50%) translateY(-200%);
}
body.anchor-nav-hidden .anchor-super-header {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}
body.anchor-nav-hidden .anchor-call-bar {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* Fade the super header out once the page is merely scrolled (matches the
   export's social-bar behavior), independent of direction. */
body.anchor-scrolled .anchor-super-header {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

/* ===== Mega menu — wide multi-column dropdown panel =====
   Add the .anchor-nav__dropdown--mega modifier to a .anchor-nav__dropdown and
   fill its inner with .anchor-nav__mega-col columns (each an optional
   .anchor-nav__mega-title heading + .anchor-nav__dropdown-link links). */
/* Center the mega panel under its trigger instead of left-anchoring it (which
   threw a wide panel off to the right). --dd-x feeds the shared transform. */
.anchor-nav__dropdown--mega {
  left: 50%;
  --dd-x: -50%;
}
.anchor-nav__dropdown--mega .anchor-nav__dropdown-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  /* width:max-content lays every column out on one row (the absolutely-positioned
     panel was otherwise shrinking to its narrow containing block and stacking the
     columns vertically). The max-width cap still lets it wrap on small screens. */
  width: max-content;
  max-width: calc(100vw - 1.5rem);
  padding: 1.25rem 1.25rem;
}
.anchor-nav__mega-col {
  display: flex;
  flex-direction: column;
  min-width: 170px;
}
.anchor-nav__mega-title {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.3;
  white-space: nowrap;
  color: rgba(var(--anchor-navy-rgb), 0.45);
  padding: 0.25rem 0.75rem;
  margin-bottom: 0.15rem;
}
/* Keep each service on a single line — wrapping at narrow column widths was the
   source of the ragged two-line items and the inflated line height. */
.anchor-nav__dropdown--mega .anchor-nav__dropdown-link {
  white-space: nowrap;
}
/* Column headings that are also links (Cosmetic / Family / Restorative). */
.anchor-nav__mega-title--link {
  text-decoration: none;
  cursor: pointer;
  transition: color var(--anchor-transition-fast);
}
.anchor-nav__mega-title--link:hover {
  color: var(--anchor-brand-500);
}