/* ============================================
   Chandra Clinic — Static Clone Styles
   ============================================ */

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

:root {
    --pink:        #f5a5ad;   /* primary pink bar / button */
    --pink-dark:   #ee8c95;
    --pink-soft:   #fce2e4;
    --pink-text:   #f29ba3;   /* used on service titles, stats */
    --grey-bg:     #f0f3f6;   /* stats + footer + appointment bg */
    --grey-line:   #d8dde2;
    --text:        #4a4a4a;
    --text-light:  #7a7a7a;
    --dark:        #1f1f1f;
    --dark-blue:   #2a3a5b;   /* button text on "Click Here" */
    --white:       #ffffff;
}

body {
    font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: var(--text);
    line-height: 1.7;
    font-size: 15px;
    background: #fff;
    -webkit-font-smoothing: antialiased;
    /* Prevent the full-bleed .page-section (which uses 100vw + negative
       margin to escape parent .container width) from causing horizontal
       scrollbars on the page. */
    overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a   { text-decoration: none; color: inherit; }
ul  { list-style: none; }

h1, h2, h3, h4 {
    font-family: 'Playfair Display', Georgia, serif;
    color: var(--dark);
    font-weight: 700;
    line-height: 1.2;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ============ Buttons ============ */
.btn {
    display: inline-block;
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.4px;
    transition: all 0.25s ease;
    cursor: pointer;
    border: 2px solid transparent;
    text-align: center;
    line-height: 1.3;
}
.btn-pink    { background: var(--pink); color: #fff; border-color: var(--pink); }
.btn-pink:hover { background: var(--pink-dark); border-color: var(--pink-dark); }
.btn-white   { background: #fff; color: var(--dark); }
.btn-white:hover { background: var(--dark); color: #fff; }
.btn-outline {
    background: transparent;
    color: var(--dark-blue);
    border: 2px solid var(--dark-blue);
    padding: 10px 24px;
}
.btn-outline:hover { background: var(--dark-blue); color: #fff; }

/* ============ Top Row (logo + contact) ============ */
.top-row {
    background: #fff;
    padding: 22px 0;
    border-bottom: 1px solid #f1f1f1;
}
.top-row-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
}
.logo img { height: 70px; width: auto; }

.top-info-blocks {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
}
.top-info {
    display: flex;
    gap: 14px;
    align-items: center;
}
.top-icon {
    width: 42px;
    height: 42px;
    background: var(--pink-soft);
    color: var(--pink-dark);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.top-label {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    color: var(--dark);
    font-size: 16px;
    line-height: 1.2;
    margin-bottom: 3px;
}
.top-value {
    color: var(--text-light);
    font-size: 13px;
    line-height: 1.45;
}

/* ============ Pink Nav Bar ============ */
.main-nav {
    background: var(--pink);
    /* Vertical padding moved onto the <a> so the entire bar-height of each
       item is a hover target (not just the text glyphs). */
}
.main-nav ul {
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-wrap: nowrap;
}
.main-nav li {
    display: flex;
    align-items: stretch;
}
.main-nav a {
    color: #fff;
    font-weight: 700;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    transition: opacity 0.2s;
    white-space: nowrap;
    display: flex;
    align-items: center;
    padding: 14px 9px;
}
.main-nav a:hover { opacity: 0.8; }
.main-nav .caret { font-size: 9px; margin-left: 4px; transition: transform 0.2s; }
.main-nav li.has-submenu { position: relative; }
.main-nav li.has-submenu > a { padding-right: 9px; }

/* Mobile-drawer-only elements (close button + FOLLOW US social row +
   the prepended parent-link inside each dropdown) are injected by JS
   into the nav <ul>. On DESKTOP they would render inline / inside the
   dropdown panel — hide them. They're re-enabled by the mobile media
   query block below. The !important is needed because the mobile rules
   use !important too; without it, the mobile rules would leak through
   to desktop. */
.nav-close,
.nav-social,
.nav-backdrop,
.main-nav .submenu li.submenu-parent-link { display: none !important; }

/* Submenu — CLICK-TO-OPEN model (no hover).
   The previous hover-based design had unsolvable cursor-gap issues
   (cursor leaves the <li>:hover bounds in the gap between nav text and
   dropdown and the submenu closes). Replaced with click-toggle managed
   entirely by JS (assets/js/main.js — setupDropdowns). Opens on click,
   closes on second click, click outside, or Escape. Works identically
   on desktop AND mobile (no separate mobile dropdown logic needed).
   The .is-open class is added/removed by JS. */
.main-nav .submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    background: #fff;
    box-shadow: 0 12px 28px rgba(0,0,0,0.18);
    border-top: 3px solid var(--pink);
    border-radius: 0 0 6px 6px;
    min-width: 230px;
    padding: 10px 0;
    margin-top: 0;
    z-index: 200;
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.main-nav li.has-submenu.is-open .submenu {
    display: block;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
/* Caret rotates when dropdown is open — visual feedback */
.main-nav li.has-submenu > a .caret {
    display: inline-block;
    margin-left: 4px;
    font-size: 9px;
    transition: transform 0.2s ease;
}
.main-nav li.has-submenu.is-open > a .caret { transform: rotate(180deg); }
.main-nav .submenu li {
    display: block;
    margin: 0;
}
.main-nav .submenu a {
    display: block;
    padding: 9px 22px;
    color: var(--text);
    font-size: 13px;
    text-transform: none;
    letter-spacing: 0.3px;
    font-weight: 500;
    white-space: nowrap;
    border-left: 3px solid transparent;
    transition: all 0.15s;
}
.main-nav .submenu a:hover {
    background: var(--pink-soft);
    color: var(--pink-dark);
    border-left-color: var(--pink);
}

/* Multi-column submenu when long (Cosmetic / Skin) */
.main-nav .submenu.cols-2,
.main-nav .submenu:has(li:nth-child(11)) {
    columns: 2;
    column-gap: 0;
    min-width: 440px;
}

/* Hamburger button (hidden on desktop) */
.nav-toggle {
    display: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    width: 38px;
    height: 38px;
    padding: 0;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    align-items: center;
}
.nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: #fff;
    transition: all 0.25s;
}
.nav-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-active span:nth-child(2) { opacity: 0; }
.nav-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============ Hero ============ */
.hero {
    background: url('../images/hero-bg.jpg') center/cover no-repeat,
                #4a5a6a;
    min-height: 540px;
    position: relative;
    display: flex;
    align-items: center;
}
.hero-overlay {
    width: 100%;
    background: linear-gradient(rgba(20,30,40,0.3), rgba(20,30,40,0.4));
    padding: 110px 0;
}
.hero-content {
    text-align: center;
    color: #fff;
}
.hero-content h1 {
    color: #fff;
    font-size: 62px;
    font-weight: 700;
    margin-bottom: 14px;
    letter-spacing: 0.5px;
}
.hero-sub {
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 32px;
}

/* ============ Inner Page Banner ============ */
.page-banner {
    /* Mirrors the live site: image + gradient layered on the same element
       (NOT image on a separate ::after) so the pink fades smoothly into the
       photo with no visible division.
       - top layer: pink-to-transparent gradient (220deg = pink at bottom-left,
         transparent at top-right)
       - bottom layer: the decorative banner image positioned at center-top
         (matches the live `background-position: center top` rule)
       Where the gradient is transparent, the photo shows through — no seam. */
    /* EXACT replica of the live Divi `et_pb_fullwidth_header_0` rules
       (verified via DOM inspection of chandraclinic.co):
         - outer image layer: Beard-Reconstruction-1.png at `center top / cover`
           (image is a 1000x275 PNG with the man on the right and white space
            on the left — `cover` upscales to 1905x524 so only the top 410px
            crops in)
         - gradient overlay: linear-gradient(220deg, transparent 33%, #f78da7 100%)
           covers the entire section, pink at bottom-left fading to transparent
           at top-right, which masks the image's white left half with pink and
           reveals the figure on the right with no visible seam.
       Banner height locked to 410px so the H1 has room to wrap to 4 lines
       (matching the live site exactly). */
    background:
        linear-gradient(220deg, rgba(0,0,0,0) 33%, #f78da7 100%),
        url('../images/services/banner-person.png') center top / cover no-repeat,
        #ffffff;
    min-height: 410px;
    display: flex;
    align-items: center;
    color: #fff;
    text-align: left;
    overflow: hidden;
    position: relative;
}
@media (max-width: 768px) {
    .page-banner::after { display: none; }
}
.page-banner .container { max-width: 1180px; }
.page-banner h1 {
    /* EXACT replica of the live `et_pb_fullwidth_header_0 h1`:
       Playfair Display 70px / line-height 70px / white / max-width 37%
       (Divi's `content_max_width: 41%` of a 1080px column ≈ 432px).
       Wraps to 4 short lines on the left so the headline sits beside
       the figure on the right at full size. */
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    color: #fff;
    font-size: 70px;
    line-height: 70px;
    margin: 0 0 14px;
    max-width: 37%;
    text-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
@media (max-width: 1100px) {
    .page-banner h1 { max-width: 50%; font-size: 56px; line-height: 1.05; }
}
@media (max-width: 960px) {
    .page-banner h1 { max-width: 65%; font-size: 42px; line-height: 1.1; }
}
@media (max-width: 600px) {
    .page-banner h1 { max-width: 100%; }
}
.page-banner .crumbs {
    color: #fff;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    opacity: 0.85;
}
.page-banner .crumbs a { color: #fff; opacity: 0.95; }
@media (max-width: 960px) {
    .page-banner { min-height: 320px; }
    .page-banner h1 { font-size: 42px; }
}
@media (max-width: 600px) {
    /* On phones the figure would crowd the headline at this width — hide
       the image layer and just show the pink gradient field. */
    .page-banner {
        min-height: 200px;
        text-align: center;
        background:
            linear-gradient(220deg, rgba(255,255,255,0.15) 0%, #f78da7 100%),
            #f78da7;
    }
    .page-banner h1 { font-size: 30px; max-width: none; }
    .page-banner .crumbs { font-size: 11px; letter-spacing: 1px; }
}
.page-banner .crumbs a { color: var(--pink-soft); }
.page-banner .crumbs a:hover { color: #fff; }

/* ============ Doctor Profile Block (about-doctors page) ============ */
.doctor-profile {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 50px;
    align-items: start;
    padding: 70px 0;
    border-bottom: 1px solid #eee;
}
.doctor-profile:last-child { border-bottom: none; }
.doctor-profile.reverse { grid-template-columns: 1fr 380px; }
.doctor-profile.reverse .doctor-photo { order: 2; }
.doctor-photo {
    background: var(--pink-soft);
    border-radius: 6px;
    padding: 22px;
}
.doctor-photo img { border-radius: 4px; width: 100%; }
.doctor-info h2 {
    font-size: 34px;
    color: var(--pink-text);
    margin-bottom: 6px;
}
.doctor-info .role {
    color: var(--dark);
    font-weight: 700;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}
.doctor-info .role em { color: var(--text-light); font-weight: 400; text-transform: none; letter-spacing: 0; }
.doctor-info p { color: var(--text); margin-bottom: 14px; }
.doctor-info h3 {
    font-size: 20px;
    margin: 22px 0 12px;
    color: var(--dark);
}
.cred-list li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 10px;
    color: var(--text);
    font-size: 14.5px;
    line-height: 1.55;
}
.cred-list li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    top: 0;
    width: 18px;
    height: 18px;
    background: var(--pink);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
}

/* ============ Blog Post (single article) ============ */
.post-hero {
    width: 100%;
    aspect-ratio: 16 / 7;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 30px;
}
.post-meta-strip {
    color: var(--text-light);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 14px;
}
.post-meta-strip .tag { color: var(--pink-dark); font-weight: 700; }
.post-meta-strip .dot { margin: 0 8px; }
.treatment-main h1.post-title {
    font-size: 38px;
    line-height: 1.2;
    color: var(--dark);
    margin-bottom: 18px;
}
.treatment-main .post-lead {
    font-size: 17px;
    color: var(--dark);
    line-height: 1.65;
    margin-bottom: 24px;
}
.post-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 40px 0 10px;
    padding-top: 24px;
    border-top: 1px solid #eee;
}
.post-nav a {
    background: var(--grey-bg);
    padding: 16px 20px;
    border-radius: 6px;
    display: block;
    transition: background 0.2s;
}
.post-nav a:hover { background: var(--pink-soft); }
.post-nav small {
    display: block;
    color: var(--text-light);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}
.post-nav strong { color: var(--dark); font-weight: 700; font-size: 14px; }
.post-nav .next { text-align: right; }

/* Full-width article variant (no sidebar) — for service detail pages */
.treatment-main.treatment-fullwidth {
    max-width: 920px;
    margin: 0 auto;
    padding: 30px 0 70px;
}

/* ============ Sectioned treatment pages ============
   When the article is processed by wrapSections() (assets/js/main.js),
   each H2 + its following content gets wrapped in <section.page-section>
   with alternating background. Mirrors the live Divi page structure:
   intro (white) → why? (beige) → what? (white) → how? (beige) → … */
.treatment-main--sectioned {
    /* The article itself no longer constrains width — each section does
       its own full-bleed background, with inner content centered. */
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    /* Pre-section featured image (if any) sat directly inside the article
       before wrapping, so it ends up inside the intro section. */
}
.page-section {
    /* Full-bleed escape from the parent .container's max-width — pulls the
       background to the viewport edges while keeping inner content centered
       inside .page-section-inner at the same 920px column. */
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    background: #fff;
    padding: 50px 20px;
}
.page-section-alt {
    /* Warm beige stripe matching the live site (rgb 224,217,215). */
    background: #e0d9d7;
}
.page-section-inner {
    max-width: 920px;
    margin: 0 auto;
}
/* The "Still have questions?" / FAQs tail stays white for clean handoff
   to the pink CTA strip from footer.php. */
.page-section-tail { background: #fff; padding: 40px 20px 50px; }
.page-section-intro { padding: 36px 20px 40px; }
/* Featured image inside the intro section — keep it centered at sane size,
   matches the live's smaller intro thumbnail. */
.page-section-intro img.post-featured {
    max-width: 460px;
    margin: 0 auto 18px;
    display: block;
}
/* H2 inside a section should not get extra top margin — section padding
   already handles spacing. */
.page-section h2 { margin-top: 0; margin-bottom: 18px; }
@media (max-width: 600px) {
    .page-section { padding: 22px 16px; }
    .page-section-intro img.post-featured { max-width: 100%; }
    /* These need the .treatment-main prefix to OUT-specify the broader
       .treatment-main h2 { margin: 20px 0 12px !important } rule defined
       further down the file. Without it, both rules tie at (0,1,1) and
       the later one in source order wins, ignoring the !important. */
    .treatment-main .page-section h2 {
        margin-top: 0 !important;
        margin-bottom: 12px !important;
        padding-top: 0 !important;
    }
    .treatment-main .page-section h3 {
        margin-top: 14px !important;
        margin-bottom: 6px !important;
    }
    .treatment-main .page-section p {
        margin: 0 0 12px !important;
    }
    .treatment-main .page-section ul,
    .treatment-main .page-section ol {
        margin: 0 0 12px !important;
        padding-left: 22px !important;
    }
    .treatment-main .page-section p:last-child,
    .treatment-main .page-section ul:last-child,
    .treatment-main .page-section ol:last-child {
        margin-bottom: 0 !important;
    }
    /* Tighten p spacing inside lists */
    .treatment-main .page-section li { margin-bottom: 4px !important; }
    .treatment-main .page-section li p { margin: 0 !important; }
}

/* FAQ accordion */
.faq-list { margin-top: 18px; }
.faq-list details {
    border: 1px solid #eee;
    border-radius: 6px;
    margin-bottom: 12px;
    background: #fff;
    overflow: hidden;
}
.faq-list details[open] { box-shadow: 0 4px 14px rgba(0,0,0,0.04); }
.faq-list summary {
    cursor: pointer;
    padding: 16px 22px;
    font-weight: 700;
    color: var(--dark);
    list-style: none;
    position: relative;
    padding-right: 48px;
    font-size: 15px;
    line-height: 1.45;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
    content: '+';
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    font-weight: 400;
    color: var(--pink-dark);
    transition: transform 0.2s;
}
.faq-list details[open] summary::after { content: '–'; }
.faq-list details > p,
.faq-list details > div { padding: 0 22px 18px; color: var(--text); line-height: 1.65; }

.post-featured {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 28px;
    display: block;
}
.post-signoff {
    margin-top: 36px;
    padding: 20px 22px;
    border-left: 4px solid var(--pink);
    background: var(--pink-soft);
    border-radius: 4px;
    font-size: 14.5px;
    line-height: 1.7;
}
.post-signoff strong { color: var(--dark); }

/* ============ Treatment Hub (category landing pages) ============ */
/* Two-column intro block on each service hub page:
   image (with the red badge already baked in) on the left, body text + service table on the right.
   Matches the live design captured in the user-supplied screenshots. */
.hub-intro {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 50px;
    align-items: start;
    padding: 50px 0 30px;
    max-width: 1080px;
    margin: 0 auto;
}
.hub-intro .hub-img { width: 100%; display: block; border-radius: 4px; }
.hub-intro .hub-text > *:first-child { margin-top: 0; }
.hub-intro .hub-text p { color: var(--text); font-size: 15.5px; line-height: 1.7; margin-bottom: 16px; }
.hub-intro .hub-text strong { color: var(--dark); }
@media (max-width: 768px) {
    .hub-intro { grid-template-columns: 1fr; gap: 30px; padding: 30px 0 20px; }
    .hub-intro .hub-img { max-width: 420px; margin: 0 auto; }
}

.hub-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    padding: 30px 0 80px;
}
.hub-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.25s, box-shadow 0.25s;
}
.hub-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 28px rgba(0,0,0,0.07);
}
.hub-card .thumb {
    aspect-ratio: 16/10;
    background: var(--pink-soft);
    overflow: hidden;
}
.hub-card .thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.4s;
}
.hub-card:hover .thumb img { transform: scale(1.05); }
.hub-card .body { padding: 22px 22px 26px; flex: 1; display: flex; flex-direction: column; }
.hub-card h3 {
    font-size: 20px;
    color: var(--pink-text);
    margin-bottom: 10px;
}
.hub-card p {
    color: var(--text);
    font-size: 14.5px;
    flex: 1;
    margin-bottom: 16px;
    line-height: 1.6;
}
.hub-card .btn { align-self: flex-start; }

/* ============ Treatment Detail ============ */
.treatment-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 50px;
    padding: 70px 0;
}
/* H2/H3/body sizing locked to the LIVE site's computed styles
   (verified via DOM inspection on chandraclinic.co/unshaven-fue-hair-transplant):
     - h2: Playfair Display 40px / line-height 60px / black / centered
     - h3: Lato 22px / line-height 22px / weight 500 / black (NOT Playfair)
     - p/li: Lato 16px / line-height 27.2px / weight 500 / black */
.treatment-main h2 {
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 60px;
    color: #000;
    text-align: center;
    margin: 30px 0 14px;
}
.treatment-main h3 {
    font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 500;
    font-size: 22px;
    line-height: 22px;
    color: #000;
    margin: 24px 0 10px;
}
.treatment-main p, .treatment-main li {
    font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #000;
    line-height: 1.7;
}
.treatment-main ul:not(.cred-list) {
    list-style: disc;
    padding-left: 22px;
    margin-bottom: 18px;
}
.treatment-main ul:not(.cred-list) li { margin-bottom: 8px; }
.treatment-hero {
    width: 100%;
    aspect-ratio: 16/8;
    border-radius: 8px;
    object-fit: cover;
    margin-bottom: 24px;
}
.faq-item {
    border-bottom: 1px solid #eee;
    padding: 18px 0;
}
.faq-item h4 {
    font-size: 17px;
    color: var(--dark);
    cursor: pointer;
    position: relative;
    padding-right: 30px;
}
.faq-item h4::after {
    content: '+';
    position: absolute;
    right: 0;
    top: 0;
    color: var(--pink-dark);
    font-weight: 700;
    font-size: 22px;
}
.faq-item p { margin-top: 10px; font-size: 14.5px; color: var(--text-light); }

.treatment-sidebar {
    position: sticky;
    top: 100px;
    align-self: start;
}
.sidebar-card {
    background: var(--grey-bg);
    border-radius: 8px;
    padding: 26px;
    margin-bottom: 22px;
}
.sidebar-card h4 {
    font-size: 18px;
    margin-bottom: 14px;
    color: var(--dark);
}
.sidebar-card ul li {
    padding: 8px 0;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    font-size: 14px;
}
.sidebar-card ul li:last-child { border-bottom: none; }
.sidebar-card ul li a { color: var(--text); display: block; }
.sidebar-card ul li a:hover { color: var(--pink-dark); padding-left: 4px; }
.sidebar-cta {
    background: var(--pink);
    color: #fff;
    padding: 28px;
    border-radius: 8px;
    text-align: center;
}
.sidebar-cta h4 { color: #fff; font-size: 22px; margin-bottom: 8px; }
.sidebar-cta p { color: #fff; opacity: 0.95; margin-bottom: 16px; font-size: 14px; }
.sidebar-cta .btn-white { background: #fff; color: var(--pink-dark); }
.sidebar-cta .btn-white:hover { background: var(--dark); color: #fff; }

/* ============ Videos Page ============ */
.video-list {
    display: flex;
    flex-direction: column;
    gap: 50px;
    padding: 50px 0 70px;
    max-width: 920px;
    margin: 0 auto;
}
.video-card { display: block; }
.video-card .video-embed {
    width: 100%;
    background: #000;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}
.video-card .video-embed.ratio-16x9 { aspect-ratio: 16 / 9; }
.video-card .video-embed.ratio-4x3  { aspect-ratio: 4 / 3; }
.video-card .video-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.video-caption {
    margin-top: 14px;
    font-size: 16px;
    color: var(--dark);
    line-height: 1.4;
    font-weight: 600;
    text-align: center;
}

/* ============ Media & Magazine Page ============ */
.media-grid {
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding: 50px 0 70px;
    max-width: 920px;
    margin: 0 auto;
}
.media-tile {
    display: block;
    overflow: hidden;
    border-radius: 6px;
    background: #f3f3f3;
}
.media-tile img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.4s ease;
}
.media-tile:hover img { transform: scale(1.02); }

/* ============ Awards Page ============ */
.awards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 50px 0 70px;
}
.award-tile {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    aspect-ratio: 400 / 516;
    background: #eee;
    display: block;
}
.award-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.award-tile:hover img { transform: scale(1.05); }
.award-tile .caption {
    position: absolute;
    inset: 0;
    background: linear-gradient(transparent 55%, rgba(0,0,0,0.78) 100%);
    color: #fff;
    display: flex;
    align-items: flex-end;
    padding: 14px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    opacity: 0;
    transition: opacity 0.25s;
}
.award-tile:hover .caption { opacity: 1; }

/* ============ Contact Page ============ */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    padding: 80px 0;
    align-items: start;
}
.contact-info h2 { font-size: 34px; margin-bottom: 14px; }
.contact-info .lead { color: var(--text); margin-bottom: 26px; font-size: 15px; }
.contact-cards { display: grid; gap: 20px; }
.contact-card {
    display: flex;
    gap: 16px;
    padding: 18px 20px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    align-items: flex-start;
    transition: box-shadow 0.2s;
}
.contact-card:hover { box-shadow: 0 8px 20px rgba(0,0,0,0.05); }
.contact-card .ci {
    width: 44px; height: 44px;
    background: var(--pink-soft);
    color: var(--pink-dark);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; flex-shrink: 0;
}
.contact-card h4 {
    font-size: 16px;
    margin-bottom: 4px;
    color: var(--dark);
}
.contact-card p { color: var(--text-light); font-size: 14px; margin: 0; line-height: 1.5; }
.contact-card a { color: var(--text-light); }
.contact-card a:hover { color: var(--pink-dark); }

.contact-form-wrap {
    background: var(--grey-bg);
    padding: 36px;
    border-radius: 8px;
}
.contact-form-wrap h2 { font-size: 30px; margin-bottom: 10px; }
.contact-form-wrap .form-tag { margin-bottom: 22px; }

.contact-map {
    width: 100%;
    height: 360px;
    border: 0;
    border-radius: 8px;
    margin-top: 40px;
}

/* ============ Blog Page ============ */
.blog-list {
    padding: 80px 0;
    max-width: 900px;
    margin: 0 auto;
}
.blog-card {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 32px;
    margin-bottom: 36px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 0.25s;
}
.blog-card:hover { box-shadow: 0 14px 30px rgba(0,0,0,0.07); }
.blog-thumb {
    background: #eee;
    overflow: hidden;
}
.blog-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s;
}
.blog-card:hover .blog-thumb img { transform: scale(1.05); }
.blog-body {
    padding: 24px 28px 28px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.blog-meta {
    font-size: 12px;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}
.blog-meta .tag {
    color: var(--pink-dark);
    font-weight: 700;
}
.blog-meta .dot { margin: 0 8px; }
.blog-card h3 {
    font-size: 22px;
    margin-bottom: 10px;
    color: var(--dark);
    line-height: 1.3;
}
.blog-card h3 a:hover { color: var(--pink-dark); }
.blog-card p {
    color: var(--text);
    font-size: 14.5px;
    margin-bottom: 14px;
    line-height: 1.6;
}
.read-more {
    color: var(--pink-dark);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.read-more:hover { color: var(--dark); }

.pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 30px;
}
.pagination a, .pagination span {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    color: var(--text);
    border: 1px solid #e2e2e2;
    font-size: 13px;
    font-weight: 700;
}
.pagination .current { background: var(--pink); color: #fff; border-color: var(--pink); }
.pagination a:hover { background: var(--pink-soft); border-color: var(--pink); }

/* ============ Gallery Page ============ */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 70px 0;
}
.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    aspect-ratio: 4 / 3;
    background: #eee;
    cursor: pointer;
}
.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.gallery-item:hover img { transform: scale(1.08); }
.gallery-item .caption {
    position: absolute;
    inset: 0;
    background: linear-gradient(transparent 50%, rgba(0,0,0,0.7) 100%);
    color: #fff;
    display: flex;
    align-items: flex-end;
    padding: 14px;
    font-size: 13px;
    font-weight: 600;
    opacity: 0;
    transition: opacity 0.25s;
}
.gallery-item:hover .caption { opacity: 1; }
.gallery-filters {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 30px;
}
.gallery-filter {
    padding: 8px 18px;
    border-radius: 30px;
    background: #fff;
    border: 1px solid #e2e2e2;
    color: var(--text);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.2s;
}
.gallery-filter:hover { border-color: var(--pink); color: var(--pink-dark); }
.gallery-filter.active { background: var(--pink); border-color: var(--pink); color: #fff; }

/* About page content block */
.about-block {
    padding: 80px 0;
}
.about-block h2 { font-size: 36px; margin-bottom: 20px; }
.about-block p { font-size: 15.5px; margin-bottom: 18px; color: var(--text); }
.about-block .lead {
    font-size: 18px;
    color: var(--dark);
    line-height: 1.55;
    margin-bottom: 24px;
}

/* ============ Sections ============ */
.section { padding: 90px 0; }
.section-head { text-align: center; margin-bottom: 60px; }
.section-head h2 { font-size: 42px; }

.two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}
.col-text h2 { font-size: 38px; margin-bottom: 22px; }
.col-text p {
    margin-bottom: 16px;
    color: var(--text);
    font-size: 15px;
}
.col-image img {
    border-radius: 6px;
    box-shadow: 0 12px 35px rgba(0,0,0,0.10);
    width: 100%;
    max-height: 420px;
    object-fit: cover;
}
.col-text .btn { margin-top: 16px; }

/* Who We Are */
.who-we-are { background: #fff; }

/* Doctors */
.our-doctors { background: var(--grey-bg); }
.doctor-item {
    display: flex;
    gap: 16px;
    margin-bottom: 26px;
    align-items: flex-start;
}
.doctor-icon {
    width: 44px;
    height: 44px;
    background: var(--pink-soft);
    color: var(--pink-dark);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}
.doctor-item h4 {
    font-size: 22px;
    color: var(--pink-text);
    margin-bottom: 4px;
}
.doctor-item p { color: var(--text); margin: 0 0 4px; font-size: 14px; }
.doctor-item p.cred {
    color: var(--dark);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.3px;
}
.doctor-item p.cred-sub {
    color: var(--text-light);
    font-size: 13px;
    margin-bottom: 8px;
}

/* ============ Services ============ */
.our-services { background: #fff; }
.services-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 36px;
    row-gap: 60px;
}
.service-card {
    grid-column: span 2;
    text-align: left;
}
.service-card:nth-child(4) { grid-column: 2 / span 2; }
.service-card:nth-child(5) { grid-column: 4 / span 2; }
.service-image {
    width: 100%;
    aspect-ratio: 16 / 11;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 18px;
    background: #eee;
}
.service-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.service-card:hover .service-image img { transform: scale(1.05); }
.service-card h3 {
    font-size: 24px;
    color: var(--pink-text);
    margin-bottom: 6px;
    font-weight: 700;
}
.service-card h3::after {
    content: '';
    display: block;
    width: 30px;
    height: 2px;
    background: var(--pink);
    margin: 8px 0 14px;
}
.service-card p {
    color: var(--text);
    font-size: 14.5px;
    margin-bottom: 18px;
    line-height: 1.6;
}

/* ============ Stats ============ */
.stats-section {
    background: var(--grey-bg);
    padding: 100px 0;
}
.stats-inner {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 50px;
    align-items: center;
}
.stats-label {
    color: var(--dark);
    font-family: 'Playfair Display', serif;
    font-size: 20px;
    margin-bottom: 14px;
}
.stats-title {
    font-size: 44px;
    font-weight: 800;
    color: var(--dark);
    line-height: 1.15;
}
.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 50px 30px;
}
.stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.stat-number {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 76px;
    font-weight: 700;
    color: var(--pink-text);
    line-height: 1;
    margin-bottom: 12px;
}
.stat-text {
    color: var(--dark);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 700;
}

/* ============ Testimonials ============ */
.testimonials-section {
    background: #fff;
    padding: 90px 0;
    border-top: 1px solid #f0f0f0;
}
.testimonials-section .section-head { margin-bottom: 50px; }
.testimonials-section .stats-label {
    font-family: 'Playfair Display', serif;
    text-transform: none;
    font-style: italic;
    letter-spacing: 0;
    font-size: 18px;
    color: var(--dark);
}
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}
.testimonial-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 30px 26px 26px;
    position: relative;
    transition: box-shadow 0.25s, transform 0.25s;
}
.testimonial-card:hover {
    box-shadow: 0 14px 30px rgba(0,0,0,0.08);
    transform: translateY(-3px);
}
.testimonial-card .quote-mark {
    position: absolute;
    top: 18px;
    right: 22px;
    font-family: 'Playfair Display', serif;
    font-size: 70px;
    line-height: 1;
    color: var(--pink-soft);
    font-weight: 700;
}
.testimonial-card .stars {
    color: #f5b300;
    font-size: 14px;
    letter-spacing: 2px;
    margin-bottom: 14px;
}
.testimonial-card p {
    font-size: 14.5px;
    color: var(--text);
    line-height: 1.65;
    margin-bottom: 20px;
    position: relative;
    z-index: 2;
}
.testimonial-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    border-top: 1px solid #f1f1f1;
    padding-top: 16px;
}
.testimonial-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--pink-soft);
    color: var(--pink-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    flex-shrink: 0;
}
.testimonial-name {
    font-weight: 700;
    color: var(--dark);
    font-size: 14px;
    line-height: 1.2;
    margin-bottom: 2px;
}
.testimonial-treatment {
    color: var(--text-light);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

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

/* ============ Appointment ============ */
.appointment-section {
    background: #fff;
    padding: 0;
    border-top: 1px solid #eee;
}
.appointment-section .two-col {
    gap: 60px;
    padding: 0;
    align-items: stretch;
}
.map-col { min-height: 540px; }
.map-col iframe { display: block; height: 100%; min-height: 540px; }
.form-col {
    padding: 70px 24px 70px 0;
}
.form-head { text-align: center; margin-bottom: 30px; }
.form-head h2 { font-size: 38px; margin-bottom: 6px; }
.form-tag {
    color: var(--text-light);
    font-size: 13px;
}
.appointment-form input,
.appointment-form textarea,
.appointment-form select {
    width: 100%;
    padding: 14px 18px;
    border: 1px solid #d8d8d8;
    border-radius: 4px;
    font-family: inherit;
    font-size: 14px;
    background: #fff;
    margin-bottom: 14px;
    color: var(--text);
}
.appointment-form input:focus,
.appointment-form textarea:focus,
.appointment-form select:focus {
    outline: none;
    border-color: var(--pink);
}
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.form-row input { margin-bottom: 14px; }
.appointment-form textarea { resize: vertical; }
.form-bottom {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
}
.captcha {
    font-weight: 700;
    color: var(--dark);
    font-size: 15px;
}
.captcha-input {
    width: 90px !important;
    margin-bottom: 0 !important;
}
.form-bottom .btn { margin-left: auto; padding: 12px 38px; }

/* Big custom hero banner (used on hair-transplant-surgeon page) */
.big-hero {
    position: relative;
    min-height: 460px;
    background: linear-gradient(220deg, rgba(0,0,0,0) 33%, var(--pink) 100%),
                url('../images/hair-transplant.jpg') center/cover no-repeat;
    color: #fff;
    display: flex;
    align-items: center;
}
.big-hero::after {
    content: '';
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.18);
    z-index: 1;
}
.big-hero .container { position: relative; z-index: 2; max-width: 1200px; }
.big-hero h1 {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    font-size: 60px;
    color: #fff;
    max-width: 540px;
    line-height: 1.15;
}
@media (max-width: 960px) { .big-hero h1 { font-size: 40px; } }

/* Generic grid utilities used by hair-transplant-surgeon */
.grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 26px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
@media (max-width: 960px) {
    .grid-5, .grid-4, .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .grid-5, .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
}
.grid-cell h3 { color: var(--dark); font-size: 18px; margin-bottom: 8px; }
.grid-cell p { color: var(--text); font-size: 14.5px; line-height: 1.65; }
.grid-cell ul { padding-left: 18px; }
.grid-cell ul li { font-size: 14px; color: var(--text); margin-bottom: 6px; line-height: 1.55; }

/* YouTube embed wrapper - 16:9 responsive */
.video-embed {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 8px;
    background: #000;
}
.video-embed iframe {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    border: 0;
}

/* Before/After image grid */
.results-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
    margin-bottom: 60px;
}
.results-grid img {
    width: 100%;
    border-radius: 6px;
    box-shadow: 0 8px 22px rgba(0,0,0,0.08);
}
@media (max-width: 600px) { .results-grid { grid-template-columns: 1fr; } }

/* Soft background section variant */
.soft-section { background: var(--grey-bg); padding: 60px 0; }
.soft-section + .soft-section { padding-top: 0; }

/* Placeholder block - marks where real copy needs to be pasted in */
.placeholder-note {
    background: var(--pink-soft);
    border: 1px dashed var(--pink-dark);
    color: var(--accent-dark);
    padding: 14px 20px;
    border-radius: 6px;
    font-style: italic;
    font-size: 14px;
    margin: 14px 0;
    line-height: 1.5;
}
.placeholder-note strong { font-style: normal; color: var(--dark); }
.empty-state {
    text-align: center;
    padding: 80px 24px;
    color: var(--text-light);
    max-width: 560px;
    margin: 0 auto;
}
.empty-state h3 {
    color: var(--dark);
    font-size: 22px;
    margin-bottom: 12px;
}
.empty-state p { font-size: 15px; line-height: 1.6; margin-bottom: 18px; }

/* Form status alert (success / error) */
.form-alert {
    padding: 14px 18px;
    border-radius: 6px;
    font-size: 14px;
    margin-bottom: 16px;
    line-height: 1.5;
    border: 1px solid transparent;
}
.form-alert.success {
    background: #e8f6ec;
    color: #1f6b3a;
    border-color: #cce8d4;
}
.form-alert.error {
    background: #fdecea;
    color: #b71c1c;
    border-color: #f7c8c4;
}

/* ============ CTA ============ */
.cta-section {
    /* Pink full-width strip above the footer, mirrors the live site. */
    background: var(--pink);
    padding: 55px 0;
}
.cta-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}
.cta-inner h2 {
    /* Playfair Display italic white — matches "Still have any Questions?" in the live screenshots */
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-size: 42px;
    line-height: 1.15;
    color: #fff;
    margin: 0;
    font-weight: 600;
}
.cta-section .btn-white {
    background: #fff;
    color: #000;
    border-radius: 100px;
    padding: 14px 56px;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.2px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    transition: transform 0.15s, background 0.2s;
}
.cta-section .btn-white:hover {
    background: rgba(255,255,255,0.85);
    color: #000;
    transform: translateY(-1px);
}

/* ============ Footer ============ */
.site-footer {
    background: var(--grey-bg);
    padding: 60px 0 0;
    color: var(--text);
    font-size: 14px;
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr 1.4fr;
    gap: 36px;
    padding-bottom: 40px;
}
.footer-logo {
    height: 70px;
    width: auto;
    margin-bottom: 18px;
}
.footer-col h4 {
    /* Mirrors the live site's "Our Services" / "Useful Links" headings:
       Playfair Display 600, pure black, ~22px. */
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 22px;
    margin-bottom: 16px;
    color: #000000;
    font-weight: 600;
}
.footer-col h4.mt { margin-top: 26px; }
.footer-col ul {
    list-style: disc;
    padding-left: 22px;
    margin: 0;
}
.footer-col ul li {
    margin-bottom: 8px;
    font-size: 15px;
    line-height: 1.65;
    color: #000000;
}
.footer-col ul li::marker { color: #000000; }
.footer-col ul li a {
    /* Live links use the brand navy #3550a0 */
    color: #3550a0;
    transition: color 0.2s;
}
.footer-col ul li a:hover { color: var(--pink-dark); }
.contact-list li {
    color: var(--text-light);
    margin-bottom: 12px;
    line-height: 1.55;
    font-size: 13.5px;
}
.contact-list li strong { color: var(--dark); font-weight: 700; }

.footer-disclaimer {
    padding: 24px 24px;
    font-size: 12px;
    color: var(--text-light);
    border-top: 1px solid var(--grey-line);
    line-height: 1.7;
}
.footer-disclaimer strong { color: var(--dark); }

.footer-bottom {
    background: var(--grey-bg);
    padding: 14px 0 20px;
    font-size: 12.5px;
    color: var(--text-light);
    border-top: 1px solid var(--grey-line);
}
.footer-bottom-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}
.footer-legal { display: flex; gap: 22px; }
.footer-legal a { color: var(--text-light); }
.footer-legal a:hover { color: var(--pink-dark); }
.footer-social { display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; }
.footer-social li { list-style: none; }
.footer-social a {
    width: 36px;
    height: 36px;
    background: var(--pink);
    color: #fff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.15s;
}
.footer-social a:hover { background: var(--pink-dark); transform: translateY(-1px); }
.footer-social a svg {
    width: 18px;
    height: 18px;
    fill: #fff;
    display: block;
}

/* ============ Floating Side Buttons ============
   Matches the live site's "Sticky Buttons" widget: a vertical pair of
   pink circles pinned to the right-center of the viewport, with white
   FontAwesome-style icons. We use inline SVGs (not the unicode ☎/✉
   glyphs, which render inconsistently across fonts — the user reported
   they looked like a camera/envelope instead of phone/whatsapp). */
.floating-actions {
    position: fixed;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 80;
}
.float-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--pink);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.18);
    transition: background 0.15s ease, transform 0.15s ease;
}
.float-btn svg {
    width: 20px;
    height: 20px;
    fill: #fff;
    display: block;
}
.float-btn:hover {
    background: var(--pink-dark);
    transform: scale(1.06);
}

/* ============ Responsive ============ */
@media (max-width: 1100px) {
    .main-nav ul { gap: 8px; }
    .main-nav a { font-size: 10.5px; letter-spacing: 0.2px; }
    .main-nav .caret { font-size: 8px; }
    .top-info-blocks { gap: 24px; }
}

@media (max-width: 960px) {
    /* Mobile header — slim row with just the logo + hamburger.
       The info blocks (Timing / Contact Us / Our Location) take ~280px of
       vertical space on phones, pushing the actual content way down. Hide
       them on mobile — the same info is already in the footer + the
       floating phone/WhatsApp sticky icons + the contact page. */
    .top-row { padding: 12px 0; }
    .top-row-inner {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .top-info-blocks { display: none; }
    .logo img { max-height: 56px; }
    /* Make the hamburger live IN the top row (not in the pink nav strip
       below) so the whole header is one compact bar. */
    .top-row-inner .nav-toggle-host { display: flex; }
    .hero-content h1 { font-size: 42px; }
    .two-col, .stats-inner, .appointment-section .two-col {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .form-col { padding: 50px 24px; }
    .services-grid { grid-template-columns: repeat(2, 1fr); }
    .service-card,
    .service-card:nth-child(4),
    .service-card:nth-child(5) { grid-column: auto; }
    .stats-grid { gap: 30px 20px; }
    .stat-number { font-size: 56px; }
    .footer-grid { grid-template-columns: repeat(2, 1fr); }
    .col-image img, .hero-image img { max-height: 320px; }
}

@media (max-width: 960px) {
    .contact-grid { grid-template-columns: 1fr; }
    .blog-card { grid-template-columns: 1fr; }
    .blog-thumb { height: 220px; }
    .blog-body { padding: 24px; }
    .gallery-grid { grid-template-columns: repeat(3, 1fr); }
    .hub-grid, .awards-grid { grid-template-columns: repeat(2, 1fr); }
    .treatment-layout { grid-template-columns: 1fr; }
    .treatment-sidebar { position: static; }
}

/* Hamburger mode: 960px and down — RIGHT-SIDE SLIDE-IN DRAWER */
@media (max-width: 960px) {
    /* Collapse the pink nav strip — the hamburger now lives in the white
       top row alongside the logo, so the separate pink strip is wasted
       vertical space. We don't `display: none` it because the drawer ul
       is still its child and needs to render (position: fixed). Instead
       we strip its background/padding to make it invisible. */
    .main-nav {
        background: transparent !important;
        padding: 0 !important;
        min-height: 0 !important;
        height: 0 !important;
        overflow: visible !important;
    }
    /* Container inside .main-nav is now empty (hamburger moved to
       top-row-inner; only the position:fixed drawer ul remains as
       child). Collapsing it visually: position absolute removes it from
       flow; the fixed drawer is unaffected. */
    .main-nav > .container { position: absolute; height: 0; padding: 0; }

    /* Hamburger button — appended to .top-row-inner by JS. Pink on white,
       so it pops against the top row background. */
    .nav-toggle {
        display: inline-flex;
        margin: 0 0 0 auto;
        width: 44px;
        height: 44px;
        border-radius: 6px;
        background: var(--pink);
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 5px;
        border: 0;
        padding: 0;
        cursor: pointer;
        flex-shrink: 0;
    }
    .nav-toggle:hover, .nav-toggle:focus {
        background: var(--pink-dark);
    }
    /* Recolor the three hamburger lines white (was already white from base
       rule — make sure it stays white when on pink background). */
    .nav-toggle span { background: #fff; }

    /* Backdrop overlay (injected by JS as .nav-backdrop) — dims the page
       behind the drawer and closes the drawer when tapped.
       Re-enabled display here (was display:none at desktop). */
    .nav-backdrop {
        display: block !important;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.45);
        z-index: 199;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
    }
    .nav-backdrop.is-open {
        opacity: 1;
        pointer-events: auto;
    }

    /* Drawer: slides in from the right edge using `right:` positioning
       (more reliable across browsers and easier to debug than transform). */
    .main-nav > div > ul {
        display: flex !important;
        flex-direction: column;
        gap: 0;
        align-items: stretch;
        position: fixed !important;
        top: 0 !important;
        right: -360px;          /* off-screen to the right by default */
        bottom: 0;
        width: min(82%, 340px);
        max-width: 340px;
        height: 100vh;
        background: var(--pink);
        padding: 64px 0 24px;
        overflow-y: auto;
        z-index: 200;
        box-shadow: -8px 0 24px rgba(0,0,0,0.18);
        /* NOTE: no transition on `right`. We previously had
           `transition: right 0.3s ease` here for a slide-in animation,
           but Chrome was cancelling the transition mid-flight and
           locking the computed value at the start (-360px), so the
           drawer never appeared. Without the transition the drawer
           appears instantly — less fancy but rock-solid reliable. */
        -webkit-overflow-scrolling: touch;
        margin: 0 !important;
    }
    .main-nav > div > ul.is-open {
        right: 0 !important;
        left: auto !important;
    }

    /* Close button (X) — injected by JS as .nav-close at the top of the drawer.
       Re-enabled display here (was display:none at desktop). */
    .nav-close {
        display: flex !important;
        position: absolute;
        top: 14px;
        right: 14px;
        width: 36px;
        height: 36px;
        border: 0;
        background: rgba(255,255,255,0.12);
        border-radius: 50%;
        color: #fff;
        font-size: 18px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
        z-index: 201;
    }
    .nav-close:hover { background: rgba(255,255,255,0.22); }

    .main-nav > div > ul > li {
        border-bottom: 1px solid rgba(255,255,255,0.18);
        list-style: none;
        /* Override desktop's display:flex on nav items — on mobile we want
           normal block flow so the submenu (when expanded) can take full
           width below its parent. */
        display: block !important;
        flex-direction: column !important;
        width: 100%;
    }
    .main-nav > div > ul > li:last-child { border-bottom: 0; }
    .main-nav > div > ul > li > a {
        display: block;
        padding: 14px 22px;
        color: #fff !important;
        font-size: 13px;
        letter-spacing: 0.4px;
    }

    /* Social icons row at the bottom of the drawer (injected by JS).
       Flex column with a centered label above and centered icons below.
       Uses real child elements (no ::before tricks) for reliable layout.
       NO top border — the previous menu item's bottom-border already
       provides the visual divider; a second one would render as two
       adjacent lines. */
    .nav-social {
        list-style: none;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important;
        padding: 22px 22px !important;
        margin: 18px 0 0 !important;
        border: 0 !important;
        width: 100%;
        box-sizing: border-box;
    }
    .nav-social-label {
        display: block;
        font-size: 11px;
        letter-spacing: 2.5px;
        color: rgba(255,255,255,0.85);
        font-weight: 600;
        text-align: center;
        text-transform: uppercase;
    }
    .nav-social-icons {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 16px;
    }
    .nav-social-icons a {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        border-radius: 50% !important;
        background: #fff !important;
        color: var(--pink-dark) !important;
        padding: 0 !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.12);
        transition: transform 0.15s ease, box-shadow 0.15s ease;
    }
    .nav-social-icons a:hover, .nav-social-icons a:focus {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    }
    .nav-social-icons svg {
        width: 18px;
        height: 18px;
        fill: var(--pink-dark);
    }

    /* The parent's own link inside its dropdown — slightly emphasised so
       users know they can tap it to actually visit the parent page (the
       header label they tapped just toggles the dropdown).
       Re-enabled display here (was display:none at desktop where the
       parent link is redundant — users can click the nav item itself). */
    .main-nav .submenu li.submenu-parent-link {
        display: block !important;
    }
    .main-nav .submenu li.submenu-parent-link a {
        font-weight: 600 !important;
        color: #fff !important;
        background: rgba(255,255,255,0.10) !important;
        border-left: 3px solid #fff !important;
        padding-left: 41px !important;   /* 44px - 3px border */
    }
    .main-nav .submenu li.submenu-parent-link a:hover {
        background: rgba(255,255,255,0.20) !important;
    }
    .main-nav .submenu {
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        display: none;
        box-shadow: none !important;
        background: rgba(0,0,0,0.08) !important;  /* subtle darker tint on pink */
        border-top: 0 !important;
        border-radius: 0 !important;
        margin: 0 !important;
        padding: 4px 0 8px !important;
        min-width: 0 !important;
        width: 100% !important;
        max-width: none !important;
        opacity: 1 !important;
        transition: none !important;
    }
    .main-nav .submenu.cols-2,
    .main-nav .submenu:has(li:nth-child(11)) { columns: 1 !important; min-width: 0 !important; }
    .main-nav li.has-submenu.is-open .submenu {
        display: block !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .main-nav .submenu li {
        border: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none;
    }
    .main-nav .submenu a {
        display: block !important;
        padding: 10px 22px 10px 44px !important;  /* indent under parent */
        font-size: 13px !important;
        font-weight: 400 !important;
        color: rgba(255,255,255,0.92) !important;
        text-transform: none !important;
        letter-spacing: 0.2px !important;
        background: transparent !important;
        white-space: normal !important;
        line-height: 1.35 !important;
        border-left: 0 !important;
    }
    .main-nav .submenu a:hover, .main-nav .submenu a:active {
        background: rgba(255,255,255,0.12) !important;
        color: #fff !important;
    }
}

@media (max-width: 600px) {
    .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .doctor-profile,
    .doctor-profile.reverse {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .doctor-profile.reverse .doctor-photo { order: 0; }
    .contact-form-wrap { padding: 24px; }
    .services-grid, .stats-grid, .footer-grid { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; }
    .form-bottom { flex-wrap: wrap; }
    .form-bottom .btn { margin-left: 0; width: 100%; }
    .hero { min-height: 380px; }
    .hero-overlay { padding: 70px 0; }
    .hero-content h1 { font-size: 30px; }
    .section { padding: 60px 0; }
    .section-head h2, .col-text h2, .stats-title, .form-head h2 { font-size: 28px; }
    .cta-inner { flex-direction: column; text-align: center; }
    .footer-bottom-inner { flex-direction: column; text-align: center; }
}

/* ============ Universal defensive rules for content media ============
   These make any content from the WordPress export render safely on mobile,
   regardless of inline widths/styles in the original HTML. */
.treatment-main img,
.treatment-main iframe,
.treatment-main video,
.contact-form-wrap img {
    max-width: 100%;
    height: auto;
}
.treatment-main iframe { display: block; }
/* Tables from WP — the hub service-list table renders as a bordered grid.
   On mobile we let it scroll rather than break the page. */
.treatment-main table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    margin: 18px 0 28px;
    font-family: inherit;
}
.treatment-main table td,
.treatment-main table th {
    padding: 16px 22px;
    border: 1px solid #d8d8d8;
    vertical-align: middle;
    line-height: 1.4;
}
.treatment-main table td a {
    color: #3550a0;
    text-decoration: none;
    font-weight: 500;
}
.treatment-main table td a:hover { color: var(--pink-dark); text-decoration: underline; }
@media (max-width: 600px) {
    /* Hub-page Contact Us button (the trailing <p><a class="btn btn-pink">…</a></p>
       after the service table). Without this, the button renders as a small
       136px pill on the left side, looking like it's wedged between the
       table grid rows. Center it, add breathing room, and make it more
       prominent so it reads as the page's CTA. */
    .treatment-main > p:has(> .btn-pink),
    .treatment-main > p:has(> .btn-white) {
        display: block !important;
        text-align: center !important;
        margin: 24px 0 8px !important;
        clear: both !important;
        width: 100%;
        position: relative;
        z-index: 1;
    }
    .treatment-main > p > .btn.btn-pink,
    .treatment-main > p > .btn.btn-white {
        display: inline-block;
        min-width: 200px;
        padding: 12px 28px !important;
        font-weight: 600;
    }

    /* On mobile, convert hub-page service tables into a 2-column grid of
       clean clickable cards. Each cell becomes its own card with rounded
       corners, white background, and pink-tinted link text.
       The !important + explicit overrides defeat the inline
       `width: 105.769%; height: 548px;` that's hard-coded in several
       hub pages (legacy WP/Divi inline styles) — without these the
       table overflows the container and the Contact Us button below it
       looks visually wedged between grid rows. */
    .treatment-main table {
        display: block !important;
        overflow-x: visible !important;
        border: 0 !important;
        margin: 14px 0 4px !important;
        width: 100% !important;
        height: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
    .treatment-main table tbody {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        width: 100%;
    }
    .treatment-main table tr {
        display: contents;
    }
    .treatment-main table td,
    .treatment-main table th {
        display: flex !important;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 14px 8px !important;
        min-height: 64px;
        background: #fff;
        border: 1px solid #e0d9d7 !important;
        border-radius: 6px;
        line-height: 1.3 !important;
        height: auto !important;
        width: auto !important;
    }
    .treatment-main table td p { margin: 0 !important; }
    .treatment-main table td a {
        color: var(--pink-dark) !important;
        font-weight: 600;
        font-size: 13px;
        line-height: 1.3;
    }
    .treatment-main table td a:hover {
        color: var(--pink) !important;
        text-decoration: underline;
    }
}
/* Break long URLs/emails so they don't overflow on mobile */
.treatment-main p, .treatment-main li, .treatment-main h2, .treatment-main h3, .treatment-main h4,
.faq-list summary, .faq-list details p, .post-meta-strip {
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.treatment-main a { word-break: break-word; }
/* Featured/inline images get an upper bound so they don't dwarf the viewport */
.treatment-main img.post-featured {
    width: 100%;
    max-height: 460px;
    object-fit: cover;
}

/* ============ Phone-tier polish (<=600px) ============ */
@media (max-width: 600px) {
    /* Page banner: tighten padding + scale down the H1 */
    .page-banner { padding: 30px 0; min-height: 140px; }
    .page-banner h1 { font-size: 24px; line-height: 1.25; }
    .page-banner .crumbs { font-size: 11px; letter-spacing: 1px; }

    /* Service detail content: reduce heading + body font slightly.
       CRITICAL: line-height must be overridden — desktop sets it to 60px
       (designed for 40px font) which makes mobile's 22px font wrap with
       60px line-boxes, leaving huge gaps between wrapped lines. */
    .treatment-main h1.post-title { font-size: 26px; line-height: 1.2; }
    .treatment-main h2 {
        font-size: 22px !important;
        line-height: 1.25 !important;
        margin: 20px 0 12px !important;
    }
    .treatment-main h3 {
        font-size: 18px !important;
        line-height: 1.3 !important;
        margin: 16px 0 8px !important;
    }
    .treatment-main p, .treatment-main li { font-size: 15px; line-height: 1.6; }

    /* Treatment layout (full-width article): tighten side padding */
    .treatment-main.treatment-fullwidth { padding: 24px 0 50px; }
    .treatment-layout { gap: 30px; padding: 30px 0 50px; }

    /* Featured images: cap height tighter on mobile to avoid scroll-to-content */
    .treatment-main img.post-featured { max-height: 280px; }

    /* Awards/Media tile spacing */
    .awards-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 30px 0 50px; }
    .media-grid { padding: 30px 0 50px; }

    /* Blog list cards */
    .blog-list { gap: 24px; }

    /* Container side padding for very small screens */
    .container { width: 92%; }

    /* Contact map height shorter */
    .contact-map { height: 280px; }

    /* FAQ accordion: a touch tighter */
    .faq-list summary { padding: 14px 18px; font-size: 14px; padding-right: 44px; }
    .faq-list details > p, .faq-list details > div { padding: 0 18px 14px; font-size: 14px; }
}

/* ============ Extra-small (<=380px) safety ============ */
@media (max-width: 380px) {
    .page-banner h1 { font-size: 22px; }
    .top-info-blocks { gap: 14px; }
    .top-info { font-size: 11.5px; }
    /* Very-small phone: tighten top row further */
    .top-row { padding: 8px 0; }
    .logo img { max-height: 48px; }
}

/* =====================================================================
   COMPREHENSIVE MOBILE COMPACTION (<=600px)
   The total page was ~8700px tall on a 375px phone — ~23 screens of
   scrolling. Most of that came from:
     - .section padding 60px top+bottom (×8 sections = 960px wasted)
     - Services grid in 1-column with 5 huge cards (2275px total)
     - Stats grid in 1-column with 4 cards stacked (457px)
     - Footer grid in 1-column with 5 sections (1128px)
   This block compresses all of that to give a normal mobile page (~5500px).
   ===================================================================== */
@media (max-width: 600px) {
    /* All sections: 60px -> 36px vertical padding */
    .section { padding: 36px 0; }

    /* Hero */
    .hero { min-height: 360px; }
    .hero-overlay { padding: 50px 0; }
    .hero-content h1 { font-size: 28px; line-height: 1.15; }
    .hero-sub { font-size: 13px; letter-spacing: 1.5px; }

    /* Who We Are section: tighter padding + smaller image */
    .who-we-are .two-col { gap: 24px; padding: 0 18px; }
    .who-we-are .col-image img { max-height: 220px; object-fit: cover; }
    .col-text h2 { font-size: 26px; margin-bottom: 12px; }
    .col-text p { font-size: 15px; line-height: 1.6; }
    .col-text .btn { margin-top: 16px; }

    /* Doctors section: compact card layout */
    .our-doctors { padding: 30px 0; }
    .doctors-list { gap: 20px; padding: 0 18px; }
    .doctor-item {
        padding: 16px;
        background: #fafafa;
        border-radius: 8px;
        gap: 14px;
    }
    .doctor-icon { font-size: 36px; flex-shrink: 0; }
    .doctor-item h3 { font-size: 17px; margin-bottom: 4px; }
    .doctor-item p { font-size: 13px; line-height: 1.45; }

    /* Services grid: 2-column on mobile (not 1-column) — much shorter total */
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        padding: 0 14px;
    }
    .service-card {
        padding: 16px 12px;
        border-radius: 8px;
    }
    .service-card h3 { font-size: 14px; line-height: 1.25; margin-bottom: 8px; }
    .service-card p { font-size: 12px; line-height: 1.4; margin-bottom: 10px; }
    .service-card .btn { font-size: 12px; padding: 8px 14px; }
    /* Image cap so cards don't go too tall */
    .service-card img { max-height: 110px; object-fit: cover; }

    /* Stats grid: 2×2 (not 1-column stack) */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px 12px;
        padding: 0 18px;
    }
    .stat-number { font-size: 38px !important; }
    .stat-label { font-size: 12px; }

    /* Appointment section: tighter padding */
    .appointment-section { padding: 30px 0; }
    .appointment-section .two-col { gap: 24px; padding: 0 18px; }
    .form-col { padding: 24px 18px !important; }
    .contact-map { height: 240px; }
    /* The homepage Google Maps iframe has inline min-height:520px — too
       tall on mobile. Force override. */
    .appointment-section .map-col iframe { min-height: 240px !important; height: 240px !important; }
    .appointment-section .map-col { min-height: 0; }

    /* CTA strip: compact */
    .cta-section { padding: 30px 18px; }
    .cta-inner h2 { font-size: 22px; }
    .cta-inner .btn { padding: 10px 24px; font-size: 14px; }

    /* Footer: 2-column grid (not 1-column stack) */
    .site-footer { padding-top: 36px; }
    .footer-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 28px 16px !important;
        padding: 0 18px 30px !important;
    }
    .footer-col h4 { font-size: 15px; margin-bottom: 10px; }
    .footer-col ul li { font-size: 13px; line-height: 1.7; }
    .footer-col ul li a { font-size: 13px; }
    .footer-logo { max-height: 64px; margin-bottom: 12px; }
    .contact-list li { font-size: 12.5px; }
    /* All 4 footer columns in 2x2 grid — no full-width override. Address
       column wraps fine in the narrower width. min-width:0 lets grid
       items actually shrink to 1fr (otherwise long unbroken addresses
       force the column wider). */
    .footer-col { min-width: 0; }
    .footer-col, .footer-col a, .footer-col li {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    .footer-col .contact-list a {
        word-break: break-word;
    }
    .footer-disclaimer { padding: 0 18px; font-size: 11.5px; }
    .footer-disclaimer p { font-size: 11.5px; line-height: 1.5; }
    .footer-bottom-inner { padding: 14px 18px; gap: 8px; }
    .footer-legal { gap: 14px; font-size: 11.5px; }

    /* Floating side icons on mobile: small, low-opacity, tucked against
       the viewport edge so they don't visually cover the content text.
       Boost to full opacity on hover/tap. */
    .floating-actions {
        right: 4px;
        gap: 8px;
        top: auto;
        bottom: 18px;       /* anchor near bottom so they don't sit over hero content */
        transform: none;
    }
    .float-btn {
        width: 36px;
        height: 36px;
        opacity: 0.7;
        box-shadow: 0 4px 10px rgba(0,0,0,0.18);
    }
    .float-btn:hover, .float-btn:focus, .float-btn:active { opacity: 1; }
    .float-btn svg { width: 15px; height: 15px; }

    /* Container side padding */
    .container { width: 100%; padding: 0 14px; }

    /* Generic h2 polish in sections */
    .section-head h2 { font-size: 24px; }
    .section-head p { font-size: 14px; }
}

/* Extra-small phone (<=380px): one more pass of tightening */
@media (max-width: 380px) {
    .hero-content h1 { font-size: 24px; }
    .services-grid { gap: 8px; padding: 0 10px; }
    .service-card { padding: 12px 10px; }
    .service-card h3 { font-size: 13px; }
    .footer-grid { gap: 24px 10px !important; padding: 0 14px 24px !important; }
    .container { padding: 0 12px; }
}

/* =====================================================================
   DEFENSIVE OVERFLOW PROTECTION (universal, all phones)
   Final safety net — guarantees no element on the homepage hero or any
   container can exceed viewport width, regardless of which font-size /
   width rules are active. Uses !important to win against any inline
   styles, cached older rules, or specificity battles.
   ===================================================================== */
@media (max-width: 600px) {
    html, body {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
    .hero,
    .hero-overlay,
    .hero-content,
    .hero-content h1,
    .hero-sub,
    .hero-content p,
    .container,
    section:not(.page-section), .section,
    img, iframe, video {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    /* .page-section MUST stay full-bleed via its own 100vw + negative
       margin rule above. Adding it to the universal max-width:100%
       defensive rule clips it to its parent .container's width (~351px)
       instead of the viewport (375px), making the beige stripe look like
       a centered card instead of a full-width band. */
    .page-section {
        max-width: none !important;
    }
    .hero-content h1,
    .hero-sub,
    .hero-content p {
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
        word-break: normal !important;
        hyphens: auto;
    }
    /* Hamburger button — MUST be visible on every phone, no exceptions */
    .nav-toggle {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    /* (Removed earlier `.main-nav { min-height: 56px }` defensive rule —
       the hamburger now lives in the top-row, not in the nav, so the
       nav strip should collapse to zero height on mobile.) */
    /* Hard upper bound on any direct child of body so a single rogue element
       can't blow out the layout. */
    body > * { max-width: 100%; }
    img { height: auto; }
}