/* ============================================================
   MERCEDES CLEANING — MAIN STYLESHEET
   Commercial Cleaning | Sydney, Australia
   ============================================================ */

/* ============================================================
   1. CSS DESIGN TOKENS
   ============================================================ */
:root {
  /* Client brand palette (mercedes-cleaning-website.html) */
  --teal:        #007c89;
  --teal-dark:   #005962;
  --teal-soft:   #ddf3f1;
  --teal-pale:   #eef5f6;
  --navy:        #123a4a;
  --navy-dark:   #0d2d39;
  --green:       #18a558;
  --green-dark:  #128646;
  --cream:       #f8faf9;
  --gold:        #c9a961;
  --ink:         #1f2933;
  --slate-200:   #e2e8f0;
  --slate-500:   #64748b;
  --slate-600:   #475569;
  --slate-700:   #334155;

  /* Theme tokens (mapped for existing CSS) */
  --color-bg:              var(--cream);
  --color-surface:         #ffffff;
  --color-surface-hover:   var(--teal-pale);
  --color-surface-raised:  #ffffff;
  --color-panel-dark:      var(--navy);

  --color-emerald:         var(--teal);
  --color-cyan:            var(--teal-soft);
  --color-blue:            #93c5fd;
  --color-green:           var(--green);
  --color-green-dark:      var(--green-dark);
  --color-navy:            var(--navy);

  --color-text:            var(--navy);
  --color-text-secondary:  var(--slate-600);
  --color-text-muted:      var(--slate-500);
  --color-text-dark:       #ffffff;
  --color-text-on-dark:    #ffffff;

  --color-border:          var(--slate-200);
  --color-border-accent:   rgba(0, 124, 137, 0.35);

  --gradient-accent:       linear-gradient(135deg, var(--teal), var(--teal-dark));
  --gradient-brand:        linear-gradient(135deg, var(--teal), var(--teal-dark));
  --gradient-glow-emerald: radial-gradient(circle, rgba(0, 124, 137, 0.15) 0%, transparent 70%);
  --gradient-glow-blue:    radial-gradient(circle, rgba(24, 165, 88, 0.12) 0%, transparent 70%);
  --gradient-glow-teal:    radial-gradient(circle, rgba(221, 243, 241, 0.8) 0%, transparent 70%);

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, sans-serif;
  --font-display: var(--font-sans);

  --radius-sm:   0.75rem;
  --radius-md:   0.875rem;
  --radius-lg:   1rem;
  --radius-xl:   1.5rem;
  --radius-full: 9999px;

  --shadow-card: 0 20px 50px -10px rgba(15, 46, 65, 0.12);
  --shadow-btn:  0 4px 14px rgba(24, 165, 88, 0.3);

  --transition: 0.25s ease;
  --transition-md: 0.35s cubic-bezier(0.4, 0, 0.2, 1);

  --section-padding: 90px;
  --container-max:   1200px;
  --topbar-height:   40px;
  --header-height:   128px;
  --header-offset:   80px;
}

/* ============================================================
   2. RESET & BASE
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-bg);
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

/* Page-level ambient glow */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 55% 45% at 85% 5%,   var(--teal-soft) 0%, transparent 55%),
    radial-gradient(ellipse 45% 40% at 5% 90%,   #e7f6ea 0%, transparent 55%);
}

body > * {
  position: relative;
  z-index: 1;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.04em;
  color: var(--color-navy);
  margin: 0 0 0.5em;
}

/* Type scale — modular ratio ~1.25, fluid clamp() for responsive sizing.
   Component classes (.hero-title, .section-title, .mc-process__title…)
   override these when a specific size is needed. */
h1 { font-size: clamp(2.25rem, 5vw, 3.5rem);    line-height: 1.05; }   /* 36 → 56px */
h2 { font-size: clamp(1.875rem, 4vw, 2.75rem);  line-height: 1.1;  }   /* 30 → 44px */
h3 { font-size: clamp(1.375rem, 2.5vw, 1.75rem); line-height: 1.2; }   /* 22 → 28px */
h4 { font-size: clamp(1.125rem, 1.8vw, 1.375rem); line-height: 1.25; } /* 18 → 22px */
h5 { font-size: 1.0625rem; line-height: 1.3; letter-spacing: -0.02em; } /* 17px */
h6 { font-size: 0.9375rem; line-height: 1.4; letter-spacing: 0;       } /* 15px */

p {
  color: var(--color-text-secondary);
  margin: 0 0 1em;
}

/* Avoid extra trailing space when a paragraph is the last child of a
   container (cards, hero text, table cells, Elementor widgets, etc.). */
p:last-child {
  margin-bottom: 0;
}

/* ============================================================
   3. UTILITIES
   ============================================================ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.section-padding {
  padding-top: var(--section-padding);
  padding-bottom: var(--section-padding);
}

/* ============================================================
   4. TYPOGRAPHY SCALE
   ============================================================ */
.section-tag,
.section-tag--on-dark {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.5em 1em;
  border-radius: var(--radius-full);
  border: 1px solid #bfe4e6;
  background: #ffffff;
  color: var(--teal);
  margin-bottom: 1rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.section-tag--on-dark {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
  color: #8de1d8;
  box-shadow: none;
}

.section-header {
  margin-bottom: 3rem;
}

.section-title {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 900;
  letter-spacing: -0.05em;
  color: var(--color-text-dark);
  line-height: 1.1;
}

.section-title-white {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-navy);
  line-height: 1.1;
}

.section-subtitle {
  margin-top: 0.75rem;
  font-size: 1.0625rem;
  color: var(--color-text-muted);
  max-width: 56ch;
  line-height: 1.65;
}

.section-subtitle-white {
  margin-top: 0.75rem;
  font-size: 1.0625rem;
  color: var(--slate-600);
  max-width: 56ch;
  line-height: 1.65;
}

/* ============================================================
   5. BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-md);
  border: 1.5px solid transparent;
  text-decoration: none;
  transition: transform var(--transition), box-shadow var(--transition),
              background var(--transition), border-color var(--transition);
  white-space: nowrap;
  cursor: pointer;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-primary {
  background: var(--color-green);
  color: var(--color-text-dark);
  border-color: var(--color-green);
  box-shadow: var(--shadow-btn);
}

.btn-primary:hover {
  background: var(--color-green-dark);
  border-color: var(--color-green-dark);
  box-shadow: 0 6px 20px rgba(24, 165, 88, 0.4);
}

.btn-outline-dark {
  background: #ffffff;
  color: var(--teal);
  border: 2px solid var(--teal);
}

.btn-outline-dark:hover {
  background: var(--teal-pale);
  border-color: var(--teal);
  color: var(--teal-dark);
}

.btn-lg {
  font-size: 1.0625rem;
  padding: 0.9375rem 2rem;
  border-radius: var(--radius-lg);
}

/* ============================================================
   6. TOP BAR — tagline left | phone + email + social right
   ============================================================ */
.top-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1100;
  height: var(--topbar-height);
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--slate-200);
  display: flex;
  align-items: center;
  transition: transform var(--transition-md);
}

.top-bar.hidden {
  transform: translateY(-100%);
}

.top-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 1rem;
}

.top-bar-left {
  display: flex;
  align-items: center;
  min-width: 0;
}

.top-bar-tagline {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.top-bar-tagline i {
  color: var(--color-emerald);
  font-size: 0.65rem;
  flex-shrink: 0;
}

.top-bar-right {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-shrink: 0;
}

.top-bar-link {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color var(--transition);
  white-space: nowrap;
}

.top-bar-link i {
  color: var(--color-emerald);
  font-size: 0.7rem;
  flex-shrink: 0;
}

.top-bar-link:hover {
  color: var(--color-emerald);
}

.top-bar-social {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-left: 1rem;
  border-left: 1px solid var(--color-border);
}

.top-bar-social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 0.7rem;
  text-decoration: none;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition);
}

.top-bar-social-icon:hover {
  background: rgba(110,231,183,0.12);
  color: var(--color-emerald);
  border-color: var(--color-border-accent);
}

/* ============================================================
   7. SITE HEADER — logo | nav (centre) | phone + CTA
   ============================================================ */
.site-header {
  position: fixed;
  top: var(--topbar-height);
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--header-height);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--slate-200);
  transition: background var(--transition-md), box-shadow var(--transition-md),
              top var(--transition-md);
}

.site-header.scrolled {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 4px 24px rgba(15, 46, 65, 0.08);
}

/* When top-bar hides on scroll, header moves up */
.site-header.top-hidden {
  top: 0;
}

.site-header .container {
  height: 100%;
}

/* Three-column inner: logo | nav | actions */
.header-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 2rem;
  height: 100%;
}

/* ── Logo ── */
.header-logo {
  flex-shrink: 0;
}

.custom-logo-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
}

.custom-logo-link img {
  height: 110px;
  width: auto;
  max-width: 100%;
  max-height: 110px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

.footer-brand .custom-logo-link img,
.footer-brand .footer-logo-link img {
  height: 92px !important;
  width: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  display: block;
}

.logo-mark {
  width: 42px;
  height: 42px;
  border-radius: 0.625rem;
  background: var(--gradient-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--color-text-dark);
  flex-shrink: 0;
  letter-spacing: -0.05em;
  box-shadow: 0 4px 16px rgba(110,231,183,0.25);
}

.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.logo-text-primary {
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: var(--color-text);
}

.logo-text-secondary {
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* ── Navigation (centred) ── */
.main-nav,
.site-nav {
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-list {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0.125rem;
}

.nav-item {
  position: relative;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.5rem 0.875rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  border-radius: var(--radius-sm);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition), background var(--transition);
}

.nav-link:hover,
.nav-link.active,
.current-menu-item > .nav-link,
.current-menu-ancestor > .nav-link {
  color: var(--teal);
  background: var(--teal-pale);
}

.nav-link-icon {
  font-size: 0.75rem;
  color: var(--color-emerald);
  opacity: 0.7;
  flex-shrink: 0;
}

/* Desktop dropdown */
.nav-item > .sub-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  min-width: 230px;
  background: #ffffff;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-md);
  padding: 0.375rem;
  list-style: none;
  margin: 0;
  z-index: 1200;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition), transform var(--transition),
              visibility var(--transition);
  box-shadow: 0 20px 50px rgba(15, 46, 65, 0.12);
}

.nav-item:hover > .sub-menu,
.nav-item:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Dropdown arrow indicator */
.nav-item > .sub-menu::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  background: #ffffff;
  border-left: 1px solid var(--slate-200);
  border-top: 1px solid var(--slate-200);
}

.nav-item .sub-menu li {
  list-style: none;
}

.nav-item .sub-menu a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.875rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  border-radius: var(--radius-sm);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition), background var(--transition);
}

.nav-item .sub-menu a:hover {
  color: var(--color-emerald);
  background: rgba(110,231,183,0.08);
}

/* Chevron for parent items (explicit element injected by nav-icons.php) */
.nav-link-chevron {
  font-size: 0.6rem;
  color: var(--color-text-muted);
  margin-left: 0.2rem;
  transition: transform var(--transition), color var(--transition);
  display: inline-block;
}

.menu-item-has-children:hover > .nav-link .nav-link-chevron {
  transform: rotate(180deg);
  color: var(--color-emerald);
}

/* ── Right actions: phone + CTA + hamburger ── */
.header-actions {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  flex-shrink: 0;
}

.header-phone {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  padding: 0.4375rem 0.875rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  transition: background var(--transition), border-color var(--transition);
}

.header-phone:hover {
  background: var(--color-surface);
  border-color: var(--color-border-accent);
}

.header-phone-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(110,231,183,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.header-phone-icon i {
  font-size: 0.75rem;
  color: var(--color-emerald);
}

.header-phone-text {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: 0.01em;
}

.header-cta {
  font-size: 1rem;
  font-weight: 800;
  padding: 0.8125rem 1.875rem;
  border-radius: var(--radius-full);
  letter-spacing: 0.02em;
  color: #ffffff;
  background: linear-gradient(135deg, var(--green) 0%, var(--green-dark) 100%);
  border-color: transparent;
  box-shadow:
    0 4px 16px rgba(24, 165, 88, 0.35),
    0 1px 2px rgba(18, 58, 74, 0.08);
  flex-shrink: 0;
}

.header-cta:hover {
  color: #ffffff;
  background: linear-gradient(135deg, #1db865 0%, var(--green) 100%);
  border-color: transparent;
  box-shadow: 0 8px 24px rgba(24, 165, 88, 0.45);
}

.header-cta:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(24, 165, 88, 0.3);
}

/* ── Mobile-only quick call button — circular, icon-only, with pulse ── */
.header-call-btn {
  position: relative;
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--green) 0%, var(--green-dark) 100%);
  color: #ffffff;
  text-decoration: none;
  flex-shrink: 0;
  box-shadow:
    0 6px 16px rgba(24, 165, 88, 0.40),
    inset 0 1px 0 rgba(255, 255, 255, 0.20);
  transition:
    transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.25s ease,
    background 0.25s ease;
  overflow: visible;
  isolation: isolate;
}

/* Phone icon */
.header-call-btn i {
  position: relative;
  z-index: 2;
  font-size: 1rem;
  line-height: 1;
  color: #ffffff;
  animation: mc-call-shake 2.6s ease-in-out infinite;
  transform-origin: center;
}

/* Ripple ring(s) — two layered pings, pseudo-elements for a 3rd */
.header-call-btn__ring,
.header-call-btn::before,
.header-call-btn::after {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(24, 165, 88, 0.55);
  pointer-events: none;
  z-index: 1;
  animation: mc-call-pulse 2.4s ease-out infinite;
  will-change: transform, opacity;
}

.header-call-btn::before { animation-delay: 0.6s; }
.header-call-btn::after  { animation-delay: 1.2s; }

/* Hover / focus */
.header-call-btn:hover,
.header-call-btn:focus-visible {
  color: #ffffff;
  background: linear-gradient(135deg, #1db865 0%, var(--green) 100%);
  transform: translateY(-2px) scale(1.06);
  box-shadow:
    0 10px 24px rgba(24, 165, 88, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  outline: none;
}

.header-call-btn:hover i,
.header-call-btn:focus-visible i {
  animation-duration: 0.8s; /* shake faster on hover */
}

.header-call-btn:active {
  transform: translateY(0) scale(0.96);
  box-shadow: 0 3px 10px rgba(24, 165, 88, 0.40);
}

/* Visible only ≤1024px (tablet portrait + phones) */
@media (max-width: 1024px) {
  .header-call-btn {
    display: inline-flex;
  }
}

/* Tighter footprint on tiny phones */
@media (max-width: 380px) {
  .header-call-btn {
    width: 40px;
    height: 40px;
  }
  .header-call-btn i { font-size: 0.9rem; }
}

/* Respect reduced-motion users — disable shake + pulse */
@media (prefers-reduced-motion: reduce) {
  .header-call-btn i {
    animation: none;
  }
  .header-call-btn__ring,
  .header-call-btn::before,
  .header-call-btn::after {
    animation: none;
    opacity: 0;
  }
}

/* ── Animations ── */
@keyframes mc-call-pulse {
  0% {
    transform: scale(1);
    opacity: 0.75;
  }
  80% {
    opacity: 0;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

@keyframes mc-call-shake {
  0%, 60%, 100% { transform: rotate(0); }
  5%  { transform: rotate(-14deg); }
  10% { transform: rotate(14deg); }
  15% { transform: rotate(-12deg); }
  20% { transform: rotate(12deg); }
  25% { transform: rotate(-8deg); }
  30% { transform: rotate(8deg); }
  35% { transform: rotate(-4deg); }
  40% { transform: rotate(4deg); }
  45% { transform: rotate(0); }
}

/* ── Hamburger (mobile only) ── */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background var(--transition), border-color var(--transition);
}

.hamburger:hover {
  background: var(--color-surface-hover);
  border-color: var(--color-border-accent);
}

.hamburger span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--color-text);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}

.hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Mobile nav drawer (slides in from left) ── */
.mobile-nav {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(340px, 88vw);
  z-index: 1050;
  background: rgba(255, 255, 255, 0.99);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-right: 1px solid var(--color-border);
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform var(--transition-md);
  display: flex;
  flex-direction: column;
}

.mobile-nav.open {
  transform: translateX(0);
}

/* Drawer header */
.mobile-nav-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem 1.25rem 1rem;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

/* Logo link wrapper inside drawer */
.mobile-nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  line-height: 0;
  flex: 1;
  min-width: 0;
}

.mobile-nav-logo-img {
  display: block;
  height: 56px;
  width: auto;
  max-width: 100%;
  max-height: 56px;
  object-fit: contain;
}

@media (max-width: 380px) {
  .mobile-nav-logo-img {
    height: 48px;
    max-height: 48px;
  }
}

.mobile-logo-mark {
  width: 36px;
  height: 36px;
  border-radius: 0.5rem;
  background: var(--gradient-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 900;
  color: var(--color-text-dark);
  flex-shrink: 0;
}

.mobile-nav-brand {
  font-size: 0.9rem;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--color-text);
  flex: 1;
  min-width: 0;
}

.mobile-nav-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition), color var(--transition);
}

.mobile-nav-close:hover {
  background: var(--color-surface);
  color: var(--color-text);
}

/* Drawer nav list */
.mobile-nav-inner {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1rem 0;
  display: flex;
  flex-direction: column;
}

.mobile-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.mobile-nav-list > li > a,
.mobile-nav-list .mobile-nav-link {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 0.875rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: color var(--transition), background var(--transition);
}

.mobile-nav-list > li > a:hover,
.mobile-nav-list .current-menu-item > a {
  color: var(--color-emerald);
  background: rgba(110,231,183,0.08);
}

/* Mobile sub-menu */
.mobile-nav-list .sub-menu {
  list-style: none;
  margin: 0.125rem 0 0.25rem 0.875rem;
  padding: 0;
  border-left: 2px solid rgba(110,231,183,0.2);
  padding-left: 0.875rem;
  display: none;
}

.mobile-nav-list .mobile-has-sub.active > .sub-menu {
  display: block;
}

.mobile-nav-list .sub-menu a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.625rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-muted);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: color var(--transition), background var(--transition);
}

.mobile-nav-list .sub-menu a:hover {
  color: var(--color-emerald);
  background: rgba(110,231,183,0.06);
}

/* Drawer contact info */
.mobile-nav-contact {
  margin-top: 1.25rem;
  padding: 1rem 0.875rem;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.mobile-contact-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color var(--transition);
}

.mobile-contact-item i {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(110,231,183,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: var(--color-emerald);
  flex-shrink: 0;
}

.mobile-contact-item:hover {
  color: var(--color-emerald);
}

/* Drawer CTA */
.mobile-nav-actions {
  padding: 1rem;
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
}

.mobile-nav-actions .btn {
  width: 100%;
  justify-content: center;
  padding: 0.875rem;
  font-size: 1rem;
}

/* Mobile overlay */
.mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1040;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(2px);
}

.mobile-overlay.active {
  display: block;
}

/* Admin bar offset */
.admin-bar .site-header {
  top: calc(32px + var(--topbar-height));
}
.admin-bar .top-bar {
  top: 32px;
}

/* ============================================================
   8. HERO SECTION
   ============================================================ */
.hero-section {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: calc(var(--topbar-height) + var(--header-height) + 3rem);
  padding-bottom: 5rem;
  overflow: hidden;
  background: var(--color-bg);
}

.hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%,   rgba(16,185,129,0.16) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 85% 60%,  rgba(59,130,246,0.12) 0%, transparent 55%);
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 760px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.6875rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.4em 1.1em;
  border-radius: var(--radius-full);
  border: 1px solid rgba(110,231,183,0.30);
  background: rgba(110,231,183,0.08);
  color: var(--color-emerald);
  margin-bottom: 1.5rem;
}

.hero-title {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 900;
  letter-spacing: -0.06em;
  line-height: 1.04;
  color: var(--color-text);
  margin-bottom: 1.25rem;
}

.hero-title .accent {
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-subtitle {
  font-size: clamp(1rem, 2vw, 1.1875rem);
  color: var(--color-text-secondary);
  line-height: 1.65;
  margin-bottom: 2.5rem;
  max-width: 54ch;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

/* ============================================================
   9. TRUST / STATS BAR
   ============================================================ */
.trust-bar {
  background: rgba(255,255,255,0.03);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 1.5rem 0;
}

.trust-bar .container {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.2rem;
}

.stat-value {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}

.stat-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* ============================================================
   10. SERVICES SECTION
   ============================================================ */
.services-section {
  position: relative;
  background: var(--color-bg);
  overflow: hidden;
}

.services-section--premium {
  background: var(--cream);
}

.services-section--premium::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 50% 40% at 90% 10%, var(--teal-soft) 0%, transparent 55%),
    radial-gradient(ellipse 40% 35% at 5% 80%, #e7f6ea 0%, transparent 55%);
}

/* Services grid */
.services-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(3, 1fr);
}

.services-grid[data-columns="1"] { grid-template-columns: 1fr; }
.services-grid[data-columns="2"] { grid-template-columns: repeat(2, 1fr); }
.services-grid[data-columns="3"] { grid-template-columns: repeat(3, 1fr); }
.services-grid[data-columns="4"] { grid-template-columns: repeat(4, 1fr); }

/* Service card — glassmorphism */
.service-card {
  position: relative;
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition), border-color var(--transition),
              box-shadow var(--transition);
}

.service-card:hover {
  transform: translateY(-6px);
  border-color: var(--teal-soft);
  box-shadow: 0 20px 50px -10px rgba(15, 46, 65, 0.18);
}

/* Top accent bar */
.service-card::before {
  content: '';
  display: block;
  height: 3px;
  flex-shrink: 0;
  background: var(--gradient-accent);
}

/* Featured card variant */
.service-card-featured {
  border-color: rgba(0, 124, 137, 0.35);
  background: var(--teal-pale);
}

.service-card-featured::before {
  height: 4px;
}

/* Card with featured image background + readable gradient overlay */
.service-card--has-bg {
  min-height: 300px;
  background-color: #020617;
  border-color: rgba(255, 255, 255, 0.12);
}

.service-card--has-bg::before {
  position: absolute;
  inset: 0;
  height: auto;
  display: block;
  flex-shrink: unset;
  background-image: var(--service-card-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  transition: transform 0.55s ease;
}

.service-card--has-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Lighter overlay — fully transparent at the top so the image shows
     through, ramping to ~70% navy at the bottom where the text sits. */
  background: linear-gradient(
    180deg,
    rgba(2, 6, 23, 0)    0%,
    rgba(2, 6, 23, 0.18) 38%,
    rgba(2, 6, 23, 0.5)  68%,
    rgba(2, 6, 23, 0.72) 100%
  );
  transition: opacity var(--transition);
}

.service-card--has-bg:hover::before {
  transform: scale(1.06);
}

.service-card--has-bg:hover::after {
  background: linear-gradient(
    180deg,
    rgba(2, 6, 23, 0)    0%,
    rgba(2, 6, 23, 0.15) 38%,
    rgba(2, 6, 23, 0.45) 68%,
    rgba(2, 6, 23, 0.68) 100%
  );
}

.service-card--has-bg > .service-icon,
.service-card--has-bg > .service-title,
.service-card--has-bg > .service-desc,
.service-card--has-bg > .service-link {
  position: relative;
  z-index: 2;
}

.service-card--has-bg .service-title {
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 2px 14px rgba(0, 0, 0, 0.4);
}

.service-card--has-bg .service-desc {
  color: rgba(248, 250, 252, 0.92);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}

.service-card--has-bg .service-icon {
  background: rgba(2, 6, 23, 0.55);
  border-color: rgba(110, 231, 183, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.service-card-featured.service-card--has-bg {
  border-color: rgba(110, 231, 183, 0.28);
  box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(110, 231, 183, 0.12);
}

.service-card-featured.service-card--has-bg::after {
  background: linear-gradient(
    180deg,
    rgba(2, 6, 23, 0)    0%,
    rgba(2, 6, 23, 0.15) 38%,
    rgba(2, 6, 23, 0.48) 68%,
    rgba(6, 78, 59, 0.55) 100%
  );
}

/* Padding: works whether card content is wrapped in .service-card-body or direct children */
.service-card-body {
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.875rem;
}

/* Direct children when no .service-card-body wrapper is used */
.service-card > .service-icon,
.service-card > .service-title,
.service-card > .service-desc,
.service-card > .service-link {
  margin-left: 1.75rem;
  margin-right: 1.75rem;
}
.service-card > .service-icon  { margin-top: 1.75rem; }
.service-card > .service-title { margin-top: 1rem; }
.service-card > .service-desc  { margin-top: 0.625rem; flex: 1; }
.service-card > .service-link  { margin-top: auto; padding-top: 0.875rem; margin-bottom: 1.75rem; }

/* Service icon */
.service-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-sm);
  background: var(--teal-pale);
  border: 1px solid rgba(0, 124, 137, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-emerald);
  font-size: 1.375rem;
}

.service-icon svg {
  width: 24px;
  height: 24px;
}

.service-title {
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--color-navy);
  line-height: 1.25;
}

.service-desc {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.65;
  flex: 1;
}

.service-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-emerald);
  margin-top: auto;
  padding-top: 0.5rem;
  transition: gap var(--transition), opacity var(--transition);
}

.service-link:hover {
  gap: 0.625rem;
  opacity: 0.85;
}

.service-link svg {
  width: 14px;
  height: 14px;
  transition: transform var(--transition);
}

.service-link:hover svg {
  transform: translateX(3px);
}

/* ============================================================
   11. WHY CHOOSE US SECTION
   ============================================================ */
.why-section {
  position: relative;
  background: var(--color-bg);
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.why-card {
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--shadow-card);
  padding: 2rem;
  transition: transform var(--transition), border-color var(--transition);
  overflow: hidden;
  position: relative;
}

.why-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient-accent);
  opacity: 0;
  transition: opacity var(--transition);
}

.why-card:hover {
  transform: translateY(-3px);
  border-color: var(--color-border-accent);
}

.why-card:hover::after {
  opacity: 1;
}

.why-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  background: rgba(110,231,183,0.10);
  border: 1px solid rgba(110,231,183,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  color: var(--color-emerald);
}

.why-icon svg {
  width: 22px;
  height: 22px;
}

.why-card h3 {
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--color-text);
  margin-bottom: 0.625rem;
}

.why-card p {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.65;
}

/* ============================================================
   12. PAGE HERO (INNER PAGES)
   ============================================================ */
.page-hero {
  position: relative;
  padding-top: calc(var(--header-offset, 80px) + 120px);
  padding-bottom: 60px;
  background: var(--cream);
  border-bottom: 1px solid var(--slate-200);
  overflow: hidden;
  text-align: center;
}

.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 45% at 85% 0%, var(--teal-soft) 0%, transparent 55%),
    radial-gradient(ellipse 45% 40% at 10% 100%, #e7f6ea 0%, transparent 55%);
}

.page-hero .container {
  position: relative;
  z-index: 2;
}

.page-hero-inner {
  max-width: 720px;
  margin: 0 auto;
}

.page-hero-inner .section-subtitle,
.page-hero-inner .section-subtitle-white {
  margin-left: auto;
  margin-right: auto;
}

.page-hero-inner .breadcrumb {
  justify-content: center;
  margin-top: 1.75rem;
  margin-bottom: 0;
}

/* Breadcrumb */
.breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.45em 1.1em;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.breadcrumb a {
  color: rgba(255,255,255,0.55);
  transition: color var(--transition);
  padding: 0.2em 0.4em;
}

.breadcrumb a:hover {
  color: var(--color-emerald);
}

.breadcrumb span {
  color: var(--color-emerald);
  padding: 0.2em 0.4em;
}

/* Chevron separator */
.breadcrumb .fa-chevron-right {
  font-size: 0.55rem;
  color: rgba(255,255,255,0.2);
  margin: 0 0.1em;
}

/* ============================================================
   13. CONTACT FORM (CF7)
   ============================================================ */
.contact-form-card {
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--shadow-card);
  padding: clamp(1.5rem, 4vw, 3rem);
  overflow: hidden;
  position: relative;
}

.contact-form-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient-accent);
}

.form-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.form-label {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.form-control,
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 select,
.wpcf7 textarea {
  width: 100%;
  padding: 0.875rem 1.125rem;
  background: #ffffff;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-md);
  color: var(--ink);
  font-size: 0.9375rem;
  outline: none;
  transition: border-color var(--transition), background var(--transition),
              box-shadow var(--transition);
}

.form-control::placeholder,
.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder {
  color: var(--color-text-muted);
}

.form-control:focus,
.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
  border-color: var(--teal);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(0, 124, 137, 0.12);
}

.wpcf7 textarea,
textarea.form-control {
  min-height: 140px;
  resize: vertical;
}

.form-submit {
  margin-top: 1.25rem;
}

.form-submit input[type="submit"],
.wpcf7 input[type="submit"] {
  background: linear-gradient(135deg, var(--green) 0%, var(--green-dark) 100%);
  color: #ffffff;
  border: none;
  border-radius: var(--radius-full);
  padding: 0.875rem 2.25rem;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: transform var(--transition), box-shadow var(--transition),
              background var(--transition);
  box-shadow: 0 4px 16px rgba(24, 165, 88, 0.35);
}

.form-submit input[type="submit"]:hover,
.wpcf7 input[type="submit"]:hover {
  background: linear-gradient(135deg, #1db865 0%, var(--green) 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(24, 165, 88, 0.45);
}

/* CF7 validation */
.wpcf7-not-valid-tip {
  font-size: 0.75rem;
  color: #f87171;
  margin-top: 0.25rem;
}

.wpcf7-response-output {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  border: 1px solid;
}

.wpcf7 .sent .wpcf7-response-output {
  background: #e7f6ea;
  border-color: rgba(24, 165, 88, 0.35);
  color: var(--green-dark);
}

.wpcf7 .failed .wpcf7-response-output,
.wpcf7 .invalid .wpcf7-response-output {
  background: rgba(248,113,113,0.08);
  border-color: rgba(248,113,113,0.30);
  color: #f87171;
}

/* Clenix CF7 layout (Contact Us page) */
.clenix-contact-form {
  padding: clamp(1.75rem, 4vw, 2.75rem);
  background: #ffffff;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
}

.clenix-contact-form::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient-accent);
}

.clenix-contact-form .row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem 1.5rem;
}

.clenix-contact-form .row + .row {
  margin-top: 1.25rem;
}

.clenix-contact-form .col-md-6,
.clenix-contact-form .col-md-12 {
  min-width: 0;
}

.clenix-contact-form .col-md-12 {
  grid-column: 1 / -1;
}

.clenix-contact-form .text-center {
  text-align: center;
}

.clenix-contact-form .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}

.clenix-contact-form .wpcf7-form-control {
  width: 100%;
}

.clenix-contact-form input[type="text"],
.clenix-contact-form input[type="email"],
.clenix-contact-form input[type="tel"],
.clenix-contact-form input[type="url"],
.clenix-contact-form input[type="number"],
.clenix-contact-form select,
.clenix-contact-form textarea {
  width: 100%;
  padding: 0.875rem 1.125rem;
  background: #ffffff;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-md);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  line-height: 1.5;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.clenix-contact-form input::placeholder,
.clenix-contact-form textarea::placeholder {
  color: var(--slate-500);
  opacity: 1;
}

.clenix-contact-form input:focus,
.clenix-contact-form select:focus,
.clenix-contact-form textarea:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(0, 124, 137, 0.12);
}

.clenix-contact-form textarea {
  min-height: 160px;
  resize: vertical;
}

.clenix-contact-form .wpcf7-not-valid-tip {
  font-size: 0.75rem;
  color: #dc2626;
  margin-top: 0.35rem;
}

.clenix-contact-form .wpcf7-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 240px;
  margin-top: 0.5rem;
  padding: 0.875rem 2.5rem;
  background: linear-gradient(135deg, var(--green) 0%, var(--green-dark) 100%);
  color: #ffffff;
  border: none;
  border-radius: var(--radius-full);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(24, 165, 88, 0.35);
  transition: transform var(--transition), box-shadow var(--transition),
              background var(--transition);
}

.clenix-contact-form .wpcf7-submit:hover {
  background: linear-gradient(135deg, #1db865 0%, var(--green) 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(24, 165, 88, 0.45);
}

.clenix-contact-form .wpcf7-spinner {
  margin-left: 0.75rem;
  vertical-align: middle;
}

.clenix-contact-form .wpcf7-response-output {
  margin: 1.25rem 0 0;
  border-radius: var(--radius-md);
  text-align: center;
}

@media (max-width: 767px) {
  .clenix-contact-form .row {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   14. SECTION CTA BAND
   ============================================================ */
.section-cta {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: clamp(2rem, 5vw, 3.5rem);
  text-align: center;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.section-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient-accent);
}

/* ============================================================
   15. BLOG / POST CARDS
   ============================================================ */
.mercedes-post-card {
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition), border-color var(--transition);
}

.mercedes-post-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-border-accent);
}

.mercedes-post-card .card-thumb {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.mercedes-post-card .card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.mercedes-post-card:hover .card-thumb img {
  transform: scale(1.04);
}

.mercedes-post-card .card-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.625rem;
}

.mercedes-post-card .card-meta {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  display: flex;
  gap: 1rem;
}

.mercedes-post-card .card-title {
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--color-text);
  line-height: 1.3;
}

.mercedes-post-card .card-excerpt {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.65;
  flex: 1;
}

.mercedes-post-card .card-link {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-emerald);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: auto;
  transition: gap var(--transition);
}

.mercedes-post-card .card-link:hover {
  gap: 0.6rem;
}

/* ============================================================
   16. SITE FOOTER
   ============================================================ */
.site-footer {
  --footer-bg: #1d2e52;
  --footer-text: #ffffff;
  --footer-text-secondary: #cbd5e1;
  --footer-text-muted: #94a3b8;
  --footer-nav: #e2e8f0;
  --footer-nav-hover: #8de1d8;
  --footer-border: rgba(255, 255, 255, 0.1);
  --footer-accent: var(--teal);
  --footer-surface: rgba(255, 255, 255, 0.055);

  background: var(--footer-bg);
  border-top: 1px solid var(--footer-border);
  color: var(--footer-text-muted);
  position: relative;
  overflow: hidden;
}

.site-footer::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 40% at 0% 80%, rgba(0, 124, 137, 0.08) 0%, transparent 55%),
    radial-gradient(ellipse 40% 40% at 100% 20%, rgba(24, 165, 88, 0.06) 0%, transparent 55%);
}

.footer-top {
  padding: 4rem 0 3rem;
  position: relative;
  z-index: 1;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3rem;
  align-items: start;
}

/* Footer brand col */
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.footer-about {
  font-size: 0.875rem;
  color: var(--footer-text-muted, var(--color-text-muted));
  line-height: 1.7;
  max-width: 32ch;
}

.footer-heading {
  font-size: 0.6875rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--footer-text, var(--color-text));
  margin-bottom: 1rem;
}

/* Footer nav links */
.footer-links {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer-links ul,
.footer-links .menu,
.site-footer .footer-links .widget_nav_menu ul.menu {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-links li {
  margin: 0;
  padding: 0;
}

.footer-menu-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--footer-text-muted, var(--color-text-muted));
  line-height: 1.5;
  padding: 0.125rem 0;
  transition: color var(--transition);
}

.footer-menu-link:hover {
  color: var(--footer-accent, var(--color-emerald));
}

.footer-link-icon {
  width: 14px;
  height: 14px;
  color: var(--footer-accent, var(--color-emerald));
  flex-shrink: 0;
  opacity: 0.6;
  transition: opacity var(--transition), color var(--transition);
}

.footer-menu-link:hover .footer-link-icon {
  opacity: 1;
}

.footer-link-text {
  color: inherit;
}

/* Contact info */
.footer-contact-info {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.footer-contact-info a,
.footer-contact-info span {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--footer-text-muted, var(--color-text-muted));
  line-height: 1.5;
  transition: color var(--transition);
}

.footer-contact-info a:hover {
  color: var(--footer-accent, var(--color-emerald));
}

.footer-contact-info svg {
  width: 14px;
  height: 14px;
  margin-top: 2px;
  color: var(--footer-accent, var(--color-emerald));
  flex-shrink: 0;
}

/* Social icons */
.footer-social {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.site-footer .social-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--footer-border, var(--color-border));
  background: var(--footer-surface, var(--color-surface));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--footer-text-muted, var(--color-text-muted));
  transition: border-color var(--transition), color var(--transition),
              background var(--transition);
}

.site-footer .social-icon:hover {
  border-color: rgba(0, 124, 137, 0.35);
  color: var(--footer-accent, var(--color-emerald));
  background: rgba(0, 124, 137, 0.12);
}

.social-icon svg {
  width: 16px;
  height: 16px;
}

/* Hours */
.footer-hours {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.hours-list {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.hours-item {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.8125rem;
  color: var(--footer-text-muted, var(--color-text-muted));
}

.hours-item .day {
  color: var(--footer-text-secondary, var(--color-text-secondary));
  font-weight: 500;
}

.hours-item .time {
  color: var(--footer-text-muted, var(--color-text-muted));
  text-align: right;
}

.hours-note {
  font-size: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(0, 124, 137, 0.22);
  background: rgba(0, 124, 137, 0.08);
  color: var(--footer-accent, var(--color-emerald));
  margin-top: 0.25rem;
}

/* Quality badge */
.footer-quality-badge {
  margin-top: 1rem;
}

.quality-badge-inner {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 1rem 0.5rem 0.625rem;
  border-radius: var(--radius-full);
  border: 1px solid rgba(0, 124, 137, 0.3);
  background: rgba(0, 124, 137, 0.1);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--footer-accent, var(--color-emerald));
  letter-spacing: 0.04em;
}

.quality-badge-inner svg {
  width: 18px;
  height: 18px;
}

/* Footer divider */
.footer-divider {
  height: 1px;
  background: var(--footer-border, var(--color-border));
  margin: 0;
  position: relative;
  z-index: 1;
}

/* Footer bottom */
.footer-bottom {
  padding: 1.5rem 0;
  position: relative;
  z-index: 1;
  text-align: left;
}

.footer-bottom .container {
  display: block;
}

.footer-copyright {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--footer-text-muted, var(--color-text-muted));
  text-align: left;
  max-width: none;
}

.footer-copyright a {
  color: var(--footer-text-secondary, var(--color-text-secondary));
  transition: color var(--transition);
}

.footer-copyright a:hover {
  color: var(--footer-accent, var(--color-emerald));
}

.footer-acknowledgment {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  opacity: 0.7;
  max-width: 50ch;
  text-align: center;
  line-height: 1.5;
}

.footer-legal-links {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.footer-legal-links a {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  transition: color var(--transition);
}

.footer-legal-links a:hover {
  color: var(--color-emerald);
}

/* ============================================================
   17. BACK TO TOP
   ============================================================ */
.back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 800;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  border: 1px solid var(--slate-200);
  background: #ffffff;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--teal);
  box-shadow: var(--shadow-card);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity var(--transition), transform var(--transition),
              background var(--transition);
  cursor: pointer;
}

.back-to-top.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.back-to-top:hover {
  background: var(--teal-pale);
  color: var(--teal-dark);
  box-shadow: 0 8px 24px rgba(0, 124, 137, 0.15);
}

.back-to-top svg {
  width: 18px;
  height: 18px;
}

/* ============================================================
   18. ARCHIVE / MAIN CONTENT
   ============================================================ */
.site-main {
  min-height: 50vh;
  padding-top: 0;
}

body.home .site-main {
  padding-top: calc(var(--topbar-height) + var(--header-height));
}

.services-archive-wrap {
  padding: var(--section-padding) 0;
}

/* ============================================================
   19. WORDPRESS CORE COMPATIBILITY
   ============================================================ */
.wp-block-image img {
  border-radius: var(--radius-lg);
}

.alignleft  { float: left;  margin-right: 1.5rem; margin-bottom: 1rem; }
.alignright { float: right; margin-left: 1.5rem;  margin-bottom: 1rem; }
.aligncenter {
  display: block;
  margin-inline: auto;
  margin-bottom: 1rem;
}

/* Post content typography */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
  margin-top: 2em;
  margin-bottom: 0.75em;
  color: var(--color-text);
}

.entry-content p {
  margin-bottom: 1.25em;
  color: var(--color-text-secondary);
  line-height: 1.75;
}

.entry-content ul,
.entry-content ol {
  margin-bottom: 1.25em;
  padding-left: 1.5em;
}

.entry-content li {
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin-bottom: 0.5em;
}

.entry-content ul li {
  list-style: disc;
}

.entry-content ol li {
  list-style: decimal;
}

.entry-content a {
  color: var(--color-emerald);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity var(--transition);
}

.entry-content a:hover {
  opacity: 0.8;
}

.entry-content blockquote {
  border-left: 3px solid var(--color-emerald);
  padding: 1rem 1.5rem;
  margin: 1.5em 0;
  background: var(--color-surface);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.entry-content blockquote p {
  color: var(--color-text-secondary);
  font-style: italic;
  margin-bottom: 0;
}

.entry-content code {
  font-size: 0.875em;
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--color-border);
  border-radius: 0.25rem;
  padding: 0.15em 0.4em;
  color: var(--color-cyan);
}

.entry-content pre {
  background: rgba(0,0,0,0.4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 1.25rem 1.5rem;
  overflow-x: auto;
  margin-bottom: 1.5em;
}

.entry-content pre code {
  background: none;
  border: none;
  padding: 0;
  color: var(--color-text-secondary);
}

/* Pagination */
.pagination,
.nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 2rem 0;
}

.page-numbers,
.nav-links a,
.nav-links span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  transition: border-color var(--transition), color var(--transition),
              background var(--transition);
}

.page-numbers:hover,
.nav-links a:hover {
  border-color: var(--color-border-accent);
  color: var(--color-emerald);
  background: rgba(110,231,183,0.06);
}

.page-numbers.current {
  background: var(--color-emerald);
  color: var(--color-text-dark);
  border-color: var(--color-emerald);
  font-weight: 800;
}

/* ============================================================
   20. RESPONSIVE — TABLET  (max 1024px)
   Header switches to mobile-style nav (hamburger + call button)
   from tablet portrait downwards.
   ============================================================ */
@media (max-width: 1024px) {
  :root {
    --section-padding: 64px;
    --header-height: 88px;
    --topbar-height: 0px;
  }

  /* Top bar — hidden from tablet portrait down (call button replaces it) */
  .top-bar {
    display: none !important;
  }

  /* Header sits flush at the top (no top bar above it) */
  .site-header {
    top: 0 !important;
  }
  .admin-bar .site-header {
    top: 46px !important; /* WP mobile/tablet admin-bar height */
  }

  /* Switch header-inner from Grid → Flex so the actions container
     stays pinned to the right after .main-nav is hidden.
     (Grid auto-placement would otherwise move actions into column 2.) */
  .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
  }

  /* Show hamburger + call button, hide desktop nav */
  .hamburger,
  .mobile-menu-toggle {
    display: flex;
  }

  .main-nav,
  .site-nav {
    display: none;
  }

  /* Keep actions container visible so hamburger + call button render */
  .header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
  }

  /* Hide desktop primary CTA; mobile call button takes its place */
  .header-cta {
    display: none;
  }

  /* Logo size: see brand-overrides.css @media block (loaded after this file). */

  /* Layout grids — 2-column on tablet */
  .services-grid,
  .services-grid[data-columns="3"],
  .services-grid[data-columns="4"] {
    grid-template-columns: repeat(2, 1fr);
  }

  .why-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
  }

  .footer-brand {
    grid-column: auto;
  }

  .footer-about {
    max-width: none;
  }

  .form-row {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   21. RESPONSIVE — MOBILE  (max 768px)
   Phone-only layout rules. Header switches to mobile-style at the
   tablet breakpoint above; this block is just layout adjustments.
   ============================================================ */
@media (max-width: 768px) {
  :root {
    --section-padding: 48px;
  }

  /* Logo trim for small phones: see brand-overrides.css (@media max-width: 480px). */

  /* Legacy safety — hide top-bar fragments if any markup still references them */
  .top-bar-address,
  .hide-mobile,
  .top-bar-sep {
    display: none !important;
  }

  /* Services grid → single column */
  .services-grid,
  .services-grid[data-columns="2"],
  .services-grid[data-columns="3"],
  .services-grid[data-columns="4"] {
    grid-template-columns: 1fr;
  }

  .why-grid {
    grid-template-columns: 1fr;
  }

  /* Footer → single column */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .footer-brand {
    grid-column: auto;
  }

  .footer-copyright {
    text-align: left;
  }

  /* Hero */
  .hero-actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .hero-actions .btn {
    width: 100%;
    justify-content: center;
  }

  /* Trust bar → 2 cols */
  .trust-bar .container {
    justify-content: center;
    gap: 2rem;
  }

  .stat-item {
    min-width: calc(50% - 1rem);
  }

  /* Back to top */
  .back-to-top {
    bottom: 1.25rem;
    right: 1.25rem;
  }
}

/* ============================================================
   22. RESPONSIVE — SMALL MOBILE  (max 480px)
   ============================================================ */
@media (max-width: 480px) {
  .container {
    padding-inline: 1rem;
  }

  .service-card-body {
    padding: 1.25rem;
  }

  .contact-form-card {
    padding: 1.25rem;
  }

  .section-cta {
    padding: 1.75rem 1.25rem;
  }

  .why-card {
    padding: 1.5rem;
  }
}

/* ============================================================
   23. PRINT
   ============================================================ */
@media print {
  body {
    background: #fff;
    color: #000;
  }

  .top-bar,
  .site-header,
  .mobile-menu-toggle,
  .mobile-drawer,
  .back-to-top,
  .site-footer {
    display: none !important;
  }

  .site-main {
    padding-top: 0;
  }

  a {
    color: #000;
    text-decoration: underline;
  }

  .service-card,
  .why-card,
  .mercedes-post-card {
    border: 1px solid #ccc;
    box-shadow: none;
    backdrop-filter: none;
    background: #fff;
    break-inside: avoid;
  }

  .service-card--has-bg::before,
  .service-card--has-bg::after {
    display: none;
  }

  .service-card--has-bg .service-title,
  .service-card--has-bg .service-desc {
    color: #000;
    text-shadow: none;
  }
}







<!-- ════════════════════════════════════════
     STYLES — bright theme, brand palette
     ════════════════════════════════════════ -->
<style>
.mcp-policy {
  --mcp-cream:     #f8faf9;
  --mcp-white:     #ffffff;
  --mcp-navy:      #123a4a;
  --mcp-ink:       #1f2933;
  --mcp-teal:      #007c89;
  --mcp-teal-dark: #005962;
  --mcp-teal-pale: #eef5f6;
  --mcp-teal-soft: #ddf3f1;
  --mcp-green:     #18a558;
  --mcp-green-dark:#128646;
  --mcp-green-pale:#e8f6ee;
  --mcp-rose-500:  #dc2626;
  --mcp-slate-100: #f1f5f9;
  --mcp-slate-200: #e2e8f0;
  --mcp-slate-300: #cbd5e1;
  --mcp-slate-400: #94a3b8;
  --mcp-slate-500: #64748b;
}

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

.mcp-policy {
  position: relative;
  background:
    radial-gradient(ellipse 60% 50% at 90% 0%,   rgba(0,124,137,.07) 0%, transparent 60%),
    radial-gradient(ellipse 50% 45% at 10% 100%, rgba(24,165,88,.06)  0%, transparent 60%),
    var(--mcp-cream);
  padding: 5rem 2rem 6rem;
  overflow: hidden;
  color: var(--mcp-ink);
  font-family: inherit;
  line-height: 1.65;
  scroll-behavior: smooth;
}

/* ── Background orbs + grid (decorative) ── */
.mcp-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.mcp-orb { position: absolute; border-radius: 50%; filter: blur(90px); }
.mcp-orb--1 { width:520px;height:520px;top:-160px;right:-120px;
  background:radial-gradient(circle,rgba(0,124,137,.16) 0%,transparent 70%);
  animation:mcp-float 15s ease-in-out infinite; }
.mcp-orb--2 { width:460px;height:460px;bottom:-130px;left:-100px;
  background:radial-gradient(circle,rgba(24,165,88,.12) 0%,transparent 70%);
  animation:mcp-float 18s ease-in-out infinite reverse; }
.mcp-grid { position:absolute; inset:0;
  background-image:linear-gradient(rgba(18,58,74,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(18,58,74,.04) 1px,transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse 90% 90% at 50% 50%,black 20%,transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 90% 90% at 50% 50%,black 20%,transparent 100%); }
@keyframes mcp-float {
  0%,100% { transform: translate(0,0) scale(1); }
  40%     { transform: translate(22px,-16px) scale(1.03); }
  70%     { transform: translate(-16px,12px) scale(.97); }
}

/* ── Layout ── */
.mcp-wrap {
  position: relative; z-index: 1;
  max-width: 920px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 3rem;
}

/* ── Header ── */
.mcp-header { text-align: center; }
.mcp-badge {
  display: inline-flex; align-items: center; gap: .5em;
  font-size: .6875rem; font-weight: 900; letter-spacing: .18em; text-transform: uppercase;
  padding: .45em 1.1em; border-radius: 999px;
  border: 1px solid rgba(0,124,137,.28); background: rgba(0,124,137,.08); color: var(--mcp-teal-dark);
}
.mcp-badge i { font-size: .85em; color: var(--mcp-teal); }
.mcp-title {
  margin-top: 1.25rem;
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 900; letter-spacing: -.04em; line-height: 1.05;
  color: var(--mcp-navy);
}
.mcp-lead {
  max-width: 65ch; margin: 1rem auto 0;
  font-size: 1.0625rem; line-height: 1.7; color: var(--mcp-slate-500);
}

/* ── TOC chips ── */
.mcp-toc {
  margin-top: 1.75rem;
  display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem;
}
.mcp-toc a {
  display: inline-flex; align-items: center; gap: .55em;
  font-size: .8125rem; font-weight: 700;
  color: var(--mcp-navy);
  background: var(--mcp-white);
  border: 1px solid var(--mcp-slate-200);
  padding: .5rem .9rem;
  border-radius: 999px;
  text-decoration: none;
  transition: border-color .22s ease, color .22s ease, background .22s ease, transform .15s ease, box-shadow .22s ease;
}
.mcp-toc a span {
  font-size: .6875rem; font-weight: 900; color: var(--mcp-teal);
  background: var(--mcp-teal-pale); padding: .15em .55em; border-radius: 999px; letter-spacing: .05em;
}
.mcp-toc a:hover {
  color: var(--mcp-teal-dark); border-color: var(--mcp-teal); transform: translateY(-1px);
  box-shadow: 0 8px 20px -10px rgba(0,124,137,.30);
}

/* ── Card (policy section) ── */
.mcp-card {
  position: relative;
  border-radius: 2rem;
  border: 1px solid var(--mcp-slate-200);
  background: var(--mcp-white);
  box-shadow:
    0 0 0 1px rgba(0,124,137,.03),
    0 30px 60px -25px rgba(15,46,65,.14),
    0 12px 24px -12px rgba(15,46,65,.08);
  overflow: hidden;
  scroll-margin-top: 100px;
}
.mcp-card--accent {
  background: linear-gradient(135deg, var(--mcp-white) 0%, var(--mcp-teal-pale) 100%);
  border-color: rgba(0,124,137,.20);
}

.mcp-card__head {
  display: flex; align-items: center; gap: 1.5rem;
  padding: 2.25rem 2.5rem 1.5rem;
  border-bottom: 1px solid var(--mcp-slate-100);
}
.mcp-card__num {
  flex-shrink: 0;
  width: 56px; height: 56px;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--mcp-teal) 0%, var(--mcp-teal-dark) 100%);
  color: var(--mcp-white);
  font-size: 1.25rem; font-weight: 900; letter-spacing: -.02em;
  box-shadow: 0 8px 20px -6px rgba(0,124,137,.40);
}
.mcp-card__num--green {
  background: linear-gradient(135deg, var(--mcp-green) 0%, var(--mcp-green-dark) 100%);
  box-shadow: 0 8px 20px -6px rgba(24,165,88,.40);
}
.mcp-eyebrow {
  display: inline-block;
  font-size: .6875rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: .35rem;
}
.mcp-eyebrow--teal  { color: var(--mcp-teal); }
.mcp-eyebrow--green { color: var(--mcp-green-dark); }
.mcp-card__title {
  font-size: clamp(1.5rem, 2.5vw, 1.875rem);
  font-weight: 900; letter-spacing: -.03em; line-height: 1.15;
  color: var(--mcp-navy);
}

.mcp-card__body {
  padding: 1.75rem 2.5rem 2.5rem;
  display: flex; flex-direction: column; gap: 1.5rem;
}

/* ── Prose ── */
.mcp-prose {
  font-size: 1rem; line-height: 1.75; color: var(--mcp-ink);
}
.mcp-prose strong { color: var(--mcp-navy); font-weight: 700; }
.mcp-prose--lead {
  font-size: 1.0625rem; color: var(--mcp-navy); font-weight: 500;
}
.mcp-prose--muted { color: var(--mcp-slate-500); font-size: .9375rem; }
.mcp-prose--closing {
  font-size: 1.0625rem; color: var(--mcp-navy);
  padding: 1rem 0 0; border-top: 1px solid var(--mcp-slate-100);
}

/* ── Block (titled subsection within a card) ── */
.mcp-block { display: flex; flex-direction: column; gap: .75rem; }
.mcp-block__title {
  display: flex; align-items: center; gap: .55em;
  font-size: 1rem; font-weight: 800; letter-spacing: -.01em;
  color: var(--mcp-navy);
}
.mcp-block__title i {
  color: var(--mcp-teal); font-size: .95em;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--mcp-teal-pale);
  border-radius: 8px;
}

/* ── Check list ── */
.mcp-check-list {
  list-style: none;
  display: flex; flex-direction: column; gap: .55rem;
}
.mcp-check-list li {
  position: relative;
  padding: .35rem 0 .35rem 2rem;
  font-size: .9375rem; line-height: 1.6; color: var(--mcp-ink);
}
.mcp-check-list li::before {
  content: "";
  position: absolute; left: 0; top: .55rem;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--mcp-teal-pale);
  display: block;
}
.mcp-check-list li::after {
  content: "";
  position: absolute; left: 6px; top: 0.95rem;
  width: 8px; height: 4px;
  border-left: 2px solid var(--mcp-teal);
  border-bottom: 2px solid var(--mcp-teal);
  transform: rotate(-45deg);
  display: block;
}
.mcp-check-list--green li::before { background: var(--mcp-green-pale); }
.mcp-check-list--green li::after  { border-color: var(--mcp-green-dark); }

/* ── Risk list (icon + label cards) ── */
.mcp-risk-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: .65rem;
}
.mcp-risk-list li {
  display: flex; align-items: center; gap: .75rem;
  padding: .85rem 1rem;
  background: var(--mcp-white);
  border: 1px solid var(--mcp-slate-200);
  border-radius: 12px;
  font-size: .875rem; font-weight: 600; color: var(--mcp-navy);
  transition: border-color .2s ease, transform .15s ease, box-shadow .22s ease;
}
.mcp-risk-list li:hover {
  border-color: var(--mcp-teal); transform: translateY(-1px);
  box-shadow: 0 8px 20px -10px rgba(0,124,137,.20);
}
.mcp-risk-list li i {
  flex-shrink: 0;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--mcp-teal-pale); color: var(--mcp-teal-dark);
  border-radius: 10px; font-size: .95rem;
}

/* ── 2-column grid (responsibilities) ── */
.mcp-grid-2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
}
.mcp-panel {
  background: var(--mcp-slate-100);
  border: 1px solid var(--mcp-slate-200);
  border-radius: 16px;
  padding: 1.25rem 1.5rem;
  display: flex; flex-direction: column; gap: .85rem;
}
.mcp-panel__head { display: flex; align-items: center; gap: .85rem; }
.mcp-panel__icon {
  flex-shrink: 0;
  width: 42px; height: 42px; border-radius: 12px;
  background: var(--mcp-white);
  border: 1px solid var(--mcp-slate-200);
  display: flex; align-items: center; justify-content: center;
  color: var(--mcp-teal); font-size: 1.15rem;
}
.mcp-panel__title {
  font-size: 1rem; font-weight: 800; color: var(--mcp-navy); letter-spacing: -.01em;
}

/* ── Callout ── */
.mcp-callout {
  background: linear-gradient(135deg, rgba(0,124,137,.07) 0%, rgba(24,165,88,.05) 100%);
  border: 1px solid rgba(0,124,137,.18);
  border-radius: 16px;
  padding: 1.5rem 1.75rem;
  display: flex; flex-direction: column; gap: .85rem;
}
.mcp-callout__title {
  display: flex; align-items: center; gap: .55em;
  font-size: 1.0625rem; font-weight: 800; color: var(--mcp-teal-dark);
}
.mcp-callout__title i {
  color: var(--mcp-teal); width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--mcp-white); border-radius: 8px;
  border: 1px solid var(--mcp-teal-soft);
  font-size: .9rem;
}

/* ── Pull quote (Quality policy) ── */
.mcp-quote {
  position: relative;
  margin: .5rem 0;
  padding: 1.75rem 2rem 1.75rem 3.5rem;
  background: var(--mcp-navy);
  color: var(--mcp-white);
  border-radius: 18px;
  overflow: hidden;
}
.mcp-quote::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 100% at 0% 0%, rgba(110,231,183,.18) 0%, transparent 60%);
  pointer-events: none;
}
.mcp-quote__mark {
  position: absolute; left: 1.25rem; top: 1.4rem;
  color: rgba(110,231,183,.55); font-size: 1.5rem;
}
.mcp-quote p {
  position: relative;
  font-size: 1.375rem; font-weight: 800; line-height: 1.35; letter-spacing: -.02em;
}
.mcp-quote cite {
  position: relative;
  display: block; margin-top: .75rem;
  font-size: .75rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; font-style: normal; color: rgba(255,255,255,.65);
}

/* ── Tiers (Quality policy "everyone's responsibility") ── */
.mcp-tiers { display: flex; flex-direction: column; gap: 1rem; }
.mcp-tiers__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .85rem;
}
.mcp-tier {
  padding: 1.1rem 1.25rem;
  background: var(--mcp-white);
  border: 1px solid var(--mcp-slate-200);
  border-radius: 14px;
  border-top: 4px solid var(--mcp-teal);
}
.mcp-tier:nth-child(2) { border-top-color: var(--mcp-green); }
.mcp-tier:nth-child(3) { border-top-color: var(--mcp-navy);  }
.mcp-tier__role {
  font-size: .6875rem; font-weight: 900; letter-spacing: .12em;
  text-transform: uppercase; color: var(--mcp-slate-500); margin-bottom: .35rem;
}
.mcp-tier p { font-size: .875rem; line-height: 1.6; color: var(--mcp-ink); }

/* ── Tags (Privacy: data we collect) ── */
.mcp-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .25rem; }
.mcp-tag {
  display: inline-flex; align-items: center;
  font-size: .8125rem; font-weight: 600;
  padding: .35rem .8rem;
  border-radius: 999px;
  background: var(--mcp-teal-pale);
  border: 1px solid var(--mcp-teal-soft);
  color: var(--mcp-teal-dark);
}

/* ── Promises (Privacy: do / don't) ── */
.mcp-promises {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
}
.mcp-promise {
  display: flex; align-items: flex-start; gap: .85rem;
  padding: 1.1rem 1.25rem;
  border-radius: 14px;
  border: 1px solid;
}
.mcp-promise i { font-size: 1.5rem; flex-shrink: 0; margin-top: .1rem; }
.mcp-promise__title {
  font-size: .75rem; font-weight: 900; letter-spacing: .12em;
  text-transform: uppercase; margin-bottom: .35rem;
}
.mcp-promise p { font-size: .875rem; line-height: 1.6; }
.mcp-promise--no  { background: #fff5f5; border-color: rgba(220,38,38,.20); }
.mcp-promise--no  i { color: var(--mcp-rose-500); }
.mcp-promise--no  .mcp-promise__title { color: var(--mcp-rose-500); }
.mcp-promise--no  p { color: #7c2d2d; }
.mcp-promise--yes { background: var(--mcp-green-pale); border-color: rgba(24,165,88,.22); }
.mcp-promise--yes i { color: var(--mcp-green-dark); }
.mcp-promise--yes .mcp-promise__title { color: var(--mcp-green-dark); }
.mcp-promise--yes p { color: #14532d; }

/* ── Contact card ── */
.mcp-contact {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.1rem 1.4rem;
  background: var(--mcp-navy); color: var(--mcp-white);
  border-radius: 16px;
}
.mcp-contact__icon {
  width: 44px; height: 44px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.20);
  border-radius: 12px; color: #6ee7b7; font-size: 1.05rem;
}
.mcp-contact__label {
  font-size: .6875rem; font-weight: 900; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255,255,255,.7); margin-bottom: .15rem;
}
.mcp-contact__email {
  color: var(--mcp-white); font-weight: 800; font-size: 1rem;
  text-decoration: none; word-break: break-all;
  border-bottom: 1px solid rgba(255,255,255,.30);
  transition: color .22s ease, border-color .22s ease;
}
.mcp-contact__email:hover {
  color: #a7f3d0; border-color: #a7f3d0;
}

/* ── Values grid (final card) ── */
.mcp-values {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
  margin-top: .5rem;
}
.mcp-value {
  background: var(--mcp-white);
  border: 1px solid var(--mcp-slate-200);
  border-radius: 16px;
  padding: 1.25rem 1.25rem 1.1rem;
  text-align: left;
  display: flex; flex-direction: column; gap: .5rem;
  transition: border-color .22s ease, transform .15s ease, box-shadow .22s ease;
}
.mcp-value:hover {
  border-color: var(--mcp-teal); transform: translateY(-2px);
  box-shadow: 0 14px 30px -14px rgba(0,124,137,.25);
}
.mcp-value__icon {
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--mcp-teal-pale) 0%, var(--mcp-teal-soft) 100%);
  border: 1px solid var(--mcp-teal-soft);
  border-radius: 12px;
  color: var(--mcp-teal); font-size: 1.05rem;
}
.mcp-value__title {
  font-size: 1rem; font-weight: 800; color: var(--mcp-navy); letter-spacing: -.01em;
}
.mcp-value__text {
  font-size: .8125rem; line-height: 1.55; color: var(--mcp-slate-500);
}

/* ── Responsive ── */
@media (max-width: 760px) {
  .mcp-policy { padding: 3.5rem 1.25rem 4.5rem; }
  .mcp-card__head { padding: 1.5rem 1.5rem 1.25rem; gap: 1rem; }
  .mcp-card__num { width: 46px; height: 46px; font-size: 1rem; border-radius: 12px; }
  .mcp-card__body { padding: 1.25rem 1.5rem 1.75rem; }
  .mcp-grid-2     { grid-template-columns: 1fr; }
  .mcp-promises   { grid-template-columns: 1fr; }
  .mcp-tiers__grid { grid-template-columns: 1fr; }
  .mcp-quote { padding: 1.5rem 1.5rem 1.5rem 3rem; }
  .mcp-quote p { font-size: 1.15rem; }
}
</style>




/* ============================================================
   END OF STYLESHEET
   ============================================================ */