/* ============================================================
   ADDITIONAL.CSS — INNER PAGES ONLY
   ------------------------------------------------------------
   Loaded on every page except the front page (see
   shivafeb17_assets() in functions.php), with app.css as a
   dependency. app.css owns the shell and shared components
   (nav, footer, .btn, .section, .grid, .reveal, tokens);
   this file owns inner-page sections only.

   Uses the app.css token set — do not introduce new colour
   literals here, use var(--primary), var(--ink) and friends.

   CONTENTS
     1. Page hero (reusable across all inner pages)
     2. Breadcrumb
     3. Editor content (the_content)
     4. About — intro
     5. About — why points
     6. About — diagnostic journey
     7. About — quality
     8. About — closing CTA
     9. Responsive
   ============================================================ */


/* ============ 1. PAGE HERO ============ */
.page-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: 76px 28px 64px;
    background:
        radial-gradient(1100px 420px at 82% -10%, rgba(60, 180, 150, .16), transparent 62%),
        linear-gradient(168deg, #eaf1ff 0%, var(--bg) 58%);
    border-bottom: 1px solid var(--line);
}

.page-hero-orb {
    position: absolute;
    top: -160px;
    right: -110px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    z-index: -1;
    opacity: .5;
    filter: blur(2px);
    background: radial-gradient(circle at 32% 32%, var(--secondary-2), transparent 62%);
}

.page-hero-inner {
    max-width: 1240px;
    margin: 0 auto;
}

.page-hero h1 {
    font-size: clamp(2rem, 4.4vw, 3.1rem);
    line-height: 1.12;
    margin-top: 0;
}

.page-hero-sub {
    margin-top: 20px;
    max-width: 620px;
    font-size: 17px;
}


/* ============ 2. BREADCRUMB ============ */
.breadcrumb {
    margin-bottom: 18px;
    font-size: 13.5px;
    color: var(--muted);
}

.breadcrumb a {
    color: var(--ink-soft);
    font-weight: 600;
    transition: color .2s ease;
}

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


/* ============ 3. EDITOR CONTENT ============ */
.page-content-inner {
    max-width: 820px;
    margin: 0;
}

.page-content-inner h2 {
    font-size: 1.6rem;
    margin: 34px 0 12px;
}

.page-content-inner h3 {
    font-size: 1.25rem;
    margin: 26px 0 10px;
}

.page-content-inner p {
    margin-bottom: 16px;
}

.page-content-inner ul,
.page-content-inner ol {
    margin: 0 0 18px;
    padding-left: 22px;
    color: var(--ink-soft);
    line-height: 1.7;
}

.page-content-inner li {
    margin-bottom: 7px;
}

.page-content-inner a {
    color: var(--primary);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}


/* ============ 4. ABOUT — INTRO ============ */
.about-intro-inner {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 56px;
    align-items: start;
}

.about-intro-head h2 {
    font-size: clamp(1.7rem, 2.8vw, 2.2rem);
    font-weight: 750;
    margin-top: 6px;
    line-height: 1.22;
}

.lead-para {
    font-size: 18px;
    color: var(--ink);
    margin-bottom: 16px;
}

.lead-para strong {
    color: var(--primary);
}


/* ============ 5. ABOUT — WHY POINTS ============ */

/* the intro and the cards are one idea, so they sit closer together
   than the standard .section rhythm and close tighter at the end */
.about-why {
    padding-top: 0;
    padding-bottom: 44px;
}

.why-grid {
    grid-template-columns: repeat(3, 1fr);
}

.why-point {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 30px 26px;
    box-shadow: var(--shadow-sm);
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s ease, background .35s ease;
}

.why-point:hover {
    box-shadow: var(--shadow-md);
    border-color: rgba(1, 50, 180, .14);
    background: linear-gradient(165deg, #eef3ff 0%, #ffffff 60%);
}

.why-point-icon {
    width: 52px;
    height: 52px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 8px 18px -6px rgba(0, 0, 0, .28);
}

.why-point-icon svg {
    width: 23px;
    height: 23px;
}

.why-point h3 {
    font-size: 18.5px;
    font-weight: 700;
    margin-bottom: 10px;
}

.why-point p {
    font-size: 14.5px;
}


/* ============ 6. ABOUT — DIAGNOSTIC JOURNEY ============ */
.about-journey {
    position: relative;
    padding-top: 64px;
    padding-bottom: 64px;
}

.journey-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.journey-col {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 32px 30px;
    box-shadow: var(--shadow-sm);
}

.journey-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 20px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--line);
}

.journey-icon {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 8px 18px -8px rgba(0, 0, 0, .3);
}

.journey-icon svg {
    width: 20px;
    height: 20px;
}

.journey-head h3 {
    font-size: 17.5px;
    font-weight: 750;
}

.journey-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: none;
}

.journey-step {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 13px 0;
}

/* connector line between the step numbers */
.journey-step::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 50%;
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg, rgba(31, 79, 224, .28), rgba(60, 180, 150, .28));
}

.journey-step:last-child::before {
    display: none;
}

.journey-num {
    position: relative;
    z-index: 1;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    color: var(--primary);
    background: #fff;
    box-shadow: 0 0 0 2px rgba(31, 79, 224, .22);
}

.journey-label {
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.35;
}

.journey-key {
    margin-top: 40px;
    text-align: center;
    font-size: clamp(1.05rem, 1.9vw, 1.3rem);
    font-weight: 750;
    color: var(--primary);
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.45;
}


/* ============ 7. ABOUT — QUALITY ============ */
.about-quality {
    max-width: 1240px;
    padding-top: 64px;
}

.quality-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
}

.quality-copy h2 {
    font-size: clamp(1.7rem, 2.8vw, 2.2rem);
    font-weight: 750;
    margin-top: 6px;
    line-height: 1.22;
}

.quality-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.quality-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 15px 18px;
    box-shadow: var(--shadow-sm);
    font-size: 14.8px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.4;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}

.quality-item:hover {
    box-shadow: var(--shadow-md);
}

.quality-check {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(140deg, var(--secondary-2), var(--secondary));
}

.quality-check svg {
    width: 13px;
    height: 13px;
}


/* ============ 9. RESPONSIVE ============ */
@media (max-width:980px) {

    .about-intro-inner,
    .quality-inner {
        grid-template-columns: 1fr;
        gap: 32px;
    }

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

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

@media (max-width:720px) {
    .page-hero {
        padding: 52px 20px 46px;
    }

    .about-journey,
    .about-quality {
        padding-top: 48px;
    }

    .about-journey {
        padding-bottom: 48px;
    }

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

    .journey-col {
        padding: 26px 22px;
    }

}


/* ============================================================
   10. SERVICES — FAMILY CARDS
   (services archive + cross-link on the family pages)
   ============================================================ */
.family-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.family-card {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 36px 32px;
    box-shadow: var(--shadow-sm);
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s ease, background .35s ease;
}

.family-card:hover {
    box-shadow: var(--shadow-md);
    border-color: rgba(1, 50, 180, .14);
    background: linear-gradient(165deg, #eef3ff 0%, #ffffff 60%);
}

.family-icon {
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 8px 18px -6px rgba(0, 0, 0, .28);
}

.family-icon svg {
    width: 25px;
    height: 25px;
}

.family-card h2 {
    font-size: 1.45rem;
    font-weight: 750;
    margin-bottom: 10px;
}

.family-card p {
    font-size: 14.5px;
}

.family-tags {
    list-style: none;
    margin: 22px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.family-tags li {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-soft);
    background: rgba(31, 79, 224, .07);
    border-radius: var(--radius);
    padding: 6px 11px;
}

.family-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 26px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--primary);
}

.family-link svg {
    width: 15px;
    height: 15px;
    transition: transform .3s var(--ease);
}

.family-card:hover .family-link svg {
    transform: translateX(4px);
}

/* wide variant used for the cross-link at the foot of a family page */
.family-card-wide {
    flex-direction: row;
    align-items: center;
    gap: 26px;
    padding: 30px 32px;
}

.family-card-wide .family-icon {
    margin-bottom: 0;
}

.family-card-copy {
    flex: 1;
}

.family-card-wide h2 {
    font-size: 1.25rem;
    margin-bottom: 6px;
}

.family-card-wide .family-link {
    margin-top: 0;
    white-space: nowrap;
}


/* ============================================================
   11. SERVICES — SERVICE BOXES
   ============================================================ */
.all-services {
    padding-top: 0;
}

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

.service-box {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 28px 26px;
    box-shadow: var(--shadow-sm);
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s ease, background .35s ease;
}

.service-box:hover {
    box-shadow: var(--shadow-md);
    border-color: rgba(1, 50, 180, .14);
    background: linear-gradient(165deg, #eef3ff 0%, #ffffff 60%);
}

.service-box-icon {
    width: 46px;
    height: 46px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    color: #fff;
    background: linear-gradient(140deg, var(--primary-2), var(--primary-deep));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 8px 18px -6px rgba(0, 0, 0, .28);
}

.service-box-icon svg {
    width: 21px;
    height: 21px;
}

.service-box-icon img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    border-radius: 0;
}

.service-box h3 {
    font-size: 17.5px;
    font-weight: 700;
    margin-bottom: 9px;
}

.service-box p {
    font-size: 14px;
    flex: 1;
}

.service-box-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 20px;
    font-size: 13.8px;
    font-weight: 700;
    color: var(--primary);
}

.service-box-link svg {
    width: 14px;
    height: 14px;
    transition: transform .3s var(--ease);
}

.service-box:hover .service-box-link svg {
    transform: translateX(4px);
}


/* ============================================================
   12. SERVICE FAMILY PAGES
   ============================================================ */
.family-intro {
    padding-bottom: 0;
}

.family-group {
    padding-bottom: 48px;
}

.family-group + .family-group {
    padding-top: 0;
}

.family-cross {
    padding-top: 16px;
    padding-bottom: 48px;
}


/* ============================================================
   13. SINGLE SERVICE
   ============================================================ */
.page-hero-compact {
    padding-bottom: 52px;
}

.page-hero-compact .hero-actions {
    margin-top: 28px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.page-hero .btn svg {
    width: 15px;
    height: 15px;
}

.service-siblings {
    padding-top: 16px;
}


/* ============================================================
   14. SERVICES RESPONSIVE
   ============================================================ */
@media (max-width:980px) {

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

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

    .service-single-inner {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .service-aside {
        position: static;
    }
}

@media (max-width:720px) {

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

    .family-card,
    .family-card-wide {
        flex-direction: column;
        align-items: flex-start;
        padding: 28px 22px;
    }

    .family-card-wide .family-icon {
        margin-bottom: 18px;
    }

    .family-card-wide .family-link {
        margin-top: 18px;
    }

    .page-hero-compact .hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .page-hero-compact .hero-actions .btn {
        justify-content: center;
    }
}


/* ------------------------------------------------------------
   Category cards on the services archive reuse the home page
   component. shivafeb17_icon() draws with currentColor, where
   the home page markup hardcoded stroke="white" — set the
   colour here so both render identically.
   ------------------------------------------------------------ */
.category-icon {
    color: #fff;
}

.category-icon svg {
    width: 26px;
    height: 26px;
}

.category-link svg {
    width: 15px;
    height: 15px;
}


/* ============================================================
   15. SINGLE SERVICE — full-width sections
   ============================================================ */
.service-facts {
    padding-top: 40px;
    padding-bottom: 0;
}

.facts-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 24px 28px;
}

.fact {
    display: flex;
    align-items: center;
    gap: 14px;
}

.fact + .fact {
    border-left: 1px solid var(--line);
    padding-left: 18px;
}

.fact-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    background: linear-gradient(140deg, rgba(31, 79, 224, .10), rgba(60, 180, 150, .14));
}

.fact-icon svg {
    width: 19px;
    height: 19px;
}

.fact-label {
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 3px;
}

.fact-value {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.35;
}

.service-figure img {
    width: 100%;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

/* ---------- what's included ---------- */
.service-includes {
    padding-top: 16px;
    padding-bottom: 56px;
}

.includes-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 18px;
    max-width: none;
    margin-inline: 0;
}

.include-item {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 14px 18px;
    box-shadow: var(--shadow-sm);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.4;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}

.include-item:hover {
    box-shadow: var(--shadow-md);
}

.include-check,
.prep-check {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(140deg, var(--secondary-2), var(--secondary));
}

.include-check svg,
.prep-check svg {
    width: 12px;
    height: 12px;
}

/* ---------- how it works ---------- */
.service-steps {
    padding-top: 16px;
    padding-bottom: 56px;
}

.steps-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.step-card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 32px 28px 28px;
    box-shadow: var(--shadow-sm);
    transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}

.step-card:hover {
    box-shadow: var(--shadow-md);
}

.step-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 15px;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(140deg, var(--primary-2), var(--primary-deep));
    box-shadow: 0 8px 18px -8px rgba(1, 50, 180, .6);
    margin-bottom: 18px;
}

.step-card h3 {
    font-size: 17.5px;
    font-weight: 700;
    margin-bottom: 8px;
}

.step-card p {
    font-size: 14.5px;
}

/* ---------- preparation ---------- */
.service-prep {
    padding-top: 16px;
    padding-bottom: 56px;
}

.prep-inner {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 56px;
    align-items: start;
}

.prep-copy h2 {
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    font-weight: 750;
    margin-top: 6px;
    line-height: 1.22;
}

.prep-copy .btn {
    margin-top: 24px;
}

.prep-copy .btn svg {
    width: 15px;
    height: 15px;
    margin-left: 7px;
}

.prep-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.prep-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 16px 18px;
    box-shadow: var(--shadow-sm);
    font-size: 14.5px;
    color: var(--ink-soft);
    line-height: 1.45;
}

/* ---------- why / faq / related spacing ---------- */
.service-why {
    padding-top: 16px;
    padding-bottom: 56px;
}

/* four trust points here, not the three the About page uses */
.service-why .why-grid {
    grid-template-columns: repeat(4, 1fr);
}

.service-why .why-point {
    padding: 26px 22px;
}

.service-why .why-point h3 {
    font-size: 16.5px;
}

.service-why .why-point p {
    font-size: 14px;
}

.service-faq {
    padding-top: 16px;
    padding-bottom: 56px;
}

.service-siblings {
    padding-top: 16px;
}


/* ============================================================
   16. SINGLE SERVICE RESPONSIVE
   ============================================================ */
@media (max-width:1180px) {
    .service-why .why-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width:980px) {
    .facts-row {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .fact + .fact {
        border-left: 0;
        border-top: 1px solid var(--line);
        padding-left: 0;
        padding-top: 16px;
    }

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

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

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

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

    .facts-row {
        padding: 20px 20px;
    }

    .service-prep .btn,
    .service-faq .btn {
        width: 100%;
        justify-content: center;
    }
}


/* ============================================================
   17. PAGE BANNER — full-width image with overlay
   ------------------------------------------------------------
   Used by single-service.php. The image sits behind an overlay
   gradient (same ramp as the home page category cards), so all
   copy inside flips to white.
   ============================================================ */
.page-hero-media {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-bottom: 0;
    background: var(--primary-deep);
    padding-top: 96px;
    padding-bottom: 88px;
}

.page-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    z-index: -2;
}

.page-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(1, 29, 115, .40) 0%, rgba(1, 29, 115, .88) 82%),
        linear-gradient(100deg, rgba(1, 29, 115, .72) 0%, rgba(1, 29, 115, .18) 70%);
}

/* the decorative orb is redundant over a photo */
.page-hero-media .page-hero-orb {
    display: none;
}

.page-hero-media .page-hero-inner {
    position: relative;
    z-index: 1;
}

.page-hero-media h1 {
    color: #fff;
}

/* the default .grad-text ramp starts in dark blue, which all but
   disappears against this overlay — swap it for a light ramp */
.page-hero-media .grad-text {
    background: linear-gradient(100deg, #ffffff 0%, var(--secondary-2) 92%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.page-hero-media .page-hero-sub {
    color: rgba(255, 255, 255, .88);
}

.page-hero-media .eyebrow {
    color: rgba(255, 255, 255, .92);
}

.page-hero-media .eyebrow-dot {
    background: var(--secondary-2);
}

.page-hero-media .breadcrumb,
.page-hero-media .breadcrumb a {
    color: rgba(255, 255, 255, .78);
}

.page-hero-media .breadcrumb a:hover {
    color: #fff;
}

.page-hero-media .hero-actions {
    margin-top: 30px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.page-hero-media .btn svg {
    width: 16px;
    height: 16px;
}

@media (max-width:720px) {
    .page-hero-media {
        padding-top: 64px;
        padding-bottom: 60px;
    }

    .page-hero-media .hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .page-hero-media .btn {
        justify-content: center;
    }
}


/* ============================================================
   18. SINGLE SERVICE — CONTENT + STICKY ENQUIRY FORM
   ------------------------------------------------------------
   The form column sticks while the content column scrolls past
   it, and stops naturally at the end of the section. Sticky
   only works if the grid does NOT stretch its items, hence
   align-items: start.
   ============================================================ */
.service-main {
    padding-bottom: 56px;
}

.service-main-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 56px;
    align-items: start;
}

.service-content .page-content-inner {
    max-width: none;
    margin: 0;
}

.enquiry-form-col {
    position: sticky;
    /* clears the sticky nav (~82px) plus a little breathing room */
    top: 104px;
    /* on a short screen the card would otherwise run off the bottom,
       so cap it to the visible area and let it scroll inside itself */
    max-height: calc(100vh - 128px);
    overflow-y: auto;
}

/* ---------- the form card ---------- */
.enquiry-form {
    background: linear-gradient(165deg, #eef3ff 0%, #ffffff 58%);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: 26px 24px;
}

.enquiry-form h3 {
    font-size: 19px;
    font-weight: 750;
    margin-bottom: 6px;
}

.enquiry-form-intro {
    font-size: 13.8px;
    margin-bottom: 18px;
}

.field {
    margin-bottom: 13px;
}

.field label {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 6px;
}

.field .req {
    color: var(--accent-orange);
}

.field input,
.field select,
.field textarea {
    width: 100%;
    font-family: 'Barlow', sans-serif;
    font-size: 14.5px;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 11px 14px;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.field textarea {
    resize: vertical;
    min-height: 58px;
}

.field input::placeholder,
.field textarea::placeholder {
    color: var(--muted);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--primary-2);
}

/* native select arrow, drawn rather than imported */
.field select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a5578' stroke-width='2.2' 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 12px center;
    background-size: 15px;
    padding-right: 38px;
}

.enquiry-form-submit {
    width: 100%;
    justify-content: center;
    margin-top: 6px;
}

.enquiry-form-note {
    margin-top: 14px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--muted);
}


/* ============================================================
   19. RESPONSIVE — content + form
   ============================================================ */
@media (max-width:1100px) {
    .service-main-inner {
        grid-template-columns: minmax(0, 1fr) 330px;
        gap: 40px;
    }
}

@media (max-width:900px) {
    .service-main-inner {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    /* nothing to stick to once the columns stack */
    .enquiry-form-col {
        position: static;
    }

    .enquiry-form {
        max-width: 560px;
    }
}


/* ============================================================
   20. CONTACT PAGE
   ============================================================ */
.contact-cards {
    padding-bottom: 40px;
}

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

.contact-card {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 28px 26px;
    box-shadow: var(--shadow-sm);
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s ease, background .35s ease;
}

.contact-card:hover {
    box-shadow: var(--shadow-md);
    border-color: rgba(1, 50, 180, .14);
    background: linear-gradient(165deg, #eef3ff 0%, #ffffff 60%);
}

.contact-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 8px 18px -6px rgba(0, 0, 0, .28);
}

.contact-icon svg {
    width: 22px;
    height: 22px;
}

.contact-card h2 {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 8px;
}

.contact-value {
    font-size: 18px;
    font-weight: 750;
    color: var(--ink);
    line-height: 1.3;
}

.contact-note {
    margin-top: 8px;
    font-size: 13.8px;
}


/* ---------- form + map ---------- */
.contact-main {
    padding-top: 16px;
}

.contact-main-inner {
    display: grid;
    grid-template-columns: 420px minmax(0, 1fr);
    gap: 48px;
    align-items: start;
}

/* the contact form is the main event here, so it does not stick */
.contact-form-col .enquiry-form {
    position: static;
}


/* ---------- map ---------- */
.map-embed {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    max-width: 100%;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    background: linear-gradient(165deg, #eef3ff 0%, #ffffff 62%);
}

/* real embeds inherit this once the iframe replaces the placeholder */
.map-embed-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.map-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
    background-image:
        linear-gradient(rgba(7, 24, 69, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(7, 24, 69, .05) 1px, transparent 1px);
    background-size: 38px 38px;
}

.map-placeholder-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    color: #fff;
    background: linear-gradient(140deg, var(--primary-2), var(--primary-deep));
    box-shadow: 0 10px 22px -8px rgba(1, 50, 180, .6);
}

.map-placeholder-icon svg {
    width: 24px;
    height: 24px;
}

.map-placeholder-title {
    font-size: 15.5px;
    font-weight: 750;
    color: var(--ink);
}

.map-placeholder-note {
    margin-top: 5px;
    font-size: 13.5px;
}


/* ---------- address / hours ---------- */
.contact-details {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 22px;
}

.detail {
    display: flex;
    gap: 13px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 20px 20px;
    box-shadow: var(--shadow-sm);
}

.detail-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    background: linear-gradient(140deg, rgba(31, 79, 224, .10), rgba(60, 180, 150, .14));
}

.detail-icon svg {
    width: 17px;
    height: 17px;
}

.detail h3 {
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 5px;
}

.detail p {
    font-size: 14px;
    line-height: 1.45;
}

.detail a {
    color: var(--ink);
    font-weight: 600;
}

.detail a:hover {
    color: var(--primary);
}

.contact-links {
    padding-top: 24px;
}


/* ============================================================
   21. CONTACT RESPONSIVE
   ============================================================ */
@media (max-width:1100px) {
    .contact-main-inner {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .contact-form-col .enquiry-form {
        max-width: 560px;
    }
}

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

    .contact-details {
        grid-template-columns: 1fr;
    }
}

@media (max-width:720px) {
    .map-embed {
        aspect-ratio: 4 / 3;
    }
}


/* ============================================================
   22. HEALTH PACKAGES ARCHIVE
   ------------------------------------------------------------
   Reuses the home page .pkg-card component. app.css sets
   .pkg-grid to three columns and handles its own responsive
   steps, so only the section rhythm is needed here.
   ============================================================ */
.all-packages {
    padding-bottom: 56px;
}

.all-packages .pkg-grid {
    row-gap: 26px;
}


/* ============================================================
   23. PATIENT VIDEOS
   ------------------------------------------------------------
   .video-grid / .video-card / .video-thumb / .play-btn all come
   from app.css (home page "Patient Stories"). Only the archive
   and single-page additions live here.
   ============================================================ */

/* the home page uses a <button> for play; cards that are links
   need the same badge as a non-interactive <span> */
.video-card .play-btn {
    pointer-events: none;
}

.video-card:hover .play-btn {
    transform: translate(-50%, -50%) scale(1.08);
    background: #fff;
}

.video-card:hover {
    box-shadow: var(--shadow-md);
}

.video-cta {
    padding-top: 16px;
}


/* ============================================================
   24. EDUCATION VIDEOS
   ------------------------------------------------------------
   Same .video-card component as the home page, but these carry a
   video TITLE rather than a patient quote, so the italic
   testimonial styling is turned off inside .video-edu.
   ============================================================ */
.video-edu .video-quote {
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.35;
    color: var(--ink);
}

.video-edu .video-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
}

.video-edu .video-name span {
    color: var(--primary);
    font-weight: 700;
}


/* ============================================================
   25. PATIENT TESTIMONIALS ARCHIVE
   ------------------------------------------------------------
   Uses the home page .video-card exactly as-is. Only the section
   rhythm is added here.
   ============================================================ */
.testi-share {
    padding-top: 16px;
}


/* ============================================================
   26. BLOG ARCHIVE
   ------------------------------------------------------------
   .blog-grid / .blog-card / .blog-body / .blog-tag / .blog-meta
   all come from app.css (home page journal section). Only the
   category pills and section rhythm are added here.
   ============================================================ */
.blog-filters {
    padding-top: 40px;
    padding-bottom: 0;
}

.cat-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    justify-content: center;
}

.cat-pill {
    font-size: 13.5px;
    font-weight: 650;
    color: var(--ink-soft);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 9px 16px;
    box-shadow: var(--shadow-sm);
    transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s var(--ease);
}

.cat-pill:hover {
    color: var(--primary);
    border-color: rgba(1, 50, 180, .22);
}

.cat-pill.is-active {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, var(--primary-2), var(--primary-deep));
}

.blog-card:hover {
    box-shadow: var(--shadow-md);
}


/* ============================================================
   27. SINGLE ARTICLE
   ============================================================ */
.post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 20px;
}

.post-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, .88);
}

.post-meta-item svg {
    width: 16px;
    height: 16px;
}

.post-main-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 56px;
    align-items: start;
}

.post-content .page-content-inner {
    max-width: none;
    margin: 0;
}

/* ---------- disclaimer ---------- */
.post-disclaimer {
    display: flex;
    gap: 14px;
    margin-top: 36px;
    padding: 20px 22px;
    background: linear-gradient(165deg, #eef3ff 0%, #ffffff 62%);
    border: 1px solid var(--line);
    border-left: 3px solid var(--secondary);
    border-radius: var(--radius);
}

.post-disclaimer-icon {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(140deg, var(--secondary-2), var(--secondary));
}

.post-disclaimer-icon svg {
    width: 16px;
    height: 16px;
}

.post-disclaimer p {
    font-size: 13.5px;
    line-height: 1.55;
}

/* ---------- sticky sidebar ---------- */
.post-sidebar {
    position: sticky;
    top: 104px;
    max-height: calc(100vh - 128px);
    overflow-y: auto;
    display: grid;
    gap: 18px;
}

.sidebar-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 24px 22px;
}

.sidebar-card h3 {
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 14px;
}

.sidebar-cats {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sidebar-cats li + li {
    border-top: 1px solid var(--line);
}

.sidebar-cats a {
    display: block;
    padding: 10px 0;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ink-soft);
    transition: color .2s ease, padding-left .2s var(--ease);
}

.sidebar-cats a:hover {
    color: var(--primary);
    padding-left: 5px;
}

.sidebar-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.tag-pill {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-soft);
    background: rgba(31, 79, 224, .07);
    border-radius: var(--radius);
    padding: 6px 11px;
    transition: background .2s ease, color .2s ease;
}

.tag-pill:hover {
    background: linear-gradient(135deg, var(--primary-2), var(--primary-deep));
    color: #fff;
}

.post-related {
    padding-top: 16px;
}


@media (max-width:980px) {
    .post-main-inner {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    /* nothing to stick alongside once stacked */
    .post-sidebar {
        position: static;
        max-height: none;
        overflow: visible;
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width:640px) {
    .post-sidebar {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   28. FAQ PAGE
   ------------------------------------------------------------
   .faq-list / .faq-item / .faq-q / .faq-marker / .faq-a all come
   from app.css (home page FAQ section). Only the grouping,
   headings and jump nav are added here.
   ============================================================ */
.faq-jump {
    padding-top: 40px;
    padding-bottom: 0;
}

.faq-group {
    padding-top: 44px;
    padding-bottom: 0;
    /* the nav is sticky, so anchor jumps need clearance */
    scroll-margin-top: 100px;
}

.faq-group:last-of-type {
    padding-bottom: 16px;
}

.faq-group-head {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: none;
    margin: 0 0 20px;
}

.faq-group-icon {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 8px 18px -8px rgba(0, 0, 0, .3);
}

.faq-group-icon svg {
    width: 20px;
    height: 20px;
}

.faq-group-head h2 {
    font-size: 1.35rem;
    font-weight: 750;
}

.faq-extra {
    padding-top: 44px;
    padding-bottom: 0;
}

.faq-help {
    padding-top: 44px;
}

@media (max-width:720px) {
    .faq-group-head {
        gap: 12px;
    }

    .faq-group-head h2 {
        font-size: 1.15rem;
    }
}


/* ============================================================
   29. HOME SAMPLE COLLECTION
   ============================================================ */
.collect-main-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: 56px;
    align-items: start;
}

.collect-copy h2 {
    font-size: clamp(1.7rem, 2.8vw, 2.2rem);
    font-weight: 750;
    margin-top: 6px;
    line-height: 1.22;
}

.collect-points {
    list-style: none;
    margin: 30px 0 0;
    padding: 0;
    display: grid;
    gap: 16px;
}

.collect-point {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.collect-point-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 8px 18px -8px rgba(0, 0, 0, .3);
}

.collect-point-icon svg {
    width: 19px;
    height: 19px;
}

.collect-point h3 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 4px;
}

.collect-point p {
    font-size: 14px;
}

/* ---------- coverage caveat ---------- */
.collect-note {
    display: flex;
    gap: 13px;
    margin-top: 28px;
    padding: 18px 20px;
    background: linear-gradient(165deg, rgba(255, 161, 0, .10), rgba(255, 161, 0, .03));
    border: 1px solid rgba(255, 161, 0, .28);
    border-radius: var(--radius);
}

.collect-note-icon {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(140deg, #ffc266, var(--accent-orange));
}

.collect-note-icon svg {
    width: 15px;
    height: 15px;
}

.collect-note p {
    font-size: 13.5px;
    line-height: 1.55;
}

.collect-note strong {
    color: var(--ink);
}

/* ---------- form ---------- */
.collect-form-col .enquiry-form {
    position: static;
}

/* two fields on one row (date + time) */
.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.field-row .field {
    margin-bottom: 13px;
}

/* ---------- four-step row ---------- */
.collect-steps {
    padding-top: 16px;
}

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


@media (max-width:1100px) {
    .collect-main-inner {
        grid-template-columns: minmax(0, 1fr) 350px;
        gap: 40px;
    }

    .steps-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width:900px) {
    .collect-main-inner {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .collect-form-col .enquiry-form {
        max-width: 560px;
    }
}

@media (max-width:720px) {
    .steps-grid-4 {
        grid-template-columns: 1fr;
    }

    .field-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
}


/* ===== Plain line icons: no background boxes ===== */
.service-icon, .why-icon, .qa-icon, .test-chip-icon, .mega-feature-icon,
.why-point-icon, .journey-icon, .family-icon, .service-box-icon, .fact-icon,
.contact-icon, .detail-icon, .faq-group-icon, .collect-point-icon, .collect-note-icon {
    background: none !important;
    box-shadow: none !important;
    color: var(--primary);
    width: auto;
    height: auto;
    justify-content: flex-start;
}
.icon-blue { color: var(--primary); }
.icon-green { color: var(--secondary); }
.icon-orange { color: var(--accent-orange); }
.why-icon, .collect-note-icon { color: var(--secondary); }
.test-chip-icon, .fact-icon, .detail-icon { flex-basis: auto; }
.service-icon svg, .why-icon svg, .qa-icon svg, .mega-feature-icon svg, .why-point-icon svg,
.journey-icon svg, .family-icon svg, .service-box-icon svg, .contact-icon svg,
.faq-group-icon svg, .collect-point-icon svg, .collect-note-icon svg {
    width: 40px;
    height: 40px;
    stroke-width: 1.6;
}
.test-chip-icon svg, .fact-icon svg, .detail-icon svg { width: 24px; height: 24px; }
.service-icon svg *, .why-icon svg *, .mega-feature-icon svg *, .why-point-icon svg *,
.journey-icon svg *, .family-icon svg *, .service-box-icon svg *, .contact-icon svg *,
.faq-group-icon svg *, .collect-point-icon svg *, .collect-note-icon svg * { stroke: currentColor; }
.service-icon svg { stroke-width: 1.6; }


/* ============================================================
   WOOCOMMERCE: single test / package
   ============================================================ */
.product-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 56px;
    align-items: center;
}

.book-card {
    background: #fff;
    border-radius: var(--radius);
    padding: 26px 24px;
    box-shadow: 0 24px 60px rgba(2, 29, 115, .35);
    color: var(--ink);
}

.book-card-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
}

.book-card-price {
    margin-top: 6px;
    font-size: 34px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--ink);
}

.book-card-price del {
    font-size: 17px;
    font-weight: 500;
    color: var(--muted);
    margin-right: 8px;
}

.book-card-price ins {
    text-decoration: none;
}

.book-card-list {
    list-style: none;
    margin: 18px 0 0;
    padding: 16px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    display: grid;
    gap: 10px;
}

.book-card-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14.5px;
    color: var(--ink-soft);
}

.book-card-list svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    color: var(--secondary);
}

.book-card-actions {
    margin-top: 18px;
    display: grid;
    gap: 10px;
}

.book-card-actions .btn {
    width: 100%;
}

.book-card-note {
    margin-top: 14px;
    font-size: 13px;
    text-align: center;
    color: var(--muted);
}

.book-card-note a {
    color: var(--primary);
    font-weight: 700;
}

.book-card .woocommerce-message,
.book-card .woocommerce-error,
.book-card .woocommerce-info {
    list-style: none;
    margin: 0 0 14px;
    padding: 10px 12px;
    font-size: 13.5px;
    border-radius: var(--radius);
    background: #eaf7f3;
    color: var(--ink);
}

.book-card .woocommerce-message .button {
    float: none;
    display: inline-block;
    margin-right: 8px;
    font-weight: 700;
    color: var(--primary);
}

.service-main-full {
    grid-template-columns: minmax(0, 1fr);
    max-width: 860px;
}

.facts-row-wrap {
    row-gap: 22px;
}

.facts-row-wrap .fact:nth-child(3n + 1) {
    border-left: 0;
    padding-left: 0;
}

@media (max-width: 960px) {
    .product-hero-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

/* ---------- Tests listing: search, organ filter, product chips ---------- */
.test-search {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 720px;
    margin: 0 0 28px;
    padding: 4px 6px 4px 20px;
    background: transparent;
    border: 1px solid rgba(1, 50, 180, .30);
    border-radius: var(--radius);
    transition: border-color .25s ease, box-shadow .25s ease;
}

.test-search:hover {
    border-color: rgba(1, 50, 180, .50);
}

.test-search:focus-within {
    border-color: var(--primary);
}

.test-search input[type="search"] {
    flex: 1;
    min-width: 0;
    padding: 13px 0;
    border: 0;
    outline: 0;
    background: none;
    font: inherit;
    font-size: 17px;
    color: var(--ink);
    box-shadow: none;
}

.test-search input[type="search"]::placeholder {
    color: var(--muted);
}

.test-search input[type="search"]::-webkit-search-cancel-button {
    cursor: pointer;
}

.test-search-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    color: var(--primary);
    cursor: pointer;
    transition: background .2s ease;
}

.test-search-btn:hover {
    background: rgba(1, 50, 180, .08);
}

.test-search-btn svg {
    width: 24px;
    height: 24px;
}

.organ-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    margin-bottom: 22px;
}

.organ-filter-label {
    flex-basis: 100%;
    text-align: left;
    margin: 0 0 4px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
}

.organ-pill {
    padding: 7px 16px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-soft);
    transition: background .2s, color .2s, border-color .2s;
}

.organ-pill:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.organ-pill.is-active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.result-count {
    text-align: left;
    font-size: 14px;
    color: var(--muted);
    margin-bottom: 18px;
}

.no-results {
    text-align: left;
    padding: 40px 0;
}

.no-results a {
    color: var(--primary);
    font-weight: 700;
}

.test-chip-product {
    justify-content: space-between;
    gap: 12px;
}

.test-chip-product .test-chip-main {
    display: flex;
    align-items: center;
    gap: 13px;
    flex: 1;
    min-width: 0;
}

.test-chip-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.test-chip-sub {
    font-size: 12.5px;
    color: var(--muted);
}

.test-chip-buy {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.test-chip-price {
    font-weight: 800;
    color: var(--ink);
    white-space: nowrap;
}

.test-chip-price del {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--muted);
}

.test-chip-price ins {
    text-decoration: none;
}

.test-grid-products {
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
}

.test-pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 34px;
}

.test-pagination .page-numbers {
    min-width: 38px;
    padding: 8px 12px;
    text-align: center;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    font-weight: 600;
}

.test-pagination .page-numbers.current {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

@media (max-width: 600px) {
    .test-search { padding-left: 14px; }
    .test-grid-products { grid-template-columns: 1fr; }
}

/* How it works */
.hiw-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.hiw-step {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 26px 24px;
    box-shadow: var(--shadow-sm);
}

.hiw-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-weight: 800;
    margin-bottom: 14px;
}

.hiw-step h3 {
    font-size: 17px;
    margin-bottom: 6px;
}

.hiw-step p {
    font-size: 14.5px;
}

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

/* My Account > Reports */
.dhee-report-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 20px 22px;
    margin-bottom: 16px;
}

.dhee-report-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: var(--ink);
}

.dhee-report-head span,
.dhee-report-tests {
    color: var(--muted);
    font-size: 14px;
}

.dhee-report-tests {
    margin: 6px 0 12px;
}

.dhee-report-files {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.dhee-report-files li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-top: 1px solid var(--line);
}

.dhee-report-files li span {
    flex: 1;
    font-weight: 600;
    word-break: break-all;
}

.dhee-report-files .button {
    padding: 7px 16px;
    border-radius: var(--radius);
    background: var(--primary);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}

.dhee-report-files .button + .button {
    background: #fff;
    color: var(--primary);
    box-shadow: 0 0 0 1px rgba(1, 50, 180, .25);
}

.dhee-report-empty {
    padding: 28px;
    text-align: center;
    background: var(--surface);
    border: 1px dashed var(--line);
    border-radius: var(--radius);
    color: var(--muted);
}

/* My Account layout */
.woocommerce:has(> .woocommerce-MyAccount-navigation) {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}

.woocommerce:has(> .woocommerce-MyAccount-navigation) > .woocommerce-notices-wrapper {
    grid-column: 1 / -1;
}

.woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin: 0;
    padding: 8px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.woocommerce-MyAccount-navigation li a {
    display: block;
    padding: 11px 14px;
    border-radius: var(--radius);
    font-weight: 600;
    color: var(--ink-soft);
}

.woocommerce-MyAccount-navigation li a:hover {
    background: #eef3ff;
    color: var(--primary);
}

.woocommerce-MyAccount-navigation li.is-active a {
    background: var(--primary);
    color: #fff;
}

.woocommerce-MyAccount-content {
    min-width: 0;
}

.woocommerce-MyAccount-content table.shop_table {
    width: 100%;
    background: var(--surface);
    border: 1px solid rgba(7, 24, 69, .14);
    border-collapse: collapse;
}

.woocommerce-MyAccount-content table.shop_table th,
.woocommerce-MyAccount-content table.shop_table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
    text-align: left;
}

@media (max-width: 820px) {
    .woocommerce:has(> .woocommerce-MyAccount-navigation) { grid-template-columns: 1fr; }
}

/* Default pages (cart, checkout, My Account) */
.page-hero-slim {
    padding: 22px 28px 20px;
    background: #eaf1ff;
}

.page-hero-slim .breadcrumb {
    margin-bottom: 4px;
}

.page-hero-slim h1 {
    margin-top: 0;
    font-size: clamp(1.5rem, 2.6vw, 1.9rem);
}

.page-main {
    padding-top: 48px;
    padding-bottom: 72px;
}

.page-main .container {
    max-width: 1240px;
    margin: 0 auto;
}

/* My Account polish */
.woocommerce mark,
.woocommerce-MyAccount-content mark {
    background: none;
    color: var(--primary);
    font-weight: 700;
}

.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content .woocommerce-column__title {
    font-size: 20px;
    margin: 28px 0 12px;
}

.woocommerce-MyAccount-content > p:first-child {
    margin-bottom: 16px;
}

.woocommerce-MyAccount-content a.button,
.woocommerce-MyAccount-content .woocommerce-button,
.woocommerce-MyAccount-content .order-again .button {
    display: inline-block;
    padding: 9px 20px;
    border-radius: var(--radius);
    background: #fff;
    color: var(--primary);
    font-weight: 700;
    box-shadow: 0 0 0 1px rgba(1, 50, 180, .25);
}

.woocommerce-MyAccount-content a.button:hover {
    background: var(--primary);
    color: #fff;
}

.woocommerce-MyAccount-content address {
    padding: 16px 18px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-style: normal;
}

.woocommerce-MyAccount-content .woocommerce-info,
.woocommerce-MyAccount-content .woocommerce-message {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin: 0 0 18px;
    padding: 14px 18px;
    list-style: none;
    background: #eef3ff;
    border-left: 3px solid var(--primary);
    border-radius: var(--radius);
}

/* dashboard cards */
.dhee-dash-hello {
    margin-bottom: 18px;
}

.dhee-dash-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.dhee-dash-card {
    display: block;
    padding: 22px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    color: var(--ink);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}

.dhee-dash-card:hover {
    box-shadow: var(--shadow-md);
}

.dhee-dash-card svg {
    width: 30px;
    height: 30px;
    color: var(--primary);
    margin-bottom: 10px;
}

.dhee-dash-card strong {
    display: block;
    font-size: 17px;
}

.dhee-dash-card span {
    display: block;
    margin-top: 4px;
    font-size: 14px;
    color: var(--muted);
}

@media (max-width: 720px) {
    .dhee-dash-grid { grid-template-columns: 1fr; }
}

/* Checkout form fields */
.woocommerce-checkout h3 {
    font-size: 20px;
    margin: 0 0 14px;
}

.woocommerce form .form-row {
    margin-bottom: 14px;
}

.woocommerce form .form-row label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce form .form-row input[type="date"],
.woocommerce form .form-row input[type="number"] {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid rgba(7, 24, 69, .22);
    border-radius: var(--radius);
    background: #fff;
    font: inherit;
    color: var(--ink);
}

.woocommerce form .form-row input:focus,
.woocommerce form .form-row select:focus,
.woocommerce form .form-row textarea:focus {
    outline: none;
    box-shadow: none;
    border-color: var(--primary);
}

.woocommerce-checkout #place_order,
.woocommerce #payment #place_order {
    width: 100%;
    padding: 15px 24px;
    border: 0;
    border-radius: var(--radius);
    background: linear-gradient(135deg, var(--primary-2) 0%, var(--primary) 60%, var(--primary-deep) 100%);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

.woocommerce-checkout #payment {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px;
}

.woocommerce-checkout #payment ul {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
}

.woocommerce form .form-row .description,
.woocommerce form .form-row span.description {
    display: block !important;
    position: static !important;
    width: auto !important;
    margin: 4px 0 0 !important;
    padding: 0 !important;
    background: none !important;
    font-size: 12.5px;
    color: var(--muted) !important;
}
.woocommerce form .form-row .description::before,
.woocommerce form .form-row .description::after { display: none !important; }


/* Form buttons (Save changes, Log in, Register, Update cart ...) */
.woocommerce form button.button,
.woocommerce form .woocommerce-Button,
.woocommerce form .woocommerce-button,
.woocommerce form input.button,
.woocommerce .woocommerce-form-login__submit,
.woocommerce .woocommerce-form-register__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    border: 0;
    border-radius: var(--radius);
    background: linear-gradient(135deg, var(--primary-2) 0%, var(--primary) 60%, var(--primary-deep) 100%);
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.woocommerce form button.button:hover,
.woocommerce form .woocommerce-Button:hover,
.woocommerce form input.button:hover {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-deep) 100%);
    color: #fff;
}

.woocommerce-EditAccountForm button[type="submit"],
.woocommerce-address-fields button[type="submit"] {
    margin-top: 8px;
}

/* Password change box */
.woocommerce-EditAccountForm fieldset {
    margin: 22px 0 6px;
    padding: 20px 22px 8px;
    background: var(--surface);
    border: 1px solid rgba(7, 24, 69, .14);
    border-radius: var(--radius);
}

.woocommerce-EditAccountForm fieldset legend {
    padding: 0 8px;
    font-size: 16px;
    font-weight: 750;
    color: var(--ink);
}

.woocommerce-MyAccount-content .woocommerce-EditAccountForm em {
    display: block;
    margin-top: 4px;
    font-size: 12.5px;
    color: var(--muted);
}

/* My Account > Addresses */
.woocommerce-MyAccount-content .woocommerce-Addresses {
    display: grid;
    grid-template-columns: minmax(0, 560px);
    gap: 18px;
    margin-top: 6px;
}

/* tests and scans are services: no shipping address needed */
.woocommerce-Addresses .woocommerce-Address:nth-child(2) {
    display: none;
}

.woocommerce-Addresses .woocommerce-Address,
.woocommerce-Addresses .col-1,
.woocommerce-Addresses .col-2 {
    float: none !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
    padding: 20px 22px;
    background: var(--surface);
    border: 1px solid rgba(7, 24, 69, .14);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.woocommerce-Address-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
}

.woocommerce-Address-title h2 {
    margin: 0;
    font-size: 18px;
}

.woocommerce-Address-title a.edit {
    white-space: nowrap;
    padding: 7px 16px;
    border-radius: var(--radius);
    background: #fff;
    color: var(--primary);
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 0 0 1px rgba(1, 50, 180, .25);
}

.woocommerce-Address-title a.edit:hover {
    background: var(--primary);
    color: #fff;
}

.woocommerce-Addresses address {
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    line-height: 1.8;
    color: var(--ink-soft);
}

/* edit address form */
.woocommerce-address-fields .woocommerce-address-fields__field-wrapper {
    max-width: 640px;
}

.woocommerce-MyAccount-content > h2,
.woocommerce-MyAccount-content form > h2 {
    margin-top: 0;
}

/* Order view: Billing address block */
.woocommerce-MyAccount-content .woocommerce-customer-details {
    margin-top: 28px;
    padding: 20px 24px;
    background: var(--surface);
    border: 1px solid rgba(7, 24, 69, .14);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.woocommerce-MyAccount-content .woocommerce-customer-details .woocommerce-column__title {
    margin: 0 0 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
    font-size: 18px;
}

.woocommerce-MyAccount-content .woocommerce-customer-details address {
    padding: 0 !important;
    margin: 0;
    background: none;
    border: 0 !important;
    box-shadow: none;
    line-height: 1.8;
    color: var(--ink-soft);
}

/* first line of the address = the patient / account name */
.woocommerce-MyAccount-content .woocommerce-customer-details address::first-line {
    font-weight: 700;
    color: var(--ink);
}

.woocommerce-MyAccount-content .woocommerce-customer-details address p {
    margin: 6px 0 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* same card look for the Booking details block */
.woocommerce-MyAccount-content .woocommerce-booking-details {
    margin-top: 28px;
}

.map-directions {
    margin: 14px 0 0;
}

.map-directions .btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transition: transform .25s ease;
}

.map-directions .btn:hover svg {
    transform: translateX(4px);
}

/* Contact details: icon sits on the same line as its heading */
.detail {
    display: block;
}

.detail-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.detail-head .detail-icon {
    width: auto;
    height: auto;
    flex: 0 0 auto;
    color: var(--primary);
    background: none;
}

.detail-head .detail-icon svg {
    width: 24px;
    height: 24px;
}

.detail-head h3 {
    margin: 0;
}

/* Contact page: "might not need to write to us" boxes, icon and heading share a brand colour */
.service-box.tone-blue .service-box-icon,
.service-box.tone-blue h3,
.service-box.tone-blue .service-box-link { color: var(--primary); }

.service-box.tone-green .service-box-icon,
.service-box.tone-green h3,
.service-box.tone-green .service-box-link { color: var(--secondary); }

.service-box.tone-orange .service-box-icon,
.service-box.tone-orange h3,
.service-box.tone-orange .service-box-link { color: var(--accent-orange); }

/* Health packages: dropdown filters */
.pkg-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px;
    margin: 0 0 22px;
}

.pkg-filter span {
    display: block;
    margin-bottom: 5px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
}

.pkg-filter select,
.woocommerce form .form-row select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230132b4' 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: 14px 14px;
    padding-right: 40px;
}

.pkg-filter select {
    min-width: 190px;
    padding-top: 11px;
    padding-bottom: 11px;
    padding-left: 14px;
    border: 1px solid rgba(7, 24, 69, .22);
    border-radius: var(--radius);
    font: inherit;
    color: var(--ink);
    cursor: pointer;
}

.pkg-filter select:focus {
    outline: none;
    box-shadow: none;
    border-color: var(--primary);
}

.pkg-filter-clear {
    padding-bottom: 11px;
    font-size: 14px;
    font-weight: 700;
    color: var(--primary);
}

@media (max-width: 600px) {
    .pkg-filter { flex: 1 1 100%; }
    .pkg-filter select { width: 100%; }
}