/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root {
    --green: #5eb640;
    --green-hover: #4fa233;
    --green-darker: #214016;
    --green-light: #eff8ec;
    --green-light2: #e7f4e2;
    --blue: #064f8f;
    --blue-light: #e6edf4;
    --ink-900: #24282c;
    --ink-800: #3d4349;
    --ink-600: #515961;
    --stroke: #dfe3e6;

    /* The soft green wash shared by the hero and the why-choose section
     (was previously copy-pasted in both places). */
    --green-wash: linear-gradient(90deg,
            rgba(217, 238, 210, 1) 0%,
            rgba(217, 238, 210, 1) 35%,
            rgba(217, 238, 210, 0) 75%);
    --radius-card: 20px;
    --radius-btn: 15px;
}

/* ============================================================
   2. BASE
   ============================================================ */
body {
    font-family: 'Fustat', sans-serif;
    color: var(--ink-900);
}
html,
body {
    overflow-x: clip;
}

/* ============================================================
   3. SHARED UTILITIES
   ============================================================ */

.w-full-mobile {
    display: block;
    width: 100%;
    text-align: center;
    justify-content: center;
}

@media (min-width: 768px) {
    .w-full-mobile {
        display: revert;
        width: auto;
    }
}

/* Standard screen-reader-only utility (used for the contact-form
   honeypot and any other visually hidden but accessible content). */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Section heading: giant gradient "background word" behind a real heading.
   (Was: .section-title + repeated inline text-align styles.) */
.section-title {
    position: relative;
    text-align: center;
    margin-bottom: 2.5rem;
}

.section-title .bg-word {
    position: absolute;
    top: -2.2rem;
    left: 50%;
    transform: translateX(-50%);
    font-weight: 800;
    font-size: clamp(2.5rem, 8vw, 6.5rem);
    line-height: 1;
    white-space: nowrap;
    background: linear-gradient(105deg, #064f8f 28%, #5eb640 106%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    opacity: .30;
    pointer-events: none;
    z-index: 0;
}

.section-title h2 {
    position: relative;
    z-index: 1;
    font-weight: 700;
    font-size: clamp(1.6rem, 3vw, 2rem);
    padding-top: 1.5rem;
}

.section-title p {
    position: relative;
    z-index: 1;
    color: var(--ink-600);
}

/* Left-aligned variants (replace inline style="text-align:left;"). */
.heading-left {
    text-align: left;
}

.bg-word-left {
    text-align: left !important;
}

/* Recurring body paragraph style (was repeated inline on ~7 paragraphs). */
.section-body-text {
    color: var(--ink-600);
    font-size: 1.05rem;
}

/* Ink text colors (was inline style="color:var(--ink-800);" on card titles). */
.ink-800 {
    color: var(--ink-800);
}

/* ============================================================
   4. COMPONENTS — buttons
   ============================================================ */
.btn-primary {
    background: var(--green);
    color: #fff;
    border-radius: var(--radius-btn);
    font-weight: 700;
    padding: .7rem 1.3rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border: none;
    white-space: nowrap;
    text-decoration: none;
}

.btn-primary:hover {
    background: var(--green-hover);
    color: #fff;
}

.btn-eye-outline {
    background: var(--green-light);
    color: var(--green);
    border: 0.4px solid var(--green);
    border-radius: var(--radius-btn);
    font-weight: 700;
    padding: .7rem 1.7rem;
    white-space: nowrap;
    text-decoration: none;
}

.btn-eye-outline:hover {
    background: var(--green-light2);
    color: var(--green);
}

/* White outline variant of the outline button (e.g. on tinted CTA bands). */
.btn-white-outline {
    background: #fff;
}

.btn-white-outline:hover {
    background: var(--green-light);
}

.btn-eye-ghost {
    background: transparent;
    color: var(--green);
    font-weight: 700;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: 0;
    text-decoration: none;
}

/* Bootstrap pagination retinted to the brand green instead of the default
   blue. Overrides Bootstrap's own --bs-pagination-* custom properties, which
   this stylesheet can do because main.css loads after bootstrap.min.css. */
.pagination {
    --bs-pagination-color: var(--green);
    --bs-pagination-hover-color: var(--green-hover);
    --bs-pagination-hover-bg: var(--green-light);
    --bs-pagination-hover-border-color: var(--green);
    --bs-pagination-focus-color: var(--green-hover);
    --bs-pagination-focus-bg: var(--green-light);
    --bs-pagination-focus-box-shadow: 0 0 0 .25rem var(--green-light2);
    --bs-pagination-active-color: #fff;
    --bs-pagination-active-bg: var(--green);
    --bs-pagination-active-border-color: var(--green);
    --bs-pagination-disabled-color: var(--ink-600);
    --bs-pagination-disabled-bg: #fff;
    --bs-pagination-disabled-border-color: var(--stroke);
}

/* ============================================================
   5. SECTION: top info bar
   ============================================================ */
.topbar {
    background: var(--green-darker);
    color: rgba(255, 255, 255, .85);
    font-size: .85rem;
}

.topbar a {
    color: rgba(255, 255, 255, .85);
    text-decoration: none;
}

.topbar a:hover {
    color: #fff;
}

/* ============================================================
   6. SECTION: navbar
   ============================================================ */
.navbar-eye {
    border-bottom: 1px solid rgba(223, 227, 230, .9);
    box-shadow: 0 4px 2px rgba(0, 0, 0, .05);
}

.navbar-eye .nav-link {
    color: var(--ink-900);
    font-size: .95rem;
    font-weight: 500;
}

.navbar-eye .nav-link.text-green,
.navbar-eye .nav-link:hover {
    color: var(--green);
}

.navbar-brand img {
    height: 55px;
}

/* Mobile menu (offcanvas) — below lg only; the desktop navbar above is left
   untouched. The panel is fullscreen with the standard dimmed backdrop. */
#mobileNav {
    --bs-offcanvas-width: 100%;
}

#mobileNav .offcanvas-header {
    padding-top: .75rem;
    padding-bottom: .75rem;
}

/* Column body, so the CTA can be pushed to the bottom with margin-top:auto. */
#mobileNav .offcanvas-body {
    display: flex;
    flex-direction: column;
}

.nav-drawer-link {
    display: flex;
    align-items: center;
    padding: .75rem 0;
    color: var(--ink-900);
    font-size: 1.05rem;
    font-weight: 500;
    text-decoration: none;
}

.nav-drawer-link:hover {
    color: var(--green);
}

.nav-drawer-link.is-active {
    color: var(--green);
    font-weight: 700;
}

.nav-drawer-caret {
    margin-left: .4rem;
    font-size: .8em;
    transition: transform .2s ease;
}

.nav-drawer-link[aria-expanded="true"] .nav-drawer-caret {
    transform: rotate(180deg);
}

/* Services submenu opens inline, indented under its own link. */
.nav-drawer-submenu a {
    display: block;
    padding: .45rem 0 .45rem 1rem;
    color: var(--ink-600);
    font-size: .95rem;
    text-decoration: none;
}

.nav-drawer-submenu a:hover {
    color: var(--green);
}

.nav-drawer-cta {
    margin-top: auto;
    padding: 2rem 0 3rem;
}

/* ============================================================
   7. SECTION: hero
   ============================================================ */
.hero {
    position: relative;
    background: var(--green-wash),
    url("../images/hero-background.webp") no-repeat right center;
    background-size: cover;
    overflow: hidden;
}

.hero>.container {
    position: relative;
    z-index: 2;
}

.hero h1 {
    font-weight: 800;
    font-size: clamp(2.2rem, 5vw, 4rem);
    line-height: 1.15;
}

.hero .lead {
    color: var(--ink-600);
    font-size: 1.15rem;
}

/* Constrained hero paragraph (was inline style="max-width:560px;"). */
.hero-lead {
    max-width: 560px;
}

/* Cutout anchored to the bottom-right of the section, bleeding off the
   right edge and sitting on top of the blurred background image. */
.hero-img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    max-width: 56%;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    pointer-events: none;
    z-index: 1;
}

.hero-img img {
    display: block;
    height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: bottom right;
}

/* ============================================================
   7b. SECTION: hero-others (interior pages)
   Shared interior-page hero: breadcrumb + page title over the same
   green-wash / blurred-photo background as the home hero.
   ============================================================ */
.hero-others {
    position: relative;
    background:
        var(--green-wash),
        url("../images/hero-background.webp") no-repeat right center;
    background-size: cover;
    overflow: hidden;
}

.hero-others>.container {
    position: relative;
    z-index: 2;
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.hero-others-breadcrumb {
    font-size: .95rem;
    color: var(--ink-600);
    margin-bottom: 1.5rem;
}

.hero-others-breadcrumb a {
    color: inherit;
    text-decoration: none;
}

.hero-others-breadcrumb a:hover {
    color: var(--green);
}

.hero-others h1 {
    font-weight: 800;
    font-size: clamp(2.2rem, 5vw, 3.5rem);
    line-height: 1.15;
    max-width: 560px;
}

.hero-others-subtitle {
    color: var(--ink-600);
    font-size: 1.1rem;
    margin-top: 1.25rem;
    margin-bottom: 0;
    max-width: 560px;
}

/* Service detail hero with a bleed-out cutout (same pattern as the home
   .hero): copy is constrained to the left column while the uploaded
   hero image is pinned bottom-right, bleeding off the edge. Without an
   image the section renders exactly as before. */
.hero-others.has-hero-img>.container {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

@media (max-width: 991.98px) {
    .hero-others.has-hero-img>.container {
        padding-bottom: 2rem;
    }
}

/* ============================================================
   8. SECTION: who we are / insurance images
   ============================================================ */
.rounded-portrait {
    border-radius: var(--radius-card);
    overflow: hidden;
}

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

/* Fixed-height portrait (was inline style="height:420px;"). */
.portrait-lg {
    height: 420px;
}

.checklist li {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    margin-bottom: .7rem;
    color: var(--ink-800);
}

.checklist li::before {
    content: "";
    flex: none;
    width: 16px;
    height: 16px;
    margin-top: .2rem;
    background: var(--green);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm-1.2 14.6-4.2-4.2 1.4-1.4 2.8 2.8 6-6 1.4 1.4z'/%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 fill='black' d='M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm-1.2 14.6-4.2-4.2 1.4-1.4 2.8 2.8 6-6 1.4 1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Pricing / insurance cards */
.info-card {
    background: #fff;
    border: 1px solid var(--stroke);
    border-radius: var(--radius-card);
    padding: 1.7rem 1.3rem;
    height: 100%;
}

.info-card h6 {
    font-weight: 700;
    color: var(--ink-800);
    font-size: 1.1rem;
}

/* Larger standalone heading (was inline style="font-size:2rem;"). */
.h2-xl {
    font-size: 2rem;
}

/* ============================================================
   9. SECTION: services cards
   ============================================================ */
.service-card {
    background: #fff;
    border: 1px solid var(--stroke);
    border-radius: var(--radius-card);
    padding: 2rem 1.6rem 1.2rem;
    height: 100%;
    transition: transform .35s var(--ease-motion),
        box-shadow .35s var(--ease-motion),
        border-color .35s var(--ease-motion);
}

.service-card img.icon {
    height: 96px;
    width: auto;
    object-fit: contain;
    margin-bottom: 1rem;
    transition: transform .35s var(--ease-motion);
}

.service-card h5 {
    font-weight: 700;
    color: var(--ink-800);
}

.service-card p {
    color: var(--ink-600);
    font-size: .92rem;
}

/* Hover lift. Three small cues, no layout shift: the card rises, its border
   warms to the brand green and the shadow is tinted with --green-darker
   instead of neutral black so it stays in the palette. The icon grows a
   touch and the ghost-link arrow slides right — the arrow had no hover
   state of its own before.

   `hover: hover` is what keeps this off phones: on touch screens a tap
   would otherwise leave the card stuck in its lifted state. :focus-within
   gives keyboard users the same feedback when they tab to "Learn more".
   --ease-motion matches the AOS reveals, so the card settles rather than
   snaps. */
.service-card .btn-eye-ghost i {
    transition: transform .35s var(--ease-motion);
}

.service-card:focus-within {
    border-color: var(--green);
    box-shadow: 0 18px 34px -14px rgba(33, 64, 22, .35);
}

.service-card:focus-within img.icon {
    transform: scale(1.06);
}

.service-card:focus-within .btn-eye-ghost i {
    transform: translateX(4px);
}

@media (hover: hover) {
    .service-card:hover {
        transform: translateY(-6px);
        border-color: var(--green);
        box-shadow: 0 18px 34px -14px rgba(33, 64, 22, .35);
    }

    .service-card:hover img.icon {
        transform: scale(1.06);
    }

    .service-card:hover .btn-eye-ghost i {
        transform: translateX(4px);
    }
}

/* Keep the border/shadow cue, drop the movement. */
@media (prefers-reduced-motion: reduce) {

    .service-card,
    .service-card img.icon,
    .service-card .btn-eye-ghost i {
        transition: none;
    }

    .service-card:hover,
    .service-card:focus-within,
    .service-card:hover img.icon,
    .service-card:focus-within img.icon,
    .service-card:hover .btn-eye-ghost i,
    .service-card:focus-within .btn-eye-ghost i {
        transform: none;
    }
}

/* ============================================================
   10. SECTION: mobile stats strip
   ============================================================ */
.mobile-stats {
    background: var(--green-darker);
    color: #fff;
}

.stat-number {
    font-size: 2rem;
}

.stat-label {
    font-size: 1.05rem;
}

/* ============================================================
   11. SECTION: why choose us
   ============================================================ */
/* Hero treatment: green wash gradient + photo cutout bleeding off the right
   edge and sitting flush with the section bottom. */
.why-choose {
    position: relative;
    background: var(--green-wash);
    overflow: hidden;
}

.why-choose>.container {
    position: relative;
    z-index: 2;
}

.why-choose-img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    max-width: 62%;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    pointer-events: none;
    z-index: 1;
}

.why-choose-img img {
    display: block;
    height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: bottom right;
}

/* ============================================================
   12. SECTION: online consultation
   ============================================================ */
/* Soft green wash anchored to the top-right corner, same colour as the
   hero / why-choose gradient. */
.consult {
    position: relative;
    background-image: radial-gradient(45% 35% at 100% 0%,
            rgba(217, 238, 210, .90) 0%,
            rgba(217, 238, 210, .45) 55%,
            rgba(217, 238, 210, 0) 100%);
    background-repeat: no-repeat;
}

/* ============================================================
   13. SECTION: FAQ
   ============================================================ */
.accordion-eye .accordion-item {
    border: 1px solid var(--stroke);
    border-radius: var(--radius-card) !important;
    margin-bottom: 1.1rem;
    overflow: hidden;
}

.accordion-eye .accordion-button {
    font-weight: 500;
    color: var(--ink-900);
    font-size: 1.05rem;
    border-radius: var(--radius-card) !important;
}

.accordion-eye .accordion-button:not(.collapsed) {
    background: #fff;
    color: var(--ink-900);
    box-shadow: none;
}

.accordion-eye .accordion-button:focus {
    box-shadow: none;
}

.accordion-eye .accordion-body {
    color: var(--ink-600);
    padding-top: 0;
}

/* ============================================================
   14. SECTION: reviews
   ============================================================ */
.review-card {
    background: var(--green-light);
    border-radius: var(--radius-btn);
    padding: 1.4rem 1.4rem 1.7rem;
    height: 100%;
}

.quote-badge {
    background: var(--green);
    color: #fff;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    font-weight: 700;
}

.stars i {
    color: #ffcc00;
}

.review-card p.body {
    color: #363636;
}

#reviewsCarousel .carousel-indicators [data-bs-target] {
    background-color: #c9cccc;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

#reviewsCarousel .carousel-indicators .active {
    background-color: var(--green);
}

/* Keeps the dots in-flow below the carousel (was inline style="bottom:0;"). */
.indicators-pin {
    bottom: 0;
}

/* ============================================================
   15. SECTION: resources
   ============================================================ */
.resource-card {
    position: relative;
    border-radius: 30px;
    overflow: visible;
}

.resource-card .top-img {
    border-radius: 30px;
    overflow: hidden;
    height: 220px;
}

.resource-card .top-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.resource-card .content-box {
    background: #fff;
    border-radius: 30px;
    box-shadow: 0 4px 25px rgba(0, 0, 0, .08);
    margin-top: -60px;
    position: relative;
    z-index: 2;
    padding: 1.6rem 1.4rem;
}

.tag-pill {
    background: var(--blue-light);
    color: var(--blue);
    border-radius: 30px;
    padding: .4rem 1rem;
    font-size: .9rem;
    display: inline-block;
}

/* ============================================================
   16. SECTION: footer
   ============================================================ */
footer.site-footer {
    background: var(--green-darker);
    color: rgba(255, 255, 255, .85);
}

footer.site-footer h6 {
    color: #fff;
    font-weight: 700;
}

footer.site-footer a {
    color: rgba(255, 255, 255, .7);
    text-decoration: none;
    font-size: .9rem;
}

footer.site-footer a:hover {
    color: #fff;
}

/* Footer logo (was inline style="height:55px; background:#fff; ..."). */
.footer-logo {
    height: 55px;
    background: #fff;
    border-radius: 6px;
    padding: 4px;
}

.social-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--green);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.social-btn:hover {
    color: #fff;
    opacity: .85;
}

.newsletter-input {
    border-radius: 40px;
    border: 1px solid rgba(255, 255, 255, .5);
    background: transparent;
    color: #fff;
    padding: .8rem 1.3rem;
}

.newsletter-input::placeholder {
    color: rgba(255, 255, 255, .7);
}

/* Newsletter submit button (was inline width/height/background/color). */
.newsletter-btn {
    width: 38px;
    height: 38px;
    background: var(--green);
    color: #fff;
}

/* Newsletter form constraint (was inline style="max-width:360px;"). */
.newsletter-form {
    max-width: 360px;
}

/* Toggler icon (was inline style="border:none; font-size:1.3rem;"). */
.toggler-grid {
    border: none;
    font-size: 1.3rem;
}

/* ============================================================
   19. SECTION: CTA band
   Reusable full-bleed call-to-action strip: heading + text on the
   left, action buttons on the right (stacked full-width on mobile
   via the shared .w-full-mobile utility).
   ============================================================ */
.cta-band {
    background: var(--green-light);
}

.cta-band-title {
    font-weight: 800;
    font-size: clamp(1.5rem, 3vw, 1.9rem);
    margin-bottom: .5rem;
}

.cta-band-text {
    color: var(--ink-600);
    font-size: 1.05rem;
    max-width: 560px;
    margin-bottom: 0;
}

/* Diagonal green wash behind the whole About page content: strongest
   in the top-left, fading out diagonally like the mockup. */
.about-page {
    background:
        linear-gradient(135deg,
            rgba(217, 238, 210, .9) 0%,
            rgba(233, 244, 227, .45) 30%,
            rgba(255, 255, 255, 0) 60%);
}

/* ============================================================
   21. SECTION: resource article + comments
   ============================================================ */
.resource-article-content p {
    margin-bottom: 1rem;
}

.resource-article-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-btn);
}

/* Legal pages are rich text authored in CKEditor, which produces real
   heading and list markup. Until this existed the stylesheet only handled
   <p> and <img>, so every <h2>/<ul> in a legal document fell back to
   browser defaults and the pages read as unstyled. Sizes follow the
   section-title scale and the colours come from the shared tokens. */
.resource-article-content h2,
.resource-article-content h3,
.resource-article-content h4 {
    color: var(--ink-900);
    font-weight: 700;
    line-height: 1.3;
    margin-top: 2rem;
    margin-bottom: .75rem;
}

.resource-article-content h2 {
    font-size: clamp(1.35rem, 2.4vw, 1.7rem);
}

/* h2 opens each top-level section; a leading one has nothing above it. */
.resource-article-content > h2:first-child {
    margin-top: 0;
}

.resource-article-content h3 {
    font-size: 1.2rem;
}

.resource-article-content h4 {
    font-size: 1.05rem;
}

.resource-article-content ul,
.resource-article-content ol {
    margin: 0 0 1rem;
    padding-left: 1.35rem;
}

.resource-article-content li {
    margin-bottom: .4rem;
}

.resource-article-content li:last-child {
    margin-bottom: 0;
}

.resource-article-content a {
    color: var(--blue);
    text-decoration: underline;
}

.resource-article-content a:hover {
    color: var(--green-hover);
}

/* No trailing gap under the final block. */
.resource-article-content > :last-child {
    margin-bottom: 0;
}

/* Legal copy is a lot of unbroken reading; keep long URLs and words from
   pushing the layout wide on small screens. */
.resource-article-content {
    overflow-wrap: break-word;
}

/* Tinted reader-comment card: message on top, author pinned to the
   bottom of a min-height card. */
.comment-card {
    background: var(--green-light);
    border-radius: var(--radius-card);
    padding: 1.5rem;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.5rem;
}

.comment-card-author {
    font-weight: 700;
    color: var(--ink-900);
}

/* ============================================================
   20. SECTION: about / doctor profile
   Scoped to the About page: framed portrait, clinical focus,
   education, and the personal note quote.
   ============================================================ */
.doctor-profile-title {
    font-weight: 800;
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    margin-bottom: 1.25rem;
}

/* White frame around the portrait: the frame and the image share the
   asymmetric corner treatment (large radius on the bottom-right). */


.doctor-section-title {
    font-weight: 800;
    font-size: clamp(1.5rem, 3vw, 1.9rem);
    margin-bottom: .75rem;
}

.doctor-memberships-title {
    font-weight: 700;
    font-size: 1.15rem;
    margin: 1.75rem 0 .75rem;
}

.doctor-quote-title {
    font-weight: 800;
    font-size: clamp(1.5rem, 3vw, 1.9rem);
    text-align: center;
    margin-bottom: 3rem;
}

/* Quote: green badge overlapping the top-left of the tinted box. */
.doctor-quote-wrap {
    position: relative;
    max-width: 760px;
    margin: 0 auto;
    padding: 0 0 0 3.25rem;
}

.doctor-quote-icon {
    position: absolute;
    top: -2rem;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--green);
    color: #fff;
    font-size: 2rem;
    line-height: 1;
}

.doctor-quote-box {
    background: var(--green-light);
    border-radius: var(--radius-card);
    padding: 1.75rem 2rem 1.75rem 2.25rem;
    color: var(--ink-800);
    font-size: 1.05rem;
    line-height: 1.8;
}

@media (max-width: 991.98px) {

    /* Background word on mobile: same treatment as desktop (big, gradient,
     overlapping the heading, centered) but scaled down and allowed to wrap
     so it never bleeds past the viewport edge. */
    .section-title .bg-word {
        white-space: normal;
        width: 100%;
        font-size: clamp(2.6rem, 15vw, 4.5rem);
        top: -1.2rem;
        line-height: 1;
    }

    /* Same tight overlap as desktop — no extra gap above the h2.
     The FAQ heading needs more headroom: its bg-word wraps to two tall
     lines, so push the h2 down instead of using a margin on the (absolute,
     out-of-flow) bg-word. */
    .section-title h2 {
        padding-top: 1.7rem;
    }

    #faqTitle.section-title h2 {
        padding-top: 4.4rem;
    }

    /* The FAQ bg-word is the longest and wraps to two lines — keep it a size
     smaller on mobile so it stays more compact. */
    #faqTitle.section-title .bg-word {
        font-size: clamp(1.9rem, 10vw, 3rem);
    }

    /* Hero, mobile mockup treatment: flat soft-green wash instead of the photo
     background, stacked full-width pill buttons, then the cutout photo as a
     full-bleed block flush with the section bottom. */
    .hero {
        background:
            linear-gradient(180deg,
                rgba(217, 238, 210, 1) 0%,
                rgba(233, 244, 227, 1) 60%,
                rgba(250, 252, 248, 1) 100%);
    }

    .hero .row>[class*="col-"] {
        padding-top: 1.5rem;
    }

    /* Stacked full-width pill buttons. */
    .hero .d-flex {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

    .hero .btn-primary,
    .hero .btn-eye-outline {
        display: inline-flex;
        align-items: center;
        width: 100%;
        justify-content: center;
        border-radius: 20px;
        padding: .9rem 1.7rem;
    }

    /* Below lg the cutout returns to the normal flow as a full-bleed image
     pinned to the section bottom — it can never overlap the copy. */
    .hero-img {
        position: static;
        max-width: none;
        width: 100%;
        height: auto;
        margin: 0;
        padding: 0;
        display: block;
        pointer-events: auto;
    }

    .hero-img img {
        height: auto;
        width: 100%;
        display: block;
    }

    /* Interior-page hero: tighten the vertical padding on small screens. */
    .hero-others>.container {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    /* Info cards: already 2-up below xl via Bootstrap cols; tighten padding. */
    .info-card {
        padding: 1.25rem 1.1rem;
    }

    /* Map + form stack vertically; give the map a shorter height. */
    .map-embed {
        height: 320px;
    }

    /* About page: slimmer frame radii + padding; quote badge shrinks and
     the box loses its left inset. */

    .doctor-quote-wrap {
        padding: 0;
    }

    .doctor-quote-icon {
        width: 48px;
        height: 48px;
        font-size: 1.5rem;
        top: -1.5rem;
        left: 1.25rem;
    }

    /* Mobile mockup treatment: full-bleed, zoomed-in block pinned to the
     section bottom. `cover` on the tall block zooms the photo; the position
     biases the crop to keep the girl (the subject) framed while trimming
     more from the right side than the left. */
    .why-choose-img {
        position: static;
        max-width: none;
        width: 100%;
        height: 480px;
        margin: 0;
        padding: 0;
        overflow: hidden;
        display: block;
        pointer-events: auto;
    }

    .why-choose-img img {
        height: 100%;
        width: 100%;
        object-fit: cover;
        object-position: 70% center;
    }

    /* Same gradient as desktop but rotated to vertical on mobile, so the wash
     flows top-to-bottom behind the stacked layout. */
    .why-choose {
        background:
            linear-gradient(180deg,
                rgba(217, 238, 210, 1) 0%,
                rgba(217, 238, 210, 1) 35%,
                rgba(217, 238, 210, 0) 75%);
    }
}

/* ============================================================
   17. SECTION: info cards
   Reusable info strip: icon tile + title + text. Color of the icon
   tile is set via the .icon-* modifier classes below.
   ============================================================ */
.info-card {
    background: #fff;
    border: 1px solid var(--stroke);
    border-radius: var(--radius-card);
    padding: 1.75rem 1.5rem;
    height: 100%;
}

.info-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    color: #fff;
    font-size: 1.25rem;
}

.icon-green {
    background: #7cb342;
}

.icon-red {
    background: #ef5350;
}

.icon-blue {
    background: #2196f3;
}

.icon-purple {
    background: #ab47bc;
}

.info-card-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ink-900);
    margin: 1rem 0 .35rem;
}

.info-card-text {
    color: var(--ink-600);
    font-size: .95rem;
    margin-bottom: .25rem;
}

/* Secondary label inside a card (e.g. "Fax" under the phone number). */
.info-card-label {
    font-weight: 700;
    color: var(--ink-900);
    font-size: .95rem;
    margin: .75rem 0 .25rem;
}

/* ============================================================
   18. SECTION: map + form split
   Reusable two-column block: embedded map beside a simple form.
   ============================================================ */
.map-form-title {
    font-weight: 800;
    font-size: clamp(1.6rem, 3vw, 2rem);
    margin-bottom: 1.5rem;
}

.map-embed {
    border-radius: var(--radius-card);
    overflow: hidden;
    height: 580px;
}

.map-embed iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.form-field {
    margin-bottom: 1.25rem;
}

/* Input with a leading icon: wrap the input and place the icon at the
   left edge; the input gets extra left padding to clear it. */
.form-input-wrap {
    position: relative;
}

.form-input-icon {
    position: absolute;
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
    color: var(--ink-600);
    font-size: .95rem;
    line-height: 1;
    pointer-events: none;
}

.form-input-wrap .form-input {
    padding-left: 2.6rem;
}

/* Inside the taller textarea the icon anchors to the top-left instead. */
.form-input-wrap .form-textarea~.form-input-icon,
.form-input-wrap textarea~.form-input-icon {
    top: 1.05rem;
    transform: none;
}

.form-input-wrap .form-textarea {
    padding-top: .65rem;
    padding-bottom: .65rem;
}


.form-label {
    display: block;
    font-size: .9rem;
    font-weight: 600;
    color: var(--ink-800);
    margin-bottom: .4rem;
}

.form-input {
    display: block;
    width: 100%;
    padding: .65rem 1rem;
    font-size: .95rem;
    color: var(--ink-900);
    background: #fff;
    border: 1px solid var(--stroke);
    border-radius: var(--radius-btn);
    outline: none;
}

.form-input::placeholder {
    color: var(--ink-600);
}

.form-input:focus {
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(94, 182, 64, .15);
}

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

/* Inline validation error under a form field. */
.form-error {
    color: #d32f2f;
    font-size: .85rem;
    margin: .35rem 0 0;
}

/* Flash messages (django.contrib.messages) rendered above the form. */
.form-alert {
    border-radius: var(--radius-btn);
    padding: .8rem 1.1rem;
    font-size: .95rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
}

.form-alert--success {
    background: var(--green-light);
    color: var(--green-darker);
    border: 1px solid var(--green);
}

.form-alert--error {
    background: #fdecea;
    color: #b71c1c;
    border: 1px solid #ef5350;
}

/* ============================================================
   22. SECTION: service detail (block-based service pages)
   Each ServiceSection renders through its layout partial in
   templates/base/service_sections/ and pulls these classes.
   ============================================================ */
.service-section-heading {
    font-weight: 800;
    font-size: clamp(1.5rem, 3vw, 1.9rem);
    margin-bottom: .5rem;
}

.service-section-lead {
    color: var(--ink-600);
    font-size: 1.05rem;
    margin-bottom: 1rem;
}

.service-section-body {
    color: var(--ink-600);
    font-size: 1.05rem;
}

.service-section-body p:last-child {
    margin-bottom: 0;
}

/* Rounded icon tile used by the card-grid layout. */
.card-grid-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-btn);
    background: var(--green);
    color: var(--green-light2);
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.card-grid-price{
    font-weight: 800;
    color: var(--green);
    font-size: 2rem;
}


/* --- Bare illustration image (style="illustration", no frame) --- */
.section-illustration {
    display: block;
    width: 100%;
    height: auto;
    max-height: 440px;
    object-fit: contain;
    margin-inline: auto;
}

/* --- Feature split: bold title + grey copy, no card chrome --- */
.feature-item h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ink-900);
    margin-bottom: .5rem;
}

.feature-item p {
    color: var(--ink-600);
    font-size: .93rem;
    line-height: 1.65;
    margin-bottom: 0;
}

/* Arch frame: image fills the frame edge-to-edge — the frame only supplies
   the asymmetric silhouette (big top-right / bottom-left) plus a soft shadow.
   No white mat, no stroke, no fixed height: the image box is sized by
   aspect-ratio so it always fills the column width. */
.arch-frame {
    background: #fff;
    border: none;
    border-radius: var(--radius-card) 5.5rem var(--radius-card) 5.5rem;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 12px 28px rgba(36, 40, 44, .10);
}

.arch-frame img {
    display: block;
    width: 100%;
    aspect-ratio: 5 / 4;
    height: auto;
    object-fit: cover;
    border-radius: var(--radius-card) 5.5rem var(--radius-card) 5.5rem;
}

@media (max-width: 991.98px) {
    .arch-frame,
    .arch-frame img {
        border-radius: var(--radius-card) 3.5rem var(--radius-card) 3.5rem;
    }
}

/* --- Split banner dark: full-bleed band, media bleeds to the viewport edge --- */
.split-banner-dark {
    background: linear-gradient(135deg, var(--green-darker) 0%, #16300f 100%);
    color: #fff;
}

.split-banner-dark-media {
    min-height: 420px;
}

.split-banner-dark-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.split-banner-dark-body {
    display: flex;
    align-items: center;
}

.split-banner-dark-inner {
    padding: 3.5rem clamp(1.5rem, 4vw, 4rem);
    max-width: 640px;
    margin-inline: auto;
    width: 100%;
}

.split-banner-dark-inner h2 {
    color: #fff;
    font-weight: 800;
    font-size: clamp(1.5rem, 3vw, 1.9rem);
    margin-bottom: .75rem;
}

.split-banner-dark-lead {
    color: rgba(255, 255, 255, .85);
    font-size: 1.05rem;
    margin-bottom: .25rem;
}

.split-banner-dark-copy {
    color: rgba(255, 255, 255, .8);
}

.checklist-light li {
    color: rgba(255, 255, 255, .92);
}

@media (max-width: 991.98px) {
    .split-banner-dark-media {
        min-height: 300px;
    }
}

/* ============================================================
   19. MOTION
   ============================================================ */
/* 19a. Hero entrance.
   Hero copy sits above the fold, so a scroll-triggered reveal adds
   nothing — it would either fire instantly or never. These run once on
   load instead, and are pure CSS so they work with JS disabled.

   Each layer rises and settles while the headline's lines clip upward,
   which reads as deliberate rather than as a generic fade.

   --ease-motion is the site's single motion character: a pronounced
   decelerate that settles into place rather than arriving. The hero and
   the below-fold AOS reveals both use it, so the page reads as one
   system instead of two unrelated effects. --ease-motion-soft is a
   plainer curve for the supporting hero copy; mixing the two is what
   stops the hero looking uniform. */
:root {
    --ease-motion: cubic-bezier(.16, 1, .3, 1);
    --ease-motion-soft: cubic-bezier(.25, .46, .45, .94);
}

@keyframes hero-rise {
    from {
        opacity: 0;
        transform: translate3d(0, 28px, 0);
    }

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

/* Line-by-line clip for the hero headline. A wrapping h1 cannot clip its
   own lines, so each line is wrapped in .hero-line (an inline-block) and
   the mask is applied to that wrapper. */
@keyframes hero-line-in {
    from {
        transform: translate3d(0, 105%, 0);
    }

    to {
        transform: none;
    }
}

/* The hero cutout: drifts up while fading, ending a touch larger than it
   started. The overscale is invisible at rest but gives the image some
   settle, so it does not read as a flat cross-fade. */
@keyframes hero-cutout-in {
    from {
        opacity: 0;
        transform: translate3d(0, 34px, 0) scale(.965);
    }

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

.hero-line {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
}

.hero-line>span {
    display: inline-block;
    /* Descenders (g, y, p) get clipped without a little breathing room. */
    padding-bottom: .08em;
    margin-bottom: -.08em;
    animation: hero-line-in .95s var(--ease-motion) both;
}

/* Note the h1 itself is NOT animated — the reveal lives on its .hero-line
   children. Animating both would double the transform and muddy the clip. */

.hero .hero-lead,
.hero .btn-primary,
.hero .btn-eye-outline,
.hero-others-subtitle,
.hero-others-breadcrumb,
.hero-others .btn-primary,
.hero-others .btn-eye-outline {
    animation: hero-rise .8s var(--ease-motion-soft) both;
}

/* Stagger. The delays are short on purpose: this is the first thing the
   visitor sees, so the whole sequence should be finished well under a
   second. Anything longer reads as a loading state. */
.hero-others-breadcrumb {
    animation-delay: .05s;
}

.hero-line>span {
    animation-delay: .14s;
}

/* Second and subsequent lines trail the first, so a multi-line headline
   arrives as a sequence rather than one block. */
.hero-line:nth-child(2)>span {
    animation-delay: .24s;
}

.hero-line:nth-child(3)>span {
    animation-delay: .34s;
}

.hero .hero-lead {
    animation-delay: .3s;
}

.hero-others-subtitle {
    animation-delay: .34s;
}

.hero .btn-primary,
.hero-others .btn-primary {
    animation-delay: .44s;
}

.hero .btn-eye-outline,
.hero-others .btn-eye-outline {
    animation-delay: .52s;
}

.hero-img {
    animation: hero-cutout-in 1.15s var(--ease-motion) both;
    animation-delay: .22s;
}

/* ============================================================
   20. SCROLL REVEAL (AOS)
   ============================================================ */
/* AOS hides [data-aos] content in CSS and relies on JS to add .aos-init
   and then .aos-animate. If aos.js is blocked, fails to load, or errors
   before it runs, nothing would ever be revealed. Elements without
   .aos-init therefore stay forced visible, so a failed CDN can never
   blank out a section. !important keeps this independent of load order
   relative to aos.css. */
[data-aos]:not(.aos-init) {
    opacity: 1 !important;
    transform: none !important;
}

/* 20a. Tuning.
   Two overrides of AOS's own values. Both are commented because neither
   is reachable through AOS's documented options, so it is not obvious
   that they have to live here.

   Curve. AOS publishes per-name curves, and its "out" names are
   degenerate — ease-out-quad, ease-out-cubic and ease-out-quart all
   resolve to the identical cubic-bezier(.25,.46,.45,.94). A raw
   cubic-bezier() handed to init() matches no rule at all and is silently
   dropped, so the value has to be forced from CSS. AOS weights its own
   rules up to 0-3-0 via [data-aos][data-aos][data-aos-easing]; matching
   that weight wins because this file loads after aos.css. The generic
   [data-aos-easing] suffix keeps it applying whichever name main.js
   happens to pass. Duration is left to AOS's `duration` option, which
   does work natively.

   Distance. AOS's fade-up travels 100px, which over a long duration
   reads as a swipe rather than a reveal. Pulling it to 32px keeps the
   motion perceptible while letting it read as a fade with a little depth. */
[data-aos][data-aos][data-aos-easing] {
    transition-timing-function: var(--ease-motion);
}

[data-aos][data-aos=fade-up] {
    transform: translate3d(0, 32px, 0);
}

/* Honour the OS "reduce motion" setting. AOS handles its own reveals
   via the `disable` option in main.js, but the hero entrance above is
   pure CSS and needs opting out here. Cancel the animations and land
   everything in its final state so nothing stays invisible. */
@media (prefers-reduced-motion: reduce) {

    .hero .hero-lead,
    .hero .btn-primary,
    .hero .btn-eye-outline,
    .hero-others-subtitle,
    .hero-others-breadcrumb,
    .hero-others .btn-primary,
    .hero-others .btn-eye-outline,
    .hero-img,
    .hero-line>span {
        animation: none !important;
        opacity: 1;
        transform: none;
    }
}