/* ==========================================================================
   SANTÉ EYECARE — GLOBAL STYLES
   Organization:
   1)  Base / Resets
   2)  Fonts & Typography
   3)  Color Utilities
   4)  Layout / Spacing Utilities
   5)  Navigation / Header
   6)  Links
   7)  Grids / Cards / UI Blocks
   8)  Buttons & Micro-interactions
   9)  Lists
   10) Forms
   11) Media / Images / Backgrounds
   12) Dark Mode
   13) Add-ons (Marquee, Map, etc.)
   14) Responsive Overrides
   15) Accessibility
   ========================================================================== */


/* ==========================================================================
   1) BASE / RESETS
   ========================================================================== */

html,
body {
  overflow-x: hidden;
}

body {
  font-family: "acumin-pro", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: #2d2d2d;
  transition: background-color 0.3s, color 0.3s;
}

/* Bootstrap modal/offcanvas compensation resets */
body.modal-open,
body.offcanvas-open {
  overflow-x: hidden !important;
  padding-right: 0 !important;
  --bs-body-padding-right: 0 !important;
}

body[style*="padding-right"],
body[style*="--bs-body-padding-right"] {
  padding-right: 0 !important;
  --bs-body-padding-right: 0 !important;
}

.modal-open .fixed-top,
.modal-open .sticky-top,
.modal-open .navbar-fixed-top {
  padding-right: 0 !important;
  margin-right: 0 !important;
}


/* ==========================================================================
   2) FONTS & TYPOGRAPHY
   ========================================================================== */

/* --- Font Imports --- */

@font-face {
  font-family: "ABCLaica-RegularItalic";
  src: url("../fonts/ABCLaica-RegularItalic.woff2") format("woff2"),
       url("../fonts/ABCLaica-RegularItalic.woff") format("woff");
  font-display: swap;
}

@font-face {
  font-family: "Laica Regular";
  src: url(fonts/ABCLaica-RegularItalic.woff2) format("woff2"),
       url(fonts/ABCLaica-RegularItalic.woff) format("woff"),
       url(fonts/ABCLaica-RegularItalic.otf) format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Laica Regular";
  src: url(fonts/ABCLaica-Regular.woff2) format("woff2"),
       url(fonts/ABCLaica-Regular.woff) format("woff"),
       url(fonts/ABCLaica-Regular.otf) format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SAASeries";
  src: url("../fonts/SAASeries.woff2") format("woff2"),
       url("../fonts/SAASeries.woff") format("woff");
  font-display: swap;
}

@font-face {
  font-family: "SAASeriesDStdStandard(D)";
  src: url("../fonts/SAASeriesDStdStandardD/font.woff2") format("woff2"),
       url("../fonts/SAASeriesDStdStandardD/font.woff") format("woff");
  font-display: swap;
}

@font-face {
  /* Subset generated by subset-icons.mjs — covers only the 7 icons used on this site.
     Run `node subset-icons.mjs` after adding any new bi-* icon to regenerate. */
  font-family: "bootstrap-icons";
  src: url("/fonts/bootstrap-icons-subset.woff2") format("woff2");
  font-display: swap;
}

/* --- Base Element Typography --- */

p {
  font-family: "acumin-pro", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 300;
  font-style: normal;
  letter-spacing: 0.05rem;
  color: rgba(0, 0, 0, 0.85);
}

span {
  font-family: inherit;
}

/* --- Type Utility Classes --- */

.font-primary {
  font-family: "SAASeriesDStdStandard(D)";
  letter-spacing: 0.2rem;
}

.font-subhead {
  font-family: "ABCLaica-RegularItalic";
  font-weight: 100;
}

.font-tertiary-head {
  font-size: 0.8rem;
  letter-spacing: 0.15rem;
  text-transform: uppercase;
  font-weight: 600;
}

.font-secondary-head {
  font-family: "acumin-pro", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  margin: 0 0 .75rem 0;
  color: rgba(0, 0, 0, 0.85);
  letter-spacing: 0.03em;
  font-weight: 100;
}

.font-pricing {
  font-family: "acumin-pro", sans-serif;
  letter-spacing: 0.15rem;
  text-transform: uppercase;
  font-weight: 600;
}

.font-micro {
  font-size: .75em;
}

.font-body {
  font-family: "acumin-pro", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.eyebrow {
  font-size: .75rem;
  letter-spacing: .2em;
  font-family: "acumin-pro", sans-serif;
  text-transform: uppercase;
  margin-bottom: 1rem;
  gap: .8rem;
  color: rgba(0, 0, 0, 0.55);
}

.section-title {
  font-size: 2.25rem;
  margin-bottom: 1.5rem;
  font-weight: 500;
}

.secondary {
  color: rgba(0, 0, 0, 0.55);
}

.text-small {
  font-size: 0.8rem;
}

/* --- Text Clamping --- */

.clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.clamp-1 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.clamp-2 { -webkit-line-clamp: 2; }
.clamp-3 { -webkit-line-clamp: 3; line-height: 1.6; max-height: calc(1.6em * 3); }
.clamp-4 { -webkit-line-clamp: 4; }
.clamp-5 { -webkit-line-clamp: 5; }


/* ==========================================================================dddddddddddd
   3) COLOR UTILITIES
   ========================================================================== */

/* ── Bootstrap CSS variable overrides ─────────────────────────────────────
   Defined here as a safeguard since PurgeCSS may strip :root declarations
   from the purged bootstrap.min.css. These mirror Bootstrap 5 defaults. */
:root {
  --bs-success-rgb: 25, 135, 84;
  --bs-success-bg-subtle: #d1e7dd;
  --bs-warning-rgb: 255, 193, 7;
  --bs-warning-bg-subtle: #fff3cd;
}

footer {
  background-color: #e8e6e1;
  transition: background-color 0.3s;
}

/* --- Background Colors --- */

.bg-black      { background-color: #1b1b1b; }
.bg-charcoal   { background-color: #1A1816; }
.bg-burgundy   { background-color: #783221; }
.bg-maroon     { background-color: #622212; }
.bg-cabernet   { background-color: #3B1208; }
.bg-porto      { background-color: #290d06; }
.bg-offwhite   { background-color: #EAE4DD; }
.bg-warmwhite  { background-color: #FDFBF8; }
.bg-khaki      { background-color: #f1eee8; }
.bg-red        { background-color: var(--bs-danger-bg-subtle); }
.bg-green      { background-color: var(--bs-success-bg-subtle); }
.bg-gray       { background-color: #F9F9F9; }
.bg-beige      { background-color: #DCD5CB; }
.bg-sand       { background-color: #cabaa5; }
.bg-dustyrose  { background-color: #D8B4A1; }
.bg-blush      { background-color: rgba(216, 180, 161, .20); }
.bg-olive      { background-color: #786E45; }
.bg-tangerine  { background-color: #FFB385; }
.bg-forest     { background-color: #453820; }
.bg-babyblue   { background-color: #9AC3DF; }

/* --- Text Colors --- */

.color-tangerine   { color: #FFB385; }
.color-burgundy    { color: #783221; }
.color-cabernet    { color: #3B1208; }
.color-forest      { color: #453820; }
.color-offwhite    { color: #EAE4DD; }
.color-blush       { color: rgba(216, 180, 161, .20); }
.color-khaki       { color: #f1eee8; }
.color-dustyrose   { color: #D8B4A1; }
.color-green       { color: rgba(var(--bs-success-rgb), 1); }
.color-olive       { color: #786E45; }
.color-babyblue    { color: #9AC3DF; }
.color-black       { color: #000000; }
.color-opaque      { color: rgba(0, 0, 0, 0.65); }
.color-lightgray   { color: rgba(0, 0, 0, 0.40); }
.color-translucent { color: rgba(255, 255, 255, 0.65); }

.opacity-10 { opacity: 0.10; }


/* ==========================================================================
   4) LAYOUT / SPACING UTILITIES
   ========================================================================== */

/* --- Section Rhythm --- */

.section               { padding-block: clamp(3rem, 6vw, 6rem); }
.section--tight        { padding-block: clamp(2rem, 4vw, 4rem); }
.section--loose        { padding-block: clamp(5rem, 8vw, 8rem); }
.section--flush-top    { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }
.section--no-padding-top    { padding-top: 0; }
.section--no-padding-bottom { padding-bottom: 0; }
.section--no-padding        { padding: 0; }

/* --- Custom Spacing Scale (4rem) --- */

.p-6  { padding: 4rem !important; }
.m-6  { margin: 4rem !important; }
.gap-6 { gap: 4rem !important; }
.-m-6 { margin: -4rem !important; }

.pt-6  { padding-top: 4rem !important; }
.mt-6  { margin-top: 4rem !important; }
.-mt-6 { margin-top: -4rem !important; }

.pb-6  { padding-bottom: 4rem !important; }
.mb-6  { margin-bottom: 4rem !important; }
.-mb-6 { margin-bottom: -4rem !important; }

.ps-6  { padding-left: 4rem !important; }
.ms-6  { margin-left: 4rem !important; }
.-ms-6 { margin-left: -4rem !important; }

.pe-6  { padding-right: 4rem !important; }
.me-6  { margin-right: 4rem !important; }
.-me-6 { margin-right: -4rem !important; }

.px-6  { padding-left: 4rem !important; padding-right: 4rem !important; }
.mx-6  { margin-left: 4rem !important; margin-right: 4rem !important; }
.-mx-6 { margin-left: -4rem !important; margin-right: -4rem !important; }

.py-6  { padding-top: 4rem !important; padding-bottom: 4rem !important; }
.my-6  { margin-top: 4rem !important; margin-bottom: 4rem !important; }
.-my-6 { margin-top: -4rem !important; margin-bottom: -4rem !important; }

/* --- Custom Spacing Scale (6rem) --- */

.p-7  { padding: 6rem !important; }
.m-7  { margin: 6rem !important; }
.gap-7 { gap: 6rem !important; }
.-m-7 { margin: -6rem !important; }

.pt-7  { padding-top: 6rem !important; }
.mt-7  { margin-top: 6rem !important; }
.-mt-7 { margin-top: -6rem !important; }

.pb-7  { padding-bottom: 6rem !important; }
.mb-7  { margin-bottom: 6rem !important; }
.-mb-7 { margin-bottom: -6rem !important; }

.ps-7  { padding-left: 6rem !important; }
.ms-7  { margin-left: 6rem !important; }
.-ms-7 { margin-left: -6rem !important; }

.pe-7  { padding-right: 6rem !important; }
.me-7  { margin-right: 6rem !important; }
.-me-7 { margin-right: -6rem !important; }

.px-7  { padding-left: 6rem !important; padding-right: 6rem !important; }
.mx-7  { margin-left: 6rem !important; margin-right: 6rem !important; }
.-mx-7 { margin-left: -6rem !important; margin-right: -6rem !important; }

.py-7  { padding-top: 6rem !important; padding-bottom: 6rem !important; }
.my-7  { margin-top: 6rem !important; margin-bottom: 6rem !important; }
.-my-7 { margin-top: -6rem !important; margin-bottom: -6rem !important; }

/* --- Custom Spacing Scale (8rem) --- */

.p-8  { padding: 8rem !important; }
.m-8  { margin: 8rem !important; }
.gap-8 { gap: 8rem !important; }
.-m-8 { margin: -8rem !important; }

.pt-8  { padding-top: 8rem !important; }
.mt-8  { margin-top: 8rem !important; }
.-mt-8 { margin-top: -8rem !important; }

.pb-8  { padding-bottom: 8rem !important; }
.mb-8  { margin-bottom: 8rem !important; }
.-mb-8 { margin-bottom: -8rem !important; }

.ps-8  { padding-left: 8rem !important; }
.ms-8  { margin-left: 8rem !important; }
.-ms-8 { margin-left: -8rem !important; }

.pe-8  { padding-right: 8rem !important; }
.me-8  { margin-right: 8rem !important; }
.-me-8 { margin-right: -8rem !important; }

.px-8  { padding-left: 8rem !important; padding-right: 8rem !important; }
.mx-8  { margin-left: 8rem !important; margin-right: 8rem !important; }
.-mx-8 { margin-left: -8rem !important; margin-right: -8rem !important; }

.py-8  { padding-top: 8rem !important; padding-bottom: 8rem !important; }
.my-8  { margin-top: 8rem !important; margin-bottom: 8rem !important; }
.-my-8 { margin-top: -8rem !important; margin-bottom: -8rem !important; }


/* ==========================================================================
   5) NAVIGATION / HEADER
   ========================================================================== */

/* --- Glass Header --- */

.glass-header {
  position: relative;
  overflow: visible;
  z-index: 1;
  background: rgba(255, 255, 255, .05);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(60px);
  border-radius: .75rem;
  padding: 1rem 3rem;
  transition: background 400ms ease, backdrop-filter 400ms ease, -webkit-backdrop-filter 400ms ease;
}

.burgundy-header { background-color: #783221; }

/* --- Navbar --- */

.navbar-toggler {
  border-radius: 0;
  border: solid 1px white;
}

.nav-link {
  cursor: pointer;
  font-family: "acumin-pro", sans-serif;
  font-weight: 300;
  letter-spacing: 0.05rem;
  color: white;
}

.nav-link:hover,
.nav-link:focus {
  color: rgba(255, 255, 255, 0.80);
  transition: 0.3s ease;
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show {
  color: rgba(255, 255, 255, 0.80);
}

.nav-link.active {
  color: white;
  border-bottom: 1px solid var(--bs-navbar-active-color);
  padding-bottom: 0;
}

/* Body-class nav highlighting */
.page-home .nav-home,
.page-services .nav-services,
.page-about .nav-about,
.page-contact .nav-contact {
  font-weight: 600;
  padding-bottom: 0;
  border-bottom: solid 2px white;
}

/* --- Dropdowns --- */

.dropdown-item {
  font-family: "acumin-pro", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  letter-spacing: 0.1em;
  font-size: 0.9em;
  color: rgba(0, 0, 0, .80);
  transition: background-color 0.3s ease, color 0.3s ease;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: #783221;
  color: white;
}

.dropdown-toggle::after {
  transition: transform 0.2s ease;
}

.dropdown-toggle[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

.expand-collapse.dropdown-toggle::after {
  margin-bottom: 6px;
  vertical-align: 0;
  align-self: center;
}

.expand-toggle::after { transition: transform 0.2s ease; }
.expand-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }

/* --- Offcanvas --- */

.offcanvas { background-color: #3B1208; }

.offcanvas-title {
  font-family: "SAASeries";
  display: none;
}

.offcanvas-body .nav-link { font-size: 1.2em; }

/* Offcanvas close icon */
.btn-close {
  --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
}

/* Offcanvas Scrollbar */
.offcanvas {
  scrollbar-width: thin;
  scrollbar-color: #7A3018 #3B1208;
}

.offcanvas::-webkit-scrollbar {
  width: 6px;
}

.offcanvas::-webkit-scrollbar-track {
  background: #3B1208;
  border-radius: 10px;
}

.offcanvas::-webkit-scrollbar-thumb {
  background-color: #7A3018;
  border-radius: 10px;
  border: 1px solid #5C1E0C;
}

.offcanvas::-webkit-scrollbar-thumb:hover {
  background-color: #E8D5C0;
}

.offcanvas::-webkit-scrollbar-corner {
  background: #3B1208;
}

/* --- Expand/Collapse Links --- */

#services .expand-collapse,
#services .expand-collapse:visited {
  color: #D8B4A1;
  letter-spacing: 0.15rem;
  font-family: "acumin-pro", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 0.8rem;
  cursor: pointer;
  text-decoration: none;
  display: flex;
  justify-content: space-between;
  white-space: nowrap;
  transition: 0.3s ease;
}

#services .expand-collapse:hover,
#services .expand-collapse:focus,
#services .expand-collapse:active {
  color: rgba(255, 255, 255, 0.75);
}

.expand-collapse,
.expand-collapse:focus,
.expand-collapse:active,
.expand-collapse:visited {
  color: #D8B4A1;
  font-family: "acumin-pro", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.15rem;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: flex;
  justify-content: space-between;
  white-space: nowrap;
  transition: 0.3s ease;
}

.faq-expand-collapse,
.faq-expand-collapse:focus,
.faq-expand-collapse:active,
.faq-expand-collapse:visited {
  font-family: "acumin-pro", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 300;
  color: rgba(0, 0, 0, 0.85);
  letter-spacing: 0.05rem;
  cursor: pointer;
  text-decoration: none;
  display: flex;
  justify-content: space-between;
  white-space: nowrap;
  transition: 0.3s ease;
  background: none;
  border: none;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
  text-align: left;
}

.faq-expand-collapse:hover { opacity: 0.5; }


/* ==========================================================================
   6) LINKS
   ========================================================================== */

/* --- Animated Underline Link --- */

.link {
  position: relative;
  color: #783221;
  text-decoration: none;
  display: inline-block;
  font-weight: 400;
}

.link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.link:hover::after { transform: scaleX(1); }

/* --- Basic Links --- */

.basic-link {
  color: rgba(59, 18, 8, 1);
  text-decoration: none;
  transition: 0.3s;
  border: 0;
}

.basic-link:hover { color: rgba(59, 18, 8, 0.7); }

.basic-link-underline {
  display: inline;
  padding-bottom: 1px;
  border-bottom: 1px solid currentColor;
}

/* --- Dusty Rose Links --- */

.dustyrose-link {
  color: rgba(216, 180, 161, 1);
  text-decoration: none;
  transition: 0.3s;
  border: 0;
}

.dustyrose-link:hover { color: rgba(216, 180, 161, .7); }

.dustyrose-link-underline {
  display: inline;
  padding-bottom: 1px;
  border-bottom: 1px solid currentColor;
}

/* --- Contextual Link Wrappers --- */

.responsive-link a,
.responsive-link a:visited { color: rgba(0, 0, 0, 0.80); }

.responsive-link a:hover,
.responsive-link a:active { color: rgba(0, 0, 0, 0.5); transition: 0.3s; }

.hero-link a,
.hero-link a:visited {
  color: #D8B4A1;
  text-decoration: none;
  transition: 0.3s;
}

.hero-link a:hover,
.hero-link a:active {
  color: #EAE4DD;
  text-decoration: none;
}

.nav-icon-link a,
.nav-icon-link a:visited,
.icon-link a,
.icon-link a:visited {
  color: #EAE4DD;
  text-decoration: none;
  transition: 0.3s;
}

.nav-icon-link a:hover,
.nav-icon-link a:active,
.icon-link a:hover,
.icon-link a:active {
  color: #ffffff;
}

.nav-icon-link-mobile a,
.nav-icon-link-mobile a:visited {
  color: #000000;
  text-decoration: none;
  transition: 0.3s;
}

/* --- Banner & Footer Links --- */

.top-banner { font-size: 0.8em; }

.top-banner a {
  text-decoration: underline;
  color: #453820;
  transition: 0.3s;
}

.top-banner a:hover { filter: brightness(90%); }

.footer-link a,
.footer-link a:visited {
  border-bottom: 1px solid #D8B4A1;
  text-decoration: none;
  transition: 0.3s;
  color: #D8B4A1;
  font-size: 0.8rem;
  letter-spacing: 0.05rem;
  opacity: 0.8;
  cursor: pointer;
}

.footer-link a:hover,
.footer-link a:active {
  opacity: 1;
  text-decoration: none;
}

/* --- Target ID Highlight --- */

#fees:target {
  animation: highlight 2s ease;
}

@keyframes highlight {
  from { background-color: rgba(120, 50, 33, 0.5); }
  to   { background-color: transparent; }
}


/* ==========================================================================
   7) GRIDS / CARDS / UI BLOCKS
   ========================================================================== */

/* --- Border Grid --- */

.border-grid {
  border: 1px solid #ebe9e6;
  border-radius: 0.75rem !important;
}

.border-card {
  height: 100%;
  padding: 2rem;
  border-right: 1px solid #ebe9e6;
  border-bottom: 1px solid #ebe9e6;
}

.border-icon,
.whatwedo-icon {
  font-size: 2.5rem;
  opacity: 0.7;
}

.border-card--logo:hover {
  background-color: rgba(0, 0, 0, 0.05);
  transition: 0.3s;
}

/* --- Expect / Employer Cards --- */

.expect-grid { border: 0; }
.expect-card { height: 100%; }
.expect-card img { height: 250px; width: 100%; }

.employers-card {
  height: 100%;
  padding: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Review Cards --- */

.review-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: solid 1px rgba(0, 0, 0, 0.175);
  padding: 2rem;
  transition: 0.5s ease;
  border-radius: 0.75rem !important;
}

.review-card:hover {
  background-color: rgba(120, 50, 33, 0.05);
  transition: 0.5s ease;
}

.review-card .card-body {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.review-card .rating-wrap  { flex: 0 0 auto; }
.review-card .card-body > .pt-3 { margin-top: auto; }

.review-card h5.clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}

.review-card .review-link {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
  color: inherit;
}

.review-card .review-link:hover { text-decoration: underline; }

@media (min-width: 992px) {
  .review-card h5.clamp-3 {
    line-height: 1.25;
    max-height: calc(1.5em * 3);
  }

  .review-card .review-link {
    line-height: 1.6;
    max-height: calc(1.6em * 6);
  }
}

.review-stars { fill: #783221; color: #783221; }

.reviews-rating-wrapper,
.rating-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}

.reviews-rating-wrapper { gap: 1rem; }
.rating-wrap            { margin-bottom: 0.75rem; }

/* --- FAQ --- */

.faq-section .dropdown-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 0;
  border-width: 0;
  box-shadow: none;
}

.faq-section .dropdown-toggle.show,
.faq-section .dropdown-toggle[aria-expanded="true"],
.faq-section .dropdown-toggle:active,
.faq-section .dropdown-toggle:focus,
.faq-section .dropdown-toggle:focus-visible {
  padding-block: 0;
  border-width: 0;
  box-shadow: none;
  transform: none;
}

.faq-section .dropdown-toggle::after {
  margin-left: auto;
  align-self: center;
}

/* --- Compare Table --- */

.compare-table {}

#table-header-2020club {
  grid-template-columns: 1fr 130px 130px 130px;
}

.compare-header {
  font-size: .75rem;
  letter-spacing: .2em;
  font-family: "acumin-pro", sans-serif;
  text-transform: uppercase;
  gap: .8rem;
}

.compare-row {
  display: grid;
  grid-template-columns: 1fr 130px 130px 130px;
  border-top: 1px solid rgba(42, 40, 37, 0.08);
  transition: background-color 0.15s ease;
}

.compare-row:hover {
  background: #f8f9fa;
  transition: 0.2s ease;
}

.compare-row--complete {
  background: rgba(var(--bs-success-rgb), 0.05);
  transition: background-color 0.2s ease;
}

.compare-row--complete:hover {
  background: rgba(var(--bs-success-rgb), 0.1);
}

.compare-feature {
  padding: 1rem;
  font-size: 0.875rem;
  font-weight: 300;
  font-style: normal;
  letter-spacing: 0.05rem;
  color: rgba(0, 0, 0, 0.85);
}

.compare-cell {
  padding: 1rem 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.compare-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  font-weight: 700;
  border-radius: 999px;
  font-size: 0.75rem;
  font-family: "acumin-pro", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.compare-yes     { background: rgba(var(--bs-success-rgb), 0.10); color: rgba(var(--bs-success-rgb), 1); }
.compare-partial { background: rgba(var(--bs-warning-rgb), 0.10); color: rgba(var(--bs-warning-rgb), 1); font-size: 0.7rem; }
.compare-no      { background: rgba(var(--bs-secondary-rgb), 0.10); color: rgba(var(--bs-secondary-rgb), 1); }

@media (max-width: 576px) {
  .compare-row { grid-template-columns: 1fr 90px 90px 90px; }
}

/* --- Pricing Cards --- */

.pricing-section {
  padding: 6rem 0;
  background: var(--warm-white);
}

.pricing-title {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 4vw, 3rem);
  font-weight: 300;
  line-height: 1.15;
  color: var(--espresso);
  margin-bottom: .8rem;
}

.pricing-desc {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--charcoal);
  opacity: .6;
  font-weight: 300;
}

.plan-card {
  border-radius: 20px;
  border: 1px solid rgba(42, 40, 37, 0.08);
  background: var(--cream);
  padding: 2.5rem;
  height: 100%;
  overflow: hidden;
}

.plan-card:hover {
  border-color: rgba(42, 40, 37, 0.15);
  box-shadow: 0 12px 40px rgba(42, 40, 37, 0.08);
}

.plan-card.featured {
  border-color: rgba(184, 122, 90, 0.25);
  box-shadow: 0 8px 30px rgba(184, 122, 90, 0.08);
}

.plan-card.featured::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: #783221;
}

.plan-card.featured:hover {
  background-color: rgba(120, 50, 33, 0.02);
}

.plan-badge {
  display: inline-flex;
  padding: .3rem .8rem;
  border-radius: 100px;
  font-size: .6rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 1.2rem;
  width: fit-content;
}

.pb-standard { background: rgba(42, 40, 37, 0.05); opacity: .6; }
.pb-featured  { background: rgba(184, 122, 90, 0.1); }

.plan-name {
  font-family: var(--serif);
  font-size: 1.8rem;
  font-weight: 400;
  color: var(--espresso);
  margin-bottom: .3rem;
}

.plan-for {
  font-size: .8rem;
  color: var(--charcoal);
  opacity: .5;
  font-weight: 300;
  margin-bottom: 1.5rem;
  line-height: 1.5;
}

.plan-price {
  font-family: var(--serif);
  font-size: 2.6rem;
  font-weight: 400;
  color: var(--espresso);
  line-height: 1;
}

.plan-price-wrap {
  padding: 1.5rem 0;
  border-top: 1px solid rgba(42, 40, 37, 0.07);
  border-bottom: 1px solid rgba(42, 40, 37, 0.07);
  margin-bottom: 1.5rem;
}

.plan-per,
.plan-annual,
.plan-description {
  font-size: .85rem;
  color: rgba(0, 0, 0, 1);
  opacity: .4;
  font-weight: 300;
  letter-spacing: 0.03em;
}

.plan-annual { margin-left: auto; }

.plan-features {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  flex: 1;
}

.plan-feat {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .45rem 0;
  font-size: .84rem;
  color: var(--charcoal);
  opacity: .6;
  font-weight: 300;
}

.pf-check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.pf-check svg { width: 10px; height: 10px; }

.pfc-olive { background: rgba(107, 122, 94, 0.12); }
.pfc-rust  { background: rgba(184, 122, 90, 0.12); }

.plan-visit {
  font-size: .78rem;
  color: var(--olive);
  font-weight: 500;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: .4rem;
}

.plan-visit::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--olive);
}

/* --- Benefits Cards --- */

.benefits-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}

@media (min-width: 576px) {
  .benefits-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .benefits-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 992px) {
  .benefits-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.benefits-card {
  padding: 1.5rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background-color: transparent;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.benefits-card:hover {
  transform: translateY(-4px);
  background-color: rgba(255, 255, 255, 0.05);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

@media (max-width: 991.98px) {
  .benefits-card { margin-bottom: 1.5rem; }
  .col-12.col-sm-6.col-lg-3:last-child .benefits-card { margin-bottom: 0; }
}

/* --- Club Cards --- */

.club-card {
  padding: 1.5rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: white;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.club-card:hover {
  transform: translateY(-4px);
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

/* --- Contact Cards --- */

.contacts-section { background: var(--warm-white); }
.contacts-top { margin-bottom: 3rem; }

.contacts-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 3rem;
  flex-wrap: wrap;
}

.contact-tab {
  padding: 0.65rem 1.4rem;
  border-radius: 100px;
  border: 1px solid rgba(42, 40, 37, 0.12);
  background: transparent;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  color: var(--charcoal);
  opacity: 0.6;
  cursor: pointer;
  transition: all 0.3s;
}

.contact-tab:hover { opacity: 1; border-color: rgba(42, 40, 37, 0.25); }

.contact-tab.active {
  background: var(--charcoal);
  color: var(--cream);
  border-color: var(--charcoal);
  opacity: 1;
}

.contacts-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.contact-card {
  padding: 2.2rem;
  border-radius: 20px;
  background: var(--cream);
  border: 1px solid rgba(42, 40, 37, 0.06);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.25s cubic-bezier(.4, 0, .2, 1), box-shadow 0.25s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
  transform: translateZ(0);
}

.contact-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 20px 20px 0 0;
  background: linear-gradient(90deg, var(--rust), var(--olive));
  opacity: 0;
  transition: opacity 0.3s;
}

.contact-card:hover::before { opacity: 1; }
.contact-card:hover { transform: translateY(-2px) scale(1.01); box-shadow: 0 12px 40px rgba(42, 40, 37, 0.08); }

.contact-card-emoji    { margin-bottom: 1.2rem; }
.contact-card-title    { color: var(--espresso); margin-bottom: 0.5rem; }
.contact-card-desc     { font-size: 0.82rem; line-height: 1.65; color: var(--charcoal); opacity: 0.55; font-weight: 300; margin-bottom: 1.2rem; }
.contact-card-features { display: flex; flex-direction: column; gap: 0.5rem; }

.contact-feature {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--charcoal);
  opacity: 0.5;
}

.contact-feature::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--olive);
  flex-shrink: 0;
}

.contact-card-price {
  margin-top: 1.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(42, 40, 37, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.price-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.4; }
.price-value { font-family: var(--serif); font-size: 1.1rem; color: var(--espresso); }

@media (max-width: 768px) {
  .contacts-grid { grid-template-columns: repeat(1, 1fr); }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .contacts-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 992px) {
  .contacts-grid { grid-template-columns: repeat(3, 1fr); }
}

/* --- Eyewear Cards --- */

.eyewear-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.eyewear-card {
  padding: 1.5rem;
  border-radius: 0.5rem;
  display: flex;
  flex-direction: column;
  height: 140px;
  background-color: transparent;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

@media (max-width: 991.98px) {
  .eyewear-card { margin-bottom: 1.5rem; }
  .col-12.col-sm-6.col-lg-3:last-child .eyewear-card { margin-bottom: 0; }
}

/* --- Prices Grid --- */

.prices-section {
  background: inherit;
  padding: 7rem 0;
}

.prices-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .05rem;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 20px;
  overflow: hidden;
  margin-top: 1rem;
}

.prices-card {
  padding: 2.5rem;
  background: white;
  transition: background 0.4s;
  cursor: pointer;
  position: relative;
}

.prices-card:hover { background-color: rgba(120, 50, 33, 0.05); }

/* --- Lenses Grid --- */

.lenses-section {
  background: #290d06;
  color: white;
  padding: 7rem 0;
}

.lenses-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .05rem;
  background: rgba(247, 243, 238, 0.10);
  border-radius: 20px;
  overflow: hidden;
  margin-top: 1rem;
}

.lens-card {
  padding: 2.5rem;
  background: #290d06;
  transition: background 0.4s;
  cursor: pointer;
  position: relative;
}

.lens-card:hover { background: rgba(247, 243, 238, 0.03); }

.lens-tag {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.3rem 0.8rem;
  border-radius: 100px;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid rgba(247, 243, 238, 0.22);
  color: rgba(247, 243, 238, 0.6);
}

.plans-tag {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.3rem 0.8rem;
  border-radius: 100px;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.4;
  border: solid 1px rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.5);
}

.plans-tag-green {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.3rem 0.8rem;
  border-radius: 100px;
  line-height: 1.4;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background-color: rgba(var(--bs-success-rgb), 0.09);
  color: rgba(var(--bs-success-rgb), 0.7);
}

.lens-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #D8B4A1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  margin-bottom: 1.5rem;
  transition: background 0.3s;
  color: #290d06;
}

.lens-card:hover .lens-icon {
  background: rgba(120, 50, 33, 1);
  color: white;
  transition: 0.3s ease;
}

@media (min-width: 992px) {
  .lenses-grid { grid-template-columns: repeat(2, 1fr); gap: 1px; }
  .prices-grid  { grid-template-columns: repeat(2, 1fr); gap: 1px; }
}

/* --- Feature Items --- */

.feature-item {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  margin-bottom: 3rem;
  color: #2d2d2d;
}

.feature-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: rgba(120, 50, 33, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.feature-icon i {
  font-size: 1.4rem;
  color: #783221;
}

.feature-icon-alt {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #D8B4A1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  margin-bottom: 1.5rem;
  transition: background 0.3s;
  color: #290d06;
  padding: 1em;
}

.other-feature-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: #783221;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.other-feature-icon i {
  font-size: 1.4rem;
  color: #ffffff;
}

/* --- Content Switch --- */

.content-switch {
  opacity: 0;
  transition: opacity .25s ease;
}

.content-switch.active { opacity: 1; }

/* --- Segmented Control --- */

.segmented-control {
  display: flex;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  background-color: #c6c7c8;
  border-radius: 999px;
  padding: 4px;
}

.segmented-control .segment {
  flex: 1;
  text-align: center;
  border-radius: 999px;
  padding: 0.6rem 1rem;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  color: #2d2d2d;
  background-color: transparent;
  transition: all 0.25s ease;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn-check:checked + .segment {
  background-color: #783221;
  color: #ffffff;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}

.segmented-control .segment:hover { opacity: 0.9; }

/* --- Badges --- */

.badge-glass {
  background: rgba(255, 255, 255, .05);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  padding: 1em;
  border-radius: 10rem;
}

.initials-badge {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  padding-left: 4px;
  padding-bottom: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: .8rem;
  font-family: "acumin-pro", sans-serif;
  background: rgba(0, 0, 0, 0.20);
  color: rgba(0, 0, 0, 0.45);
  border: 0;
}

.initials-badge--sm { width: 36px; height: 36px; font-size: 12px; }
.initials-badge--lg { width: 64px; height: 64px; font-size: 18px; }

.badge-text {
  margin: 0 0 .5rem 0;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: .8rem;
  font-family: "acumin-pro", sans-serif;
  color: rgba(0, 0, 0, 0.50);
}

/* --- Section-Specific Overrides --- */

#fees .fees-copy { min-height: 260px; }

#services p { color: white; }

/* --- HIW Timeline --- */

#expect .hiw-step__left,
#expect .hiw-step__right {
  will-change: opacity, transform;
}

#expect .hiw-step { transition: opacity 180ms linear; }

.hiw-timeline {
  position: relative;
  padding: clamp(1rem, 2vw, 1.5rem) 0;
}

.hiw-timeline__line-wrapper {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  pointer-events: none;
}

.hiw-timeline__line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background: rgba(0, 0, 0, 0.12);
  border-radius: 999px;
  opacity: 30%;
  background-image: linear-gradient(black 33%, rgba(255, 255, 255, 0) 0%);
  background-position: right;
  background-size: 2px 6px;
  background-repeat: repeat-y;
}

.hiw-timeline__line-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 0%;
  background: rgba(120, 50, 33, 1);
  border-radius: 999px;
  will-change: height;
}

.hiw-step {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 80px minmax(320px, 1.1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: center;
  padding: clamp(2.25rem, 5vw, 48rem) 0;
}

.hiw-step__left  { text-align: left; }
.hiw-step__kicker {
  margin: 0 0 .5rem 0;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: .8rem;
  opacity: .55;
}

.hiw-step__title {
  margin: 0 0 .75rem 0;
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
}

.hiw-step__body {
  margin: 0;
  opacity: .75;
  line-height: 1.7;
}

.hiw-step__center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hiw-step__dot {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.06);
  display: grid;
  place-items: center;
  color: rgba(0, 0, 0, 0.55);
  font-weight: 600;
  transition: transform 250ms ease, background 250ms ease, color 250ms ease;
  z-index: 2;
}

.hiw-step__dot span { font-size: .9rem; }

.hiw-step__right {
  display: flex;
  justify-content: center;
}

.hiw-step__img {
  width: 100%;
  max-width: 620px;
  height: auto;
  border-radius: 18px;
  display: block;
  opacity: 0.55;
  transform: translateY(10px) scale(0.99);
  transition: opacity 400ms ease, transform 400ms ease;
}

.hiw-step.is-active .hiw-step__dot {
  background: #783221;
  color: rgba(255, 255, 255, 0.8);
  transform: scale(1.05);
}

.hiw-step.is-active .hiw-step__img {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@media (max-width: 991.98px) {
  .hiw-timeline__line-wrapper { display: none; }

  .hiw-step {
    grid-template-columns: 1fr;
    padding: 2rem 0;
  }

  .hiw-step__center { display: none; }
  .hiw-step__left   { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .hiw-step__img,
  .hiw-step__dot { transition: none !important; }
}

/* --- Collage --- */

.collage { width: 100%; }

.collage__grid {
  width: min(720px, 100%);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  --gap: 18px;
  --radius: 12px;
  --shadow: 0 18px 45px rgba(0, 0, 0, 0.10);
  gap: var(--gap);
}

.collage__item {
  margin: 0;
  border-radius: .75rem;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #f5f3ef;
  box-shadow: var(--shadow);
}

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

@media (max-width: 768px) {
  .collage__grid  { grid-template-columns: 1fr; }
  .collage__item  { grid-column: 1 / -1 !important; }
}

/* Layout A: 1 large + 2 small bottom */
.collage--a .collage__item--large    { grid-column: 1 / -1; }
.collage--a .collage__item--sm-left  { grid-column: 1 / span 6; }
.collage--a .collage__item--sm-right { grid-column: 7 / span 6; }

/* Layout B: 2 small top + 1 large middle */
.collage--b .collage__item--sm-left  { grid-column: 1 / span 6; }
.collage--b .collage__item--sm-right { grid-column: 7 / span 6; }
.collage--b .collage__item--large    { grid-column: 1 / -1; }

/* Layout C: 1 large top + 1 large bottom */
.collage--c .collage__item--large-top    { grid-column: 1 / -1; }
.collage--c .collage__item--large-bottom { grid-column: 1 / -1; }

/* Collage skins */
.collage--tight .collage__grid { --gap: 12px; --radius: 18px; }
.collage--airy  .collage__grid { --gap: 24px; --radius: 26px; }
.collage--flat  .collage__grid { --shadow: none; }


/* ==========================================================================
   8) BUTTONS & MICRO-INTERACTIONS
   ========================================================================== */

.btn {
  font-weight: 500;
  font-size: 0.9rem;
  cursor: pointer;
}

/* --- Outline Buttons --- */

.btn-outline-dark {
  border-color: #2d2d2d;
  color: #2d2d2d;
  transition: all 0.3s;
  border-radius: 0;
}

.btn-outline-dark:hover {
  background-color: #2d2d2d;
  color: #fff;
}

.btn-outline-dark.custom-peach {
  color: #3A2A26;
  border-color: #3A2A26;
  background-color: #FFB385;
}

.btn-outline-dark.custom-peach:hover {
  background-color: #E6A676;
  color: #3A2A26;
}

.btn-outline-dark.burgundy {
  border: solid 2px;
  border-color: #783221;
  color: #783221;
}

.btn-outline-dark.burgundy:hover {
  color: #EAE4DD;
  background-color: #783221;
}

.btn-outline-dark.cabernet {
  border: solid 2px;
  border-color: #EAE4DD;
  color: #EAE4DD;
}

.btn-outline-dark.cabernet:hover {
  border-color: #3B1208;
  background-color: #3B1208;
  color: #EAE4DD;
}

.btn-outline-dark.offwhite {
  border: solid 2px;
  border-color: #EAE4DD;
  color: #EAE4DD;
  letter-spacing: 0.1em;
  border-radius: 24px;
  text-align: center;
  padding: 12px 24px;
  transition: 0.3s;
}

.btn-outline-dark.offwhite:hover {
  border-color: rgba(46, 46, 46, 1);
  background-color: rgba(46, 46, 46, 1);
  color: #EAE4DD;
}

/* --- Light Buttons --- */

.btn-light.offwhite {
  border: solid 2px #EAE4DD;
  background-color: #EAE4DD;
  color: #783221;
  letter-spacing: 0.1em;
  border-radius: 24px;
  text-align: center;
  padding: 12px 24px;
  transition: 0.3s;
}

.btn-light.offwhite:hover {
  background-color: #783221;
  color: #EAE4DD;
}

/* --- Dark Buttons --- */

.btn-dark.charcoal {
  background-color: rgba(46, 46, 46, 1);
  border-radius: 24px;
  letter-spacing: 0.1em;
  transition: 0.3s;
  font-family: "acumin-pro", sans-serif;
  color: white;
  text-align: center;
  padding: 12px 24px;
}

.btn-dark.charcoal:hover,
.btn-dark.charcoal:active {
  background-color: rgba(46, 46, 46, 0.75);
  color: white;
}

.btn-dark.burgundy {
  background-color: #783221;
  border: 0;
  border-radius: 24px;
  letter-spacing: 0.1em;
  transition: 0.3s;
  font-family: "acumin-pro", sans-serif;
  color: white;
  text-align: center;
  padding: 12px 24px;
}

.btn-dark.burgundy:hover,
.btn-dark.burgundy:active {
  background-color: rgba(120, 50, 33, 0.75);
}

.btn-dark.custom-cabernet {
  background-color: #3B1208;
  color: #EAE4DD;
  border: 0;
  font-family: "acumin-pro", sans-serif;
}

.btn-dark.custom-cabernet:hover {
  background-color: #783221;
  color: #EAE4DD;
}

.btn-dark.dustyrose {
  background-color: #D8B4A1;
  color: #783221;
  border: 0;
  font-family: "acumin-pro", sans-serif;
}

.btn-dark.dustyrose:hover {
  background-color: #DAAA91;
  color: #3B1208;
}

.btn-dark.gray {
  background-color: rgba(70, 61, 52, 0.2);
  color: rgb(70, 61, 52);
  border: 0;
  font-family: "acumin-pro", sans-serif;
}

.btn-dark.gray:hover {
  background-color: #3B1208;
  color: #EAE4DD;
}

/* --- Arrow Animations --- */

.btn .bi-arrow-right,
.btn .bi-arrow-right::before {
  display: inline-block;
  transition: transform 200ms ease;
}

.btn:hover .bi-arrow-right,
.btn:hover .bi-arrow-right::before {
  transform: translateX(6px);
}

.btn .bi-arrow-down,
.btn .bi-arrow-down::before {
  display: inline-block;
  transition: transform 200ms ease;
}

.btn:hover .bi-arrow-down,
.btn:hover .bi-arrow-down::before {
  transform: translateY(6px);
}

@media (prefers-reduced-motion: reduce) {
  .btn .bi-arrow-right::before,
  .btn .bi-arrow-down::before {
    transition: none;
  }
}

/* --- Icon Link --- */

.icon-link { padding-right: 20px; }

.icon {
  position: relative;
  transition: transform 0.3s ease;
  transform: translateX(0);
}

.icon::before { vertical-align: 0.05em !important; }

.icon-link:hover .icon { transform: translateX(10px); }


/* ==========================================================================
   9) LISTS
   ========================================================================== */

ul.list-plus {
  list-style: none;
  padding: 0 0 2em 0;
  margin: 0;
}

ul.list-plus li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-family: "acumin-pro", sans-serif;
  font-weight: 300;
  letter-spacing: 0.05rem;
  opacity: 0.85;
  color: inherit;
  padding-bottom: 1em;
}

ul.list-plus li:last-child { padding-bottom: 0; }

ul.list-plus li .bi {
  flex-shrink: 0;
  line-height: 1.4;
  opacity: 0.7;
  transform: translateY(0.15rem);
}


/* ==========================================================================
   10) FORMS
   ========================================================================== */

input.form-control,
textarea.form-control {
  border-radius: 0;
  border-color: #ccc;
  background-color: #fff;
  transition: border-color 0.2s;
}

input.form-control:focus,
textarea.form-control:focus {
  border-color: #2d2d2d;
  box-shadow: none;
}


/* ==========================================================================
   11) MEDIA / IMAGES / BACKGROUNDS
   ========================================================================== */

img { object-fit: cover; }

img.hover-zoom { transition: transform 0.3s ease; }
img.hover-zoom:hover { transform: scale(1.03); }

/* --- Logos --- */

.services-logo,
.insurance-logo,
.partners-logo,
.eyewear-logo,
.eyewear-logo-alt,
.employers-logo {
  opacity: 75%;
  transition: 0.3s ease;
}

.finance-logo   { max-width: 240px; }
.services-logo  { max-height: 24px; }
.insurance-logo { max-height: 36px; }
.employers-logo { max-height: 24px; }
.partners-logo  { max-height: 48px; }
.eyewear-logo   { max-height: 24px; }
.eyewear-logo-alt { max-height: 48px; }

.insurance-logo:hover { opacity: 50%; }
.partners-logo:hover  { opacity: 50%; transition: 0.3s ease; }

/* --- Brand Images (Marquee) --- */

.brand-img       { height: 16px; opacity: 70%; padding-inline: 2rem; }
.brand-img-alt   { height: 24px; opacity: 90%; padding-inline: 2rem; }
.brand-img-large { height: 48px; opacity: 90%; padding-inline: 2rem; }

/* --- Background Image Container --- */

.bg-image {
  width: 100%;
  height: 600px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  overflow: hidden;
}

/* --- Staff Bio Images --- */

.bio-image-large {
  width: 100%;
  height: 600px;
  position: relative;
}

.bio-image {
  width: 100%;
  height: 400px;
  position: relative;
}

.bio-image .img-inner,
.bio-image-large .img-inner {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
  border-radius: 8px;
}

.img-inner.tatiana { background-image: url("/img/tatianac.avif"); }
.img-inner.janissa  { background-image: url("/img/janissaf.avif"); }
.img-inner.andrea   { background-image: url("/img/drandreakells.avif"); }

/* --- Retinal Imaging Images --- */

.retinal-imaging {
  width: 100%;
  height: 400px;
  position: relative;
}

.retinal-imaging .img-inner {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 8px;
}

.img-inner.optomap-normal   { background-image: url("/img/retinal-imaging/optomap-healthy.avif"); }
.img-inner.optomap-melanoma { background-image: url("/img/retinal-imaging/optomap-melanoma-hq.avif"); }
.img-inner.optomap-compare  { background-image: url("/img/retinal-imaging/optomap-melanoma-hq.avif"); }

/* --- Optical Subject --- */

.img-optical-subject-1 .img-inner {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 600px;
}

/* --- Service Background Images --- */

.bg-optomap  { background-image: url("/img/services/optomap.avif"); background-position: center 25%; }
.bg-oct      { background-image: url("/img/services/oct.avif"); background-position: center 25%; }
.bg-pediatric { background-image: url("/img/services/pediatric.avif"); background-position: center; }
.bg-myopia   { background-image: url("/img/services/myopia.avif"); background-position: center; }
.bg-eyewear  { background-image: url("/img/services/eyewear.avif"); background-position: center; }
.bg-contacts { background-image: url("/img/services/contacts.avif"); background-position: center; }

/* --- Home Hero (Video) --- */

.home-hero {
  position: relative;
  min-height: 70vh;
  overflow: hidden;
}

.home-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url('/img/hero-poster.avif');
  background-size: cover;
  background-position: center;
}

.home-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.45) contrast(1.05) saturate(0.95);
  pointer-events: none;
}

.home-hero__video--desktop { display: block; }

@media (max-width: 768px) {
  .home-hero__video--desktop { display: none; }
  .home-hero__bg {
    filter: brightness(30%);
    background-position: right;
  }
}

/* --- Page Hero (Video) --- */

.page-basic {
  position: relative;
  min-height: 20vh;
  overflow: visible;
}

.page-hero {
  position: relative;
  min-height: 70vh;
  overflow: hidden;
}

.page-404 {
  position: relative;
  min-height: 80vh;
  overflow: hidden;
}

.page-retinal-imaging {
  position: relative;
  min-height: 80vh;
  overflow: hidden;
}

.page-expect-exam {
  position: relative;
  min-height: 80vh;
  overflow: hidden;
}


.page-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.page-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.5) contrast(.95) saturate(0.95);
  pointer-events: none;
}

/* Page-specific hero backgrounds */

.page-designer-frames .page-hero__bg,
.page-computer-glasses .page-hero__bg,
.page-vision-glossary .page-hero__bg,
.page-meet-our-doctors .page-hero__bg,
.page-contact-lens-fittings .page-hero__bg,
.page-vision-glossary .page-hero__bg,
.page-expect-exam .page-hero__bg,
.page-routine-preventative .page-hero__bg,
.page-glaucoma-management .page-hero__bg,
.page-emergency-eye-care .page-hero__bg,
.page-computer-vision-syndrome .page-hero__bg,
.page-keratoconus .page-hero__bg,
.page-eye-strain .page-hero__bg,
.page-vision-headaches .page-hero__bg,
.page-our-optical-boutique .page-hero__bg,
.page-payment .page-hero__bg,
.page-contact .page-hero__bg,
.page-faq .page-hero__bg,
.page-privacy .page-hero__bg,
.page-2020club .page-hero__bg,
.page-comprehensive-exam .page-hero__bg,
.page-medical-eye-care .page-hero__bg,
.page-senior-eyecare .page-hero__bg,
.page-pediatric-eyecare .page-hero__bg,
.page-myopia-control .page-hero__bg,
.page-cataracts .page-hero__bg,
.page-macular-degeneration .page-hero__bg,
.page-dry-eye .page-hero__bg,
.page-diabetic-eye-care .page-hero__bg,
.page-accessibility .page-hero__bg,
.page-services .page-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #290d06;
}

.page-about .page-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: brightness(0.4) contrast(1) saturate(0.85);
  background-image: url("/img/optical-blur.avif");
}

.page-404 .page-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: brightness(0.3) contrast(1) saturate(0.95);
  background-image: url("/img/optomap.avif");
}

.page-retinal-imaging .page-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: brightness(0.4) contrast(1) saturate(0.95);
  background-image: url("/img/optomap.avif");
}

.bg-retinal-imaging {
  position: relative;
}
.bg-retinal-imaging::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: brightness(0.4) contrast(1) saturate(0.95);
  background-image: url("/img/optomap.avif");
}
.bg-retinal-imaging > * {
  position: relative;
  z-index: 1;
}

.page-hero__video--desktop { display: block; }
.page-hero__video--mobile  { display: none; }

@media (max-width: 768px) {
  .page-hero__video--desktop { display: none; }
  .page-hero__video--mobile  { display: block; }
  .page-hero__video          { filter: brightness(0.35) contrast(1.03); }
}

/* --- Image Tiles --- */

.image-tile {
  position: relative;
  min-height: 600px;
  overflow: hidden;
  border-radius: 0;
}

.col-img { min-height: 600px; }

.image-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(41, 13, 6, 0.90),
    rgba(41, 13, 6, 0.65),
    rgba(41, 13, 6, 0.35),
    rgba(41, 13, 6, 0)
  );
  z-index: 1;
}

.image-tile:hover::before { transform: scale(1.1); }

.image-tile__content {
  position: relative;
  z-index: 2;
  padding: 1.5rem;
}

.image-tile.ysl::before,
.image-tile.gucci::before,
.image-tile.tomford::before,
.image-tile.rayban::before,
.image-tile.krewe::before,
.image-tile.akila::before,
.image-tile.woodys::before,
.image-tile.orgreen::before,
.image-tile.modo::before,
.image-tile.eco::before,
.image-tile.optical::before,
.image-tile.services::before,
.image-tile.optomap::before,
.image-tile.payment::before {
  content: "";
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 400ms ease;
  z-index: 0;
  filter: brightness(70%);
}

.image-tile.optical::before  { background-image: url("/img/optical-subject2.avif"); background-position: top; }
.image-tile.services::before { background-image: url("/img/explore-services.avif"); background-position: center; }
.image-tile.optomap::before  { background-image: url("/img/services/optomap.avif"); background-position: right; }
.image-tile.payment::before  { background-image: url("/img/explore-coverages.avif"); background-position: center; }
.image-tile.ysl::before      { background-image: url("/img/brands/ysl-eyewear.avif"); background-position: center; }
.image-tile.gucci::before    { background-image: url("/img/brands/gucci-eyewear.avif"); background-position: center; }
.image-tile.tomford::before  { background-image: url("/img/brands/tomford-eyewear.avif"); background-position: left; }
.image-tile.rayban::before   { background-image: url("/img/brands/rayban-eyewear.avif"); background-position: center; }
.image-tile.krewe::before    { background-image: url("/img/brands/krewe-eyewear.avif"); background-position: center; }
.image-tile.akila::before    { background-image: url("/img/brands/akila-eyewear.avif"); background-position: bottom; }
.image-tile.orgreen::before  { background-image: url("/img/brands/orgreen-eyewear.avif"); background-position: center; }
.image-tile.modo::before     { background-image: url("/img/brands/modo-eyewear.avif"); background-position: center; }
.image-tile.eco::before      { background-image: url("/img/brands/eco-eyewear.avif"); background-position: center; }
.image-tile.woodys::before   { background-image: url("/img/brands/woodys-eyewear.avif"); background-position: top; }

/* --- Image Hero Blocks --- */

.img-hero,
.img-services,
.img-2020club,
.img-about,
.img-eyewear,
.img-contacts,
.img-optical-subject-1,
.img-team-portrait,
.img-storefront,
.img-exam-checkin,
.img-retinal-imaging,
.img-retinal-imaging-oct,
.img-retinal-imaging-optomap,
.img-retinal-imaging-healthy,
.img-retinal-imaging-optomap-compare,
.img-about-intro,
.img-about-cbsaustin {
  position: relative;
  overflow: hidden;
}

.img-eyewear::before,
.img-contacts::before,
.img-hero::before,
.img-services::before,
.img-2020club::before,
.img-optical-subject-1::before,
.img-team-portrait::before,
.img-storefront::before,
.img-about-intro::before,
.img-exam-checkin::before,
.img-about-cbsaustin::before,
.img-retinal-imaging::before,
.img-retinal-imaging-oct::before,
.img-retinal-imaging-healthy::before,
.img-retinal-imaging-optomap::before,
.img-retinal-imaging-octp::before,
.img-retinal-imaging-optomap-compare::before,
.img-about::before {
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  z-index: 0;
  height: 100%;
  width: 100%;
}

.img-hero > *,
.img-services > *,
.img-about > * {
  position: relative;
  z-index: 1;
}

.img-services::before                        { background-image: url("/img/beach.avif"); }
.img-about::before                           { background-image: url("/img/retinoscopy.avif"); }
.img-about-intro::before                     { background-image: url("/img/optical-blur.avif"); background-position: center; }
.img-about-cbsaustin::before                 { background-image: url("/img/cbsaustin-close.avif"); background-position: right; }
.img-2020club::before                        { background-image: url("/img/akila-sunglasses.avif"); background-position: top; }
.img-exam-checkin::before                    { background-image: url("/img/exam-checkin.avif"); background-position: top; }
.img-retinal-imaging::before                 { background-image: url("/img/step1-optomap.avif"); background-position: center; }
.img-retinal-imaging-oct::before             { background-image: url("/img/oct-tall.avif"); background-position: center; }
.img-retinal-imaging-optomap::before         { background-image: url("/img/retinal-imaging/optomap-healthy-uw-hq.avif"); background-position: center; }
.img-retinal-imaging-optomap-compare::before { background-image: url("/img/retinal-imaging/optomap-melanoma-hq.avif"); background-position: left; }
.img-eyewear::before                         { background-image: url("/img/akila-sunglasses.avif"); background-position: center; }
.img-contacts::before                        { background-image: url("/img/contactlenses.avif"); background-position: center; }
.img-optical-subject-1::before               { background-image: url("/img/optical-subject1.avif"); background-position: center; }
.img-team-portrait::before                   { background-image: url("/img/team-portrait.avif"); background-position: center; }
.img-storefront::before                      { background-image: url("/img/storefront.avif"); background-position: center; }


/* --- Responsive Background Images --- */

.responsive-img-about {
  min-height: 240px;
  background-image: url("../img/child.avif");
  background-size: cover;
  background-position: center;
}

.responsive-img-about-intro {
  min-height: 400px;
  background-image: url("/img/optical-blur.avif");
  background-size: cover;
  background-position: center;
}

.responsive-img-about-cbsaustin {
  min-height: 400px;
  background-image: url("/img/cbsaustin-close.avif");
  background-size: cover;
  background-position: right;
}

.responsive-img-retinal-imaging {
  min-height: 400px;
  background-image: url("/img/step1-optomap.avif");
  background-size: cover;
  background-position: center;
}

.responsive-img-retinal-imaging-optomap {
  min-height: 400px;
  background-image: url("/img/retinal-imaging/optomap-healthy-uw-hq.avif");
  background-size: cover;
  background-position: center;
}

.responsive-img-retinal-imaging-oct {
  min-height: 400px;
  background-image: url("/img/oct-tall.avif");
  background-size: cover;
  background-position: center;
}

.responsive-img-eyewear {
  min-height: 400px;
  background-image: url("/img/akila-sunglasses.avif");
  background-size: cover;
  background-position: center;
}

.responsive-img-contacts {
  min-height: 400px;
  background-image: url("/img/contactlenses.avif");
  background-size: cover;
  background-position: center;
}

.responsive-img-services {
  height: 30vh;
  width: 100%;
  background-image: url("../img/beach.avif");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  z-index: -2;
}

.responsive-img-optical-subject-1 {
  min-height: 400px;
  background-image: url("/img/optical-subject1.avif");
  background-size: cover;
  background-position: center;
}

.responsive-team-portrait {
  min-height: 400px;
  background-image: url("/img/team-portrait.avif");
  background-size: cover;
  background-position: center;
}

.responsive-storefront {
  min-height: 400px;
  background-image: url("/img/storefront.avif");
  background-size: cover;
  background-position: center;
}

.responsive-img-2020club {
  min-height: 400px;
  background-image: url("/img/akila-sunglasses.avif");
  background-size: cover;
  background-position: top;
}

.responsive-img-map {
  min-height: 400px;
  background-image: url("/img/map-static.avif");
  background-size: cover;
  background-position: center;
  transform: scale(2);
}

.why-sante-img {
    width: 100%;
    aspect-ratio: 4/5;
    background: #e8e0d8 url("/img/explore-coverages.avif") center/cover no-repeat;
    min-height: 400px;
}

/* --- Height Utilities --- */

/* Hero paragraphs always left-aligned regardless of parent text-center */
.hero-content p,
.hero-content .lead { text-align: left !important; }

.hero-content-inner      { height: 80vh; }
.content-inner           { min-height: unset; }
.page-content-inner      { min-height: 50vh; }
.page-basic-content-inner { height: 20vh; }
.content-bottom-align    { padding-bottom: 8rem; }

/* --- Hero Scroll Indicator --- */

.hero-scroll {
  position: absolute;
  bottom: 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: white;
  animation: fadeUp 1s ease 1.2s both;
  z-index: 33;
}

.hero-scroll span {
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.35;
  font-family: "acumin-pro", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.scroll-line {
  width: 1px;
  height: 40px;
  background: white;
  opacity: 0.2;
  animation: scrollPulse 2s ease infinite;
}

@keyframes scrollPulse {
  0%   { transform: scaleY(0); transform-origin: top; }
  50%  { transform: scaleY(1); transform-origin: top; }
  51%  { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

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

/* --- Map --- */

#map {
  width: 100%;
  height: 100%;
  min-height: 320px;
}

#contact-map {
  width: 100%;
  height: 50vh;
  min-height: 320px;
}

/* --- Sante Pin --- */

.sante-pin.drop-in {
  animation: santeDrop 550ms cubic-bezier(.2, .9, .2, 1) forwards;
}

@keyframes santeDrop {
  0%   { transform: rotate(-45deg) translateY(-36px) scale(0.85); opacity: 0; }
  70%  { transform: rotate(-45deg) translateY(4px) scale(1.04); opacity: 1; }
  100% { transform: rotate(-45deg) translateY(0) scale(1); opacity: 1; }
}


/* ==========================================================================
   12) DARK MODE
   ========================================================================== */

body.dark-mode {
  background-color: #1c1c1c;
  color: #f1f1f1;
}

body.dark-mode .navbar,
body.dark-mode .navbar-dark,
body.dark-mode .navbar-brand,
body.dark-mode .nav-link,
body.dark-mode .btn {
  background-color: transparent;
  color: #f1f1f1 !important;
}

body.dark-mode .btn-outline-dark {
  border-color: #f1f1f1;
  color: #f1f1f1;
}

body.dark-mode .btn-outline-dark:hover {
  background-color: #f1f1f1;
  color: #1c1c1c;
}

body.dark-mode footer { background-color: #2a2a2a; }

body.dark-mode input.form-control,
body.dark-mode textarea.form-control {
  background-color: #2c2c2c;
  color: #f1f1f1;
  border-color: #444;
}

body.dark-mode .card-style {
  background-color: #2b2b2b;
  border-color: #444;
}


/* ==========================================================================
   13) ADD-ONS (MARQUEE, MAP, ETC.)
   ========================================================================== */

::selection {
  background-color: #783221;
  color: #ffffff;
}

/* --- Reviews Marquee --- */

.reviews-marquee {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.reviews-track {
  display: flex;
  width: max-content;
  animation: reviews-scroll 80s linear infinite;
}

.reviews-group {
  display: flex;
  gap: 1.5rem;
}

.reviews-marquee:hover .reviews-track {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .reviews-track { animation: none; }
}

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

.reviews-marquee__item { flex: 0 0 auto; width: 480px; }

@media (max-width: 768px) {
  .reviews-marquee__item { width: 85vw; }
}

.reviews-marquee::before,
.reviews-marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 60px;
  z-index: 2;
  pointer-events: none;
}

.reviews-marquee::before { left: 0;  background: linear-gradient(to right, #f1eee8, transparent); }
.reviews-marquee::after  { right: 0; background: linear-gradient(to left, #f1eee8, transparent); }

/* --- Brand Marquee --- */

.marquee {
  position: relative;
  overflow: hidden;
  text-align: center;
  margin: 0 auto;
  width: 100%;
  display: flex;
  align-items: center;
  white-space: nowrap;
  padding-top: 1.5rem;
  padding-bottom: 1.7rem;
}

/* --- Vertical Marquee --- */

.vmarquee {
  position: relative;
  width: 100%;
  max-width: 420px;
  height: 360px;
  margin: 0 auto;
  overflow: hidden;
}

.vmarquee__track {
  display: flex;
  flex-direction: column;
  animation: scrollY 18s linear infinite;
}

.vmarquee__group {
  display: flex;
  flex-direction: column;
}

.vitem {
  appearance: none;
  background: transparent;
  border: 1px solid rgba(0, 0, 0, .15);
  border-radius: 8px;
  padding: 0.25rem 1rem;
  margin: 0.75rem auto;
  font-size: 0.65rem;
  font-family: "acumin-pro", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: rgba(0, 0, 0, 0.75);
  cursor: default;
  white-space: nowrap;
  letter-spacing: 0.15rem;
  text-transform: uppercase;
  font-weight: 600;
  transition: transform 150ms ease, background-color 150ms ease;
}

.vitem:hover {
  background: rgba(0, 0, 0, .05);
  transform: translateY(-1px);
}

@keyframes scrollY {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}

.vmarquee__fade {
  position: absolute;
  left: 0;
  right: 0;
  height: 80px;
  z-index: 2;
}

.vmarquee__fade--top    { top: 0;    background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); }
.vmarquee__fade--bottom { bottom: 0; background: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); }

.vmarquee:hover .vmarquee__track {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .vmarquee__track { animation: none; }
}


/* ==========================================================================
   14) RESPONSIVE OVERRIDES
   ========================================================================== */

/* --- XS (<768px) --- */

@media (max-width: 767.98px) {
  .container,
  .container-sm { max-width: 100% !important; }

  .page-hero    { height: 100%; min-height: 100%; }
  .home-hero    { height: 100%; min-height: 100%; }

  /* Left-align body copy, headings, and eyebrows on mobile for readability */
  main p,
  main p.text-center,
  main .lead,
  main .lead.text-center,
  main .text-center p,
  main .text-center .lead,
  main h2,
  main h2.text-center,
  main .text-center h2,
  main .eyebrow,
  main .eyebrow.text-center,
  main .text-center .eyebrow { text-align: left !important; }

  /* Restore center-alignment for hero headings only; paragraphs stay left-aligned */
  .hero-content h2,
  .hero-content .eyebrow { text-align: center !important; }

  .hero-content-inner        { height: 100%; padding-top: 5rem; padding-bottom: 5rem; }
  .page-content-inner        { padding-top: 5rem; padding-bottom: 5rem; }
  .page-basic-content-inner  { padding-top: 5rem; padding-bottom: 5rem; }
  .hero-content              { margin-top: 0rem; margin-bottom: 0rem; }
  .content-bottom-align      { padding-bottom: 0; }

  #fees .border-grid > [class*="col-"]:last-child .border-card         { border-bottom: 0; }
  #insurance .border-grid > [class*="col-"]:last-child .border-card    { border-bottom: 0; }
  #insurance .border-grid .border-card                                  { border-right: 0; }
}

/* --- SM/MD (768px–991.98px) --- */

@media (min-width: 768px) and (max-width: 991.98px) {
  .container,
  .container-sm { max-width: 100% !important; }

  .navbar-toggler { margin-right: 0; }

  .glass-header {
    margin-left: 2rem;
    margin-right: 2rem;
  }

  .column-spacing { padding-left: 2rem; padding-right: 2rem; }

  #fees .border-grid > [class*="col-"]:nth-child(odd) .border-card           { border-right: 1px solid #ebe9e6; }
  #fees .border-grid > [class*="col-"]:nth-child(even) .border-card          { border-right: 0; }
  #fees .border-grid > [class*="col-"]:nth-last-child(-n + 2) .border-card   { border-bottom: 0; }
  #insurance .border-grid > [class*="col-"]:nth-child(3n) .border-card       { border-right: 0; }
  #insurance .border-grid > [class*="col-"]:nth-last-child(-n + 2) .border-card { border-bottom: 0; }
}

/* --- <=991.98px (Tablets + Mobile) --- */

@media (max-width: 991.98px) {
  .lg-hero-image {
    background-image: url("../img/momandgirl-768.webp");
    background-size: cover;
    height: 30vh;
    background-position: center;
  }

  .img-hero     { height: 30vh; background-position: center; }
  .image-tile   { min-height: 400px; }

  .navbar-spacing    { padding-top: 1rem; }
  .hero-spacing      { padding: 2rem !important; }
  .column-spacing    { padding-left: 2rem; padding-right: 2rem; }
  .card-spacing      { padding: 2rem; }
  .banner-padding    { padding: 2rem; }
  .footer-spacing    { padding-top: 4rem; padding-bottom: 4rem; }
  .shared-content-padding { padding-top: 2rem; padding-bottom: 2rem; }

  #map { height: 50vh; }

  .footer-social {
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    font-size: 32px;
  }

  .newspaper-columns { columns: 1; column-gap: 0; }

  #fees .border-grid .border-card {
    border-right: 0;
    text-align: center;
  }

  .home-hero {
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2));
  }

  .responsive-img-services { background-image: url("../img/beach-mobile.avif"); }
  .responsive-img-about    { min-height: 400px; background-image: url("/img/retinoscopy.avif"); background-position: center; }

  .header-fixed { display: none !important; }

  .bio-image { width: 100%; height: 600px; }

  .glass-header {
    padding: 1rem;
    margin-right: 2rem;
    margin-left: 2rem;
    background: rgba(255, 255, 255, .1);
    width: 100%;
  }

  #table-header-2020club {
    grid-template-columns: 1fr 130px 130px 130px;
  }
}

/* --- >=992px (Desktop) --- */

@media (min-width: 992px) {
  .navbar-spacing  { padding-top: 1rem; }
  .hero-spacing    { padding: 2rem 4rem !important; }
  .footer-spacing  { padding-top: 4rem; padding-bottom: 4rem; }
  .content-padding { padding-block: 8rem; }
  .shared-content-padding { padding-block: 6rem; }
  .banner-padding  { padding-block: 4rem; }
  .card-spacing    { padding: 4rem; }
  .content-inner   { min-height: 65vh; }

  .btn { font-size: 0.9rem; }

  .newspaper-columns { columns: 2; column-gap: 4rem; }

  #fees .fees-copy { min-height: 320px; }

  #fees .border-grid > [class*="col-"]:nth-child(3n) .border-card              { border-right: 0; }
  #fees .border-grid > [class*="col-"]:nth-last-child(-n + 2) .border-card     { border-bottom: 0; }
  #insurance .border-grid > [class*="col-"]:nth-child(4) .border-card,
  #insurance .border-grid > [class*="col-"]:nth-child(8) .border-card          { border-right: 0; }
  #insurance .border-grid > [class*="col-"]:nth-last-child(-n + 3) .border-card { border-bottom: 0; }

  #table-header-2020club {
    grid-template-columns: 1fr 130px 130px 130px;
  }
}

/* --- LG (992px–1399.98px) --- */

@media (min-width: 992px) and (max-width: 1399.98px) {
  .column-spacing { padding-inline: 4rem; }
  .menu-spacing   { margin-left: 24px; }
  .card-spacing   { padding: 4rem; }
  .sante-pin      { width: 30px; height: 30px; }

  .bio-image { max-width: 100%; height: 400px; }

  .glass-header { padding: 1rem 1.5rem; }

  #navbar-desktop-lg .d-flex                   { gap: 0.75rem !important; }
  #navbar-desktop-lg .navbar-nav .nav-item     { padding-right: 0.5rem !important; }
}

/* --- XL (>=1200px) --- */

@media (min-width: 1200px) {
  .sante-navbar-desktop { flex-wrap: nowrap; }
  .sante-navbar-desktop .navbar-nav,
  .sante-navbar-desktop .menu-spacing {
    flex-wrap: nowrap;
    white-space: nowrap;
  }
}

@media (max-width: 1199.98px) {
  .header-fixed { display: none !important; }
}

/* --- XXL (>=1400px) --- */

@media (min-width: 1400px) {
  .navbar-spacing  { padding-inline: 4rem; }
  .column-spacing  { padding-inline: 4rem; }

  .glass-header {
    margin-left: 4rem;
    margin-right: 4rem;
  }

  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl { max-width: 1440px; }

  .container-fluid { max-width: 2000px; }
}

/* --- VS Logo (moved from footer.html inline style) --- */

.vs-logo {
  height: 36px;
}

.vs-logo-mobile {
  height: 52px;
}

/* ==========================================================================
   15) ACCESSIBILITY (ADA / WCAG 2.1)
   Added: focus-visible styles, skip link, reduced-motion for marquee
   ========================================================================== */

/* --- Skip-to-main-content link ---
   Visually hidden until focused by keyboard; reveals at top of viewport.
   Matches the site's cabernet/offwhite color scheme. */

.skip-link {
  position: absolute;
  top: -100%;
  left: 12px;
  background: #3B1208;       /* bg-cabernet */
  color: #EAE4DD;            /* color-offwhite */
  padding: 10px 20px;
  border-radius: 0 0 8px 8px;
  font-size: 0.9rem;
  font-family: "acumin-pro", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  letter-spacing: 0.04em;
  text-decoration: none;
  z-index: 10000;
  transition: top 0.15s ease;
  white-space: nowrap;
}

.skip-link:focus {
  top: 0;
  outline: 2px solid #EAE4DD;
  outline-offset: 2px;
}

/* --- Focus-visible styles ---
   Provides a consistent, visible keyboard focus ring without affecting
   mouse/pointer interactions. Meets WCAG 2.4.7 and 2.4.11. */

:focus-visible {
  outline: 2px solid #3B1208;   /* cabernet — visible on light backgrounds */
  outline-offset: 3px;
  border-radius: 3px;
}

/* Use an offwhite focus ring on dark backgrounds (nav, footer, hero) */
.navbar :focus-visible,
.offcanvas :focus-visible,
.bg-cabernet :focus-visible,
.bg-charcoal :focus-visible,
.bg-black :focus-visible,
.bg-burgundy :focus-visible,
.bg-porto :focus-visible,
.bg-maroon :focus-visible,
.home-hero :focus-visible {
  outline-color: #EAE4DD;
}

/* Remove the default focus ring for pointer/mouse users only */
:focus:not(:focus-visible) {
  outline: none;
}

/* --- Horizontal brand marquee: reduced-motion ---
   The vertical .vmarquee already has a prefers-reduced-motion rule above.
   This covers the horizontal #brands marquee on the homepage. */

@media (prefers-reduced-motion: reduce) {
  .marquee,
  .marquee * {
    animation: none !important;
    transition: none !important;
  }

  /* Also pause AOS animations for users who prefer reduced motion */
  [data-aos] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   16) MOBILE FIXED BOTTOM CTA
   Full-width persistent CTA bar fixed to the bottom of mobile viewports.
   Slides up 400 ms after DOMContentLoaded via JS toggling .is-visible.
   To add to a new page: include the .mobile-cta-bar markup and the
   accompanying <script> block — CSS handles everything else automatically.
   ========================================================================== */

.mobile-cta-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1040;
  padding-top: 24px;
  padding-left: calc(2rem + 12px);
  padding-right: calc(2rem + 12px);
  /* Respect iOS home-indicator / notch safe area */
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
  background: rgba(234, 228, 221, 0.55);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-top: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.08);
  /* Off-screen until JS adds .is-visible */
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.mobile-cta-bar.is-visible {
  transform: translateY(0);
}

/* Push footer down so the fixed bar never covers bottom content */
@media (max-width: 767.98px) {
  body:has(.mobile-cta-bar) footer {
    padding-bottom: 80px;
  }
}

/* Suppress the slide-up for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .mobile-cta-bar {
    transition: none !important;
  }
}