/* ==========================================================================
   T. Jana's Physio Care — Single Page Website
   Infinite Option Web Solutions
   Design tokens first, then layout. Mobile-first throughout.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
    /* Brand — the client's blue gradient, taken from the logo wordmark.
       Cyan is the light end, electric blue the dark end; green accent and
       orange stay, orange reserved ONLY for conversion buttons. */
    --brand-cyan: #07BAFC;
    --brand-blue: #004AFF;

    /* Bright gradient — small surfaces, accents, plates */
    --gradient-brand: linear-gradient(135deg, var(--brand-cyan) 0%, var(--brand-blue) 100%);
    /* Same gradient behind a dark scrim — for full sections that carry body text.
       White text on raw cyan fails contrast, the scrim fixes it while the cyan
       still reads through. */
    --gradient-band:
        linear-gradient(135deg, rgba(3, 16, 44, .38) 0%, rgba(3, 16, 44, .60) 100%),
        linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-cyan) 100%);

    --primary: #004AFF;
    --primary-dark: #0038C7;
    --primary-light: #07BAFC;
    --navy: #041B3D;
    --navy-soft: #062A5C;

    --accent: #4CAF2B;
    --accent-dark: #3B8A21;

    --cta: #F7941D;
    --cta-dark: #DC7B08;

    --text: #10243A;
    --text-body: #4A5C6D;
    --text-muted: #7C8C9B;

    --bg: #FFFFFF;
    --bg-alt: #F2F7FD;
    --bg-soft: #E4F3FE;
    --line: #D8E6F5;

    --white: #fff;

    /* Type */
    --font-display: 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
    --font-body: 'Rubik', 'Segoe UI', sans-serif;

    /* Shape + motion */
    --r-sm: 8px;
    --r-md: 14px;
    --r-lg: 22px;
    --r-pill: 999px;
    --shadow-sm: 0 4px 14px rgba(6, 43, 76, .07);
    --shadow-md: 0 14px 34px rgba(6, 43, 76, .10);
    --shadow-lg: 0 26px 60px rgba(6, 43, 76, .16);
    --shadow-cta: 0 12px 26px rgba(247, 148, 29, .34);
    --t-fast: .2s cubic-bezier(.4, 0, .2, 1);
    --t-base: .35s cubic-bezier(.4, 0, .2, 1);

    --header-h: 74px;
}

/* ---------- 2. Base ---------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.75;
    color: var(--text-body);
    background: var(--bg);
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    color: var(--text);
    line-height: 1.18;
    letter-spacing: -.02em;
    margin: 0 0 14px;
    font-weight: 800;
}

p { margin: 0 0 16px; }
a { text-decoration: none; color: var(--primary); transition: color var(--t-fast); }
img { max-width: 100%; display: block; }
ul { margin: 0; padding: 0; list-style: none; }

.container {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 18px;
}

/* Same protection for every content grid on the page */
.rev-grid > *,
.intro-cards > *,
.gal-grid > *,
.foot-grid > *,
.detail-grid > *,
.faq-grid > * { min-width: 0; }

.section { padding: 62px 0; }
.section-alt { background: var(--bg-alt); }

/* Anchor targets stop clear of the sticky nav bar instead of landing under it */
section[id] { scroll-margin-top: 16px; }

/* Section heading block */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: var(--accent-dark);
    margin-bottom: 12px;
}
.eyebrow::before {
    content: "";
    width: 26px;
    height: 2px;
    background: var(--accent);
    border-radius: 2px;
}
.eyebrow.is-light { color: #8FE3FF; }
.eyebrow.is-light::before { background: var(--cta); }

.sec-head { max-width: 660px; margin-bottom: 38px; }
.sec-head.is-center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head.is-center .eyebrow::before { display: none; }
.sec-head h2 { font-size: 30px; }
.sec-head p { margin-bottom: 0; }
/* The cyan end is too light to read on white — highlight words take the blue end */
.hl { color: var(--brand-blue); }
.hl-green { color: var(--accent); }

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 48px;
    padding: 13px 26px;
    border: 2px solid transparent;
    border-radius: var(--r-pill);
    font-family: var(--font-display);
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: .3px;
    cursor: pointer;
    transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.btn i { font-size: 17px; }
.btn:hover { transform: translateY(-2px); }

.btn-cta { background: var(--cta); color: #fff; box-shadow: var(--shadow-cta); }
.btn-cta:hover { background: var(--cta-dark); color: #fff; }

.btn-primary { background: var(--gradient-brand); color: #fff; box-shadow: 0 12px 26px rgba(0, 74, 255, .30); }
.btn-primary:hover { background: var(--brand-blue); color: #fff; }

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

.btn-ghost-light { border-color: rgba(255, 255, 255, .55); color: #fff; }
.btn-ghost-light:hover { background: #fff; color: var(--primary-dark); }
.btn.green{
    background: #25D366!important;
}
/* ---------- 3. Top bar ---------- */
.topbar {
    background: var(--navy);
    color: #C4DAEC;
    font-size: 13px;
}
.topbar .container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    min-height: 42px;
    flex-wrap: wrap;
}
.topbar-msg { font-weight: 500; color: #E6F1FA; text-align: center; }
.topbar-msg b { color: var(--cta); font-weight: 700; }
/* Address + hours would force the document wider than a phone screen,
   so this row only appears from tablet width up. */
.topbar-meta { display: none; align-items: center; gap: 26px; flex-wrap: wrap; }
.topbar-meta span { display: inline-flex; align-items: center; gap: 8px; }
.topbar-meta i { color: var(--cta); font-size: 15px; }

/* ---------- 4. Header ---------- */
.site-header { background: #fff; }
.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-top: 16px;
    padding-bottom: 16px;
}
.brand { display: inline-flex; align-items: center; }
/* Wide, detailed logo — it needs real height or the tagline lines turn to mush */
.brand-logo {
    height: 56px;
    width: auto;
    display: block;
    transition: transform var(--t-fast);
}
.brand:hover .brand-logo { transform: scale(1.03); }
/* The logo carries a dark 3D edge, so on the navy footer it sits on a light
   plate to keep the wordmark readable. */
.brand.is-footer {
    background: #fff;
    border-radius: var(--r-md);
    padding: 10px 14px;
    margin-bottom: 16px;
}
.brand.is-footer .brand-logo { height: 76px; }

.header-info { display: none; align-items: center; gap: 28px; }
.info-item { display: flex; align-items: center; gap: 12px; }
.info-item .ico {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--bg-soft);
    color: var(--primary);
    font-size: 19px;
    transition: var(--t-fast);
}
.info-item:hover .ico { background: var(--primary); color: #fff; }
.info-item small { display: block; font-size: 12.5px; color: var(--text-muted); line-height: 1.4; }
.info-item b {
    display: block;
    font-family: var(--font-display);
    font-size: 15.5px;
    color: var(--text);
}
.header-cta { display: none; }

.nav-toggle {
    width: 46px;
    height: 46px;
    border: 1px solid var(--line);
    background: #fff;
    border-radius: var(--r-sm);
    color: var(--primary);
    font-size: 22px;
    cursor: pointer;
    display: grid;
    place-items: center;
}

/* ---------- 5. Navigation ---------- */
.nav-wrap { position: relative; z-index: 60; }
.main-nav {
    display: none;
    background: #fff;
    border-top: 1px solid var(--line);
}
.main-nav.is-open { display: block; }
.nav-inner { display: flex; align-items: center; justify-content: space-between; }
.nav-list { display: flex; flex-direction: column; padding: 8px 0; }
.nav-list > li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 13px 2px;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    border-bottom: 1px solid var(--bg-alt);
}
.nav-list > li > a:hover,
.nav-list > li > a.is-active { color: var(--primary); }
.nav-list .caret { font-size: 12px; transition: transform var(--t-fast); }
.has-drop.is-open > a .caret { transform: rotate(180deg); }

.drop {
    display: none;
    padding: 6px 0 12px 12px;
}
.has-drop.is-open .drop { display: block; }
.drop a {
    display: block;
    padding: 9px 10px;
    font-size: 14.5px;
    color: var(--text-body);
    border-radius: var(--r-sm);
}
.drop a:hover { background: var(--bg-alt); color: var(--primary); }

/* Logo inside the nav bar — only shown once the bar sticks to the top and the
   header (with the main logo) has scrolled away. */
.nav-brand { display: none; }
.nav-brand img { height: 50px; width: auto; display: block; }

.nav-socials { display: none; gap: 10px; }
.nav-socials a {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--bg-alt);
    color: var(--primary);
    font-size: 15px;
    transition: var(--t-fast);
}
.nav-socials a:hover { background: var(--primary); color: #fff; transform: translateY(-2px); }

/* Sticky state */
.nav-wrap.is-stuck {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    box-shadow: var(--shadow-md);
    animation: slideDown .35s ease;
}
@keyframes slideDown { from { transform: translateY(-100%); } to { transform: translateY(0); } }

/* ---------- 6. Hero ---------- */
.hero { position: relative; overflow: hidden; background: var(--navy); }
.hero-track { position: relative; }
/* Outgoing slide keeps its visibility until the fade finishes, so the two
   slides genuinely cross-fade instead of flashing the dark background. */
.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .9s ease, visibility 0s linear .9s;
}
.hero-slide.is-active {
    position: relative;
    opacity: 1;
    visibility: visible;
    z-index: 2;
    transition: opacity .9s ease, visibility 0s linear 0s;
}
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media::after {
    content: "";
    position: absolute;
    inset: 0;
    /* The photograph carries the hero and keeps its own colour — only a soft
       neutral scrim sits on top, weighted towards the centre where the headline
       is, so the type stays readable without tinting the picture blue.
       Never make this opaque; a solid gradient hides the photograph entirely. */
    background:
        radial-gradient(ellipse 80% 72% at 50% 46%, rgba(4, 14, 30, .58) 0%, rgba(4, 14, 30, .34) 58%, rgba(4, 14, 30, .12) 100%),
        linear-gradient(180deg, rgba(4, 14, 30, .24) 0%, rgba(4, 14, 30, .10) 42%, rgba(4, 14, 30, .34) 100%);
}
.hero-body {
    position: relative;
    z-index: 2;
    padding: 74px 0 90px;
    text-align: center;
    max-width: 820px;
    margin: 0 auto;
}
.hero-chip {
    display: inline-block;
    background: var(--cta);
    color: #10243A;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 12.5px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    padding: 8px 18px;
    border-radius: 4px;
    margin-bottom: 20px;
}
/* Over a live photograph the type needs its own weight — a soft shadow keeps
   the headline readable even where the picture goes light behind it. */
.hero h1 {
    color: #fff;
    font-size: 38px;
    line-height: 1.08;
    margin-bottom: 18px;
    text-shadow: 0 3px 22px rgba(4, 14, 30, .55);
}
.hero h1 span { color: var(--cta); }
.hero p {
    color: #EAF3FA;
    font-size: 16.5px;
    max-width: 620px;
    margin: 0 auto 28px;
    text-shadow: 0 2px 14px rgba(4, 14, 30, .6);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* Flat translucent squares, quiet until hovered */
.hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 0;
    background: rgba(255, 255, 255, .82);
    color: var(--text);
    font-size: 20px;
    cursor: pointer;
    border-radius: 50px;
    transition: var(--t-fast);
}
.hero-arrow:hover { background: var(--cta); color: #fff; }
.hero-arrow.prev { left: 10px; }
.hero-arrow.next { right: 10px; }
/* On phones the arrows would sit on top of the headline — dots and swipe cover it */
@media (max-width: 767px) { .hero-arrow { display: none; } }

.hero-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 22px;
    z-index: 4;
    display: flex;
    justify-content: center;
    gap: 9px;
}
.hero-dots button {
    width: 26px;
    height: 4px;
    border: 0;
    padding: 0;
    border-radius: 3px;
    background: rgba(255, 255, 255, .4);
    cursor: pointer;
    transition: var(--t-fast);
}
.hero-dots button.is-active { background: var(--cta); width: 40px; }

/* ---------- 7. Intro band — portrait, promise, two highlights ----------
   Dark brand band directly under the hero: cut-out portrait on the left,
   Light band directly under the hero: cut-out portrait on the left, the clinic
   promise on the right, and a white panel of two highlight cards that the
   portrait tucks behind. */
.intro {
    position: relative;
    background: var(--bg-alt);
    overflow: hidden;
    /* small breathing room under the card panel before About begins */
    padding: 48px 0 36px;
}
/* Oversized word behind the portrait — the figure covers most of it, which is
   the point; it reads as texture rather than as a word to be read. */
.intro-mark {
    position: absolute;
    left: -24px;
    bottom: 250px;
    z-index: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 104px;
    line-height: 1;
    letter-spacing: 6px;
    color: rgba(0, 74, 255, .08);
    pointer-events: none;
    user-select: none;
}
/* keeps every real element above the watermark */
.intro > .container { position: relative; z-index: 1; }

.intro-grid { display: grid; gap: 24px; align-items: end; }

.intro-figure { position: relative; text-align: center; }
/* Soft brand disc so the cut-out does not float against the flat background */
.intro-figure::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(7, 186, 252, .22), transparent 70%);
}
.intro-figure img {
    position: relative;
    z-index: 2;
    margin: 0 auto;
    max-width: 285px;
    filter: drop-shadow(0 20px 34px rgba(6, 43, 76, .22));
}

.intro-copy .chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--line);
    color: var(--primary);
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    padding: 7px 16px;
    border-radius: var(--r-pill);
    margin-bottom: 16px;
}
.intro-copy .chip i { color: var(--cta); }
.intro-copy h2 { color: var(--text); font-size: 32px; }
.intro-copy h2 span { color: var(--brand-blue); }
.intro-copy p { color: var(--text-body); }
.intro-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }

/* Highlight panel — white card the portrait stands behind */
.intro-cards {
    position: relative;
    z-index: 3;              /* sits over the portrait, hiding its cut edge */
    margin-top: 34px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
    padding: 26px 22px 30px;
    display: grid;
    gap: 24px;
}
.intro-card .ico {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--gradient-brand);
    color: #fff;
    font-size: 24px;
    margin-bottom: 14px;
    box-shadow: 0 8px 18px rgba(0, 74, 255, .22);
}
.intro-card h3 { color: var(--text); font-size: 18px; margin-bottom: 8px; }
.intro-card p { color: var(--text-body); font-size: 14.5px; margin: 0; line-height: 1.65; }
/* ---------- 8. About — copy left, clinic photograph bled in on the right ----
   The photograph is a section background rather than an <img>, so the subject
   runs to the edge of the viewport. It already fades to near-white on its left,
   and the gradient overlay finishes the job so the copy always sits on a clean
   ground whatever the screen width. */
.about {
    position: relative;
    background-color: var(--bg-alt);
    background-image: url("../images/bg.png");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: cover;
    /* starts flush against the intro section above it */
    padding: 0 0 60px;
    overflow: hidden;
}
/* On a phone the copy sits over the whole photograph, so the wash is almost
   flat and the picture is reduced to texture. The diagonal reveal only makes
   sense once there is room for the copy beside the subject — see the 992
   breakpoint. */
.about::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(242, 247, 253, .95) 0%,
        rgba(242, 247, 253, .93) 100%);
}
.about .container { position: relative; z-index: 1; }
.about-copy { max-width: 560px; }
.about h2 { font-size: 30px; margin-bottom: 18px; }
.about-lead { font-size: 17px; color: var(--text-body); max-width: 480px; }

.about-list { display: grid; gap: 14px; margin: 26px 0 32px; }
.about-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; }
.about-list i { color: var(--brand-blue); font-size: 20px; line-height: 1.45; }

/* Solid call-to-action block beside the signature, split by a hairline rule */
.about-foot { display: flex; flex-wrap: wrap; align-items: stretch; gap: 20px; }
.about-cta {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    background: var(--gradient-brand);
    color: #fff;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
    padding: 18px 26px;
    border-radius:50px;
    box-shadow: 0 14px 30px rgba(0, 74, 255, .26);
    transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.about-cta i { font-size: 30px; color: var(--cta); }
.about-cta:hover { transform: translateY(-3px); color: #fff; box-shadow: 0 18px 36px rgba(0, 74, 255, .34); }

.about-sign { display: flex; align-items: center; gap: 14px; padding-left: 20px; border-left: 3px solid var(--cta); }
.about-sign img {
    width: 62px;
    height: 62px;
    flex: 0 0 62px;
    border-radius: 50%;
    object-fit: cover;
    background: #fff;
    border: 2px solid #fff;
    box-shadow: var(--shadow-sm);
}
.sign-name {
    display: block;
    font-family: 'Caveat', cursive;
    font-size: 30px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.1;
}
.sign-role { display: block; font-size: 12.5px; color: var(--text-muted); }
/* ---------- 8b. Location — full-bleed map with a floating detail card ------ */
.map-band {
    position: relative;
    line-height: 0;                 /* kills the inline-frame descender gap */
    background: var(--bg-alt);
}
.map-band iframe {
    width: 100%;
    height: 320px;
    border: 0;
    display: block;
}
.map-card {
    position: relative;
    z-index: 2;
    margin: -40px 18px 0;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    padding: 24px 22px 26px;
    line-height: 1.75;
}
.map-card h3 { font-size: 20px; margin-bottom: 6px; }
.map-card p { font-size: 14.5px; margin-bottom: 18px; }

/* ---------- 9. Services — photo cards on a snap slider ---------- */
.svc-slider { position: relative; }

/* Native horizontal scroller: touch swipe and trackpad work for free, the
   arrows just drive scrollLeft. */
.svc-track {
    display: flex;
    gap: 22px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 6px 2px 10px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.svc-track::-webkit-scrollbar { display: none; }

.svc-card {
    flex: 0 0 100%;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    overflow: hidden;
    transition: transform var(--t-base), box-shadow var(--t-base);
}
.svc-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }

/* extra bottom room so a three-line description never runs under the badge */
.svc-body { padding: 24px 24px 36px; }
.svc-card h3 { font-size: 20px; margin-bottom: 8px; }
.svc-card p { font-size: 14.5px; margin: 0; }

/* Photo fills the bottom of the card; the badge straddles its top edge and the
   arrow sits in the bottom-left corner. */
.svc-media { position: relative; margin-top: auto; }
.svc-media img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}
.svc-badge {
    position: absolute;
    top: -30px;
    right: 20px;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #fff;
    border: 5px solid #fff;
    color: var(--brand-blue);
    font-size: 25px;
    box-shadow: var(--shadow-sm);
    transition: var(--t-base);
}
.svc-card:hover .svc-badge { background: var(--gradient-brand); color: #fff; }

.svc-go {
    position: absolute;
    left: 18px;
    bottom: 18px;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #fff;
    color: var(--text);
    font-size: 22px;
    box-shadow: var(--shadow-sm);
    transition: var(--t-base);
}
.svc-go:hover {
    background: var(--gradient-brand);
    color: #fff;
    transform: rotate(45deg);
}

/* Mobile: arrows sit under the track. From tablet up they move to the sides,
   vertically centred on the cards — see the 768 breakpoint. */
.svc-nav { display: flex; justify-content: center; gap: 12px; margin-top: 22px; }
.svc-arrow {
    width: 48px;
    height: 48px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--text);
    font-size: 19px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: var(--t-fast);
}
.svc-arrow:hover:not(:disabled) { background: var(--gradient-brand); border-color: transparent; color: #fff; }
.svc-arrow:disabled { opacity: .35; cursor: default; }

.svc-note {
    margin-top: 30px;
    background: var(--bg-soft);
    border-radius: var(--r-md);
    padding: 22px;
    display: grid;
    gap: 14px;
    align-items: center;
    text-align: center;
}
.svc-note p { margin: 0; color: var(--text); font-size: 15.5px; }
.svc-note b { font-family: var(--font-display); }

/* ---------- 10. Gallery ---------- */
/* Full-bleed mosaic — the grid sits outside .container on purpose, so the
   photographs run edge to edge. Every tile opens in the lightbox. */
.gal-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}
.gal-item {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 0;          /* tiles butt together in the full-bleed band */
    cursor: pointer;
    background: var(--bg-soft);
    aspect-ratio: 4 / 3;
}
.gal-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.gal-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(3, 16, 44, .80), rgba(3, 16, 44, 0) 60%);
    opacity: 0;
    transition: opacity var(--t-base);
}
.gal-item:hover img { transform: scale(1.08); }
.gal-item:hover::after { opacity: 1; }
.gal-cap {
    position: absolute;
    left: 14px;
    bottom: 12px;
    right: 14px;
    z-index: 2;
    color: #fff;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    transform: translateY(10px);
    opacity: 0;
    transition: var(--t-base);
}
.gal-item:hover .gal-cap { transform: translateY(0); opacity: 1; }

/* `.gal-item { display:block }` would otherwise beat the browser's [hidden]
   rule, so the JS-hidden tiles need this explicitly. Without JS every photo
   simply shows — the gallery never ends up empty. */
.gal-item[hidden] { display: none; }

.gal-more,
.faq-more { text-align: center; margin-top: 26px; }
/* .faq-col keeps the accordion and its button in a single grid cell, so the
   button follows the last question instead of starting a new grid row under
   the tall panel on the left */
.faq-more { margin-top: 22px; }
.gal-more .btn i,
.faq-more .btn i { transition: transform var(--t-fast); }
.gal-more .btn:hover i,
.faq-more .btn:hover i { transform: translateY(3px); }
/* same reason as .gal-item[hidden] — be explicit rather than rely on the UA rule */
.acc-item[hidden] { display: none; }


/* Lightbox */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(6, 43, 76, .93);
    backdrop-filter: blur(6px);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.lightbox.is-open { display: flex; }
.lightbox img { max-width: 92vw; max-height: 78vh; border-radius: var(--r-md); }
.lb-close, .lb-nav {
    position: absolute;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .35);
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 22px;
    border-radius: 50%;
    cursor: pointer;
    transition: var(--t-fast);
}
.lb-close:hover, .lb-nav:hover { background: var(--cta); border-color: var(--cta); }
.lb-close { top: 20px; right: 20px; }
.lb-nav.prev { left: 14px; top: 50%; transform: translateY(-50%); }
.lb-nav.next { right: 14px; top: 50%; transform: translateY(-50%); }
.lb-caption {
    position: absolute;
    bottom: 24px;
    left: 0;
    right: 0;
    text-align: center;
    color: #CFE2F1;
    font-size: 14px;
}

/* ---------- 11. Certifications — framed cards on a snap slider ---------- */
.cert { background: var(--navy); color: #fff; overflow: hidden; }
.cert .sec-head h2 { color: #fff; }
.cert .sec-head p { color: #A9C6DD; }

.cert-slider { position: relative; }
.cert-track {
    display: flex;
    gap: 22px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 6px 2px 12px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.cert-track::-webkit-scrollbar { display: none; }

/* White mount with the scan inset inside a thin frame, caption underneath */
.cert-card {
    flex: 0 0 100%;
    scroll-snap-align: start;
    margin: 0;
    background: #fff;
    border-radius: 16px;
    padding: 12px 12px 4px;
    box-shadow: 0 16px 34px rgba(2, 12, 32, .30);
    transition: transform var(--t-base), box-shadow var(--t-base);
}
.cert-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 46px rgba(2, 12, 32, .42);
}
.cert-shot {
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg-alt);
}
.cert-shot img {
    width: 100%;
    aspect-ratio: 600 / 430;
    object-fit: cover;
    display: block;
}
.cert-card figcaption {
    padding: 14px 6px 14px;
    text-align: center;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    color: var(--text-body);
    line-height: 1.45;
}

.cert-nav { display: flex; justify-content: center; gap: 12px; margin-top: 20px; }
.cert-arrow {
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255, 255, 255, .24);
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-size: 19px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: var(--t-fast);
}
.cert-arrow:hover:not(:disabled) { background: var(--gradient-brand); border-color: transparent; }
.cert-arrow:disabled { opacity: .3; cursor: default; }

/* ---------- 12. Reviews ---------- */
.rev-top { display: grid; gap: 22px; align-items: end; margin-bottom: 34px; }
.rating-box {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 20px 22px;
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    gap: 16px;
}
.rating-score {
    font-family: var(--font-display);
    font-size: 40px;
    font-weight: 800;
    color: var(--primary);
    line-height: 1;
}
.stars { color: var(--cta); font-size: 15px; letter-spacing: 2px; }
.rating-box small { display: block; color: var(--text-muted); font-size: 13px; }

.rev-grid { display: grid; gap: 18px; }
.rev-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 24px 22px;
    position: relative;
    transition: var(--t-base);
}
.rev-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
/* Keeps the patient name aligned to the card bottom when quotes differ in length */
.rev-card { display: flex; flex-direction: column; }
.rev-card .rev-who { margin-top: auto; }
.rev-card .quote {
    position: absolute;
    right: 18px;
    top: 12px;
    font-size: 44px;
    color: var(--bg-soft);
    line-height: 1;
}
.rev-card p { font-size: 15px; color: var(--text-body); position: relative; z-index: 1; }
.rev-who { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--bg-alt); }
.avatar {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 17px;
    color: #fff;
    background: var(--gradient-brand);
}
.rev-who b { display: block; font-family: var(--font-display); font-size: 15.5px; color: var(--text); }
.rev-who span { font-size: 13px; color: var(--text-muted); }

/* ---------- 13. FAQ ---------- */
.faq-grid { display: grid; gap: 30px; }
.faq-aside {
    background: var(--gradient-band);
    border-radius: var(--r-lg);
    padding: 30px 26px;
    color: #fff;
}
.faq-aside h3 { color: #fff; font-size: 22px; }
.faq-aside p { color: #C3DBEE; font-size: 15px; }
.faq-call { display: flex; align-items: center; gap: 13px; margin-top: 20px; }
.faq-call .ico {
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--cta);
    color: #fff;
    font-size: 22px;
}
.faq-call small { display: block; color: #A9C6DD; font-size: 12.5px; }
.faq-call b { font-family: var(--font-display); font-size: 19px; color: #fff; }

.acc-item {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    margin-bottom: 12px;
    overflow: hidden;
    transition: var(--t-base);
}
.acc-item.is-open { border-color: var(--primary-light); box-shadow: var(--shadow-sm); }
.acc-q {
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    padding: 17px 52px 17px 20px;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    cursor: pointer;
    position: relative;
}
.acc-q::after {
    content: "\F64D";
    font-family: "bootstrap-icons";
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 15px;
    color: var(--primary);
    transition: transform var(--t-fast);
}
.acc-item.is-open .acc-q::after { transform: translateY(-50%) rotate(45deg); }
.acc-a { max-height: 0; overflow: hidden; transition: max-height var(--t-base); }
.acc-a p { padding: 0 20px 18px; margin: 0; font-size: 15px; }

/* ---------- 14. Contact — copy + hours left, booking panel right ---------- */
.contact { background: var(--bg-alt); }
.contact-grid { display: grid; gap: 30px; align-items: start; }
/* grid children default to min-width:auto; a select sized by its longest option
   would otherwise stretch the page past the phone viewport */
.contact-grid > *,
.contact-info > *,
.form-grid > * { min-width: 0; }

/* --- left column --- */
.chip-soft {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-soft);
    color: var(--primary);
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    padding: 7px 16px;
    border-radius: var(--r-pill);
    margin-bottom: 16px;
}
.contact-copy h2 { font-size: 30px; }
.contact-copy > p { color: var(--text-body); max-width: 540px; }

.hours {
    width: 100%;
    border-collapse: collapse;
    margin-top: 28px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
    background: #fff;
}
.hours th,
.hours td {
    text-align: left;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
    font-size: 15px;
}
.hours thead th {
    background: var(--bg-soft);
    font-family: var(--font-display);
    font-size: 16px;
    color: var(--text);
}
.hours tbody td { color: var(--text-body); }
.hours tbody td:first-child { font-weight: 500; color: var(--text); }
.hours tr:last-child td { border-bottom: 0; }

/* --- Booking: framed photograph beside the form, on the brand band --------- */
.book { background: var(--gradient-band); }
.book-split { display: grid; gap: 30px; align-items: center; }

/* A contained, rounded photo rather than a full-bleed half — the caption chip
   rides on its bottom edge. */
.book-photo {
    position: relative;
    margin: 0;
    border-radius: var(--r-lg);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .16);
    box-shadow: 0 26px 54px rgba(2, 12, 32, .45);
}
.book-photo img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}
.book-photo figcaption {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 14px;
    display: flex;
    align-items: center;
    gap: 9px;
    background: rgba(4, 18, 44, .62);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--r-pill);
    padding: 9px 16px;
    color: #fff;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
}
.book-photo figcaption i { color: var(--accent); font-size: 16px; }

.book-panel { background: transparent; padding: 0; }
.book-inner { max-width: 620px; margin: 0 auto; }
.book-panel h2 { color: #fff; font-size: 28px; margin-bottom: 26px; }

.chip-dark {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .22);
    color: #fff;
    font-family: var(--font-display);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 7px 16px;
    border-radius: var(--r-pill);
    margin-bottom: 16px;
}
.chip-dark i { color: var(--cta); }

/* Fields sit on the dark panel: translucent fill, light text and placeholders */
.book-panel .field label { color: rgba(255, 255, 255, .78); }
.book-panel .field input,
.book-panel .field select,
.book-panel .field textarea {
    background: rgba(255, 255, 255, .10);
    border-color: rgba(255, 255, 255, .22);
    color: #fff;
}
.book-panel .field input::placeholder,
.book-panel .field textarea::placeholder { color: rgba(255, 255, 255, .55); }
.book-panel .field select option { color: var(--text); }   /* native menu stays light */
.book-panel .field input:focus,
.book-panel .field select:focus,
.book-panel .field textarea:focus {
    border-color: var(--cta);
    box-shadow: 0 0 0 3px rgba(247, 148, 29, .22);
}
.book-panel .field input[type="date"] { color-scheme: dark; }

.book-submit { display: flex; justify-content: flex-end; }
.book-submit .btn { min-width: 220px; }
.form-note { font-size: 12.5px; color: rgba(255, 255, 255, .60); margin: 14px 0 0; }

.form-grid { display: grid; gap: 16px; }
.field label {
    display: block;
    font-family: var(--font-display);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 6px;
}
.field input,
.field select,
.field textarea {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--text);
    background: #fff;
    transition: var(--t-fast);
}
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--primary-light);
    box-shadow: 0 0 0 3px rgba(7, 186, 252, .16);
}
.field .err { display: none; color: #D93025; font-size: 12.5px; margin-top: 5px; }
.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: #D93025; }
.field.has-error .err { display: block; }

.form-msg {
    display: none;
    border-radius: var(--r-sm);
    padding: 13px 16px;
    font-size: 14.5px;
    margin-bottom: 16px;
}
.form-msg.ok { display: block; background: #E8F6E4; color: #2C6B18; border: 1px solid #BFE4B4; }
.form-msg.bad { display: block; background: #FDECEA; color: #B3261E; border: 1px solid #F5C6C2; }

/* --- info cards --- */
.contact-info { display: grid; gap: 16px; margin-top: 34px; }
.ci-card {
    display: flex;
    gap: 16px;
    align-items: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 20px;
    transition: var(--t-base);
}
.ci-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.ci-card .ico {
    width: 62px;
    height: 62px;
    flex: 0 0 62px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--gradient-brand);
    color: #fff;
    font-size: 26px;
    box-shadow: 0 10px 22px rgba(0, 74, 255, .24);
}
.ci-card b {
    display: block;
    font-family: var(--font-display);
    font-size: 17px;
    color: var(--text);
    margin-bottom: 3px;
}
.ci-card span span,
.ci-card > span > span { display: block; font-size: 14.5px; color: var(--text-body); line-height: 1.55; }

/* ---------- 15. Footer ---------- */
.site-footer { background: var(--navy); color: #A9C6DD; padding-top: 52px; }
.foot-grid { display: grid; gap: 30px; padding-bottom: 34px; }
.site-footer h4 {
    color: #fff;
    font-size: 17px;
    margin-bottom: 16px;
    position: relative;
    padding-bottom: 10px;
}
.site-footer h4::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 32px;
    height: 2px;
    background: var(--cta);
}
.site-footer p { font-size: 14.5px; }
.foot-links li { margin-bottom: 9px; }
.foot-links a { color: #A9C6DD; font-size: 14.5px; display: inline-flex; align-items: center; gap: 8px; }
.foot-links a i { color: var(--cta); font-size: 12px; }
.foot-links a:hover { color: #fff; }
.foot-contact li { display: flex; gap: 11px; margin-bottom: 13px; font-size: 14.5px; }
.foot-contact i { color: var(--cta); font-size: 17px; line-height: 1.6; }
.foot-contact a { color: #A9C6DD; }
.foot-contact a:hover { color: #fff; }
.foot-socials { display: flex; gap: 10px; margin-top: 18px; }
.foot-socials a {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-size: 16px;
    transition: var(--t-fast);
}
.foot-socials a:nth-of-type(1):hover { background: #1877F2; }
.foot-socials a:nth-of-type(2):hover { background: #E4405F; }
.foot-socials a:nth-of-type(3):hover { background: #25D366; }
.foot-socials a:nth-of-type(4):hover { background: #FF0000; }
.foot-bottom {
    border-top: 1px solid rgba(255, 255, 255, .1);
    padding: 18px 0 88px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: space-between;
    font-size: 13.5px;
}
.foot-bottom a { color: #CFE2F1; }

/* ---------- 16. Floating + mobile bar ---------- */
.fab-whatsapp {
    position: fixed;
    right: 16px;
    bottom: 82px;
    z-index: 120;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #25D366;
    color: #fff;
    font-size: 28px;
    box-shadow: 0 10px 26px rgba(37, 211, 102, .45);
    transition: var(--t-fast);
}
.fab-whatsapp:hover { transform: scale(1.08); color: #fff; }

.to-top {
    position: fixed;
    right: 16px;
    bottom: 144px;
    z-index: 120;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    display: grid;
    place-items: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: var(--t-base);
    box-shadow: var(--shadow-md);
}
.to-top.is-show { opacity: 1; visibility: visible; transform: translateY(0); }

.mobile-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 130;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #fff;
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 20px rgba(6, 43, 76, .10);
}
.mobile-bar a {
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
}
.mobile-bar a i { font-size: 19px; }
.mobile-bar a:first-child { color: var(--primary); }
.mobile-bar a:last-child { background: var(--cta); color: #fff; }

/* ---------- 17. Scroll reveal (fail-safe: hidden only when JS is on) ---------- */
.has-js [data-animate] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .7s ease, transform .7s ease;
}
.has-js [data-animate].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .001s !important; transition-duration: .001s !important; }
    .has-js [data-animate] { opacity: 1; transform: none; }
    html { scroll-behavior: auto; }
}

/* ---------- 18. Service detail page ---------- */
.page-hero {
    position: relative;
    background: var(--gradient-band);
    color: #fff;
    padding: 54px 0;
    text-align: center;
}
.page-hero h1 { color: #fff; font-size: 30px; }
.crumb { font-size: 14px; color: #A9C6DD; }
.crumb a { color: #8FE3FF; }
.crumb i { font-size: 11px; margin: 0 6px; }

.detail-grid { display: grid; gap: 30px; }
.detail-body h2 { font-size: 24px; margin-top: 28px; }
.detail-body h2:first-child { margin-top: 0; }
.detail-figure img { border-radius: var(--r-lg); box-shadow: var(--shadow-md); }
.check-list { display: grid; gap: 11px; margin: 18px 0 24px; }
.check-list li { display: flex; gap: 11px; font-size: 15.5px; }
.check-list i { color: var(--accent); font-size: 19px; line-height: 1.5; }

.side-box {
    background: var(--bg-alt);
    border-radius: var(--r-md);
    padding: 22px;
    margin-bottom: 20px;
}
.side-box h3 { font-size: 18px; }
.side-list li { border-bottom: 1px solid var(--line); }
.side-list li:last-child { border-bottom: 0; }
.side-list a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 11px 0;
    font-size: 14.5px;
    color: var(--text-body);
    font-family: var(--font-display);
    font-weight: 500;
}
.side-list a:hover, .side-list a.is-active { color: var(--primary); }
.side-list a i { color: var(--accent); font-size: 13px; }

.side-cta {
    background: var(--gradient-band);
    color: #fff;
    border-radius: var(--r-md);
    padding: 24px 22px;
    text-align: center;
}
.side-cta h3 { color: #fff; font-size: 19px; }
.side-cta p { color: #C3DBEE; font-size: 14.5px; }

/* ==========================================================================
   19. Breakpoints
   ========================================================================== */
@media (min-width: 576px) {
    .hero h1 { font-size: 44px; }
    .svc-note { grid-template-columns: 1fr auto; text-align: left; }
    .gal-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .cert-card { flex-basis: calc((100% - 22px) / 2); }
}

@media (min-width: 768px) {
    .topbar .container { justify-content: space-between; }
    .topbar-meta { display: flex; }

    .section { padding: 84px 0; }
    .sec-head h2 { font-size: 38px; }
    .hero-body { padding: 110px 0 120px; }
    .hero h1 { font-size: 54px; }
    .hero-arrow { width: 52px; height: 52px; }
    .hero-arrow.prev { left: 24px; }
    .hero-arrow.next { right: 24px; }

    .intro { padding: 60px 0 46px; }
    /* Side by side now, so a hairline sits between the columns. The column gap
       is dropped to zero and the space comes from the cards' own padding, which
       keeps the divider centred and the columns evenly spaced. */
    .intro-cards {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 0;
        row-gap: 30px;
        padding: 32px 30px 38px;
    }
    .intro-cards .intro-card { padding: 0 26px; border-left: 0; }
    .intro-cards .intro-card:nth-child(odd) { padding-left: 0; }
    .intro-cards .intro-card:nth-child(even) { padding-right: 0; border-left: 1px solid var(--line); }

    .about { padding: 0 0 80px; }
    .about h2 { font-size: 38px; }

    .svc-card { flex-basis: calc((100% - 22px) / 2); }

    /* Arrows straddle the track, centred on the card height */
    .svc-nav { margin: 0; }
    .svc-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 4;
        width: 52px;
        height: 52px;
        box-shadow: var(--shadow-md);
    }
    .svc-arrow[data-svc-prev] { left: -14px; }
    .svc-arrow[data-svc-next] { right: -14px; }
    .gal-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; }
    .cert-card { flex-basis: calc((100% - 44px) / 3); }
    /* arrows straddle the track like the services slider */
    .cert-nav { margin: 0; }
    .cert-arrow { position: absolute; top: 42%; transform: translateY(-50%); z-index: 4; width: 52px; height: 52px; }
    .cert-arrow[data-slider-prev] { left: -67px; }
    .cert-arrow[data-slider-next] { right: -67px; }
    .rev-grid { grid-template-columns: repeat(2, 1fr); }
    .rev-top { grid-template-columns: 1fr auto; }
    .contact-info { grid-template-columns: repeat(3, 1fr); }
    .foot-grid { grid-template-columns: repeat(2, 1fr); }
    .form-grid { grid-template-columns: repeat(2, 1fr); }
    .field.is-full { grid-column: 1 / -1; }
    .detail-grid { grid-template-columns: 1.7fr 1fr; }
}

@media (min-width: 992px) {
    :root { --header-h: 78px; }

    .brand-logo { height: 88px; }
    .header-info { display: flex; }
    .header-cta { display: inline-flex; }
    .nav-toggle { display: none; }

    .main-nav { display: block !important; border-top: 0; }
    /* The bar sits under the header and overlaps the top of the hero —
       a negative bottom margin only, so it never covers the header info. */
    .nav-wrap {
        margin-bottom: -34px;
        position: relative;
        z-index: 60;
    }
    .nav-wrap .container { padding: 0 18px; }
    .nav-inner {
        background: #fff;
        border-bottom: 3px solid var(--cta);
        border-radius: var(--r-sm) var(--r-sm) 0 0;
        box-shadow: var(--shadow-md);
        padding: 0 22px;
    }
    .nav-list { flex-direction: row; padding: 0; gap: 4px; }
    .nav-list > li { position: relative; }
    .nav-list > li > a {
        border-bottom: 0;
        padding: 20px 14px;
        font-size: 15px;
    }
    .nav-list > li > a::after {
        content: "";
        position: absolute;
        left: 14px;
        right: 14px;
        bottom: 12px;
        height: 2px;
        background: var(--primary);
        transform: scaleX(0);
        transition: transform var(--t-fast);
    }
    .nav-list > li > a:hover::after,
    .nav-list > li > a.is-active::after { transform: scaleX(1); }

    .drop {
        display: block;
        position: absolute;
        top: 100%;
        left: 0;
        width: 288px;
        background: #fff;
        border-radius: 0 0 var(--r-md) var(--r-md);
        box-shadow: var(--shadow-lg);
        border-top: 3px solid var(--cta);
        padding: 10px;
        opacity: 0;
        visibility: hidden;
        transform: translateY(12px);
        transition: var(--t-base);
    }
    .has-drop:hover .drop { opacity: 1; visibility: visible; transform: translateY(0); }
    .drop.is-wide { width: 560px; column-count: 2; column-gap: 6px; }
    .drop a { break-inside: avoid; }

    .nav-socials { display: flex; }
    /* the sticky bar covers the top of whatever we jump to */
    section[id] { scroll-margin-top: 84px; }

    .nav-wrap.is-stuck { margin-bottom: 0; background: #fff; }
    .nav-wrap.is-stuck .nav-inner {
        padding: 4px 8px;
        border-bottom-width: 2px;
        box-shadow: none;
    }
    .nav-wrap.is-stuck .nav-brand { display: inline-flex; align-items: center; }
    .nav-wrap.is-stuck .nav-list > li > a { padding-top: 14px; padding-bottom: 14px; }
    .nav-wrap.is-stuck .nav-list > li > a::after { bottom: 8px; }
    .nav-wrap.is-stuck .nav-inner { border-radius: 0; box-shadow: none; }

    .hero-body { padding: 150px 0 150px; }
    .hero h1 { font-size: 62px; }

    .intro { padding: 76px 0 60px; }
    .intro-grid { grid-template-columns: .85fr 1.15fr; gap: 46px; }
    .intro-copy h2 { font-size: 42px; }
    /* the portrait tucks behind the highlight panel so its straight bottom
       edge is never visible */
    .intro-figure img { max-width: 380px; margin-bottom: -46px; }
    .intro-figure::before { width: 400px; height: 400px; }
    .intro-mark { font-size: 190px; bottom: 320px; left: -40px; }
    /* three across — divider before the second and third card */
    .intro-cards { grid-template-columns: repeat(3, 1fr); column-gap: 0; padding: 36px 38px 42px; }
    /* The two-column rules above are :nth-child, so they outrank a plain
       .intro-card selector whatever the order — these have to match that
       specificity to take over at three columns. */
    .intro-cards .intro-card:nth-child(odd),
    .intro-cards .intro-card:nth-child(even) { padding: 0 30px; border-left: 1px solid var(--line); }
    .intro-cards .intro-card:first-child { padding-left: 0; border-left: 0; }
    .intro-cards .intro-card:last-child { padding-right: 0; }

    /* the detail card floats over the map instead of sitting beneath it */
    .map-band iframe { height: 460px; }
    .map-card {
        position: absolute;
        z-index: 2;
        top: 50%;
        /* aligns with the page container, but never runs off a narrow screen */
        right: max(18px, calc((100% - 1240px) / 2 + 18px));
        transform: translateY(-50%);
        margin: 0;
        width: 340px;
        padding: 28px 26px 30px;
    }

    .about { padding: 0 0 100px; min-height: 600px; display: flex; align-items: center; }
    .about h2 { font-size: 44px; }
    /* wide enough to keep the CTA block and the signature on one line */
    .about-copy { max-width: 660px; }
    .about-foot { flex-wrap: nowrap; }
    /* now there is room beside the subject — reveal the photograph on the right */
    .about::before {
        background: linear-gradient(100deg,
            rgba(242, 247, 253, .97) 0%,
            rgba(242, 247, 253, .95) 40%,
            rgba(242, 247, 253, .76) 52%,
            rgba(242, 247, 253, .28) 66%,
            rgba(242, 247, 253, 0) 80%);
    }

    .svc-card { flex-basis: calc((100% - 44px) / 3); }
    .rev-grid { grid-template-columns: repeat(3, 1fr); }
    .faq-grid { grid-template-columns: .82fr 1.18fr; align-items: start; }
    .contact-grid { grid-template-columns: 1.05fr .95fr; gap: 46px; align-items: center; }
    .contact-copy h2 { font-size: 38px; }
    .hours { margin-top: 0; }
    .contact-info { grid-template-columns: repeat(3, 1fr); gap: 22px; }

    /* photo stays the smaller column so the form leads */
    .book-split { grid-template-columns: .8fr 1.2fr; gap: 50px; }
    .book-photo img { aspect-ratio: 3 / 4; }
    .book-inner { margin: 0; width: 100%; max-width: none; }
    .book-panel h2 { font-size: 36px; }

    .foot-grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; }

    .fab-whatsapp { bottom: 24px; }
    .to-top { bottom: 88px; }
    .mobile-bar { display: none; }
    .foot-bottom { padding-bottom: 18px; }

    .page-hero { padding: 84px 0; }
    .page-hero h1 { font-size: 42px; }
}

@media (min-width: 1200px) {
    .sec-head h2 { font-size: 42px; }
    .hero h1 { font-size: 76px; }
    .contact-info { grid-template-columns: repeat(3, 1fr); }
}