/* ============================================================
   GLEC — global chrome (header/nav/footer/buttons) + Homepage
   Linked on every page for the shared chrome; homepage-only
   section rules below it are inert elsewhere.
   Loads AFTER colors_and_type.css (linked separately — the
   handoff's @import was removed to avoid a render-blocking
   import chain; constitution IV).
   ============================================================ */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--glec-paper);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
button { font-family: inherit; }
a { text-decoration: none; }
.phone a { color: inherit; border-bottom: 0; }
.phone a:hover { text-decoration: underline; }

.container { max-width: 1240px; margin: 0 auto; padding: 0 40px; }
@media (max-width: 720px){ .container { padding: 0 22px; } }

.eyebrow {
  font-family: var(--font-grotesk);
  font-weight: 500; font-size: 12px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--glec-teal); margin: 0 0 16px;
}
h1, h2, h3, h4, h5 { margin: 0; }

/* ---------- skip link (a11y — constitution II) ---------- */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--glec-teal-deep); color: #fff;
  font-family: var(--font-grotesk); font-weight: 700; font-size: 13px;
  letter-spacing: 0.08em; padding: 12px 18px; border-radius: 0 0 6px 0;
}
.skip-link:focus { left: 0; top: 0; outline: 3px solid var(--glec-clay); outline-offset: 2px; }

/* visible focus for keyboard users everywhere (constitution II) */
:focus-visible { outline: 3px solid var(--glec-teal-mid); outline-offset: 2px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-sans); font-weight: 700; font-size: 13px;
  letter-spacing: 0.18em; text-transform: uppercase;
  padding: 16px 32px; border-radius: 4px; border: 1px solid transparent;
  cursor: pointer; transition: background 150ms ease, color 150ms ease, border-color 150ms ease, filter 150ms ease;
}
.btn-primary { background: var(--glec-teal); color: #fff; }
.btn-primary:hover { background: var(--glec-teal-deep); color: #fff; }
.btn-secondary { background: transparent; color: var(--glec-teal); border-color: var(--glec-teal); }
.btn-secondary:hover { background: var(--glec-teal); color: #fff; }
.btn-ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.65); }
.btn-ghost-light:hover { background: #fff; color: var(--glec-teal-deep); }
.btn:active { filter: brightness(.95); }
.lo-cta .btn-primary:hover, .vl-hero .btn-primary:hover, .vl-cta .btn-primary:hover, .bio-aside .box.teal .btn-primary:hover { background: var(--glec-teal-soft); color: var(--glec-ink); }

/* ---------- header ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: background 300ms var(--ease-soft), box-shadow 300ms var(--ease-soft), padding 300ms var(--ease-soft);
  padding-block: 20px;
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; }
.site-header img.logo { height: 56px; width: auto; transition: height 300ms var(--ease-soft); }
.site-header nav.desktop { display: flex; align-items: center; gap: 30px; }
.site-header nav a {
  color: #fff; font-family: var(--font-grotesk); font-weight: 500;
  font-size: 13px; letter-spacing: 0.06em; padding: 8px 0; transition: color 150ms ease;
}
.site-header nav a:hover { color: var(--glec-teal-soft); }
.site-header nav a.cta {
  background: var(--glec-teal); padding: 12px 22px; border-radius: 4px; color: #fff;
  font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; font-size: 12px;
}
.site-header nav a.cta:hover { background: #fff; color: var(--glec-teal-deep); }
/* scrolled state */
.site-header.scrolled { background: var(--glec-teal-deep); box-shadow: 0 2px 20px rgba(53,62,62,.18); padding-block: 12px; }
.site-header.scrolled img.logo { height: 44px; }
.menu-btn { display: none; background: transparent; border: 0; color: #fff; cursor: pointer; padding: 6px; list-style: none; }
.menu-btn::-webkit-details-marker { display: none; }
.menu-btn svg { width: 28px; height: 28px; }
/* header dropdown: Information & More */
.has-drop { position: relative; }
.has-drop > .drop-toggle { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.has-drop > .drop-toggle .caret { width: 14px; height: 14px; transition: transform 200ms var(--ease-soft); }
.has-drop:hover > .drop-toggle .caret, .has-drop:focus-within > .drop-toggle .caret { transform: rotate(180deg); }
.drop-menu {
  position: absolute; top: calc(100% + 12px); right: 0;
  background: #fff; border: 1px solid var(--border); border-radius: 6px;
  box-shadow: var(--shadow-lg);
  min-width: 240px; padding: 8px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 180ms var(--ease-soft), transform 180ms var(--ease-soft), visibility 180ms;
  z-index: 120;
}
.has-drop:hover .drop-menu, .has-drop:focus-within .drop-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.drop-menu::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
.drop-menu a {
  display: block; color: var(--glec-teal-deep) !important;
  font-family: var(--font-grotesk); font-weight: 500; font-size: 14px;
  letter-spacing: 0; text-transform: none;
  padding: 10px 14px; border-radius: 4px;
}
.drop-menu a:hover { background: var(--glec-cream); color: var(--glec-teal) !important; }
.drop-menu.docs { min-width: 470px; left: 0; right: auto; }
.drop-menu.svcs { min-width: 560px; left: 0; right: auto; }
.drop-menu.locs { left: 0; right: auto; }
.drop-menu .docs-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 6px; }
.drop-menu .dd-all { display: block; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--border); font-weight: 700 !important; color: var(--glec-teal) !important; }

@media (max-width: 1040px){
  .site-header nav.desktop { display: none; }
  .menu-btn { display: inline-flex; }
}

/* ---------- mobile navigation: slide-in drawer (progressive enhancement) ----------
   A native <details>, so it opens and closes with JS disabled. The hamburger
   summary re-positions into the drawer head as the X when open, which keeps a
   single, always-reachable toggle above the drawer. menu.mjs adds
   aria-expanded, backdrop click, Escape, and close-on-navigate. */
.mobile-nav { display: none; }
.mobile-nav > summary { display: inline-flex; }
@media (max-width: 1040px){
  .mobile-nav { display: block; }
}
/* hamburger ⇄ X, driven purely by [open] so it works without JS */
.menu-btn .ic-close { display: none; }
.mobile-nav[open] > summary {
  position: fixed; top: 8px; right: 14px; z-index: 151;
  color: var(--glec-teal-deep); padding: 10px;
  min-width: 44px; min-height: 44px; align-items: center; justify-content: center;
}
.mobile-nav[open] > summary .ic-open { display: none; }
.mobile-nav[open] > summary .ic-close { display: block; }
.mobile-nav[open] > summary svg { width: 24px; height: 24px; }

.nav-backdrop {
  position: fixed; inset: 0; z-index: 140;
  background: rgba(20,26,26,.55);
  animation: ndFade 240ms var(--ease-soft);
}
.mobile-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 150;
  width: min(88vw, 380px); background: #fff;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 0 0 40px;
  box-shadow: -14px 0 40px rgba(0,0,0,.22);
  animation: ndSlide 280ms cubic-bezier(.22,1,.36,1);
}
/* Scroll lock behind the open drawer. menu.mjs sets .nav-open, deliberately
   NOT `html:has(.mobile-nav[open])`: a :has() on the root re-evaluates on every
   subtree mutation, and the home hero slider toggles classes on a timer —
   measured at +2,100ms total blocking time (constitution IV). Scoped to the
   drawer's breakpoint, since <details> stays open if the viewport is widened. */
@media (max-width: 1040px){
  html.nav-open, html.nav-open body { overflow: hidden; }
}
@keyframes ndSlide { from { transform: translateX(100%); } to { transform: none; } }
@keyframes ndFade { from { opacity: 0; } to { opacity: 1; } }

.mobile-panel .nd-head {
  display: flex; align-items: center; min-height: 60px; padding: 18px 22px;
  border-bottom: 1px solid #e8e6e0; position: sticky; top: 0; background: #fff; z-index: 2;
}
.mobile-panel .nd-title {
  font-family: var(--font-grotesk); font-size: 11px; letter-spacing: 0.18em;
  /* The handoff's #8a8f8c on white is 3.29:1 at 11px; --fg-muted keeps the
     quiet-label role at an AA-passing 8.6:1 (constitution II). */
  text-transform: uppercase; color: var(--fg-muted);
}
.mobile-panel .nd-cta {
  display: flex; align-items: center; justify-content: center;
  margin: 18px 22px; min-height: 52px; padding: 16px 18px;
  background: var(--glec-teal); color: #fff; border-radius: 4px;
  font-family: var(--font-sans); font-weight: 700; font-size: 12px;
  letter-spacing: 0.16em; text-transform: uppercase; text-align: center;
}
.mobile-panel .nd-cta:hover { background: var(--glec-teal-deep); }
.mobile-panel .nd-group { border-top: 1px solid #eceae4; }
.mobile-panel .nd-group > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  min-height: 56px; padding: 16px 22px;
  font-family: var(--font-sans); font-weight: 700; font-size: 16px;
  color: var(--glec-teal-deep);
}
.mobile-panel .nd-group > summary::-webkit-details-marker { display: none; }
.mobile-panel .nd-chev {
  width: 10px; height: 10px; flex: none; margin-left: 12px;
  border-right: 2px solid var(--glec-teal); border-bottom: 2px solid var(--glec-teal);
  transform: rotate(45deg); transition: transform 200ms var(--ease-soft);
}
.mobile-panel .nd-group[open] .nd-chev { transform: rotate(-135deg); }
.mobile-panel .nd-group a {
  display: flex; align-items: center;
  min-height: 46px; padding: 12px 22px 12px 34px;
  font-family: var(--font-grotesk); font-size: 15px; color: var(--fg-muted);
  border-bottom: 1px solid #f4f2ee;
}
.mobile-panel .nd-group a:last-child { border-bottom: 0; }
.mobile-panel .nd-group a:hover, .mobile-panel .nd-group a:focus-visible { color: var(--glec-teal); background: var(--glec-cream); }
.mobile-panel .nd-all { font-weight: 600; color: var(--glec-teal); }
.mobile-panel .nd-link {
  display: flex; align-items: center; min-height: 52px; padding: 16px 22px;
  border-top: 1px solid #eceae4;
  font-family: var(--font-sans); font-weight: 700; font-size: 16px; color: var(--glec-teal-deep);
}
.mobile-panel .nd-tel {
  display: flex; align-items: center; min-height: 56px; padding: 18px 22px;
  border-top: 1px solid #eceae4;
  font-family: var(--font-sans); font-weight: 900; font-size: 20px; color: var(--glec-teal);
}
.mobile-panel .nd-link:hover, .mobile-panel .nd-tel:hover { color: var(--glec-teal); background: var(--glec-cream); }
@media (prefers-reduced-motion: reduce){
  .mobile-panel, .nav-backdrop { animation: none; }
  .mobile-panel .nd-chev { transition: none; }
}

/* ---------- HERO ---------- */
.hero { position: relative; height: 100vh; min-height: 640px; max-height: 1000px; display: flex; align-items: center; overflow: hidden; background: var(--glec-teal-deep); }
.hero .slides { position: absolute; inset: 0; }
.hero .slide {
  position: absolute; inset: 0; opacity: 0;
  background-size: cover; background-position: center;
  transition: opacity 1400ms var(--ease-soft), transform 7000ms linear;
  transform: scale(1.06);
}
.hero .slide.active { opacity: 1; transform: scale(1.14); }
.hero .slide-eye { background-position: 30% 55%; transform-origin: 30% 55%; }
.hero .slide-team { background-position: 50% 12%; transform-origin: 50% 15%; }
@media (max-aspect-ratio: 5/4){ .hero .slide-eye { background-position: 26% 55%; } .hero .slide-team { background-size: auto 125%; background-position: 46% 4%; } }
.hero .scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(31,37,37,.82) 0%, rgba(31,37,37,.55) 42%, rgba(31,37,37,.15) 100%); z-index: 1; }
.hero .scrim-b { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(31,37,37,.5) 0%, rgba(31,37,37,0) 30%); z-index: 1; }
.hero .container { position: relative; z-index: 2; width: 100%; }
.hero .inner { max-width: 760px; }
.hero .eyebrow { color: var(--glec-clay); opacity: 0; animation: heroFade 900ms var(--ease-out) 200ms forwards; }
.hero h1 {
  font-family: var(--font-sans); font-weight: 900; color: #fff;
  font-size: clamp(42px, 6vw, 82px); line-height: 1.02; letter-spacing: -0.02em;
  text-shadow: 0 2px 24px rgba(0,0,0,.28);
  opacity: 0; animation: heroFade 900ms var(--ease-out) 350ms forwards;
}
.hero p.lead {
  color: rgba(255,255,255,.92); font-weight: 300;
  font-size: clamp(18px, 2.2vw, 24px); line-height: 1.55; max-width: 44ch; margin: 24px 0 36px;
  opacity: 0; animation: heroFade 900ms var(--ease-out) 500ms forwards;
}
.hero .cta-row { display: flex; flex-wrap: wrap; gap: 14px; opacity: 0; animation: heroFade 900ms var(--ease-out) 650ms forwards; }
@keyframes heroFade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
/* hero dots */
.hero .dots { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; gap: 10px; }
.hero .dots button { width: 32px; height: 3px; border: 0; background: rgba(255,255,255,.35); cursor: pointer; padding: 0; transition: background 200ms ease; }
.hero .dots button.active { background: #fff; }
/* scroll cue */
.hero .scroll-cue { position: absolute; bottom: 34px; right: 44px; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 8px; color: rgba(255,255,255,.7); font-family: var(--font-grotesk); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; }
.hero .scroll-cue .line { width: 1px; height: 40px; background: rgba(255,255,255,.4); position: relative; overflow: hidden; }
.hero .scroll-cue .line::after { content: ""; position: absolute; top: -40px; left: 0; width: 1px; height: 40px; background: #fff; animation: scrollDown 2s var(--ease-soft) infinite; }
@keyframes scrollDown { 0%{ transform: translateY(0);} 60%,100%{ transform: translateY(80px);} }
@media (max-width: 720px){ .hero .scroll-cue { display: none; } }

/* ---------- reveal-on-scroll ---------- */
/* Hiding is scoped to html.js: only menu.mjs can add the .in that reveals these,
   so an unscoped `opacity: 0` leaves the whole page blank with JS disabled. */
.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
.js .reveal.in { opacity: 1; transform: none; }
.js .reveal.d1 { transition-delay: 90ms; }
.js .reveal.d2 { transition-delay: 180ms; }
.js .reveal.d3 { transition-delay: 270ms; }
@media (prefers-reduced-motion: reduce){
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .hero .slide { transition: opacity 600ms ease; transform: none; }
  .hero .slide.active { transform: none; }
  .hero .eyebrow, .hero h1, .hero p.lead, .hero .cta-row { animation: none; opacity: 1; }
  .hero .scroll-cue .line::after { animation: none; }
}

/* ---------- section base ---------- */
.sec { padding-block: 104px; }
.sec .head { max-width: 720px; margin: 0 auto 56px; text-align: center; }
.sec .head.left { margin-inline: 0; text-align: left; }
.sec h2 { font-family: var(--font-sans); font-weight: 900; font-size: clamp(30px,3.6vw,46px); letter-spacing: -0.015em; color: var(--glec-teal-deep); line-height: 1.08; }
.sec .head p { color: var(--fg-muted); font-size: 18px; margin-top: 16px; }
@media (max-width: 720px){ .sec { padding-block: 64px; } }

/* ---------- stats ---------- */
.stats { background: var(--glec-teal-deep); color: #fff; padding-block: 68px; }
.stats .grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 28px; }
.stats .stat { text-align: center; position: relative; }
.stats .stat + .stat::before { content: ""; position: absolute; left: -14px; top: 12%; height: 76%; width: 1px; background: rgba(255,255,255,.14); }
.stats .num { font-family: var(--font-sans); font-weight: 900; font-size: clamp(38px,4.4vw,58px); line-height: 1; color: #fff; letter-spacing: -0.01em; }
.stats .num .clay { color: var(--glec-clay); }
.stats .label { font-family: var(--font-grotesk); font-weight: 500; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,.78); margin-top: 14px; }
@media (max-width: 720px){
  .stats .grid { grid-template-columns: 1fr 1fr; gap: 40px 20px; }
  .stats .stat:nth-child(odd)::before, .stats .stat + .stat::before { display: none; }
}

/* ---------- services ---------- */
.services { background: var(--bg); }
.services .grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.scard {
  position: relative; background: #fff; border: 1px solid var(--border); border-radius: 4px;
  padding: 40px 34px 34px; box-shadow: var(--shadow-card); overflow: hidden;
  transition: transform 240ms var(--ease-soft), box-shadow 240ms var(--ease-soft);
  display: flex; flex-direction: column;
}
.scard::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: var(--glec-teal); transform: scaleX(0); transform-origin: left; transition: transform 300ms var(--ease-soft); }
.scard:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.scard:hover::before { transform: scaleX(1); }
.scard .ico { width: 56px; height: 56px; margin-bottom: 22px; }
.scard h3 { font-size: 22px; color: var(--glec-teal-deep); margin-bottom: 10px; letter-spacing: -0.01em; }
.scard p { color: var(--fg-muted); font-size: 15.5px; margin: 0 0 22px; flex: 1; }
.scard .more { font-family: var(--font-grotesk); font-weight: 700; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--glec-teal); display: inline-flex; align-items: center; gap: 8px; }
.scard .more svg { width: 15px; height: 15px; transition: transform 200ms var(--ease-soft); }
.scard:hover .more svg { transform: translateX(4px); }
@media (max-width: 900px){ .services .grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px){ .services .grid { grid-template-columns: 1fr; } }

/* ---------- mission / values ---------- */
.mission { background: var(--glec-teal-deep); color: #fff; position: relative; overflow: hidden; }
.mission .emblem { position: absolute; right: -80px; top: 50%; transform: translateY(-50%); width: 460px; opacity: .05; filter: brightness(0) invert(1); pointer-events: none; }
.mission .head h2 { color: #fff; }
.mission .head .eyebrow { color: var(--glec-clay); }
.mission .head p { color: rgba(255,255,255,.82); }
.mission .grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 30px; position: relative; z-index: 1; }
.pillar { padding: 34px 30px; border-top: 2px solid var(--glec-clay); background: rgba(255,255,255,.04); border-radius: 0 0 4px 4px; }
.pillar h4 { font-family: var(--font-sans); font-weight: 900; font-size: 21px; color: #fff; margin-bottom: 12px; letter-spacing: -0.01em; }
.pillar p { color: rgba(255,255,255,.8); font-size: 16px; margin: 0; }
@media (max-width: 820px){ .mission .grid { grid-template-columns: 1fr; gap: 18px; } }

/* ---------- doctors ---------- */
.doctors { background: var(--glec-cream); border-block: 1px solid #ece8e0; overflow: hidden; }
.doctors .dhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 44px; }
.doctors .dhead .eyebrow { color: var(--glec-teal); }
.doctors h2 { font-family: var(--font-sans); font-weight: 900; font-size: clamp(30px,3.4vw,44px); color: var(--glec-teal-deep); letter-spacing: -0.015em; margin-bottom: 16px; }
.doctors .dhead p { color: var(--fg-muted); font-size: 17px; margin: 0; max-width: 52ch; }
.doctors .nav { display: flex; gap: 10px; flex: none; }
.doctors .arrow { width: 50px; height: 50px; border-radius: 50%; border: 1px solid var(--glec-teal); background: transparent; color: var(--glec-teal); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 150ms ease, color 150ms ease, opacity 150ms ease; }
.doctors .arrow:hover { background: var(--glec-teal); color: #fff; }
.doctors .arrow svg { width: 20px; height: 20px; }
.doctors .arrow[disabled] { opacity: .28; cursor: default; }
.doctors .arrow[disabled]:hover { background: transparent; color: var(--glec-teal); }
.doc-viewport { overflow: hidden; }
.doc-track { display: flex; gap: 22px; transition: transform 450ms var(--ease-soft); will-change: transform; }
.doc-card { flex: 0 0 auto; width: calc((100% - 66px) / 4); display: block; color: inherit; }
.doc-card .photo { aspect-ratio: 4/5; border-radius: 4px; overflow: hidden; box-shadow: var(--shadow-card); background: var(--glec-teal-20); transition: box-shadow 220ms var(--ease-soft), transform 220ms var(--ease-soft); }
.doc-card:hover .photo { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.doc-card:hover .name { color: var(--glec-teal); }
.doc-card .name { transition: color 150ms ease; }
.doc-card .photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.doc-card .name { font-family: var(--font-sans); font-weight: 700; font-size: 16px; color: var(--glec-teal-deep); margin-top: 14px; }
.doc-card .role { font-family: var(--font-grotesk); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--glec-teal); margin-top: 4px; }
.doctors .foot { margin-top: 42px; text-align: center; }
@media (max-width: 1040px){ .doc-card { width: calc((100% - 44px) / 3); } }
@media (max-width: 760px){
  .doc-card { width: calc((100% - 22px) / 2); }
  .doctors .dhead { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 520px){ .doc-card { width: 100%; } }

/* ---------- locations (homepage cards — scoped so the bare `.loc` used by
   the Locations listing page's sections is not affected) ---------- */
.locations { background: var(--bg); }
.locations .grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 22px; }
.locations .loc {
  position: relative; border-radius: 4px; overflow: hidden; box-shadow: var(--shadow-card);
  aspect-ratio: 3/4; display: block; color: #fff;
}
.locations .loc img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease-soft); }
.locations .loc::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(31,37,37,.82) 0%, rgba(31,37,37,.12) 55%, rgba(31,37,37,0) 100%); transition: background 400ms var(--ease-soft); }
.locations .loc:hover::after { background: linear-gradient(0deg, rgba(31,37,37,.94) 0%, rgba(31,37,37,.55) 55%, rgba(31,37,37,.28) 100%); }
.locations .loc:hover img { transform: scale(1.06); }
.locations .loc .cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 22px 22px 24px; }
.locations .loc .cap .city { font-family: var(--font-sans); font-weight: 900; font-size: 22px; letter-spacing: -0.01em; text-shadow: 0 1px 10px rgba(0,0,0,.45); }
.locations .loc .cap .state { font-family: var(--font-grotesk); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,.9); margin-top: 3px; text-shadow: 0 1px 8px rgba(0,0,0,.4); }
.locations .loc .cap .go { margin-top: 12px; font-family: var(--font-grotesk); font-weight: 700; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--glec-clay); opacity: 0; transform: translateY(6px); transition: opacity 240ms var(--ease-soft), transform 240ms var(--ease-soft); }
.locations .loc:hover .cap .go { opacity: 1; transform: none; }
.locations .loc:hover, .locations .loc:focus { color: #fff; }
.locations .loc:hover .cap .city, .locations .loc:hover .cap .state { color: #fff; }
@media (max-width: 900px){ .locations .grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px){ .locations .grid { grid-template-columns: 1fr; } .locations .loc { aspect-ratio: 16/9; } }

/* ---------- testimonials ---------- */
.testi { background: var(--glec-cream); border-block: 1px solid #ece8e0; }
.testi .stagew { max-width: 900px; margin: 0 auto; text-align: center; position: relative; }
.testi .stars { color: var(--glec-clay); letter-spacing: 5px; font-size: 20px; margin-bottom: 10px; }
.testi .rating { font-family: var(--font-grotesk); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-subtle); margin-bottom: 30px; }
.testi .slidebox { position: relative; min-height: 260px; }
.testi .tslide { position: absolute; inset: 0; opacity: 0; transition: opacity 500ms var(--ease-soft); pointer-events: none; }
.testi .tslide.active { opacity: 1; position: relative; pointer-events: auto; }
.testi blockquote { margin: 0; font-family: var(--font-sans); font-weight: 300; font-size: clamp(21px,2.5vw,30px); line-height: 1.45; letter-spacing: -0.01em; color: var(--glec-teal-deep); }
.testi .who { margin-top: 26px; font-family: var(--font-grotesk); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-subtle); }
.testi .who strong { color: var(--glec-teal); font-weight: 700; }
.testi .dots { display: flex; gap: 10px; justify-content: center; margin-top: 36px; }
.testi .dots button { width: 10px; height: 10px; border-radius: 50%; border: 0; background: var(--glec-teal-40); cursor: pointer; padding: 0; transition: background 200ms ease, transform 200ms ease; }
.testi .dots button.active { background: var(--glec-teal); transform: scale(1.15); }

/* ---------- outreach ---------- */
.outreach { position: relative; background: var(--glec-teal-deep); color: #fff; overflow: hidden; }
.outreach .container { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.outreach .map { width: 100%; opacity: .9; filter: saturate(.7) brightness(1.05); }
.outreach .eyebrow { color: var(--glec-clay); }
.outreach h2 { font-family: var(--font-sans); font-weight: 900; font-size: clamp(28px,3.2vw,42px); color: #fff; letter-spacing: -0.015em; margin-bottom: 18px; }
.outreach p { color: rgba(255,255,255,.85); font-weight: 300; font-size: 18px; line-height: 1.6; margin: 0 0 28px; max-width: 46ch; }
.outreach .cta-row { display: flex; gap: 14px; flex-wrap: wrap; }
.outreach .btn-primary:hover, .stats .btn-primary:hover, .mission .btn-primary:hover { background: var(--glec-teal-soft); color: var(--glec-ink); }
@media (max-width: 900px){ .outreach .container { grid-template-columns: 1fr; gap: 36px; } .outreach .media { order: 2; } }

/* ---------- final CTA ---------- */
.cta-final { background: var(--glec-cream); text-align: center; }
.cta-final .inner { max-width: 680px; margin: 0 auto; }
/* The home page's closing CTA pairs the copy with a photo, so it runs as a
   two-column, left-aligned variant of the shared .cta-final block. */
.sec.cta-final { text-align: left; }
.sec.cta-final .container { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.sec.cta-final .inner { max-width: 560px; margin: 0; }
.sec.cta-final .shot { border-radius: 6px; overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4/3; }
.sec.cta-final .shot img { width: 100%; height: 100%; object-fit: cover; object-position: 60% center; }
@media (max-width: 940px){
  .sec.cta-final .container { grid-template-columns: 1fr; gap: 34px; }
  .sec.cta-final .inner { max-width: none; }
  .sec.cta-final .shot { order: -1; }
}
.cta-final h2 { font-family: var(--font-sans); font-weight: 900; font-size: clamp(32px,3.8vw,50px); color: var(--glec-teal-deep); letter-spacing: -0.015em; margin-bottom: 18px; }
.cta-final p { color: var(--fg-muted); font-size: 18px; margin: 0 auto 34px; max-width: 48ch; }
.cta-final .cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.sec.cta-final p { margin: 0 0 34px; }
.sec.cta-final .cta-row { justify-content: flex-start; }
.cta-final .phone { margin-top: 28px; font-family: var(--font-grotesk); font-size: 14px; letter-spacing: 0.06em; color: var(--fg-muted); }
.cta-final .phone strong { color: var(--glec-teal); font-weight: 700; }

/* ---------- footer ---------- */
.site-footer { background: var(--glec-teal-deep); color: rgba(255,255,255,.85); padding-block: 68px 30px; }
.site-footer .grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 48px; margin-bottom: 48px; }
.site-footer img.logo { width: 210px; margin-bottom: 20px; }
.site-footer .blurb { font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.82); max-width: 290px; }
.site-footer h5 { font-family: var(--font-grotesk); font-weight: 700; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: #fff; margin: 0 0 16px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer ul li { margin: 7px 0; }
.site-footer a { color: rgba(255,255,255,.82); font-size: 14px; transition: color 150ms ease; }
.site-footer a:hover { color: var(--glec-clay); }
.site-footer .contact p { margin: 7px 0; font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.82); }
.site-footer .legal { border-top: 1px solid rgba(255,255,255,.12); padding-top: 24px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 12px; color: rgba(255,255,255,.6); }
.site-footer .legal a { color: rgba(255,255,255,.6); }
@media (max-width: 900px){ .site-footer .grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px){ .site-footer .grid { grid-template-columns: 1fr; } }