/* =====================================================================
   Sarvdrishti Eye Hospital: the booking page (/appointment/), the old
   booking site moved here with its own layout. Only this page uses this
   file. It loads after main.css, which draws the site's header, footer and
   WhatsApp button; the rules here stay inside <main class="appt"> (and the
   booking bar), so the two do not mix. Class names main.css also uses
   (.btn, .doc-photo, .steps...) are avoided, and the base rules below undo
   main.css's element styles (headings, paragraphs, links) in here.
   Colours are the site's own, from main.css: the navy of the home page's
   hero, the brand blue, pale sky blue, ink text and the orange accent.

   Shape language: "almond" corners taken from the eye in the logo. Boxes
   get a big radius on two opposite corners and a tight one on the other
   two; on hover they flip to the other diagonal.
   ===================================================================== */

/* Colours are main.css's tokens (--navy, --blue, --sky, --ink, --orange...),
   so the page matches the rest of the site. */
:root {
    /* Almond corners: "TL/BR TR/BL" and the flipped hover state. */
    --r-xl: 44px 6px;
    --r-xl-flip: 6px 44px;
    --r-lg: 32px 5px;
    --r-lg-flip: 5px 32px;
    --r-md: 20px 4px;
    --r-md-flip: 4px 20px;
    --r-sm: 14px 3px;
    --r-sm-flip: 3px 14px;
    --r-xs: 10px 2px;
    --r-xs-flip: 2px 10px;

    --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
    --shadow: 0 22px 54px rgba(14, 58, 86, 0.14);
    --shadow-sm: 0 4px 18px rgba(14, 58, 86, 0.08);
    --font: 'Sora', 'Anek Devanagari', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* --- Base ---
   The page, its scroll and the box sizing come from main.css. Below, its
   element styles are undone inside <main class="appt">. :where() keeps these
   rules as weak as main.css's, so every class below still wins. */
:where(.appt) *,
:where(.appt) *::before,
:where(.appt) *::after {
    margin: 0;
    padding: 0;
}

.appt {
    font-family: var(--font);
    background: var(--white);
    color: var(--ink);
    font-size: 16px;
    line-height: 1.65;
}

:where(.appt) :is(h1, h2, h3) {
    font-family: inherit;
    text-wrap: wrap;
}

:where(.appt) p {
    margin: 0;
}

:where(.appt) a {
    color: inherit;
}

:where(.appt) :is(input, select, textarea, button) {
    line-height: normal;
}

:where(.appt) :is(ul, ol) {
    list-style: none;
}

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

:where(.appt) section {
    padding: 88px 32px;
    position: relative;
}

/* --- Buttons ---
   main.css's a:hover colours every link, so each button repeats its colour
   on hover. */
.appt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: var(--font);
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.2;
    padding: 16px 28px;
    border-radius: var(--r-sm);
    border: 1.5px solid transparent;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.25s var(--ease-out), border-radius 0.3s var(--ease-out), box-shadow 0.25s ease,
        background 0.2s ease, border-color 0.2s ease;
}

.appt-btn i {
    font-size: 0.9em;
}

.appt-btn:hover {
    transform: translateY(-2px);
    border-radius: var(--r-sm-flip);
}

.appt-btn-sm {
    font-size: 0.82rem;
    padding: 11px 18px;
    border-radius: var(--r-xs);
}

.appt-btn-sm:hover {
    border-radius: var(--r-xs-flip);
}

.appt-btn-orange {
    background: linear-gradient(180deg, var(--orange-hover) 0%, var(--orange) 100%);
    color: var(--ink);
    box-shadow: 0 10px 26px rgba(251, 140, 0, 0.32);
}

.appt-btn-orange:hover {
    color: var(--ink);
    box-shadow: 0 14px 32px rgba(251, 140, 0, 0.42);
}

.appt-btn-ghost {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.26);
    color: var(--white);
}

.appt-btn-ghost:hover {
    color: var(--white);
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.45);
}

.appt-btn-brand {
    background: var(--blue);
    color: var(--white);
    box-shadow: 0 10px 26px rgba(32, 101, 141, 0.28);
}

.appt-btn-brand:hover {
    color: var(--white);
    background: var(--blue-press);
}

/* --- Hero --- */
.hero {
    background:
        radial-gradient(900px 520px at 88% 8%, rgba(32, 101, 141, 0.6) 0%, transparent 62%),
        radial-gradient(640px 420px at -6% 104%, rgba(251, 140, 0, 0.13) 0%, transparent 60%),
        var(--navy);
    padding: calc(var(--header-h) + 60px) 32px 160px;
    overflow: hidden;
    isolation: isolate;
    color: var(--white);
}

/* The site's lens ripples (.ripples in main.css), as on the other pages'
   heads: the eye under the vision card, in the band the bottom padding
   leaves above the facts card (62px of it sits under that card).
   --card: the card's width, 460px or its grid column if narrower. */
.hero-rings {
    --gap: 32px;
    --card: min(460px, (min(100%, 1224px) - 128px) * 0.44);
    right: calc(max(32px, (100% - 1160px) / 2) + var(--card) / 2);
    bottom: calc(62px + (160px - 62px) / 2);
    width: 1000px;
    translate: 50% 50%;
    -webkit-mask-image: radial-gradient(closest-side, #000 45%, transparent);
    mask-image: radial-gradient(closest-side, #000 45%, transparent);
}

.hero-inner {
    max-width: 1160px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    gap: 64px;
    align-items: center;
    position: relative;
    z-index: 1;
}

.hero h1 {
    font-size: clamp(2.05rem, 4.5vw, 3.5rem);
    font-weight: 700;
    line-height: 1.24;
    letter-spacing: -0.015em;
    margin-bottom: 20px;
}

.hero h1 em {
    font-style: normal;
    color: var(--orange-hover);
}

.hero-lead {
    font-size: 1.06rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.74);
    max-width: 540px;
    margin-bottom: 26px;
}

.symptoms {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 30px;
}

.symptoms li {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 0.88rem;
    font-weight: 500;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.9);
    padding: 8px 15px 7px 13px;
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    transition: background 0.2s, border-color 0.2s, border-radius 0.3s var(--ease-out);
}

.symptoms li:hover {
    background: rgba(255, 255, 255, 0.11);
    border-color: rgba(251, 140, 0, 0.5);
    border-radius: var(--r-sm-flip);
}

.symptoms li::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--orange);
    flex-shrink: 0;
}

.hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* --- Section marker ---
   Icon tile plus label. The label pulls into focus (blur to sharp) and the
   icon settles in when the marker scrolls into view. */
.smark {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.smark-icon {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.86rem;
    color: var(--white);
    background: var(--navy);
    border-radius: var(--r-xs);
}

.smark-text {
    font-size: 0.98rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--navy);
}

.smark-dark .smark-icon {
    background: var(--orange);
    color: var(--ink);
}

.smark-dark .smark-text {
    color: var(--white);
}

.js .smark .smark-text {
    filter: blur(5px);
    opacity: 0.35;
    transition: filter 0.9s ease 0.15s, opacity 0.9s ease 0.15s;
}

.js .smark .smark-icon i {
    transform: scale(0.4) rotate(-30deg);
    opacity: 0;
    transition: transform 0.5s var(--ease-out), opacity 0.4s ease;
}

.js .smark.is-focused .smark-text {
    filter: none;
    opacity: 1;
}

.js .smark.is-focused .smark-icon i {
    transform: none;
    opacity: 1;
}

/* --- Cataract vision comparison --- */
.hero-visual {
    display: flex;
    justify-content: flex-end;
}

.vision-card {
    width: 100%;
    max-width: 460px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--r-xl);
    padding: 18px;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}

.vision-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 8px 14px 14px;
}

.vision-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--white);
}

.vision-hint {
    font-size: 0.72rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.55);
    white-space: nowrap;
}

.vision-hint i {
    color: var(--orange);
    margin-right: 4px;
}

.vision-stage {
    --pos: 30%;
    position: relative;
    aspect-ratio: 5 / 6;
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--navy);
    container-type: inline-size;
    user-select: none;
    -webkit-user-select: none;
}

.vision-layer {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.vision-layer img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 55%;
}

/* What a cataract does: haze, a yellow-brown cast, lost contrast. */
.vision-cataract {
    clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}

/* Scaled up a touch so the blur does not leave soft edges at the frame. */
.vision-cataract img {
    filter: blur(4px) sepia(0.75) saturate(1.15) contrast(0.68) brightness(1.04);
    filter: blur(1cqw) sepia(0.75) saturate(1.15) contrast(0.68) brightness(1.04);
    transform: scale(1.06);
}

.vision-cataract::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 46% 44%, rgba(255, 238, 196, 0.4) 0%, rgba(255, 238, 196, 0.14) 55%, transparent 80%);
}

.vision-label {
    position: absolute;
    bottom: 14px;
    z-index: 2;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.3;
    padding: 6px 12px 5px;
    border-radius: var(--r-xs);
    pointer-events: none;
}

.vision-label-before {
    left: 14px;
    background: rgba(60, 48, 20, 0.78);
    color: #fff3d6;
}

.vision-label-after {
    right: 14px;
    background: var(--blue);
    color: var(--white);
}

.vision-divider {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--pos);
    width: 2px;
    margin-left: -1px;
    background: var(--white);
    box-shadow: 0 0 0 1px rgba(14, 58, 86, 0.12), 0 0 18px rgba(14, 58, 86, 0.3);
    z-index: 3;
    pointer-events: none;
}

.vision-handle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: var(--white);
    border: 2px solid var(--orange);
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    box-shadow: 0 6px 20px rgba(14, 58, 86, 0.3);
}

.vision-range {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: ew-resize;
    z-index: 4;
    touch-action: pan-y;
    -webkit-appearance: none;
    appearance: none;
}

.vision-range:focus-visible + .vision-divider .vision-handle,
.vision-stage:focus-within .vision-handle {
    box-shadow: 0 0 0 4px rgba(251, 140, 0, 0.45), 0 6px 20px rgba(14, 58, 86, 0.3);
}

.vision-foot {
    font-size: 0.8rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.62);
    padding: 14px 8px 2px 14px;
}

/* --- Facts strip ---
   Pulled up so the card straddles the bottom edge of the hero. The negative
   margin sits on the section itself (which stays transparent), so the hero
   shows through behind the top half of the card. */
.facts-section {
    padding: 0 32px;
    margin-top: -62px;
    z-index: 2;
}

.facts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.fact {
    position: relative;
    padding: 28px 28px 26px 32px;
    border-left: 1px solid var(--line);
    transition: background 0.25s ease;
}

.fact:first-child {
    border-left: none;
}

.fact::before {
    content: '';
    position: absolute;
    top: 0;
    left: 32px;
    right: 28px;
    height: 3px;
    background: var(--orange);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s var(--ease-out);
}

.fact:hover {
    background: var(--sky);
}

.fact:hover::before {
    transform: none;
}

.fact-value {
    font-size: 1.85rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: var(--navy);
    transition: color 0.25s ease, transform 0.35s var(--ease-out);
}

.fact:hover .fact-value {
    color: var(--blue);
    transform: translateX(3px);
}

.fact-value i {
    font-size: 0.62em;
    color: var(--orange);
    vertical-align: 0.14em;
}

.fact-label {
    font-size: 0.86rem;
    line-height: 1.45;
    color: var(--ink-2);
    margin-top: 6px;
}

/* --- Section headings --- */
.sec-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 56px;
    align-items: end;
    margin-bottom: 44px;
}

.sec-head-center {
    display: block;
    text-align: center;
    max-width: 660px;
    margin-left: auto;
    margin-right: auto;
}

.sec-heading {
    font-size: clamp(1.7rem, 3.2vw, 2.5rem);
    font-weight: 700;
    line-height: 1.26;
    letter-spacing: -0.015em;
    color: var(--ink);
}

.sec-heading-light {
    color: var(--white);
}

.sec-lead {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--ink-2);
}

.sec-head-center .sec-lead {
    margin-top: 14px;
}

/* --- Cataract --- */
.cataract-section {
    background: var(--white);
    padding-top: 96px;
}

.cataract-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: 24px;
    align-items: stretch;
}

.steps-card {
    background:
        radial-gradient(520px 300px at 100% 0%, rgba(32, 101, 141, 0.55) 0%, transparent 65%),
        var(--navy);
    color: var(--white);
    border-radius: var(--r-xl);
    padding: 36px 36px 30px;
}

.steps-title {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 20px;
}

.steps-list li {
    display: flex;
    gap: 20px;
    padding: 20px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.steps-list li:last-child {
    padding-bottom: 4px;
}

.step-num {
    font-size: 1.5rem;
    font-weight: 300;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--orange-hover);
    flex-shrink: 0;
    min-width: 40px;
    transition: transform 0.35s var(--ease-out), color 0.25s ease;
}

.steps-list li:hover .step-num {
    transform: translateX(5px);
    color: var(--white);
}

.step-name {
    font-size: 1.08rem;
    font-weight: 600;
    line-height: 1.35;
    margin-bottom: 6px;
}

.step-desc {
    font-size: 0.9rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.68);
    transition: color 0.25s ease;
}

.steps-list li:hover .step-desc {
    color: rgba(255, 255, 255, 0.86);
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.feature {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--sky);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 26px 24px 24px;
    transition: transform 0.35s var(--ease-out), border-radius 0.4s var(--ease-out), box-shadow 0.35s ease,
        background 0.3s ease, border-color 0.3s ease;
}

/* Iris rings that open up in the corner on hover. */
.feature::after {
    content: '';
    position: absolute;
    top: -70px;
    right: -70px;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    background: repeating-radial-gradient(circle at center, rgba(32, 101, 141, 0.16) 0 1px, transparent 1px 14px);
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.4s ease, transform 0.5s var(--ease-out);
    pointer-events: none;
}

.feature:hover {
    transform: translateY(-6px);
    border-radius: var(--r-lg-flip);
    background: var(--white);
    border-color: var(--blue-soft);
    box-shadow: var(--shadow);
}

.feature:hover::after {
    opacity: 1;
    transform: none;
}

.feature-icon {
    width: 46px;
    height: 46px;
    border-radius: var(--r-sm);
    background: var(--white);
    border: 1px solid var(--line);
    color: var(--blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    margin-bottom: 18px;
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, border-radius 0.4s var(--ease-out);
}

.feature:hover .feature-icon {
    background: var(--blue);
    border-color: var(--blue);
    color: var(--white);
    border-radius: var(--r-sm-flip);
}

/* Icon stays at the top, the text settles at the bottom of the tile. */
.feature-title {
    margin-top: auto;
    font-size: 1.04rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ink);
    margin-bottom: 6px;
}

.feature-desc {
    font-size: 0.88rem;
    line-height: 1.65;
    color: var(--ink-2);
}

.cta-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px 28px;
    margin-top: 36px;
}

.cta-note {
    font-size: 0.9rem;
    color: var(--ink-2);
}

.cta-note i {
    width: 28px;
    height: 28px;
    border-radius: var(--r-xs);
    background: var(--peach);
    color: var(--orange);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    margin-right: 8px;
}

/* --- Doctors --- */
.doctors-section {
    background: var(--sky);
}

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

.doc-card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    transition: transform 0.4s var(--ease-out), border-radius 0.45s var(--ease-out), box-shadow 0.35s ease,
        border-color 0.3s ease;
}

.doc-card:hover {
    transform: translateY(-8px);
    border-radius: var(--r-lg-flip);
    border-color: var(--blue-soft);
    box-shadow: var(--shadow);
}

.doc-figure {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--sky-2);
}

.doc-figure picture {
    position: absolute;
    inset: 0;
}

.doc-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    transition: transform 0.7s var(--ease-out);
}

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

/* Shade at the foot of the photo for the experience figure. */
.doc-figure::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 42%;
    background: linear-gradient(to top, rgba(14, 58, 86, 0.82) 0%, rgba(14, 58, 86, 0.35) 55%, transparent 100%);
    pointer-events: none;
}

.doc-tag {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 1;
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1;
    color: var(--ink);
    background: var(--orange);
    padding: 8px 12px 7px;
    border-radius: var(--r-xs);
    box-shadow: 0 6px 16px rgba(14, 58, 86, 0.22);
}

.doc-exp {
    position: absolute;
    left: 22px;
    bottom: 18px;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--white);
}

.doc-exp strong {
    font-size: 2.7rem;
    font-weight: 300;
    letter-spacing: -0.05em;
    line-height: 1;
}

.doc-exp span {
    font-size: 0.76rem;
    font-weight: 500;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.85);
}

.doc-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 22px 24px 20px;
}

.doc-name {
    font-size: 1.24rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.3;
    color: var(--ink);
}

.doc-role {
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--blue);
    margin-top: 4px;
}

.doc-creds {
    font-size: 0.8rem;
    line-height: 1.6;
    color: var(--ink-2);
    margin-top: 10px;
    margin-bottom: 18px;
}

.doc-where {
    margin-top: auto;
    padding-top: 15px;
    border-top: 1px solid var(--line);
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--ink-2);
}

.doc-where i {
    color: var(--orange);
    margin-right: 6px;
    font-size: 0.78rem;
}

.also-row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px 18px;
    margin-top: 48px;
}

.also-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ink);
}

.also-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.also-list li {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--blue-press);
    background: var(--white);
    border: 1px solid var(--line);
    padding: 6px 14px;
    border-radius: var(--r-xs);
    transition: background 0.2s, color 0.2s, border-color 0.2s, border-radius 0.3s var(--ease-out);
}

.also-list li:hover {
    background: var(--blue);
    border-color: var(--blue);
    color: var(--white);
    border-radius: var(--r-xs-flip);
}

/* --- Booking --- */
.booking-section {
    background:
        radial-gradient(820px 520px at 6% 0%, rgba(32, 101, 141, 0.5) 0%, transparent 62%),
        var(--navy);
    color: var(--white);
    /* clip, not hidden: a hidden box can be scrolled, and the jump to #book
       inside it would scroll the section's own content up */
    overflow: hidden;
    overflow: clip;
    isolation: isolate;
}

/* Room for the site's footer, which overlaps the section above it by 40px (main.css) */
.booking-section > .container {
    padding-bottom: 40px;
}

/* The eye at the foot of the left column, in the space under the copy (the
   form is taller), its left edge on the content's. The footer covers the
   last 40px. */
.booking-rings {
    --gap: 32px;
    left: calc(max(32px, (100% - 1160px) / 2) + var(--gap) * 1.6);
    bottom: 156px;
    width: 1000px;
    translate: -50% 50%;
    -webkit-mask-image: radial-gradient(closest-side, #000 45%, transparent);
    mask-image: radial-gradient(closest-side, #000 45%, transparent);
}

.booking-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 480px;
    gap: 64px;
    align-items: start;
}

.booking-copy {
    padding-top: 12px;
}

.booking-desc {
    font-size: 1.02rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.72);
    max-width: 470px;
    margin: 16px 0 32px;
}

.perks {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 34px;
}

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

.perk-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--r-sm);
    background: rgba(251, 140, 0, 0.12);
    border: 1px solid rgba(251, 140, 0, 0.32);
    color: var(--orange-hover);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    flex-shrink: 0;
    transition: background 0.3s ease, color 0.3s ease, border-radius 0.4s var(--ease-out);
}

.perk:hover .perk-icon {
    background: var(--orange);
    color: var(--ink);
    border-radius: var(--r-sm-flip);
}

.perk-title {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
}

.perk-desc {
    font-size: 0.86rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.62);
    margin-top: 2px;
}

.booking-contact {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 12px;
    padding-top: 26px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.86rem;
    color: rgba(255, 255, 255, 0.62);
}

.booking-contact a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--white);
    text-decoration: none;
    padding: 10px 16px;
    border-radius: var(--r-xs);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.18);
    transition: background 0.2s, border-color 0.2s, border-radius 0.3s var(--ease-out), transform 0.25s var(--ease-out);
}

.booking-contact a:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.4);
    border-radius: var(--r-xs-flip);
    transform: translateY(-2px);
}

.booking-contact a i {
    color: var(--orange-hover);
}

.booking-contact a i.fa-whatsapp {
    color: #25d366;
    font-size: 1rem;
}

.booking-card {
    background: var(--white);
    color: var(--ink);
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
}

.booking-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 24px 28px 20px 32px;
    background: var(--sky);
    border-bottom: 1px solid var(--line);
    border-top: 4px solid var(--orange);
}

.bch-title {
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.3;
    color: var(--ink);
}

.bch-sub {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--ink-2);
    margin-top: 3px;
}

.bch-sub i {
    color: var(--orange);
    font-size: 0.72rem;
    margin-right: 3px;
}

.bch-price {
    display: flex;
    align-items: baseline;
    gap: 7px;
    white-space: nowrap;
}

.bch-price s {
    font-size: 0.8rem;
    color: var(--ink-2);
}

.bch-price strong {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ink-2);
}

/* --- Appointment form --- */
.appt-form {
    padding: 24px 28px 28px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.appt-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.appt-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.appt-field label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ink-2);
}

.appt-field label span {
    color: var(--orange);
}

.appt-field label small {
    color: var(--ink-2);
    font-weight: 400;
}

.appt-field input,
.appt-field select,
.appt-field textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid #cfd8e2;
    border-radius: var(--r-xs);
    font-family: var(--font);
    font-size: 0.92rem;
    color: var(--ink);
    background: var(--white);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s, border-radius 0.3s var(--ease-out);
}

.appt-field input::placeholder,
.appt-field textarea::placeholder {
    color: #9aa5b1;
}

/* iOS Safari renders date/time inputs with native chrome that ignores
   width:100% and sizes to its content, pushing it out of the card. Reset the
   appearance and allow it to shrink so it respects the field width. */
.appt-field input[type="date"] {
    -webkit-appearance: none;
    appearance: none;
    min-width: 0;
    max-width: 100%;
    min-height: 44px;
    text-align: left;
}

.appt-field input[type="date"]::-webkit-date-and-time-value {
    text-align: left;
    width: 100%;
}

/* The browser's own select, drawn like the Select2 box below, so nothing
   moves when Select2 arrives (and it looks the same without JavaScript). */
.appt-field select {
    -webkit-appearance: none;
    appearance: none;
    min-width: 0;
    padding-right: 40px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2320658d' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 15px;
}

/* "Select a branch" in the placeholder colour, as in the Select2 box */
.appt-field select:invalid {
    color: #9aa5b1;
}

.appt-field select option {
    color: var(--ink);
}

.appt-field input:focus,
.appt-field select:focus,
.appt-field textarea:focus {
    border-color: var(--blue);
    border-radius: var(--r-xs-flip);
    box-shadow: 0 0 0 3px rgba(32, 101, 141, 0.13);
    background-color: var(--white);
}

.appt-field textarea {
    resize: vertical;
    min-height: 50px;
    line-height: 1.5;
}

.appt-error {
    display: none;
    background: #fff1ef;
    color: var(--error);
    border-radius: var(--r-xs);
    padding: 10px 13px;
    font-size: 0.84rem;
    line-height: 1.45;
}

.appt-error.is-shown {
    display: block;
}

/* Spam trap: kept off screen so only bots fill it in */
.appt-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.appt-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 16px 20px;
    margin-top: 2px;
    background: linear-gradient(180deg, var(--orange-hover) 0%, var(--orange) 100%);
    color: var(--ink);
    border: none;
    border-radius: var(--r-sm);
    font-family: var(--font);
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 10px 26px rgba(251, 140, 0, 0.34);
    transition: transform 0.25s var(--ease-out), border-radius 0.3s var(--ease-out), box-shadow 0.2s, opacity 0.15s;
}

.appt-submit:hover:not(:disabled) {
    transform: translateY(-2px);
    border-radius: var(--r-sm-flip);
    box-shadow: 0 14px 32px rgba(251, 140, 0, 0.44);
}

.appt-submit:disabled {
    opacity: 0.75;
    cursor: not-allowed;
}

.appt-submit.is-loading i {
    animation: apptSpin 0.8s linear infinite;
}

@keyframes apptSpin {
    to {
        transform: rotate(360deg);
    }
}

.appt-secure {
    text-align: center;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--ink-2);
}

.appt-secure i {
    color: var(--ok);
    margin-right: 3px;
}

/* --- Sticky booking bar (mobile only) ---
   Outside <main class="appt">, so it sets the page's font itself. */
.bottom-bar {
    display: none;
    font-family: var(--font);
}

/* --- Scroll reveal (only when JS is running) --- */
.js .reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* index.js drops the reveal classes once the fade has finished, so cards get
   their own hover transitions back. */
.js .reveal.is-in {
    opacity: 1;
    transform: none;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(22px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.hero-content > * {
    animation: fadeUp 0.7s ease both;
}

.hero-content > *:nth-child(2) { animation-delay: 0.08s; }
.hero-content > *:nth-child(3) { animation-delay: 0.16s; }
.hero-content > *:nth-child(4) { animation-delay: 0.24s; }
.hero-content > *:nth-child(5) { animation-delay: 0.32s; }
.hero-content > *:nth-child(6) { animation-delay: 0.4s; }

.vision-card {
    animation: fadeUp 0.8s 0.25s ease both;
}

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

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

    .js .smark .smark-text,
    .js .smark .smark-icon i {
        filter: none;
        opacity: 1;
        transform: none;
    }
}

/* =====================================================================
   Select boxes (Select2, theme "sd") and the date (flatpickr)
   main.js loads both as the form comes near the screen, as on the other
   pages of the site, and hands them every select and date field. The boxes
   look like the other fields of this form; the lists open as cards.
   ===================================================================== */

.select2-container--sd {
    display: block;
    font-family: var(--font);
}

.select2-container--sd .select2-selection--single {
    display: flex;
    align-items: center;
    height: auto;
    min-height: 44px;
    padding: 0 40px 0 14px;
    border: 1.5px solid #cfd8e2;
    border-radius: var(--r-xs);
    background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2320658d' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 15px;
    color: var(--ink);
    font-size: 0.92rem;
    line-height: 1.4;
    cursor: pointer;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s, border-radius 0.3s var(--ease-out);
}

.select2-container--sd .select2-selection--single .select2-selection__rendered {
    flex: 1;
    min-width: 0;
    padding: 0;
    color: var(--ink);
    line-height: inherit;
}

.select2-container--sd .select2-selection__placeholder {
    color: #9aa5b1;
}

.select2-container--sd .select2-selection__arrow {
    display: none;
}

.select2-container--sd.select2-container--focus .select2-selection--single,
.select2-container--sd.select2-container--open .select2-selection--single {
    border-color: var(--blue);
    border-radius: var(--r-xs-flip);
    box-shadow: 0 0 0 3px rgba(32, 101, 141, 0.13);
    background-color: var(--white);
}

.select2-container--sd.select2-container--open .select2-selection--single {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2320658d' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 15 6-6 6 6'/%3E%3C/svg%3E");
}

.select2-container--sd.select2-container--open .select2-dropdown {
    overflow: hidden;
    border: 1.5px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--white);
    box-shadow: 0 22px 54px rgba(14, 58, 86, 0.2), 0 2px 6px rgba(14, 58, 86, 0.06);
    font-family: var(--font);
}

.select2-container--sd .select2-dropdown--below {
    margin-top: 6px;
}

.select2-container--sd .select2-dropdown--above {
    margin-top: -6px;
}

.select2-container--sd .select2-results > .select2-results__options {
    max-height: min(300px, 45vh);
    padding: 6px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.select2-container--sd .select2-results__option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--r-xs);
    font-size: 0.9rem;
    line-height: 1.35;
    color: var(--ink);
    white-space: nowrap;
}

.select2-container--sd .select2-results__option--highlighted {
    background: var(--sky);
    color: var(--navy);
}

.select2-container--sd .select2-results__option--selected {
    font-weight: 600;
    color: var(--blue);
}

/* A tick beside the current choice */
.select2-container--sd .select2-results__option--selected::after {
    content: "";
    flex: none;
    width: 6px;
    height: 11px;
    margin: -3px 4px 0 auto;
    border: solid currentColor;
    border-width: 0 2.2px 2.2px 0;
    transform: rotate(45deg);
}

.select2-container--sd .select2-results__option--disabled {
    color: #9aa5b1;
}

/* The date: the box shows the day in words, with a calendar */
.appt-field input.fp-alt {
    padding-right: 38px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2320658d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='3'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4M8 14h2.5M13.5 14H16M8 17h2.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
    background-size: 20px;
}

.appt-field input.fp-alt.active {
    border-color: var(--blue);
    border-radius: var(--r-xs-flip);
    box-shadow: 0 0 0 3px rgba(32, 101, 141, 0.13);
    background-color: var(--white);
}

.flatpickr-calendar {
    padding: 8px 0 10px;
    border-radius: var(--r-md);
    font-family: var(--font);
    color: var(--ink);
    box-shadow: 0 0 0 1.5px var(--line), 0 22px 54px rgba(14, 58, 86, 0.2), 0 2px 6px rgba(14, 58, 86, 0.06);
}

.flatpickr-calendar::before,
.flatpickr-calendar::after {
    display: none;
}

.flatpickr-calendar.arrowTop {
    margin-top: 6px;
}

.flatpickr-calendar.arrowBottom {
    margin-top: -6px;
}

.flatpickr-months .flatpickr-month {
    height: 40px;
    color: var(--ink);
}

.flatpickr-current-month {
    padding-top: 10px;
    font-family: var(--font);
    font-size: 1rem;
    font-weight: 700;
    line-height: inherit;
}

.flatpickr-current-month span.cur-month,
.flatpickr-current-month input.cur-year {
    font-weight: 700;
}

.flatpickr-current-month span.cur-month:hover {
    background: none;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    top: 10px;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: var(--r-xs);
    color: var(--blue);
    transition: background-color 0.2s, border-radius 0.3s var(--ease-out);
}

.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month {
    left: 8px;
}

.flatpickr-months .flatpickr-next-month.flatpickr-next-month {
    right: 8px;
}

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
    background: var(--sky);
    color: var(--blue-press);
    border-radius: var(--r-xs-flip);
}

/* The arrows are the site's own icons (partials/icons.php) */
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg,
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.flatpickr-weekdays {
    height: 32px;
}

span.flatpickr-weekday {
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--ink-2);
}

.flatpickr-day {
    border-radius: var(--r-xs);
    font-size: 0.86rem;
    color: var(--ink);
}

.flatpickr-day:hover,
.flatpickr-day:focus,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover,
.flatpickr-day.prevMonthDay:focus,
.flatpickr-day.nextMonthDay:focus {
    background: var(--sky);
    border-color: var(--sky);
    border-radius: var(--r-xs-flip);
}

.flatpickr-day.today {
    border-color: var(--orange);
}

.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
    background: var(--peach);
    border-color: var(--orange);
    color: var(--ink);
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.selected.nextMonthDay {
    background: var(--blue);
    border-color: var(--blue);
    color: var(--white);
    font-weight: 600;
}

.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: rgba(31, 42, 55, 0.38);
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
    color: rgba(31, 42, 55, 0.2);
    background: none;
    border-color: transparent;
}

/* =====================================================================
   Responsive
   ===================================================================== */

@media (max-width: 1080px) {
    .hero-inner {
        gap: 44px;
    }

    .hero-rings {
        --card: min(460px, (100% - 108px) * 0.44);
    }

    .booking-inner {
        grid-template-columns: minmax(0, 1fr) 440px;
        gap: 44px;
    }

    .docs-grid {
        gap: 20px;
    }

    .doc-body {
        padding: 20px 20px 18px;
    }

    .doc-exp strong {
        font-size: 2.3rem;
    }
}

@media (max-width: 920px) {
    :where(.appt) section {
        padding: 68px 24px;
    }

    .hero {
        padding: calc(var(--header-h) + 44px) 24px 148px;
    }

    .hero-inner {
        grid-template-columns: 1fr;
        gap: 44px;
    }

    .hero-visual {
        justify-content: flex-start;
    }

    /* The card now starts at the left */
    .hero-rings {
        right: auto;
        left: calc(24px + min(460px, 100% - 48px) / 2);
        bottom: calc(62px + (148px - 62px) / 2);
        translate: -50% 50%;
    }

    /* One column, the form right under the copy: the eye goes up beside
       the short section label */
    .booking-rings {
        left: auto;
        right: 70px;
        top: calc(68px + 34px / 2);
        bottom: auto;
        translate: 50% -50%;
    }

    .facts-section {
        padding: 0 24px;
    }

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

    .fact:nth-child(3) {
        border-left: none;
    }

    .fact:nth-child(n + 3) {
        border-top: 1px solid var(--line);
    }

    .sec-head {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-bottom: 36px;
    }

    .cataract-section {
        padding-top: 76px;
    }

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

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

    /* Third card sits centred under the first two. */
    .doc-card:last-child {
        grid-column: 1 / -1;
        width: calc(50% - 10px);
        justify-self: center;
    }

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

    .booking-copy {
        padding-top: 0;
    }
}

@media (max-width: 760px) {
    /* Prevent mobile browsers from auto-zooming when a field is focused.
       They do this whenever the input font-size is below 16px. */
    .appt-field input,
    .appt-field select,
    .appt-field textarea,
    .select2-container--sd .select2-selection--single {
        font-size: 16px;
    }

    .bottom-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 850;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 14px;
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        background: var(--navy);
        border-top: 2px solid var(--orange);
        box-shadow: 0 -8px 28px rgba(14, 58, 86, 0.3);
        transform: translateY(110%);
        transition: transform 0.3s ease;
    }

    .bottom-bar.is-visible {
        transform: none;
    }

    .bottom-bar-text {
        flex: 1;
        min-width: 0;
        line-height: 1.2;
    }

    .bottom-bar-title {
        font-size: 0.95rem;
        font-weight: 700;
        letter-spacing: -0.01em;
        color: var(--white);
    }

    .bottom-bar-price {
        display: flex;
        align-items: baseline;
        gap: 6px;
        margin-top: 3px;
        font-size: 0.74rem;
        color: rgba(255, 255, 255, 0.62);
    }

    .bottom-bar-price s {
        color: rgba(255, 255, 255, 0.42);
    }

    .bottom-bar-call {
        width: 44px;
        height: 44px;
        border-radius: var(--r-xs);
        border: 1px solid rgba(255, 255, 255, 0.24);
        color: var(--white);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.9rem;
        text-decoration: none;
        flex-shrink: 0;
    }

    .bottom-bar-call:hover {
        color: var(--white);
    }

    .bottom-bar .appt-btn {
        padding: 13px 18px;
        font-size: 0.88rem;
    }

    /* While the bar shows (appointment.js sets has-booking-bar), the site's
       WhatsApp button moves up above it, and the footer's last line stays
       clear of both. The bar is about 68px tall. */
    .has-booking-bar .wa-float {
        bottom: calc(82px + env(safe-area-inset-bottom, 0px));
    }

    /* The "nearest to you" notice (main.css) stays above both */
    .has-booking-bar .near {
        bottom: calc(146px + env(safe-area-inset-bottom, 0px));
    }

    .site-footer {
        padding-bottom: calc(142px + env(safe-area-inset-bottom, 0px));
    }
}

@media (max-width: 600px) {
    :root {
        --r-xl: 32px 5px;
        --r-xl-flip: 5px 32px;
        --r-lg: 26px 4px;
        --r-lg-flip: 4px 26px;
    }

    :where(.appt) section {
        padding: 56px 18px;
    }

    .hero {
        padding: calc(var(--header-h) + 32px) 18px 140px;
    }

    /* The card runs the full width; the facts card overlaps 56px here */
    .hero-rings {
        left: 50%;
        bottom: calc(56px + (140px - 56px) / 2);
    }

    .booking-rings {
        top: calc(56px + 30px / 2);
    }

    .smark {
        gap: 10px;
        margin-bottom: 14px;
    }

    .smark-icon {
        width: 30px;
        height: 30px;
        font-size: 0.78rem;
    }

    .smark-text {
        font-size: 0.88rem;
    }

    .hero h1 {
        font-size: 1.95rem;
        line-height: 1.28;
        margin-bottom: 16px;
    }

    .hero-lead {
        font-size: 0.98rem;
        margin-bottom: 22px;
    }

    .symptoms {
        gap: 8px;
        margin-bottom: 26px;
    }

    .symptoms li {
        font-size: 0.82rem;
        padding: 7px 13px 6px 11px;
    }

    .hero-ctas .appt-btn {
        flex: 1 1 100%;
    }

    .vision-card {
        max-width: 100%;
        padding: 12px;
    }

    .vision-head {
        padding: 4px 6px 12px 10px;
    }

    .vision-title {
        font-size: 0.88rem;
    }

    .facts-section {
        padding: 0 18px;
        margin-top: -56px;
    }

    .fact {
        padding: 20px 16px 18px 20px;
    }

    .fact::before {
        left: 20px;
        right: 16px;
    }

    .fact-value {
        font-size: 1.45rem;
    }

    .fact-label {
        font-size: 0.78rem;
    }

    .cataract-section {
        padding-top: 64px;
    }

    .steps-card {
        padding: 28px 22px 22px;
    }

    .steps-list li {
        gap: 14px;
    }

    .feature-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .feature {
        display: grid;
        grid-template-columns: 46px 1fr;
        column-gap: 16px;
        padding: 20px 18px;
    }

    .feature-icon {
        grid-row: span 2;
        margin-bottom: 0;
    }

    .cta-row .appt-btn {
        width: 100%;
        white-space: normal;
        text-align: center;
    }

    .docs-grid {
        grid-template-columns: minmax(0, 1fr);
        max-width: 420px;
        margin: 0 auto;
    }

    .doc-card:last-child {
        grid-column: auto;
        width: auto;
    }

    .also-row {
        margin-top: 36px;
    }

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

    .appt-form {
        padding: 20px 18px 22px;
    }

    .booking-card-header {
        padding: 18px 18px 16px 22px;
    }

    .appt-field input,
    .appt-field select,
    .appt-field textarea {
        padding: 13px 14px;
    }

    .appt-field input,
    .appt-field select,
    .select2-container--sd .select2-selection--single {
        min-height: 51px;
    }
}

@media (max-width: 360px) {
    .hero h1 {
        font-size: 1.72rem;
    }
}