/* ═══════════════════════════════════════════════════════════════════
   ACCESS EYE — site stylesheet (css/webflow.css)
   Merged from the four Claude-designed HTML pages (homepage v10,
   cataract v2, eye exam v1, Dr. Mansouri bio v1) so the site enters the
   standard Glacial pipeline: enqueued as the main-site-style handle,
   nothing inline. Section blocks are verbatim from the design files.
   Nav is reworked onto the Webflow w-nav structure (see NAV below);
   the design's custom mobile overlay was removed in favor of the
   Webflow nav widget driven by webflow.js.
   ═══════════════════════════════════════════════════════════════════ */

:root {
    --cream: #F5EFE6;
    --blush: #F2E8E2;
    /* unified accent — one orange everywhere (client decision) */
    --accent: #f6410f;
    --accent-hover: #d84618;
    /* the same orange, deepened for TEXT-SIZE use: --accent is 3.2:1 on cream,
       under the 4.5:1 WCAG AA body-text minimum. These pass (4.8:1 / 6.0:1). */
    --accent-link: #C0390C;
    --accent-link-hover: #A82F08;
    /* deep tones */
    --ink: #3B2E22; /* warm dark — body text           */
    --crimson: #450909; /* deep red — chips, gradients     */
    --black: #0a0a0a;
    --white: #ffffff;
    --dark-brown: #271911; /* nav + footer                    */
    --muted: #5E4B3C;
    /* nav/footer neutrals */
    --nav-cream: #f5f0e3;
    --beige: #e3c8aa;
    /* rules */
    --rule: rgba(0, 0, 0, 0.10);
    --rule-light: rgba(255, 255, 255, 0.10);
    --line: rgba(59, 46, 34, 0.14);
    /* fonts */
    --display: 'Cormorant Garamond', Georgia, serif;
    --body: 'Jost', -apple-system, sans-serif;
    --r-lg: 16px;
    --r-xl: 24px;
    --r-2xl: 40px;
    --r-pill: 999px;
    --ease: 0.3s ease;
    --ease-slow: 0.65s ease;
}

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

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: var(--body);
    font-size: 1.1rem;
    font-weight: 300;
    line-height: 1.6;
    color: var(--ink);
    background: var(--cream);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--display);
    font-weight: 400;
    line-height: 1.1;
    margin-top: 0;
}

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

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

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

/* type utilities */
.d-xl {
    font-family: var(--display);
    font-size: clamp(3.8rem, 8vw, 9rem);
    font-weight: 300;
    line-height: 0.91;
    letter-spacing: -0.02em;
}

.d-lg {
    font-family: var(--display);
    font-size: clamp(2.8rem, 4vw, 5.5rem);
    font-weight: 300;
    line-height: 0.97;
    letter-spacing: -0.02em;
}

.d-md {
    font-family: var(--display);
    font-size: clamp(2rem, 3.5vw, 3.5rem);
    font-weight: 400;
    line-height: 1.05;
}

/* eyebrow — inner pages use the orange treatment as the base; the homepage
   (body.home) uses the neutral small-caps base with orange only in the
   sections that had it in the design */
.eyebrow {
    font-family: var(--body);
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: .18em;
    color: var(--accent);
    text-transform: uppercase;
}

body.home .eyebrow {
    font-size: 20px;
    letter-spacing: 0.22em;
    font-weight: 500;
    color: inherit;
    opacity: 0.6;
}

body.home .doctors .eyebrow, body.home .team .eyebrow, body.home .testimonials .eyebrow, body.home .independence .eyebrow {
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: .18em;
    color: var(--accent);
    opacity: 1;
}

.wrap {
    max-width: 1580px;
    margin: 0 auto;
    padding-inline: clamp(1.5rem, 5vw, 4rem);
}

/* buttons */
.btn {
    display: inline-block;
    border: 1px solid var(--ink);
    padding: 15px 32px;
    font-size: 1em;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: var(--r-pill);
}

.btn-light {
    border-color: rgba(255, 255, 255, 0.6);
    color: #fff;
}

.arrow-link {
    font-size: 1.1rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--accent);
    padding-bottom: 5px;
    color: var(--accent);
}

.arrow-light {
    font-size: 1.1rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(242, 232, 226, 0.6);
    padding-bottom: 5px;
    color: rgba(242, 232, 226, 0.9);
}

.btn-orange {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    background: var(--accent);
    color: #000;
    padding: .82rem 2rem;
    border-radius: var(--r-pill);
    font-size: 1em;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    transition: var(--ease);
}

.btn-orange:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
}

.btn-white-outline {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    background: transparent;
    color: var(--white);
    padding: .82rem 2rem;
    border-radius: var(--r-pill);
    border: 1.5px solid rgba(255, 255, 255, .35);
    font-size: 1em;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    transition: var(--ease);
}

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

.btn-black-outline {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    background: transparent;
    color: var(--black);
    padding: .82rem 2rem;
    border-radius: var(--r-pill);
    border: 1.5px solid var(--black);
    font-size: 1em;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    transition: var(--ease);
}

.btn-black-outline:hover {
    background: var(--black);
    color: var(--white);
}

/* scroll reveal */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .7s ease, transform .7s ease;
}

.reveal.visible {
    opacity: 1;
    transform: none;
}

.d1 {
    transition-delay: .10s
}

.d2 {
    transition-delay: .20s
}

.d3 {
    transition-delay: .30s
}

.d4 {
    transition-delay: .40s
}

.d5 {
    transition-delay: .50s
}

.d6 {
    transition-delay: .60s
}

@keyframes kb {
    from {
        transform: scale(1)
    }
    to {
        transform: scale(1.07) translate(.4%, .3%)
    }
}

.kb {
    animation: kb 16s ease-in-out infinite alternate;
    will-change: transform;
}

/* ── NAV — Webflow w-nav structure, design skin ─────────────────────
   Structure classes (w-nav, w-nav-brand, w-nav-menu, w-nav-button,
   w-nav-overlay) come from the theme's components.css and are driven by
   webflow.js. The menu ul is .gl-top-level — the class wp_nav_menu()
   emits — so the static export and the WordPress nav render the same. */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
}

/* navigation.css makes .glacial-top-banner a centered flex ROW (with padding
   and a shadow), which seats .nav-top beside .nav and squeezes the menu into
   a vertical stack. The two bars must stack, full width. */
.site-header.glacial-top-banner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    top: 0;
    padding: 0;
    box-shadow: none;
}

.nav-top {
    background: #1f130c;
    display: flex;
    justify-content: flex-end;
    align-items: stretch;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.nav-top-btn {
    display: flex;
    align-items: center;
    gap: .42rem;
    padding: .48rem 1.1rem;
    font-family: var(--body);
    font-size: 1.1rem;
    font-weight: 300;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #f8f8f8;
    text-decoration: none;
    transition: color .2s;
    border-left: 1px solid rgba(255, 255, 255, .07);
    white-space: nowrap;
    line-height: 1;
}

.nav-top-btn:hover {
    color: var(--beige);
}

.nav-top-btn svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    stroke: var(--accent);
    fill: none;
    stroke-width: 1.6;
}

.nav-top-btn--phone {
    color: var(--accent);
    font-weight: 400;
}

.nav-top-btn--phone:hover {
    color: #ff7f5c;
}

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .8rem clamp(0.5rem, 5vw, 2rem);
    background: #271911;
    border-bottom: 1px solid rgba(0, 0, 0, .19);
    transition: var(--ease);
}

.nav.dark {
    background: #271911;
    padding: .8rem clamp(0.5rem, 5vw, 2rem);
    border-bottom: 1px solid rgba(0, 0, 0, .30);
    box-shadow: 0 2px 12px rgba(0, 0, 0, .25);
}

.nav__logo {
    display: flex;
    align-items: center;
}

.nav__logo img {
    height: 60px;
    width: auto;
}

.nav .nav-menu {
    display: flex;
    align-items: center;
}

.gl-top-level {
    display: flex;
    gap: 1.8rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.gl-top-level a {
    font-family: var(--body);
    color: #c2a78e;
    font-size: 1.1rem;
    font-weight: 300;
    letter-spacing: .07em;
    text-transform: uppercase;
    transition: var(--ease);
}

.gl-top-level a:hover {
    color: var(--beige);
}

.gl-top-level a.is-active,
.gl-top-level .current-menu-item > a,
.gl-top-level .current-page-ancestor > a {
    /*color: var(--accent);*/
}

.nav__cta {
    display: flex;
    gap: .65rem;
    align-items: center;
}

.nav__elevate-btn {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--beige);
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    text-decoration: none;
    transition: all .2s;
    padding: .5rem 1.1rem .5rem .5rem;
    border: 1px solid rgba(227, 200, 170, .35);
    border-radius: var(--r-pill);
    white-space: nowrap;
    background: rgba(255, 255, 255, .04);
}

.nav__elevate-btn img {
    height: 24px;
    width: 24px;
    object-fit: cover;
    border-radius: 50%;
    flex-shrink: 0;
}

.nav__elevate-btn:hover {
    color: #f0d9c0;
    border-color: rgba(227, 200, 170, .7);
    background: rgba(255, 255, 255, .08);
}

/* mobile menu button (Webflow w-nav-button — shown by components.css below
   the data-collapse breakpoint; webflow.js toggles it) */
.menu-button {
    color: var(--nav-cream);
    font-size: 30px;
    padding: 12px 14px;
}

.menu-button.w--open {
    background: var(--accent);
    color: #121111;
}

/* mobile menu overlay skin — approximates the design's cream sheet with big
   serif links; core open/close behavior belongs to webflow.js, and the
   final colors are also mapped to glacial_nav_settings at conversion time */
.w-nav-overlay {
    background: rgba(10, 10, 10, .25);
}

.w-nav-overlay .nav-menu {
    display: block;
    background: var(--cream);
    padding: 1rem 1.8rem 3rem;
}

.w-nav-overlay .gl-top-level {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid rgba(0, 0, 0, .08);
}

.w-nav-overlay .gl-top-level li {
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.w-nav-overlay .gl-top-level a {
    display: block;
    padding: 0.9rem 0;
    font-family: var(--display);
    font-size: 1rem;
    font-weight: 300;
    letter-spacing: 0;
    text-transform: none;
    color: var(--dark-brown);
    transition: var(--ease);
}

.w-nav-overlay .gl-top-level a:hover {
    color: var(--accent);
}

/* ── PAGE TITLE — generic inner-page band (→ page-title.php) ─────────
   Derived from the design's split-hero left column (breadcrumb + serif
   H1 on cream). Used on every ordinary inner page; the three designed
   pages keep their bespoke heroes. */
.page-title-band {
    background: var(--cream);
    padding: 80px 0;

    border-bottom: 1px solid var(--line);
}

.page-breadcrumb, .page-title-band #breadcrumbs {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 0.9rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(59, 46, 34, .5);
    margin: 0 0 26px;
    flex-wrap: wrap;
}

.page-breadcrumb a, .page-title-band #breadcrumbs a {
    color: rgba(59, 46, 34, .75);
}

.page-breadcrumb a:hover, .page-title-band #breadcrumbs a:hover {
    color: var(--accent);
}

.page-title-band h1 {
    font-size: clamp(2.2rem, 5vw, 4.9rem);
    font-weight: 300;
    line-height: 1.08;
}

/* generic inner-page content typography (classic/blockified content) */
.page-content {
    padding: 72px 0 120px;
}

.page-content h2 {
    font-size: clamp(1.7rem, 2.4vw, 2.2rem);
    font-weight: 300;
    margin: 32px 0 16px;
}

.page-content p {
    font-size: 1.1rem;
    line-height: 1.9;
    color: var(--muted);
    margin-bottom: 16px;
    max-width: 760px;
}

/* ═══ HOMEPAGE SECTIONS (verbatim from v10) ═══ */

/* ── HERO — v2 full-viewport background video, de-Webflowed ── */
.hero {
    position: relative;
    min-height: 100svh;
    background: var(--black);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
}

.hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(0, 0, 0, .38) 0%, rgba(0, 0, 0, .20) 45%, rgba(0, 0, 0, .55) 100%);
}

.hero__content {
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: 1100px;
    text-align: center;
    padding: 0 clamp(1.5rem, 6vw, 4rem) 9vh;
    background-image: url('../images/logo-icon-transparent.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto;
}

.hero__tagline {
    font-family: var(--display);
    font-size: clamp(2.4rem, 5vw, 4.2rem);
    font-weight: 400;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--white);
    line-height: 1.05;
    margin-bottom: 1.3rem;
    text-shadow: 0 2px 24px rgba(0, 0, 0, .4);
}

.hero__sub {
    font-family: var(--body);
    font-size: clamp(1.1rem, 1.6vw, 1.35rem);
    font-weight: 400;
    color: rgba(255, 255, 255, .92);
    line-height: 1.65;
    max-width: 820px;
    margin: 0 auto;
    text-shadow: 0 1px 12px rgba(0, 0, 0, .4);
}

.hero__sub-em {
    color: var(--accent);
    font-weight: 500;
}

.hero__btns {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2.2rem;
    margin-top: 2.6rem;
    flex-wrap: wrap;
}

.hero-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;

    background: var(--black);
    color: var(--white);
    text-transform: uppercase;
    border-radius: var(--r-pill);
    padding: 1.15rem 1.8rem;
    font-size: 1em;
    letter-spacing: .03em;
    transition: background var(--ease);
}

.hero-btn img {
    width: 14px;
    margin-left: 20px;
}

.hero-btn:hover {
    background: #575757;
}

.hero-btn--accent {
    background: var(--accent);
    color: #000;
}

.hero-btn--accent:hover {
    background: #ff7f5c;
}

.hero-btn strong {
    font-weight: 500;
}

/* ── ELEVATE (v5) ── */
.elevate {
    min-height: 80svh;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: var(--dark-brown); /* fallback while image loads */
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    overflow: hidden;
}

/* v8: transform-based parallax layer (replaces background-attachment:fixed,
   which is janky/disabled on iOS Safari). Oversized + translated on scroll. */
.elevate__bg {
    position: absolute;
    left: 0;
    right: 0;
    top: -12%;
    height: 124%;
    z-index: 0;
    background: url('../images/elevate-room.jpg') center/cover;
    will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
    .elevate__bg {
        top: 0;
        height: 100%;
    }
}

.elevate::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(6, 3, 1, 0.95) 0%, rgba(6, 3, 1, 0.6) 50%, rgba(6, 3, 1, 0.3) 100%);
    z-index: 1;
}

/* Logo: massive centred element, IS the visual hero */
.elevate img.elev-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.86);
    width: 72%;
    max-width: 980px;
    height: auto;
    opacity: 0;
    transition: opacity 1.4s ease, transform 1.6s cubic-bezier(0.16, 1, 0.3, 1);
    filter: drop-shadow(0 8px 40px rgba(0, 0, 0, 0.5));
    z-index: 2;
    pointer-events: none;
}

.elevate img.elev-logo.logo-visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* Text sits at bottom over the logo */
.elevate-text {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 48px;
    padding: 64px 56px 72px;
    position: relative;
    z-index: 3;
    background: linear-gradient(0deg, rgba(6, 3, 1, 0.96) 0%, transparent 100%);
}

.elevate-eyebrow {
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 500;
    color: rgba(242, 232, 226, 0.45);
    margin-bottom: 16px;
}

.elevate h2 {
    color: #fff;
    font-size: clamp(32px, 3.8vw, 52px);
    font-weight: 300;
    margin-bottom: 20px;
    font-style: italic;
    line-height: 1.15;
}

.elevate-col2 {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.elevate p {
    color: rgba(255, 255, 255, 0.78);
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1.85;
    margin-bottom: 24px;
}

.elevate ul {
    list-style: none;
    margin-bottom: 28px;
}

.elevate li {
    color: rgba(255, 255, 255, 0.78);
    font-size: 1.1rem;
    line-height: 2.2;
    padding-left: 18px;
    position: relative;
}

.elevate li::before {
    content: "—";
    position: absolute;
    left: 0;
    color: rgba(242, 232, 226, 0.35);
}

.elevate-caption {
    position: absolute;
    bottom: 28px;
    right: 56px;
    font-size: 1.1rem;
    color: rgba(242, 232, 226, 0.35);
    letter-spacing: 0.1em;
    z-index: 4;
}

/* ── SERVICES — v5 grid, centered header, v2-style additional services ── */
.services {
    padding: 120px 56px;
    background: var(--cream);
}

.services-header {
    text-align: center;
    margin-bottom: 72px;
    padding-bottom: 48px;
    border-bottom: 1px solid var(--line);
}

.services-header h2 {
    font-size: clamp(38px, 5vw, 64px);
    max-width: 640px;
    margin: 0 auto;
    text-wrap: balance;
}

.service-grid {
    display: grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto auto;
    gap: 3px;
}

.service-tile {
    position: relative;
    overflow: hidden;
}

.service-tile:nth-child(1) {
    grid-row: 1;
    grid-column: 1;
}

.service-tile:nth-child(2) {
    grid-row: 1;
    grid-column: 2;
}

.service-tile:nth-child(3) {
    grid-row: 2;
    grid-column: 1;
}

.service-tile:nth-child(4) {
    grid-row: 2;
    grid-column: 2;
}

.service-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 4/3;
    transition: transform 0.7s ease;
    display: block;
}

.service-tile:hover img {
    transform: scale(1.04);
}

.service-tile-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(30, 18, 10, 0.75) 0%, rgba(30, 18, 10, 0) 55%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 32px;
}

.service-tile-overlay h3 {
    color: #fff;
    font-size: clamp(22px, 2.2vw, 30px);
    margin-bottom: 10px;
}

.service-tile-overlay p {
    color: rgba(255, 255, 255, 0.92);
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1.6;
    max-width: 360px;
    margin-bottom: 18px;
}

/* additional services — explicit link list like v2, centered */
.services-more {
    padding: 56px;
    background: var(--blush);
    border-top: 1px solid var(--line);
    text-align: center;
}

.services-more__label {
    font-family: var(--body);
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: 26px;
}

.services-more__list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px 44px;
}

.services-more__list a {
    font-size: 1.1rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-weight: 400;
    color: var(--ink);
    border-bottom: 1px solid rgba(59, 46, 34, .25);
    padding-bottom: 4px;
    transition: color .25s ease, border-color .25s ease;
}

.services-more__list a:hover {
    color: var(--accent);
    border-color: var(--accent);
}

/* ── DOCTORS — v3 two-doc spotlight ── */
.doctors {
    background: var(--cream);
    padding-top: 7rem;
}

.doctors__header {
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.doctors__intro {
    font-size: 1.125rem;
    color: var(--muted);
    font-weight: 400;
    line-height: 1.75;
    max-width: 620px;
    margin-bottom: 4rem;
}

.doctor-row {
    display: grid;
    grid-template-columns:1fr 1fr;
    border-top: 1px solid var(--rule);
}

.doctor-row--flip .doctor-row__photo {
    order: 2;
}

.doctor-row--flip .doctor-row__content {
    order: 1;
}

.doctor-row__photo {
    aspect-ratio: 4/3;
    overflow: hidden;
    background: #ddd;
    filter: grayscale(1);
    transition: filter var(--ease-slow);
}

.doctor-row__photo img,
.doctor-row__photo video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s ease;
    object-position: top center;
}

.doctor-row:hover .doctor-row__photo {
    filter: grayscale(.20);
}

.doctor-row:hover .doctor-row__photo img,
.doctor-row:hover .doctor-row__photo video {
    transform: scale(1.03);
}

.doctor-row__content {
    padding: 4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--white);
}

.doctor-row--flip .doctor-row__content {
    background: var(--blush);
}

.doctor-row__eyebrow {
    margin-bottom: .75rem;
}

.doctor-row__name {
    font-family: var(--display);
    font-size: clamp(2rem, 3vw, 3rem);
    font-weight: 300;
    color: var(--black);
    margin-bottom: .35rem;
    line-height: 1.05;
}

.doctor-row__title {
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 1.2rem;
}

.doctor-row__bio {
    font-size: 1.125rem;
    color: var(--muted);
    line-height: 1.70;
    font-weight: 400;
    margin-bottom: 1.5rem;
}

.doctor-row__awards {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-bottom: 1.8rem;
}

.doctor-award {
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--crimson);
    background: rgba(69, 9, 9, .07);
    padding: .2rem .6rem;
    border-radius: var(--r-pill);
}

.doctor-row__link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--black);
}

.doctor-row__link::after {
    content: '→';
    color: var(--accent);
}

/* ── STATS — v5 "by the numbers" tiles ── */
.stats {
    display: grid;
    grid-template-columns:repeat(4, 1fr);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--cream);
    position: relative;
    overflow: hidden;
}

.stats-bg-mark {
    position: absolute;
    right: -2%;
    top: 50%;
    transform: translateY(-50%);
    width: 38%;
    opacity: 0.05;
    pointer-events: none;
    will-change: transform;
}

.stat {
    padding: 72px 48px;
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s ease, transform 0.7s ease;
    position: relative;
}

.stat:last-child {
    border-right: none;
}

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

.stat:nth-child(2) {
    transition-delay: 0s;
}

.stat:nth-child(3) {
    transition-delay: 0.14s;
}

.stat:nth-child(4) {
    transition-delay: 0.28s;
}

.stat:nth-child(5) {
    transition-delay: 0.42s;
}

.stat-rule {
    width: 40px;
    height: 2px;
    background: var(--accent);
    margin-bottom: 28px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s ease;
}

.stat.visible .stat-rule {
    transform: scaleX(1);
}

.stat:nth-child(3).visible .stat-rule {
    transition-delay: 0.14s;
}

.stat:nth-child(4).visible .stat-rule {
    transition-delay: 0.28s;
}

.stat:nth-child(5).visible .stat-rule {
    transition-delay: 0.42s;
}

.stat-num {
    font-family: var(--display);
    font-style: italic;
    font-size: clamp(52px, 5.5vw, 80px);
    color: var(--accent);
    line-height: 1;
    margin-bottom: 16px;
}

.stat-desc {
    font-size: 1.1rem;
    letter-spacing: 0.03em;
    opacity: 0.82;
    font-weight: 400;
    line-height: 1.55;
    max-width: 200px;
}

/* ── TEAM — v3 staff gallery carousel ── */
.team {
    background: var(--cream);
    padding-top: 6rem;
}

.team__header {
    margin-bottom: 1rem;
}

.staff-gallery {
    overflow: hidden;
    margin: 2.5rem 0 0;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

.staff-gallery__track {
    display: flex;
    gap: 1.5rem;
    padding: 0 8vw 2rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.staff-gallery__track::-webkit-scrollbar {
    display: none;
}

.staff-frame {
    width: 200px;
    flex-shrink: 0;
    border-radius: var(--r-xl);
    overflow: hidden;
    background: var(--blush);
    filter: grayscale(.5);
    transition: filter var(--ease-slow);
}

.staff-frame:hover {
    filter: grayscale(0);
}

.staff-frame img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    object-position: top;
}

.staff-frame__label {
    padding: .85rem 1.1rem;
    background: var(--white);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--black);
    line-height: 1.3;
}

.staff-frame__label span {
    font-size: 1.1rem;
    color: var(--muted);
    font-weight: 400;
    display: block;
}

.staff-gallery__nav {
    display: flex;
    gap: .75rem;
    justify-content: flex-end;
    margin-top: 1.25rem;
}

.staff-gallery__arrow {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1.5px solid var(--black);
    background: transparent;
    color: var(--black);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--ease);
}

.staff-gallery__arrow:hover {
    background: var(--black);
    color: var(--white);
}

.staff-gallery__arrow:disabled {
    opacity: .25;
    cursor: default;
    pointer-events: none;
}

.team__footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
    padding: 3rem 0 4rem;
}

.team__footer-text {
    font-size: 1.125rem;
    color: var(--muted);
    font-weight: 400;
    line-height: 1.65;
    max-width: 580px;
}

/* ── OPTICAL — v5 two-column + v3 small-pics strip ── */
.optical {
    background: var(--cream);
}

.optical-main {
    display: grid;
    grid-template-columns:1fr 1fr;
    min-height: 92vh;
}

.optical-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 100px 72px;
    background: var(--ink);
    color: var(--cream);
    position: relative;
    overflow: hidden;
}

.optical-mark {
    position: absolute;
    bottom: -10%;
    left: -8%;
    width: 52%;
    opacity: 0.05;
    filter: brightness(0) invert(1);
    pointer-events: none;
    z-index: 0;
}

.optical-text > * {
    position: relative;
    z-index: 1;
}

.optical-text > .optical-mark {
    z-index: 0;
}

.optical-text .eyebrow {
    color: rgba(242, 232, 226, 0.55);
    margin-bottom: 24px;
}

.optical-text h2 {
    font-size: clamp(34px, 3.8vw, 52px);
    color: var(--cream);
    font-weight: 300;
    line-height: 1.2;
    margin-bottom: 28px;
}

.optical-text p {
    font-size: 18px;
    line-height: 1.85;
    color: rgba(242, 232, 226, 0.92);
    font-weight: 400;
    margin-bottom: 28px;
    max-width: 460px;
}

.optical-brands {
    display: flex;
    gap: 0;
    flex-wrap: wrap;
    margin-bottom: 32px;
    border-top: 1px solid rgba(242, 232, 226, 0.15);
    padding-top: 28px;
}

.optical-brand {
    font-family: var(--display);
    font-style: italic;
    font-size: 1.25rem;
    color: rgba(242, 232, 226, 0.65);
    padding-right: 20px;
    margin-right: 20px;
    border-right: 1px solid rgba(242, 232, 226, 0.15);
    line-height: 1;
}

.optical-brand:last-child {
    border-right: none;
    padding-right: 0;
    margin-right: 0;
}

.optical-sub {
    font-size: 1.1rem;
    line-height: 1.8;
    color: rgba(242, 232, 226, 0.8);
    font-weight: 400;
    max-width: 440px;
    margin-bottom: 36px;
    border-top: 1px solid rgba(242, 232, 226, 0.1);
    padding-top: 24px;
}

.optical-photo {
    position: relative;
    overflow: hidden;
}

.optical-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

/* small pics strip (v3) */
.optical__gallery {
    overflow: hidden;
    padding: 4rem 0 4.5rem;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 14%, black 86%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 14%, black 86%, transparent 100%);
}

.optical__gallery-track {
    display: flex;
    gap: 1.5rem;
    padding: 0 10vw;
    overflow-x: auto;
    scrollbar-width: none;
}

.optical__gallery-track::-webkit-scrollbar {
    display: none;
}

.optical__frame {
    width: 240px;
    height: 320px;
    flex-shrink: 0;
    border-radius: var(--r-xl);
    overflow: hidden;
    background: #ccc;
    filter: grayscale(.30);
    transition: filter var(--ease-slow), transform var(--ease);
}

.optical__frame:hover {
    filter: grayscale(0);
    transform: scale(1.02);
}

.optical__frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ── TESTIMONIALS (v3) ── */
.testimonials {
    position: relative;
    overflow: hidden;
    background: var(--black);
    padding: 7rem 0;
}

.testimonials::before {
    content: "Q1WAH8NC&FSPB2V5LR3KUYAH4EIZ3MOT2V5LRQ1WAH4E1ZQ1WAH8NC&FSPBJ8NC&FSPB2V5LR3MOT2V5LR3KUYAH67DH9CKUYAH67DH9CKUY67DH9CQ1WAH4E1ZQ1WAH8NC&FSPBJ8NC&FSPB2V5LR3MOT2V5LR3KUYAH67DH9CKUY67DH9CKUYAH4E1ZQ1WAH8NC&FSPBJ8NC&FSPB2V5LR3MOT2V5LR3KUYAH67DH9CKUY67DH9CQ1WAH8NC&FSPB2V5LRKUY67DH9C3MOT2V5LRQ1WAH4E1ZQ1WAH8NC&FSPBJ8NC&FSPB2V5LR3MOT2V5LR3KUYAH67DH9CKUYAH67DH9CKUY67DH9CQ1WAH4E1ZQ1WAH8NC&FSPBJ8NC&FSPB2V5LR3MOT2V5LR3KUYAH67DH9CKUY67DH9CKUYAH4E1ZQ1WAH8NC&FSPBJ8NC&FSPB2V5LR3MOT2V5LR3KUYAH67DH9CKUY67DH9CQ1WAH8NC&FSPB2V5LRKUY67DH9C3MOT2V5LRQ1WAH4E1ZQ1WAH8NC&FSPBJ8NC&FSPB2V5LR3MOT2V5LR3KUYAH67DH9CKUYAH67DH9CKUY67DH9CQ1WAH4E1ZQ1WAH8NC&FSPBJ8NC&FSPB2V5LR3MOT2V5LR3KUYAH67DH9CKUY67DH9C";
    position: absolute;
    inset: -2rem;
    font-family: var(--display);
    font-size: clamp(4.5rem, 8vw, 8rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: .03em;
    color: rgba(255, 255, 255, .04);
    word-break: break-all;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
    user-select: none;
}

.testimonials .wrap {
    position: relative;
    z-index: 1;
}

.testimonials__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 3.5rem;
}

.testimonials__headline {
    color: var(--white);
}

.testimonials__grid {
    display: grid;
    grid-template-columns:1.4fr 1fr;
    gap: 1.5rem;
    align-items: start;
}

.video-card {
    position: relative;
    border-radius: var(--r-xl);
    overflow: hidden;
    aspect-ratio: 4/3;
    background: #1a1a1a;
    cursor: pointer;
}

.video-card__poster {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(.6) brightness(.75);
}

.video-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .75) 0%, transparent 55%);
}

.video-card__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -60%);
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 1.4rem;
    box-shadow: 0 0 0 12px rgba(246, 65, 15, .15);
    transition: var(--ease);
}

.video-card__play::after {
    content: '▶';
    padding-left: 4px;
}

.video-card:hover .video-card__play {
    transform: translate(-50%, -60%) scale(1.08);
}

.video-card__caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.75rem;
}

.video-card__tag {
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: .4rem;
}

.video-card__quote {
    font-family: var(--display);
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--white);
    line-height: 1.3;
    margin-bottom: .75rem;
}

.video-card__name {
    font-size: 1.1rem;
    font-weight: 500;
    color: rgba(255, 255, 255, .60);
}

.quote-stack {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.quote-card {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: var(--r-xl);
    padding: 2rem;
    transition: var(--ease);
}

.quote-card:hover {
    background: rgba(255, 255, 255, .07);
    border-color: rgba(255, 255, 255, .14);
}

.quote-card__stars {
    display: flex;
    gap: 3px;
    margin-bottom: 1rem;
    font-size: 1.1rem;
    color: var(--accent);
}

.quote-card__text {
    font-family: var(--display);
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--white);
    line-height: 1.5;
    margin-bottom: 1.2rem;
}

.quote-card__author {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, .40);
}

/* ── QUOTE BLOCK — directors (v3) ── */
.quote-block {
    background: linear-gradient(135deg, var(--dark-brown) 0%, #3d0d0d 55%, var(--crimson) 100%);
    overflow: hidden;
}

.quote-block__split {
    display: grid;
    grid-template-columns:45fr 55fr;
    min-height: 500px;
}

.quote-block__photo {
    position: relative;
    overflow: hidden;
    background: var(--dark-brown);
}

.quote-block__photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.quote-block__photo-overlay {
    position: absolute;
    inset: 0;
}

.quote-block__content {
    padding: 5rem clamp(3rem, 6vw, 7rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: black;
}

.quote-block__mark {
    font-family: var(--display);
    font-size: 5rem;
    line-height: .8;
    color: var(--accent);
    margin-bottom: 1.5rem;
    display: block;
    letter-spacing: -.1em;
}

.quote-block__text {
    font-family: var(--display);
    font-size: clamp(1.5rem, 2.4vw, 2.3rem);
    font-style: italic;
    font-weight: 300;
    color: var(--white);
    line-height: 1.5;
    margin-bottom: 1.2rem;
}

.quote-block__text2 {
    font-family: var(--display);
    font-size: clamp(1.25rem, 1.9vw, 1.8rem);
    font-style: italic;
    font-weight: 300;
    color: rgba(255, 255, 255, .55);
    line-height: 1.55;
    margin-bottom: 2.2rem;
}

.quote-block__rule {
    width: 40px;
    height: 1px;
    background: var(--accent);
    margin-bottom: 1.5rem;
}

.quote-block__attr {
    font-size: 1.1rem;
    color: var(--beige);
    letter-spacing: .05em;
}

/* ── LOCATIONS — v5 5-tile photo grid ── */
.locations {
    padding: 140px 56px 0;
    background: var(--cream);
}

.locations-header {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 80px;
}

.locations-header .eyebrow {
    margin-bottom: 20px;
}

.locations-header h2 {
    font-size: clamp(34px, 4.4vw, 56px);
    margin-bottom: 22px;
}

.locations-header p {
    font-size: 18px;
    line-height: 1.8;
    opacity: 0.92;
    font-weight: 400;
    margin-bottom: 36px;
}

.loc-grid {
    display: grid;
    grid-template-columns:repeat(6, 1fr);
    gap: 3px;
    margin-top: 80px;
}

.loc-tile {
    position: relative;
    overflow: hidden;
}

.loc-tile img {
    width: 100%;
    height: 360px;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.7s ease;
}

.loc-tile:hover img {
    transform: scale(1.05);
}

.loc-tile-info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    padding: 16px 18px 18px;
    transition: background .3s ease;
}

.loc-tile:hover .loc-tile-info {
    background: rgba(0, 0, 0, 0.72);
}

.loc-tile-info h3 {
    color: #fff;
    font-size: clamp(20px, 1.9vw, 26px);
    margin-bottom: 6px;
}

.loc-tile-info .city {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.1rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 4px;
    font-weight: 400;
}

.loc-tile-info .hours {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.1rem;
    font-weight: 400;
}

.loc-tile-elevate {
    position: absolute;
    top: 14px;
    left: 14px;
}

.loc-tile-elevate img {
    height: 20px;
    width: auto;
    opacity: 0.9;
}

/* ── INDEPENDENCE — "why it matters" (v3) ── */
.independence {
    background: var(--cream);
    padding: 7rem 0;
    border-top: 1px solid var(--rule);
}

.independence__inner {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 7rem;
    align-items: center;
}

.independence__headline {
    color: var(--black);
    margin-bottom: .5rem;
}

.independence__video {
    position: relative;
    aspect-ratio: 16/9;
    width: 100%;
    margin-bottom: 2rem;
    border-radius: var(--r-xl);
    overflow: hidden;
}

.independence__video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.independence__body {
    color: var(--muted);
    font-weight: 400;
    line-height: 1.80;
    font-size: 1.125rem;
}

.independence__body + .independence__body {
    margin-top: 1rem;
}

.independence__link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--black);
    margin-top: 2rem;
}

.independence__link::after {
    content: '→';
    color: var(--accent);
}

/* ── WELCOME BAND (v5) ── */
.welcome {
    background: var(--blush);
    padding: 96px 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 36px;
    text-align: center;
    border-top: 1px solid var(--line);
}

.welcome-logo {
    width: 110px;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 4px 20px rgba(59, 46, 34, 0.12);
}

.welcome-text .eyebrow {
    margin-bottom: 18px;
}

.welcome-text p {
    font-size: 19px;
    font-weight: 400;
    line-height: 1.9;
    opacity: 0.92;
    max-width: 780px;
    margin: 0 auto;
}

.welcome-text strong {
    font-weight: 500;
    color: var(--ink);
}

/* ═══ CATARACT SURGERY SECTIONS (verbatim from inner v2) ═══ */

/* ── HERO v2 — light editorial split, cream left / photo right ── */
.svc-hero2 {
    margin-top: var(--site-header-height);
    display: grid;
    grid-template-columns:0.85fr 1.15fr;
    height: calc(100vh - var(--site-header-height));
}

.svc-hero2__left {
    background: var(--cream);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 200px 64px 72px;
    position: relative;
    overflow: hidden;
}

.svc-hero2__mark {
    position: absolute;
    top: 10%;
    left: -18%;
    width: 85%;
    opacity: .06;
    pointer-events: none;
    z-index: 0;
}

.svc-hero2__left > * {
    position: relative;
    z-index: 1;
}

.svc-breadcrumb {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 0.9rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(59, 46, 34, .5);
    margin-bottom: 26px;
}

.svc-breadcrumb a {
    color: rgba(59, 46, 34, .75);
}

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

.svc-hero2 h1 {
    font-size: clamp(2.6rem, 4.6vw, 4.4rem);
    font-weight: 300;
    line-height: 1.03;
    margin-bottom: 24px;
}

.svc-hero2__sub {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--muted);
    max-width: 420px;
    margin-bottom: 32px;
}

.svc-hero2__actions {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

.svc-review2 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(59, 46, 34, .25);
    padding: 8px 16px;
    font-size: 1.1rem;
    color: var(--ink);
    border-radius: var(--r-pill);
}

.svc-review2 .star {
    color: var(--accent);
}

.svc-hero2__right {
    position: relative;
    overflow: hidden;
}

.svc-hero2__right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
}

.svc-hero2__badge {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(39, 25, 17, .82);
    backdrop-filter: blur(6px);
    padding: 18px 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.svc-hero2__badge span {
    font-size: 0.9rem;
    color: rgba(242, 232, 226, .85);
    letter-spacing: .1em;
    text-transform: uppercase;
    text-align: center;
}

.svc-hero2__badge-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(242, 232, 226, .4);
}

/* ── WHAT IS A CATARACT ── */
.svc-explain {
    padding: 120px 0;
    background: var(--cream);
}

.svc-explain__grid {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 80px;
    align-items: center;
}

.svc-explain h2 {
    font-size: clamp(2rem, 3.2vw, 3rem);
    font-weight: 300;
    margin-bottom: 24px;
    line-height: 1.15;
}

.svc-explain p {
    font-size: 1.15rem;
    line-height: 1.85;
    color: var(--muted);
    margin-bottom: 18px;
    max-width: 520px;
}

.svc-lens-compare {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    background: var(--blush);
    border-radius: var(--r-xl);
    padding: 48px 32px;
}

.svc-lens-compare__eye {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--display);
    font-style: italic;
    font-size: 1.25rem;
    color: var(--muted);
    text-align: center;
    line-height: 1.3;
}

.svc-lens-compare__eye--cloudy {
    background: radial-gradient(circle at 35% 35%, #cfc4ab, #a89f88 70%);
    box-shadow: inset 0 0 24px rgba(59, 46, 34, .45);
}

.svc-lens-compare__eye--clear {
    background: radial-gradient(circle at 35% 35%, #fdfaf3, #e7dcc4 70%);
    box-shadow: 0 8px 24px rgba(59, 46, 34, .18);
}

.svc-lens-compare__arrow {
    font-size: 1.6rem;
    color: var(--accent);
}

/* ── PROCEDURE STEPS ── */
.svc-steps {
    padding: 100px 0;
    background: var(--cream);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.svc-steps__header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 64px;
}

.svc-steps__header h2 {
    font-size: clamp(2rem, 3.2vw, 2.8rem);
    font-weight: 300;
    margin-top: 16px;
}

.svc-step-grid {
    display: grid;
    grid-template-columns:repeat(4, 1fr);
}

.svc-step {
    padding: 0 32px;
    border-right: 1px solid var(--line);
}

.svc-step:last-child {
    border-right: none;
}

.svc-step-num {
    font-family: var(--display);
    font-style: italic;
    font-size: clamp(2.4rem, 3vw, 3.2rem);
    color: var(--accent);
    margin-bottom: 16px;
    display: block;
}

.svc-step h3 {
    font-size: 1.25rem;
    font-weight: 500;
    margin-bottom: 10px;
}

.svc-step p {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--muted);
}

/* ── LENS IMPLANTS — spec-sheet row layout ── */
.svc-lenses {
    padding: 120px 0;
    background: var(--blush);
}

.svc-lenses__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 56px;
    padding-bottom: 36px;
    border-bottom: 1px solid var(--line);
}

.svc-lenses__header h2 {
    font-size: clamp(2rem, 3.2vw, 2.8rem);
    font-weight: 300;
    margin-top: 16px;
    max-width: 760px;
}

.svc-lens-table {
    border-top: 1px solid var(--line);
}

.svc-lens-row {
    display: grid;
    grid-template-columns:1.1fr 2fr 1.2fr;
    gap: 40px;
    padding: 36px 24px;
    border-bottom: 1px solid var(--line);
    transition: background .2s ease;
}

.svc-lens-row:hover {
    /*background: rgba(59, 46, 34, .03);*/
}

.svc-lens-row--featured {
    background: var(--dark-brown);
    border-bottom-color: transparent;
    border-radius: var(--r-xl);
    color: var(--nav-cream);
}

.svc-lens-row__name {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gl-split {
    margin-bottom: 30px;
}

.svc-lens-row__name h3 {
    font-size: 2rem;
    font-weight: 400;
}

.svc-lens-row__tag {
    align-self: flex-start;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--accent);
    background: rgba(246, 65, 15, .1);
    padding: 4px 12px;
    border-radius: var(--r-pill);
}

.svc-lens-row--featured .svc-lens-row__tag {
    background: rgba(255, 255, 255, .1);
    color: var(--beige);
}

.svc-lens-row p {
    font-size: 1.1rem;
    line-height: 1.75;
}

.svc-lens-row--featured p {
    color: rgba(255, 255, 255, .82);
}

.svc-lens-row__best {
    font-size: 1.1rem;
    line-height: 1.6;
}

.svc-lens-row__best strong {
    display: block;
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--ink);
}

.svc-lens-row--featured .svc-lens-row__best strong {
    color: var(--beige);
}

.svc-lens-row--featured .svc-lens-row__best {
    color: rgba(255, 255, 255, .65);
}

/* ── PATIENT STORIES ── */
.svc-stories {
    padding: 120px 0;
    background: var(--black);
}

.svc-stories__header {
    margin-bottom: 56px;
}

.svc-stories__header h2 {
    color: #fff;
    font-size: clamp(2rem, 3.2vw, 2.8rem);
    font-weight: 300;
    margin-top: 16px;
}

.svc-story-grid {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 28px;
}

.svc-story-video {
    position: relative;
    border-radius: var(--r-xl);
    overflow: hidden;
    aspect-ratio: 16/9;
    background: #111;
}

.svc-story-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.svc-quote-card {
    grid-column: 1/-1;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: var(--r-xl);
    padding: 36px 40px;
}

.svc-quote-card__stars {
    color: var(--accent);
    letter-spacing: 2px;
    margin-bottom: 14px;
}

.svc-quote-card p {
    font-family: var(--display);
    font-size: 1.35rem;
    font-style: italic;
    color: #fff;
    line-height: 1.5;
    margin-bottom: 14px;
}

.svc-quote-card__author {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, .45);
}

/* ── FAQ — two-column ── */
.svc-faq {
    padding: 120px 0;
    background: var(--cream);
}

.svc-faq__header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 56px;
}

.svc-faq__header h2 {
    font-size: clamp(2rem, 3.2vw, 2.8rem);
    font-weight: 300;
    margin-top: 16px;
}

.svc-faq-list {
    max-width: 1080px;
    margin: 0 auto;
    columns: 2;
    column-gap: 56px;
}

.svc-faq-item {
    border-bottom: 1px solid var(--line);
    break-inside: avoid;
    margin-bottom: 4px;
}

.svc-faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 22px 4px;
    cursor: pointer;
    list-style: none;
    font-family: var(--display);
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--ink);
}

.svc-faq-item summary::-webkit-details-marker {
    display: none;
}

.svc-faq-item summary::after {
    content: '+';
    font-family: var(--body);
    font-size: 1.3rem;
    color: var(--accent);
    flex-shrink: 0;
    transition: transform .25s ease;
}

.svc-faq-item[open] summary::after {
    transform: rotate(45deg);
}

.svc-faq-item__body {
    padding: 0 4px 22px;
    font-size: 1.1rem;
    line-height: 1.75;
    color: var(--muted);
}

/* ── LOCATIONS MINI ── */
.svc-locations {
    padding: 120px 0;
    background: var(--blush);
}

.svc-locations__inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 32px;
    margin-bottom: 48px;
    flex-wrap: wrap;
}

.svc-locations__inner h2 {
    font-size: clamp(2rem, 3.2vw, 2.8rem);
    font-weight: 300;
    margin-top: 16px;
    max-width: 520px;
}

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

.svc-loc-tile {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4/3;
}

.svc-loc-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s ease;
}

.svc-loc-tile:hover img {
    transform: scale(1.05);
}

.svc-loc-tile-info {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(22, 12, 6, .82) 0%, rgba(22, 12, 6, .05) 55%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 22px;
}

.svc-loc-tile-info h3 {
    color: #fff;
    font-size: 1.3rem;
    margin-bottom: 4px;
}

.svc-loc-tile-info a {
    color: rgba(255, 255, 255, .75);
    font-size: 1.1rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255, 255, 255, .3);
    padding-bottom: 2px;
}

/* Elevate band — inner-page variant (the cataract page used slightly
   smaller type + logo than the homepage) */
body:not(.home) .elevate h2 {
    font-size: clamp(28px, 3.4vw, 44px);
}

body:not(.home) .elevate img.elev-logo {
    width: 64%;
    max-width: 820px;
}

body:not(.home) .elevate p {
    font-size: 1.1rem;
}

/* ═══ DR. MANSOURI BIO SECTIONS (verbatim from inner v1) ═══ */

/* ── DOC HERO — photo split, full scale ── */
.doc-hero {
    display: grid;
    margin-top: var(--site-header-height);
    grid-template-columns:0.9fr 1.1fr;
    height: calc(80vh - var(--site-header-height));
}

.doc-hero__photo {
    position: relative;
    overflow: hidden;
    background: #ddd;
}

.doc-hero__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.doc-hero__content {
    background: var(--cream);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 200px 64px 72px;
}

.doc-breadcrumb {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 1.1rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(59, 46, 34, .5);
    margin-bottom: 26px;
    flex-wrap: wrap;
}

.doc-breadcrumb a {
    color: rgba(59, 46, 34, .75);
}

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

.doc-hero__eyebrow {
    margin-bottom: 16px;
}

.doc-hero h1 {
    font-size: clamp(2.6rem, 4.4vw, 4.2rem);
    font-weight: 300;
    line-height: 1.05;
    margin-bottom: 16px;
}

.doc-hero__role {
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 24px;
}

.doc-hero__sub {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--muted);
    max-width: 480px;
    margin-bottom: 32px;
}

.doc-hero__actions {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

/* ── CREDENTIALS STRIP ── */
.doc-creds {
    display: grid;
    grid-template-columns:repeat(4, 1fr);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--cream);
}

.doc-cred {
    padding: 44px 32px;
    border-right: 1px solid var(--line);
}

.doc-cred:last-child {
    border-right: none;
}

.doc-cred-rule {
    width: 32px;
    height: 2px;
    background: var(--accent);
    margin-bottom: 20px;
}

.doc-cred h3 {
    font-family: var(--display);
    font-style: italic;
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: 8px;
    line-height: 1.2;
}

.doc-cred p {
    font-size: 1.1rem;
    color: var(--muted);
    letter-spacing: .02em;
    line-height: 1.5;
}

/* ── BIO BODY ── */
.doc-bio {
    padding: 50px 0;
    background: var(--cream);
}

.doc-bio__grid {
    display: grid;
    grid-template-columns:1.6fr 1fr;
    gap: 80px;
}

.doc-bio__section {
    margin-bottom: 64px;
}

.doc-bio__section:last-child {
    margin-bottom: 0;
}

.doc-bio__section .eyebrow {
    display: block;
    margin-bottom: 20px;
}

.doc-bio__section h2 {
    font-size: clamp(1.7rem, 2.4vw, 2.2rem);
    font-weight: 300;
    margin-bottom: 20px;
}

.doc-bio__section p {
    font-size: 1.1rem;
    line-height: 1.9;
    color: var(--muted);
    margin-bottom: 16px;
    max-width: 640px;
}

.doc-timeline {
    border-top: 1px solid var(--line);
}

.doc-timeline-item {
    display: grid;
    grid-template-columns:0.9fr 2fr;
    gap: 24px;
    padding: 26px 0;
    border-bottom: 1px solid var(--line);
}

.doc-timeline-item__place {
    font-family: var(--display);
    font-style: italic;
    font-size: 1.25rem;
    color: var(--ink);
}

.doc-timeline-item__loc {
    display: block;
    font-family: var(--body);
    font-style: normal;
    font-size: 1.1rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 4px;
}

.doc-timeline-item p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--muted);
    margin: 0;
}

.doc-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.doc-tag {
    font-size: 1.1rem;
    font-weight: 500;
    letter-spacing: .02em;
    color: var(--ink);
    background: var(--blush);
    padding: 9px 18px;
    border-radius: var(--r-pill);
}

.doc-sidebar {
    background: var(--dark-brown);
    color: var(--nav-cream);
    border-radius: var(--r-xl);
    padding: 40px 36px;
    align-self: start;
    position: sticky;
    top: 120px;
}

.doc-sidebar .eyebrow {
    color: var(--beige);
    opacity: .8;
    display: block;
    margin-bottom: 18px;
}

.doc-sidebar p {
    font-family: var(--display);
    font-style: italic;
    font-size: 1.25rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .92);
}

/* ── ELEVATE TEASER ── */
.doc-elevate {
    display: grid;
    grid-template-columns:1fr 1fr;
    min-height: 52vh;
}

.doc-elevate__photo {
    background: url('../images/elevate-room.jpg') center/cover;
    min-height: 280px;
}

.doc-elevate__panel {
    background: var(--dark-brown);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(2.5rem, 4vw, 4rem);
}

.doc-elevate__logo {
    width: 160px;
    height: auto;
    margin-bottom: 22px;
}

.doc-elevate__panel .eyebrow {
    color: var(--beige);
    opacity: .8;
    margin-bottom: 14px;
}

.doc-elevate__panel h2 {
    color: #fff;
    font-size: clamp(1.6rem, 2.2vw, 2.2rem);
    font-weight: 300;
    font-style: italic;
    line-height: 1.25;
    margin-bottom: 16px;
}

.doc-elevate__panel p {
    color: rgba(255, 255, 255, .8);
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 24px;
    max-width: 420px;
}

/* ── TEAM STRIP ── */
.doc-team {
    padding: 100px 0;
    background: var(--cream);
}

.doc-team__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 44px;
    flex-wrap: wrap;
    gap: 20px;
}

.doc-team__header h2 {
    font-size: clamp(1.8rem, 2.6vw, 2.4rem);
    font-weight: 300;
    margin-top: 14px;
}

.doc-team-track {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    padding-bottom: 8px;
    scrollbar-width: none;
}

.doc-team-track::-webkit-scrollbar {
    display: none;
}

.doc-team-card {
    flex: 0 0 190px;
}

.doc-team-card__photo {
    width: 190px;
    height: 240px;
    border-radius: var(--r-xl);
    overflow: hidden;
    background: var(--blush);
    filter: grayscale(.5);
    transition: filter var(--ease-slow);
    margin-bottom: 14px;
}

.doc-team-card:hover .doc-team-card__photo {
    filter: grayscale(0);
}

.doc-team-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.doc-team-card h4 {
    font-size: 1.25rem;
    margin-bottom: 2px;
}

.doc-team-card span {
    font-size: 1.1rem;
    color: var(--muted);
}

/* ── LOCATIONS MINI ── */
.doc-locations {
    padding: 100px 0;
    background: var(--blush);
}

.doc-locations__inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 32px;
    margin-bottom: 48px;
    flex-wrap: wrap;
}

.doc-locations__inner h2 {
    font-size: clamp(1.8rem, 2.6vw, 2.4rem);
    font-weight: 300;
    margin-top: 14px;
    max-width: 480px;
}

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

.doc-loc-tile {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4/3;
}

.doc-loc-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s ease;
}

.doc-loc-tile:hover img {
    transform: scale(1.05);
}

.doc-loc-tile-info {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(22, 12, 6, .82) 0%, rgba(22, 12, 6, .05) 55%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 22px;
}

.doc-loc-tile-info h3 {
    color: #fff;
    font-size: 1.3rem;
    margin-bottom: 4px;
}

.doc-loc-tile-info a {
    color: rgba(255, 255, 255, .75);
    font-size: 1.1rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255, 255, 255, .3);
    padding-bottom: 2px;
}

/* ═══ EYE EXAM SECTIONS (verbatim from inner v1) ═══ */

/* ── HERO — light split, consistent with doc-hero ── */
.exam-hero {
    display: grid;
    grid-template-columns:0.9fr 1.1fr;
    min-height: 88vh;
    margin-top: var(--site-header-height);
}

.exam-hero__photo {
    position: relative;
    overflow: hidden;
    background: #ddd;
}

.exam-hero__photo img {
    width: 100%;
    object-position: 90%;
    height: 100%;
    object-fit: cover;
}

.exam-hero__content {
    background: var(--cream);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 200px 64px 72px;
}

.exam-breadcrumb {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 0.8rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(59, 46, 34, .5);
    margin-bottom: 26px;
    flex-wrap: wrap;
}

.exam-breadcrumb a {
    color: rgba(59, 46, 34, .75);
}

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

.exam-hero__eyebrow {
    margin-bottom: 16px;
}

.exam-hero h1 {
    font-size: clamp(2.4rem, 4.2vw, 3.9rem);
    font-weight: 300;
    line-height: 1.08;
    margin-bottom: 20px;
}

.exam-hero__sub {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--muted);
    max-width: 600px;
    margin-bottom: 32px;
}

.exam-hero__actions {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.exam-review {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(59, 46, 34, .25);
    padding: 8px 16px;
    font-size: 1.1rem;
    color: var(--ink);
    border-radius: var(--r-pill);
}

.exam-review .star {
    color: var(--accent);
}

/* ── WHAT WE LOOK AT — checklist grid ── */
.exam-checklist {
    padding: 60px 0;
    background: var(--cream);
}

.exam-checklist__header {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 56px;
}

.exam-checklist__header h2 {
    font-size: clamp(2rem, 3.2vw, 2.8rem);
    font-weight: 300;
    margin-top: 16px;
}

.exam-check-grid {
    display: grid;
    grid-template-columns:repeat(2, 1fr);
    gap: 20px;
    max-width: 940px;
    margin: 0 auto;
}

.exam-check-item {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--blush);
    border-radius: var(--r-lg);
    padding: 22px 24px;
}

.exam-check-item__mark {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    margin-top: 2px;
}

.exam-check-item p {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 0;
    color: var(--ink);
}

/* ── PROCESS STEPS ── */
.exam-steps {
    padding: 100px 0;
    background: var(--cream);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.exam-steps__header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 64px;
}

.exam-steps__header h2 {
    font-size: clamp(2rem, 3.2vw, 2.8rem);
    font-weight: 300;
    margin-top: 16px;
}

.exam-step-grid {
    display: grid;
    grid-template-columns:repeat(4, 1fr);
}

.exam-step {
    padding: 0 32px;
    border-right: 1px solid var(--line);
}

.exam-step:last-child {
    border-right: none;
}

.exam-step-num {
    font-family: var(--display);
    font-style: italic;
    font-size: clamp(2.4rem, 3vw, 3.2rem);
    color: var(--accent);
    margin-bottom: 16px;
    display: block;
}

.exam-step h3 {
    font-size: 1.25rem;
    font-weight: 500;
    margin-bottom: 10px;
}

.exam-step p {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--muted);
}

/* ── COMFORT + FREQUENCY ── */
.exam-comfort {
    padding: 120px 0;
    background: var(--blush);
}

.exam-comfort__grid {
    display: grid;
    grid-template-columns:1.5fr 1fr;
    gap: 64px;
    align-items: start;
}

.exam-comfort h2 {
    font-size: clamp(1.9rem, 2.8vw, 2.5rem);
    font-weight: 300;
    margin-bottom: 20px;
    line-height: 1.2;
}

.exam-comfort p {
    font-size: 1.1rem;
    line-height: 1.85;
    color: var(--muted);
    margin-bottom: 16px;
    max-width: 560px;
}

.exam-sidebar {
    background: var(--dark-brown);
    color: var(--nav-cream);
    border-radius: var(--r-xl);
    padding: 40px 36px;
}

.exam-sidebar .eyebrow {
    color: var(--beige);
    opacity: .8;
    display: block;
    margin-bottom: 18px;
}

.exam-sidebar h3 {
    color: #fff;
    font-size: 1.4rem;
    font-weight: 300;
    font-style: italic;
    margin-bottom: 18px;
    line-height: 1.3;
}

.exam-sidebar ul {
    list-style: none;
}

.exam-sidebar li {
    font-size: 1.1rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, .8);
    padding-left: 18px;
    position: relative;
    margin-bottom: 12px;
}

.exam-sidebar li::before {
    content: "—";
    position: absolute;
    left: 0;
    color: var(--accent);
}

/* ── OPTICAL CROSS-SELL ── */
.exam-optical {
    display: grid;
    grid-template-columns:1fr 1fr;
    min-height: 52vh;
}

.exam-optical__panel {
    background: var(--ink);
    color: var(--nav-cream);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(2.5rem, 4vw, 4rem);
}

.exam-optical__panel .eyebrow {
    color: rgba(242, 232, 226, .6);
    margin-bottom: 14px;
}

.exam-optical__panel h2 {
    color: #fff;
    font-size: clamp(1.6rem, 2.2vw, 2.2rem);
    font-weight: 300;
    line-height: 1.25;
    margin-bottom: 16px;
}

.exam-optical__panel p {
    color: rgba(242, 232, 226, .82);
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 24px;
    max-width: 420px;
}

.exam-optical__photo {
    background: url('../images/optical_section.jpg') center/cover;
    min-height: 280px;
}

/* ── FAQ ── */
.exam-faq {
    padding: 120px 0;
    background: var(--cream);
}

.exam-faq__header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 56px;
}

.exam-faq__header h2 {
    font-size: clamp(2rem, 3.2vw, 2.8rem);
    font-weight: 300;
    margin-top: 16px;
}

.exam-faq-list {
    max-width: 860px;
    margin: 0 auto;
}

.exam-faq-item {
    border-bottom: 1px solid var(--line);
}

.exam-faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 26px 4px;
    cursor: pointer;
    list-style: none;
    line-height: 1.2;
    font-family: var(--display);
    font-size: 1.45rem;
    font-weight: 400;
    color: var(--ink);
}

.exam-faq-item summary::-webkit-details-marker {
    display: none;
}

.exam-faq-item summary::after {
    content: '+';
    font-family: var(--body);
    font-size: 1.4rem;
    color: var(--accent);
    flex-shrink: 0;
    transition: transform .25s ease;
}

.exam-faq-item[open] summary::after {
    transform: rotate(45deg);
}

.exam-faq-item__body {
    padding: 0 4px 26px;
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--muted);
    max-width: 760px;
}

.exam-faq-item__body a {
    color: var(--accent);
    border-bottom: 1px solid rgba(246, 65, 15, .4);
}

/* ── LOCATIONS MINI ── */
.exam-locations {
    padding: 120px 0;
    background: var(--blush);
}

.exam-locations__inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 32px;
    margin-bottom: 48px;
    flex-wrap: wrap;
}

.exam-locations__inner h2 {
    font-size: clamp(2rem, 3.2vw, 2.8rem);
    font-weight: 300;
    margin-top: 16px;
    max-width: 820px;
    line-height: 1.2;
}

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

.exam-loc-tile {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4/3;
}

.exam-loc-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s ease;
}

.exam-loc-tile:hover img {
    transform: scale(1.05);
}

.exam-loc-tile-info {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(22, 12, 6, .82) 0%, rgba(22, 12, 6, .05) 55%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 22px;
}

.exam-loc-tile-info h3 {
    color: #fff;
    font-size: 1.3rem;
    margin-bottom: 4px;
}

.exam-loc-tile-info a {
    color: rgba(255, 255, 255, .75);
    font-size: 1.1rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255, 255, 255, .3);
    padding-bottom: 2px;
}

/* style.css's generic `.entry a` (blue underline) ties this selector and loads
   later — restate at higher specificity for tiles rendered inside the entry */
.entry .exam-loc-tile-info a {
    color: rgba(255, 255, 255, .75);
    text-decoration: none;
}

.entry .exam-loc-tile-info a:hover {
    color: #fff;
}

/* Other-locations band on single location pages (includes/other-locations.php).
   The homepage band always shows exactly 3 tiles; this one shows however many
   other offices exist, so auto-fit fills the row instead of leaving a 3+1
   orphan. Higher specificity than the .exam-loc-grid media queries below, so
   it holds at every width — minmax() does the collapsing here. */
.exam-locations--other .exam-loc-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* ═══ FOOTER (verbatim, shared by all pages) ═══ */

/* ── FOOTER — second_design, de-Webflowed ── */
.footer {
    background: var(--dark-brown);
    color: var(--nav-cream);
    padding: 5rem clamp(1.5rem, 7vw, 8rem) 2.5rem;
}

.footer__grid {
    display: grid;
    grid-template-columns:1.1fr 2fr;
    gap: 48px;
}

.footer__logo img {
    width: 150px;
    height: auto;
    margin-bottom: 20px;
}

.footer__text {
    color: #b3876d;
    font-family: var(--display);
    font-size: 1.25rem;
    font-style: italic;
    font-weight: 400;
    line-height: 1.5;
    margin-bottom: 20px;
    max-width: 300px;
}

.footer__phone {
    display: inline-block;
    opacity: .6;
    color: var(--beige);
    font-family: var(--display);
    font-size: 1.6rem;
    line-height: 1.5rem;
    transition: opacity .25s ease;
}

.footer__phone:hover {
    opacity: 1;
}

.footer__social {
    display: flex;
    align-items: center;
    margin-top: 2rem;
}

.footer__social a {
    width: 20px;
    margin-right: 20px;
    transition: opacity .25s ease;
}

.footer__social a:hover {
    opacity: .64;
}

.footer__social img {
    width: 100%;
    height: auto;
}

.footer__links-grid {
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    gap: 2vw;
}

.footer__links-head {
    color: #b3876d;
    font-family: var(--body);
    font-size: 1.1rem;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 20px;
    line-height: 1.2rem;
}

.footer__link {
    display: block;
    color: #e3c8aa99;
    text-transform: uppercase;
    margin-bottom: 15px;
    font-size: 1.1rem;
    line-height: 1.1rem;
    transition: color .25s ease;
}

.footer__link:hover {
    color: var(--beige);
}

.footer__link--bold {
    font-weight: 600;
}

.footer__copyright {
    border-top: 1px solid #ffffff2e;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 40px;
    padding-top: 30px;
}

.footer__copyright-text {
    color: #f5efe66b;
    font-size: 1.1rem;
    max-width: 64ch;
}

.footer__points {
    color: #f5efe66b;
    letter-spacing: .2rem;
    text-transform: uppercase;
    font-size: 1.1rem;
}

/* ── Promoted from inline style="" attributes (no inline CSS ships) ── */
.nav__cta .btn-orange {
    padding: .72rem 1.5rem;
    font-size: 1.1rem;
    white-space: nowrap;
}

.services-header .eyebrow {
    margin-bottom: 18px;
}

.doctors__header .eyebrow, .team__header .eyebrow, .testimonials__header .eyebrow {
    margin-bottom: .75rem;
}

.independence__inner .eyebrow {
    margin-bottom: 1.2rem;
}

.svc-explain .eyebrow {
    margin-bottom: 18px;
}

.exam-comfort .eyebrow {
    margin-bottom: 18px;
}

.loc-tile--elevate .loc-tile-info h3 {
    font-size: clamp(20px, 1.5vw, 22px);
}

/* ═══ RESPONSIVE (merged from all four pages; nav/footer authored once) ═══ */

@media (max-width: 1680px) {
    /* 7 top-level items + both CTAs don't fit one row below ~1700px; tighten so
     the wrap (centered, two rows) stays tidy. Font stays at the 1.1rem desktop
     floor — size reductions live in the ≤991px block below. */
    .gl-top-level {
        gap: 1.2rem;
        justify-content: center;
        row-gap: .1rem;
    }
}

@media (max-width: 1360px) {
    .gl-top-level {
        gap: 1.1rem;
    }
}

@media (max-width: 1100px) {
    .doc-bio__grid {
        grid-template-columns:1fr;
    }

    .doc-sidebar {
        position: static;
        margin-top: 8px;
    }
}

@media (max-width: 1024px) {
    .gl-top-level {
        gap: 1rem;
    }

    .nav__elevate-btn {
        display: none;
    }

    .independence__inner {
        gap: 4rem;
    }

    .svc-explain__grid {
        gap: 48px;
    }

    .svc-lens-row {
        grid-template-columns:1fr 1.6fr;
        row-gap: 16px;
    }

    .svc-lens-row__best {
        grid-column: 1/-1;
    }

    .exam-comfort__grid {
        gap: 40px;
    }
}

@media (max-width: 960px) {
    .services, .locations {
        padding-left: 24px;
        padding-right: 24px;
        padding-top: 80px;
    }

    .services-more {
        padding: 44px 24px;
    }

    .service-grid {
        grid-template-columns:1fr;
        grid-template-rows:auto;
    }

    .service-tile {
        grid-row: auto !important;
        grid-column: auto !important;
    }

    .service-tile img {
        aspect-ratio: 3/2;
    }

    .optical-main {
        grid-template-columns:1fr;
    }

    .optical-photo {
        height: 60vw;
    }

    .optical-text {
        padding: 64px 24px;
    }

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

    .stat {
        padding: 48px 28px;
    }

    .stat:nth-child(odd) {
        border-right: 1px solid var(--line);
    }

    .stat:nth-child(2), .stat:nth-child(4) {
        border-right: none;
    }

    .stat:nth-child(4), .stat:nth-child(5) {
        border-top: 1px solid var(--line);
    }

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

    .loc-tile img {
        height: 220px;
    }

    .welcome {
        gap: 28px;
        padding: 56px 24px;
    }

    .elevate-text {
        grid-template-columns:1fr;
        gap: 24px;
        padding: 48px 24px 60px;
    }

    .elevate-caption {
        display: none;
    }

    .svc-hero2 {
        grid-template-columns:1fr;
    }

    .svc-hero2__left {
        padding: 160px 24px 48px;
    }

    .svc-hero2__right {
        height: 56vw;
    }

    .svc-step-grid {
        grid-template-columns:1fr 1fr;
        row-gap: 40px;
    }

    .svc-step:nth-child(odd) {
        border-right: 1px solid var(--line);
    }

    .svc-step:nth-child(even) {
        border-right: none;
    }

    .svc-story-grid {
        grid-template-columns:1fr;
    }

    .svc-loc-grid {
        grid-template-columns:1fr 1fr;
    }

    .doc-hero {
        grid-template-columns:1fr;
    }

    .doc-hero__photo {
        min-height: 52vw;
    }

    .doc-hero__content {
        padding: 50px 24px 48px;
    }

    .doc-creds {
        grid-template-columns:1fr 1fr;
    }

    .doc-cred:nth-child(odd) {
        border-right: 1px solid var(--line);
    }

    .doc-cred:nth-child(even) {
        border-right: none;
    }

    .doc-cred:nth-child(3), .doc-cred:nth-child(4) {
        border-top: 1px solid var(--line);
    }

    .doc-timeline-item {
        grid-template-columns:1fr;
        gap: 6px;
    }

    .doc-elevate {
        grid-template-columns:1fr;
    }

    .doc-elevate__photo {
        min-height: 44vw;
    }

    .doc-loc-grid {
        grid-template-columns:1fr 1fr;
    }

    .exam-hero {
        grid-template-columns:1fr;
    }

    .exam-hero__photo {
        min-height: 52vw;
    }

    .exam-hero__content {
        padding: 20px 24px 48px;
    }

    .exam-check-grid {
        grid-template-columns:1fr;
    }

    .exam-step-grid {
        grid-template-columns:1fr 1fr;
        row-gap: 40px;
    }

    .exam-step:nth-child(odd) {
        border-right: 1px solid var(--line);
    }

    .exam-step:nth-child(even) {
        border-right: none;
    }

    .exam-comfort__grid {
        grid-template-columns:1fr;
    }

    .exam-optical {
        grid-template-columns:1fr;
    }

    .exam-optical__photo {
        min-height: 44vw;
    }

    .exam-loc-grid {
        grid-template-columns:1fr 1fr;
    }
}

@media (max-width: 768px) {
    .nav-top {
        display: none;
    }

    .nav {
        padding: 1rem 1.25rem;
    }

    .nav.dark {
        padding: .8rem 1.25rem;
    }

    .nav__cta {
        display: none;
    }

    .nav__logo img {
        height: 44px;
    }

    /* Hero */
    .hero__content {
        padding-bottom: 14vh;
    }

    .hero__btns {
        flex-direction: column;
        gap: 1rem;
    }

    .hero-btn {
        width: 100%;
        max-width: 340px;
        justify-content: center;
    }

    /* Doctors */
    .doctors {
        padding-top: 4rem;
    }

    .doctors__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        margin-bottom: 1rem;
    }

    .doctors__intro {
        margin-bottom: 2rem;
    }

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

    .doctor-row--flip .doctor-row__photo {
        order: 0;
    }

    .doctor-row--flip .doctor-row__content {
        order: 0;
    }

    .doctor-row__photo {
        aspect-ratio: 4/3;
    }

    .doctor-row__content {
        padding: 2.5rem 1.5rem;
    }

    /* Team */
    .team {
        padding-top: 4rem;
    }

    .team__footer-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
        padding: 2.5rem 0 3rem;
    }

    .staff-frame {
        width: 170px;
    }

    .staff-frame img {
        height: 210px;
    }

    /* Optical strip */
    .optical__gallery {
        padding: 3rem 0 3.5rem;
    }

    .optical__frame {
        width: 180px;
        height: 240px;
    }

    /* Testimonials */
    .testimonials {
        padding: 5rem 0;
    }

    .testimonials__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
    }

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

    .video-card {
        aspect-ratio: 16/9;
    }

    /* Quote block */
    .quote-block__split {
        grid-template-columns:1fr;
    }

    .quote-block__photo {
        min-height: 60vw;
        position: relative;
    }

    .quote-block__photo img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    .quote-block__content {
        padding: 3rem 1.5rem 3.5rem;
    }

    .quote-block__mark {
        font-size: 3.5rem;
    }

    /* Independence */
    .independence {
        padding: 5rem 0;
    }

    .independence__inner {
        grid-template-columns:1fr;
        gap: 2rem;
    }

    .svc-explain {
        padding: 72px 0;
    }

    .svc-explain__grid {
        grid-template-columns:1fr;
        gap: 40px;
    }

    .svc-steps {
        padding: 72px 0;
    }

    .svc-step-grid {
        grid-template-columns:1fr;
        row-gap: 36px;
    }

    .svc-step {
        border-right: none !important;
        padding: 0 8px;
    }

    .svc-lenses {
        padding: 72px 0;
    }

    .svc-lens-row {
        grid-template-columns:1fr;
        row-gap: 14px;
        padding: 28px 20px;
    }

    .svc-lens-row__best {
        grid-column: auto;
    }

    .svc-stories {
        padding: 72px 0;
    }

    .svc-faq {
        padding: 72px 0;
    }

    .svc-faq-list {
        columns: 1;
    }

    .svc-locations {
        padding: 72px 0;
    }

    .svc-loc-grid {
        grid-template-columns:1fr;
    }

    .doc-creds {
        grid-template-columns:1fr;
    }

    .doc-cred {
        border-right: none !important;
        border-top: 1px solid var(--line);
    }

    .doc-cred:first-child {
        border-top: none;
    }

    .doc-bio {
        padding: 72px 0;
    }

    .doc-bio__grid {
        gap: 40px;
    }

    .doc-team {
        padding: 72px 0;
    }

    .doc-locations {
        padding: 72px 0;
    }

    .doc-loc-grid {
        grid-template-columns:1fr;
    }

    .exam-checklist {
        padding: 72px 0;
    }

    .exam-steps {
        padding: 72px 0;
    }

    .exam-step-grid {
        grid-template-columns:1fr;
        row-gap: 36px;
    }

    .exam-step {
        border-right: none !important;
        padding: 0 8px;
    }

    .exam-comfort {
        padding: 72px 0;
    }

    .exam-faq {
        padding: 72px 0;
    }

    .exam-locations {
        padding: 72px 0;
    }

    .exam-loc-grid {
        grid-template-columns:1fr;
    }

    .footer {
        padding: 4rem 1.5rem 2rem;
    }

    .footer__grid {
        grid-template-columns:1fr;
        gap: 40px;
    }

    .footer__copyright {
        flex-direction: column;
        align-items: flex-start;
        gap: .75rem;
    }
}

@media (max-width: 480px) {
    .stats {
        grid-template-columns:1fr;
    }

    .stat {
        border-right: none !important;
        border-top: 1px solid var(--line);
    }

    .stat:nth-child(2) {
        border-top: none;
    }

    .services-more__list {
        flex-direction: column;
        gap: 16px;
    }

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

    .loc-tile img {
        height: 260px;
    }

    .locations {
        padding-top: 56px;
    }

    .welcome {
        padding: 48px 20px;
    }

    .footer__links-grid {
        grid-template-columns:1fr;
        gap: 32px;
    }
}

/* ═══ INNER-PAGE HERO ADDITIONS (WP) ══════════════════════════════════
   1. The subtle "A" brand-mark watermark from the cataract v2 design
      (.svc-hero2__mark) ported to the exam hero's cream panel and the
      generic page-title band. Decorative: empty alt, no pointer events.
   2. service_hero_image_side ACF option — flips which side the photo
      sits on in either hero layout (grid `order` swap). */

.exam-hero__content {
    position: relative;
    overflow: hidden;
}

.exam-hero__content > * {
    position: relative;
    z-index: 1;
}

.exam-hero__mark {
    position: absolute;
    top: -8%;
    right: -8%;
    width: 85%;
    max-width: 680px;
    opacity: .05;
    pointer-events: none;
    z-index: 0;
}

.page-title-band {
    position: relative;
    overflow: hidden;
    margin-top: var(--site-header-height);
}

.page-title-band .wrap {
    position: relative;
    z-index: 1;
}

.page-title-band__mark {
    position: absolute;
    top: -32%;
    right: 7%;
    width: min(38vw, 500px);
    opacity: .05;
    pointer-events: none;
    z-index: 0;
}

/* the mark PNG is RGB with an opaque white background (no alpha channel);
   multiply blends the white box into the cream so only the "A" shows */
.exam-hero__mark, .page-title-band__mark, .svc-hero2__mark {
    mix-blend-mode: multiply;
}

.exam-hero--img-right .exam-hero__photo {
    order: 2;
}

.exam-hero--img-right .exam-hero__content {
    order: 1;
}

.exam-hero--img-right .exam-hero__mark {
    right: auto;
    left: -18%;
}

.svc-hero2--img-left .svc-hero2__left {
    order: 2;
}

.svc-hero2--img-left .svc-hero2__right {
    order: 1;
}

.svc-hero2--img-left .svc-hero2__mark {
    left: auto;
    right: -18%;
}

/* ═══ DOCTORS ARCHIVE (WP) — /doctors/ ════════════════════════════════
   Markup comes from the glacial-cpt-acf plugin (archive-doctors.php +
   doctor-headshot-link.php); this skins it to the homepage team language
   (.doc-team-card / .doctor-row): rounded photos, grayscale→color hover,
   serif names, Jost small-cap labels. Everything is scoped to the archive
   body class so single-doctor / location / service-page doctor grids keep
   the plugin's stock look. */

.post-type-archive-doctors {
    --cpt-filter-col: 4;
}

/* filter bar */
.post-type-archive-doctors .doctor-filter-controls {
    margin-top: 0;
    padding-bottom: 2.2rem;
    border-bottom: 1px solid var(--line);
}

.post-type-archive-doctors .search-field-div {
    justify-content: flex-start;
    gap: 1.4rem 2.2rem;
    align-items: flex-end;
}

.post-type-archive-doctors .search-field-div > div {
    width: auto;
    min-width: 230px;
    max-width: 280px;
    text-align: left;
}

.post-type-archive-doctors .search-field-div div h2 {
    display: block;
    font-family: var(--body);
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: .55rem;
}

.post-type-archive-doctors .search-field-div h2 + br {
    display: none;
}

.post-type-archive-doctors .search-field-div select,
.post-type-archive-doctors .search-field-div input {
    width: 100%;
    padding: .62rem 2.4rem .62rem 1.1rem;
    font-family: var(--body);
    font-size: 1.1rem;
    font-weight: 300;
    color: var(--ink);
    background-color: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    transition: border-color .2s ease;
}

.post-type-archive-doctors .search-field-div input {
    padding-right: 2.6rem;
}

.post-type-archive-doctors .search-field-div select:focus,
.post-type-archive-doctors .search-field-div input:focus {
    outline: none;
    border-color: var(--accent);
}

.post-type-archive-doctors .search-field-div select {
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%233B2E22' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 13px;
    cursor: pointer;
}

.post-type-archive-doctors .doc-search-field button {
    right: 12px;
}

.post-type-archive-doctors .dr-clear-btn,
.post-type-archive-doctors .dr-clear-btn:active,
.post-type-archive-doctors button.dr-clear-btn:focus {
    width: auto;
    margin: 1.6rem 0 0;
    padding: .5rem 1.5rem;
    background: transparent;
    border: 1.5px solid var(--black);
    border-radius: var(--r-pill);
    color: var(--black);
    font-family: var(--body);
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: var(--ease);
}

.post-type-archive-doctors .dr-clear-btn:hover {
    background: var(--black);
    color: var(--white);
}

/* MD / OD / staff group headings */
.post-type-archive-doctors .doctor-archive-container {
    text-align: left;
}

.post-type-archive-doctors .doctor-type-heading {
    font-family: var(--display);
    font-size: clamp(1.9rem, 2.8vw, 2.6rem);
    font-weight: 300;
    color: var(--black);
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 2rem 0 1.8rem;
}

.post-type-archive-doctors .doctor-type-heading::before {
    content: "";
    flex: 0 0 auto;
    width: 34px;
    height: 2px;
    background: var(--accent);
}

/* ── shared .staff-frame doctor card ──
   Emitted by the plugin partial doctor-headshot-link.php everywhere doctors
   are listed (archive, all-doctors, service pages, glacial/home-team block).
   Base .staff-frame skin lives in the TEAM section above; these rules make
   the card fluid inside the plugin's grid wrappers and out-rank the plugin
   stylesheet's legacy card chrome (order-independent selectors). */
div.cpt-doctor-image-link {
    background: transparent;
    border: 0;
    box-shadow: none;
}

.cpt-doctor-image-link > a.doctor-headshot-link.staff-frame {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    text-align: left;
}

.cpt-doctor-image-link a.staff-frame:hover {
    background: var(--blush);
}

.cpt-doctor-image-link .doctor-headshot-link.staff-frame img {
    width: 100%;
    height: auto;
    aspect-ratio: 4/5;
    object-fit: cover;
    object-position: top;
    border: 0;
    margin: 0;
}

.staff-frame .staff-frame__label.doctor-name {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--black);
    line-height: 1.3;
}

.staff-frame .staff-frame__label .doctor-additional-specialties {
    display: block;
    font-size: 1.1rem;
    font-weight: 400;
    color: var(--muted);
    min-height: 0;
}

a.staff-frame:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
}

div.doctors-section {
    background-color: var(--blush);
}

@media (prefers-reduced-motion: reduce) {
    .staff-frame {
        transition: none;
    }
}

/* ═══ DOCTOR BIO PAGE (WP) — single-doctors.php additions ═════════════
   The doc-* section CSS above comes from the dr-mansouri design; these
   rules cover the WP-only cases. */

/* no sidebar note → bio runs full width */
.doc-bio__grid--full {
    grid-template-columns:1fr;
}

/* expertise tags are links to the doctor's service pages */
a.doc-tag {
    transition: var(--ease);
}

a.doc-tag:hover, a.doc-tag:focus-visible {
    background: var(--dark-brown);
    color: var(--nav-cream);
}

/* the shared .staff-frame card inside the bio page's team track */
.doc-team-track .staff-frame {
    flex: 0 0 200px;
}

/* bio body content comes from the_content() — match the design's prose */
.doc-bio__section > p a {
    color: var(--accent-link);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.doc-bio__section ul, .doc-bio__section ol {
    font-size: 1.1rem;
    line-height: 1.9;
    color: var(--muted);
    margin: 0 0 16px 1.2rem;
    max-width: 640px;
}

/* posts-by-doctor band */
.doc-posts {
    padding: 100px 0;
    background: var(--cream);
    border-top: 1px solid var(--line);
}

/* ═══ RELATED PAGES (WP) ══════════════════════════════════════════════
   Two designs rendered by template-parts/pages/related-pages.php and
   switched with the glacial_related_pages_design filter
   (includes/custom-filters.php):

   A. .glacial-related       — <details> pill toggle above the content;
                               expands into a card grid (Wisconsin's
                               related-pages-under-title pattern, reskinned).
   B. .glacial-related-index — always-visible editorial index after the
                               content; hairline rows with serif names,
                               emulating the cataract v2 design's
                               spec-sheet (.svc-lens-table) / FAQ rows.

   Selector specificity note: style.css loads AFTER this file and carries
   .entry a / .entry .related-pages-bottom ul rules — the compound
   selectors below are deliberate. */

.entry .related-pages-bottom {
    display: block;
    align-items: initial;
}

/* shared list reset (beats .entry .related-pages-bottom ul in style.css) */
ul.related-pages-list,
.entry .related-pages-bottom ul.related-pages-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    align-items: stretch;
    height: auto;
}

.entry .related-pages-bottom li,
.related-pages-list li {
    margin: 0;
    padding: 0;
}

/* ── A. collapsible pill ── */
.glacial-related {
    margin: 0 0 1.5rem;
}

.glacial-related > .related-summary {
    display: inline-flex;
    align-items: center;
    gap: .9rem;
    width: fit-content;
    padding: .55rem 1.3rem .55rem 1rem;
    background: var(--dark-brown);
    border-radius: var(--r-pill);
    cursor: pointer;
    list-style: none;
    transition: background-color .25s ease;
}

.glacial-related > .related-summary::-webkit-details-marker {
    display: none;
}

.glacial-related > .related-summary:hover {
    background: #3d2818;
}

.glacial-related > .related-summary:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
}

.glacial-related .related-title {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin: 0;
    font-family: var(--body);
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--nav-cream);
    line-height: 1.2;
}

.glacial-related .related-title::before {
    content: "";
    flex: 0 0 auto;
    width: 6px;
    height: 1.25em;
    border-radius: 6px;
    background: var(--accent);
}

.glacial-related .related-icon {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border-right: 2px solid var(--nav-cream);
    border-bottom: 2px solid var(--nav-cream);
    transform: rotate(45deg);
    transition: transform .25s ease;
}

.glacial-related[open] .related-icon {
    transform: rotate(-135deg);
    margin-top: 4px;
}

.glacial-related .related-pages-list {
    grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
    gap: .7rem;
}

.glacial-related[open] .related-pages-list {
    margin-top: 1.4rem;
}

.glacial-related .related-pages-list .related-pages-parent {
    grid-column: 1 / -1;
}

.glacial-related .related-pages-list a {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    gap: .5rem;
    padding: .62rem 2.6rem .62rem 1.05rem;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 14px;
    color: var(--ink);
    font-family: var(--body);
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1.35;
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(59, 46, 34, .05);
    transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, border-color .25s ease, color .25s ease;
}

.glacial-related .related-pages-list a::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 1rem;
    width: 16px;
    height: 16px;
    transform: translateY(-50%);
    background-color: var(--accent);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    opacity: .55;
    transition: transform .25s ease, opacity .25s ease, background-color .25s ease;
}

.glacial-related .related-pages-list a:hover,
.glacial-related .related-pages-list a:focus-visible {
    transform: translateY(-2px);
    background: var(--accent);
    border-color: var(--accent);
    color: var(--white);
    box-shadow: 0 12px 26px rgba(59, 46, 34, .22);
}

.glacial-related .related-pages-list a:hover::after,
.glacial-related .related-pages-list a:focus-visible::after {
    background-color: var(--white);
    opacity: 1;
    transform: translateY(-50%) translateX(4px);
}

.glacial-related .related-pages-list .related-page-top-level {
    background: var(--dark-brown);
    border-color: var(--dark-brown);
    color: var(--nav-cream);
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.glacial-related .related-pages-list .related-page-top-level::after {
    background-color: var(--nav-cream);
    opacity: 1;
}

.glacial-related .related-pages-list .related-page-top-level:hover,
.glacial-related .related-pages-list .related-page-top-level:focus-visible {
    background: var(--accent);
    border-color: var(--accent);
}

.glacial-related .related-pages-list a.current-page,
.glacial-related .related-pages-list a.current-page:hover {
    background: var(--blush);
    border-color: var(--blush);
    color: var(--muted);
    font-weight: 500;
    transform: none;
    box-shadow: none;
    cursor: default;
}

.glacial-related .related-pages-list a.current-page::after {
    display: none;
}

/* ── B. always-visible editorial index ── */
.glacial-related-index {
    margin: 3.5rem 0 0;
    margin-bottom: 3rem;
    padding-top: 2.6rem;
    border-top: 1px solid var(--line);
}

.glacial-related-index__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1.5rem 2.5rem;
    flex-wrap: wrap;
    margin-bottom: 2.1rem;
}

.glacial-related-index .eyebrow {
    margin-bottom: 10px;
}

.glacial-related-index .related-title {
    margin: 0;
    font-family: var(--display);
    font-size: clamp(1.8rem, 2.8vw, 2.6rem);
    font-weight: 300;
    line-height: 1.1;
    color: var(--black);
}

.glacial-related-index .related-index-all {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .58rem 1.5rem;
    border: 1.5px solid var(--black);
    border-radius: var(--r-pill);
    background: transparent;
    color: var(--black);
    font-family: var(--body);
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    transition: var(--ease);
}

.glacial-related-index .related-index-all:hover,
.glacial-related-index .related-index-all:focus-visible {
    background: var(--black);
    color: var(--white);
}

.glacial-related-index .related-pages-list {
    grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
    column-gap: 3.5rem;
    row-gap: 0;
    border-top: 1px solid var(--line);
}

.glacial-related-index .related-pages-list li {
    border-bottom: 1px solid var(--line);
}

.glacial-related-index .related-pages-list a {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    gap: 1rem;
    padding: 1.02rem 2.3rem 1.02rem 2px;
    font-family: var(--display);
    font-size: 1.28rem;
    font-weight: 400;
    line-height: 1.25;
    color: var(--ink);
    text-decoration: none;
    transition: color .2s ease;
}

.glacial-related-index .related-pages-list a::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 6px;
    width: 16px;
    height: 16px;
    transform: translateY(-50%);
    background-color: var(--accent);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    opacity: .4;
    transition: transform .25s ease, opacity .25s ease;
}

.glacial-related-index .related-pages-list a:hover,
.glacial-related-index .related-pages-list a:focus-visible {
    color: var(--accent);
}

.glacial-related-index .related-pages-list a:hover::after,
.glacial-related-index .related-pages-list a:focus-visible::after {
    opacity: 1;
    transform: translateY(-50%) translateX(5px);
}

.glacial-related-index .related-pages-list a.current-page,
.glacial-related-index .related-pages-list a.current-page:hover {
    color: var(--muted);
    cursor: default;
}

.glacial-related-index .related-pages-list a.current-page::after {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .glacial-related .related-icon,
    .glacial-related .related-pages-list a,
    .glacial-related .related-pages-list a::after,
    .glacial-related-index .related-pages-list a,
    .glacial-related-index .related-pages-list a::after {
        transition: none;
    }
}

/* ═══ TYPE FLOORS (WP) ═══════════════════════════════════════════════
   Site-wide minimums on desktop: Jost (body face) ≥ 1.1rem / 17.6px,
   Cormorant Garamond (display face) ≥ 1.25rem / 20px. The .eyebrow
   kicker pattern is the one agreed exception. The rules below override
   the shared base files (components.css, navigation.css, the
   glacial-cpt plugin stylesheet) without editing them. */

/* components.css heading/input floors */
h4 {
    font-size: 1.25rem;
}

h5,
h6 {
    font-size: 1.1rem;
}

.w-input,
.w-select {
    font-size: 1.1rem;
}

/* navigation.css dropdown menus */
nav.site-navigation ul ul,
nav.site-navigation ul ul a {
    font-size: 1.1rem;
}

/* style.css utility bits (loads after this file — beat it on specificity) */
a.top-floating-button {
    font-size: 1.1rem;
}

.blog-grid-wrapper .blog-grid-meta {
    font-size: 1.1rem;
}

/* glacial-cpt plugin bits */
.phone-note {
    font-size: 1.1rem;
}

.doc-search-field button {
    font-size: 1.1rem;
}

/* nav size reduction now lives below the desktop floor only */
@media (max-width: 991px) {
    .gl-top-level a {
        font-size: 1em;
    }

    .page-title-band {
        background: var(--cream);
        padding: 40px 0;
    }

    .w-nav-overlay .nav-menu {
        display: block;
        background: var(--cream);
        padding: 1rem 1rem 13rem;

    }
}

/* ═══ DOUBLE-DECK NAV (WP) ═══════════════════════════════════════════
   With 7 top-level items at the 1.1rem type floor plus both CTAs, the
   single-row nav can't fit until ~1850px. Split it: logo left + CTAs
   right on row one, the menu centered on its own full-width row.
   (Below 768px the w-nav mobile overlay takes over as before.) */
.nav {
    flex-wrap: wrap;
    row-gap: .25rem;
    padding-top: .75rem;
    padding-bottom: .75rem;
}

.nav .nav-menu {
    order: 5;
    flex-basis: 100%;
    justify-content: center;
}

.gl-top-level {
    justify-content: center;
}

/* keep the taller type from ballooning the CTA pills */
.nav__cta .btn-orange {
    padding: .55rem 1.2rem;
}

.nav__elevate-btn {
    padding: .4rem 1rem .4rem .4rem;
}

/* ═══ BREADCRUMB WRAP (WP) ═══
   The hero breadcrumbs are flex rows; without wrap they set the grid
   column's min-content wider than small viewports. */
.svc-breadcrumb,
.exam-breadcrumb {
    flex-wrap: wrap;
}

/* ═══ MOBILE TYPE SCALE (WP) ═══
   The 1.1rem/1.25rem floors are desktop-only — on phones the design's
   original sizes return. */
@media (max-width: 767px) {
    body {
        font-size: 1rem;
    }

    .arrow-link {
        font-size: .75rem;
    }

    .arrow-light {
        font-size: .75rem;
    }

    .page-breadcrumb, .page-title-band #breadcrumbs {
        font-size: .7rem;
    }

    .page-content p {
        font-size: 1.05rem;
    }

    .elevate p {
        font-size: 1.05rem;
    }

    .elevate li {
        font-size: .95rem;
    }

    .elevate-caption {
        font-size: .7rem;
    }

    .service-tile-overlay p {
        font-size: 1.05rem;
    }

    .services-more__label {
        font-size: .875rem;
    }

    .services-more__list a {
        font-size: .95rem;
    }

    .doctor-row__title {
        font-size: .76rem;
    }

    .doctor-award {
        font-size: .62rem;
    }

    .doctor-row__link {
        font-size: .72rem;
    }

    .stat-desc {
        font-size: .95rem;
    }

    .staff-frame__label {
        font-size: .75rem;
    }

    .staff-frame__label span {
        font-size: .75rem;
    }

    .optical-sub {
        font-size: 1rem;
    }

    .video-card__tag {
        font-size: .62rem;
    }

    .video-card__name {
        font-size: .78rem;
    }

    .quote-card__stars {
        font-size: .85rem;
    }

    .quote-card__author {
        font-size: .78rem;
    }

    .quote-block__attr {
        font-size: .95rem;
    }

    .loc-tile-info .city {
        font-size: .8rem;
    }

    .loc-tile-info .hours {
        font-size: .8rem;
    }

    .independence__link {
        font-size: .72rem;
    }

    .svc-breadcrumb {
        font-size: .7rem;
    }

    .svc-hero2__sub {
        font-size: 1.05rem;
    }

    .svc-review2 {
        font-size: .82rem;
    }

    .svc-hero2__badge span {
        font-size: .72rem;
    }

    .svc-step p {
        font-size: .92rem;
    }

    .svc-lens-row__tag {
        font-size: .65rem;
    }

    .svc-lens-row p {
        font-size: .95rem;
    }

    .svc-lens-row__best {
        font-size: .8rem;
    }

    .svc-quote-card__author {
        font-size: .8rem;
    }

    .svc-faq-item__body {
        font-size: .95rem;
    }

    .svc-loc-tile-info a {
        font-size: .75rem;
    }

    .doc-breadcrumb {
        font-size: .7rem;
    }

    .doc-hero__role {
        font-size: .82rem;
    }

    .doc-cred p {
        font-size: .82rem;
    }

    .doc-bio__section p {
        font-size: 1.05rem;
    }

    .doc-timeline-item__loc {
        font-size: .72rem;
    }

    .doc-timeline-item p {
        font-size: .95rem;
    }

    .doc-tag {
        font-size: .8rem;
    }

    .doc-elevate__panel p {
        font-size: 1rem;
    }

    .doc-team-card span {
        font-size: .75rem;
    }

    .doc-loc-tile-info a {
        font-size: .75rem;
    }

    .exam-breadcrumb {
        font-size: .7rem;
    }

    .exam-review {
        font-size: .82rem;
    }

    .exam-check-item__mark {
        font-size: .8rem;
    }

    .exam-check-item p {
        font-size: .95rem;
    }

    .exam-step p {
        font-size: .9rem;
    }

    .exam-comfort p {
        font-size: 1.05rem;
    }

    .exam-sidebar li {
        font-size: .9rem;
    }

    .exam-optical__panel p {
        font-size: 1rem;
    }

    .exam-faq-item__body {
        font-size: 1rem;
    }

    .exam-loc-tile-info a {
        font-size: .75rem;
    }

    .footer__links-head {
        font-size: .85rem;
    }

    .footer__link {
        font-size: .8rem;
    }

    .footer__copyright-text {
        font-size: .8rem;
    }

    .footer__points {
        font-size: .8rem;
    }

    .post-type-archive-doctors .search-field-div div h2 {
        font-size: .72rem;
    }

    .post-type-archive-doctors .search-field-div select,
    .post-type-archive-doctors .search-field-div input {
        font-size: 1rem;
    }

    .post-type-archive-doctors .dr-clear-btn {
        font-size: .74rem;
    }

    .staff-frame .staff-frame__label.doctor-name {
        font-size: .78rem;
    }

    .staff-frame .staff-frame__label .doctor-additional-specialties {
        font-size: .72rem;
    }

    .doc-bio__section ul, .doc-bio__section ol {
        font-size: 1.05rem;
    }

    .glacial-related .related-title {
        font-size: .78rem;
    }

    .glacial-related .related-pages-list a {
        font-size: .95rem;
    }

    .glacial-related .related-pages-list .related-page-top-level {
        font-size: .82rem;
    }

    .glacial-related-index .related-index-all {
        font-size: .74rem;
    }

    .optical-brand {
        font-size: 1.19rem;
    }

    .quote-card__text {
        font-size: 1.1rem;
    }

    .svc-lens-compare__eye {
        font-size: .8rem;
    }

    .svc-step h3 {
        font-size: 1.1rem;
    }

    .svc-faq-item summary {
        font-size: 1.15rem;
    }

    .doc-timeline-item__place {
        font-size: 1.15rem;
    }

    .doc-sidebar p {
        font-size: 1.2rem;
    }

    .doc-team-card h4 {
        font-size: 1.05rem;
    }

    .exam-step h3 {
        font-size: 1.05rem;
    }

    .exam-faq-item summary {
        font-size: 1.2rem;
    }

    .footer__text {
        font-size: 1.15rem;
    }

    .svc-lens-compare__eye {
        width: 120px;
        height: 120px;
    }

    .exam-check-item__mark {
        width: 26px;
        height: 26px;
    }

    .page-title-band__mark {
        position: absolute;
        top: 20px;
    }

    .svc-hero2__mark {
        top: 370px;
        left: auto;
        opacity: 0.08;
    }

    .exam-hero__mark {
        top: 50px;
        right: auto;
    }

    .exam-hero--img-right .exam-hero__mark {
        right: auto;
        left: auto;
    }

}

/* ═══ SERVICES MEGA-DROPDOWN (WP) ═════════════════════════════════════
   The Services submenu (14 items) becomes a wide 3-column panel on
   desktop, centered under its menu item. Scoped to ≥992px — below that
   (and in the ≤767px w-nav overlay) the stock dropdown behavior returns
   untouched. Targeted via the /services/ link so menu rebuilds (new
   menu-item IDs) can't break it. */
@media (min-width: 992px) {
    .site-navigation .gl-top-level > li:has(> a[href$="/services/"]) > ul.sub-menu {
        width: 1000px;
        background: var(--lvl-1-bg-color);
        left: 50%;
        margin-left: -500px;
        padding: .5rem;
    }

    /* the open states (hover + keyboard .toggled-on) switch to a 3-col grid */
    .site-navigation .gl-top-level > li:has(> a[href$="/services/"]):hover > ul.sub-menu,
    .site-navigation .gl-top-level > li:has(> a[href$="/services/"]) > ul.sub-menu.toggled-on {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 2px;
    }
}

/* ═══ CLICKABLE SERVICE TILES (WP) ═══
   The homepage service tiles' whole image is clickable: the tile's single
   "Learn More" anchor is stretched over the tile (its own arrow styling is
   unaffected). .service-tile already has position:relative + overflow:hidden. */
.service-tile .arrow-light::after {
    content: "";
    position: absolute;
    inset: 0;
}

/* ═══ CLICKABLE EXAM LOCATION TILES (WP) ═══
   Same idea for the locations-mini band: each tile's single "Get Directions"
   anchor is stretched over the whole photo, so the tile reads as one link and
   no nested anchor is needed. The anchor sits inside the absolutely-positioned
   .exam-loc-tile-info, whose padding box already spans the tile, so inset:0
   covers the photo. render.php carries the office name in the anchor's
   aria-label (three identical "Get Directions" links say nothing on their
   own), and the focus ring is drawn on the stretched ::after so keyboard focus
   outlines the tile itself, matching a.loc-tile in home-locations. */
.exam-loc-tile-info a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.exam-loc-tile-info a:focus-visible {
    outline: none;
}

.exam-loc-tile-info a:focus-visible::after {
    outline: 3px solid var(--accent);
    outline-offset: -3px;
}

/* ═══ CONTENT LISTS (WP) ═════════════════════════════════════════════
   House list style, lifted from the aside-note (.exam-sidebar): no bullet,
   an accent em-dash marker in a hanging indent. Applied to CONTENT lists
   only — `ul:not([class])` is exactly the prose lists (core/html + the_content
   emit classless <ul>), while every UI list carries a class it can be told
   apart by (.gl-top-level, .sub-menu, .related-pages-list,
   .services-more__list, .staff-*). The marker uses var(--accent), which reads
   on cream and on the dark bands alike, so no per-context override is needed.
   Numbered lists keep their numerals. */
.entry ul:not([class]),
.entry ul.wp-block-list,
.doc-bio__section ul:not([class]) {
    list-style: none;
    padding-left: 0;
}

.entry ul:not([class]) > li,
.entry ul.wp-block-list > li,
.doc-bio__section ul:not([class]) > li {
    position: relative;
    padding-left: 18px;
    margin-bottom: 12px;
}

.entry ul:not([class]) > li::before,
.entry ul.wp-block-list > li::before,
.doc-bio__section ul:not([class]) > li::before {
    content: "—";
    position: absolute;
    left: 0;
    color: var(--accent);
}

/* nested lists indent from their parent item instead of the text column */
.entry ul:not([class]) ul:not([class]),
.doc-bio__section ul:not([class]) ul:not([class]) {
    padding-left: 18px;
    margin-top: 12px;
}

/* ═══ CONTENT LINKS (WP) ══════════════════════════════════════════════
   Prose links had NO visual treatment: the parent theme's `.entry a` rule is
   commented out in style.css and the design reset sets `a { color: inherit;
   text-decoration: none }`, so portal/PDF/inline links read as body text
   (WCAG 1.4.1). Matches the doctor-bio treatment: brand orange + underline.
   `:not([class])` targets prose links only — buttons and card links all carry
   a class (.gl-btn, .btn*, .arrow-link, .staff-frame, .sb-link, .doc-tag …),
   and several share `.entry a`'s specificity, so excluding them by class is
   what keeps a doctor card from turning into an underlined orange block. */
.entry a:not([class]) {
    color: var(--accent-link);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition: color .2s ease;
}

.entry a:not([class]):hover,
.entry a:not([class]):focus-visible {
    color: var(--accent-link-hover);
}

/* dark grounds: the orange drops to 3:1 there, so use the design's beige */
.entry .gl-section--dark a:not([class]),
.entry .exam-sidebar a:not([class]),
.entry .svc-lens-row--featured a:not([class]) {
    color: var(--beige);
}

.entry .gl-section--dark a:not([class]):hover,
.entry .exam-sidebar a:not([class]):hover,
.entry .svc-lens-row--featured a:not([class]):hover {
    color: #fff;
}

/* Location-tile links are classless too, but they sit on a photo with their own
   white/border-bottom treatment — keep them out of the prose-link look.
   (Higher specificity than both `.entry a:not([class])` and the earlier
   `.entry .exam-loc-tile-info a` rule, which it ties with on source order.) */
.entry .exam-loc-tile-info a:not([class]),
.entry .svc-loc-tile-info a:not([class]),
.entry .doc-loc-tile-info a:not([class]) {
    color: rgba(255, 255, 255, .75);
    text-decoration: none;
}

.entry .exam-loc-tile-info a:not([class]):hover,
.entry .svc-loc-tile-info a:not([class]):hover,
.entry .doc-loc-tile-info a:not([class]):hover {
    color: #fff;
}

/* ═══ CLICKABLE LOCATION TILES (WP) ═══
   home-locations renders each .loc-tile as a link, so give the anchor the
   block box the design's tile CSS assumes and a visible focus ring. */
a.loc-tile {
    display: block;
    color: inherit;
    text-decoration: none;
}

a.loc-tile:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: -3px;
}

/* ═══ BUTTON HOVER / FOCUS STATES (WP) ════════════════════════════════
   Several design buttons shipped with no interactive states. These follow
   the house idiom already set by .btn-black-outline and .btn-orange:
   an outline button FILLS with its own border colour and inverts its text;
   arrow links deepen/brighten and their rule follows. Every control also
   gets a visible :focus-visible ring — the design shipped almost none, so
   keyboard users had no way to see where they were. */
/* outline button on light grounds (locations CTA, appointment buttons).
   Deliberately no resting colour here: the base .btn inherits its colour from
   the band it sits on, which is how `.btn.btn-light` stays white on dark. */
.btn {
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}

.btn:hover,
.btn:focus-visible {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--cream);
    transform: translateY(-1px);
}

/* outline button on dark bands (Elevate, doc-elevate) */
.btn-light {
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}

.btn-light:hover,
.btn-light:focus-visible {
    background: #fff;
    border-color: #fff;
    color: var(--dark-brown);
    transform: translateY(-1px);
}

/* underlined arrow links */
.arrow-link,
.arrow-light {
    transition: color .2s ease, border-color .2s ease;
}

.arrow-link:hover,
.arrow-link:focus-visible {
    color: var(--accent-link-hover);
    border-bottom-color: var(--accent-link-hover);
}

.arrow-light:hover,
.arrow-light:focus-visible {
    color: #fff;
    border-bottom-color: #fff;
}

/* mobile menu toggle — matches the nav's beige hover language */
.menu-button {
    transition: color .2s ease, background-color .2s ease;
}

.menu-button:hover {
    /*color: var(--beige);*/
}

/* doctor-filter search reset (✕) */
.doc-search-field button {
    color: var(--muted);
    transition: color .2s ease;
}

.doc-search-field button:hover {
    color: var(--accent);
}

/* one focus ring for every button-ish control the design left unstyled */
.btn:focus-visible,
.btn-light:focus-visible,
.btn-orange:focus-visible,
.btn-white-outline:focus-visible,
.btn-black-outline:focus-visible,
.arrow-link:focus-visible,
.arrow-light:focus-visible,
.hero-btn:focus-visible,
.menu-button:focus-visible,
.nav-top-btn:focus-visible,
.nav__elevate-btn:focus-visible,
.doc-search-field button:focus-visible,
.staff-gallery__arrow:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
}

/* the lifts are decoration — drop them when motion is unwelcome */
@media (prefers-reduced-motion: reduce) {

    .btn,
    .btn-light,
    .arrow-link,
    .arrow-light,
    .menu-button,
    .doc-search-field button {
        transition: none;
    }

    .btn:hover,
    .btn:focus-visible,
    .btn-light:hover,
    .btn-light:focus-visible {
        transform: none;
    }
}