/* ===== VITALITY COMPONENT LIBRARY — COMPONENT STYLES =====
 * Extracted from components.html master file.
 * One file, organized by section comments.
 */

/* ===== GLOBAL: INLINE CONTENT LINKS =====
 * Catches classless <a> tags inside body text (the kind safe_inline() emits
 * from JSON like "... with <a href=\"/...\">3D CBCT imaging</a>, ...").
 * Nav/footer/CTA links all carry classes, so this doesn't affect them.
 */
p a:not([class]),
li a:not([class]) {
  color: var(--blue);
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
p a:not([class]):hover,
li a:not([class]):hover {
  opacity: 0.7;
}

/* ===== BREADCRUMB ===== */
.breadcrumb {
  padding: 16px 0;
  background: var(--off-white);
  border-bottom: 1px solid var(--light-gray);
}

.breadcrumb ol {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  font-size: 0.8rem;
  color: var(--mid-gray);
}

.breadcrumb li:not(:last-child)::after {
  content: '›';
  margin-left: 8px;
  color: var(--mid-gray);
}

.breadcrumb a {
  color: var(--slate);
  text-decoration: none;
  transition: color 0.2s ease;
}

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

.breadcrumb span[aria-current="page"] {
  color: var(--dark-gray);
  font-weight: 500;
}

/* ===== NAV ===== */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(255,255,255,0.88);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: none;
  box-shadow: 0 1px 0 rgba(17, 49, 94, 0.06), 0 8px 24px -16px rgba(17, 49, 94, 0.08);
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.nav-inner {
  max-width: 1280px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  gap: 24px;
}

.nav-logo {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.02em;
  text-decoration: none;
  flex-shrink: 0;
}
.nav-logo span { color: var(--blue); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links li {
  position: relative;
}

.nav-links a {
  position: relative;
  display: inline-block;
  text-decoration: none;
  color: var(--navy);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  padding: 10px 14px;
  border-radius: 8px;
  transition: color 0.2s ease, background 0.2s ease;
}

/* Underline-slide hover for the standard nav items
   (skipped for the phone + CTA which have their own styles) */
.nav-links li > a:not(.nav-phone):not(.nav-cta)::after {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 4px;
  height: 2px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.25s ease;
}
.nav-links li > a:not(.nav-phone):not(.nav-cta):hover { color: var(--blue); }
.nav-links li > a:not(.nav-phone):not(.nav-cta):hover::after { transform: scaleX(1); }

/* Phone link styled as a subtle pill with a leading phone icon */
.nav-phone {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 9px 16px !important;
  background: var(--blue-light);
  color: var(--navy) !important;
  border-radius: 999px;
  font-weight: 700 !important;
  font-size: 0.88rem !important;
  letter-spacing: -0.005em;
  transition: background 0.2s ease, color 0.2s ease;
}
.nav-phone::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  background-color: var(--blue);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.01-.24 11.36 11.36 0 0 0 3.57.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1 11.36 11.36 0 0 0 .57 3.57 1 1 0 0 1-.24 1.01l-2.21 2.21z'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.01-.24 11.36 11.36 0 0 0 3.57.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1 11.36 11.36 0 0 0 .57 3.57 1 1 0 0 1-.24 1.01l-2.21 2.21z'/></svg>") center / contain no-repeat;
}
.nav-phone:hover {
  background: var(--blue) !important;
  color: #ffffff !important;
}
.nav-phone:hover::before { background-color: #ffffff; }
.nav-phone::after { content: none !important; }

/* Primary CTA button — bolder, with shadow and lift */
.nav-cta {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  background: var(--blue) !important;
  color: white !important;
  padding: 11px 22px !important;
  border-radius: 12px !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.005em;
  box-shadow: 0 6px 18px -8px rgba(37, 181, 201, 0.6);
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
}
.nav-cta:hover {
  background: var(--blue-hover) !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -10px rgba(37, 181, 201, 0.65);
}
.nav-cta::after { content: none !important; }

.mobile-menu {
  display: none;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--dark-gray);
  z-index: 1002;
  position: relative;
}

/* ===== MOBILE NAV PANEL ===== */
.mobile-nav-panel {
  display: none;
}

@media (max-width: 768px) {
  .mobile-nav-panel {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1001;
    background: #1a1a1a;
    overflow: hidden;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  }

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

  /* Top bar inside mobile panel */
  .mnp-header {
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 20px;
    position: relative;
  }

  .mnp-close {
    background: none;
    border: none;
    font-size: 1.6rem;
    color: rgba(255,255,255,0.85);
    cursor: pointer;
    padding: 4px;
    line-height: 1;
  }

  .mnp-back {
    position: absolute;
    left: 20px;
    background: none;
    border: none;
    font-size: 1.2rem;
    color: rgba(255,255,255,0.5);
    cursor: pointer;
    padding: 4px;
    display: none;
  }

  .mnp-back.visible {
    display: block;
  }

  /* Sliding container */
  .mnp-slider {
    position: relative;
    height: calc(100% - 52px);
    overflow: hidden;
  }

  /* Each panel (main + sub-panels) */
  .mnp-page {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 10px 28px 40px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1),
                opacity 0.35s ease;
  }

  .mnp-page.main {
    transform: translateX(0);
    opacity: 1;
  }

  .mnp-page.main.pushed {
    transform: translateX(-80px);
    opacity: 0.3;
    pointer-events: none;
  }

  .mnp-page.sub {
    transform: translateX(100%);
    opacity: 0;
  }

  .mnp-page.sub.active {
    transform: translateX(0);
    opacity: 1;
  }

  /* Main menu items */
  .mnp-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    text-decoration: none;
    color: rgba(255,255,255,0.92);
    font-size: 1.05rem;
    font-weight: 400;
    border: none;
    background: none;
    width: 100%;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
  }

  .mnp-item.has-sub::after {
    content: '›';
    font-size: 1.5rem;
    color: rgba(255,255,255,0.35);
    font-weight: 300;
    line-height: 1;
  }

  .mnp-item.active-item {
    font-weight: 700;
  }

  /* Sub-panel featured links (large bold) */
  .mnp-featured-link {
    display: block;
    font-size: 1.35rem;
    font-weight: 700;
    color: rgba(255,255,255,0.92);
    text-decoration: none;
    padding: 5px 0;
    line-height: 1.4;
    letter-spacing: -0.015em;
  }

  .mnp-featured-link:first-of-type {
    margin-top: 4px;
  }

  /* Sub-panel small links */
  .mnp-sm-link {
    display: block;
    font-size: 0.85rem;
    font-weight: 400;
    color: rgba(255,255,255,0.45);
    text-decoration: none;
    padding: 4px 0;
    margin-top: 4px;
  }

  /* Sub-panel bottom columns */
  .mnp-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 32px;
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,0.1);
  }

  .mnp-col-title {
    font-size: 0.7rem;
    font-weight: 500;
    color: rgba(255,255,255,0.4);
    margin-bottom: 10px;
    letter-spacing: 0.02em;
  }

  .mnp-col-link {
    display: block;
    font-size: 0.82rem;
    font-weight: 400;
    color: rgba(255,255,255,0.55);
    text-decoration: none;
    padding: 3px 0;
  }

  /* Body scroll lock */
  body.mobile-nav-open {
    overflow: hidden;
  }
}

/* ===== MEGA MENU ===== */
.nav-links li {
  position: relative;
}

.nav-links li > a {
  position: relative;
}

/* Has-mega indicator */
.has-mega > a::after {
  content: '';
  display: none;
}

/* The mega dropdown overlay */
.mega-overlay {
  position: fixed;
  top: 52px;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0);
  z-index: 998;
  pointer-events: none;
  transition: background 0.35s ease;
}

.mega-overlay.active {
  background: rgba(0,0,0,0);
  pointer-events: auto;
}

/* Mega menu panel */
/* Position each mega menu absolutely relative to its trigger <li>, so the
   dropdown width auto-fits the inner content instead of spanning the page.
   align-self: stretch makes the li take the full nav height so the dropdown
   sits flush against the bottom of the nav bar (no gap below the link). */
.nav-links li.has-mega {
  position: relative;
  align-self: stretch !important;
  height: 100%;
  display: flex;
  align-items: center;
}

.mega-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 999;
  background: var(--navy, #11315E);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: max-height 0.35s cubic-bezier(0.25, 1, 0.5, 1),
              opacity 0.25s ease,
              visibility 0.25s ease;
  pointer-events: none;
  box-shadow: 0 28px 56px -20px rgba(0, 0, 0, 0.45);
}

.mega-menu.open {
  max-height: 640px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Per-menu anchoring:
   - About (1 column, narrow): absolute under trigger, left-aligned
   - Areas (2 columns, medium): absolute under trigger, right-aligned so it stays on screen
   - Services (4 columns, wide): break out of li-relative positioning and pin to the
     viewport center so the wide menu doesn't drift off the left edge */
.mega-menu#mega-areas {
  left: auto;
  right: 0;
  max-width: min(92vw, 720px);
}

.mega-menu#mega-services {
  position: fixed;
  top: 120px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  max-width: min(94vw, 1280px);
}

.mega-menu-inner {
  padding: 28px 36px 32px;
  display: grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 48px;
  width: max-content;
  max-width: 100%;
}

/* Two-column mega (Areas Served) */
.mega-menu#mega-areas .mega-menu-inner {
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 56px;
}

/* Compact variant — single column (About Us) */
.mega-menu--compact .mega-menu-inner {
  grid-template-columns: minmax(180px, auto);
  padding: 18px 22px 22px;
  gap: 0;
}

/* Section heading at the top of each column */
.mega-col-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: #ffffff;
  text-transform: none;
  letter-spacing: 0;
  margin: 0 0 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

/* All column links — uniform white list items */
.mega-col-featured .mega-link,
.mega-col .mega-link {
  display: block;
  font-size: 0.94rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  line-height: 1.4;
  padding: 7px 0;
  letter-spacing: 0;
  transition: color 0.18s ease, padding-left 0.18s ease;
}

.mega-col-featured .mega-link:hover,
.mega-col .mega-link:hover,
.mega-col-featured .mega-link.is-active,
.mega-col .mega-link.is-active {
  color: var(--accent, #25B5C9);
  padding-left: 4px;
}

/* Style the featured "Emergency Plumbing"-style inline-styled link the same as the rest now */
.mega-col-featured .mega-link[style*="font-weight"] {
  font-weight: 500 !important;
}

.mega-col-featured .mega-link-sm {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  padding: 5px 0;
  margin-top: 6px;
  transition: color 0.18s ease;
}

.mega-col-featured .mega-link-sm:hover {
  color: var(--accent, #25B5C9);
}

/* Active nav item highlight when mega is open */
.nav-links li.mega-active > a {
  opacity: 1 !important;
  color: var(--blue) !important;
}

/* ===== HERO ===== */
/* ===== HERO — modern split layout (text panel + image card) ===== */
.hero {
  position: relative;
  padding: 72px 24px 88px;
  background: var(--off-white);
  overflow: hidden;
}

/* Soft brand-coloured glow blobs behind the content */
.hero::before {
  content: '';
  position: absolute;
  top: -160px;
  right: -160px;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, var(--blue-light) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.hero::after {
  content: '';
  position: absolute;
  bottom: -240px;
  left: -120px;
  width: 560px;
  height: 560px;
  background: radial-gradient(circle, rgba(37, 181, 201, 0.10) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.hero-grid {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}

/* Flipped split — image on the left, content on the right */
.hero--flip .hero-image-wrap { order: -1; }

.hero-content {
  display: flex;
  flex-direction: column;
  opacity: 0;
  animation: fadeUp 0.8s ease 0.1s forwards;
}

.hero-eyebrow {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: var(--blue-light);
  color: var(--blue);
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-bottom: 24px;
}
.hero-eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue);
}

.hero-headline {
  font-size: clamp(2.25rem, 4.6vw, 4rem);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--navy);
  text-transform: uppercase;
  margin: 0 0 22px;
}
.hero-headline-accent {
  display: block;
  margin-top: 10px;
  color: var(--blue);
  font-weight: 800;
  font-style: italic;
  font-size: 0.62em;
  text-transform: none;
  letter-spacing: -0.005em;
}

.hero-sub {
  font-size: clamp(1rem, 1.15vw, 1.125rem);
  color: var(--slate);
  line-height: 1.65;
  max-width: 540px;
  margin: 0 0 32px;
}

.hero-buttons {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.hero-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 30px;
  background: var(--blue);
  color: #fff;
  border-radius: 14px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  letter-spacing: -0.005em;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 8px 20px -8px rgba(37, 181, 201, 0.55);
}
.hero-btn-primary:hover {
  background: var(--blue-hover);
  transform: translateY(-2px);
  box-shadow: 0 14px 24px -10px rgba(37, 181, 201, 0.65);
}

.hero-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 26px;
  background: transparent;
  color: var(--navy);
  border: 2px solid var(--navy);
  border-radius: 14px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  transition: all 0.2s ease;
}
.hero-btn-secondary:hover {
  background: var(--navy);
  color: #fff;
}

.hero-trust {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
  color: var(--slate);
  flex-wrap: wrap;
}
.hero-stars {
  color: var(--amber);
  letter-spacing: 2px;
  font-size: 1.1rem;
  line-height: 1;
}
.hero-rating-score {
  font-weight: 800;
  color: var(--navy);
}
.hero-rating-meta {
  color: var(--mid-gray);
}

/* Image side */
.hero-image-wrap {
  position: relative;
  aspect-ratio: 4 / 5;
  max-height: 600px;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  opacity: 0;
  animation: fadeUp 1s ease 0.3s forwards;
}
.hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-image-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(17, 49, 94, 0.45) 100%);
  pointer-events: none;
}

.hero-badge {
  position: absolute;
  bottom: 24px;
  left: 24px;
  right: 24px;
  background: var(--navy);
  color: #fff;
  padding: 18px 22px;
  border-radius: 16px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.28);
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 2;
}
.hero-badge-icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  font-weight: 900;
}
.hero-badge-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.hero-badge-eyebrow {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--blue);
  margin-bottom: 4px;
}
.hero-badge-title {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.005em;
}

/* Preserve global button classes (used by other components like info_cards,
   testimonials, contact_row). These were originally in this file at this
   position, kept untouched semantically — they remain available globally. */
.btn-primary {
  background: var(--blue);
  color: white;
  padding: 14px 32px;
  border-radius: 980px;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn-primary:hover {
  background: var(--blue-hover);
  transform: scale(1.02);
}

.btn-secondary {
  background: #ffffff;
  color: var(--blue);
  padding: 12px 30px;
  border-radius: 980px;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  border: 2px solid var(--blue);
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.btn-secondary:hover { background: var(--blue); color: #ffffff; transform: translateY(-1px); }

/* Hero responsive — stack on smaller screens */
@media (max-width: 960px) {
  .hero { padding: 48px 16px 64px; }
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .hero-image-wrap {
    aspect-ratio: 16 / 10;
    max-height: 420px;
    order: -1; /* image on top on mobile for visual punch */
  }
  .hero-badge {
    padding: 14px 18px;
    bottom: 16px;
    left: 16px;
    right: 16px;
  }
}

.floating-badge {
  position: absolute;
  background: white;
  border-radius: 16px;
  padding: 14px 20px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.1);
  font-size: 0.85rem;
  font-weight: 600;
  z-index: 3;
  animation: float 3s ease-in-out infinite;
}

.floating-badge.badge-1 {
  top: 40px;
  left: 60px;
  animation-delay: 0s;
}

.floating-badge.badge-2 {
  top: 60px;
  right: 60px;
  animation-delay: 1s;
}

.floating-badge.badge-3 {
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  animation-delay: 0.5s;
}

.badge-icon { margin-right: 8px; }

/* ===== PRODUCT FAMILY NAV — Compact Icon Strip ===== */
.family-strip {
  background: var(--white);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  padding: 0 24px;
}

.family-strip-container {
  max-width: 1200px;
  margin: 0 auto;
}

.family-strip-title {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--dark-gray);
  padding: 20px 0 0;
}

.family-strip-inner {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.family-strip-inner::-webkit-scrollbar { display: none; }

.family-strip-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: var(--dark-gray);
  padding: 16px 20px 14px;
  flex-shrink: 0;
  cursor: pointer;
  transition: background 0.15s;
  min-width: 0;
}

.family-strip-item:hover {
  background: rgba(0,0,0,0.03);
}

.family-strip-item.active {
  border-bottom: 2px solid var(--blue);
}

.family-strip-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}

.family-strip-icon svg {
  width: 28px;
  height: 28px;
  color: var(--dark-gray);
}

.family-strip-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--dark-gray);
  text-align: center;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.family-strip-tag {
  font-size: 0.6rem;
  font-weight: 700;
  margin-top: 2px;
  color: var(--blue);
  letter-spacing: 0.02em;
}

.family-strip-tag.tag-green { color: #22a861; }
.family-strip-tag.tag-orange { color: #e07c24; }
.family-strip-tag.tag-red { color: #d63a3a; }
.family-strip-tag.tag-purple { color: #7c3aed; }

/* ===== CLOSER LOOK CAROUSEL ===== */
.closer-look {
  padding: 80px 0 80px;
  background: var(--white);
}

.closer-look-header {
  max-width: 1200px;
  margin: 0 auto 36px;
  padding: 0 24px;
}

.closer-look-header h2 {
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--dark-gray);
}

.carousel-wrapper {
  position: relative;
  overflow: hidden;
  padding: 0 24px;
}

.carousel-track {
  display: flex;
  gap: 20px;
  will-change: transform;
}

.carousel-slide {
  flex: 0 0 calc(85vw - 48px);
  max-width: 1060px;
  min-height: 480px;
  border-radius: 24px;
  position: relative;
  overflow: hidden;
  cursor: grab;
}

.carousel-slide:active { cursor: grabbing; }

.slide-bg {
  position: absolute;
  inset: 0;
  display: flex;
}

.slide-bg-left { flex: 1; }
.slide-bg-right { flex: 1; }

.slide-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 60px;
  max-width: 50%;
  min-height: 480px;
}

.slide-content h3 {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
  color: var(--dark-gray);
}

.slide-content .slide-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--dark-gray);
  color: white;
  padding: 14px 30px;
  border-radius: 980px;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  align-self: flex-start;
}

.slide-content .slide-btn:hover {
  background: #000;
  transform: scale(1.03);
}

.slide-visual {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 50%;
  z-index: 1;
  background-size: cover;
  background-position: center;
}

.slide-body {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--slate);
  margin-bottom: 20px;
}

.slide-body ul {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
}

.slide-body ul li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 6px;
}

.slide-body ul li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--blue);
  font-weight: 600;
  pointer-events: none;
}

.carousel-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 32px;
}

.carousel-arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid rgba(0,0,0,0.15);
  background: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--dark-gray);
  transition: all 0.2s;
}

.carousel-arrow:hover {
  background: var(--light-gray);
  border-color: rgba(0,0,0,0.25);
}

.carousel-arrow:disabled {
  opacity: 0.25;
  cursor: default;
}

.carousel-dots {
  display: flex;
  gap: 8px;
  align-items: center;
}

.carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mid-gray);
  opacity: 0.25;
  border: none;
  cursor: pointer;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 0;
}

.carousel-dot.active {
  opacity: 1;
  background: var(--dark-gray);
  width: 28px;
  border-radius: 4px;
}

/* Slide color themes */
.slide-warm .slide-bg-left { background: #e8eff4; }
.slide-warm .slide-bg-right { background: linear-gradient(135deg, #8fa3b0 0%, #4e6878 100%); }

.slide-blue .slide-bg-left { background: #e4f0fa; }
.slide-blue .slide-bg-right { background: linear-gradient(135deg, #1a8ad4 0%, #005a8c 100%); }

.slide-green .slide-bg-left { background: #e8f0f4; }
.slide-green .slide-bg-right { background: linear-gradient(135deg, #5a9ab5 0%, #3a7a95 100%); }

.slide-purple .slide-bg-left { background: #eaf0f5; }
.slide-purple .slide-bg-right { background: linear-gradient(135deg, #6889a0 0%, #3d5c72 100%); }

/* ===== WHY CHOOSE CAROUSEL ===== */
.why-section {
  padding: 80px 0 60px;
  background: var(--white);
}

.why-header {
  max-width: 1200px;
  margin: 0 auto 36px;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.why-header h2 {
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--dark-gray);
  line-height: 1.1;
}

.why-header a {
  color: var(--blue);
  font-size: 1.05rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap 0.2s;
}

.why-header a:hover { gap: 8px; }

.why-carousel-wrapper {
  position: relative;
  overflow: hidden;
  padding: 0 24px;
}

.why-carousel-track {
  display: flex;
  gap: 16px;
  will-change: transform;
}

.why-card {
  flex: 0 0 calc(25% - 12px);
  min-width: 280px;
  background: var(--light-gray);
  border-radius: 20px;
  padding: 36px 32px 0;
  display: flex;
  flex-direction: column;
  min-height: 420px;
  position: relative;
  cursor: grab;
  transition: box-shadow 0.3s;
  overflow: hidden;
}

.why-card:active { cursor: grabbing; }

.why-card:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,0.06);
}

.why-card-eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--dark-gray);
  margin-bottom: 14px;
}

.why-card-title {
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--dark-gray);
  margin-bottom: 14px;
}

.why-card-desc {
  font-size: 0.9rem;
  color: var(--mid-gray);
  line-height: 1.5;
  flex-grow: 0;
  padding-bottom: 16px;
}

.why-card-visual {
  margin-top: auto;
  padding-top: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4.5rem;
  flex-grow: 1;
  position: relative;
}

.why-card-visual:has(.why-card-photo) {
  padding-top: 16px;
  align-items: flex-end;
  margin-left: -32px;
  margin-right: -32px;
}

.why-card-photo {
  width: 100%;
  height: 180px;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
  display: block;
}

.why-card-plus {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: rgba(255,255,255,0.9);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--dark-gray);
  transition: all 0.2s;
  text-decoration: none;
  cursor: pointer;
  z-index: 2;
}

.why-card:hover .why-card-plus {
  background: var(--blue);
  color: white;
}

.why-nav {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  max-width: 1200px;
  margin: 28px auto 0;
  padding: 0 24px;
}

.why-arrow {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid rgba(0,0,0,0.12);
  background: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--dark-gray);
  transition: all 0.2s;
}

.why-arrow:hover {
  background: var(--light-gray);
  border-color: rgba(0,0,0,0.2);
}

.why-arrow:disabled {
  opacity: 0.2;
  cursor: default;
  pointer-events: none;
}

/* ===== MARQUEE BAR ===== */
.marquee-bar {
  background: var(--dark-gray);
  color: white;
  padding: 14px 0;
  overflow: hidden;
  white-space: nowrap;
}

.marquee-content {
  display: inline-flex;
  animation: marquee 30s linear infinite;
  gap: 60px;
}

.marquee-content span {
  font-size: 0.85rem;
  font-weight: 500;
  opacity: 0.9;
  display: flex;
  align-items: center;
  gap: 8px;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ===== SECTIONS ===== */
section {
  padding: 100px 24px;
}

.section-container {
  max-width: 1200px;
  margin: 0 auto;
}

.section-overline {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--blue);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-align: center;
  margin-bottom: 12px;
}

.section-title {
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  text-align: center;
  line-height: 1.1;
  margin-bottom: 16px;
}

.section-subtitle {
  font-size: 1.15rem;
  color: var(--mid-gray);
  text-align: center;
  max-width: 600px;
  margin: 0 auto 60px;
  line-height: 1.5;
}

/* ===== CALLOUT CARD — full-bleed teal voltage CTA (DESIGN.md accent moment) ===== */
.callout-section {
  background: var(--canvas);
  padding: 96px 24px;
}
.callout-card {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  background: var(--blue);
  border-radius: var(--r-xl);
  padding: 72px 56px;
  text-align: center;
  color: #ffffff;
  overflow: hidden;
}
/* soft inner glow, top-right — adds depth without a drop shadow */
.callout-card::before {
  content: '';
  position: absolute;
  top: -120px;
  right: -120px;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(255,255,255,0.18) 0%, transparent 70%);
  pointer-events: none;
}
.callout-overline {
  position: relative;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(255,255,255,0.85);
  margin: 0 0 16px;
}
.callout-headline {
  position: relative;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: 1.1;
  color: #ffffff;
  margin: 0 auto 18px;
  max-width: 760px;
}
.callout-body {
  position: relative;
  font-size: 1.1rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.92);
  margin: 0 auto 32px;
  max-width: 560px;
}
.callout-actions {
  position: relative;
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.callout-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  background: #ffffff;
  color: var(--navy);
  border-radius: var(--r-md);
  font-weight: 700;
  font-size: 0.98rem;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.callout-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -10px rgba(0,0,0,0.3);
}
.callout-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  background: transparent;
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: var(--r-md);
  font-weight: 700;
  font-size: 0.98rem;
  text-decoration: none;
  transition: background 0.2s ease;
}
.callout-btn-secondary:hover {
  background: rgba(255,255,255,0.12);
}
@media (max-width: 640px) {
  .callout-section { padding: 64px 16px; }
  .callout-card { padding: 48px 28px; }
}

/* ===== TEXT BLOCK — editorial prose section ===== */
.text-block {
  background: var(--white);
  padding: 80px 24px;
}
.text-block-inner {
  max-width: 920px;
  margin: 0 auto;
}
.text-block--center .text-block-inner { text-align: center; }
.text-block--center .text-block-headline::after { margin-left: auto; margin-right: auto; }

/* Two-column variant — widens the container to the standard 1200px and
   lays blocks out edge-to-edge in a 50/50 grid. The vertical "stack with
   margin-bottom" rule is dropped inside the grid since the gap handles
   spacing on both axes. */
.text-block--two-col .text-block-inner { max-width: 1200px; }
.text-block--two-col .text-block-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px;
  align-items: start;
}
.text-block--two-col .text-block-item { margin-bottom: 0; }
@media (max-width: 760px) {
  .text-block--two-col .text-block-grid { grid-template-columns: 1fr; }
}

/* On-dark variant — invert text colours when text_block sits on a
   saturated/dark background (e.g. teal voltage band). Mirrors the
   feature-section--on-dark rule. */
.text-block--on-dark .text-block-overline { color: rgba(255,255,255,0.85); }
.text-block--on-dark .text-block-headline { color: #ffffff; }
.text-block--on-dark .text-block-heading  { color: #ffffff; }
.text-block--on-dark .text-block-body,
.text-block--on-dark .text-block-list,
.text-block--on-dark .text-block-list li { color: rgba(255,255,255,0.92); }
.text-block--on-dark .text-block-body strong,
.text-block--on-dark .text-block-list strong { color: #ffffff; }
.text-block--on-dark .text-block-body a,
.text-block--on-dark .text-block-list a { color: #ffffff; text-decoration: underline; text-underline-offset: 3px; }
.text-block--on-dark .text-block-cta.btn-primary {
  background: #ffffff;
  color: var(--ink);
}
.text-block--on-dark .text-block-cta.btn-primary:hover { background: #f3f7f9; }

.text-block-overline {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--blue);
  margin: 0 0 14px;
}
.text-block-headline {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.2vw, 3.25rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: var(--navy);
  margin: 0 0 36px;
}
.text-block-item {
  margin-bottom: 28px;
}
.text-block-item:last-of-type { margin-bottom: 0; }
.text-block-heading {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--navy);
  margin: 0 0 10px;
}
.text-block-body {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--slate);
  margin: 0;
}
.text-block-list {
  margin: 12px 0 0;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--slate);
}
.text-block-list ul { margin: 0; padding-left: 22px; }
.text-block-list li { margin: 4px 0; }
.text-block-cta {
  margin-top: 36px;
}
.text-block-footer {
  margin: 36px 0 0;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--body);
  text-align: center;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 640px) {
  .text-block { padding: 56px 16px; }
}

/* ===== SERVICE DIRECTORY — modern editorial card grid ===== */
.service-directory {
  background: #d5f2f9;
  padding: 84px 24px;
}
.service-directory-inner {
  max-width: 1280px;
  margin: 0 auto;
}

.service-directory-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 48px;
  flex-wrap: wrap;
}
.service-directory-header-text {
  max-width: 720px;
}
.service-directory-eyebrow {
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--slate);
  margin: 0 0 14px;
}
.service-directory-headline {
  font-size: clamp(2.25rem, 5vw, 4.25rem);
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 1.02;
  color: var(--navy);
  text-transform: uppercase;
  margin: 0;
}
.service-directory-sub {
  font-size: 1.05rem;
  color: var(--slate);
  margin: 16px 0 0;
  line-height: 1.55;
}
.service-directory-link {
  flex-shrink: 0;
  color: var(--blue);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 6px;
  transition: gap 0.2s ease, color 0.2s ease;
}
.service-directory-link:hover {
  color: var(--blue-hover);
  gap: 10px;
}
.service-directory-link span {
  display: inline-block;
  transition: transform 0.2s ease;
}
.service-directory-link:hover span { transform: translateX(2px); }

.service-directory-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.sd-card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid #e7ecf3;
  text-decoration: none;
  color: var(--navy);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.sd-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -14px rgba(17, 49, 94, 0.18);
  border-color: var(--blue);
}

.sd-card-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--blue-light);
  color: var(--blue);
}
.sd-card-icon svg {
  width: 22px;
  height: 22px;
  color: var(--blue);
  stroke: var(--blue);
}

.sd-card-text {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.sd-card-title {
  font-size: 0.95rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--navy);
  line-height: 1.2;
}
.sd-card-subtitle {
  font-size: 0.82rem;
  color: var(--slate);
  font-weight: 400;
  line-height: 1.3;
}

.sd-card-arrow {
  flex: 0 0 auto;
  color: var(--mid-gray);
  font-size: 1.1rem;
  transition: color 0.2s ease, transform 0.2s ease;
}
.sd-card:hover .sd-card-arrow {
  color: var(--blue);
  transform: translateX(3px);
}

@media (max-width: 960px) {
  .service-directory { padding: 64px 16px; }
  .service-directory-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .service-directory-cards { grid-template-columns: 1fr; }
  .service-directory-header { flex-direction: column; align-items: flex-start; }
}

/* ===== SERVICE GRID — modern 3-column card grid ===== */
/* ===== SERVICE GRID — title + desc cards with footer (link left, icon right) ===== */
.service-grid-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}
.service-grid-eyebrow {
  text-align: center;
  margin-bottom: 18px;
}
/* Parenthesized eyebrow accent, e.g. ( Plumbing Services We Offer ) */
.service-grid-eyebrow::before { content: '( '; }
.service-grid-eyebrow::after  { content: ' )'; }
.service-grid-header .section-subtitle { margin-left: auto; margin-right: auto; }

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 52px;
}

.service-card {
  position: relative;
  background: #ffffff;
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 40px 34px 32px;
  text-align: left;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 340px;
}
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-soft);
  border-color: var(--blue);
}

/* Featured — subtle persistent teal accent border */
.service-card.featured { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue) inset; }
.service-card.blue-card,
.service-card.warm-card { background: #ffffff; }

.card-eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--blue);
  margin: 0 0 12px;
}

.card-title {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--ink);
  line-height: 1.2;
  margin: 0 0 14px;
}

.card-subtitle {
  font-size: 0.97rem;
  color: var(--body);
  line-height: 1.6;
  margin: 0;
}

/* Footer row — pinned to the bottom of the card */
.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: auto;
  padding-top: 28px;
}
.card-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--blue);
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  transition: gap 0.2s ease, color 0.2s ease;
}
.card-link:hover { color: var(--blue-hover); }
.service-card:hover .card-link { gap: 11px; }
.card-link-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-size: 0.78rem;
  transition: transform 0.2s ease;
}
.service-card:hover .card-link-arrow { transform: translateX(2px); }

/* Circular icon badge, bottom-right */
.card-icon-circle {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--blue);
  overflow: hidden;
}
.card-icon-circle svg {
  width: 30px;
  height: 30px;
  color: #ffffff;
  fill: none;
  stroke: #ffffff;
  stroke-width: 1.7;
}
.card-icon-circle img {
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Footer note under the grid */
.service-grid-footer {
  text-align: center;
  margin-top: 44px;
  font-size: 1rem;
  color: var(--muted);
}
.service-grid-footer a {
  color: var(--blue);
  font-weight: 700;
  text-decoration: none;
}
.service-grid-footer a:hover { text-decoration: underline; }

/* Plain (info-only) cards — no footer link, no icon circle */
.service-card.service-card--plain { min-height: 0; padding: 32px 28px; }
.service-card.service-card--plain .card-title { margin-bottom: 10px; }
.service-card.service-card--plain .card-subtitle { margin-bottom: 0; }

/* On-dark variant (e.g. teal voltage band background) */
.service-grid-section--on-dark { padding: 80px 24px; }
.service-grid-section--on-dark .section-overline,
.service-grid-section--on-dark .service-grid-eyebrow,
.service-grid-section--on-dark .section-title,
.service-grid-section--on-dark .section-subtitle { color: #ffffff; }
.service-grid-section--on-dark .service-card {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(255, 255, 255, 0.2);
}
.service-grid-section--on-dark .service-grid-footer { color: rgba(255, 255, 255, 0.92); }
.service-grid-section--on-dark .service-grid-footer a { color: #ffffff; text-decoration: underline; }

/* Tight-spacing utilities — collapse the gap when two same-bg sections stack */
.section-tight-top    { padding-top: 0 !important; }
.section-tight-bottom { padding-bottom: 0 !important; }

/* Responsive: 2-col tablet, 1-col mobile */
@media (max-width: 1100px) {
  .service-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 20px; }
}
@media (max-width: 640px) {
  .service-grid { grid-template-columns: 1fr !important; gap: 16px; margin-top: 32px; }
  .service-card { padding: 28px 24px; min-height: 0; }
  .card-photo { width: calc(100% + 48px); margin: -28px -24px 18px; }
}

/* ===== FEATURE EXPLORER (Apple Design-style) ===== */
.feature-explorer {
  padding: 100px 24px 100px;
  background: var(--white);
}

.feature-explorer-inner {
  max-width: 1260px;
  margin: 0 auto;
}

.fe-eyebrow {
  font-size: 1rem;
  font-weight: 700;
  color: var(--dark-gray);
  margin-bottom: 12px;
}

.fe-headline {
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.08;
  margin-bottom: 24px;
  background: linear-gradient(135deg, #005a8c 0%, #1a8ad4 40%, #8fa3b0 70%, #4e6878 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.fe-body {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--mid-gray);
  max-width: 680px;
  margin-bottom: 0;
}

.fe-body strong {
  color: var(--dark-gray);
}

.fe-showcase {
  max-width: 1260px;
  margin: 48px auto 0;
  background: var(--light-gray);
  border-radius: 24px;
  min-height: 520px;
  display: grid;
  grid-template-columns: 380px 1fr;
  overflow: hidden;
  position: relative;
}

.fe-pills-col {
  display: flex;
  flex-direction: column;
  padding: 40px 0 40px 36px;
  gap: 0;
  position: relative;
  z-index: 2;
}

.fe-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: 980px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--dark-gray);
  text-align: left;
  transition: all 0.3s ease;
  position: relative;
  width: fit-content;
}

.fe-pill:hover {
  background: rgba(0,0,0,0.04);
}

.fe-pill-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  background: rgba(0,0,0,0.06);
  color: var(--mid-gray);
  transition: all 0.3s;
  flex-shrink: 0;
}

.fe-pill.active {
  background: rgba(255,255,255,0.9);
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

.fe-pill.active .fe-pill-icon {
  background: var(--blue);
  color: white;
}

.fe-pill-detail {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s, padding 0.4s;
  opacity: 0;
  padding: 0 20px 0 20px;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--mid-gray);
  font-weight: 400;
}

.fe-pill-detail.open {
  max-height: 600px;
  opacity: 1;
  padding: 6px 20px 16px 20px;
}

.fe-visual-col {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.fe-visual-item {
  position: absolute;
  inset: 0;
  border-radius: 0 16px 16px 0;
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.fe-visual-item.active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.fe-nav-arrows {
  position: absolute;
  left: 36px;
  bottom: 50%;
  transform: translateY(50%);
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 3;
  display: none; /* hidden on desktop, arrows optional */
}

.fe-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0,0,0,0.06);
  border: none;
  cursor: pointer;
  font-size: 1rem;
  color: var(--mid-gray);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

.fe-close.visible {
  opacity: 1;
  pointer-events: auto;
}

.fe-close:hover {
  background: rgba(0,0,0,0.1);
}

/* ===== TABBED SHOWCASE COMPONENT ===== */

.tab-showcase {
  padding: 100px 24px;
  background: var(--white);
}

.tab-showcase-inner {
  max-width: 980px;
  margin: 0 auto;
}

.ts-header {
  text-align: center;
  margin-bottom: 48px;
}

.ts-headline {
  font-size: clamp(2.4rem, 5.5vw, 3.8rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.05;
  margin-bottom: 20px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 50%, var(--mid-gray) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.ts-intro {
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--slate);
  max-width: 680px;
  margin: 0 auto;
  font-weight: 400;
}

.ts-intro strong {
  color: var(--dark-gray);
  font-weight: 600;
}

.ts-card {
  background: var(--light-gray);
  border-radius: 24px;
  overflow: hidden;
}

.ts-image-area {
  position: relative;
  width: 100%;
  aspect-ratio: 2.2 / 1;
  overflow: hidden;
  background: #e8edf1;
}

.ts-image-panel {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  transform: scale(1.02);
  pointer-events: none;
}

.ts-image-panel.active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.ts-image-panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ts-pills {
  display: flex;
  justify-content: center;
  gap: 4px;
  padding: 20px 24px 0;
  flex-wrap: wrap;
}

.ts-pill {
  padding: 10px 22px;
  border-radius: 980px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--slate);
  transition: all 0.25s ease;
  white-space: nowrap;
}

.ts-pill:hover {
  background: rgba(0,0,0,0.04);
  color: var(--dark-gray);
}

.ts-pill.active {
  background: var(--dark-gray);
  color: white;
  font-weight: 600;
}

.ts-content-area {
  position: relative;
  min-height: 160px;
}

.ts-content-panel {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 40px;
  padding: 32px 40px 40px;
  align-items: start;
}

.ts-content-panel.active {
  position: relative;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.ts-content-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--dark-gray);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

.ts-content-body {
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--mid-gray);
  font-weight: 400;
}

.ts-content-body strong {
  color: var(--dark-gray);
  font-weight: 600;
}

.ts-content-aside {
  font-size: 0.85rem;
  line-height: 1.65;
  color: var(--mid-gray);
  padding-left: 32px;
  border-left: 1px solid rgba(0,0,0,0.08);
}

.ts-content-aside strong {
  color: var(--dark-gray);
  font-weight: 600;
  display: block;
  margin-bottom: 4px;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ts-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--blue);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  margin-top: 16px;
  transition: gap 0.2s;
}

.ts-cta:hover { gap: 10px; }

/* ===== HERO BANNER + ICON COLUMNS ===== */

.hero-banner {
  padding: 100px 24px 80px;
  background: var(--light-gray);
}

.hero-banner-inner {
  max-width: 980px;
  margin: 0 auto;
}

.hb-headline {
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.12;
  text-align: center;
  color: var(--dark-gray);
  max-width: 740px;
  margin: 0 auto 20px;
}

.hb-subheadline {
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--slate);
  text-align: center;
  max-width: 680px;
  margin: 0 auto 16px;
}

.hb-body {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--mid-gray);
  text-align: center;
  max-width: 640px;
  margin: 0 auto 32px;
}

.hero-banner .btn-primary {
  display: block;
  width: fit-content;
  margin: 0 auto 14px;
}

/* Optional small note shown directly under the hero CTA */
.hb-cta-note {
  text-align: center;
  font-size: 0.88rem;
  color: var(--mid-gray);
  max-width: 560px;
  margin: 0 auto 48px;
  line-height: 1.55;
}

.hb-image {
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 64px;
  background: #dde4ea;
}

.hb-image img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  max-height: 480px;
}

/* Contain variant — show full image without cropping */
.hb-image-contain img {
  object-fit: contain;
  max-height: 520px;
}

.hb-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 64px;
}

.hb-col {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.hb-col-icon {
  width: 44px;
  min-width: 44px;
  height: 44px;
  color: var(--dark-gray);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hb-col-icon .icon,
.hb-col-icon .icon-md {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hb-col-icon svg {
  width: 32px;
  height: 32px;
  display: block;
}

.hb-col-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--dark-gray);
  display: inline;
}

.hb-col-body {
  display: inline;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--slate);
  font-weight: 400;
}

.hb-col-text {
  font-size: 1rem;
  line-height: 1.65;
  margin-bottom: 20px;
}

.hb-col-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--blue);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  transition: gap 0.2s;
  margin-top: 4px;
}

.hb-col-link:hover { gap: 8px; }

.hero-banner.single-col .hb-columns {
  grid-template-columns: 1fr;
  gap: 0;
  max-width: 640px;
  margin: 0 auto;
}

.hero-banner.single-col .hb-col + .hb-col {
  margin-top: 48px;
  padding-top: 48px;
  border-top: 1px solid rgba(0,0,0,0.08);
}

/* ===== FILTERABLE CARD GRID ===== */

.card-grid-section {
  padding: 100px 24px;
  background: var(--white);
}

.card-grid-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.cg-header {
  margin-bottom: 48px;
}

.cg-overline {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--blue);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 12px;
}

.cg-title {
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 12px;
  color: var(--dark-gray);
}

.cg-subtitle {
  font-size: 1.1rem;
  color: var(--mid-gray);
  max-width: 560px;
  line-height: 1.5;
}

.cg-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 32px;
}

.cg-filter {
  padding: 9px 20px;
  border-radius: 980px;
  border: 1.5px solid rgba(0,0,0,0.1);
  background: var(--white);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--slate);
  transition: all 0.2s ease;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.cg-filter:hover {
  border-color: var(--blue);
  color: var(--blue);
}

.cg-filter.active {
  background: var(--blue);
  border-color: var(--blue);
  color: white;
  font-weight: 600;
}

.cg-filter-count {
  font-size: 0.72rem;
  font-weight: 600;
  opacity: 0.6;
}

.cg-filter.active .cg-filter-count {
  opacity: 0.8;
}

.cg-search-wrap {
  position: relative;
  max-width: 360px;
  margin-bottom: 40px;
}

.cg-search {
  width: 100%;
  padding: 12px 16px 12px 44px;
  border-radius: 12px;
  border: 1.5px solid rgba(0,0,0,0.08);
  background: var(--light-gray);
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--dark-gray);
  outline: none;
  transition: border-color 0.2s;
}

.cg-search::placeholder { color: var(--mid-gray); }

.cg-search:focus {
  border-color: var(--blue);
  background: var(--white);
}

.cg-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--mid-gray);
  pointer-events: none;
}

.cg-category-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  margin-top: 16px;
}

.cg-category-group + .cg-category-group .cg-category-header {
  margin-top: 56px;
}

.cg-category-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--blue);
  white-space: nowrap;
}

.cg-category-line {
  flex: 1;
  height: 1px;
  background: rgba(0,0,0,0.08);
}

.cg-category-count {
  font-size: 0.78rem;
  color: var(--mid-gray);
  white-space: nowrap;
}

.cg-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.cg-card {
  background: var(--light-gray);
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  animation: cgCardIn 0.4s ease both;
}

.cg-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.08);
}

.cg-card.hidden { display: none; }

@keyframes cgCardIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.cg-category-group.hidden { display: none; }

.cg-card-image {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  position: relative;
}

.cg-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.4s ease;
}

.cg-card:hover .cg-card-image img {
  transform: scale(1.05);
}

.cg-card-body {
  padding: 22px 22px 26px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.cg-card-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--dark-gray);
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}

.cg-card-desc {
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--mid-gray);
  flex: 1;
  margin-bottom: 16px;
}

.cg-card-link {
  display: none;
}

.cg-card-link:hover { gap: 8px; }

.cg-card {
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cg-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.12);
}

.cg-no-results {
  text-align: center;
  padding: 80px 24px;
  color: var(--mid-gray);
  font-size: 1rem;
  display: none;
}

.cg-no-results.visible { display: block; }

/* ===== FULL-WIDTH FEATURE SECTION ===== */
.feature-section {
  padding: 0;
}

.feature-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 600px;
}

/* When using fit:contain, let block size naturally to image (no forced 600px) */
.feature-block.fit-contain { min-height: 0; }
.feature-block.fit-contain .feature-visual { min-height: 0; align-items: stretch; }
.feature-block.fit-contain .feature-content { padding: 60px 80px; }

/* Text-only variant — when neither image nor video is supplied, drop the
   2-column grid and let the content span the full width naturally. */
.feature-block.is-text-only {
  grid-template-columns: 1fr;
  min-height: 0;
}

/* When a feature-section sits in the sidebar's content column, drop the
   80px horizontal padding (it's already constrained by the grid container)
   and let its inner block fill the cell. */
main:has(> .section-nav) > .section-nav + .feature-section .feature-block {
  max-width: 100%;
}
main:has(> .section-nav) > .section-nav + .feature-section--contained {
  padding-left: 0;
  padding-right: 0;
}

/* Contained variant — the feature-block sits inside the standard 1200px
   site container with side padding, instead of running edge-to-edge. */
.feature-section--contained { padding: 80px 24px; }
.feature-section--contained .feature-block {
  max-width: 1200px;
  margin: 0 auto;
  min-height: 0;
  align-items: center;
  gap: 40px;
}
.feature-section--contained .feature-content { padding: 0; }
/* Background-image visual has no intrinsic height — give it an explicit
   aspect ratio so it doesn't collapse inside the contained block. The
   video variant keeps its own 16/9. */
.feature-section--contained .feature-visual:not(.feature-visual--video) {
  aspect-ratio: 4 / 3;
  min-height: 320px;
}

/* Wide modifier — paired with contained, drops the 1200px max-width so the
   inner block stretches edge-to-edge across the section while keeping the
   80px vertical padding and on-dark/bg styling. Use when the content
   needs to start at the section's left edge instead of a centered band. */
.feature-section--contained.feature-section--wide .feature-block {
  max-width: none;
  margin: 0;
}

/* Align-left modifier — paired with contained, left-aligns the 1200px block
   inside the section instead of centering it. Kills the left centering gap
   so the inner content starts at the section's left edge (just inside the
   24px section padding) while the block stays 1200px wide. */
.feature-section--contained.feature-section--align-left .feature-block {
  margin-left: 0;
  margin-right: auto;
}

/* Tight rhythm for body items inside any feature-content: paragraphs hug
   their following sub-heading, lists hug the sub-heading above. */
.feature-content > p { margin: 0 0 16px; }
.feature-content > p:last-child { margin-bottom: 0; }
.feature-content > h4 {
  font-family: var(--font-body);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 24px 0 12px;
}
.feature-content > h4:first-child { margin-top: 0; }
.feature-content > ul,
.feature-content > ol {
  margin: 0 0 16px;
  padding-left: 22px;
  color: var(--body);
  line-height: 1.7;
}
.feature-section--contained .feature-content { padding-left: 0; margin-left: 0; }
.feature-section--contained .feature-content > *:not(.btn-primary) { padding-left: 0; margin-left: 0; }
.feature-section--contained .feature-content > ul,
.feature-section--contained .feature-content > ol { padding-left: 18px; }
.feature-content > ul:last-child,
.feature-content > ol:last-child { margin-bottom: 0; }
.feature-content > ul li,
.feature-content > ol li { margin: 4px 0; }

/* On-dark variant — invert text for sections with a saturated/dark background
   (e.g. teal voltage bands). All foreground type becomes white / off-white. */
.feature-section--on-dark .section-overline { color: rgba(255,255,255,0.82); }
.feature-section--on-dark .section-title    { color: #ffffff; }
.feature-section--on-dark .feature-content > p,
.feature-section--on-dark .feature-content > ul,
.feature-section--on-dark .feature-content > ol,
.feature-section--on-dark .feature-content > ul li,
.feature-section--on-dark .feature-content > ol li { color: rgba(255,255,255,0.92); }
.feature-section--on-dark .feature-content > p strong { color: #ffffff; }
.feature-section--on-dark .feature-content > h4 { color: #ffffff; }
.feature-section--on-dark .feature-content a { color: #ffffff; text-decoration: underline; text-underline-offset: 3px; }
.feature-section--on-dark .btn-primary {
  background: #ffffff;
  color: var(--ink);
}
.feature-section--on-dark .btn-primary:hover { background: #f3f7f9; }

/* Stacked variant — single column: text content on top, visual below.
   Used when a side-by-side split feels too narrow (e.g. inside a sidebar
   layout) or when the visual should take the full content width. */
.feature-block.is-stacked {
  grid-template-columns: 1fr;
  min-height: 0;
  padding: 56px clamp(24px, 5vw, 64px);
  gap: 32px;
}
.feature-block.is-stacked .feature-content {
  padding: 0;
  order: 1;
}
.feature-block.is-stacked .feature-visual,
.feature-block.is-stacked .feature-visual--video {
  order: 2;
  width: 100%;
  max-width: 960px;
  margin: 0;
  min-height: 320px;
}
.feature-block.is-stacked .feature-visual--video { min-height: 0; }

/* Video variant — right (or left) column hosts an inline YouTube iframe */
.feature-block.has-video { min-height: 0; align-items: center; }
.feature-visual--video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 0;
  overflow: hidden;
}
.feature-visual--video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.feature-block.has-video .feature-content { padding: 64px clamp(32px, 6vw, 80px); }

.feature-block.reversed { direction: rtl; }
.feature-block.reversed > * { direction: ltr; }

.feature-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 80px 80px;
}

.feature-content .section-overline { text-align: left; }
.feature-content .section-title { text-align: left; font-size: 2.5rem; }

.feature-content p {
  color: var(--mid-gray);
  font-size: 1.1rem;
  line-height: 1.6;
  margin-top: 16px;
  margin-bottom: 32px;
}

.feature-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.feature-img-placeholder { font-size: 0;
}

.feature-bg-blue { background: linear-gradient(135deg, #e4f0fa 0%, #c8dff2 100%); }
.feature-bg-warm { background: linear-gradient(135deg, #e8eff4 0%, #d4dee8 100%); }
.feature-bg-green { background: linear-gradient(135deg, #deeaf2 0%, #c4d8e6 100%); }
.feature-bg-purple { background: linear-gradient(135deg, #e2ecf4 0%, #cddaea 100%); }

/* ===== STAT STRIP ===== */
.stat-strip {
  background: var(--light-gray);
  padding: 40px 24px;
}

.stats-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 48px;
  text-align: center;
}

.stat-number {
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--blue);
  line-height: 1;
  margin-bottom: 8px;
}

.stat-label {
  font-size: 0.9rem;
  color: var(--mid-gray);
  font-weight: 500;
}

/* ===== BEFORE/AFTER ===== */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.gallery-row {
  display: contents;
}

.gallery-card {
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  aspect-ratio: 4/3;
  transition: transform 0.3s;
}

.gallery-card:hover { transform: scale(1.02); }

.gallery-card-inner {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px;
  text-align: center;
  background-size: cover;
  background-position: center;
}

.gallery-card-inner.uimg {
  justify-content: flex-end;
  position: relative;
}

.gallery-card-inner.uimg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
}

.gallery-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 4px;
  padding: 4px 14px;
  border-radius: 980px;
  display: inline-block;
  position: relative;
  z-index: 1;
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: white;
}

.gallery-caption {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.85);
  font-weight: 500;
  position: relative;
  z-index: 1;
}

/* Explanation card (third column in each row) */
.gallery-explanation {
  border-radius: 20px;
  background: var(--light-gray);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.gallery-explanation-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--dark-gray);
  margin-bottom: 8px;
}

.gallery-explanation-text {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--mid-gray);
}

.gallery-explanation-tag {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--blue);
  margin-bottom: 10px;
}

/* ===== DARK SHOWCASE CAROUSEL ===== */
.dark-showcase {
  padding: 80px 0;
  background: var(--dark-gray);
}

.dark-showcase-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 48px;
  padding: 0 24px;
}

.dark-showcase-title {
  font-size: 2.8rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}

.dark-showcase-subtitle {
  font-size: 1.15rem;
  color: rgba(255,255,255,0.55);
  font-weight: 400;
}

.dark-showcase-wrapper {
  position: relative;
  overflow: hidden;
  padding: 0 24px;
}

.dark-showcase-track {
  display: flex;
  gap: 16px;
  will-change: transform;
}

.dark-showcase-card {
  flex: 0 0 calc(45vw - 32px);
  max-width: 580px;
  min-width: 340px;
  border-radius: 20px;
  overflow: hidden;
  background: #2a2a2d;
  display: flex;
  flex-direction: column;
  cursor: grab;
}

.dark-showcase-card:active { cursor: grabbing; }

.dark-showcase-visual {
  font-size: 0;
  position: relative;
  overflow: hidden;
  aspect-ratio: 2/1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.dark-showcase-caption {
  padding: 24px 28px 28px;
}

.dark-showcase-caption p {
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(255,255,255,0.6);
}

.dark-showcase-caption strong {
  color: white;
  font-weight: 700;
}

.dark-showcase-nav {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 32px;
  padding: 0 24px;
}

.dark-showcase-arrow {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.2);
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: rgba(255,255,255,0.6);
  transition: all 0.2s;
}

.dark-showcase-arrow:hover {
  border-color: rgba(255,255,255,0.5);
  color: white;
}

.dark-showcase-arrow:disabled {
  opacity: 0.2;
  cursor: default;
  pointer-events: none;
}

/* card bg themes */
.dsc-bg-1::after, .dsc-bg-2::after, .dsc-bg-3::after, .dsc-bg-4::after, .dsc-bg-5::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.3;
  pointer-events: none;
}
.dsc-bg-1::after { background: linear-gradient(145deg, #0a1e2e 0%, #0d3050 50%, #005a8c 100%); }
.dsc-bg-2::after { background: linear-gradient(145deg, #1a2c3a 0%, #2a4458 50%, #4e6878 100%); }
.dsc-bg-3::after { background: linear-gradient(145deg, #0c2840 0%, #105580 50%, #1a8ad4 100%); }
.dsc-bg-4::after { background: linear-gradient(145deg, #16303e 0%, #2e5468 50%, #3d7a95 100%); }
.dsc-bg-5::after { background: linear-gradient(145deg, #0d2438 0%, #18405c 50%, #005a8c 100%); }

/* ===== TESTIMONIALS ===== */
.testimonials-section {
  background: var(--navy);
  color: white;
}

.testimonials-section .section-overline { color: var(--blue); }
.testimonials-section .section-title { color: white; }
.testimonials-section .section-subtitle { color: rgba(255,255,255,0.5); }

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.testimonial-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 36px;
  transition: background 0.3s;
}

.testimonial-card:hover { background: rgba(255,255,255,0.1); }

.testimonial-stars {
  color: #fbbf24;
  font-size: 0.9rem;
  margin-bottom: 16px;
  letter-spacing: 2px;
}

.testimonial-text {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.8);
  margin-bottom: 24px;
  font-style: italic;
}

.testimonial-author {
  font-size: 0.85rem;
  font-weight: 600;
  color: white;
}

.testimonial-role {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.4);
  margin-top: 4px;
}

.testimonials-google-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 40px;
}

.google-rating-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--light-gray);
  border-radius: 980px;
  padding: 10px 20px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--dark-gray);
}

.google-rating-badge .g-stars {
  color: #f4b400;
  font-size: 1rem;
  letter-spacing: 1px;
}

.google-rating-badge .g-score {
  font-weight: 700;
}

.testimonials-view-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--blue);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  transition: gap 0.2s;
}

.testimonials-view-more:hover {
  gap: 8px;
}

/* ===== ARTICLE PROMO STRIP ===== */
.article-promo {
  background: var(--white);
  padding: 80px 24px;
}

.article-promo-inner {
  max-width: 1280px;
  margin: 0 auto;
}

.article-promo-headline {
  font-size: clamp(1.85rem, 3.4vw, 2.5rem);
  font-weight: 900;
  letter-spacing: -0.025em;
  color: var(--navy);
  margin: 0 0 36px;
  line-height: 1.05;
}

.article-promo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.article-promo-card {
  background: var(--white);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  border: 1px solid #e7ecf3;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.article-promo-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px -20px rgba(17, 49, 94, 0.18);
  border-color: var(--blue);
}

.article-promo-image {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--light-gray);
}
.article-promo-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.article-promo-card:hover .article-promo-image img {
  transform: scale(1.04);
}

.article-promo-body {
  padding: 24px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-grow: 1;
}

.article-promo-tag {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--blue);
  margin: 0;
}

.article-promo-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0;
  flex-grow: 1;
}

.article-promo-desc {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--slate);
  margin: 0;
}

.article-promo-arrow {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--blue);
  font-size: 0.92rem;
  font-weight: 700;
  margin-top: 10px;
  transition: gap 0.2s ease;
}

.article-promo-card:hover .article-promo-arrow { gap: 10px; }

@media (max-width: 960px) {
  .article-promo-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 640px) {
  .article-promo-grid { grid-template-columns: 1fr; }
  .article-promo { padding: 56px 16px; }
}

/* ===== SMALL PRODUCT TILES ===== */
.tiles-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.tiles-grid--count-1 {
  grid-template-columns: minmax(260px, 420px);
  justify-content: center;
}

.tiles-grid--count-2 {
  grid-template-columns: repeat(2, minmax(260px, 420px));
  justify-content: center;
}

.tiles-grid--count-3 {
  grid-template-columns: repeat(3, minmax(260px, 360px));
  justify-content: center;
}

.tile {
  background: var(--light-gray);
  border-radius: 20px;
  padding: 36px 24px;
  text-align: center;
  transition: all 0.3s;
  cursor: pointer;
  overflow: hidden;
}

.tile--has-photo {
  padding-top: 0;
}

.tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.08);
}

.tile-icon { font-size: 0; margin-bottom: 16px; }

.tile--has-photo .tile-photo {
  margin: 0 auto 16px;
  text-align: center;
}
.tile--has-photo .tile-photo img {
  width: 160px;
  height: 200px;
  object-fit: cover;
  object-position: center 20%;
  display: block;
  border-radius: 12px;
  margin: 0 auto;
}

.tile-photo {
  margin: 0 auto 16px;
  text-align: center;
}
.tile-photo img {
  width: 160px;
  height: 200px;
  border-radius: 12px;
  object-fit: cover;
  object-position: center 20%;
  margin: 0 auto;
  display: block;
}

.tile-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}

.tile-desc {
  font-size: 0.85rem;
  color: var(--mid-gray);
  line-height: 1.4;
  margin-bottom: 16px;
}

.tile-link {
  color: var(--blue);
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
}

.tile-link:hover { text-decoration: underline; }

/* ===== ACCORDION SECTION ===== */
.accordion-section {
  padding: 80px 0;
  background: var(--white);
}

.accordion-section-header {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px 40px;
}

.accordion-section-overline {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--blue);
  margin-bottom: 12px;
}

.accordion-section-header h2 {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--navy);
}
.accordion-section-header h2::after {
  content: '';
  display: block;
  width: 56px;
  height: 4px;
  border-radius: 4px;
  margin-top: 16px;
  background: var(--blue);
}

.accordion-section-sub {
  margin-top: 18px;
  font-size: 1.05rem;
  color: var(--slate);
  line-height: 1.6;
  max-width: 620px;
}

.accordion-showcase {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 340px 1fr;
  min-height: 520px;
  overflow: hidden;
}

/* Per-item-swap variant — light grey backdrop band */
.accordion-showcase-wrap {
  background: var(--light-gray);
  padding: 40px 24px 80px;
}

/* ===== STATIC variant — full-width 50/50 edge-to-edge split =====
   Left half: light-grey panel with overline, headline, sub, accordion items.
   Right half: full-bleed photo touching the right viewport edge.
   Content on the left aligns with the rest of the site (1280px container)
   via a calc() padding-left that pushes content to where the page boundary
   would be on wider viewports. */
.accordion-section--static {
  padding: 0;
  background: var(--white);
}

.accordion-static-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  min-height: 640px;
  align-items: stretch;
}

.accordion-static-left {
  background: var(--light-gray);
  display: flex;
  align-items: center;
  /* Align left edge of content with the site container's left edge on
     wider screens; minimum 24px padding on narrow viewports. */
  padding-top: 80px;
  padding-bottom: 80px;
  padding-left: max(24px, calc((100vw - 1280px) / 2 + 24px));
  padding-right: 48px;
}

.accordion-static-content {
  width: 100%;
  max-width: 580px;
}

.accordion-static-headline {
  font-size: clamp(1.85rem, 3.6vw, 2.6rem);
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--navy);
  margin: 0 0 16px;
}
.accordion-static-headline::after {
  content: '';
  display: block;
  width: 56px;
  height: 4px;
  border-radius: 4px;
  margin-top: 16px;
  background: var(--blue);
}

.accordion-static-content .accordion-section-overline {
  margin-bottom: 14px;
}
.accordion-static-content .accordion-section-sub {
  margin: 18px 0 32px;
}
.accordion-static-content .accordion-items {
  padding: 0;
  margin-top: 8px;
}

.accordion-static-right {
  position: relative;
  background: var(--mid-gray);
  overflow: hidden;
}
.accordion-static-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 900px) {
  .accordion-static-grid {
    grid-template-columns: 1fr;
  }
  .accordion-static-left {
    padding: 48px 24px;
  }
  .accordion-static-right {
    min-height: 320px;
    order: -1;
  }
}

.accordion-items {
  padding: 40px 0 40px 36px;
  display: flex;
  flex-direction: column;
}
.accordion-section--static .accordion-items {
  padding: 24px 0 0;
}

.accordion-item {
  background: #ffffff;
  border-radius: 12px;
  margin-bottom: 12px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(17, 49, 94, 0.04);
  transition: box-shadow 0.25s ease;
}
.accordion-item.open {
  box-shadow: 0 12px 28px -16px rgba(17, 49, 94, 0.20);
}
.accordion-item:last-child { margin-bottom: 0; }

/* Reset old per-item-swap styling that conflicted */
.accordion-section:not(.accordion-section--static) .accordion-item {
  background: transparent;
  border-radius: 0;
  margin-bottom: 0;
  box-shadow: none;
  border-top: 1px solid rgba(0,0,0,0.08);
}
.accordion-section:not(.accordion-section--static) .accordion-item:last-child {
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.accordion-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 20px 22px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: color 0.2s ease;
}
.accordion-section:not(.accordion-section--static) .accordion-trigger {
  padding: 20px 20px 20px 0;
  font-size: 1.15rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.01em;
  color: var(--dark-gray);
}
.accordion-trigger:hover { color: var(--blue); }
.accordion-item.open .accordion-trigger { color: var(--blue); }

/* Plus/minus icon — pure CSS */
.accordion-icon {
  flex-shrink: 0;
  position: relative;
  width: 22px;
  height: 22px;
  color: var(--blue);
}
.accordion-icon::before,
.accordion-icon::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  background: currentColor;
  transition: transform 0.3s ease;
}
.accordion-icon::before {
  width: 14px;
  height: 2px;
  border-radius: 2px;
}
.accordion-icon::after {
  width: 2px;
  height: 14px;
  border-radius: 2px;
}
.accordion-item.open .accordion-icon::after {
  transform: scaleY(0); /* collapse the vertical line — becomes a minus */
}

/* Old chevron — leave the rule in case any legacy markup still has it,
   but the new icon above is what renders. */
.accordion-chevron {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--mid-gray);
}
.accordion-item.open .accordion-chevron { transform: rotate(180deg); }

.accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0.16, 1, 0.3, 1), padding 0.4s;
  padding: 0 22px;
}
.accordion-item.open .accordion-body {
  max-height: 360px;
  padding: 0 22px 22px;
}
.accordion-body p {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--slate);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}

/* Static image (right side of split) */
.accordion-static {
  position: relative;
  min-height: 100%;
  overflow: hidden;
  border-radius: 0 24px 24px 0;
}
.accordion-static img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Responsive stack */
@media (max-width: 900px) {
  .accordion-showcase { grid-template-columns: 1fr; }
  .accordion-section--static .accordion-static {
    border-radius: 0;
    min-height: 280px;
    order: -1;
  }
  .accordion-section--static .accordion-showcase {
    grid-template-rows: auto auto;
  }
}

.accordion-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.accordion-visual-item {
  position: absolute;
  inset: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.96) translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  border-radius: 16px;
  overflow: hidden;
}

.accordion-visual-item.active {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}

.accordion-visual-bg {
  width: 100%;
  height: 100%;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.av-bg-1 { background: linear-gradient(145deg, #e4f0fa 0%, #c8dff2 60%, #a8cde8 100%); }
.av-bg-2 { background: linear-gradient(145deg, #e8eff4 0%, #d4dee8 60%, #bccdd8 100%); }
.av-bg-3 { background: linear-gradient(145deg, #deeaf2 0%, #c4d8e6 60%, #aac6d8 100%); }

/* ===== INFO CARDS + MODAL ===== */
.info-strip {
  padding: 80px 24px;
  background: var(--light-gray);
}

.info-strip-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.info-strip-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 36px;
  flex-wrap: wrap;
  gap: 12px;
}

.info-strip-header h2 {
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--dark-gray);
}

.info-strip-header a {
  font-size: 0.9rem;
  color: var(--blue);
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
}

.info-strip-header a:hover { text-decoration: underline; }

.info-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
/* When the compact (no-image) section has only 2 cards, use a 2-column
   grid that spans edge-to-edge inside the container instead of 3-col with
   a stranded empty third slot. */
.info-strip:not(.info-strip--split) .info-cards:has(.info-card:nth-child(2):last-child) {
  grid-template-columns: repeat(2, 1fr);
}

/* ===== INFO-STRIP SPLIT LAYOUT — image left, 2x2 cards right =====
   Dark navy band (DESIGN.md dark-surface showcase). White cards pop against
   the navy; headline + sub render white. */
.info-strip--split { background: #ffffff; }

/* White background — dark heading/link, lightly tinted cards so they stand out */
.info-strip--split .info-strip-header h2 { color: var(--ink); }
.info-strip--split .info-strip-header a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 4px;
  font-weight: 600;
}
.info-strip--split .info-strip-header a:hover { color: var(--blue-hover); }
.info-strip--split .info-card {
  background: var(--surface-card);
  border-color: var(--hairline);
}

/* Sub-paragraph between the heading and the split grid */
.info-strip-header-sub {
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--slate);
  max-width: 760px;
  margin: -16px 0 32px;
}
.info-strip--split .info-strip-header-sub {
  color: var(--body);
}

.info-strip-split {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 32px;
  align-items: stretch;
}

/* Image cell stretches to the cards' height: the img is absolutely positioned
   so it contributes 0 to the natural row height — the cards drive the height,
   and the image fills whatever that is (no overhang, no empty card space). */
.info-strip-image {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  min-height: 320px;
  box-shadow: 0 24px 48px -28px rgba(17, 49, 94, 0.25);
}
.info-strip-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Subtle navy fade at the bottom of the image for depth */
.info-strip-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(17, 49, 94, 0.35) 100%);
  pointer-events: none;
}

/* Inside the split, cards become a 2x2 grid */
.info-strip-split .info-cards {
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

/* Match the typographic hierarchy of the services cards above:
   bold leading clause becomes a navy title, the rest becomes a slate body line. */
.info-strip-split .info-card p {
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--slate);
  line-height: 1.6;
  padding-bottom: 0;
  margin: 0;
}
.info-strip-split .info-card p strong {
  display: block;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin-bottom: 10px;
}

@media (max-width: 960px) {
  .info-strip-split {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .info-strip-image { min-height: 280px; }
}
@media (max-width: 540px) {
  .info-strip-split .info-cards { grid-template-columns: 1fr; }
}

.info-card {
  background: white;
  border: 1px solid #e7ecf3;
  border-radius: 18px;
  padding: 28px 26px;
  position: relative;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.info-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px -18px rgba(17, 49, 94, 0.18);
  border-color: var(--blue);
}

.info-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--blue-light);
  color: var(--blue);
  margin-bottom: 18px;
}
.info-card-icon svg {
  width: 24px;
  height: 24px;
  color: var(--blue);
}

.info-card p {
  font-size: 1.05rem;
  font-weight: 600;
  padding-bottom: 28px;
  line-height: 1.35;
  color: var(--dark-gray);
}

/* Card heading split out from a leading <strong>…</strong> — large, dark
   navy, stacked above the body paragraph (which becomes a clean subdued
   line). Only kicks in when ops_render_card_text() emits an .info-card-heading. */
.info-card-heading {
  font-family: var(--font-body);
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 14px;
}
.info-card:has(> .info-card-heading) p {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--body);
  padding-bottom: 0;
  margin: 0;
}

.info-card p .hl-orange { color: var(--navy); font-weight: 700; }
.info-card p .hl-teal { color: var(--blue); font-weight: 700; }
.info-card p .hl-blue { color: var(--slate); font-weight: 700; }

.info-card-plus {
  position: absolute;
  bottom: 24px;
  right: 24px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0,0,0,0.06);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--mid-gray);
  transition: all 0.2s;
}

.info-card-plus:hover {
  background: var(--blue);
  color: white;
}

.info-card-photo {
  margin-bottom: 18px;
  border-radius: 14px;
  overflow: hidden;
}
.info-card-photo img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  object-position: center;
  border-radius: 14px;
  display: block;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.modal-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.modal-box {
  background: white;
  border-radius: 20px;
  max-width: 520px;
  width: 100%;
  padding: 48px 44px;
  position: relative;
  transform: scale(0.92) translateY(20px);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s;
  opacity: 0;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-overlay.open .modal-box {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(0,0,0,0.07);
  border: none;
  cursor: pointer;
  font-size: 1rem;
  color: var(--mid-gray);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.modal-close:hover { background: rgba(0,0,0,0.12); }

.modal-box h3 {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 24px;
  color: var(--dark-gray);
}

.modal-box h4 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--dark-gray);
  margin-bottom: 8px;
  margin-top: 4px;
}

.modal-box p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--mid-gray);
  margin-bottom: 16px;
}

.modal-link {
  color: var(--blue);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.modal-link:hover { text-decoration: underline; }

.modal-divider {
  border: none;
  border-top: 1px solid rgba(0,0,0,0.06);
  margin: 20px 0;
}

/* ===== CTA BANNER ===== */
/* Outer wrapper — light cyan floor + vertical breathing room around the card */
.cta-banner-section {
  background: #dcf1f7;
  padding: 64px 24px;
}
.cta-banner {
  max-width: 1200px;
  margin: 0 auto;
  background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%);
  color: white;
  text-align: center;
  padding: 64px 40px;
  border-radius: var(--r-xl);
  position: relative;
  overflow: hidden;
}

.cta-banner::before {
  content: '';
  position: absolute;
  top: -100px;
  right: -100px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
  pointer-events: none;
}

/* Keep the CTA buttons above the decorative overlay so they're always clickable (esp. mobile) */
.cta-banner .cta-buttons {
  position: relative;
  z-index: 1;
}

.cta-banner h2 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0 auto 16px;
  max-width: 1100px;
  position: relative;
}

.cta-banner p {
  font-size: 1.15rem;
  opacity: 0.85;
  max-width: none;
  margin: 0 0 40px;
  line-height: 1.6;
}

/* Inline links inside the CTA banner body (e.g. phone number) — must be visible on the blue gradient */
.cta-banner p a {
  color: #ffffff;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cta-banner p a:hover {
  color: var(--blue-light, #e4f1fa);
}

.btn-white {
  background: white;
  color: var(--blue);
  padding: 16px 36px;
  border-radius: 980px;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-white:hover { transform: scale(1.04); box-shadow: 0 8px 30px rgba(0,0,0,0.15); }

.btn-outline-white {
  background: transparent;
  color: white;
  padding: 16px 36px;
  border-radius: 980px;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  border: 2px solid rgba(255,255,255,0.4);
  cursor: pointer;
  transition: all 0.2s;
  margin-left: 12px;
}

.btn-outline-white:hover { border-color: white; background: rgba(255,255,255,0.1); }

/* ===== DARK CINEMATIC SECTION ===== */
.cinematic-section {
  background: #000;
  color: white;
  padding: 0 0 100px;
}

.cinematic-hero-img {
  max-width: 960px;
  margin: 0 auto;
  aspect-ratio: 16/9;
  border-radius: 0 0 16px 16px;
  position: relative;
  overflow: hidden;
}

.cinematic-hero-photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: grayscale(1);
  opacity: 0.5;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
}

.cinematic-hero-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,26,46,0.55) 0%, rgba(0,61,92,0.4) 30%, rgba(0,90,140,0.35) 50%, rgba(0,26,46,0.7) 80%, rgba(0,20,36,0.92) 100%);
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}

.cinematic-hero-overlay {
  padding: 40px 48px;
  max-width: 600px;
}

.cinematic-overlay-overline {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 12px;
}

.cinematic-overlay-headline {
  display: block;
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: white;
}

.cinematic-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 24px;
}

.cinematic-block {
  padding: 48px 0;
  border-top: 1px solid rgba(255,255,255,0.1);
  margin-top: 40px;
}

.cinematic-block h3 {
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: white;
}

.cinematic-block p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.55);
}

.cinematic-block p strong {
  color: rgba(255,255,255,0.9);
  font-weight: 600;
}

/* ===== ELEGANT COMPARISON TABLE ===== */
.compare-section {
  padding: 100px 24px;
  background: var(--white);
}

.compare-inner {
  max-width: 960px;
  margin: 0 auto;
}

.compare-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-top: 60px;
}

/* Sticky header columns */
.compare-table thead th {
  padding: 0 16px 32px;
  text-align: center;
  vertical-align: bottom;
  position: sticky;
  top: 52px;
  background: var(--white);
  z-index: 5;
}

.compare-table thead th:first-child {
  text-align: left;
  width: 40%;
}

.compare-col-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.compare-col-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

.compare-col-icon.branded {
  background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%);
  color: white;
  box-shadow: 0 4px 16px rgba(26,138,212,0.3);
}

.compare-col-icon.other {
  background: var(--light-gray);
  color: var(--mid-gray);
}

.compare-col-name {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--dark-gray);
  letter-spacing: -0.01em;
}

.compare-col-name.muted { color: var(--mid-gray); font-weight: 500; }

/* Body rows */
.compare-table tbody tr {
  transition: background 0.2s;
}

.compare-table tbody tr:hover {
  background: rgba(0,113,227,0.02);
}

.compare-table tbody td {
  padding: 18px 16px;
  border-top: 1px solid rgba(0,0,0,0.06);
  text-align: center;
  vertical-align: middle;
  font-size: 0.9rem;
}

.compare-table tbody td:first-child {
  text-align: left;
  font-weight: 500;
  color: var(--dark-gray);
}

/* Check/cross indicators */
.cmp-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 0.85rem;
}

.cmp-check.yes {
  background: rgba(0,113,227,0.1);
  color: var(--blue);
}

.cmp-check.no {
  background: rgba(0,0,0,0.04);
  color: rgba(0,0,0,0.2);
}

.cmp-check.partial {
  background: rgba(191,72,0,0.08);
  color: var(--navy);
}

/* Text values in cells */
.cmp-value {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--dark-gray);
}

.cmp-value.highlight {
  color: var(--blue);
}

.cmp-value.muted {
  color: var(--mid-gray);
  font-weight: 400;
}

/* Bottom CTA row */
.compare-table tfoot td {
  padding: 28px 16px 0;
  border-top: 1px solid rgba(0,0,0,0.06);
  text-align: center;
}

.compare-table tfoot td:first-child { text-align: left; }

.cmp-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--blue);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  padding: 10px 24px;
  border-radius: 980px;
  background: rgba(0,113,227,0.08);
  transition: all 0.2s;
}

.cmp-cta:hover {
  background: rgba(0,113,227,0.14);
}

/* ===== FOOTER ===== */
/* ===== FOOTER — compact, contact-forward ===== */
footer {
  background: var(--navy);
  color: rgba(255,255,255,0.85);
  padding: 56px 24px 28px;
}

.footer-inner {
  max-width: 1280px;
  margin: 0 auto;
}

/* TOP — brand + 3 contact columns */
.footer-contact-block {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.1fr 1fr;
  gap: 36px;
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  margin-bottom: 28px;
}

.footer-brand .nav-logo { font-size: 1.4rem; display: inline-flex; margin-bottom: 14px; }

.footer-brand p {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.7);
  line-height: 1.6;
  max-width: 320px;
}

.footer-contact-col h4 {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--blue);
  margin: 0 0 10px;
}
.footer-contact-primary {
  font-size: 0.95rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 4px;
  letter-spacing: -0.005em;
}
.footer-contact-meta {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.6);
  margin: 0 0 12px;
  line-height: 1.4;
}
.footer-contact-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--blue);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  transition: gap 0.2s ease;
}
.footer-contact-link:hover { gap: 8px; }

/* MIDDLE — compact inline links row */
.footer-quick-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 32px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  margin-bottom: 28px;
}
.footer-quick-block h4 {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.6);
  margin: 0 0 10px;
}
.footer-inline-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}
.footer-inline-links a {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer-inline-links a:hover { color: var(--blue); }

/* Legacy .footer-col rules kept for any callers still using the old markup */
.footer-col h4 {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.6);
  margin-bottom: 12px;
}
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 8px; }
.footer-col ul a {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-col ul a:hover { color: var(--blue); }

/* BOTTOM — copyright + social */
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.10);
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.footer-bottom p {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.6);
}
.footer-bottom p a { color: rgba(255,255,255,0.7); }

.footer-social {
  display: flex;
  gap: 12px;
}
.footer-social a {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #ffffff;
  transition: background 0.2s;
}
.footer-social a:hover { background: var(--blue); }

@media (max-width: 960px) {
  footer { padding: 44px 16px 24px; }
  .footer-contact-block {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }
  .footer-quick-row { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 540px) {
  .footer-contact-block { grid-template-columns: 1fr; gap: 24px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ===== FOOTER SECTIONS & PILLS ===== */

.footer-section {
  margin-bottom: 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

.footer-section-title {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.6);
  margin-bottom: 14px;
}

.footer-pills-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pill {
  display: inline-block;
  padding: 8px 14px;
  font-size: 0.8rem;
  border-radius: 20px;
  text-decoration: none;
  transition: all 0.2s ease;
  border: 1px solid rgba(0, 113, 227, 0.2);
  background: rgba(0, 113, 227, 0.05);
  color: var(--dark-gray);
  white-space: nowrap;
}

.pill-location {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.9);
  font-weight: 500;
}

.pill-location:hover {
  background: var(--blue);
  border-color: var(--blue);
  color: #ffffff;
  text-decoration: none;
}

.pill-language {
  background: rgba(100, 100, 100, 0.08);
  border-color: rgba(100, 100, 100, 0.2);
  color: var(--mid-gray);
  font-weight: 500;
}

.pill-language:hover {
  background: rgba(100, 100, 100, 0.12);
  border-color: rgba(100, 100, 100, 0.3);
}

/* ===== PHONE BAR ===== */
.phone-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--dark-gray);
  color: white;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  z-index: 999;
  font-size: 0.9rem;
  transform: translateY(100%);
  animation: slideUp 0.5s ease 1s forwards;
  transition: transform 0.3s ease;
}

.phone-bar a {
  color: var(--blue);
  text-decoration: none;
  font-weight: 600;
}

.phone-bar a:hover { text-decoration: underline; }

/* ===== ANIMATIONS ===== */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes slideUp {
  to { transform: translateY(0); }
}


.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}


/* ===== FAQ SIMPLE (text-only) ===== */
.faq-simple-section {
  padding: 80px 5%;
  max-width: 1025px;
  margin: 0 auto;
}
.faq-simple-header {
  text-align: center;
  margin-bottom: 48px;
}
.faq-simple-overline {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-teal);
  margin-bottom: 10px;
}
.faq-simple-header h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  color: var(--deep-navy);
  margin: 0 0 12px;
}
.faq-simple-sub {
  font-size: 1.05rem;
  color: var(--slate);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}
.faq-simple-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.faq-simple-item {
  border-bottom: 1px solid var(--light-gray);
}
.faq-simple-item:first-child {
  border-top: 1px solid var(--light-gray);
}
.faq-simple-trigger {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 22px 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-heading);
  transition: color 0.2s;
}
.faq-simple-trigger:hover {
  color: var(--accent-teal);
}
.faq-simple-number {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent-teal);
  min-width: 28px;
  opacity: 0.6;
}
.faq-simple-question {
  flex: 1;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--deep-navy);
  line-height: 1.35;
}
.faq-simple-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--accent-teal);
  transition: transform 0.3s ease;
}
.faq-simple-item.open .faq-simple-icon {
  transform: rotate(45deg);
}
.faq-simple-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.35s ease;
}
.faq-simple-item.open .faq-simple-answer {
  max-height: 500px;
  padding-bottom: 20px;
}
.faq-simple-answer p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--slate);
  padding-left: 44px;
  margin: 0;
}

/* ===== GROUPED DIRECTORY ===== */
.grouped-dir { background: var(--off-white); }

.gd-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 48px;
}

.gd-group {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  transition: box-shadow 0.25s ease;
}
.gd-group:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.09); }

/* Category image banner */
.gd-group-img {
  position: relative;
  width: 100%;
  height: 180px;
  overflow: hidden;
}
.gd-group-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gd-group-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(26,44,58,0.72) 0%, rgba(26,44,58,0.15) 60%, transparent 100%);
  pointer-events: none;
}
.gd-group-label {
  position: absolute;
  bottom: 16px;
  left: 20px;
  z-index: 1;
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
}

/* Fallback header (no image) */
.gd-group-header {
  padding: 20px 24px 12px;
  border-bottom: 2px solid var(--blue);
}
.gd-group-header h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--dark-gray);
  margin: 0;
}

/* Table-style item rows */
.gd-items {
  display: flex;
  flex-direction: column;
}
.gd-item {
  display: grid;
  grid-template-columns: minmax(160px, 0.45fr) 1fr auto;
  align-items: baseline;
  gap: 16px;
  padding: 14px 20px;
  text-decoration: none;
  border-bottom: 1px solid #f0f2f5;
  transition: background 0.15s ease;
}
.gd-item:last-child { border-bottom: none; }
.gd-item:hover { background: var(--blue-pale); }
.gd-item:hover .gd-item-title { color: var(--blue); }
.gd-item:hover .gd-item-arrow { color: var(--blue); transform: translateX(3px); }

.gd-item-title {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--dark-gray);
  transition: color 0.15s;
}
.gd-item-desc {
  font-size: 0.84rem;
  color: var(--mid-gray);
  line-height: 1.4;
}
.gd-item-arrow {
  font-size: 1.1rem;
  font-weight: 600;
  color: #cbd5e0;
  transition: color 0.15s, transform 0.15s;
}

/* Responsive */
@media (max-width: 768px) {
  .gd-grid { grid-template-columns: 1fr; gap: 24px; }
  .gd-group-img { height: 140px; }
  .gd-item {
    grid-template-columns: 1fr auto;
    gap: 6px;
    padding: 12px 16px;
  }
  .gd-item-desc { display: none; }
  .gd-item-title { white-space: normal; }
}


/* ===== CONTACT ROW ===== */

.contact-row {
  padding: 64px 24px;
  background: var(--light-gray);
}

.contact-row-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.contact-row-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 40px;
}

.contact-row-header h2 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--dark-gray);
}

.contact-row-dir {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--blue);
  text-decoration: none;
}

.contact-row-dir:hover {
  text-decoration: underline;
}

.contact-row-columns {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-left: 1px solid #dce4ea;
}

.contact-col {
  display: flex;
  gap: 14px;
  padding: 0 28px;
  border-right: 1px solid #dce4ea;
}

.contact-col-icon {
  flex-shrink: 0;
  color: var(--blue);
  margin-top: 2px;
}

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

.contact-col-body h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--dark-gray);
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}

.contact-col-body p {
  font-size: 0.88rem;
  color: var(--slate);
  line-height: 1.55;
  margin-bottom: 2px;
}

/* Inline links inside contact body text — clean, no old-school underline */
.contact-col-body p a {
  color: var(--blue);
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.contact-col-body p a:hover {
  opacity: 0.7;
}

.contact-col-link {
  display: inline-block;
  margin-top: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--blue);
  text-decoration: none;
}

.contact-col-link:hover {
  text-decoration: underline;
}


/* ===== CONTACT FORM SECTION ===== */

.contact-form-section {
  padding: 72px 24px;
  background: var(--off-white);
}

.contact-form-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 56px;
  align-items: start;
}

/* -- Sidebar -- */

.contact-form-sidebar h2 {
  font-size: clamp(1.75rem, 4vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--dark-gray);
  margin-bottom: 12px;
}

.contact-form-sub {
  font-size: 1rem;
  color: var(--slate);
  line-height: 1.6;
  margin-bottom: 36px;
}

.contact-details {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.contact-detail {
  display: flex;
  gap: 14px;
}

.contact-detail-icon {
  flex-shrink: 0;
  color: var(--blue);
  margin-top: 2px;
}

.contact-detail-icon svg {
  width: 20px;
  height: 20px;
}

.contact-detail-body h3 {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--dark-gray);
  margin-bottom: 4px;
}

.contact-detail-body p {
  font-size: 0.88rem;
  color: var(--slate);
  line-height: 1.5;
  margin-bottom: 1px;
}

.contact-detail-body a {
  color: var(--blue);
  text-decoration: none;
}

.contact-detail-body a:hover {
  text-decoration: underline;
}

.contact-detail-link {
  display: inline-block;
  margin-top: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--blue);
  text-decoration: none;
}

.contact-detail-link:hover {
  text-decoration: underline;
}

/* -- Form card -- */

.contact-form-card {
  background: white;
  border-radius: 16px;
  padding: 40px;
  box-shadow: 0 2px 20px rgba(0,0,0,0.06);
}

.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group--full {
  grid-column: 1 / -1;
}

.form-group label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--dark-gray);
}

.form-group label .req {
  color: var(--blue);
}

.form-group input,
.form-group select,
.form-group textarea {
  font-family: var(--font-body);
  font-size: 0.92rem;
  padding: 12px 14px;
  border: 1px solid #dce4ea;
  border-radius: 8px;
  background: var(--off-white);
  color: var(--dark-gray);
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(26,138,212,0.12);
}

.form-group textarea {
  resize: vertical;
  min-height: 100px;
}

/* Search-style input — magnifying glass icon inside the field on the left */
.form-input-search {
  position: relative;
  display: block;
}
.form-input-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: #94a3b8;
  pointer-events: none;
}
.form-group--search .form-input-search input {
  width: 100%;
  padding-left: 42px;
}

.form-group select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234e6878' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

.form-group--submit {
  margin-top: 8px;
}

.form-group--submit .btn-primary {
  width: 100%;
  text-align: center;
}

.form-disclaimer {
  margin-top: 16px;
  font-size: 0.8rem;
  color: var(--mid-gray);
  text-align: center;
}


/* ===== CONTACT MAP ===== */

.contact-map {
  background: var(--light-gray);
}

.contact-map-embed {
  width: 100%;
  height: 400px;
  position: relative;
}

.contact-map-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.contact-map-caption {
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px 24px;
}

.contact-map-caption p {
  font-size: 0.88rem;
  color: var(--slate);
}

/* ============================================================================
   DESIGN-SYSTEM FOUNDATION OVERRIDES  (appended — loads last, wins by order)

   Editorial direction: serif display headlines (Fraunces, low weight, negative
   tracking, sentence case), 96px section rhythm, hierarchical radius, and
   "color-block first, shadows rare" elevation — applied in the OPS plumbing
   palette (teal + navy + cool canvas), NOT cream/coral.
   ============================================================================ */

/* --- Section rhythm: 96px between major bands --- */
section { padding: 96px 24px; }

/* --- All display-level headlines → serif, weight 500, negative tracking,
       sentence case. Card titles (h3) intentionally stay in the sans body. --- */
.section-title,
.hero-headline,
.accordion-static-headline,
.accordion-section-header h2,
.service-directory-headline,
.article-promo-headline,
.text-block-headline,
.info-strip-header h2,
.cta-banner h2,
.fe-headline,
.dark-showcase-title,
.ts-headline,
.closer-look h2,
.why-section h2,
.hb-headline,
.faq-simple-header h2,
.contact-row h2,
.contact-form-sidebar h2,
.form-embed-headline,
.text-block-headline {
  font-family: var(--font-display) !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
  line-height: 1.08;
}

/* Hero accent line — keep the italic serif, teal, a touch lighter */
.hero-headline-accent {
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: none;
}

/* --- Radius standardization (hierarchical) --- */
.service-card,
.info-card,
.article-promo-card,
.tile,
.testimonial-card,
.sd-card,
.cg-card,
.compare-table,
.contact-form-card,
.gallery-card-inner {
  border-radius: var(--r-lg);
}

/* --- Elevation: soften heavy shadows site-wide to the subtle token.
       Depth should come from surface contrast, not big drop shadows. --- */
.service-card:hover,
.info-card:hover,
.article-promo-card:hover,
.tile:hover,
.sd-card:hover {
  box-shadow: var(--shadow-soft);
}

/* --- Buttons referenced inside components: align radius to the scale --- */
.hero-btn-primary,
.hero-btn-secondary,
.nav-cta {
  border-radius: var(--r-md) !important;
}

/* --- Canvas-aware section backgrounds: sections that were pure white now sit
       on the tinted canvas; keep them clean but let the canvas show as the
       floor so the page has the warm-cool surface rhythm. --- */
.article-promo { background: var(--canvas); }
.text-block { background: var(--canvas); }

/* ============================================================================
   COMPONENT POLISH PASS — editorial refinements on the components used across
   home / about / service. Hairline borders, refined type colors, consistent
   radius. Appended last so it wins.
   ============================================================================ */

/* --- breadcrumb: quieter, hairline divider --- */
.breadcrumb {
  background: var(--canvas);
  border-bottom: 1px solid var(--hairline);
  padding: 14px 0;
}
.breadcrumb ol { font-size: 0.8rem; color: var(--muted); }
.breadcrumb li:not(:last-child)::after { color: var(--muted-soft); }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--blue); }
.breadcrumb span[aria-current="page"] { color: var(--ink); font-weight: 600; }

/* --- marquee_bar: navy band --- */
.marquee-bar { background: var(--navy); color: var(--on-dark); padding: 15px 0; }
.marquee-content span {
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--on-dark);
  opacity: 0.9;
}

/* --- full_width_feature: editorial type colors + roomy padding --- */
.feature-content { padding: 72px clamp(32px, 6vw, 80px); }
.feature-content .section-title { font-size: clamp(1.9rem, 3.6vw, 2.6rem); }
.feature-content p { color: var(--body); font-size: 1.08rem; line-height: 1.7; }

/* --- stat_strip: editorial — serif numbers --- */
.stat-strip { background: #1a315b; padding: 56px 24px; }
.stat-number {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #ffffff;
}
.stat-number span { color: var(--blue-light) !important; }
.stat-label { color: rgba(255,255,255,0.7); font-size: 0.92rem; }

/* --- testimonials: refined dark cards --- */
.testimonial-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--r-lg);
  padding: 32px;
}
.testimonial-text { color: rgba(255,255,255,0.85); font-style: normal; line-height: 1.65; }
.google-rating-badge { background: rgba(255,255,255,0.08); color: var(--on-dark); }

/* --- why_choose_carousel: card consistency --- */
.why-card {
  background: #ffffff;
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
}
.why-card-title { font-family: var(--font-body); color: var(--ink); }
.why-card-desc { color: var(--body); }

/* --- cta_banner (still used on service): solid teal voltage, consistent with
       the new callout_card so the two read as one system --- */
.cta-banner { background: var(--blue); }
.cta-banner::before { background: radial-gradient(circle, rgba(255,255,255,0.16) 0%, transparent 70%); }



/* ============================================================================
   NEW SECTION COMPONENTS — pricing_tiers · video_cta · logo_strip · newsletter
   Original execution in the OPS editorial design system (teal + navy + canvas).
   ============================================================================ */

/* ===== PRICING TIERS ===== */
.pricing-section { background: var(--canvas); padding: 96px 24px; }
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1100px;
  margin: 48px auto 0;
  align-items: start;
}
.pricing-card {
  background: #ffffff;
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 36px 30px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.pricing-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); }
.pricing-card--featured {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  padding-top: 48px;
}
.pricing-badge {
  position: absolute;
  top: 16px; right: 16px;
  background: var(--blue);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 4px 12px;
  border-radius: var(--r-pill);
}
.pricing-name {
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--blue);
  margin: 0 0 12px;
}
.pricing-card--featured .pricing-name { color: var(--blue-light); }
.pricing-price {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 3rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
  margin: 0 0 6px;
}
.pricing-card--featured .pricing-price { color: #fff; }
.pricing-period { font-family: var(--font-body); font-size: 1rem; font-weight: 500; color: var(--muted); }
.pricing-card--featured .pricing-period { color: var(--on-dark-soft); }
.pricing-blurb { font-size: 0.9rem; color: var(--muted); margin: 0 0 20px; }
.pricing-card--featured .pricing-blurb { color: var(--on-dark-soft); }
.pricing-features { list-style: none; padding: 0; margin: 8px 0 28px; display: flex; flex-direction: column; gap: 12px; flex-grow: 1; }
.pricing-features li { font-size: 0.92rem; color: var(--body); line-height: 1.45; display: flex; gap: 10px; }
.pricing-card--featured .pricing-features li { color: rgba(255,255,255,0.85); }
.pricing-check { color: var(--blue); font-weight: 800; flex-shrink: 0; }
.pricing-card--featured .pricing-check { color: var(--blue-light); }
.pricing-cta {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 13px 24px;
  background: var(--blue); color: #fff;
  border-radius: var(--r-md);
  font-weight: 700; font-size: 0.95rem; text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}
.pricing-cta:hover { background: var(--blue-hover); transform: translateY(-1px); }
.pricing-card--featured .pricing-cta { background: #fff; color: var(--navy); }
@media (max-width: 900px) { .pricing-grid { grid-template-columns: 1fr; max-width: 460px; } }

/* ===== VIDEO CTA ===== */
.video-cta {
  position: relative;
  min-height: 460px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
  text-align: center;
  padding: 96px 24px;
}
.video-cta-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,31,64,0.55), rgba(10,31,64,0.75));
}
.video-cta-inner { position: relative; z-index: 1; color: #fff; max-width: 720px; }
.video-cta-play {
  display: inline-flex; align-items: center; justify-content: center;
  width: 84px; height: 84px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  margin-bottom: 28px;
  box-shadow: 0 0 0 0 rgba(37,181,201,0.6);
  animation: videoPulse 2.4s ease-out infinite;
  transition: transform 0.2s ease, background 0.2s ease;
  text-decoration: none;
}
.video-cta-play:hover { transform: scale(1.06); background: var(--blue-hover); }
.video-cta-play-icon { font-size: 1.6rem; margin-left: 4px; }
@keyframes videoPulse {
  0% { box-shadow: 0 0 0 0 rgba(37,181,201,0.5); }
  70% { box-shadow: 0 0 0 24px rgba(37,181,201,0); }
  100% { box-shadow: 0 0 0 0 rgba(37,181,201,0); }
}
.video-cta-overline { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; color: var(--blue-light); margin: 0 0 12px; }
.video-cta-headline { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.02em; font-size: clamp(1.9rem, 4vw, 3rem); color: #fff; margin: 0; }
.video-cta-sub { color: rgba(255,255,255,0.85); font-size: 1.05rem; margin: 16px 0 0; }

/* ===== LOGO STRIP ===== */
.logo-strip-section { background: var(--canvas); padding: 56px 24px; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.logo-strip-heading { text-align: center; font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); margin: 0 0 28px; }
.logo-strip-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 24px 48px; }
.logo-strip-word { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; letter-spacing: -0.01em; color: var(--muted-soft); opacity: 0.8; transition: color 0.2s ease, opacity 0.2s ease; }
.logo-strip-word:hover { color: var(--navy); opacity: 1; }
.logo-strip-img { height: 32px; width: auto; opacity: 0.6; filter: grayscale(1); transition: opacity 0.2s ease, filter 0.2s ease; }
.logo-strip-img:hover { opacity: 1; filter: grayscale(0); }

/* ===== NEWSLETTER ===== */
.newsletter { padding: 72px 24px; }
.newsletter--teal { background: var(--blue); }
.newsletter--navy { background: var(--navy); }
.newsletter-inner {
  max-width: 1100px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 40px; flex-wrap: wrap;
}
.newsletter-headline { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.02em; font-size: clamp(1.6rem, 3vw, 2.25rem); color: #fff; margin: 0; }
.newsletter-sub { color: rgba(255,255,255,0.9); font-size: 1rem; margin: 10px 0 0; max-width: 460px; }
.newsletter-form { display: flex; gap: 10px; flex: 1 1 360px; max-width: 480px; }
.newsletter-input {
  flex: 1 1 auto; min-width: 0;
  padding: 14px 18px;
  border: none; border-radius: var(--r-md);
  font-family: var(--font-body); font-size: 0.95rem;
  background: #fff; color: var(--ink);
}
.newsletter-input::placeholder { color: var(--muted-soft); }
.newsletter-btn {
  flex-shrink: 0;
  padding: 14px 26px;
  background: var(--navy); color: #fff;
  border: none; border-radius: var(--r-md);
  font-family: var(--font-body); font-weight: 700; font-size: 0.95rem;
  cursor: pointer; transition: background 0.2s ease;
}
.newsletter--navy .newsletter-btn { background: var(--blue); }
.newsletter-btn:hover { background: var(--deep-navy); }
.newsletter--navy .newsletter-btn:hover { background: var(--blue-hover); }
.newsletter-note { width: 100%; color: rgba(255,255,255,0.75); font-size: 0.82rem; margin: 8px 0 0; }
@media (max-width: 760px) {
  .newsletter-inner { flex-direction: column; align-items: flex-start; }
  .newsletter-form { width: 100%; max-width: none; }
}

/* ============================================================================
   TWO-TIER HEADER  (appended — overrides the single-bar nav above)
   Top utility bar (logo + contact + CTA) over a nav bar (links + search).
   OPS palette: white topbar, soft-teal nav bar, navy text, teal accents.
   ============================================================================ */

/* --- Top utility bar --- */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1001;
  background: #ffffff;
  border-bottom: 1px solid var(--hairline);
  height: 64px;
  display: flex; align-items: center;
}
.topbar-inner {
  max-width: 1280px; width: 100%; margin: 0 auto;
  padding: 0 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.topbar-logo { text-decoration: none; display: inline-flex; align-items: center; flex-shrink: 0; }
.topbar-logo-img { display: block; height: 48px; width: auto; max-width: 100%; }
@media (max-width: 640px) {
  .topbar-logo-img { height: 38px; }
}
/* Legacy text-stack styles (kept for any place still rendering the text logo) */
.topbar-logo-stack { display: inline-flex; flex-direction: column; line-height: 1; font-family: var(--font-body); }
.topbar-logo-top { font-size: 0.7rem; font-weight: 800; color: var(--blue); letter-spacing: 0.22em; text-transform: uppercase; }
.topbar-logo-main { font-size: 1.15rem; font-weight: 900; color: var(--navy); letter-spacing: -0.005em; text-transform: uppercase; margin-top: 2px; }
.topbar-contact { display: flex; align-items: center; gap: 22px; }
.topbar-item { display: flex; flex-direction: column; line-height: 1.3; }
.topbar-label { font-size: 0.72rem; color: var(--muted); }
.topbar-value { font-size: 0.95rem; font-weight: 700; color: var(--navy); text-decoration: none; letter-spacing: 0.01em; }
.topbar-value:hover { color: var(--blue); }
.topbar-divider { width: 1px; height: 34px; background: var(--hairline); }
.topbar-cta {
  flex-shrink: 0;
  background: var(--blue); color: #fff;
  padding: 12px 24px; border-radius: var(--r-md);
  font-weight: 700; font-size: 0.92rem; text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}
.topbar-cta:hover { background: var(--blue-hover); transform: translateY(-1px); }

/* --- Nav bar (second tier) --- */
nav {
  position: fixed; top: 64px; left: 0; right: 0; z-index: 1000;
  background: #dcf1f7;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom: 1px solid var(--hairline);
  box-shadow: none;
  height: 56px;
  display: flex; align-items: center;
}
.nav-inner { max-width: 1280px; width: 100%; height: 100%; margin: 0 auto; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nav-links { display: flex; align-items: center; height: 100%; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav-links li { position: relative; }
.nav-links li > a {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--navy); font-weight: 600; font-size: 0.92rem;
  padding: 9px 16px; border-radius: var(--r-md);
  text-decoration: none;
  transition: color 0.2s ease, background 0.2s ease;
}
.nav-links li > a::after { display: none !important; } /* retire old underline-slide */
.nav-links li > a:hover { color: var(--blue-hover); background: rgba(255,255,255,0.5); }
.nav-caret { font-size: 0.62em; opacity: 0.7; }

/* --- Search --- */
.nav-search { display: flex; align-items: center; background: #fff; border: 1px solid var(--hairline); border-radius: var(--r-md); overflow: hidden; }
.nav-search-input { border: none; background: transparent; padding: 9px 14px; font-size: 0.88rem; font-family: var(--font-body); color: var(--ink); min-width: 200px; outline: none; }
.nav-search-input::placeholder { color: var(--muted-soft); }
.nav-search-btn { border: none; background: transparent; padding: 0 12px; cursor: pointer; color: var(--navy); display: flex; align-items: center; }
.nav-search-btn svg { width: 18px; height: 18px; }
.nav-search-btn:hover { color: var(--blue); }

/* Mega menus now use absolute/fixed positioning per-menu (see earlier rules) —
   the old global `top: 120px` was for the old full-width fixed band and is removed. */

/* --- Mobile: hide contact + nav bar, show hamburger in topbar --- */
@media (max-width: 960px) {
  .topbar { height: 60px; }
  .topbar-contact { display: none; }
  .mobile-menu { display: inline-flex !important; }
  nav { display: none; }
}

/* ============================================================================
   FOOTER REDESIGN  (appended — overrides earlier footer rules)
   Pre-footer teal CTA band → dark 4-col footer → bottom bar.
   ============================================================================ */

/* --- Pre-footer CTA band --- */
.footer-cta { background: var(--blue); padding: 40px 24px; }
.footer-cta-inner {
  max-width: 1280px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.footer-cta-headline {
  font-family: var(--font-display); font-weight: 500; letter-spacing: -0.02em;
  font-size: clamp(1.5rem, 3vw, 2.25rem); color: #fff; margin: 0;
}
.footer-cta-btn {
  flex-shrink: 0;
  background: #fff; color: var(--navy);
  padding: 15px 30px; border-radius: var(--r-md);
  font-weight: 700; font-size: 0.98rem; text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.footer-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -10px rgba(0,0,0,0.3); }

/* --- Footer body --- */
footer {
  background: var(--deep-navy);
  color: var(--on-dark-soft);
  /* Bottom padding extends the dark area behind the fixed .phone-bar so
     there's no light gap between the footer copyright row and the phone
     bar. (Phone bar is ~52-60px tall.) */
  padding: 72px 24px 88px;
}
@media (max-width: 640px) {
  footer { padding-bottom: 82px; }
}
.footer-inner { max-width: 1280px; margin: 0 auto; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
  gap: 48px;
  padding-bottom: 44px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  margin-bottom: 0;
}

.footer-logo { text-decoration: none; display: inline-flex; margin-bottom: 18px; }
.footer-logo-stack { display: inline-flex; flex-direction: column; line-height: 1; }
.footer-logo-top { font-size: 0.7rem; font-weight: 800; color: var(--blue); letter-spacing: 0.22em; text-transform: uppercase; }
.footer-logo-main { font-size: 1.1rem; font-weight: 900; color: #fff; letter-spacing: -0.005em; text-transform: uppercase; margin-top: 2px; }
.footer-brand p { font-size: 0.9rem; color: var(--on-dark-soft); line-height: 1.65; max-width: 340px; margin: 0; }

.footer-col h4 {
  font-family: var(--font-body);
  font-size: 1.15rem; font-weight: 700;
  color: var(--blue); margin: 0 0 20px;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.footer-col ul a { font-size: 0.95rem; color: var(--on-dark-soft); text-decoration: none; transition: color 0.2s ease; }
.footer-col ul a:hover { color: #fff; }

/* Newsletter column */
.footer-col--newsletter p { font-size: 0.95rem; color: var(--on-dark-soft); line-height: 1.6; margin: 0 0 18px; }
.footer-newsletter { display: flex; gap: 10px; }
.footer-newsletter-input {
  flex: 1 1 auto; min-width: 0;
  padding: 13px 16px;
  border: 1px solid rgba(255,255,255,0.15); border-radius: var(--r-md);
  background: rgba(255,255,255,0.06); color: #fff;
  font-family: var(--font-body); font-size: 0.92rem;
}
.footer-newsletter-input::placeholder { color: var(--on-dark-soft); }
.footer-newsletter-btn {
  flex-shrink: 0;
  background: var(--blue); color: #fff;
  border: none; border-radius: var(--r-md);
  padding: 13px 22px; font-weight: 700; font-size: 0.92rem; cursor: pointer;
  transition: background 0.2s ease;
}
.footer-newsletter-btn:hover { background: var(--blue-hover); }

/* Contact column (Contact Us + address + embedded map) */
.footer-contact { font-style: normal; display: flex; flex-direction: column; gap: 12px; margin: 0 0 16px; }
.footer-contact-line { font-size: 0.95rem; color: var(--on-dark-soft); text-decoration: none; line-height: 1.6; transition: color 0.2s ease; }
.footer-contact-line:hover { color: #fff; }
.footer-contact-phone { display: inline-flex; align-items: center; gap: 8px; font-size: 1.05rem; font-weight: 700; color: #fff; text-decoration: none; transition: color 0.2s ease; }
.footer-contact-phone:hover { color: var(--blue); }
.footer-map { border-radius: var(--r-md); overflow: hidden; line-height: 0; border: 1px solid rgba(255,255,255,0.12); }
.footer-map iframe { display: block; width: 100%; height: 150px; border: 0; }

/* --- Bottom bar --- */
.footer-bottom {
  border-top: none;
  padding-top: 24px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.footer-bottom p { font-size: 0.85rem; color: var(--on-dark-soft); margin: 0; }
.footer-bottom-right { display: flex; align-items: center; gap: 14px; }
.footer-bottom-right a { font-size: 0.85rem; color: var(--on-dark-soft); text-decoration: none; transition: color 0.2s ease; }
.footer-bottom-right a:hover { color: #fff; }
.footer-bottom-sep { color: rgba(255,255,255,0.3); }
.footer-totop {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  background: var(--blue); color: #fff !important;
  border-radius: var(--r-md); font-size: 1.1rem;
  transition: background 0.2s ease, transform 0.2s ease;
}
.footer-totop:hover { background: var(--blue-hover); transform: translateY(-2px); }

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .footer-cta-inner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ============================================================================
   HERO — FULL-BLEED VARIANT  (.hero--fullbleed)
   Full-bleed background image + dark navy overlay. Headline + feature
   checklist (left), rating card + sub + CTA (right). OPS navy/teal palette.
   ============================================================================ */
.hero--fullbleed {
  position: relative;
  min-height: 660px;
  padding: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: stretch;
  overflow: hidden;
}
/* kill the base .hero glow blobs */
.hero--fullbleed::before,
.hero--fullbleed::after { content: none; }

.hero-fb-overlay {
  position: absolute; inset: 0;
  /* Even dark scrim so white text is readable across the whole image —
     stronger on the left behind the headline, plus a base bottom gradient
     so the checklist + CTA always have contrast even over a busy/light photo. */
  background:
    linear-gradient(100deg, rgba(7,22,46,0.94) 0%, rgba(7,22,46,0.80) 48%, rgba(7,22,46,0.84) 100%),
    linear-gradient(0deg, rgba(7,22,46,0.5) 0%, rgba(7,22,46,0) 55%);
}

.hero-fb-inner {
  position: relative; z-index: 1;
  max-width: 1280px; width: 100%; margin: 0 auto;
  padding: 80px 32px;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 56px;
  align-items: stretch;
}

.hero-fb-main {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.hero-fb-eyebrow {
  align-self: flex-start;
  font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--blue-light);
  background: rgba(37,181,201,0.18);
  padding: 7px 14px; border-radius: var(--r-pill);
  margin-bottom: 28px;
}
.hero-fb-headline {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  font-size: clamp(2.6rem, 6vw, 5rem);
  line-height: 1.02;
  color: #ffffff;
  margin: 0;
  max-width: 12ch;
}
.hero-fb-features {
  list-style: none; padding: 0;
  margin: 40px 0 0;
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 14px 40px;
}
.hero-fb-features li {
  display: flex; align-items: center; gap: 10px;
  color: #fff; font-size: 1.05rem; font-weight: 500;
}
.hero-fb-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--blue); color: #fff; font-size: 0.72rem; font-weight: 900;
  flex-shrink: 0;
}

.hero-fb-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  text-align: right;
}
.hero-fb-rating {
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--r-xl);
  padding: 24px 28px;
  text-align: left;
  min-width: 220px;
}
.hero-fb-rating-top { display: flex; align-items: center; gap: 8px; }
.hero-fb-score { font-family: var(--font-display); font-weight: 500; font-size: 2.6rem; color: #fff; line-height: 1; }
.hero-fb-star { color: var(--blue); font-size: 1.6rem; }
.hero-fb-avatars { display: flex; margin: 16px 0 12px; }
.hero-fb-avatars span {
  width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.7);
  margin-left: -10px;
  background: linear-gradient(135deg, var(--blue) 0%, var(--navy) 100%);
}
.hero-fb-avatars span:first-child { margin-left: 0; }
.hero-fb-rating-label { font-size: 0.92rem; color: rgba(255,255,255,0.85); line-height: 1.4; margin: 0; }

.hero-fb-aside-bottom { /* reserved */ }
.hero-fb-sub {
  font-size: 1.05rem; line-height: 1.6;
  color: rgba(255,255,255,0.9);
  margin: 28px 0 24px;
  max-width: 38ch;
}
.hero-fb-cta {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--blue); color: #fff;
  padding: 16px 30px; border-radius: var(--r-pill);
  font-weight: 700; font-size: 1rem; text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}
.hero-fb-cta:hover { background: var(--blue-hover); transform: translateY(-2px); }
.hero-fb-cta-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(255,255,255,0.25); font-size: 0.8rem;
}

@media (max-width: 960px) {
  .hero--fullbleed { min-height: 0; }
  .hero-fb-inner { grid-template-columns: 1fr; gap: 36px; padding: 56px 20px; }
  .hero-fb-aside { align-items: flex-start; text-align: left; }
  .hero-fb-rating { align-self: flex-start; }
  .hero-fb-headline { font-size: clamp(2.4rem, 9vw, 3.4rem); max-width: none; }
  .hero-fb-sub { max-width: none; }
}

/* --- Full-bleed hero: legibility + modern accents --- */
.hero-fb-headline {
  text-shadow: 0 2px 24px rgba(0,0,0,0.35);
}
.hero-fb-sub,
.hero-fb-features li {
  text-shadow: 0 1px 10px rgba(0,0,0,0.45);
}
/* a thin teal rule under the headline as a modern accent */
.hero-fb-headline::after {
  content: '';
  display: block;
  width: 72px; height: 4px;
  border-radius: 4px;
  background: var(--blue);
  margin-top: 28px;
}
/* lift the rating card a touch + stronger glass for contrast */
.hero-fb-rating {
  background: rgba(7,22,46,0.55);
  box-shadow: 0 16px 40px -18px rgba(0,0,0,0.5);
}

/* ============================================================================
   SPECIALTY GRID — coloured header tile + icon tiles (OPS teal/navy)
   ============================================================================ */
.specialty { background: var(--canvas); padding: 96px 24px; }
.specialty-intro {
  max-width: 760px; margin: 0 auto 44px; text-align: center;
  font-size: 1.1rem; line-height: 1.65; color: var(--body);
}
.specialty-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1160px;
  margin: 0 auto;
}

/* Header tile — teal, white text, decorative arcs */
.specialty-header-tile {
  position: relative;
  overflow: hidden;
  background: var(--blue);
  border-radius: var(--r-lg);
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
  min-height: 220px;
}
.specialty-overline {
  font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em;
  color: rgba(255,255,255,0.85); margin: 0 0 6px;
}
.specialty-headline {
  font-family: var(--font-display); font-weight: 500; letter-spacing: -0.02em;
  font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1.05; color: #fff; margin: 0;
}
.specialty-headline::after {
  content: ''; display: block; width: 64px; height: 3px;
  background: rgba(255,255,255,0.6); border-radius: 3px; margin-top: 18px;
}
/* concentric arc decoration, bottom-right */
.specialty-arcs {
  position: absolute; right: -70px; bottom: -70px;
  width: 240px; height: 240px; border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 20px, rgba(255,255,255,0.16) 20px 21px);
  pointer-events: none;
}

/* Item tiles */
.specialty-tile {
  background: var(--surface-card);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 36px 28px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.specialty-tile:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-soft);
  border-color: var(--blue);
}
.specialty-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 76px; height: 76px; border-radius: 50%;
  margin-bottom: 22px;
}
.specialty-icon svg { width: 34px; height: 34px; color: #fff; fill: none; stroke: #fff; stroke-width: 1.6; }
.specialty-icon--teal { background: var(--blue); }
.specialty-icon--navy { background: var(--navy); }
.specialty-tile-title {
  font-family: var(--font-body);
  font-size: 1.15rem; font-weight: 800; letter-spacing: -0.01em;
  color: var(--ink); line-height: 1.25; margin: 0 0 10px;
}
.specialty-tile-desc { font-size: 0.92rem; line-height: 1.55; color: var(--body); margin: 0; }

@media (max-width: 900px) {
  .specialty-grid { grid-template-columns: repeat(2, 1fr); }
  .specialty-header-tile { grid-column: 1 / -1; min-height: 0; }
}
@media (max-width: 560px) {
  .specialty-grid { grid-template-columns: 1fr; }
}

/* ============================================================================
   SECTION NAV — left-rail navigation that sits ONLY beside the first content
   section. <main> becomes a 2-col grid; the sidebar and the immediately-
   following section share row 2 (~25/75 split). Every subsequent section,
   plus page_title above and cta_banner below, spans the full width and
   flows back to the normal single-column layout.
   ============================================================================ */
/* Sidebar + content layout — both sit inside a centered 1280px container.
   Sidebar = 25%, content = 75% with a 40px gutter between.
   Bands (page_title, later sections) full-bleed out of the container. */
main:has(> .section-nav) {
  display: grid;
  grid-template-columns: 25% minmax(0, 75%);
  max-width: 1280px;
  margin: 0 auto;
  /* Preserve the global `main { padding-top: 120px }` that keeps content
     below the fixed dual-bar header. Only override left/right. */
  padding-left: 24px;
  padding-right: 24px;
  column-gap: 40px;
  box-sizing: border-box;
}

/* Full-bleed bands above and below the sidebar row: page_title and any
   section that comes after the first content section. Uses negative
   margin-left/right pinned to the viewport edges, NOT 100vw width (which
   would double-count the scrollbar on some browsers). */
main:has(> .section-nav) > .page-title,
main:has(> .section-nav) > .section-nav + section ~ section {
  grid-column: 1 / -1;
  margin-left:  calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
}

/* Sidebar in left column */
main:has(> .section-nav) > .section-nav {
  grid-column: 1;
  min-width: 0;
}

/* First content section in right column */
main:has(> .section-nav) > .section-nav + section {
  grid-column: 2;
  min-width: 0;
}

.section-nav-inner {
  align-self: start;
  padding: 56px 20px 56px 0;
  border-right: 1px solid var(--hairline);
  background: transparent;
  box-sizing: border-box;
}
.section-nav-heading {
  font-family: var(--font-body);
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 22px;
  letter-spacing: -0.01em;
}
.section-nav-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.section-nav-item a,
.section-nav-item span {
  display: block;
  padding: 10px 0;
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--blue);
  text-decoration: none;
  transition: color 0.2s ease;
}
.section-nav-item a:hover { color: var(--blue-hover); }
.section-nav-item.is-current span {
  color: var(--ink);
  font-weight: 700;
}

/* Tablet — tighten sidebar so the content column doesn't get squeezed */
@media (max-width: 1100px) {
  main:has(> .section-nav) {
    grid-template-columns: 220px minmax(0, 1fr);
    column-gap: 32px;
  }
  .section-nav-inner {
    padding: 40px 20px 40px 0;
  }
  .section-nav-heading { font-size: 1.2rem; margin-bottom: 18px; }
  .section-nav-item a,
  .section-nav-item span { font-size: 0.95rem; padding: 8px 0; }
}

/* Below 900px — collapse to single column with sidebar on top */
@media (max-width: 900px) {
  main:has(> .section-nav) {
    display: block;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
    column-gap: 0;
  }
  main:has(> .section-nav) > .section-nav,
  main:has(> .section-nav) > .section-nav + section,
  main:has(> .section-nav) > .section-nav + section ~ section,
  main:has(> .section-nav) > .page-title {
    grid-column: auto;
    width: auto;
    margin-left: 0;
    margin-right: 0;
  }
  .section-nav-inner {
    padding: 24px 24px;
    border-right: none;
    border-bottom: 1px solid var(--hairline);
  }
  .section-nav-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 16px;
  }
}

@media (max-width: 480px) {
  .section-nav-list { grid-template-columns: 1fr; }
  .section-nav-inner { padding: 20px 20px; }
}

/* Centered variant — heading sits centered above a clean 2-column grid */
.specialty-top-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 48px;
}
.specialty-top-overline {
  font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--blue); margin: 0 0 10px;
}
.specialty-top-headline {
  font-family: var(--font-display); font-weight: 500; letter-spacing: -0.02em;
  font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.08; color: var(--ink); margin: 0;
}
.specialty-grid--centered {
  grid-template-columns: repeat(2, 1fr);
  max-width: 920px;
}
@media (max-width: 560px) {
  .specialty-grid--centered { grid-template-columns: 1fr; }
}

/* ============================================================================
   PAGE TITLE — global inner-page header band (title + breadcrumb below)
   ============================================================================ */
.page-title {
  position: relative;
  overflow: hidden;
  background: var(--surface-soft);
  border-bottom: 1px solid var(--hairline);
  padding: 56px 24px 44px;
}
.page-title-inner { position: relative; max-width: 1200px; margin: 0 auto; }
.page-title-heading {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  line-height: 1.05;
  color: var(--ink);
  margin: 0;
}
.page-title-accent { color: var(--blue); }
.page-title-sub {
  font-size: 1.05rem; color: var(--body); line-height: 1.6;
  margin: 14px 0 0; max-width: 620px;
}
.page-title-crumbs {
  list-style: none; padding: 0; margin: 18px 0 0;
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  font-size: 0.85rem; color: var(--muted);
}
.page-title-crumbs li { display: flex; align-items: center; gap: 8px; }
.page-title-crumbs li:not(:last-child)::after { content: '›'; color: var(--muted-soft); }
.page-title-crumbs a { color: var(--muted); text-decoration: none; transition: color 0.2s ease; }
.page-title-crumbs a:hover { color: var(--blue); }
.page-title-crumbs span[aria-current="page"] { color: var(--ink); font-weight: 600; }

/* --- CTA banner headline: white, smaller, single line on desktop --- */
.cta-banner h2 {
  color: #ffffff;
  font-size: clamp(1.5rem, 2.8vw, 2.15rem);
  max-width: none;
  margin-bottom: 14px;
}

/* ===== VIDEO EMBED — inline responsive YouTube player (dark navy band) ===== */
.video-embed { background: #1a305b; padding: 96px 24px; text-align: center; }
.video-embed-inner { max-width: 900px; margin: 0 auto; }
.video-embed-overline {
  font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--blue-light); margin: 0 0 14px;
}
.video-embed-headline {
  font-family: var(--font-display); font-weight: 500; letter-spacing: -0.02em;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1.1; color: #ffffff; margin: 0;
}
.video-embed-sub { font-size: 1.05rem; color: rgba(255,255,255,0.85); line-height: 1.6; margin: 16px auto 0; max-width: 620px; }
.video-embed-frame {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;   /* 16:9 */
  height: 0;
  margin-top: 36px;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: 0 30px 60px -24px rgba(17, 49, 94, 0.32);
  background: var(--navy);
}
.video-embed-frame iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}
@media (max-width: 640px) { .video-embed { padding: 64px 16px; } }

/* info_cards with a custom colored background (data.bg) — white heading + white cards */
.info-strip--oncolor .info-strip-header h2 { color: #ffffff; }
.info-strip--oncolor .info-strip-header-sub { color: rgba(255,255,255,0.92); }
.info-strip--oncolor .info-strip-header a { color: #ffffff; }
.info-strip--oncolor .info-card { background: #ffffff; border-color: rgba(255,255,255,0.5); }

/* ===== CONTACT HERO — borderless statement headline that merges into form ===== */
.text-block.text-block--contact-hero {
  padding: 100px 24px 56px;
  background: var(--off-white);
}
.text-block--contact-hero .text-block-inner {
  max-width: 1100px;
  text-align: left;
}
.text-block--contact-hero .text-block-overline {
  font-size: 0.85rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--blue, #25B5C9);
  margin: 0 0 24px;
}
.text-block--contact-hero .text-block-headline {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.022em;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.12;
  color: var(--navy, #11315E);
  margin: 0;
  white-space: nowrap;
}
@media (max-width: 820px) {
  .text-block--contact-hero .text-block-headline { white-space: normal; font-size: clamp(1.8rem, 5.4vw, 2.4rem); }
}
.text-block--contact-hero .text-block-headline::after { content: none; }
/* When followed by the contact form, drop the form's top padding so they read as one block */
.text-block--contact-hero + .contact-form-section { padding-top: 24px; }
@media (max-width: 640px) {
  .text-block.text-block--contact-hero { padding: 64px 20px 32px; }
}

/* ===== OFFICES GRID — side-by-side office cards with embedded maps ===== */
.offices-grid-section { padding: 80px 24px; background: #f4f8fb; }
.offices-grid-inner { max-width: 1200px; margin: 0 auto; }
.offices-grid-header { text-align: center; margin: 0 auto 48px; max-width: 760px; }
.offices-grid-headline {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  font-size: clamp(1.8rem, 3.4vw, 2.4rem);
  line-height: 1.2;
  color: var(--navy, #11315E);
  margin: 0 0 12px;
}
.offices-grid-sub { color: var(--ink-2, #475569); font-size: 1.05rem; line-height: 1.6; margin: 0; }
.offices-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}
.office-card {
  background: #ffffff;
  border-radius: var(--r-xl, 20px);
  box-shadow: 0 20px 40px -24px rgba(17, 49, 94, 0.2);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.office-card-address { padding: 32px 32px 16px; }
.office-card-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--navy, #11315E);
  margin: 0 0 12px;
}
.office-card-line {
  color: var(--ink-2, #475569);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0 0 4px;
}
.office-card-link {
  display: inline-block;
  margin-top: 16px;
  color: var(--accent, #25B5C9);
  font-weight: 600;
  text-decoration: none;
}
.office-card-link:hover { text-decoration: underline; }
.office-card-map {
  position: relative;
  width: 100%;
  height: 320px;
  margin-top: auto;
  background: #e2eef3;
}
.office-card-map iframe { display: block; width: 100%; height: 100%; }
@media (max-width: 860px) {
  .offices-grid { grid-template-columns: 1fr; }
  .office-card-map { height: 280px; }
}

/* ===== ARTICLES GRID — responsive card grid of blog posts ===== */
.articles-grid-section { padding: 80px 24px; background: #ffffff; }
.articles-grid-inner { max-width: 1280px; margin: 0 auto; }
.articles-grid-header { text-align: center; margin: 0 auto 48px; max-width: 760px; }
.articles-grid-headline {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.12;
  color: var(--navy, #11315E);
  margin: 0 0 12px;
}
.articles-grid-sub { color: var(--ink-2, #475569); font-size: 1.05rem; line-height: 1.6; margin: 0; }
.articles-grid-count {
  margin: 16px 0 0;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent, #25B5C9);
}
.articles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.article-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid rgba(17, 49, 94, 0.10);
  border-radius: var(--r-lg, 16px);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.article-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 24px 48px -28px rgba(17, 49, 94, 0.28);
  border-color: rgba(37, 181, 201, 0.5);
}
.article-card-image {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #e2eef3;
}
.article-card-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.article-card:hover .article-card-image img { transform: scale(1.04); }
.article-card-body {
  display: flex;
  flex-direction: column;
  padding: 24px 26px 22px;
  flex: 1;
}
.article-card-date {
  margin: 0 0 12px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent, #25B5C9);
}
.article-card-title {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.015em;
  font-size: 1.15rem;
  line-height: 1.3;
  color: var(--navy, #11315E);
  margin: 0 0 12px;
}
.article-card-excerpt {
  color: var(--ink-2, #475569);
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0 0 20px;
  flex: 1;
}
.article-card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--accent, #25B5C9);
  margin-top: auto;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  transition: gap 0.18s ease, color 0.18s ease;
}
.article-card:hover .article-card-link {
  color: var(--navy, #11315E);
  gap: 10px;
}
@media (max-width: 1024px) {
  .articles-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .articles-grid { grid-template-columns: 1fr; gap: 16px; }
  .article-card { padding: 24px 22px; }
}

/* ===== ARTICLE DETAIL — single article body ===== */
.article-detail-section {
  background: #e0f0f7;
  padding: 64px 24px 80px;
}
.article-detail {
  max-width: 1200px;
  margin: 0 auto;
  background: #ffffff;
  border-radius: var(--r-xl, 20px);
  padding: 64px 72px 56px;
  box-shadow: 0 30px 60px -32px rgba(17, 49, 94, 0.18);
}
@media (max-width: 640px) {
  .article-detail { padding: 32px 24px 28px; border-radius: var(--r-lg, 16px); }
}
.article-detail-eyebrow {
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent, #25B5C9);
  margin: 0 0 16px;
}
.article-detail-title {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.022em;
  font-size: clamp(2rem, 4.4vw, 3rem);
  line-height: 1.15;
  color: var(--navy, #11315E);
  margin: 0 0 20px;
}
.article-detail-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 36px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(17, 49, 94, 0.12);
  color: var(--ink-2, #475569);
  font-size: 0.95rem;
}
.article-detail-date { font-weight: 600; color: var(--navy, #11315E); }
.article-detail-author::before { content: '·'; margin-right: 12px; color: rgba(17,49,94,0.3); }

/* Prose typography for article body content from WordPress */
.article-body { color: var(--ink-1, #1e293b); font-size: 1.08rem; line-height: 1.75; }
.article-body p { margin: 0 0 1.2em; }
.article-body h2 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.018em;
  font-size: 1.65rem;
  line-height: 1.25;
  color: var(--navy, #11315E);
  margin: 2.2em 0 0.7em;
}
.article-body h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1.3;
  color: var(--navy, #11315E);
  margin: 1.8em 0 0.5em;
}
.article-body h4 {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--navy, #11315E);
  margin: 1.6em 0 0.5em;
}
.article-body a { color: var(--accent, #25B5C9); text-decoration: underline; text-underline-offset: 3px; }
.article-body a:hover { color: var(--navy, #11315E); }
.article-body strong { color: var(--navy, #11315E); }
.article-body ul, .article-body ol { margin: 0 0 1.4em; padding-left: 1.6em; }
.article-body li { margin: 0 0 0.5em; }
.article-body img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 2em auto;
  border-radius: var(--r-md, 12px);
}
.article-body blockquote {
  border-left: 3px solid var(--accent, #25B5C9);
  padding: 8px 0 8px 24px;
  margin: 2em 0;
  color: var(--ink-2, #475569);
  font-style: italic;
}
.article-body hr { border: 0; border-top: 1px solid rgba(17,49,94,0.12); margin: 2.4em 0; }

.article-detail-footer {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid rgba(17, 49, 94, 0.12);
}
.article-detail-back {
  display: inline-block;
  color: var(--accent, #25B5C9);
  font-weight: 700;
  text-decoration: none;
}
.article-detail-back:hover { color: var(--navy, #11315E); }
@media (max-width: 640px) {
  .article-detail-section { padding: 48px 20px 64px; }
  .article-body { font-size: 1rem; }
}

/* Article detail hero image — sits between meta line and body copy */
.article-detail-hero {
  margin: 0 0 36px;
  border-radius: var(--r-lg, 16px);
  overflow: hidden;
  background: #e2eef3;
  aspect-ratio: 16 / 9;
  box-shadow: 0 30px 60px -36px rgba(17, 49, 94, 0.32);
}
.article-detail-hero img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 640px) {
  .article-detail-hero { aspect-ratio: 16 / 10; margin: 0 0 28px; }
}

/* ===== TESTIMONIALS CAROUSEL — used when reviews > 3 ===== */
.testimonials-section--carousel { padding-bottom: 56px; }
.testimonial-carousel {
  position: relative;
  margin-top: 32px;
  padding: 0 56px;
}
.testimonial-carousel-viewport {
  overflow: hidden;
  width: 100%;
}
.testimonial-carousel-track {
  display: flex;
  gap: 24px;
  transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}
.testimonial-carousel .testimonial-card {
  flex: 0 0 calc((100% - 48px) / 3);  /* 3 per view minus 2 gaps */
  min-width: 0;
}
@media (max-width: 1024px) {
  .testimonial-carousel .testimonial-card { flex: 0 0 calc((100% - 24px) / 2); }
}
@media (max-width: 640px) {
  .testimonial-carousel { padding: 0 0 8px; }
  .testimonial-carousel .testimonial-card { flex: 0 0 100%; }
}

.testimonial-carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(17, 49, 94, 0.18);
  background: #ffffff;
  color: var(--navy, #11315E);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 24px -14px rgba(17, 49, 94, 0.3);
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
  z-index: 2;
}
.testimonial-carousel-nav svg { width: 20px; height: 20px; }
.testimonial-carousel-nav:hover { background: var(--accent, #25B5C9); color: #fff; }
.testimonial-carousel-nav:active { transform: translateY(-50%) scale(0.95); }
.testimonial-carousel-nav:disabled { opacity: 0.35; cursor: not-allowed; }
.testimonial-carousel-prev { left: 0; }
.testimonial-carousel-next { right: 0; }
@media (max-width: 640px) {
  .testimonial-carousel-prev { left: -4px; }
  .testimonial-carousel-next { right: -4px; }
}

.testimonial-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
}
.testimonial-carousel-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 0;
  background: rgba(17, 49, 94, 0.22);
  cursor: pointer;
  padding: 0;
  transition: background 0.18s ease, transform 0.18s ease;
}
.testimonial-carousel-dot:hover { background: rgba(17, 49, 94, 0.45); }
.testimonial-carousel-dot.is-active {
  background: var(--accent, #25B5C9);
  transform: scale(1.25);
}

/* ===== FOOTER — Google Business Profile link ===== */
.footer-gmb {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  color: #ffffff;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.footer-gmb:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.32);
  transform: translateY(-1px);
}
.footer-gmb svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}